From d0dcb8a98bcba26d9a494ba84adcb8808ee36d50 Mon Sep 17 00:00:00 2001 From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com> Date: Tue, 24 Mar 2026 23:53:51 +0530 Subject: [PATCH] refactor: simplify video presentation UI components and enhance loading/error states --- .../video-presentation/combined-player.tsx | 2 +- .../generate-video-presentation.tsx | 294 +++++++----------- 2 files changed, 119 insertions(+), 177 deletions(-) diff --git a/surfsense_web/components/tool-ui/video-presentation/combined-player.tsx b/surfsense_web/components/tool-ui/video-presentation/combined-player.tsx index f8e79f677..84147e94e 100644 --- a/surfsense_web/components/tool-ui/video-presentation/combined-player.tsx +++ b/surfsense_web/components/tool-ui/video-presentation/combined-player.tsx @@ -119,7 +119,7 @@ export function CombinedPlayer({ slides }: CombinedPlayerProps) { ); return ( -
+
-
-
-
- -
-
-
-
-

- {title} -

-
- - - Generating video presentation. This may take a few minutes. - -
-
-
-
-
-
-
+
+
+

{title}

+
); @@ -115,20 +90,14 @@ function GeneratingState({ title }: { title: string }) { function ErrorState({ title, error }: { title: string; error: string }) { return ( -
-
-
- -
-
-

- {title} -

-

- Failed to generate video presentation -

-

{error}

-
+
+
+

Video Generation Failed

+
+
+
+

{title}

+

{error}

); @@ -136,20 +105,10 @@ function ErrorState({ title, error }: { title: string; error: string }) { function CompilationLoadingState({ title }: { title: string }) { return ( -
-
-
- -
-
-

- {title} -

-
- - Compiling scenes... -
-
+
+
+

{title}

+
); @@ -170,7 +129,6 @@ function VideoPresentationPlayer({ const [isRendering, setIsRendering] = useState(false); const [renderProgress, setRenderProgress] = useState(null); - const [renderError, setRenderError] = useState(null); const [renderFormat, setRenderFormat] = useState(null); const abortControllerRef = useRef(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 ( -
- {/* Title bar with actions */} -
-
-
- -
-
-

{title}

-

- {compiledSlides.length} slides · {totalDuration.toFixed(1)}s ·{" "} - {FPS}fps -

-
-
- -
- {isRendering ? ( - <> -
- - - Rendering {renderFormat ?? ""}{" "} - {renderProgress !== null - ? `${Math.round(renderProgress * 100)}%` - : "..."} - -
-
-
-
- - - ) : ( - <> - - - - )} -
+
+ {/* Header */} +
+

{title}

+

+ {compiledSlides.length} slides {totalDuration.toFixed(1)}s {FPS}fps +

- {/* Render error */} - {renderError && ( -
- -
-

Download Failed

-

- {renderError} -

-
-
- )} +
+ + {/* Remotion Player */} +
+ +
+ +
+ + {/* Action buttons */} +
+ {isRendering ? ( + <> +
+ + + Rendering {renderFormat ?? ""}{" "} + {renderProgress !== null + ? `${Math.round(renderProgress * 100)}%` + : "..."} + +
+
+
+
+ + + ) : ( + <> + + + + )} +
- {/* Combined Remotion Player */} -
); } @@ -636,11 +583,13 @@ export const GenerateVideoPresentationToolUI = ({ args, result, status }: ToolCa if (status.type === "incomplete") { if (status.reason === "cancelled") { return ( -
-

- - Presentation generation cancelled -

+
+
+

Presentation Cancelled

+

+ Presentation generation was cancelled +

+
); } @@ -664,19 +613,12 @@ export const GenerateVideoPresentationToolUI = ({ args, result, status }: ToolCa if (result.status === "generating") { return ( -
-
-
- -
-
-

- Presentation already in progress -

-

- Please wait for the current presentation to complete. -

-
+
+
+

Presentation already in progress

+

+ Please wait for the current presentation to complete. +

);