atmo.rsvp
4
fork

Configure Feed

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

some fixes

Florian 36c62353 4b08ef74

+21 -32
+21 -32
src/lib/components/VodPlayer.svelte
··· 11 11 12 12 let hls: HlsType | null = null; 13 13 let plyr: PlyrType | null = null; 14 - let hlsLoaded = false; 15 14 16 15 onMount(() => { 17 - initPlyr(); 16 + init(); 18 17 return () => { 19 18 hls?.destroy(); 20 19 plyr?.destroy(); 21 20 }; 22 21 }); 23 22 24 - async function initPlyr() { 23 + async function init() { 25 24 if (!videoEl) return; 26 25 27 26 try { 28 - const { default: Plyr } = await import('plyr'); 29 - plyr = new Plyr(videoEl, { 30 - controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'], 31 - ratio: '16:9' 32 - }); 33 - // Load HLS source only when user clicks play 34 - plyr.on('play', loadHls); 35 - } catch { 36 - error = true; 37 - } 38 - } 39 - 40 - async function loadHls() { 41 - if (!videoEl || hlsLoaded) return; 42 - hlsLoaded = true; 43 - 44 - try { 45 - const { default: Hls } = await import('hls.js'); 27 + const [{ default: Plyr }, { default: Hls }] = await Promise.all([ 28 + import('plyr'), 29 + import('hls.js') 30 + ]); 46 31 47 32 if (Hls.isSupported()) { 48 - hls = new Hls({ 49 - maxBufferLength: 10, 50 - maxMaxBufferLength: 30, 51 - maxBufferSize: 30 * 1000 * 1000, 52 - startLevel: 0, 53 - }); 33 + hls = new Hls({ autoStartLoad: false }); 54 34 hls.loadSource(playlistUrl); 55 35 hls.attachMedia(videoEl); 56 - hls.on(Hls.Events.MANIFEST_PARSED, () => { 57 - videoEl?.play(); 58 - }); 59 36 hls.on(Hls.Events.ERROR, (_event, data) => { 60 37 if (data.fatal) { 61 38 if (data.type === Hls.ErrorTypes.NETWORK_ERROR) { ··· 69 46 }); 70 47 } else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) { 71 48 videoEl.src = playlistUrl; 72 - videoEl.play(); 73 49 } else { 74 50 error = true; 51 + return; 75 52 } 53 + 54 + plyr = new Plyr(videoEl, { 55 + controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'], 56 + settings: ['speed'], 57 + speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }, 58 + ratio: '16:9' 59 + }); 60 + 61 + // When user clicks play, tell HLS to start loading segments 62 + plyr.on('play', () => { 63 + hls?.startLoad(); 64 + }); 76 65 } catch { 77 66 error = true; 78 67 } ··· 84 73 <p class="text-base-500 dark:text-base-400 text-sm">Failed to load video</p> 85 74 </div> 86 75 {:else} 87 - <div class="border-base-300 dark:border-base-400/40 w-full max-w-full overflow-hidden rounded-xl border"> 76 + <div class="border-base-300 dark:border-base-400/40 aspect-video w-full max-w-full overflow-hidden rounded-xl border"> 88 77 <video bind:this={videoEl} class="h-full w-full" aria-label={title}></video> 89 78 </div> 90 79 {/if}