add more vods and add video duration

src/routes/Duration.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import {SvelteDate} from 'svelte/reactivity';
+
+	interface Props {
+		/**
+		 * Time in milliseconds.
+		 */
+		duration: number;
+	}
+
+	const {duration}: Props = $props();
+
+	const date = new SvelteDate(duration);
+	// TODO is this ill advised? is there a better way to sync the prop to the reactive object?
+	$effect(() => {
+		date.setTime(duration); // TODO this actually sets twice, on init and then here on mount
+	});
+
+	const hours = $derived(date.getUTCHours());
+	const minutes = $derived(date.getUTCMinutes());
+	const seconds = $derived(date.getUTCSeconds());
+
+	const formatted_minutes = $derived(hours ? minutes.toString().padStart(2, '0') : minutes);
+	const formatted_seconds = $derived(minutes ? seconds.toString().padStart(2, '0') : seconds);
+</script>
+
+<span
+	>{#if hours}{hours}:{/if}{formatted_minutes}:{formatted_seconds}</span
+>

src/routes/Video.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type {Video_Item} from '$routes/video.js';
+	import Duration from '$routes/Duration.svelte';
 
 	interface Props {
 		video: Video_Item;
@@ -8,6 +9,9 @@
 	const {video}: Props = $props();
 </script>
 
-<div>
+<div class="panel p_md mb_lg">
 	<a href={video.url}>{video.title}</a>
+	<div>
+		<Duration duration={video.duration} />
+	</div>
 </div>

src/routes/Videos.svelte

@@ -1,20 +1,6 @@
 <script lang="ts">
-	import type {Video_Item} from '$routes/video.js';
 	import Video from '$routes/Video.svelte';
-
-	const webdevladder_videos: Video_Item[] = [
-		{
-			title: 'How Svelte runes syntax is better than plain JavaScript with signals',
-			url: 'https://www.youtube.com/watch?v=IsJtmbvW2SI',
-		},
-	];
-
-	const webdevladder_vods_videos: Video_Item[] = [
-		{
-			title: 'Svelte 5 refactoring to reactive SvelteSet in my ear trainer Earbetter',
-			url: 'https://www.youtube.com/watch?v=bE-BYtepFr8',
-		},
-	];
+	import {webdevladder_videos, webdevladder_vods_videos} from '$routes/video_data.js';
 </script>
 
 <h2 class="mt_md">videos</h2>

src/routes/video.ts

@@ -1,4 +1,5 @@
 export interface Video_Item {
 	title: string;
 	url: string;
+	duration: number;
 }

src/routes/video_data.ts

@@ -0,0 +1,27 @@
+import type {Video_Item} from '$routes/video.js';
+
+export const webdevladder_videos: Video_Item[] = [
+	{
+		title: 'How Svelte runes syntax is better than plain JavaScript with signals',
+		url: 'https://www.youtube.com/watch?v=IsJtmbvW2SI',
+		duration: 1389000,
+	},
+];
+
+export const webdevladder_vods_videos: Video_Item[] = [
+	{
+		title: 'Svelte 5 refactoring to reactive SvelteSet in my ear trainer Earbetter',
+		url: 'https://www.youtube.com/watch?v=bE-BYtepFr8',
+		duration: 1367000,
+	},
+	{
+		title: 'Embedding Mastodon toots with rules to control reply visibility with Svelte components',
+		url: 'https://www.youtube.com/watch?v=5w9iUZ5TesE',
+		duration: 6537000,
+	},
+	{
+		title: 'Refactoring my messy Mastodon library',
+		url: 'https://www.youtube.com/watch?v=QET2GbcW9ww',
+		duration: 5392000,
+	},
+];