From 9a7f6e242104886b8a5da5bae12c9864f579117d Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Mon, 11 Nov 2024 17:21:06 +0000
Subject: [PATCH] use render_media component for both audio and video elements

---
 ...derAudiocast.svelte => RenderMedia.svelte} | 23 +++++++-------
 app/src/lib/components/Sidebar.svelte         |  3 +-
 app/src/lib/components/SidebarItem.svelte     |  3 +-
 app/src/routes/audiocast/+page.server.ts      |  2 ++
 .../[sessionId=sessionId]/+page.svelte        | 31 ++++++++++++++-----
 5 files changed, 40 insertions(+), 22 deletions(-)
 rename app/src/lib/components/{RenderAudiocast.svelte => RenderMedia.svelte} (53%)
 create mode 100644 app/src/routes/audiocast/+page.server.ts

diff --git a/app/src/lib/components/RenderAudiocast.svelte b/app/src/lib/components/RenderMedia.svelte
similarity index 53%
rename from app/src/lib/components/RenderAudiocast.svelte
rename to app/src/lib/components/RenderMedia.svelte
index e399422..97cb562 100644
--- a/app/src/lib/components/RenderAudiocast.svelte
+++ b/app/src/lib/components/RenderMedia.svelte
@@ -6,10 +6,10 @@
 	import { env } from '@env';
 	import Spinner from './Spinner.svelte';
 
-	export let sessionId: String;
+	export let filename: String;
 
 	async function getSignedURL() {
-		const blobname = `${BLOB_BASE_URI}/${sessionId}`;
+		const blobname = `${BLOB_BASE_URI}/${filename}`;
 		return fetch(`${env.API_BASE_URL}/get-signed-url?blobname=${blobname}`).then<string>((res) => {
 			if (res.ok) return res.json();
 			throw new Error('Failed to get signed Audiocast URL');
@@ -17,13 +17,12 @@
 	}
 </script>
 
-{#await getSignedURL()}
-	<Spinner />
-{:then audioURL}
-	<audio controls class="w-full animate-fade-in block">
-		<source src={audioURL} type="audio/mpeg" />
-		Your browser does not support the audio element.
-	</audio>
-{:catch error}
-	<div>{String(error)}</div>
-{/await}
+<div class="w-full flex flex-col gapy-3">
+	{#await getSignedURL()}
+		<Spinner />
+	{:then uri}
+		<slot {uri} />
+	{:catch error}
+		<div>{String(error)}</div>
+	{/await}
+</div>
diff --git a/app/src/lib/components/Sidebar.svelte b/app/src/lib/components/Sidebar.svelte
index 44b3b66..cc5cd8e 100644
--- a/app/src/lib/components/Sidebar.svelte
+++ b/app/src/lib/components/Sidebar.svelte
@@ -26,7 +26,8 @@
 		.map(([sessionId, item]) => ({
 			title: item.title || 'Untitled',
 			nonce: item.nonce,
-			href: `/chat/${sessionId}?category=${item.category}`
+			href: `/chat/${sessionId}?category=${item.category}`,
+			sessionId
 		}))
 		.sort((a, b) => b.nonce - a.nonce);
 
diff --git a/app/src/lib/components/SidebarItem.svelte b/app/src/lib/components/SidebarItem.svelte
index 7ccf411..2bfc297 100644
--- a/app/src/lib/components/SidebarItem.svelte
+++ b/app/src/lib/components/SidebarItem.svelte
@@ -3,6 +3,7 @@
 		title: string;
 		nonce: number;
 		href: string;
+		sessionId: string;
 	};
 </script>
 
@@ -21,7 +22,7 @@
 		easing: cubicInOut
 	});
 
-	$: isActive = $page.url.href.includes(item.href);
+	$: isActive = $page.url.href.includes(item.sessionId);
 </script>
 
 <Button
diff --git a/app/src/routes/audiocast/+page.server.ts b/app/src/routes/audiocast/+page.server.ts
new file mode 100644
index 0000000..3ff1228
--- /dev/null
+++ b/app/src/routes/audiocast/+page.server.ts
@@ -0,0 +1,2 @@
+import { redirect } from '@sveltejs/kit';
+export const load = () => redirect(307, '/');
diff --git a/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte b/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
index c671a20..743c274 100644
--- a/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
+++ b/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
@@ -18,8 +18,8 @@
 	import type { ContentCategory } from '@/utils/types';
 	import { env } from '@env';
 	import { parse } from 'marked';
-	import RenderAudiocast from '@/components/RenderAudiocast.svelte';
 	import * as Accordion from '@/components/ui/accordion';
+	import RenderMedia from '@/components/RenderMedia.svelte';
 
 	const { session$ } = getSessionContext();
 
@@ -52,9 +52,7 @@
 	}
 </script>
 
-<div
-	class="mx-auto flex h-full w-full max-w-full flex-col items-center overflow-hidden px-2 sm:max-w-xl sm:px-1 lg:max-w-3xl"
->
+<div class="mx-auto flex h-full w-full pb-40 overflow-auto mt-6 flex-col items-center px-2 sm:px-1">
 	{#if $session$?.summary}
 		{@const { summary, category } = $session$}
 		{#await getAudiocast($session$.id, category, summary)}
@@ -64,10 +62,29 @@
 		{:then data}
 			{@const script = data.script}
 			{@const sourceContent = data.source_content}
-			<div class="flex w-full flex-col gap-y-3">
-				<RenderAudiocast sessionId={$session$.id} />
+			<div class="flex w-full px-4 flex-col gap-y-3 sm:max-w-xl lg:max-w-3xl max-w-full">
+				<RenderMedia filename="{$session$.id}.mp4" let:uri>
+					<audio controls class="w-full animate-fade-in block">
+						<source src={uri} type="audio/mpeg" />
+						Your browser does not support the audio element.
+					</audio>
+				</RenderMedia>
 
 				<Accordion.Root>
+					<Accordion.Item value="item-0">
+						<Accordion.Trigger>Show Waveform</Accordion.Trigger>
+						<Accordion.Content>
+							<RenderMedia filename="{$session$.id}.mp4" let:uri>
+								<video controls class="w-full h-64 animate-fade-in block">
+									<source src={uri} type="video/mp4" />
+									Your browser does not support the video element.
+
+									<track kind="captions" />
+								</video>
+							</RenderMedia>
+						</Accordion.Content>
+					</Accordion.Item>
+
 					<Accordion.Item value="item-1">
 						<Accordion.Trigger>Audio Transcript</Accordion.Trigger>
 						<Accordion.Content>
@@ -78,9 +95,7 @@
 							</div>
 						</Accordion.Content>
 					</Accordion.Item>
-				</Accordion.Root>
 
-				<Accordion.Root>
 					<Accordion.Item value="item-2">
 						<Accordion.Trigger>Source Content</Accordion.Trigger>
 						<Accordion.Content>