blob: 3d59fd721aac11b3cb1b384e1f9799218a00b791 (
plain) (
blame)
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
102
103
104
105
106
|
<script lang="ts">
import identity from '$stores/identity';
import locale from '$stores/locale';
import Icon from '@iconify/svelte';
export let live: any;
export let pinStream: (streamer: string) => void;
export let pinnedStreams: string[];
</script>
<div class="stream card">
{#if $identity.id !== -2}
<div class="pin-icon">
<a
href={'#'}
on:click={(e) => {
e.preventDefault();
pinStream(live.streamer);
}}
>
<Icon
icon={`pajamas:thumbtack${pinnedStreams.includes(live.streamer) ? '-solid' : ''}`}
width="1em"
/>
</a>
</div>
{/if}
<p class="stream-heading">
[{#if live.streaming}
<b class="live">{$locale().hololive.live}</b
>{:else if new Date(live.time).getTime() < Date.now()}
<span class="ended">{$locale().hololive.ended}</span>{:else}
<span class="upcoming">{$locale().hololive.upcoming}</span>{/if}]
<b>{live.streamer}</b> <span class="opaque">|</span>
{$locale().hololive.dateFormatter(new Date(live.time))}
{#if live.guests.length > 0}
<br />
<small>
{$locale().hololive.with}{live.guests
.join($locale().hololive.comma)
.replace(
new RegExp(`${$locale().hololive.comma}([^${$locale().hololive.commaNoSpace}]+)$`, 'g'),
`${$locale().hololive.comma}${$locale().hololive.ampersand}$1`
)}
</small>
{/if}
</p>
<a href={live.link} class="preview" target="_blank">
<img src={live.livePreviewImage} alt="Stream Thumbnail" />
</a>
</div>
<style lang="scss">
.preview {
// margin: 0.15rem;
img {
border-radius: 8px;
height: 20vh;
object-fit: cover;
transition: transform 0.3s ease;
}
&:hover {
img {
position: relative;
z-index: 2;
transition: transform 0.3s ease;
transform: scale(1.05);
}
}
display: flex;
justify-content: center;
align-items: center;
}
.live {
color: var(--base0F);
}
.upcoming {
color: var(--base0C);
}
.ended {
color: var(--base0D);
}
.pin-icon {
position: absolute;
right: 0;
top: 0;
padding: 0.75rem;
}
.stream {
position: relative;
}
.stream-heading {
padding-right: 2em;
}
</style>
|