clean up api

elevenlabs · Jun 16, 2024 · de1c7ba · de1c7ba
1 parent b0f87e4
commit de1c7ba
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 48 deletions.
diff --git a/examples/sound-effects/video-to-sfx/app/page.tsx b/examples/sound-effects/video-to-sfx/app/page.tsx
@@ -11,7 +11,7 @@ import { exampleResponse } from "./api/exampleResponse";
 import { InlineInput } from "@/components/ui/inline-input";
 import AutosizeTextarea from "react-textarea-autosize";
 import { Orchestrator } from "./state/orchestrator";
-import { useVideoToSFX } from "@/lib/videoToSFX";
+import { convertVideoToSFX, useVideoToSFX } from "@/lib/videoToSFX";
 
 const LoadingIndicator = () => {
   const { ref, replay } = useScramble({
@@ -96,14 +96,13 @@ const timeout = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 export default function Home() {
   const [file, setFile] = useState<File | null>(null);
   const [orchestrator, setOrchestrator] = useState<Orchestrator | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
   const previewUrl = useMemo(
     () => (file ? URL.createObjectURL(file) : null),
     [file]
   );
 
-  const { frames, isLoading } = useVideoToSFX(previewUrl, setOrchestrator);
-
   useEffect(() => {
     const listener = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
@@ -144,8 +143,19 @@ export default function Home() {
           {!previewUrl && (
             <FileInput
               className="h-full w-full"
-              onChange={({ files }) => {
+              onChange={async ({ files }) => {
                 setFile(files[0]);
+                setIsLoading(true);
+                const sfx = await convertVideoToSFX(
+                  URL.createObjectURL(files[0])
+                );
+                setOrchestrator(
+                  new Orchestrator({
+                    soundEffects: sfx.soundEffects,
+                    caption: sfx.caption,
+                  })
+                );
+                setIsLoading(false);
               }}
             />
           )}

diff --git a/examples/sound-effects/video-to-sfx/lib/videoToSFX.ts b/examples/sound-effects/video-to-sfx/lib/videoToSFX.ts
@@ -2,8 +2,6 @@ import {
   VideoToSFXRequestBody,
   VideoToSFXResponseBody,
 } from "@/app/api/interface";
-import { Orchestrator } from "@/app/state/orchestrator";
-import { useEffect, useRef, useState } from "react";
 
 // get the first frame of the video
 // convert it to a base64 string
@@ -47,51 +45,32 @@ const getFramesFromVideo = async (
   });
 };
 
-export const useVideoToSFX = (
-  previewUrl: string | null,
-  setOrchestrator: (orchestrator: Orchestrator) => void
-) => {
-  const [isLoading, setIsLoading] = useState(false);
+export const convertVideoToSFX = async (
+  previewUrl: string
+): Promise<VideoToSFXResponseBody> => {
+  return new Promise(resolve => {
+    const video = document.createElement("video");
+    video.src = previewUrl;
+    const onLoad = async () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
 
-  // TODO: can remove frame, just used for debugging
-  const [frames, setFrames] = useState<string[]>([]);
+      const frames: string[] = [];
 
-  useEffect(() => {
-    const getFrames = async () => {
-      if (!previewUrl) {
-        return;
+      for (let i = 0; i < 4; i++) {
+        video.currentTime = i;
+        const frame = await getFramesFromVideo(video, canvas, i);
+        frames.push(frame as string);
       }
-      const video = document.createElement("video");
-      video.src = previewUrl;
-      const onLoad = async () => {
-        const canvas = document.createElement("canvas");
-        canvas.width = video.videoWidth;
-        canvas.height = video.videoHeight;
-
-        const frames: string[] = [];
 
-        for (let i = 0; i < 4; i++) {
-          video.currentTime = i;
-          const frame = await getFramesFromVideo(video, canvas, i);
-          frames.push(frame as string);
-          setFrames(frames);
-        }
-
-        setIsLoading(true);
-        const sfx = await apiVideoToSFX(frames);
-        setOrchestrator(
-          new Orchestrator({
-            soundEffects: sfx.soundEffects,
-            caption: sfx.caption,
-          })
-        );
-        setIsLoading(false);
-      };
-      video.addEventListener("loadeddata", onLoad);
-      return () => video.removeEventListener("loadeddata", onLoad);
+      const sfx = await apiVideoToSFX(frames);
+      video.removeEventListener("loadeddata", onLoad);
+      resolve({
+        soundEffects: sfx.soundEffects,
+        caption: sfx.caption,
+      });
     };
-    getFrames();
-  }, [previewUrl]);
-
-  return { frames, isLoading };
+    video.addEventListener("loadeddata", onLoad);
+  });
 };