Add timestamp

src/lib/components/audio/store.ts

@@ -1,7 +1,8 @@
 import { dev } from '$app/environment';
 import type { PlayerElement, PlayerMetadata } from '$lib/components/audio/types';
+import { secondsToTimestamp } from '$lib/helper/s-to-timestamp';
 import clamp from 'just-clamp';
-import { writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 
 function log(...val: (string | number | boolean)[]) {
 	if (!dev) return;
@@ -23,6 +24,17 @@ export const __internal_audio_metadata = writable<PlayerMetadata>({
 	loading: false,
 });
 
+const state = derived(
+	[__internal_audio_metadata, __internal_audio_current_time],
+	([$metadata, $current_time]) => {
+		return {
+			current_time: $current_time,
+			timestamp: secondsToTimestamp($current_time),
+			...$metadata,
+		};
+	},
+);
+
 type HandleType = 'toggle' | 'set';
 
 function play(type: HandleType = 'set') {
@@ -118,7 +130,7 @@ function skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
 }
 
 export const audio = {
-	subscribe: __internal_audio_metadata.subscribe,
+	subscribe: state.subscribe,
 	play,
 	pause,
 	mute,

src/lib/helper/s-to-timestamp.ts

@@ -0,0 +1,18 @@
+function section(t: number) {
+	if (t < 10) return `0${t}`;
+	return t;
+}
+
+export function secondsToTimestamp(seconds: number) {
+	const hh = Math.floor(seconds / 3600);
+	const hh_remainder = seconds % 3600;
+	const mm = Math.floor(hh_remainder / 60);
+	const mm_remainder = hh_remainder % 60;
+	const ss = Math.floor(mm_remainder);
+
+	const hrs = hh > 0 ? `${section(hh)}:` : '';
+	const mins = mm ? `${section(mm)}:` : '00:';
+	const secs = ss ? `${section(ss)}` : '00';
+
+	return `${hrs}${mins}${secs}`;
+}