diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte index 1cbcae5d..96e6a1f6 100644 --- a/materialious/src/lib/components/Player.svelte +++ b/materialious/src/lib/components/Player.svelte @@ -52,7 +52,7 @@ isSyncing?: boolean; isEmbed?: boolean; segments?: Segment[]; - playerElement: HTMLMediaElement; + playerElement: HTMLMediaElement | undefined; } let { @@ -126,6 +126,7 @@ } function saveVolumePreference() { + if (!playerElement) return; localStorage.setItem(STORAGE_KEY_VOLUME, playerElement.volume.toString()); } @@ -157,6 +158,7 @@ if (player) { const timeGivenUrl = page.url.searchParams.get('time'); if (timeGivenUrl && !isNaN(parseFloat(timeGivenUrl))) { + if (!playerElement) return false; playerElement.currentTime = Number(timeGivenUrl); return true; } @@ -178,6 +180,29 @@ HttpFetchPlugin.cacheManager.clearCache(); player = new shaka.Player(); + player.configure({ + abr: { + enabled: true, + restrictions: { + maxWidth: 1920, + maxHeight: 1080 + } + }, + streaming: { + bufferingGoal: 120, + rebufferingGoal: 0.01, + bufferBehind: 300, + retryParameters: { + maxAttempts: 30, + baseDelay: 1500, + backoffFactor: 2.5, + fuzzFactor: 0.7, + timeout: 120000 + }, + stallThreshold: 2, + stallSkip: 0.5 + } + }); playerElement = document.getElementById('player') as HTMLMediaElement; playerElementResizeObserver = new ResizeObserver(() => { @@ -195,7 +220,6 @@ playerElement.volume = parseFloat(savedVolume); } - await player.attach(playerElement); shakaUi = new shaka.ui.Overlay( player, document.getElementById('shaka-container') as HTMLElement, @@ -229,26 +253,6 @@ } }); - player.configure({ - abr: { - enabled: true - }, - streaming: { - bufferingGoal: 120, - rebufferingGoal: 0.01, - bufferBehind: 300, - retryParameters: { - maxAttempts: 30, - baseDelay: 1500, - backoffFactor: 2.5, - fuzzFactor: 0.7, - timeout: 120000 - }, - stallThreshold: 2, - stallSkip: 0.5 - } - }); - if (data.video.fallbackPatch === 'youtubejs' && data.video.ytjs) { isLive = !!data.video.ytjs.video.basic_info.is_live; isPostLiveDVR = !!data.video.ytjs.video.basic_info.is_post_live_dvr; @@ -635,6 +639,8 @@ }); } + await player.attach(playerElement); + if (!data.video.hlsUrl) { let dashUrl = data.video.dashUrl; @@ -701,6 +707,8 @@ playerElement.addEventListener('timeupdate', () => { segments.forEach((segment) => { + if (!playerElement) return; + if ( playerElement.currentTime >= segment.startTime && playerElement.currentTime <= segment.endTime @@ -813,6 +821,8 @@ } Mousetrap.bind('space', () => { + if (!playerElement) return; + if (playerElement.paused) { playerElement.play(); } else { @@ -822,11 +832,14 @@ }); Mousetrap.bind('right', () => { + if (!playerElement) return; playerElement.currentTime = playerElement.currentTime + 10; return false; }); Mousetrap.bind('left', () => { + if (!playerElement) return; + playerElement.currentTime = playerElement.currentTime - 10; return false; }); @@ -854,16 +867,22 @@ if (document.fullscreenElement) { document.exitFullscreen(); } else { + if (!playerElement) return; + playerElement.requestFullscreen(); } return false; }); Mousetrap.bind('shift+left', () => { + if (!playerElement) return; + playerElement.playbackRate = playerElement.playbackRate - 0.25; }); Mousetrap.bind('shift+right', () => { + if (!playerElement) return; + playerElement.playbackRate = playerElement.playbackRate + 0.25; }); }); @@ -891,13 +910,18 @@ } } - if (toSetTime > 0) playerElement.currentTime = toSetTime; + if (toSetTime > 0 && playerElement) playerElement.currentTime = toSetTime; } function savePlayerPos() { if (data.video.hlsUrl) return; - if (get(playerSavePlaybackPositionStore) && player && playerElement.currentTime) { + if ( + get(playerSavePlaybackPositionStore) && + player && + playerElement && + playerElement.currentTime + ) { if ( playerElement.currentTime < playerElement.duration - 10 && playerElement.currentTime > 10 diff --git a/materialious/src/lib/sabr/cacheManager.ts b/materialious/src/lib/sabr/cacheManager.ts index 6c6c11a0..d7a697dc 100644 --- a/materialious/src/lib/sabr/cacheManager.ts +++ b/materialious/src/lib/sabr/cacheManager.ts @@ -14,7 +14,7 @@ export class CacheManager { private readonly maxCacheSize: number; private readonly maxAge: number; - constructor(maxSizeMB = 100, maxAgeSeconds = 600) { + constructor(maxSizeMB = 50, maxAgeSeconds = 300) { this.maxCacheSize = maxSizeMB * 1024 * 1024; this.maxAge = maxAgeSeconds * 1000; this.startGarbageCollection(); diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte index 167083de..dd7ff7df 100644 --- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte +++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte @@ -598,7 +598,9 @@
Chapters
{#each data.content.timestamps as timestamp}