Skip to content

Commit

Permalink
use consistent page dimensions and reusable components
Browse files Browse the repository at this point in the history
  • Loading branch information
nwaughachukwuma committed Nov 26, 2024
1 parent 37622ba commit dc55a0c
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 26 deletions.
14 changes: 7 additions & 7 deletions app/src/lib/components/AudiocastPageHeader.svelte
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<script lang="ts">
import type { SessionModel } from '@/utils/types';
export let session: SessionModel;
import type { ContentCategory } from '@/utils/types';
export let title: string = 'Untitled';
export let category: ContentCategory;
</script>

<div class="flex w-full px-4 flex-col gap-y-3 sm:max-w-xl lg:max-w-3xl max-w-full">
<div class="flex w-full flex-col gap-y-3 sm:max-w-xl lg:max-w-3xl max-w-full">
<div class="mb-4 flex flex-col gap-y-2">
<span class="capitalize bg-gray-800 text-gray-300 w-fit py-1 px-3 rounded-md">
{session.category}
{category}
</span>

{#if session.metadata?.title}
<h1 class="text-2xl font-semibold text-sky-200">{session.metadata.title}</h1>
{/if}
<h1 class="text-2xl font-semibold text-sky-200">{title}</h1>
</div>
</div>
3 changes: 1 addition & 2 deletions app/src/lib/components/AudiocastPageSkeletonLoader.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<div class="w-full max-w-3xl mx-auto p-6 px-4">

<div class="w-full max-w-3xl mx-auto">
<!-- {/* Player container */} -->
<div class="w-full rounded-lg bg-gray-800 p-4 mb-4">
<!-- {/* Player controls and progress row */} -->
Expand Down
19 changes: 12 additions & 7 deletions app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
import AudiocastPageSkeletonLoader from '@/components/AudiocastPageSkeletonLoader.svelte';
import RenderAudioSources from '@/components/RenderAudioSources.svelte';
import AudiocastPageHeader from '@/components/AudiocastPageHeader.svelte';
import { startWith, tap } from 'rxjs';
import { startWith, tap, switchMap, of } from 'rxjs';
export let data;
Expand All @@ -38,6 +38,7 @@
$: sessionModel = data.sessionModel;
$: sessionModel$.pipe(
switchMap((v) => of(v)),
tap((v) => v && (sessionModel = v)),
startWith(data.sessionModel)
);
Expand All @@ -63,19 +64,21 @@
return fetch(`${env.API_BASE_URL}/audiocast/${sessionId}`).then<SessionModel>((res) => {
if (res.ok) return res.json();
else if (res.status === 404 && $session$?.summary) {
return generateAudiocast(sessionId, $session$.category, $session$.summary);
return generateAudiocast(sessionId, sessionModel.category, $session$.summary);
}
throw new Error('Failed to get audiocast');
});
}
</script>

<div class="mx-auto flex h-full w-full pb-40 overflow-auto mt-6 flex-col items-center px-2 sm:px-1">
<AudiocastPageHeader session={sessionModel} />
<div
class="mx-auto sm:max-w-xl lg:max-w-3xl max-w-full flex h-full w-full pb-40 overflow-auto flex-col items-center max-sm:px-4"
>
<AudiocastPageHeader category={sessionModel.category} title={sessionModel.metadata?.title} />

{#await getAudiocast(sessionId)}
<div class="flex flex-col w-full items-center justify-center -mt-6">
<div class="flex flex-col w-full">
<AudiocastPageSkeletonLoader />

{#if generating}
Expand All @@ -93,7 +96,7 @@
{/if}
</div>
{:then}
<div class="flex w-full px-4 flex-col gap-y-3 sm:max-w-xl lg:max-w-3xl max-w-full">
<div class="flex w-full mt-4 flex-col gap-y-3">
<RenderMedia filename={sessionId} let:uri>
<audio controls class="w-full animate-fade-in block">
<source src={uri} type="audio/mpeg" />
Expand All @@ -116,7 +119,7 @@
</Accordion.Content>
</Accordion.Item>

{#if sessionModel.metadata}
{#if sessionModel.metadata?.transcript}
<Accordion.Item value="item-1" class="border-gray-800">
<Accordion.Trigger>Audio Transcript</Accordion.Trigger>
<Accordion.Content>
Expand All @@ -129,7 +132,9 @@
</article>
</Accordion.Content>
</Accordion.Item>
{/if}

{#if sessionModel.metadata?.source}
<RenderAudioSources aiSource={sessionModel.metadata.source} />
{/if}
</Accordion.Root>
Expand Down
14 changes: 4 additions & 10 deletions app/src/routes/chat/[sessionId=sessionId]/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
import { streamingResponse } from '$lib/utils/streamingResponse';
import ChatListActionItems from '@/components/ChatListActionItems.svelte';
import { debounce } from 'throttle-debounce';
import AudiocastPageHeader from '@/components/AudiocastPageHeader.svelte';
export let data;
Expand Down Expand Up @@ -94,16 +95,9 @@

<ChatContainer bind:searchTerm on:click={handleSearch} on:keypress={handleSearch}>
<div slot="content" class="block w-full">
<div class="mb-4 flex flex-col gap-y-2">
<span class="capitalize bg-gray-800 text-gray-300 w-fit py-1 px-3 rounded-md">
{data.category}
</span>

{#if $session$?.title}
<h1 class="text-2xl font-semibold text-sky-200 mb-4">{$session$.title}</h1>
{/if}
</div>
<p class="mt-6 p-3 bg-sky-950/70 text-sky-200 rounded-md mb-4 w-full">
<AudiocastPageHeader category={data.category} title={$session$?.title} />

<p class="mt-4 p-3 bg-sky-950/70 text-sky-200 rounded-md mb-4 w-full">
Help us understand your preferences to curate the best audiocast for you.
</p>

Expand Down

0 comments on commit dc55a0c

Please sign in to comment.