feat: add video merging tool with multiple video input component

src/pages/tools/video/index.ts

@@ -1,3 +1,4 @@
+import { tool as videoMergeVideo } from './merge-video/meta';
 import { tool as videoToGif } from './video-to-gif/meta';
 import { tool as changeSpeed } from './change-speed/meta';
 import { tool as flipVideo } from './flip/meta';
@@ -17,5 +18,6 @@ export const videoTools = [
   flipVideo,
   cropVideo,
   changeSpeed,
-  videoToGif
+  videoToGif,
+  videoMergeVideo
 ];

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

@@ -0,0 +1,64 @@
+import { Box } from '@mui/material';
+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 { main } from './service';
+import { InitialValuesType } from './types';
+
+const initialValues: InitialValuesType = {};
+
+export default function MergeVideo({
+  title,
+  longDescription
+}: ToolComponentProps) {
+  const [input, setInput] = useState<File[] | null>(null);
+  const [result, setResult] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const compute = async (_values: InitialValuesType, input: File[] | null) => {
+    if (!input || input.length < 2) return;
+    setLoading(true);
+    try {
+      const mergedBlob = await main(input, initialValues);
+      const mergedFile = new File([mergedBlob], 'merged-video.mp4', {
+        type: 'video/mp4'
+      });
+      setResult(mergedFile);
+    } catch (err) {
+      setResult(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getGroups = () => [];
+
+  return (
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={
+        <ToolMultipleVideoInput
+          value={input}
+          onChange={setInput}
+          title="Input Videos"
+        />
+      }
+      resultComponent={
+        <ToolFileResult
+          value={result}
+          title={loading ? 'Merging Videos...' : 'Merged Video'}
+          loading={loading}
+          extension={'mp4'}
+        />
+      }
+      initialValues={initialValues}
+      getGroups={getGroups}
+      setInput={setInput}
+      compute={compute}
+      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+    />
+  );
+}

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

@@ -0,0 +1,20 @@
+import { expect, describe, it } from 'vitest';
+import { main } from './service';
+
+function createMockFile(name: string, type = 'video/mp4') {
+  return new File([new Uint8Array([0, 1, 2])], name, { type });
+}
+
+describe('merge-video', () => {
+  it('throws if less than two files are provided', async () => {
+    await expect(main([], {})).rejects.toThrow();
+    await expect(main([createMockFile('a.mp4')], {})).rejects.toThrow();
+  });
+
+  it('merges two video files (mocked)', async () => {
+    // This will throw until ffmpeg logic is implemented
+    await expect(
+      main([createMockFile('a.mp4'), createMockFile('b.mp4')], {})
+    ).rejects.toThrow('Video merging not yet implemented.');
+  });
+});

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

@@ -0,0 +1,14 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('video', {
+  name: 'Merge Videos',
+  path: 'merge-video',
+  icon: 'merge_type', // Material icon for merging
+  description: 'Combine multiple video files into one continuous video.',
+  shortDescription: 'Append and merge videos easily.',
+  keywords: ['merge', 'video', 'append', 'combine'],
+  longDescription:
+    'This tool allows you to merge or append multiple video files into a single continuous video. Simply upload your video files, arrange them in the desired order, and merge them into one file for easy sharing or editing.',
+  component: lazy(() => import('./index'))
+});

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

@@ -0,0 +1,53 @@
+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(
+  input: MergeVideoInput,
+  options: InitialValuesType
+): Promise<MergeVideoOutput> {
+  if (!Array.isArray(input) || input.length < 2) {
+    throw new Error('Please provide at least two video files to merge.');
+  }
+
+  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
+  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);
+  return new Blob([mergedData], { type: 'video/mp4' });
+}

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

@@ -0,0 +1,9 @@
+export type InitialValuesType = {
+  // Add any future options here (e.g., output format, resolution)
+};
+
+// Type for the main function input
+export type MergeVideoInput = File[];
+
+// Type for the main function output
+export type MergeVideoOutput = Blob;