Skip to content

Commit 269519c

Browse files
sabaimransabaimran
committed
only load the rich player experience when user clicks play
remove unnecessary extra X icon for closing the dialogue
1 parent 530212f commit 269519c

File tree

4 files changed

+83
-80
lines changed

4 files changed

+83
-80
lines changed

‎client/src/components/Artifacts.tsx‎

Lines changed: 81 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,11 @@ export default function Artifacts({ projectId, papers }: ArtifactsProps) {
4141
const [audioInstructions, setAudioInstructions] = useState("");
4242
const [selectedAudioLength, setSelectedAudioLength] = useState("medium");
4343
const [isCreatingAudio, setIsCreatingAudio] = useState(false);
44+
const [isCreateAudioDialogOpen, setCreateAudioDialogOpen] = useState(false);
4445
const [audioOverviews, setAudioOverviews] = useState<AudioOverview[]>([]);
4546
const [audioJobs, setAudioJobs] = useState<AudioOverviewJob[]>([]);
4647
const [playingAudioId, setPlayingAudioId] = useState<string | null>(null);
48+
const [activatedAudioIds, setActivatedAudioIds] = useState<string[]>([]);
4749
const [loadingAudioId, setLoadingAudioId] = useState<string | null>(null);
4850
const [pollingInterval, setPollingInterval] = useState<NodeJS.Timeout | null>(null);
4951
const [audioProgress, setAudioProgress] = useState<{ [key: string]: { currentTime: number; duration: number } }>({});
@@ -117,6 +119,7 @@ export default function Artifacts({ projectId, papers }: ArtifactsProps) {
117119
}, [projectId, getProjectAudioOverviews, getProjectAudioJobs, startPolling, stopPolling]);
118120

119121
const handleCreateAudioOverview = async () => {
122+
setCreateAudioDialogOpen(false);
120123
setIsCreatingAudio(true);
121124
try {
122125
const requestData = {
@@ -209,6 +212,9 @@ export default function Artifacts({ projectId, papers }: ArtifactsProps) {
209212
};
210213
}
211214

215+
if (!activatedAudioIds.includes(audioOverviewId)) {
216+
setActivatedAudioIds(prev => [...prev, audioOverviewId]);
217+
}
212218
audio.play();
213219
}
214220
} catch (err) {
@@ -268,7 +274,7 @@ export default function Artifacts({ projectId, papers }: ArtifactsProps) {
268274
</div>
269275

270276
<div className="flex flex-wrap gap-3">
271-
<Dialog>
277+
<Dialog open={isCreateAudioDialogOpen} onOpenChange={setCreateAudioDialogOpen}>
272278
<DialogTrigger asChild>
273279
<button
274280
disabled={papers.length === 0}
@@ -388,7 +394,6 @@ export default function Artifacts({ projectId, papers }: ArtifactsProps) {
388394
<RichAudioOverview
389395
audioOverview={overview}
390396
papers={papers || []}
391-
onClose={() => { }}
392397
/>
393398
</div>
394399
</DialogContent>
@@ -397,82 +402,86 @@ export default function Artifacts({ projectId, papers }: ArtifactsProps) {
397402
</div>
398403
</div>
399404

400-
{/* Progress Bar */}
401-
<div className="mb-3">
402-
<div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
403-
<span>{progress ? formatTime(progress.currentTime) : '0:00'}</span>
404-
<span>{progress ? formatTime(progress.duration) : '0:00'}</span>
405-
</div>
406-
<div className="relative">
407-
<div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
408-
<div
409-
className="h-full bg-blue-500 transition-all duration-100"
410-
style={{ width: `${progressPercentage}%` }}
411-
/>
405+
{activatedAudioIds.includes(overview.id) && (
406+
<>
407+
{/* Progress Bar */}
408+
<div className="mb-3">
409+
<div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
410+
<span>{progress ? formatTime(progress.currentTime) : '0:00'}</span>
411+
<span>{progress ? formatTime(progress.duration) : '0:00'}</span>
412+
</div>
413+
<div className="relative">
414+
<div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
415+
<div
416+
className="h-full bg-blue-500 transition-all duration-100"
417+
style={{ width: `${progressPercentage}%` }}
418+
/>
419+
</div>
420+
<input
421+
type="range"
422+
min="0"
423+
max="100"
424+
value={progressPercentage}
425+
onChange={(e) => handleSeek(overview.id, Number(e.target.value))}
426+
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
427+
/>
428+
</div>
412429
</div>
413-
<input
414-
type="range"
415-
min="0"
416-
max="100"
417-
value={progressPercentage}
418-
onChange={(e) => handleSeek(overview.id, Number(e.target.value))}
419-
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
420-
/>
421-
</div>
422-
</div>
423430

424-
{/* Controls */}
425-
<div className="flex items-center justify-between">
426-
<div className="flex items-center space-x-2">
427-
<button
428-
onClick={() => skipBackward(overview.id)}
429-
className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
430-
title="Skip back 10s"
431-
>
432-
<RotateCcw className="w-4 h-4" />
433-
</button>
434-
<button
435-
onClick={() => skipForward(overview.id)}
436-
className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
437-
title="Skip forward 10s"
438-
>
439-
<RotateCcw className="w-4 h-4 scale-x-[-1]" />
440-
</button>
441-
</div>
442-
443-
<div className="flex items-center space-x-3">
444-
{/* Volume Control */}
445-
<div className="flex items-center space-x-1">
446-
<Volume2 className="w-3 h-3 text-gray-500 dark:text-gray-400" />
447-
<input
448-
type="range"
449-
min="0"
450-
max="1"
451-
step="0.01"
452-
value={volume}
453-
onChange={(e) => handleVolumeChange(overview.id, Number(e.target.value))}
454-
className="w-16 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
455-
/>
456-
</div>
457-
458-
{/* Speed Control */}
459-
<div className="flex space-x-1">
460-
{[0.75, 1, 1.25, 1.5, 2].map((speedOption) => (
431+
{/* Controls */}
432+
<div className="flex items-center justify-between">
433+
<div className="flex items-center space-x-2">
434+
<button
435+
onClick={() => skipBackward(overview.id)}
436+
className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
437+
title="Skip back 10s"
438+
>
439+
<RotateCcw className="w-4 h-4" />
440+
</button>
461441
<button
462-
key={speedOption}
463-
onClick={() => handleSpeedChange(overview.id, speedOption)}
464-
className={`px-2 py-1 text-xs rounded ${
465-
speed === speedOption
466-
? 'bg-blue-600 text-white'
467-
: 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
468-
} transition-colors`}
442+
onClick={() => skipForward(overview.id)}
443+
className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
444+
title="Skip forward 10s"
469445
>
470-
{speedOption}x
446+
<RotateCcw className="w-4 h-4 scale-x-[-1]" />
471447
</button>
472-
))}
448+
</div>
449+
450+
<div className="flex items-center space-x-3">
451+
{/* Volume Control */}
452+
<div className="flex items-center space-x-1">
453+
<Volume2 className="w-3 h-3 text-gray-500 dark:text-gray-400" />
454+
<input
455+
type="range"
456+
min="0"
457+
max="1"
458+
step="0.01"
459+
value={volume}
460+
onChange={(e) => handleVolumeChange(overview.id, Number(e.target.value))}
461+
className="w-16 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
462+
/>
463+
</div>
464+
465+
{/* Speed Control */}
466+
<div className="flex space-x-1">
467+
{[0.75, 1, 1.25, 1.5, 2].map((speedOption) => (
468+
<button
469+
key={speedOption}
470+
onClick={() => handleSpeedChange(overview.id, speedOption)}
471+
className={`px-2 py-1 text-xs rounded ${
472+
speed === speedOption
473+
? 'bg-blue-600 text-white'
474+
: 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
475+
} transition-colors`}
476+
>
477+
{speedOption}x
478+
</button>
479+
))}
480+
</div>
481+
</div>
473482
</div>
474-
</div>
475-
</div>
483+
</>
484+
)}
476485
</div>
477486
);
478487
})}

‎client/src/components/RichAudioOverview.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,11 @@ import { PdfViewer } from "@/components/PdfViewer";
1818
interface RichAudioOverviewProps {
1919
audioOverview: AudioOverview;
2020
papers?: PaperItem[];
21-
onClose?: () => void;
2221
}
2322

2423
export const RichAudioOverview = ({
2524
audioOverview,
2625
papers,
27-
onClose,
2826
}: RichAudioOverviewProps) => {
2927
const [pdfUrl, setPdfUrl] = useState<string | null>(null);
3028
const [searchTerm, setSearchTerm] = useState<string | null>(null);
@@ -93,11 +91,6 @@ export const RichAudioOverview = ({
9391
{audioOverview.title}
9492
</h2>
9593
</div>
96-
{onClose && (
97-
<Button onClick={onClose} variant="ghost" size="icon" className="ml-4">
98-
<X className="h-6 w-6" />
99-
</Button>
100-
)}
10194
</div>
10295

10396
{/* Transcript Content */}

‎server/app/llm/prompts.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
3. Highlights agreements and disagreements between papers
3939
4. Provides a cohesive narrative that addresses the summary request
4040
5. Includes proper citations and references to the source papers
41-
6. Is limited to {length} characters
41+
6. Is limited to a maximum of {length} characters
4242
4343
The summary should be engaging, informative, and suitable for audio narration.
4444

‎server/app/tasks/audio_overview.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ async def generate_audio_overview(
104104

105105
narrative_summary = await operations.create_multi_paper_narrative_summary(
106106
project_id=str(project_id),
107+
length=length,
107108
current_user=user,
108109
additional_instructions=additional_instructions,
109110
db=db,

0 commit comments

Comments
 (0)