Merge pull request #36 from CarlaPaiva/feat/video-converter

feat: full video converter
CarlaPaiva · Jan 27, 2024 · c5813c4 · c5813c4
2 parents 8754b6d + da27dcd
commit c5813c4
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 21 deletions.
diff --git a/src/components/converter-content/index.tsx b/src/components/converter-content/index.tsx
@@ -4,7 +4,7 @@ import VideoConverter from '../video-converter';
 
 const items = [
     {
-        label: 'Video To GIF',
+        label: 'Video Converter',
         key: '1',
         children: <VideoConverter/>
     }

diff --git a/src/components/converter/converter-steps/index.tsx b/src/components/converter/converter-steps/index.tsx
@@ -18,6 +18,7 @@ type ConverterStepsProps = {
     convert: () => Promise<void>
     clearStates: () => void
     downloadFiles: () => void
+    updateSelectedExtension: (extension: string) => void
 }
 
 const ConverterSteps = memo(function ConverterStepsComponent(props: ConverterStepsProps): JSX.Element {
@@ -43,8 +44,9 @@ const ConverterSteps = memo(function ConverterStepsComponent(props: ConverterSte
                     allowedUploadingFormats={props.allowedUploadingFormats}
                     extensionOptions={props.extensionOptions}
                     onConvertClick={onConvertClick}
-                    populateFileList={props.populateFileList} />
-    }, [props.allowedUploadingFormats, props.extensionOptions, props.populateFileList, onConvertClick])
+                    populateFileList={props.populateFileList}
+                    updateSelectedExtension={props.updateSelectedExtension} />
+    }, [props.allowedUploadingFormats, props.extensionOptions, props.populateFileList, props.updateSelectedExtension, onConvertClick])
 
     const getResultStep = useCallback(() => {
         return <ResultStep 

diff --git a/src/components/converter/converter-steps/upload-step/upload-step.tsx b/src/components/converter/converter-steps/upload-step/upload-step.tsx
@@ -9,6 +9,7 @@ type UploadStepProps = {
     allowedUploadingFormats: string[]
     populateFileList: (files: UploadFile[]) => void
     onConvertClick: () => void
+    updateSelectedExtension: (extension: string) => void
 }
 
 type ErrorMessage = {
@@ -59,7 +60,8 @@ const UploadStep = memo(function UploadStepComponent(props: Readonly<UploadStepP
 
     const onSelectedFormatChange = useCallback((value: string) => {
         setFormat(value)
-    }, [])
+        props.updateSelectedExtension(value)
+    }, [props])
 
     const onClick = useCallback(() => {
 

diff --git a/src/components/converter/index.tsx b/src/components/converter/index.tsx
@@ -17,7 +17,8 @@ type ConverterProps = {
 const Converter = memo(function ConverterComponent(props: ConverterProps): JSX.Element {
     const [fileList, setFileList] = useState<UploadFile[]>([])
     const [convertedFiles, setConvertedFiles ] = useState<ConvertedFile[]>([])
-
+    const [selectedExtension, setSelectedExtension ] = useState('')
+
     const onUploadDone = useCallback((files: UploadFile[]) => {
         setFileList(files)
     }, [])
@@ -35,9 +36,9 @@ const Converter = memo(function ConverterComponent(props: ConverterProps): JSX.E
     }, [])
 
     const convert = useCallback(async () => {
-        const files = await convertFiles(fileList)
+        const files = await convertFiles(fileList, selectedExtension)
         setConvertedFiles(files)
-    }, [fileList])
+    }, [fileList, selectedExtension])
 
     const downloadFiles = useCallback(() => {
         convertedFiles.forEach(file => {
@@ -62,7 +63,8 @@ const Converter = memo(function ConverterComponent(props: ConverterProps): JSX.E
             populateFileList={onUploadDone}
             convert={convert}
             clearStates={clearStates}
-            downloadFiles={downloadFiles} />
+            downloadFiles={downloadFiles}
+            updateSelectedExtension={setSelectedExtension} />
     )
 })
 

diff --git a/src/components/video-converter/index.tsx b/src/components/video-converter/index.tsx
@@ -2,14 +2,31 @@ import { Format } from "../../model/format"
 import Converter from "../converter"
 
 const uploadingFormat: string[] = [
-    ".mp4"
+    "video/mp4",
+    "video/x-m4v",
+    "video/*"
 ]
 
 const optionsToConvertTo: Format[] = [
     {
         name: "GIF",
-        extension: ".gif",
-        mimeType: "image/gif"
+        extension: ".gif"
+    },
+    {
+        name: "MP4",
+        extension: ".mp4"
+    },
+    {
+        name: "AVI",
+        extension: ".avi"
+    },
+    {
+        name: "WMV",
+        extension: ".wmv"
+    },
+    {
+        name: "MP3",
+        extension: ".mp3"
     }
 ]
 

diff --git a/src/model/format.ts b/src/model/format.ts
@@ -4,6 +4,4 @@ export type Format = {
     name: string
     /** Extension with a dot */
     extension: string
-    /** Mime type of this format, that allow it to be downloaded  */
-    mimeType: string
 }
diff --git a/src/services/converter.ts b/src/services/converter.ts
@@ -2,14 +2,22 @@ import { createFFmpeg } from "@ffmpeg/ffmpeg";
 import { UploadFile } from "antd";
 import { ConvertedFile } from "../model/converted-file";
 
-async function convertFiles(fileList: UploadFile[]): Promise<ConvertedFile[]>{
+const mimeType = {
+  ".gif": "image/gif",
+  ".mp4": "video/mp4",
+  ".avi": "video/x-msvideo",
+  ".wmv": "video/x-ms-wmv",
+  ".mp3": "audio/mp3",
+}
+
+async function convertFiles(fileList: UploadFile[], extension: string): Promise<ConvertedFile[]>{
     const blobList: ConvertedFile[] = []
 
     for (const file of fileList) {
         const sourceBuffer = await file.originFileObj?.arrayBuffer() as ArrayBuffer
         console.log('sourceBuffer', sourceBuffer)
         const nameWithoutExt = file.name.split('.')[0]
-        const outputName = `${nameWithoutExt}.gif`
+        const outputName = `${nameWithoutExt}${extension}`
 
         const ffmpeg = createFFmpeg({ log: true });
         await ffmpeg.load();
@@ -23,12 +31,21 @@ async function convertFiles(fileList: UploadFile[]): Promise<ConvertedFile[]>{
           await ffmpeg.run("-i", file.name, outputName);
 
           const output = ffmpeg.FS("readFile", outputName);
-          const blob = new Blob([output.buffer], { type: "image/gif" })
-          blobList.push({
-            newFileName: outputName,
-            blob,
-            result: "success"
-          })
+
+          if (output === null || output.buffer.byteLength <= 0 ) {
+            blobList.push({
+              newFileName: outputName,
+              result: "error",
+              blob: new Blob()
+            })
+          } else {
+            const blob = new Blob([output.buffer], { type: mimeType[extension as keyof typeof mimeType] })
+            blobList.push({
+              newFileName: outputName,
+              blob,
+              result: "success"
+            })
+          }
     }
 
     return blobList