Non-official site for The Life Series Minecraft hardcore survival multiplayer series housing every video
www.life-series.online
Show video thumbnails (#66)
authored by
GitHub
729c3e07
10ef7cdc
+20
-34
+16
-23
src/components/rewrite/VideoItem.astro
+16
-23
src/components/rewrite/VideoItem.astro
···
1
1
---
2
-
import { Icon } from 'astro-icon/components';
3
-
4
2
interface Props {
5
3
ytId: string;
6
4
title: string;
···
10
8
---
11
9
12
10
<a href={`https://www.youtube.com/watch?v=${ytId}`}>
13
-
<span class="cluster gap-text-icon">
14
-
<Icon name="lucide:arrow-up-right" role="img" title="Watch on YouTube" />
15
-
<span>{title}</span>
16
-
</span>
11
+
<img
12
+
src={`https://i.ytimg.com/vi_webp/${ytId}/maxresdefault.webp`}
13
+
alt={`Watch "${title}" on YouTube`}
14
+
width="1280"
15
+
height="720"
16
+
loading="lazy"
17
+
decoding="async"
18
+
/>
17
19
</a>
18
20
19
21
<style>
20
22
a {
21
-
box-sizing: border-box;
22
-
display: grid;
23
-
place-items: center;
24
-
max-width: var(--video-max-width, 720px);
23
+
display: block;
24
+
max-width: 1080px;
25
25
aspect-ratio: 16 / 9;
26
-
padding: 16px;
27
-
background-color: var(--color-surface-1);
28
-
border: 1px solid var(--color-surface-2);
29
-
text-wrap: balance;
30
-
text-align: center;
31
-
line-height: 1.5;
32
-
font-size: clamp(1rem, 0.9107rem + 0.4464vw, 1.125rem);
33
-
font-weight: var(--font-weight-body);
34
-
35
-
--cluster-direction: column;
36
26
37
27
&:focus-visible {
38
28
outline-offset: 8px;
39
29
outline: 4px solid;
40
30
}
31
+
}
41
32
42
-
span {
43
-
max-width: 40ch;
44
-
}
33
+
img {
34
+
inline-size: 100%;
35
+
block-size: 100%;
36
+
object-fit: cover;
37
+
background-color: var(--color-surface-1);
45
38
}
46
39
</style>
+3
-9
src/pages/rewrite/seasons/[season_id]/[member_name].astro
+3
-9
src/pages/rewrite/seasons/[season_id]/[member_name].astro
···
121
121
<ol role="list" class="flow session-list">
122
122
{sessions.map((session, i) => (
123
123
<li>
124
-
<h3>
125
-
<VideoItem ytId={session.id} title={`Session ${i + 1} - ${session.title}`} />
126
-
</h3>
124
+
<VideoItem ytId={session.id} title={`Session ${i + 1} - ${session.title}`} />
127
125
</li>
128
126
))}
129
127
</ol>
···
172
170
--flow-space: clamp(48px, 25.7391px + 6.9565cqi, 160px);
173
171
}
174
172
175
-
.movie-wrapper {
176
-
--video-max-width: 1080px;
177
-
178
-
> * + * {
179
-
--flow-space: 1em;
180
-
}
173
+
.movie-wrapper > * + * {
174
+
--flow-space: 1em;
181
175
}
182
176
183
177
.session-wrapper > * + * {
+1
-2
src/pages/rewrite/seasons/[season_id]/sessions/[session_id].astro
+1
-2
src/pages/rewrite/seasons/[season_id]/sessions/[session_id].astro
···
34
34
return {
35
35
params: { season_id: season.id, session_id: sessionNumber },
36
36
props: {
37
-
members: membersCollection,
38
37
season,
39
38
sessionNumber,
40
39
sessionNumbers,
···
51
50
(page) => page.params.season_id === season_id && `${page.params.session_id}` === session_id,
52
51
);
53
52
if (!page) return Astro.redirect('/404');
54
-
const { members, season, sessionNumber, sessionNumbers, sessions } = page.props;
53
+
const { season, sessionNumber, sessionNumbers, sessions } = page.props;
55
54
56
55
const pageTitle = `Session ${sessionNumber} - ${season.data.title}`;
57
56