Fix player state being killed on video end

materialious/src/lib/components/player/Player.svelte

@@ -975,9 +975,11 @@
 					</p>
 					{#if !$isAndroidTvStore}
 						<CaptionSettings {player} video={data.video} />
-						<Settings {player} {playerElement} />
-						<Airplay {playerElement} />
-						<Pip {playerElement} />
+						{#if playerElement}
+							<Settings {player} {playerElement} />
+							<Airplay {playerElement} />
+							<Pip {playerElement} />
+						{/if}
 						<FullscreenToggle {toggleFullscreen} {playerIsFullscreen} />
 					{/if}
 				</nav>

materialious/src/lib/components/player/settings/Airplay.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	let { playerElement }: { playerElement: HTMLMediaElement | undefined } = $props();
+	import { onMount } from 'svelte';
+
+	let { playerElement }: { playerElement: HTMLMediaElement } = $props();
 
 	function hasWebkitShowPlaybackTargetPicker(
 		el: HTMLMediaElement
@@ -13,8 +15,8 @@
 		}
 	}
 
-	$effect(() => {
-		if (!playerElement || playerElement.hasAttribute('x-webkit-airplay')) return;
+	onMount(() => {
+		if (playerElement.hasAttribute('x-webkit-airplay')) return;
 
 		if (hasWebkitShowPlaybackTargetPicker(playerElement)) {
 			playerElement.setAttribute('x-webkit-airplay', 'allow');

materialious/src/lib/components/player/settings/Pip.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	let { playerElement }: { playerElement: HTMLMediaElement | undefined } = $props();
+	let { playerElement }: { playerElement: HTMLMediaElement } = $props();
 </script>
 
 {#if document.pictureInPictureEnabled}

materialious/src/lib/components/player/settings/Settings.svelte

@@ -7,10 +7,8 @@
 	import { playbackRates } from '$lib/player/index';
 	import { onMount } from 'svelte';
 
-	let {
-		player,
-		playerElement
-	}: { player: shaka.Player; playerElement: HTMLMediaElement | undefined } = $props();
+	let { player, playerElement }: { player: shaka.Player; playerElement: HTMLMediaElement } =
+		$props();
 
 	let playerSettings: 'quality' | 'speed' | 'language' | 'root' = $state('root');
 	let playerCurrentVideoTrack: shaka.extern.VideoTrack | undefined = $state(undefined);

materialious/src/lib/player/index.ts

@@ -35,10 +35,10 @@ export const playbackRates = [
 export const playerDoubleTapSeek = 10.0;
 
 export function goToPreviousVideo(playlistId: string | null) {
-	playerState.set(undefined);
-
 	const previousVideos = get(playerPlaylistHistory);
 	if (previousVideos.length > 1) {
+		playerState.set(undefined);
+
 		goto(
 			resolve('/watch/[videoId]?playlist=[playlistId]', {
 				videoId: previousVideos[1],
@@ -50,8 +50,6 @@ export function goToPreviousVideo(playlistId: string | null) {
 }
 
 export async function goToNextVideo(video: VideoPlay, playlistId: string | null) {
-	playerState.set(undefined);
-
 	const isAndroidTv = get(isAndroidTvStore);
 
 	if (!playlistId) {
@@ -68,6 +66,8 @@ export async function goToNextVideo(video: VideoPlay, playlistId: string | null)
 		return;
 	}
 
+	playerState.set(undefined);
+
 	const playlist = await loadEntirePlaylist(playlistId);
 	const playlistVideoIds = playlist.videos.map((value) => {
 		return value.videoId;

materialious/src/routes/(app)/+layout.svelte

@@ -67,10 +67,6 @@
 		requestAnimationFrame(() => resetScroll());
 	});
 
-	playerState.subscribe(() => {
-		requestAnimationFrame(() => resetScroll());
-	});
-
 	async function login() {
 		if (isOwnBackend()?.internalAuth) {
 			goto(resolve('/internal/login', {}));