Player store

materialious/src/lib/Player.svelte

@@ -5,12 +5,7 @@
 	import { SponsorBlock, type Category } from 'sponsorblock-api';
 	import { onDestroy, onMount } from 'svelte';
 	import { get } from 'svelte/store';
-	import type {
-		MediaQualityChangeEvent,
-		MediaTimeUpdateEvent,
-		MediaVolumeChangeEvent,
-		PlayerSrc
-	} from 'vidstack';
+	import type { MediaTimeUpdateEvent, PlayerSrc } from 'vidstack';
 	import type { MediaPlayerElement } from 'vidstack/elements';
 	import {
 		playerAlwaysLoop,
@@ -109,25 +104,6 @@
 				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);
 
@@ -199,23 +175,7 @@
 			];
 		}
 
-		// 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);
+		player.storage = 'video-player';
 
 		const currentTheme = await getDynamicTheme();
 

materialious/src/routes/+layout.svelte

@@ -293,8 +293,8 @@
 				<label class="switch">
 					<input
 						type="checkbox"
-						bind:checked={searchSuggestions}
-						on:click={() => interfaceSearchSuggestions.set(!searchSuggestions)}
+						bind:checked={$interfaceSearchSuggestions}
+						on:click={() => interfaceSearchSuggestions.set(!$interfaceSearchSuggestions)}
 					/>
 					<span></span>
 				</label>
@@ -328,8 +328,8 @@
 				<label class="switch">
 					<input
 						type="checkbox"
-						bind:checked={autoplay}
-						on:click={() => playerAutoPlay.set(!autoplay)}
+						bind:checked={$playerAutoPlay}
+						on:click={() => playerAutoPlay.set(!$playerAutoPlay)}
 					/>
 					<span></span>
 				</label>
@@ -344,8 +344,8 @@
 				<label class="switch">
 					<input
 						type="checkbox"
-						bind:checked={alwaysLoop}
-						on:click={() => playerAlwaysLoop.set(!alwaysLoop)}
+						bind:checked={$playerAlwaysLoop}
+						on:click={() => playerAlwaysLoop.set(!$playerAlwaysLoop)}
 					/>
 					<span></span>
 				</label>
@@ -360,8 +360,8 @@
 				<label class="switch">
 					<input
 						type="checkbox"
-						bind:checked={proxyVideos}
-						on:click={() => playerProxyVideos.set(!proxyVideos)}
+						bind:checked={$playerProxyVideos}
+						on:click={() => playerProxyVideos.set(!$playerProxyVideos)}
 					/>
 					<span></span>
 				</label>
@@ -376,8 +376,8 @@
 				<label class="switch">
 					<input
 						type="checkbox"
-						bind:checked={savePlayerPackPos}
-						on:click={() => playerSavePlaybackPosition.set(!savePlayerPackPos)}
+						bind:checked={$playerSavePlaybackPosition}
+						on:click={() => playerSavePlaybackPosition.set(!$playerSavePlaybackPosition)}
 					/>
 					<span></span>
 				</label>
@@ -392,8 +392,8 @@
 				<label class="switch">
 					<input
 						type="checkbox"
-						bind:checked={listenByDefault}
-						on:click={() => playerListenByDefault.set(!listenByDefault)}
+						bind:checked={$playerListenByDefault}
+						on:click={() => playerListenByDefault.set(!$playerListenByDefault)}
 					/>
 					<span></span>
 				</label>
@@ -406,7 +406,11 @@
 					<div>Dash</div>
 				</div>
 				<label class="switch">
-					<input type="checkbox" bind:checked={dash} on:click={() => playerDash.set(!dash)} />
+					<input
+						type="checkbox"
+						bind:checked={$playerDash}
+						on:click={() => playerDash.set(!$playerDash)}
+					/>
 					<span></span>
 				</label>
 			</nav>
@@ -435,7 +439,7 @@
 			<label class="switch">
 				<input
 					bind:checked={$returnYtDislikes}
-					on:click={() => returnYtDislikes.set(!get(returnYtDislikes))}
+					on:click={() => returnYtDislikes.set(!$returnYtDislikes)}
 					type="checkbox"
 				/>
 				<span></span>
@@ -465,7 +469,7 @@
 			<label class="switch">
 				<input
 					bind:checked={$sponsorBlock}
-					on:click={() => sponsorBlock.set(!get(sponsorBlock))}
+					on:click={() => sponsorBlock.set(!$sponsorBlock)}
 					type="checkbox"
 				/>
 				<span></span>

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

@@ -74,15 +74,17 @@
 	<div class="grid">
 		{#each search as item}
 			<div class="s12 m6 l2">
-				<article class="no-padding" style="height: 100%;">
-					{#if item.type === 'video'}
-						<Thumbnail video={item} />
-					{:else if item.type === 'channel'}
-						<ChannelThumbnail channel={item} />
-					{:else if item.type === 'playlist'}
-						<PlaylistThumbnail playlist={item} />
-					{/if}
-				</article>
+				{#key data.search}
+					<article class="no-padding" style="height: 100%;">
+						{#if item.type === 'video'}
+							<Thumbnail video={item} />
+						{:else if item.type === 'channel'}
+							<ChannelThumbnail channel={item} />
+						{:else if item.type === 'playlist'}
+							<PlaylistThumbnail playlist={item} />
+						{/if}
+					</article>
+				{/key}
 			</div>
 		{/each}
 	</div>