-
Notifications
You must be signed in to change notification settings - Fork 16
/
QueueEntryHeaderYouTube.svelte
101 lines (97 loc) · 4.08 KB
/
QueueEntryHeaderYouTube.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<script lang="ts">
import { Duration as PBDuration } from "google-protobuf/google/protobuf/duration_pb";
import { createEventDispatcher } from "svelte";
import { apiClient } from "./api_client";
import type { QueueEntry } from "./proto/jungletv_pb";
import { playerCurrentTime } from "./stores";
import { buildMonKeyURL, formatQueueEntryThumbnailDuration, getReadableUserString } from "./utils";
const dispatch = createEventDispatcher();
export let entry: QueueEntry;
export let isPlaying: boolean;
export let mode: string;
</script>
<div class="flex-shrink-0 thumbnail mr-2" style="width: 120px">
<img
src={entry.getYoutubeVideoData().getThumbnailUrl()}
alt=""
loading="lazy"
width="120"
height="90"
style="max-width: 120px; max-height: 90px; object-fit: contain"
/>
{#if isPlaying}
<div class="thumbnail-now-playing-overlay text-white flex flex-col place-content-center">
<div style="width: auto;" class="flex flex-row place-content-center">
<i class="fas fa-play text-5xl" />
</div>
</div>
{/if}
<div class="thumbnail-length-overlay text-white relative">
<div
class="absolute bottom-0.5 right-0.5 bg-black bg-opacity-80 px-1 py-0.5 font-bold rounded-sm"
style="font-size: 0.7rem; line-height: 0.8rem;"
title={formatQueueEntryThumbnailDuration(entry.getLength())}
>
{formatQueueEntryThumbnailDuration(
!isPlaying || !entry.getYoutubeVideoData().getLiveBroadcast()
? entry.getLength()
: (() => {
let d = new PBDuration();
d.setSeconds(Math.max(entry.getLength().getSeconds() - $playerCurrentTime, 0));
return d;
})(),
entry.getOffset()
)}
</div>
{#if entry.getYoutubeVideoData().getLiveBroadcast()}
<div
style="font-size: 0.7rem; line-height: 0.8rem;"
class="absolute bottom-0.5 left-0.5 bg-black border border-red-500 text-red-500 bg-opacity-80 px-1 py-0.5 font-bold rounded-sm"
>
LIVE
</div>
{/if}
</div>
</div>
<div class="flex flex-col flex-grow overflow-hidden">
<p class="queue-entry-title break-words">
{entry.getYoutubeVideoData().getTitle()}
{#if mode == "moderation"}
| <a href="https://www.youtube.com/watch?v={entry.getYoutubeVideoData().getId()}" target="_blank"
>Watch on YouTube</a
>
{/if}
<br />
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold"
>{entry.getYoutubeVideoData().getChannelTitle()}</span
>
</p>
<p class="text-xs whitespace-nowrap">
{#if entry.hasRequestedBy() && entry.getRequestedBy().getAddress() != ""}
Enqueued by <img
src={buildMonKeyURL(entry.getRequestedBy().getAddress())}
alt=" "
class="inline h-7 w-7 -ml-1 -mt-4 -mb-3 -mr-1 cursor-pointer"
/>
<span
class="{entry.getRequestedBy().hasNickname()
? 'requester-user-nickname'
: 'requester-user-address'} cursor-pointer"
style="font-size: 0.70rem;">{getReadableUserString(entry.getRequestedBy())}</span
>
{:else}
Added by JungleTV (no reward)
{/if}
{#if mode == "moderation"}
| Request cost: {apiClient.formatBANPrice(entry.getRequestCost())} BAN |
<span class="text-blue-600 hover:underline cursor-pointer" on:click={() => dispatch("remove", entry)}
>Remove</span
>
|
<span class="text-blue-600 hover:underline cursor-pointer" on:click={() => dispatch("disallow", entry)}
>Remove and disallow video</span
>
{/if}
</p>
</div>
<style lang="postcss" src="./styles/QueueEntryHeader.postcss"></style>