@rmdes/indiekit-endpoint-youtube 1.2.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/styles.css +214 -0
- package/package.json +2 -1
- package/views/layouts/youtube.njk +6 -0
- package/views/youtube.njk +60 -239
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
/* YouTube endpoint styles */
|
|
2
|
+
|
|
3
|
+
/* Channel header */
|
|
4
|
+
.youtube-channel {
|
|
5
|
+
align-items: center;
|
|
6
|
+
background: var(--color-offset);
|
|
7
|
+
border-radius: var(--radius-m);
|
|
8
|
+
display: flex;
|
|
9
|
+
gap: var(--space-m);
|
|
10
|
+
margin-block-end: var(--space-l);
|
|
11
|
+
padding: var(--space-m);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.youtube-channel__avatar {
|
|
15
|
+
border-radius: 50%;
|
|
16
|
+
flex-shrink: 0;
|
|
17
|
+
height: 64px;
|
|
18
|
+
object-fit: cover;
|
|
19
|
+
width: 64px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.youtube-channel__info {
|
|
23
|
+
flex: 1;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.youtube-channel__name {
|
|
27
|
+
font-size: var(--step-1);
|
|
28
|
+
font-weight: var(--font-weight-semibold);
|
|
29
|
+
margin: 0 0 var(--space-3xs) 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.youtube-channel__stats {
|
|
33
|
+
color: var(--color-text-secondary);
|
|
34
|
+
display: flex;
|
|
35
|
+
font-size: var(--step--1);
|
|
36
|
+
gap: var(--space-m);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Live status badge */
|
|
40
|
+
.youtube-live-badge {
|
|
41
|
+
align-items: center;
|
|
42
|
+
border-radius: 2rem;
|
|
43
|
+
display: inline-flex;
|
|
44
|
+
font-size: var(--step--2);
|
|
45
|
+
font-weight: var(--font-weight-semibold);
|
|
46
|
+
gap: var(--space-xs);
|
|
47
|
+
padding: var(--space-3xs) var(--space-s);
|
|
48
|
+
text-transform: uppercase;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.youtube-live-badge--live {
|
|
52
|
+
animation: youtube-pulse 2s infinite;
|
|
53
|
+
background: #ff0000;
|
|
54
|
+
color: white;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.youtube-live-badge--upcoming {
|
|
58
|
+
background: #065fd4;
|
|
59
|
+
color: white;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.youtube-live-badge--offline {
|
|
63
|
+
background: var(--color-offset);
|
|
64
|
+
color: var(--color-text-secondary);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@keyframes youtube-pulse {
|
|
68
|
+
0%, 100% { opacity: 1; }
|
|
69
|
+
50% { opacity: 0.7; }
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.youtube-live-dot {
|
|
73
|
+
background: currentColor;
|
|
74
|
+
border-radius: 50%;
|
|
75
|
+
height: 8px;
|
|
76
|
+
width: 8px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Live stream card */
|
|
80
|
+
.youtube-live-stream {
|
|
81
|
+
background: linear-gradient(135deg, #ff000010, #ff000005);
|
|
82
|
+
border: 1px solid #ff000030;
|
|
83
|
+
border-radius: var(--radius-m);
|
|
84
|
+
display: flex;
|
|
85
|
+
gap: var(--space-m);
|
|
86
|
+
margin-block-end: var(--space-l);
|
|
87
|
+
padding: var(--space-m);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.youtube-live-stream__thumb {
|
|
91
|
+
border-radius: var(--radius-s);
|
|
92
|
+
flex-shrink: 0;
|
|
93
|
+
height: 90px;
|
|
94
|
+
object-fit: cover;
|
|
95
|
+
width: 160px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.youtube-live-stream__info {
|
|
99
|
+
flex: 1;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.youtube-live-stream__title {
|
|
103
|
+
font-weight: var(--font-weight-semibold);
|
|
104
|
+
margin: 0 0 var(--space-xs) 0;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.youtube-live-stream__title a {
|
|
108
|
+
color: inherit;
|
|
109
|
+
text-decoration: none;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.youtube-live-stream__title a:hover {
|
|
113
|
+
text-decoration: underline;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Video grid */
|
|
117
|
+
.youtube-video-grid {
|
|
118
|
+
display: grid;
|
|
119
|
+
gap: var(--space-m);
|
|
120
|
+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
121
|
+
list-style: none;
|
|
122
|
+
margin: 0;
|
|
123
|
+
padding: 0;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.youtube-video {
|
|
127
|
+
background: var(--color-offset);
|
|
128
|
+
border-radius: var(--radius-m);
|
|
129
|
+
display: flex;
|
|
130
|
+
flex-direction: column;
|
|
131
|
+
overflow: hidden;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.youtube-video__thumb-wrapper {
|
|
135
|
+
aspect-ratio: 16/9;
|
|
136
|
+
position: relative;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.youtube-video__thumb {
|
|
140
|
+
height: 100%;
|
|
141
|
+
object-fit: cover;
|
|
142
|
+
width: 100%;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.youtube-video__duration {
|
|
146
|
+
background: rgba(0, 0, 0, 0.8);
|
|
147
|
+
border-radius: var(--radius-s);
|
|
148
|
+
bottom: var(--space-2xs);
|
|
149
|
+
color: white;
|
|
150
|
+
font-size: var(--step--2);
|
|
151
|
+
font-weight: var(--font-weight-medium);
|
|
152
|
+
padding: var(--space-3xs) var(--space-2xs);
|
|
153
|
+
position: absolute;
|
|
154
|
+
right: var(--space-2xs);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.youtube-video__duration--live {
|
|
158
|
+
background: #ff0000;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.youtube-video__info {
|
|
162
|
+
display: flex;
|
|
163
|
+
flex: 1;
|
|
164
|
+
flex-direction: column;
|
|
165
|
+
padding: var(--space-s);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.youtube-video__title {
|
|
169
|
+
display: -webkit-box;
|
|
170
|
+
font-size: var(--step--1);
|
|
171
|
+
font-weight: var(--font-weight-medium);
|
|
172
|
+
margin: 0 0 var(--space-xs) 0;
|
|
173
|
+
overflow: hidden;
|
|
174
|
+
-webkit-box-orient: vertical;
|
|
175
|
+
-webkit-line-clamp: 2;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.youtube-video__title a {
|
|
179
|
+
color: inherit;
|
|
180
|
+
text-decoration: none;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.youtube-video__title a:hover {
|
|
184
|
+
text-decoration: underline;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.youtube-video__meta {
|
|
188
|
+
color: var(--color-text-secondary);
|
|
189
|
+
font-size: var(--step--2);
|
|
190
|
+
margin-top: auto;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* Multi-channel separator */
|
|
194
|
+
.youtube-channel-section + .youtube-channel-section {
|
|
195
|
+
border-block-start: 1px solid var(--color-border);
|
|
196
|
+
margin-block-start: var(--space-xl);
|
|
197
|
+
padding-block-start: var(--space-xl);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Public link banner */
|
|
201
|
+
.youtube-public-link {
|
|
202
|
+
align-items: center;
|
|
203
|
+
background: var(--color-offset);
|
|
204
|
+
border-radius: var(--radius-m);
|
|
205
|
+
display: flex;
|
|
206
|
+
justify-content: space-between;
|
|
207
|
+
margin-block-start: var(--space-xl);
|
|
208
|
+
padding: var(--space-m);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.youtube-public-link p {
|
|
212
|
+
color: var(--color-text-secondary);
|
|
213
|
+
margin: 0;
|
|
214
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rmdes/indiekit-endpoint-youtube",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.2",
|
|
4
4
|
"description": "YouTube channel endpoint for Indiekit. Display latest videos and live status from any YouTube channel.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"indiekit",
|
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
".": "./index.js"
|
|
34
34
|
},
|
|
35
35
|
"files": [
|
|
36
|
+
"assets",
|
|
36
37
|
"includes",
|
|
37
38
|
"lib",
|
|
38
39
|
"locales",
|
package/views/youtube.njk
CHANGED
|
@@ -1,218 +1,43 @@
|
|
|
1
|
-
{% extends "
|
|
2
|
-
|
|
3
|
-
{% block content %}
|
|
4
|
-
<style>
|
|
5
|
-
.yt-section { margin-bottom: 2rem; }
|
|
6
|
-
.yt-section h2 { margin-bottom: 1rem; }
|
|
7
|
-
|
|
8
|
-
/* Channel header */
|
|
9
|
-
.yt-channel {
|
|
10
|
-
display: flex;
|
|
11
|
-
gap: 1rem;
|
|
12
|
-
padding: 1rem;
|
|
13
|
-
background: var(--color-offset, #f5f5f5);
|
|
14
|
-
border-radius: 0.5rem;
|
|
15
|
-
align-items: center;
|
|
16
|
-
margin-bottom: 1.5rem;
|
|
17
|
-
}
|
|
18
|
-
.yt-channel__avatar {
|
|
19
|
-
width: 64px;
|
|
20
|
-
height: 64px;
|
|
21
|
-
border-radius: 50%;
|
|
22
|
-
object-fit: cover;
|
|
23
|
-
flex-shrink: 0;
|
|
24
|
-
}
|
|
25
|
-
.yt-channel__info { flex: 1; }
|
|
26
|
-
.yt-channel__name {
|
|
27
|
-
font-weight: 600;
|
|
28
|
-
font-size: 1.125rem;
|
|
29
|
-
margin: 0 0 0.25rem 0;
|
|
30
|
-
}
|
|
31
|
-
.yt-channel__stats {
|
|
32
|
-
display: flex;
|
|
33
|
-
gap: 1rem;
|
|
34
|
-
font-size: 0.875rem;
|
|
35
|
-
color: var(--color-text-secondary, #666);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
/* Live status badge */
|
|
39
|
-
.yt-live-badge {
|
|
40
|
-
display: inline-flex;
|
|
41
|
-
align-items: center;
|
|
42
|
-
gap: 0.5rem;
|
|
43
|
-
padding: 0.25rem 0.75rem;
|
|
44
|
-
border-radius: 2rem;
|
|
45
|
-
font-size: 0.75rem;
|
|
46
|
-
font-weight: 600;
|
|
47
|
-
text-transform: uppercase;
|
|
48
|
-
}
|
|
49
|
-
.yt-live-badge--live {
|
|
50
|
-
background: #ff0000;
|
|
51
|
-
color: white;
|
|
52
|
-
animation: yt-pulse 2s infinite;
|
|
53
|
-
}
|
|
54
|
-
.yt-live-badge--upcoming {
|
|
55
|
-
background: #065fd4;
|
|
56
|
-
color: white;
|
|
57
|
-
}
|
|
58
|
-
.yt-live-badge--offline {
|
|
59
|
-
background: var(--color-offset, #e5e5e5);
|
|
60
|
-
color: var(--color-text-secondary, #666);
|
|
61
|
-
}
|
|
62
|
-
@keyframes yt-pulse {
|
|
63
|
-
0%, 100% { opacity: 1; }
|
|
64
|
-
50% { opacity: 0.7; }
|
|
65
|
-
}
|
|
66
|
-
.yt-live-dot {
|
|
67
|
-
width: 8px;
|
|
68
|
-
height: 8px;
|
|
69
|
-
border-radius: 50%;
|
|
70
|
-
background: currentColor;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
/* Live stream card */
|
|
74
|
-
.yt-live-stream {
|
|
75
|
-
display: flex;
|
|
76
|
-
gap: 1rem;
|
|
77
|
-
padding: 1rem;
|
|
78
|
-
background: linear-gradient(135deg, #ff000010, #ff000005);
|
|
79
|
-
border: 1px solid #ff000030;
|
|
80
|
-
border-radius: 0.5rem;
|
|
81
|
-
margin-bottom: 1.5rem;
|
|
82
|
-
}
|
|
83
|
-
.yt-live-stream__thumb {
|
|
84
|
-
width: 160px;
|
|
85
|
-
height: 90px;
|
|
86
|
-
object-fit: cover;
|
|
87
|
-
border-radius: 0.25rem;
|
|
88
|
-
flex-shrink: 0;
|
|
89
|
-
}
|
|
90
|
-
.yt-live-stream__info { flex: 1; }
|
|
91
|
-
.yt-live-stream__title {
|
|
92
|
-
font-weight: 600;
|
|
93
|
-
margin: 0 0 0.5rem 0;
|
|
94
|
-
}
|
|
95
|
-
.yt-live-stream__title a {
|
|
96
|
-
color: inherit;
|
|
97
|
-
text-decoration: none;
|
|
98
|
-
}
|
|
99
|
-
.yt-live-stream__title a:hover { text-decoration: underline; }
|
|
100
|
-
|
|
101
|
-
/* Video grid */
|
|
102
|
-
.yt-video-grid {
|
|
103
|
-
display: grid;
|
|
104
|
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
105
|
-
gap: 1rem;
|
|
106
|
-
list-style: none;
|
|
107
|
-
padding: 0;
|
|
108
|
-
margin: 0;
|
|
109
|
-
}
|
|
110
|
-
.yt-video {
|
|
111
|
-
display: flex;
|
|
112
|
-
flex-direction: column;
|
|
113
|
-
background: var(--color-offset, #f5f5f5);
|
|
114
|
-
border-radius: 0.5rem;
|
|
115
|
-
overflow: hidden;
|
|
116
|
-
}
|
|
117
|
-
.yt-video__thumb-wrapper {
|
|
118
|
-
position: relative;
|
|
119
|
-
aspect-ratio: 16/9;
|
|
120
|
-
}
|
|
121
|
-
.yt-video__thumb {
|
|
122
|
-
width: 100%;
|
|
123
|
-
height: 100%;
|
|
124
|
-
object-fit: cover;
|
|
125
|
-
}
|
|
126
|
-
.yt-video__duration {
|
|
127
|
-
position: absolute;
|
|
128
|
-
bottom: 0.5rem;
|
|
129
|
-
right: 0.5rem;
|
|
130
|
-
background: rgba(0, 0, 0, 0.8);
|
|
131
|
-
color: white;
|
|
132
|
-
padding: 0.125rem 0.375rem;
|
|
133
|
-
border-radius: 0.25rem;
|
|
134
|
-
font-size: 0.75rem;
|
|
135
|
-
font-weight: 500;
|
|
136
|
-
}
|
|
137
|
-
.yt-video__info {
|
|
138
|
-
padding: 0.75rem;
|
|
139
|
-
flex: 1;
|
|
140
|
-
display: flex;
|
|
141
|
-
flex-direction: column;
|
|
142
|
-
}
|
|
143
|
-
.yt-video__title {
|
|
144
|
-
font-weight: 500;
|
|
145
|
-
font-size: 0.875rem;
|
|
146
|
-
margin: 0 0 0.5rem 0;
|
|
147
|
-
display: -webkit-box;
|
|
148
|
-
-webkit-line-clamp: 2;
|
|
149
|
-
-webkit-box-orient: vertical;
|
|
150
|
-
overflow: hidden;
|
|
151
|
-
}
|
|
152
|
-
.yt-video__title a {
|
|
153
|
-
color: inherit;
|
|
154
|
-
text-decoration: none;
|
|
155
|
-
}
|
|
156
|
-
.yt-video__title a:hover { text-decoration: underline; }
|
|
157
|
-
.yt-video__meta {
|
|
158
|
-
font-size: 0.75rem;
|
|
159
|
-
color: var(--color-text-secondary, #666);
|
|
160
|
-
margin-top: auto;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
/* Public link banner */
|
|
164
|
-
.yt-public-link {
|
|
165
|
-
display: flex;
|
|
166
|
-
align-items: center;
|
|
167
|
-
justify-content: space-between;
|
|
168
|
-
padding: 1rem;
|
|
169
|
-
background: var(--color-offset, #f5f5f5);
|
|
170
|
-
border-radius: 0.5rem;
|
|
171
|
-
margin-top: 2rem;
|
|
172
|
-
}
|
|
173
|
-
.yt-public-link p {
|
|
174
|
-
margin: 0;
|
|
175
|
-
color: var(--color-text-secondary, #666);
|
|
176
|
-
}
|
|
177
|
-
</style>
|
|
1
|
+
{% extends "layouts/youtube.njk" %}
|
|
178
2
|
|
|
3
|
+
{% block youtube %}
|
|
179
4
|
{% if error %}
|
|
180
5
|
{{ prose({ text: error.message }) }}
|
|
181
6
|
{% elif isMultiChannel and channelsData %}
|
|
182
7
|
{# Multi-channel mode: show all channels #}
|
|
183
8
|
{% for chData in channelsData %}
|
|
184
|
-
<div class="
|
|
9
|
+
<div class="youtube-channel-section">
|
|
185
10
|
{# Channel Header #}
|
|
186
11
|
{% if chData.error %}
|
|
187
|
-
<div class="
|
|
188
|
-
<div class="
|
|
189
|
-
<h2 class="
|
|
12
|
+
<div class="youtube-channel" style="border: 1px solid #ff6b6b;">
|
|
13
|
+
<div class="youtube-channel__info">
|
|
14
|
+
<h2 class="youtube-channel__name">{{ chData.name }}</h2>
|
|
190
15
|
<p style="color: #ff6b6b; margin: 0;">Error: {{ chData.error }}</p>
|
|
191
16
|
</div>
|
|
192
17
|
</div>
|
|
193
18
|
{% elif chData.channel %}
|
|
194
|
-
<div class="
|
|
19
|
+
<div class="youtube-channel">
|
|
195
20
|
{% if chData.channel.thumbnail %}
|
|
196
|
-
<img src="{{ chData.channel.thumbnail }}" alt="" class="
|
|
21
|
+
<img src="{{ chData.channel.thumbnail }}" alt="" class="youtube-channel__avatar">
|
|
197
22
|
{% endif %}
|
|
198
|
-
<div class="
|
|
199
|
-
<h2 class="
|
|
200
|
-
<div class="
|
|
23
|
+
<div class="youtube-channel__info">
|
|
24
|
+
<h2 class="youtube-channel__name">{{ chData.channel.title }}</h2>
|
|
25
|
+
<div class="youtube-channel__stats">
|
|
201
26
|
<span>{{ chData.channel.subscriberCount }} {{ __("youtube.subscribers") }}</span>
|
|
202
27
|
<span>{{ chData.channel.videoCount }} videos</span>
|
|
203
28
|
</div>
|
|
204
29
|
</div>
|
|
205
30
|
{% if chData.isLive %}
|
|
206
|
-
<span class="
|
|
207
|
-
<span class="
|
|
31
|
+
<span class="youtube-live-badge youtube-live-badge--live">
|
|
32
|
+
<span class="youtube-live-dot"></span>
|
|
208
33
|
{{ __("youtube.live") }}
|
|
209
34
|
</span>
|
|
210
35
|
{% elif chData.isUpcoming %}
|
|
211
|
-
<span class="
|
|
36
|
+
<span class="youtube-live-badge youtube-live-badge--upcoming">
|
|
212
37
|
{{ __("youtube.upcoming") }}
|
|
213
38
|
</span>
|
|
214
39
|
{% else %}
|
|
215
|
-
<span class="
|
|
40
|
+
<span class="youtube-live-badge youtube-live-badge--offline">
|
|
216
41
|
{{ __("youtube.offline") }}
|
|
217
42
|
</span>
|
|
218
43
|
{% endif %}
|
|
@@ -220,14 +45,13 @@
|
|
|
220
45
|
|
|
221
46
|
{# Live Stream (if live) #}
|
|
222
47
|
{% if chData.liveStatus and (chData.liveStatus.isLive or chData.liveStatus.isUpcoming) %}
|
|
223
|
-
|
|
224
|
-
<
|
|
225
|
-
<div class="yt-live-stream">
|
|
48
|
+
{% call section({ title: chData.liveStatus.isLive and __("youtube.live") or __("youtube.upcoming") }) %}
|
|
49
|
+
<div class="youtube-live-stream">
|
|
226
50
|
{% if chData.liveStatus.thumbnail %}
|
|
227
|
-
<img src="{{ chData.liveStatus.thumbnail }}" alt="" class="
|
|
51
|
+
<img src="{{ chData.liveStatus.thumbnail }}" alt="" class="youtube-live-stream__thumb">
|
|
228
52
|
{% endif %}
|
|
229
|
-
<div class="
|
|
230
|
-
<h4 class="
|
|
53
|
+
<div class="youtube-live-stream__info">
|
|
54
|
+
<h4 class="youtube-live-stream__title">
|
|
231
55
|
<a href="https://www.youtube.com/watch?v={{ chData.liveStatus.videoId }}" target="_blank" rel="noopener">
|
|
232
56
|
{{ chData.liveStatus.title }}
|
|
233
57
|
</a>
|
|
@@ -239,31 +63,30 @@
|
|
|
239
63
|
}) }}
|
|
240
64
|
</div>
|
|
241
65
|
</div>
|
|
242
|
-
|
|
66
|
+
{% endcall %}
|
|
243
67
|
{% endif %}
|
|
244
68
|
|
|
245
69
|
{# Latest Videos #}
|
|
246
|
-
|
|
247
|
-
<h3>{{ __("youtube.videos") }}</h3>
|
|
70
|
+
{% call section({ title: __("youtube.videos") }) %}
|
|
248
71
|
{% if chData.videos and chData.videos.length > 0 %}
|
|
249
|
-
<ul class="
|
|
72
|
+
<ul class="youtube-video-grid">
|
|
250
73
|
{% for video in chData.videos %}
|
|
251
|
-
<li class="
|
|
252
|
-
<div class="
|
|
74
|
+
<li class="youtube-video">
|
|
75
|
+
<div class="youtube-video__thumb-wrapper">
|
|
253
76
|
<a href="{{ video.url }}" target="_blank" rel="noopener">
|
|
254
|
-
<img src="{{ video.thumbnail }}" alt="" class="
|
|
77
|
+
<img src="{{ video.thumbnail }}" alt="" class="youtube-video__thumb" loading="lazy">
|
|
255
78
|
</a>
|
|
256
79
|
{% if video.durationFormatted and not video.isLive %}
|
|
257
|
-
<span class="
|
|
80
|
+
<span class="youtube-video__duration">{{ video.durationFormatted }}</span>
|
|
258
81
|
{% elif video.isLive %}
|
|
259
|
-
<span class="
|
|
82
|
+
<span class="youtube-video__duration youtube-video__duration--live">LIVE</span>
|
|
260
83
|
{% endif %}
|
|
261
84
|
</div>
|
|
262
|
-
<div class="
|
|
263
|
-
<h4 class="
|
|
85
|
+
<div class="youtube-video__info">
|
|
86
|
+
<h4 class="youtube-video__title">
|
|
264
87
|
<a href="{{ video.url }}" target="_blank" rel="noopener">{{ video.title }}</a>
|
|
265
88
|
</h4>
|
|
266
|
-
<div class="
|
|
89
|
+
<div class="youtube-video__meta">
|
|
267
90
|
{{ video.viewCount }} {{ __("youtube.views") }}
|
|
268
91
|
</div>
|
|
269
92
|
</div>
|
|
@@ -273,10 +96,10 @@
|
|
|
273
96
|
{% else %}
|
|
274
97
|
{{ prose({ text: __("youtube.noVideos") }) }}
|
|
275
98
|
{% endif %}
|
|
276
|
-
|
|
99
|
+
{% endcall %}
|
|
277
100
|
|
|
278
101
|
{# Link to YouTube channel #}
|
|
279
|
-
<div class="
|
|
102
|
+
<div class="youtube-public-link" style="margin-top: var(--space-m);">
|
|
280
103
|
<p>{{ __("youtube.widget.description") }}</p>
|
|
281
104
|
{{ button({
|
|
282
105
|
href: "https://www.youtube.com/channel/" + chData.channel.id,
|
|
@@ -291,28 +114,28 @@
|
|
|
291
114
|
{# Single channel mode (backward compatible) #}
|
|
292
115
|
{# Channel Header #}
|
|
293
116
|
{% if channel %}
|
|
294
|
-
<div class="
|
|
117
|
+
<div class="youtube-channel">
|
|
295
118
|
{% if channel.thumbnail %}
|
|
296
|
-
<img src="{{ channel.thumbnail }}" alt="" class="
|
|
119
|
+
<img src="{{ channel.thumbnail }}" alt="" class="youtube-channel__avatar">
|
|
297
120
|
{% endif %}
|
|
298
|
-
<div class="
|
|
299
|
-
<h2 class="
|
|
300
|
-
<div class="
|
|
121
|
+
<div class="youtube-channel__info">
|
|
122
|
+
<h2 class="youtube-channel__name">{{ channel.title }}</h2>
|
|
123
|
+
<div class="youtube-channel__stats">
|
|
301
124
|
<span>{{ channel.subscriberCount }} {{ __("youtube.subscribers") }}</span>
|
|
302
125
|
<span>{{ channel.videoCount }} videos</span>
|
|
303
126
|
</div>
|
|
304
127
|
</div>
|
|
305
128
|
{% if isLive %}
|
|
306
|
-
<span class="
|
|
307
|
-
<span class="
|
|
129
|
+
<span class="youtube-live-badge youtube-live-badge--live">
|
|
130
|
+
<span class="youtube-live-dot"></span>
|
|
308
131
|
{{ __("youtube.live") }}
|
|
309
132
|
</span>
|
|
310
133
|
{% elif isUpcoming %}
|
|
311
|
-
<span class="
|
|
134
|
+
<span class="youtube-live-badge youtube-live-badge--upcoming">
|
|
312
135
|
{{ __("youtube.upcoming") }}
|
|
313
136
|
</span>
|
|
314
137
|
{% else %}
|
|
315
|
-
<span class="
|
|
138
|
+
<span class="youtube-live-badge youtube-live-badge--offline">
|
|
316
139
|
{{ __("youtube.offline") }}
|
|
317
140
|
</span>
|
|
318
141
|
{% endif %}
|
|
@@ -321,14 +144,13 @@
|
|
|
321
144
|
|
|
322
145
|
{# Live Stream (if live) #}
|
|
323
146
|
{% if liveStatus and (liveStatus.isLive or liveStatus.isUpcoming) %}
|
|
324
|
-
|
|
325
|
-
<
|
|
326
|
-
<div class="yt-live-stream">
|
|
147
|
+
{% call section({ title: liveStatus.isLive and __("youtube.live") or __("youtube.upcoming") }) %}
|
|
148
|
+
<div class="youtube-live-stream">
|
|
327
149
|
{% if liveStatus.thumbnail %}
|
|
328
|
-
<img src="{{ liveStatus.thumbnail }}" alt="" class="
|
|
150
|
+
<img src="{{ liveStatus.thumbnail }}" alt="" class="youtube-live-stream__thumb">
|
|
329
151
|
{% endif %}
|
|
330
|
-
<div class="
|
|
331
|
-
<h3 class="
|
|
152
|
+
<div class="youtube-live-stream__info">
|
|
153
|
+
<h3 class="youtube-live-stream__title">
|
|
332
154
|
<a href="https://www.youtube.com/watch?v={{ liveStatus.videoId }}" target="_blank" rel="noopener">
|
|
333
155
|
{{ liveStatus.title }}
|
|
334
156
|
</a>
|
|
@@ -340,31 +162,30 @@
|
|
|
340
162
|
}) }}
|
|
341
163
|
</div>
|
|
342
164
|
</div>
|
|
343
|
-
|
|
165
|
+
{% endcall %}
|
|
344
166
|
{% endif %}
|
|
345
167
|
|
|
346
168
|
{# Latest Videos #}
|
|
347
|
-
|
|
348
|
-
<h2>{{ __("youtube.videos") }}</h2>
|
|
169
|
+
{% call section({ title: __("youtube.videos") }) %}
|
|
349
170
|
{% if videos and videos.length > 0 %}
|
|
350
|
-
<ul class="
|
|
171
|
+
<ul class="youtube-video-grid">
|
|
351
172
|
{% for video in videos %}
|
|
352
|
-
<li class="
|
|
353
|
-
<div class="
|
|
173
|
+
<li class="youtube-video">
|
|
174
|
+
<div class="youtube-video__thumb-wrapper">
|
|
354
175
|
<a href="{{ video.url }}" target="_blank" rel="noopener">
|
|
355
|
-
<img src="{{ video.thumbnail }}" alt="" class="
|
|
176
|
+
<img src="{{ video.thumbnail }}" alt="" class="youtube-video__thumb" loading="lazy">
|
|
356
177
|
</a>
|
|
357
178
|
{% if video.durationFormatted and not video.isLive %}
|
|
358
|
-
<span class="
|
|
179
|
+
<span class="youtube-video__duration">{{ video.durationFormatted }}</span>
|
|
359
180
|
{% elif video.isLive %}
|
|
360
|
-
<span class="
|
|
181
|
+
<span class="youtube-video__duration youtube-video__duration--live">LIVE</span>
|
|
361
182
|
{% endif %}
|
|
362
183
|
</div>
|
|
363
|
-
<div class="
|
|
364
|
-
<h3 class="
|
|
184
|
+
<div class="youtube-video__info">
|
|
185
|
+
<h3 class="youtube-video__title">
|
|
365
186
|
<a href="{{ video.url }}" target="_blank" rel="noopener">{{ video.title }}</a>
|
|
366
187
|
</h3>
|
|
367
|
-
<div class="
|
|
188
|
+
<div class="youtube-video__meta">
|
|
368
189
|
{{ video.viewCount }} {{ __("youtube.views") }}
|
|
369
190
|
</div>
|
|
370
191
|
</div>
|
|
@@ -374,11 +195,11 @@
|
|
|
374
195
|
{% else %}
|
|
375
196
|
{{ prose({ text: __("youtube.noVideos") }) }}
|
|
376
197
|
{% endif %}
|
|
377
|
-
|
|
198
|
+
{% endcall %}
|
|
378
199
|
|
|
379
200
|
{# Link to YouTube channel #}
|
|
380
201
|
{% if channel %}
|
|
381
|
-
<div class="
|
|
202
|
+
<div class="youtube-public-link">
|
|
382
203
|
<p>{{ __("youtube.widget.description") }}</p>
|
|
383
204
|
{{ button({
|
|
384
205
|
href: "https://www.youtube.com/channel/" + channel.id,
|