Merge pull request #40 from WardPearce/update/close-issues

Update/close issues

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, PlayerSrc } from 'vidstack';
+	import type {
+		MediaQualityChangeEvent,
+		MediaTimeUpdateEvent,
+		MediaVolumeChangeEvent,
+		PlayerSrc
+	} from 'vidstack';
 	import type { MediaPlayerElement } from 'vidstack/elements';
 	import {
 		playerAlwaysLoop,
@@ -38,6 +43,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 +109,25 @@
 				savePlayerPos();
 			});
 
+			player.addEventListener('volume-change', (event: MediaVolumeChangeEvent) => {
+				try {
+					localStorage.setItem('volume', event.detail.volume.toString());
+				} 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);
 
@@ -152,10 +183,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 = [
@@ -166,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(
@@ -194,17 +245,18 @@
 			currentTheme['--surface']
 		);
 		document.documentElement.style.setProperty('--audio-bg', currentTheme['--surface']);
-		document.documentElement.style.setProperty('--video-bg', currentTheme['--surface']);
 	});
 
 	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(() => {
@@ -225,6 +277,7 @@
 	streamType={data.video.hlsUrl ? 'live' : 'on-demand'}
 	viewType={audioMode ? 'audio' : 'video'}
 	playsInline={true}
+	keep-alive
 	{src}
 >
 	<media-provider>

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;
 	}
@@ -65,9 +69,11 @@
 		></progress>
 	{/if}
 	{#if !('liveVideo' in video) || !video.liveVideo}
-		<div class="absolute right bottom small-margin black white-text small-text thumbnail-corner">
-			&nbsp;{videoLength(video.lengthSeconds)}&nbsp;
-		</div>
+		{#if video.lengthSeconds !== 0}
+			<div class="absolute right bottom small-margin black white-text small-text thumbnail-corner">
+				&nbsp;{videoLength(video.lengthSeconds)}&nbsp;
+			</div>
+		{/if}
 	{:else}
 		<div class="absolute right bottom small-margin red white-text small-text thumbnail-corner">
 			LIVE

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 = /<a href="([^"]+)"/;

materialious/src/routes/history/+page.svelte

@@ -52,11 +52,13 @@
 		on:click={async () => {
 			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 {}
 		}}
 	>
 		<i>delete_sweep</i>

materialious/src/routes/watch/[slug]/+page.svelte

@@ -283,7 +283,7 @@
 				{/if}
 			{:else if playlist}
 				<article style="height: 75vh; position: relative;" id="playlist" class="scroll no-padding">
-					<article class="no-elevate" style="position: sticky; top: 0; z-index: 99999;">
+					<article class="no-elevate" style="position: sticky; top: 0; z-index: 3;">
 						<h6>{playlist.title}</h6>
 						<p>{cleanNumber(playlist.viewCount)} views • {playlist.videoCount} videos</p>
 						<p><a href={`/channel/${playlist.authorId}`}>{playlist.author}</a></p>