vod frog, frog with the vods
remove play button, spacebar toggles play/pause
+18
-35
+2
-2
.svelte-kit/generated/server/internal.js
+2
-2
.svelte-kit/generated/server/internal.js
···
22
22
service_worker_options: undefined,
23
23
server_error_boundaries: false,
24
24
templates: {
25
-
app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"icon\" href=\"/frogcursor.png\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <title>vod frog</title>\n " + head + "\n </head>\n <body>\n <div style=\"display: contents\">" + body + "</div>\n </body>\n</html>\n",
25
+
app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"icon\" href=\"/frogicon.png\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <title>vod frog</title>\n " + head + "\n </head>\n <body>\n <div style=\"display: contents\">" + body + "</div>\n </body>\n</html>\n",
26
26
error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
27
27
},
28
-
version_hash: "tbmlr0"
28
+
version_hash: "139m7hs"
29
29
};
30
30
31
31
export async function get_hooks() {
+1
-1
.svelte-kit/non-ambient.d.ts
+1
-1
.svelte-kit/non-ambient.d.ts
···
38
38
};
39
39
Pathname(): "/";
40
40
ResolvedPathname(): `${"" | `/${string}`}${ReturnType<AppTypes['Pathname']>}`;
41
-
Asset(): "/favicon.png" | "/favicon.svg" | "/frogcursor-small.png" | "/frogcursor.png" | "/frogeye.png" | "/froggie.png" | "/froggiejump.png" | "/froggiestand.png" | "/robots.txt" | string & {};
41
+
Asset(): "/favicon.png" | "/favicon.svg" | "/frogcursor-small.png" | "/frogcursor.png" | "/frogeye.png" | "/froggie.png" | "/froggiejump.png" | "/froggiestand.png" | "/frogicon.png" | "/robots.txt" | string & {};
42
42
}
43
43
}
spec/frogicon.png
spec/frogicon.png
This is a binary file and will not be displayed.
+1
-1
src/app.html
+1
-1
src/app.html
+13
-30
src/lib/VideoPlayer.svelte
+13
-30
src/lib/VideoPlayer.svelte
···
188
188
window.removeEventListener("mouseup", onScrubUp);
189
189
}
190
190
191
+
function onKeyDown(e: KeyboardEvent) {
192
+
if (e.code === 'Space' && videoEl) {
193
+
e.preventDefault();
194
+
togglePlay();
195
+
}
196
+
}
197
+
198
+
$effect(() => {
199
+
window.addEventListener('keydown', onKeyDown);
200
+
return () => window.removeEventListener('keydown', onKeyDown);
201
+
});
202
+
191
203
function onMouseActivity() {
192
204
showControls = true;
193
205
if (hideTimeout) clearTimeout(hideTimeout);
···
261
273
<img src="/frogeye.png" alt="fullscreen" class="frogeye" />
262
274
</button>
263
275
264
-
<!-- Play/pause overlay on center when paused -->
265
-
{#if !playing}
266
-
<button class="play-overlay" onclick={togglePlay}>
267
-
<svg viewBox="0 0 24 24"
268
-
><path d="M8 5v14l11-7z" fill="currentColor" /></svg
269
-
>
270
-
</button>
271
-
{/if}
276
+
272
277
273
278
{#if errorMsg}
274
279
<div class="error-overlay">{errorMsg}</div>
···
378
383
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
379
384
}
380
385
381
-
/* Center play button when paused */
382
-
.play-overlay {
383
-
all: unset;
384
-
position: absolute;
385
-
inset: 0;
386
-
display: flex;
387
-
align-items: center;
388
-
justify-content: center;
389
-
cursor: pointer;
390
-
}
391
386
392
-
.play-overlay svg {
393
-
width: 64px;
394
-
height: 64px;
395
-
color: #39ff44;
396
-
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
397
-
transition: transform 0.15s ease;
398
-
}
399
-
400
-
.play-overlay:hover svg {
401
-
transform: scale(1.1);
402
-
color: #ff3992;
403
-
}
404
387
405
388
.error-overlay {
406
389
position: absolute;
+1
-1
src/routes/+layout.svelte
+1
-1
src/routes/+layout.svelte
static/frogicon.png
static/frogicon.png
This is a binary file and will not be displayed.