vod frog, frog with the vods
add tangled pipeline: build and deploy to wisp on push to main
+50
-11
+36
.tangled/workflows/deploy.yaml
+36
.tangled/workflows/deploy.yaml
···
1
+
when:
2
+
- event: ["push"]
3
+
branch: ["main"]
4
+
5
+
engine: "nixery"
6
+
7
+
dependencies:
8
+
nixpkgs:
9
+
- nodejs
10
+
- nodePackages.npm
11
+
12
+
environment:
13
+
WISP_PASSWORD: "${{ secrets.WISP_PASSWORD }}"
14
+
WISP_HANDLE: "goose.art"
15
+
WISP_SITE: "vodfrog"
16
+
17
+
steps:
18
+
- name: "install"
19
+
run: "npm ci"
20
+
21
+
- name: "build"
22
+
run: "npm run build"
23
+
24
+
- name: "install wisp-cli"
25
+
run: |
26
+
curl -L -o /tmp/wisp-cli https://github.com/psky-atp/wisp-cli/releases/latest/download/wisp-cli-x86_64-unknown-linux-gnu
27
+
chmod +x /tmp/wisp-cli
28
+
29
+
- name: "deploy to wisp"
30
+
run: |
31
+
/tmp/wisp-cli deploy "$WISP_HANDLE" \
32
+
--path build \
33
+
--site "$WISP_SITE" \
34
+
--password "$WISP_PASSWORD" \
35
+
--spa \
36
+
-y
+14
-11
src/lib/VideoPlayer.svelte
+14
-11
src/lib/VideoPlayer.svelte
···
51
51
hls.on(Hls.Events.MANIFEST_PARSED, () => {
52
52
videoEl?.play().catch(() => {});
53
53
// Warn Safari users about Opus audio
54
-
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
54
+
const isSafari = /^((?!chrome|android).)*safari/i.test(
55
+
navigator.userAgent,
56
+
);
55
57
if (isSafari) {
56
-
errorMsg = '🐸 Audio may not work in Safari — these streams use Opus. Try Chrome or Firefox for sound.';
58
+
errorMsg =
59
+
"🐸 Audio may not work in Safari — these streams use Opus. Try Chrome or Firefox for sound.";
57
60
}
58
61
});
59
62
hls.on(Hls.Events.ERROR, (_event, data) => {
···
207
210
}
208
211
209
212
function onKeyDown(e: KeyboardEvent) {
210
-
if (e.code === 'Space' && videoEl) {
213
+
if (e.code === "Space" && videoEl) {
211
214
e.preventDefault();
212
215
togglePlay();
213
216
}
214
217
}
215
218
216
219
$effect(() => {
217
-
window.addEventListener('keydown', onKeyDown);
218
-
return () => window.removeEventListener('keydown', onKeyDown);
220
+
window.addEventListener("keydown", onKeyDown);
221
+
return () => window.removeEventListener("keydown", onKeyDown);
219
222
});
220
223
221
224
/** Show controls on mouse activity, auto-hide after 2.5s of inactivity during playback */
···
264
267
tabindex={0}
265
268
>
266
269
<!-- Lilypad at the start -->
267
-
<img src="/lilypad.png" alt="" class="lilypad lilypad-start" />
270
+
<img
271
+
src="/lilystart.png"
272
+
alt=""
273
+
class="lilypad lilypad-start"
274
+
/>
268
275
269
276
<!-- svelte-ignore a11y_no_static_element_interactions -->
270
277
<div
···
298
305
<img src="/frogeye.png" alt="fullscreen" class="frogeye" />
299
306
</button>
300
307
301
-
302
-
303
308
{#if errorMsg}
304
309
<div class="error-overlay">{errorMsg}</div>
305
310
{/if}
306
311
</div>
307
312
</WavyBorder>
313
+
>
308
314
309
315
<style>
310
316
.player-wrapper {
···
426
432
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
427
433
}
428
434
429
-
430
-
431
435
.error-overlay {
432
436
position: absolute;
433
437
bottom: 15%;
···
441
445
font-size: 0.8rem;
442
446
}
443
447
</style>
444
-
>