mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-28 02:23:53 +02:00
refactor: simplify video presentation UI components and enhance loading/error states
This commit is contained in:
Anish Sarkar
parent
06b242c8f1
commit
d0dcb8a98b
2 changed files with 119 additions and 177 deletions
|
|
@ -119,7 +119,7 @@ export function CombinedPlayer({ slides }: CombinedPlayerProps) {
|
|||
);
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl border shadow-2xl shadow-purple-500/5">
|
||||
<div className="overflow-hidden rounded-xl">
|
||||
<Player
|
||||
component={CompositionWithScenes}
|
||||
durationInFrames={totalFrames}
|
||||
|
|
|
|||
|
|
@ -2,17 +2,12 @@
|
|||
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
|
||||
import {
|
||||
AlertCircleIcon,
|
||||
Download,
|
||||
Film,
|
||||
Loader2,
|
||||
Presentation,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { Dot, Download, Loader2, Presentation, X } from "lucide-react";
|
||||
import { useParams, usePathname } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { baseApiService } from "@/lib/apis/base-api.service";
|
||||
import { authenticatedFetch } from "@/lib/auth-utils";
|
||||
import { compileCheck, compileToComponent } from "@/lib/remotion/compile-check";
|
||||
|
|
@ -84,30 +79,10 @@ function parseStatusResponse(data: unknown): VideoPresentationStatusResponse | n
|
|||
|
||||
function GeneratingState({ title }: { title: string }) {
|
||||
return (
|
||||
<div className="my-4 overflow-hidden rounded-xl border border-primary/20 bg-linear-to-br from-primary/5 to-primary/10 p-4 sm:p-6">
|
||||
<div className="flex items-center gap-3 sm:gap-4">
|
||||
<div className="relative shrink-0">
|
||||
<div className="flex size-12 sm:size-16 items-center justify-center rounded-full bg-primary/20">
|
||||
<Film className="size-6 sm:size-8 text-primary" />
|
||||
</div>
|
||||
<div className="absolute inset-1 animate-ping rounded-full bg-primary/20" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-foreground text-sm sm:text-lg leading-tight">
|
||||
{title}
|
||||
</h3>
|
||||
<div className="mt-1.5 sm:mt-2 flex items-center gap-1.5 sm:gap-2 text-muted-foreground">
|
||||
<Spinner size="sm" className="size-3 sm:size-4" />
|
||||
<span className="text-xs sm:text-sm">
|
||||
Generating video presentation. This may take a few minutes.
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 sm:mt-3">
|
||||
<div className="h-1 sm:h-1.5 w-full overflow-hidden rounded-full bg-primary/10">
|
||||
<div className="h-full w-1/3 animate-pulse rounded-full bg-primary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
|
||||
<div className="px-5 pt-5 pb-4">
|
||||
<p className="text-sm font-semibold text-foreground line-clamp-2">{title}</p>
|
||||
<TextShimmerLoader text="Generating video presentation" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -115,20 +90,14 @@ function GeneratingState({ title }: { title: string }) {
|
|||
|
||||
function ErrorState({ title, error }: { title: string; error: string }) {
|
||||
return (
|
||||
<div className="my-4 overflow-hidden rounded-xl border border-destructive/20 bg-destructive/5 p-4 sm:p-6">
|
||||
<div className="flex items-center gap-3 sm:gap-4">
|
||||
<div className="flex size-12 sm:size-16 shrink-0 items-center justify-center rounded-full bg-destructive/10">
|
||||
<AlertCircleIcon className="size-6 sm:size-8 text-destructive" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-foreground text-sm sm:text-base leading-tight">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="mt-1 text-destructive text-xs sm:text-sm">
|
||||
Failed to generate video presentation
|
||||
</p>
|
||||
<p className="mt-1.5 sm:mt-2 text-muted-foreground text-xs sm:text-sm">{error}</p>
|
||||
</div>
|
||||
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
|
||||
<div className="px-5 pt-5 pb-4">
|
||||
<p className="text-sm font-semibold text-destructive">Video Generation Failed</p>
|
||||
</div>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4">
|
||||
<p className="text-sm font-medium text-foreground line-clamp-2">{title}</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -136,20 +105,10 @@ function ErrorState({ title, error }: { title: string; error: string }) {
|
|||
|
||||
function CompilationLoadingState({ title }: { title: string }) {
|
||||
return (
|
||||
<div className="my-4 overflow-hidden rounded-xl border bg-muted/30 p-4 sm:p-6">
|
||||
<div className="flex items-center gap-3 sm:gap-4">
|
||||
<div className="flex size-12 sm:size-16 shrink-0 items-center justify-center rounded-full bg-primary/10">
|
||||
<Film className="size-6 sm:size-8 text-primary/50" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-foreground text-sm sm:text-base leading-tight">
|
||||
{title}
|
||||
</h3>
|
||||
<div className="mt-1.5 sm:mt-2 flex items-center gap-1.5 sm:gap-2 text-muted-foreground">
|
||||
<Spinner size="sm" className="size-3 sm:size-4" />
|
||||
<span className="text-xs sm:text-sm">Compiling scenes...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
|
||||
<div className="px-5 pt-5 pb-4">
|
||||
<p className="text-sm font-semibold text-foreground line-clamp-2">{title}</p>
|
||||
<TextShimmerLoader text="Compiling scenes" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -170,7 +129,6 @@ function VideoPresentationPlayer({
|
|||
|
||||
const [isRendering, setIsRendering] = useState(false);
|
||||
const [renderProgress, setRenderProgress] = useState<number | null>(null);
|
||||
const [renderError, setRenderError] = useState<string | null>(null);
|
||||
const [renderFormat, setRenderFormat] = useState<string | null>(null);
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
|
||||
|
|
@ -292,7 +250,6 @@ function VideoPresentationPlayer({
|
|||
|
||||
setIsRendering(true);
|
||||
setRenderProgress(0);
|
||||
setRenderError(null);
|
||||
setRenderFormat(null);
|
||||
|
||||
const controller = new AbortController();
|
||||
|
|
@ -363,10 +320,10 @@ function VideoPresentationPlayer({
|
|||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (err) {
|
||||
if ((err as Error).name === "AbortError") {
|
||||
// User cancelled
|
||||
} else {
|
||||
setRenderError(err instanceof Error ? err.message : "Failed to render video");
|
||||
if ((err as Error).name !== "AbortError") {
|
||||
toast.error("Download Failed", {
|
||||
description: err instanceof Error ? err.message : "Failed to render video",
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setIsRendering(false);
|
||||
|
|
@ -384,7 +341,6 @@ function VideoPresentationPlayer({
|
|||
|
||||
setIsPptxExporting(true);
|
||||
setPptxProgress("Preparing...");
|
||||
setRenderError(null);
|
||||
|
||||
try {
|
||||
const { exportToPptx } = await import("dom-to-pptx");
|
||||
|
|
@ -437,10 +393,12 @@ function VideoPresentationPlayer({
|
|||
fileName: "presentation.pptx",
|
||||
});
|
||||
|
||||
roots.forEach((r) => r.unmount());
|
||||
for (const r of roots) r.unmount();
|
||||
document.body.removeChild(offscreen);
|
||||
} catch (err) {
|
||||
setRenderError(err instanceof Error ? err.message : "Failed to export PPTX");
|
||||
toast.error("PPTX Export Failed", {
|
||||
description: err instanceof Error ? err.message : "Failed to export PPTX",
|
||||
});
|
||||
} finally {
|
||||
setIsPptxExporting(false);
|
||||
setPptxProgress(null);
|
||||
|
|
@ -456,97 +414,86 @@ function VideoPresentationPlayer({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="my-4 space-y-3">
|
||||
{/* Title bar with actions */}
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
|
||||
<Film className="size-4 text-primary" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-sm font-semibold text-foreground truncate">{title}</h3>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{compiledSlides.length} slides · {totalDuration.toFixed(1)}s ·{" "}
|
||||
{FPS}fps
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{isRendering ? (
|
||||
<>
|
||||
<div className="flex items-center gap-2 rounded-lg border bg-card px-3 py-1.5">
|
||||
<Loader2 className="size-3.5 animate-spin text-primary" />
|
||||
<span className="text-xs font-medium">
|
||||
Rendering {renderFormat ?? ""}{" "}
|
||||
{renderProgress !== null
|
||||
? `${Math.round(renderProgress * 100)}%`
|
||||
: "..."}
|
||||
</span>
|
||||
<div className="h-1.5 w-20 overflow-hidden rounded-full bg-secondary">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary transition-all duration-300"
|
||||
style={{ width: `${(renderProgress ?? 0) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCancelRender}
|
||||
className="rounded-lg border p-1.5 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
|
||||
title="Cancel render"
|
||||
type="button"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="inline-flex items-center gap-1.5 rounded-lg border bg-card px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
|
||||
type="button"
|
||||
>
|
||||
<Download className="size-3.5" />
|
||||
Download MP4
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDownloadPPTX}
|
||||
disabled={isPptxExporting}
|
||||
className="inline-flex items-center gap-1.5 rounded-lg border bg-card px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
type="button"
|
||||
>
|
||||
{isPptxExporting ? (
|
||||
<>
|
||||
<Loader2 className="size-3.5 animate-spin" />
|
||||
{pptxProgress ?? "Exporting..."}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Presentation className="size-3.5" />
|
||||
Download PPTX
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="my-4 max-w-2xl overflow-hidden rounded-2xl border bg-muted/30 select-none">
|
||||
{/* Header */}
|
||||
<div className="px-5 pt-5 pb-4">
|
||||
<p className="text-sm font-semibold text-foreground line-clamp-2">{title}</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5 flex items-center">
|
||||
{compiledSlides.length} slides <Dot className="size-4" /> {totalDuration.toFixed(1)}s <Dot className="size-4" /> {FPS}fps
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Render error */}
|
||||
{renderError && (
|
||||
<div className="flex items-start gap-3 rounded-xl border border-destructive/20 bg-destructive/5 p-3">
|
||||
<AlertCircleIcon className="mt-0.5 size-4 shrink-0 text-destructive" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-destructive">Download Failed</p>
|
||||
<p className="mt-1 text-xs text-destructive/70 whitespace-pre-wrap">
|
||||
{renderError}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
|
||||
{/* Remotion Player */}
|
||||
<div className="px-5 pt-3">
|
||||
<CombinedPlayer slides={compiledSlides} />
|
||||
</div>
|
||||
|
||||
<div className="mx-5 mt-3 h-px bg-border/50" />
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="px-5 py-3 flex items-center gap-2 flex-wrap">
|
||||
{isRendering ? (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="size-3.5 animate-spin text-muted-foreground" />
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
Rendering {renderFormat ?? ""}{" "}
|
||||
{renderProgress !== null
|
||||
? `${Math.round(renderProgress * 100)}%`
|
||||
: "..."}
|
||||
</span>
|
||||
<div className="h-1.5 w-20 overflow-hidden rounded-full bg-muted">
|
||||
<div
|
||||
className="h-full rounded-full bg-muted-foreground/60 transition-all duration-300"
|
||||
style={{ width: `${(renderProgress ?? 0) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleCancelRender}
|
||||
className="size-7 text-muted-foreground"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleDownload}
|
||||
className="gap-1.5 h-7 px-2.5 text-xs text-muted-foreground"
|
||||
>
|
||||
<Download className="size-3.5" />
|
||||
Download MP4
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleDownloadPPTX}
|
||||
disabled={isPptxExporting}
|
||||
className="gap-1.5 h-7 px-2.5 text-xs text-muted-foreground"
|
||||
>
|
||||
{isPptxExporting ? (
|
||||
<>
|
||||
<Loader2 className="size-3.5 animate-spin" />
|
||||
{pptxProgress ?? "Exporting..."}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Presentation className="size-3.5" />
|
||||
Download PPTX
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Combined Remotion Player */}
|
||||
<CombinedPlayer slides={compiledSlides} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -636,11 +583,13 @@ export const GenerateVideoPresentationToolUI = ({ args, result, status }: ToolCa
|
|||
if (status.type === "incomplete") {
|
||||
if (status.reason === "cancelled") {
|
||||
return (
|
||||
<div className="my-4 rounded-xl border border-muted p-3 sm:p-4 text-muted-foreground">
|
||||
<p className="flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm">
|
||||
<Film className="size-3.5 sm:size-4" />
|
||||
<span className="line-through">Presentation generation cancelled</span>
|
||||
</p>
|
||||
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
|
||||
<div className="px-5 pt-5 pb-4">
|
||||
<p className="text-sm font-semibold text-muted-foreground">Presentation Cancelled</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Presentation generation was cancelled
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -664,19 +613,12 @@ export const GenerateVideoPresentationToolUI = ({ args, result, status }: ToolCa
|
|||
|
||||
if (result.status === "generating") {
|
||||
return (
|
||||
<div className="my-4 overflow-hidden rounded-xl border border-amber-500/20 bg-amber-500/5 p-3 sm:p-4">
|
||||
<div className="flex items-center gap-2.5 sm:gap-3">
|
||||
<div className="flex size-8 sm:size-10 shrink-0 items-center justify-center rounded-full bg-amber-500/20">
|
||||
<Film className="size-4 sm:size-5 text-amber-500" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-amber-600 dark:text-amber-400 text-xs sm:text-sm font-medium">
|
||||
Presentation already in progress
|
||||
</p>
|
||||
<p className="text-muted-foreground text-[10px] sm:text-xs mt-0.5">
|
||||
Please wait for the current presentation to complete.
|
||||
</p>
|
||||
</div>
|
||||
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
|
||||
<div className="px-5 pt-5 pb-4">
|
||||
<p className="text-sm font-semibold text-foreground">Presentation already in progress</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Please wait for the current presentation to complete.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue