From 3b639732f7042fb19223ee7f5a4009fa79829661 Mon Sep 17 00:00:00 2001
From: zhoug <90252209+zhoug0x@users.noreply.github.com>
Date: Sat, 19 Aug 2023 22:21:45 -0300
Subject: [PATCH] Fix type errors in Vite example app (#555)

* fix type errors in Vite example app

* replace semicolons
---
 apps/react-vite-app/src/App.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/react-vite-app/src/App.tsx b/apps/react-vite-app/src/App.tsx
index f2f44e0..1f23247 100644
--- a/apps/react-vite-app/src/App.tsx
+++ b/apps/react-vite-app/src/App.tsx
@@ -5,14 +5,14 @@ import { toBlobURL, fetchFile } from "@ffmpeg/util";
 function App() {
   const [loaded, setLoaded] = useState(false);
   const ffmpegRef = useRef(new FFmpeg());
-  const videoRef = useRef(null);
-  const messageRef = useRef(null);
+  const videoRef = useRef<HTMLVideoElement | null>(null)
+  const messageRef = useRef<HTMLParagraphElement | null>(null)
 
   const load = async () => {
     const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm";
     const ffmpeg = ffmpegRef.current;
     ffmpeg.on("log", ({ message }) => {
-      messageRef.current.innerHTML = message;
+      if (messageRef.current) messageRef.current.innerHTML = message;
     });
     // toBlobURL is used to bypass CORS issue, urls with the same
     // domain can be used directly.
@@ -35,10 +35,13 @@ function App() {
     const ffmpeg = ffmpegRef.current;
     await ffmpeg.writeFile("input.avi", await fetchFile(videoURL));
     await ffmpeg.exec(["-i", "input.avi", "output.mp4"]);
-    const data = await ffmpeg.readFile("output.mp4");
-    videoRef.current.src = URL.createObjectURL(
-      new Blob([data.buffer], { type: "video/mp4" })
-    );
+    const fileData = await ffmpeg.readFile('output.mp4');
+    const data = new Uint8Array(fileData as ArrayBuffer);
+    if (videoRef.current) {
+      videoRef.current.src = URL.createObjectURL(
+        new Blob([data.buffer], { type: 'video/mp4' })
+      )
+    }
   };
 
   return loaded ? (