add progress indicator for music

cubedhuang · Sep 24, 2023 · 687bc6e · 687bc6e
1 parent 7577e29
commit 687bc6e
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 5 deletions.
diff --git a/src/lib/components/icons/Pause.svelte b/src/lib/components/icons/Pause.svelte
@@ -0,0 +1,10 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 20 20"
+	fill="currentColor"
+	class="w-5 h-5"
+>
+	<path
+		d="M5.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h1.5a.75.75 0 00.75-.75V3.75A.75.75 0 007.25 3h-1.5zM12.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h1.5a.75.75 0 00.75-.75V3.75a.75.75 0 00-.75-.75h-1.5z"
+	/>
+</svg>
diff --git a/src/lib/components/icons/Play.svelte b/src/lib/components/icons/Play.svelte
@@ -0,0 +1,10 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 20 20"
+	fill="currentColor"
+	class="w-5 h-5"
+>
+	<path
+		d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"
+	/>
+</svg>
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
@@ -3,7 +3,7 @@ import { readable } from 'svelte/store';
 export const now = readable(new Date(), set => {
 	const interval = setInterval(() => {
 		set(new Date());
-	}, 1000);
+	}, 100);
 
 	return () => clearInterval(interval);
 });
diff --git a/src/routes/(home)/SpotifyInfo.svelte b/src/routes/(home)/SpotifyInfo.svelte
@@ -3,8 +3,12 @@
 	import type { NowPlayingResponse } from '$lib/types';
 
 	import MusicalNote from '$lib/components/icons/MusicalNote.svelte';
+	import Pause from '$lib/components/icons/Pause.svelte';
+	import Play from '$lib/components/icons/Play.svelte';
+	import { now } from '$lib/stores';
 
 	let data: NowPlayingResponse | undefined;
+	let lastFetched = 0;
 
 	onMount(() => {
 		fetchNowPlaying();
@@ -17,8 +21,20 @@
 			.then(res => res.json())
 			.then(res => {
 				data = res;
+				lastFetched = Date.now();
 			});
 	}
+
+	function clamp(t: number) {
+		return Math.max(Math.min(t, 1), 0);
+	}
+
+	$: progress = data?.track
+		? clamp(
+				(data.progessMs + ($now.getTime() - lastFetched)) /
+					data.track.duration_ms
+		  )
+		: 0;
 </script>
 
 <div class="mt-4 flex rounded-full items-center bg-gray-900">
@@ -61,7 +77,7 @@
 		</div>
 	{/if}
 
-	<div class="pl-4 py-2 pr-6 relative">
+	<div class="pl-4 py-2 pr-4 relative">
 		<p class="line-clamp-1 break-all text-gray-400">
 			{#if data?.track}
 				<a
@@ -95,11 +111,36 @@
 			<MusicalNote />
 
 			{#if data?.isPlayingNow}
-				Listening on
+				Listening Now
 			{:else if data?.track}
-				Last Played on
+				Last Played on Spotify
 			{/if}
-			Spotify
 		</p>
 	</div>
+
+	{#if data?.isPlayingNow}
+		<div
+			class="ml-auto shrink-0 w-12 h-12 mr-4 rounded-full progress"
+			style:--progress={progress}
+		>
+			<div
+				class="w-10 h-10 rounded-full bg-gray-900 mt-1 ml-1 grid place-items-center text-gray-400"
+			>
+				{#if data.isPaused}
+					<Play />
+				{:else}
+					<Pause />
+				{/if}
+			</div>
+		</div>
+	{/if}
 </div>
+
+<style lang="postcss">
+	.progress {
+		background: conic-gradient(
+			theme('colors.gray.700') calc(var(--progress) * 100%),
+			theme('colors.gray.800') 0
+		);
+	}
+</style>