Where I Left Off / State Restor (#1731)

* major re-work of audio player * removes current_time from player state. saves a ton of updating * gets local saving working * removes log * removes unessary await on state creation * fixes ts errors and comments out hotkeys compoennt * uses existing tsToS fn and remvoes src attr * changes playback position to timeupdate event * updates to use onended to reset state to 0
syntaxfm · Jul 8, 2024 · 969160e · 969160e
1 parent e0c667c
commit 969160e
Show file tree

Hide file tree

Showing 14 changed files with 532 additions and 340 deletions.
diff --git a/package.json b/package.json
@@ -26,9 +26,9 @@
 		"postinstall": "pnpm db:generate && pnpm exec playwright install"
 	},
 	"devDependencies": {
-		"@codecov/sveltekit-plugin": "0.0.1-beta.9",
+		"@codecov/sveltekit-plugin": "0.0.1-beta.10",
 		"@playwright/test": "^1.45.0",
-		"@sveltejs/kit": "^2.5.17",
+		"@sveltejs/kit": "^2.5.18",
 		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"@types/chroma-js": "^2.4.4",
 		"@types/js-cookie": "^3.0.6",
@@ -97,7 +97,7 @@
 		"remark-heading-id": "^1.0.1",
 		"remark-parse": "^11.0.0",
 		"remark-rehype": "^11.1.0",
-		"sk-form-data": "^1.0.1",
+		"sk-form-data": "^2.0.2",
 		"speakingurl": "^14.0.1",
 		"svelte-french-toast": "1.2.0",
 		"svelte-local-storage-store": "^0.6.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/hotkeys/Hotkeys.svelte b/src/lib/hotkeys/Hotkeys.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
 	import type { Hotkeys } from '$lib/hotkeys/types';
 	import { getHotkeyTrigger } from '$lib/hotkeys/utils';
 	import { player } from '$state/player';
@@ -85,7 +85,7 @@
 	function seekBackward() {
 		if ($player.audio) {
 			player.update((state) => {
-				state.currentTime -= 30;
+				state.audio.currentTime -= 30;
 				return state;
 			});
 		}
@@ -94,7 +94,7 @@
 	function seekForward() {
 		if ($player.audio) {
 			player.update((state) => {
-				state.currentTime += 30;
+				state.current_time += 30;
 				return state;
 			});
 		}
@@ -138,4 +138,4 @@
 	use:shortcut={{ trigger: getHotkeyTrigger('playPause', hotkeys) }}
 />
 
-<HotkeyDialog {hotkeys} />
+<HotkeyDialog {hotkeys} /> -->
diff --git a/src/lib/player/AlbumArt.svelte b/src/lib/player/AlbumArt.svelte
@@ -1,48 +1,24 @@
 <script lang="ts">
 	import { PUBLIC_URL } from '$env/static/public';
-	import { player } from '$state/player';
 	import type { Show } from '@prisma/client';
 	import Album from './Album.svelte';
-	import CD from './CD.svelte';
+	import { player } from '$/state/player';
 
 	export let is_link = false;
 	export let show: Show | null = null;
-
-	let isAnimating = true;
-	let image_index = 0;
-
-	$: if ($player?.audio) {
-		$player?.audio?.addEventListener('pause', function () {
-			isAnimating = false;
-		});
-
-		// When audio is played, resume the animation
-		$player?.audio?.addEventListener('play', function () {
-			isAnimating = true;
-		});
-	}
-
-	function keydown(event: KeyboardEvent) {
-		if (event.key === 'Enter' || event.keyCode === 13) {
-			toggle_sicman();
-		}
-	}
-
-	function toggle_sicman() {
-		return (image_index = image_index ? 0 : 1);
-	}
 </script>
 
 {#if is_link && show}
 	<a class="art-wrapper" href="https://{PUBLIC_URL}/{show.number}">
 		<Album />
 	</a>
 {:else}
-	<div class="art-wrapper" on:click={toggle_sicman} tabindex="0" on:keydown={keydown} role="button">
-		{#if image_index === 0}
-			<Album />
-		{:else}
-			<CD spinning={isAnimating} />
+	<div class="art-wrapper" class:loading={$player.status === 'LOADING'}>
+		<Album />
+		{#if !$player.initial_load}
+			{#key $player?.current_show?.id}
+				<div class="cd">📀</div>
+			{/key}
 		{/if}
 	</div>
 {/if}
@@ -54,8 +30,36 @@
 		cursor: pointer;
 		flex-shrink: 0;
 		display: none;
+		position: relative;
 		@media (--above_med) {
 			display: block;
 		}
 	}
+	.cd {
+		position: absolute;
+		inset: 0;
+		font-size: 68px;
+		animation:
+			spin 0.5s linear 5,
+			slide-in 1s ease-in-out 2 alternate;
+		transform-origin: center center;
+		text-align: center;
+		z-index: -1;
+	}
+
+	/* Define the second animation */
+	@keyframes slide-in {
+		80% {
+			translate: 35px;
+		}
+		100% {
+			translate: 35px;
+		}
+	}
+
+	@keyframes spin {
+		to {
+			rotate: 360deg;
+		}
+	}
 </style>
diff --git a/src/lib/player/Bookmarks.svelte b/src/lib/player/Bookmarks.svelte
diff --git a/src/lib/player/Player.svelte b/src/lib/player/Player.svelte
@@ -5,9 +5,18 @@
 	import get_show_path from '$utilities/slug';
 	import Icon from '../Icon.svelte';
 	import ShareButton from '../share/HairButton.svelte';
+	import { onMount } from 'svelte';
+	import type { Show } from '@prisma/client';
+
+	export let initial_show: Show;
+
+	onMount(() => {
+		// Load latest show by default
+		player.initialize(initial_show);
+	});
 </script>
 
-<section class={`player ${$player_window_status}`}>
+<section class="player {$player_window_status} {$player.status}">
 	<div class="window-controls">
 		{#if $player.current_show}<ShareButton show={$player.current_show} />{/if}
 		<button class="minimize" on:click={player.toggle_minimize}><Icon name="minimize" /></button>
@@ -34,10 +43,13 @@
 				style="--media-range-track-height: 5px; --media-range-thumb-height: 15px; --media-range-thumb-border-radius: 0;	--media-range-track-border-radius: 5px; --media-range-bar-color: var(--primary);--media-background-color: transparent; --media-control-background: transparent; width: 100%; --media-font-family: var(--body-font-family); --media-control-hover-background: transparent; "
 			>
 				<audio
+					on:timeupdate={player.ontimeupdate}
+					on:play={player.onplay}
+					on:ended={player.onended}
+					on:pause={player.onpause}
 					slot="media"
 					bind:this={$player.audio}
 					preload="metadata"
-					bind:currentTime={$player.currentTime}
 					crossorigin="anonymous"
 				/>
 				{#if $player_window_status === 'ACTIVE'}
@@ -186,6 +198,7 @@
 		translate: 0 100% 0;
 		transition: 0.2s ease translate;
 		z-index: 10;
+
 		&.ACTIVE {
 			translate: 0 0 0;
 		}
@@ -227,10 +240,10 @@
 	}
 
 	.player-container {
-		padding: 10px;
+		padding: 10px 20px;
 		width: 100%;
 		display: flex;
-		gap: 20px;
+		gap: 25px;
 	}
 
 	.media-range-bookmarks {

diff --git a/src/lib/transcript/Transcript.svelte b/src/lib/transcript/Transcript.svelte
@@ -49,14 +49,16 @@
 
 	$: currentUtterance = slim_transcript.find((utterance, index) => {
 		const nextUtteranceStart = slim_transcript[index + 1]?.start || utterance.end;
-		return $player.currentTime >= utterance.start && $player.currentTime <= nextUtteranceStart;
+		const current_time = $player?.audio?.currentTime || 0;
+		return current_time >= utterance.start && current_time <= nextUtteranceStart;
 	});
 
 	$: currentTopic = aiShowNote?.summary.find((summary, index) => {
 		const nextSummary = aiShowNote?.summary[index + 1];
 		const topicEnd = nextSummary ? tsToS(nextSummary.time) : Infinity;
 		const topicStart = tsToS(summary.time);
-		return $player.currentTime >= topicStart && $player.currentTime <= topicEnd;
+		const current_time = $player?.audio?.currentTime || 0;
+		return current_time >= topicStart && current_time <= topicEnd;
 	});
 
 	$: playing_show_is_this_show = $player.current_show?.number === transcript.show_number;
@@ -68,7 +70,7 @@
 
 	// $: currentWordIndex = words.findIndex((word, index, words) => {
 	// 	const nextWordStart = words[index + 1]?.start || word.end;
-	// 	const currentWord = $player.currentTime >= word.start && $player.currentTime <= nextWordStart;
+	// 	const currentWord = $player.current_time >= word.start && $player.current_time <= nextWordStart;
 	// 	return currentWord;
 	// });
 
@@ -93,10 +95,11 @@
 	};
 	$: placeTopic = function (summary: SummaryTitle, utterances: SlimUtterance[]) {
 		const summaryEnd = utterances.at(-1)?.end || Infinity;
+		const current_time = $player?.audio?.currentTime || 0;
 		if (!playing_show_is_this_show) return ''; // not playing this show
 		if (currentTopic?.id === summary.id) {
 			return 'current';
-		} else if ($player.currentTime > summaryEnd) {
+		} else if (current_time > summaryEnd) {
 			return 'past';
 		} else {
 			return 'future';
@@ -128,7 +131,9 @@
 			<div>
 				{#each utterances as utterance}
 					{@const progress =
-						(($player.currentTime - utterance.start) / (utterance.end - utterance.start)) * 100}
+						((($player?.audio?.currentTime || 0) - utterance.start) /
+							(utterance.end - utterance.start)) *
+						100}
 					<div
 						style="
               --progress: {progress > 0 && progress < 100 ? `${progress}%` : '100%'};
@@ -140,7 +145,7 @@
 								class="button-nunya"
 								on:click={async () => {
 									await player.start_show(show);
-									$player.currentTime = utterance.start;
+									player.update_time(utterance.start);
 								}}>{format_time(utterance.start)}</button
 							>
 							<p class="speaker fst-600">

diff --git a/src/routes/(site)/+layout.svelte b/src/routes/(site)/+layout.svelte
@@ -8,7 +8,6 @@
 	import Footer from './Footer.svelte';
 	import Header from './Header.svelte';
 	import Loading from '$lib/Loading.svelte';
-	import Hotkeys from '$lib/hotkeys/Hotkeys.svelte';
 	import { browser } from '$app/environment';
 	import SearchBox from '$lib/search/SearchBox.svelte';
 	import Meta from '$lib/meta/Meta.svelte';
@@ -18,7 +17,7 @@
 	import PageLoadingIndicator from '$lib/page_loading_indicator.svelte';
 
 	export let data;
-	$: ({ user, user_theme } = data);
+	$: ({ user, user_theme, latest } = data);
 
 	onNavigate(async (navigation) => {
 		if (!document.startViewTransition) return;
@@ -49,7 +48,9 @@
 	<Footer />
 
 	<ThemeMaker />
-	<Player />
+	{#if browser}
+		<Player initial_show={latest[0]} />
+	{/if}
 	<Toaster />
 	<Loading />