vod frog, frog with the vods
remove Safari audio warning (AAC now available), add touch support for frog scrub and controls
+19
-14
+19
-14
src/lib/VideoPlayer.svelte
+19
-14
src/lib/VideoPlayer.svelte
···
50
50
hls.attachMedia(videoEl);
51
51
hls.on(Hls.Events.MANIFEST_PARSED, () => {
52
52
videoEl?.play().catch(() => {});
53
-
// Warn Safari users about Opus audio
54
-
const isSafari = /^((?!chrome|android).)*safari/i.test(
55
-
navigator.userAgent,
56
-
);
57
-
if (isSafari) {
58
-
errorMsg =
59
-
"🐸 Audio may not work in Safari — these streams use Opus. Try Chrome or Firefox for sound.";
60
-
}
61
53
});
62
54
hls.on(Hls.Events.ERROR, (_event, data) => {
63
55
console.error("HLS error:", data);
···
145
137
isFullscreen = !!document.fullscreenElement;
146
138
}
147
139
148
-
/** Calculate seek position from a mouse event on the scrub bar */
149
-
function scrubFromEvent(e: MouseEvent) {
140
+
/** Calculate seek position from a mouse or touch event on the scrub bar */
141
+
function scrubFromEvent(e: MouseEvent | TouchEvent) {
150
142
if (!scrubBarEl) return;
143
+
const clientX = 'touches' in e ? e.touches[0]?.clientX ?? e.changedTouches[0]?.clientX ?? 0 : e.clientX;
151
144
const rect = scrubBarEl.getBoundingClientRect();
152
145
const pct = Math.max(
153
146
0,
154
-
Math.min(1, (e.clientX - rect.left) / rect.width),
147
+
Math.min(1, (clientX - rect.left) / rect.width),
155
148
);
156
149
const delta = pct - lastFrogProgress;
157
150
if (Math.abs(delta) > 0.02) {
···
174
167
let wasPlayingBeforeScrub = false; // Resume playback after scrub if it was playing
175
168
176
169
/** Start scrubbing — pause video to prevent buffering issues (especially Firefox) */
177
-
function onScrubDown(e: MouseEvent) {
170
+
function onScrubDown(e: MouseEvent | TouchEvent) {
178
171
e.preventDefault();
179
172
isScrubbing = true;
180
173
wasPlayingBeforeScrub = !!(videoEl && !videoEl.paused);
···
182
175
scrubFromEvent(e);
183
176
window.addEventListener("mousemove", onScrubMove);
184
177
window.addEventListener("mouseup", onScrubUp);
178
+
window.addEventListener("touchmove", onScrubMove, { passive: false });
179
+
window.addEventListener("touchend", onScrubUp);
185
180
}
186
181
187
182
/** Start scrubbing by grabbing the frog sprite directly */
188
-
function onFrogDown(e: MouseEvent) {
183
+
function onFrogDown(e: MouseEvent | TouchEvent) {
189
184
e.preventDefault();
190
185
e.stopPropagation();
191
186
isScrubbing = true;
···
193
188
if (videoEl && wasPlayingBeforeScrub) videoEl.pause();
194
189
window.addEventListener("mousemove", onScrubMove);
195
190
window.addEventListener("mouseup", onScrubUp);
191
+
window.addEventListener("touchmove", onScrubMove, { passive: false });
192
+
window.addEventListener("touchend", onScrubUp);
196
193
}
197
194
198
-
function onScrubMove(e: MouseEvent) {
195
+
function onScrubMove(e: MouseEvent | TouchEvent) {
199
196
if (!isScrubbing) return;
197
+
e.preventDefault();
200
198
scrubFromEvent(e);
201
199
}
202
200
···
207
205
}
208
206
window.removeEventListener("mousemove", onScrubMove);
209
207
window.removeEventListener("mouseup", onScrubUp);
208
+
window.removeEventListener("touchmove", onScrubMove);
209
+
window.removeEventListener("touchend", onScrubUp);
210
210
}
211
211
212
212
function onKeyDown(e: KeyboardEvent) {
···
236
236
class="player-wrapper"
237
237
onmousemove={onMouseActivity}
238
238
onmouseenter={onMouseActivity}
239
+
ontouchstart={onMouseActivity}
239
240
onmouseleave={() => {
240
241
if (playing) showControls = false;
241
242
}}
···
260
261
class="scrub-bar"
261
262
bind:this={scrubBarEl}
262
263
onmousedown={onScrubDown}
264
+
ontouchstart={onScrubDown}
263
265
role="slider"
264
266
aria-valuenow={currentTime}
265
267
aria-valuemin={0}
···
279
281
style="left: {scrubProgress * 100}%;"
280
282
class:flipped={frogFlipped}
281
283
onmousedown={onFrogDown}
284
+
ontouchstart={onFrogDown}
282
285
>
283
286
<img
284
287
src={!playing && !isScrubbing
···
361
364
position: relative;
362
365
height: 48px;
363
366
cursor: pointer;
367
+
touch-action: none;
364
368
}
365
369
366
370
.scrub-frog {
···
371
375
transition: left 0.05s linear;
372
376
z-index: 2;
373
377
padding: 6px;
378
+
touch-action: none;
374
379
}
375
380
376
381
.scrub-frog:active {