now we serialize the final video as well

src/app/main.tsx

@@ -100,27 +100,26 @@ export function Main() {
   const busyRef = useRef(isBusy)
   busyRef.current = isBusy
 
-  const importStory = async (fileData: FileContent<ArrayBuffer>): Promise<ClapProject> => {
+  const importStory = async (fileData: FileContent<ArrayBuffer>): Promise<{
+    clap: ClapProject
+    regenerateVideo: boolean
+  }> => {
     if (!fileData?.name) { throw new Error(`invalid file (missing file name)`) }
 
     const {
-      setStatus,
-      setProgress,
       setParseGenerationStatus,
     } = useStore.getState()
 
-    let clap: ClapProject | undefined = undefined
-
     setParseGenerationStatus("generating")
 
     try {
       const blob = new Blob([fileData.content])
-      clap = await loadClap(blob, fileData.name)
+      const res = await loadClap(blob, fileData.name)
+
+      if (!res?.clap) { throw new Error(`failed to load the clap file`) }
 
-      if (!clap) { throw new Error(`failed to load the clap file`) }
       setParseGenerationStatus("finished")
-      setCurrentClap(clap)
-      return clap
+      return res
     } catch (err) {
       console.error("failed to load the Clap file:", err)
       setParseGenerationStatus("error")
@@ -472,29 +471,39 @@ export function Main() {
       setStatus("generating")
 
       try {
-        let clap = await importStory(fileData)
+        let { clap, regenerateVideo } = await importStory(fileData)
         
         // clap = await generateSounds(clap)
 
         // setCurrentClap(clap)
 
         console.log("loadClap(): clap = ", clap)
-        const claps = await Promise.all([
-          generateMusic(clap),
-          generateVideos(clap)
-        ])
 
-        // console.log("finished processing the 2 tasks in parallel")
+        // it is important to skip regeneration if we already have a video
+        if (regenerateVideo) {
+          console.log(`regenerating music and videos..`)
+          const claps = await Promise.all([
+            generateMusic(clap),
+            generateVideos(clap)
+          ])
+
+          // console.log("finished processing the 2 tasks in parallel")
+
+          for (const newerClap of claps) {
+            clap = await updateClap(clap, newerClap, {
+              overwriteMeta: false,
+              inlineReplace: true,
+            })
+          }
 
-        for (const newerClap of claps) {
-          clap = await updateClap(clap, newerClap, {
-            overwriteMeta: false,
-            inlineReplace: true,
-          })
-        }
 
-        setCurrentClap(clap)
-        await generateFinalVideo(clap)
+          setCurrentClap(clap)
+
+          await generateFinalVideo(clap)
+
+        } else {
+          console.log(`skipping music and video regeneration`)
+        }
 
         setStatus("finished")
         setProgress(100)
@@ -805,8 +814,8 @@ export function Main() {
                 
                       {canSeeBetaFeatures && 
                         <Tooltip>
-                          <TooltipTrigger>
-                            <Button
+                          <TooltipTrigger asChild><Button
+              
                             onClick={openFilePicker}
                             disabled={isBusy}
                             // variant="ghost"
@@ -820,8 +829,7 @@ export function Main() {
                           >
                             <span className="hidden xl:inline mr-1">Load .clap</span>
                             <span className="inline xl:hidden mr-1">Load .clap</span>
-                          </Button>
-                        </TooltipTrigger>
+                          </Button></TooltipTrigger>
                         <TooltipContent side="top">
                           <p className="text-xs font-normal text-stone-100/90 text-center">
                             Clap is a new AI format,<br/>check out the academy<br/>to learn more about it.
@@ -833,8 +841,7 @@ export function Main() {
     
                       {canSeeBetaFeatures &&
                         <Tooltip>
-                          <TooltipTrigger>
-                            <Button
+                          <TooltipTrigger asChild><Button
                         onClick={() => saveClap()}
                         disabled={!currentClap || isBusy}
                         // variant="ghost"
@@ -848,7 +855,7 @@ export function Main() {
                       >
                         <span className="hidden xl:inline mr-1">Save .clap</span>
                         <span className="inline xl:hidden mr-1">Save .clap</span>
-                      </Button> </TooltipTrigger>
+                      </Button></TooltipTrigger>
                         <TooltipContent side="top">
                           <p className="text-xs font-normal text-stone-100/90 text-center">
                           Clap is a new AI format,<br/>check out the academy<br/>to learn more about it.

src/app/store.ts

@@ -1,6 +1,6 @@
 "use client"
 
-import { ClapProject, parseClap, serializeClap, ClapMediaOrientation, parseMediaOrientation } from "@aitube/clap"
+import { ClapProject, parseClap, serializeClap, ClapMediaOrientation, parseMediaOrientation, ClapSegmentCategory, newSegment, getClapAssetSourceType } from "@aitube/clap"
 import { create } from "zustand"
 
 import { GenerationStage, GlobalStatus, TaskStatus } from "@/types"
@@ -67,7 +67,10 @@ export const useStore = create<{
   setError: (error: string) => void
   saveVideo: () => Promise<void>
   saveClap: () => Promise<void>
-  loadClap: (blob: Blob, fileName?: string) => Promise<ClapProject>
+  loadClap: (blob: Blob, fileName?: string) => Promise<{
+    clap: ClapProject
+    regenerateVideo: boolean
+  }>
 }>((set, get) => ({
   mainCharacterImage: "",
   mainCharacterVoice: "",
@@ -242,12 +245,43 @@ export const useStore = create<{
     document.body.removeChild(anchor)
   },
   saveClap: async (): Promise<void> => {
-    const { currentClap , storyPrompt } = get()
+    const { currentClap , storyPrompt, currentVideo } = get()
 
     if (!currentClap) { throw new Error(`cannot save a clap.. if there is no clap`) }
 
     currentClap.meta.description = storyPrompt
 
+    // make sure we update the total duration
+    for (const s of currentClap.segments) {
+      if (s.endTimeInMs > currentClap.meta.durationInMs) {
+        currentClap.meta.durationInMs = s.endTimeInMs
+      }
+    }
+
+    const alreadyAnEmbeddedFinalVideo = currentClap.segments.filter(s =>
+      s.category === ClapSegmentCategory.VIDEO &&
+      s.status === "completed" &&
+      s.startTimeInMs === 0 &&
+      s.endTimeInMs === currentClap.meta.durationInMs &&
+      s.assetUrl).at(0)
+
+    // inject the final mp4 video file into the .clap
+    if (alreadyAnEmbeddedFinalVideo) {
+      console.log(`editing the clap to update the final video`)
+      alreadyAnEmbeddedFinalVideo.assetUrl = currentVideo
+    } else {
+      console.log(`editing the clap to add a new final video`)
+      currentClap.segments.push(newSegment({
+        category: ClapSegmentCategory.VIDEO,
+        status: "completed",
+        startTimeInMs: 0,
+        endTimeInMs: currentClap.meta.durationInMs,
+        assetUrl: currentVideo,
+        assetDurationInMs: currentClap.meta.durationInMs,
+        assetSourceType: getClapAssetSourceType(currentVideo),
+        outputGain: 1.0,
+      }))
+    }
     const currentClapBlob: Blob = await serializeClap(currentClap)
 
     // Create an object URL for the compressed clap blob
@@ -272,7 +306,10 @@ export const useStore = create<{
     URL.revokeObjectURL(objectUrl)
     document.body.removeChild(anchor)
   },
-  loadClap: async (blob: Blob, fileName: string = "untitled_story.clap"): Promise<ClapProject> => {
+  loadClap: async (blob: Blob, fileName: string = "untitled_story.clap"): Promise<{
+    clap: ClapProject
+    regenerateVideo: boolean
+  }> => {
     if (!blob) {
       throw new Error(`missing blob`)
     }
@@ -293,13 +330,24 @@ export const useStore = create<{
     currentClap.meta.height = orientation === ClapMediaOrientation.LANDSCAPE ? RESOLUTION_SHORT : RESOLUTION_LONG
     currentClap.meta.width = orientation === ClapMediaOrientation.PORTRAIT ? RESOLUTION_SHORT : RESOLUTION_LONG
 
+    const embeddedFinalVideoAssetUrl = currentClap.segments.filter(s =>
+      s.category === ClapSegmentCategory.VIDEO &&
+      s.status === "completed" &&
+      s.startTimeInMs === 0 &&
+      s.endTimeInMs === currentClap.meta.durationInMs &&
+      s.assetUrl).map(s => s.assetUrl).at(0)
+
     set({
       currentClap,
       storyPrompt,
       orientation,
+      currentVideo: embeddedFinalVideoAssetUrl || get().currentVideo,
       currentVideoOrientation: orientation,
     })
 
-    return currentClap
+    return {
+      clap: currentClap,
+      regenerateVideo: !embeddedFinalVideoAssetUrl,
+    }
   },
 }))