vod frog, frog with the vods
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

remove Safari audio warning (AAC now available), add touch support for frog scrub and controls

goose.art 234a5e19 4e1aea2b

+19 -14
+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 {