Fix rendering issue with ToolMultipleVideoInput as well as merge functionality.

src/components/input/ToolMultipleVideoInput.tsx

@@ -1,92 +1,177 @@
-import React from 'react';
+import { ReactNode, useContext, useEffect, useRef, useState } from 'react';
-import { Box, Typography, IconButton } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
-import BaseFileInput from './BaseFileInput';
+import Typography from '@mui/material/Typography';
-import { BaseFileInputProps } from './file-input-utils';
+import InputHeader from '../InputHeader';
-import DeleteIcon from '@mui/icons-material/Delete';
+import InputFooter from './InputFooter';
+import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
+import { isArray } from 'lodash';
+import VideoFileIcon from '@mui/icons-material/VideoFile';
 
-interface ToolMultipleVideoInputProps
+interface MultiVideoInputComponentProps {
-  extends Omit<BaseFileInputProps, 'accept' | 'value' | 'onChange'> {
+  accept: string[];
-  value: File[] | null;
-  onChange: (files: File[]) => void;
-  accept?: string[];
   title?: string;
+  type: 'video';
+  value: MultiVideoInput[];
+  onChange: (file: MultiVideoInput[]) => void;
+}
+
+export interface MultiVideoInput {
+  file: File;
+  order: number;
 }
 
 export default function ToolMultipleVideoInput({
   value,
   onChange,
-  accept = ['video/*', '.mkv'],
+  accept,
   title,
-  ...props
+  type
-}: ToolMultipleVideoInputProps) {
+}: MultiVideoInputComponentProps) {
-  // For preview, use the first file if available
+  console.log('ToolMultipleVideoInput rendering with value:', value);
-  const preview =
-    value && value.length > 0 ? URL.createObjectURL(value[0]) : undefined;
 
-  // Handler for file selection
+  const fileInputRef = useRef<HTMLInputElement>(null);
-  const handleFileChange = (file: File | null) => {
+
-    if (file) {
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      // Add to existing files, avoiding duplicates by name
+    const files = event.target.files;
-      const files = value ? [...value] : [];
+    console.log('File change event:', files);
-      if (!files.some((f) => f.name === file.name && f.size === file.size)) {
+    if (files)
-        onChange([...files, file]);
+      onChange([
-      }
+        ...value,
-    }
+        ...Array.from(files).map((file) => ({ file, order: value.length }))
+      ]);
   };
 
-  // Handler for removing a file
+  const handleImportClick = () => {
-  const handleRemove = (idx: number) => {
+    console.log('Import clicked');
-    if (!value) return;
+    fileInputRef.current?.click();
-    const newFiles = value.slice();
+  };
-    newFiles.splice(idx, 1);
+
-    onChange(newFiles);
+  function handleClear() {
+    console.log('Clear clicked');
+    onChange([]);
+  }
+
+  function fileNameTruncate(fileName: string) {
+    const maxLength = 15;
+    if (fileName.length > maxLength) {
+      return fileName.slice(0, maxLength) + '...';
+    }
+    return fileName;
+  }
+
+  const sortList = () => {
+    const list = [...value];
+    list.sort((a, b) => a.order - b.order);
+    onChange(list);
+  };
+
+  const reorderList = (sourceIndex: number, destinationIndex: number) => {
+    if (destinationIndex === sourceIndex) {
+      return;
+    }
+    const list = [...value];
+
+    if (destinationIndex === 0) {
+      list[sourceIndex].order = list[0].order - 1;
+      sortList();
+      return;
+    }
+
+    if (destinationIndex === list.length - 1) {
+      list[sourceIndex].order = list[list.length - 1].order + 1;
+      sortList();
+      return;
+    }
+
+    if (destinationIndex < sourceIndex) {
+      list[sourceIndex].order =
+        (list[destinationIndex].order + list[destinationIndex - 1].order) / 2;
+      sortList();
+      return;
+    }
+
+    list[sourceIndex].order =
+      (list[destinationIndex].order + list[destinationIndex + 1].order) / 2;
+    sortList();
   };
 
   return (
-    <BaseFileInput
+    <Box>
-      value={null} // We handle preview manually
+      <InputHeader
-      onChange={handleFileChange}
+        title={title || 'Input ' + type.charAt(0).toUpperCase() + type.slice(1)}
-      accept={accept}
+      />
-      title={title || 'Input Videos'}
+      <Box
-      type="video"
+        sx={{
-      {...props}
+          width: '100%',
-    >
+          height: '300px',
-      {() => (
+          border: value?.length ? 0 : 1,
+          borderRadius: 2,
+          boxShadow: '5',
+          bgcolor: 'background.paper',
+          position: 'relative'
+        }}
+      >
         <Box
+          width="100%"
+          height="100%"
           sx={{
-            position: 'relative',
+            overflow: 'auto',
-            width: '100%',
-            height: '100%',
             display: 'flex',
-            flexDirection: 'column',
             alignItems: 'center',
-            justifyContent: 'center'
+            justifyContent: 'center',
+            flexWrap: 'wrap',
+            position: 'relative'
           }}
         >
-          {preview && (
+          {value?.length ? (
-            <video
+            value.map((file, index) => (
-              src={preview}
+              <Box
-              controls
+                key={index}
-              style={{ maxWidth: '100%', maxHeight: '100%' }}
+                sx={{
-            />
+                  margin: 1,
-          )}
+                  display: 'flex',
-          {value && value.length > 0 && (
+                  alignItems: 'center',
-            <Box mt={2} width="100%">
+                  justifyContent: 'space-between',
-              <Typography variant="subtitle2">Selected Videos:</Typography>
+                  width: '200px',
-              {value.map((file, idx) => (
+                  border: 1,
-                <Box key={idx} display="flex" alignItems="center" mb={1}>
+                  borderRadius: 1,
-                  <Typography variant="body2" sx={{ flex: 1 }}>
+                  padding: 1
-                    {file.name}
+                }}
+              >
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <VideoFileIcon />
+                  <Typography sx={{ marginLeft: 1 }}>
+                    {fileNameTruncate(file.file.name)}
                   </Typography>
-                  <IconButton size="small" onClick={() => handleRemove(idx)}>
-                    <DeleteIcon fontSize="small" />
-                  </IconButton>
                 </Box>
-              ))}
+                <Box
-            </Box>
+                  sx={{ cursor: 'pointer' }}
+                  onClick={() => {
+                    const updatedFiles = value.filter((_, i) => i !== index);
+                    onChange(updatedFiles);
+                  }}
+                >
+                  ✖
+                </Box>
+              </Box>
+            ))
+          ) : (
+            <Typography variant="body2" color="text.secondary">
+              No files selected
+            </Typography>
           )}
         </Box>
-      )}
+      </Box>
-    </BaseFileInput>
+
+      <InputFooter handleImport={handleImportClick} handleClear={handleClear} />
+      <input
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        type="file"
+        accept={accept.join(',')}
+        onChange={handleFileChange}
+        multiple={true}
+      />
+    </Box>
   );
 }

src/pages/tools/video/merge-video/index.tsx

@@ -3,7 +3,9 @@ import React, { useState } from 'react';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
 import ToolFileResult from '@components/result/ToolFileResult';
-import ToolMultipleVideoInput from '@components/input/ToolMultipleVideoInput';
+import ToolMultipleVideoInput, {
+  MultiVideoInput
+} from '@components/input/ToolMultipleVideoInput';
 import { main } from './service';
 import { InitialValuesType } from './types';
 
@@ -13,28 +15,42 @@ export default function MergeVideo({
   title,
   longDescription
 }: ToolComponentProps) {
-  const [input, setInput] = useState<File[] | null>(null);
+  const [input, setInput] = useState<MultiVideoInput[]>([]);
   const [result, setResult] = useState<File | null>(null);
   const [loading, setLoading] = useState(false);
 
-  const compute = async (_values: InitialValuesType, input: File[] | null) => {
+  console.log('MergeVideo component rendering, input:', input);
-    if (!input || input.length < 2) return;
+
+  const compute = async (
+    _values: InitialValuesType,
+    input: MultiVideoInput[]
+  ) => {
+    console.log('Compute called with input:', input);
+    if (!input || input.length < 2) {
+      console.log('Not enough files to merge');
+      return;
+    }
     setLoading(true);
     try {
-      const mergedBlob = await main(input, initialValues);
+      const files = input.map((item) => item.file);
+      console.log(
+        'Files to merge:',
+        files.map((f) => f.name)
+      );
+      const mergedBlob = await main(files, initialValues);
       const mergedFile = new File([mergedBlob], 'merged-video.mp4', {
         type: 'video/mp4'
       });
       setResult(mergedFile);
+      console.log('Merge successful');
     } catch (err) {
+      console.error(`Failed to merge video: ${err}`);
       setResult(null);
     } finally {
       setLoading(false);
     }
   };
 
-  const getGroups = () => [];
-
   return (
     <ToolContent
       title={title}
@@ -42,8 +58,13 @@ export default function MergeVideo({
       inputComponent={
         <ToolMultipleVideoInput
           value={input}
-          onChange={setInput}
+          onChange={(newInput) => {
+            console.log('Input changed:', newInput);
+            setInput(newInput);
+          }}
+          accept={['video/*', '.mp4', '.avi', '.mov', '.mkv']}
           title="Input Videos"
+          type="video"
         />
       }
       resultComponent={
@@ -55,7 +76,7 @@ export default function MergeVideo({
         />
       }
       initialValues={initialValues}
-      getGroups={getGroups}
+      getGroups={null}
       setInput={setInput}
       compute={compute}
       toolInfo={{ title: `What is a ${title}?`, description: longDescription }}

src/pages/tools/video/merge-video/merge-video.service.test.ts

@@ -1,4 +1,22 @@
-import { expect, describe, it } from 'vitest';
+import { expect, describe, it, vi } from 'vitest';
+
+// Mock FFmpeg and fetchFile to avoid Node.js compatibility issues
+vi.mock('@ffmpeg/ffmpeg', () => ({
+  FFmpeg: vi.fn().mockImplementation(() => ({
+    loaded: false,
+    load: vi.fn().mockResolvedValue(undefined),
+    writeFile: vi.fn().mockResolvedValue(undefined),
+    exec: vi.fn().mockResolvedValue(undefined),
+    readFile: vi.fn().mockResolvedValue(new Uint8Array([1, 2, 3, 4])),
+    deleteFile: vi.fn().mockResolvedValue(undefined)
+  }))
+}));
+
+vi.mock('@ffmpeg/util', () => ({
+  fetchFile: vi.fn().mockResolvedValue(new Uint8Array([1, 2, 3, 4]))
+}));
+
+// Import after mocking
 import { main } from './service';
 
 function createMockFile(name: string, type = 'video/mp4') {
@@ -7,14 +25,28 @@ function createMockFile(name: string, type = 'video/mp4') {
 
 describe('merge-video', () => {
   it('throws if less than two files are provided', async () => {
-    await expect(main([], {})).rejects.toThrow();
+    await expect(main([], {})).rejects.toThrow(
-    await expect(main([createMockFile('a.mp4')], {})).rejects.toThrow();
+      'Please provide at least two video files to merge.'
+    );
+    await expect(main([createMockFile('a.mp4')], {})).rejects.toThrow(
+      'Please provide at least two video files to merge.'
+    );
   });
 
-  it('merges two video files (mocked)', async () => {
+  it('throws if input is not an array', async () => {
-    // This will throw until ffmpeg logic is implemented
+    // @ts-ignore - testing invalid input
-    await expect(
+    await expect(main(null, {})).rejects.toThrow(
-      main([createMockFile('a.mp4'), createMockFile('b.mp4')], {})
+      'Please provide at least two video files to merge.'
-    ).rejects.toThrow('Video merging not yet implemented.');
+    );
+  });
+
+  it('successfully merges video files (mocked)', async () => {
+    const mockFile1 = createMockFile('video1.mp4');
+    const mockFile2 = createMockFile('video2.mp4');
+
+    const result = await main([mockFile1, mockFile2], {});
+
+    expect(result).toBeInstanceOf(Blob);
+    expect(result.type).toBe('video/mp4');
   });
 });

src/pages/tools/video/merge-video/service.ts

@@ -2,8 +2,6 @@ import { InitialValuesType, MergeVideoInput, MergeVideoOutput } from './types';
 import { FFmpeg } from '@ffmpeg/ffmpeg';
 import { fetchFile } from '@ffmpeg/util';
 
-const ffmpeg = new FFmpeg();
-
 // This function will use ffmpeg.wasm to merge multiple video files in the browser.
 // Returns a Promise that resolves to a Blob of the merged video.
 export async function main(
@@ -14,40 +12,62 @@ export async function main(
     throw new Error('Please provide at least two video files to merge.');
   }
 
-  if (!ffmpeg.loaded) {
+  // Create a new FFmpeg instance for each operation to avoid conflicts
-    await ffmpeg.load({
+  const ffmpeg = new FFmpeg();
-      wasmURL:
-        'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.9/dist/esm/ffmpeg-core.wasm'
-    });
-  }
 
-  // Write all input files to ffmpeg FS
+  const fileNames: string[] = [];
-  const fileNames = input.map((file, idx) => `input${idx}.mp4`);
-  for (let i = 0; i < input.length; i++) {
-    await ffmpeg.writeFile(fileNames[i], await fetchFile(input[i]));
-  }
-
-  // Create concat list file
-  const concatList = fileNames.map((name) => `file '${name}'`).join('\n');
-  await ffmpeg.writeFile(
-    'concat_list.txt',
-    new TextEncoder().encode(concatList)
-  );
-
-  // Run ffmpeg concat demuxer
   const outputName = 'output.mp4';
-  await ffmpeg.exec([
-    '-f',
-    'concat',
-    '-safe',
-    '0',
-    '-i',
-    'concat_list.txt',
-    '-c',
-    'copy',
-    outputName
-  ]);
 
-  const mergedData = await ffmpeg.readFile(outputName);
+  try {
-  return new Blob([mergedData], { type: 'video/mp4' });
+    // Load FFmpeg
+    if (!ffmpeg.loaded) {
+      await ffmpeg.load({
+        wasmURL:
+          'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.9/dist/esm/ffmpeg-core.wasm'
+      });
+    }
+
+    // Write all input files to ffmpeg FS
+    fileNames.push(...input.map((file, idx) => `input${idx}.mp4`));
+    for (let i = 0; i < input.length; i++) {
+      await ffmpeg.writeFile(fileNames[i], await fetchFile(input[i]));
+    }
+
+    // Create concat list file
+    const concatList = fileNames.map((name) => `file '${name}'`).join('\n');
+    await ffmpeg.writeFile(
+      'concat_list.txt',
+      new TextEncoder().encode(concatList)
+    );
+
+    // Run ffmpeg concat demuxer
+    await ffmpeg.exec([
+      '-f',
+      'concat',
+      '-safe',
+      '0',
+      '-i',
+      'concat_list.txt',
+      '-c',
+      'copy',
+      outputName
+    ]);
+
+    const mergedData = await ffmpeg.readFile(outputName);
+    return new Blob([mergedData], { type: 'video/mp4' });
+  } catch (error) {
+    console.error('Error merging videos:', error);
+    throw new Error(`Failed to merge videos: ${error}`);
+  } finally {
+    // Clean up temporary files
+    try {
+      for (const fileName of fileNames) {
+        await ffmpeg.deleteFile(fileName);
+      }
+      await ffmpeg.deleteFile('concat_list.txt');
+      await ffmpeg.deleteFile(outputName);
+    } catch (cleanupError) {
+      console.warn('Error cleaning up temporary files:', cleanupError);
+    }
+  }
 }