From 6680b51b6586dcd0659121b78c164b5e527d5ae4 Mon Sep 17 00:00:00 2001 From: WardPearce Date: Wed, 3 Apr 2024 19:40:49 +1300 Subject: [PATCH 1/5] Don't show timestamp if is 0 --- materialious/src/lib/Thumbnail.svelte | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte index 6fb8e6ae..806b485d 100644 --- a/materialious/src/lib/Thumbnail.svelte +++ b/materialious/src/lib/Thumbnail.svelte @@ -65,9 +65,11 @@ > {/if} {#if !('liveVideo' in video) || !video.liveVideo} -
-  {videoLength(video.lengthSeconds)}  -
+ {#if video.lengthSeconds !== 0} +
+  {videoLength(video.lengthSeconds)}  +
+ {/if} {:else}
LIVE From 3c6df4c9d085c2cae5aacdc443fa3cc30454ca9f Mon Sep 17 00:00:00 2001 From: WardPearce Date: Wed, 3 Apr 2024 19:42:17 +1300 Subject: [PATCH 2/5] Black background for videos --- materialious/src/lib/Player.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte index 53174cf1..7ec3b189 100644 --- a/materialious/src/lib/Player.svelte +++ b/materialious/src/lib/Player.svelte @@ -194,7 +194,6 @@ currentTheme['--surface'] ); document.documentElement.style.setProperty('--audio-bg', currentTheme['--surface']); - document.documentElement.style.setProperty('--video-bg', currentTheme['--surface']); }); function savePlayerPos() { From 124627c4fa4b841d9235f2bd24df49da9f4cf9b9 Mon Sep 17 00:00:00 2001 From: WardPearce Date: Wed, 3 Apr 2024 20:01:47 +1300 Subject: [PATCH 3/5] Save player volume on change --- materialious/src/lib/Player.svelte | 40 ++++++++++++++------ materialious/src/lib/Thumbnail.svelte | 6 ++- materialious/src/lib/misc.ts | 1 - materialious/src/routes/history/+page.svelte | 12 +++--- 4 files changed, 41 insertions(+), 18 deletions(-) diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte index 7ec3b189..b85f73cb 100644 --- a/materialious/src/lib/Player.svelte +++ b/materialious/src/lib/Player.svelte @@ -5,7 +5,7 @@ import { SponsorBlock, type Category } from 'sponsorblock-api'; import { onDestroy, onMount } from 'svelte'; import { get } from 'svelte/store'; - import type { MediaTimeUpdateEvent, PlayerSrc } from 'vidstack'; + import type { MediaTimeUpdateEvent, MediaVolumeChangeEvent, PlayerSrc } from 'vidstack'; import type { MediaPlayerElement } from 'vidstack/elements'; import { playerAlwaysLoop, @@ -38,6 +38,13 @@ const proxyVideos = get(playerProxyVideos); onMount(async () => { + try { + const defaultVolume = localStorage.getItem('volume'); + if (defaultVolume) { + player.volume = Number(defaultVolume); + } + } catch {} + if (playlistVideos) { player.addEventListener('end', () => { if (!playlistVideos) return; @@ -97,6 +104,12 @@ savePlayerPos(); }); + player.addEventListener('volume-change', (event: MediaVolumeChangeEvent) => { + try { + localStorage.setItem('volume', event.detail.volume.toString()); + } catch {} + }); + if (get(sponsorBlockCategories)) { const currentCategories = get(sponsorBlockCategories); @@ -152,10 +165,12 @@ } if (get(playerSavePlaybackPosition)) { - const playerPos = localStorage.getItem(`v_${data.video.videoId}`); - if (playerPos) { - player.currentTime = Number(playerPos); - } + try { + const playerPos = localStorage.getItem(`v_${data.video.videoId}`); + if (playerPos) { + player.currentTime = Number(playerPos); + } + } catch {} } } else { src = [ @@ -197,13 +212,15 @@ }); function savePlayerPos() { - if (get(playerSavePlaybackPosition) && player.currentTime) { - if (player.currentTime < player.duration - 10 && player.currentTime > 10) { - localStorage.setItem(`v_${data.video.videoId}`, player.currentTime.toString()); - } else { - localStorage.removeItem(`v_${data.video.videoId}`); + try { + if (get(playerSavePlaybackPosition) && player.currentTime) { + if (player.currentTime < player.duration - 10 && player.currentTime > 10) { + localStorage.setItem(`v_${data.video.videoId}`, player.currentTime.toString()); + } else { + localStorage.removeItem(`v_${data.video.videoId}`); + } } - } + } catch {} } onDestroy(() => { @@ -224,6 +241,7 @@ streamType={data.video.hlsUrl ? 'live' : 'on-demand'} viewType={audioMode ? 'audio' : 'video'} playsInline={true} + keep-alive {src} > diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte index 806b485d..83f9457a 100644 --- a/materialious/src/lib/Thumbnail.svelte +++ b/materialious/src/lib/Thumbnail.svelte @@ -18,7 +18,11 @@ let progress: string | null; if (get(playerSavePlaybackPosition)) { - progress = localStorage.getItem(`v_${video.videoId}`); + try { + progress = localStorage.getItem(`v_${video.videoId}`); + } catch { + progress = null; + } } else { progress = null; } diff --git a/materialious/src/lib/misc.ts b/materialious/src/lib/misc.ts index a8099c05..d3cd83a7 100644 --- a/materialious/src/lib/misc.ts +++ b/materialious/src/lib/misc.ts @@ -40,7 +40,6 @@ export interface PhasedDescription { export function phaseDescription(content: string): PhasedDescription { const timestamps: { title: string; time: number; timePretty: string; }[] = []; - console.log(content); const lines = content.split('\n'); const urlRegex = / { await deleteHistory(); history = []; - Object.keys(localStorage).forEach((key) => { - if (key.startsWith('v_')) { - localStorage.removeItem(key); - } - }); + try { + Object.keys(localStorage).forEach((key) => { + if (key.startsWith('v_')) { + localStorage.removeItem(key); + } + }); + } catch {} }} > delete_sweep From 7965bcc08e5693a981586b6194309a9d90fb43b5 Mon Sep 17 00:00:00 2001 From: WardPearce Date: Wed, 3 Apr 2024 20:34:41 +1300 Subject: [PATCH 4/5] Prefer closest quality --- materialious/src/lib/Player.svelte | 38 +++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte index b85f73cb..1b9f5e4b 100644 --- a/materialious/src/lib/Player.svelte +++ b/materialious/src/lib/Player.svelte @@ -5,7 +5,12 @@ import { SponsorBlock, type Category } from 'sponsorblock-api'; import { onDestroy, onMount } from 'svelte'; import { get } from 'svelte/store'; - import type { MediaTimeUpdateEvent, MediaVolumeChangeEvent, PlayerSrc } from 'vidstack'; + import type { + MediaQualityChangeEvent, + MediaTimeUpdateEvent, + MediaVolumeChangeEvent, + PlayerSrc + } from 'vidstack'; import type { MediaPlayerElement } from 'vidstack/elements'; import { playerAlwaysLoop, @@ -110,6 +115,19 @@ } catch {} }); + player.addEventListener('quality-change', (event: MediaQualityChangeEvent) => { + if (!event.detail) return; + + if (player.qualities.auto) return; + + try { + localStorage.setItem( + 'preferredQuality', + player.qualities.indexOf(event.detail).toString() + ); + } catch {} + }); + if (get(sponsorBlockCategories)) { const currentCategories = get(sponsorBlockCategories); @@ -181,6 +199,24 @@ ]; } + // Have to wait for qualities to be loaded. + setTimeout(() => { + try { + const preferredQuality = localStorage.getItem('preferredQuality'); + if (preferredQuality) { + let qualityIndex = Number(preferredQuality); + + if (qualityIndex > player.qualities.length - 1) { + while (qualityIndex > player.qualities.length - 1) { + qualityIndex--; + } + } + + player.remoteControl.changeQuality(qualityIndex); + } + } catch (error) {} + }, 100); + const currentTheme = await getDynamicTheme(); document.documentElement.style.setProperty( From b8044444220d5e048d0885dc383fe34c9220028c Mon Sep 17 00:00:00 2001 From: WardPearce Date: Wed, 3 Apr 2024 20:36:57 +1300 Subject: [PATCH 5/5] Fixed playlist title having too high z-index --- materialious/src/routes/watch/[slug]/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte index 638746ff..872739bc 100644 --- a/materialious/src/routes/watch/[slug]/+page.svelte +++ b/materialious/src/routes/watch/[slug]/+page.svelte @@ -283,7 +283,7 @@ {/if} {:else if playlist}