marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-22 23:49:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: moved rotation logic to a service.ts file

Browse Source
This commit is contained in:
Miguel Pedrosa
2025-03-29 15:38:33 +00:00
parent 480b4f7c24
commit 19d157eec4
2 changed files with 50 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/pages/tools/video/rotate/index.tsx
View File

@@ -1,5 +1,5 @@
import { Box, CircularProgress } from '@mui/material'; import { Box } from '@mui/material';
import React, { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import * as Yup from 'yup'; import * as Yup from 'yup';
import ToolFileResult from '@components/result/ToolFileResult'; import ToolFileResult from '@components/result/ToolFileResult';
import ToolContent from '@components/ToolContent'; import ToolContent from '@components/ToolContent';
@@ -7,18 +7,15 @@ import { ToolComponentProps } from '@tools/defineTool';
import { GetGroupsType } from '@components/options/ToolOptions'; import { GetGroupsType } from '@components/options/ToolOptions';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc'; import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import { updateNumberField } from '@utils/string'; import { updateNumberField } from '@utils/string';
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import ToolVideoInput from '@components/input/ToolVideoInput'; import ToolVideoInput from '@components/input/ToolVideoInput';
import { rotateVideo } from './service';
const ffmpeg = new FFmpeg(); export const initialValues = {
const initialValues = {
rotation: 90 rotation: 90
}; };
const validationSchema = Yup.object({ export const validationSchema = Yup.object({
rotation: Yup.number() rotation: Yup.number()
.oneOf([0, 90, 180, 270], 'Rotation must be 0, 90, 180, or 270 degrees') .oneOf([0, 90, 180, 270], 'Rotation must be 0, 90, 180, or 270 degrees')
.required('Rotation is required') .required('Rotation is required')
@@ -43,52 +40,11 @@ export default function RotateVideo({ title }: ToolComponentProps) {
return; return;
} }
const { rotation } = optionsValues;
setLoading(true); setLoading(true);
setError(null); setError(null);
try { try {
if (!ffmpeg.loaded) { const rotatedFile = await rotateVideo(input, optionsValues.rotation);
await ffmpeg.load({
wasmURL:
'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.9/dist/esm/ffmpeg-core.wasm'
});
}
const inputName = 'input.mp4';
const outputName = 'output.mp4';
await ffmpeg.writeFile(inputName, await fetchFile(input));
// Determine FFmpeg transpose filter based on rotation
const rotateMap: Record<number, string> = {
90: 'transpose=1',
180: 'transpose=2,transpose=2',
270: 'transpose=2',
0: ''
};
const rotateFilter = rotateMap[rotation];
const args = ['-i', inputName];
if (rotateFilter) {
args.push('-vf', rotateFilter);
}
args.push('-c:v', 'libx264', '-preset', 'ultrafast', outputName);
console.log('Executing FFmpeg with args:', args);
await ffmpeg.exec(args);
const rotatedData = await ffmpeg.readFile(outputName);
const rotatedBlob = new Blob([rotatedData], { type: 'video/mp4' });
const rotatedFile = new File(
[rotatedBlob],
`${input.name.replace(/\.[^/.]+$/, '')}_rotated.mp4`,
{
type: 'video/mp4'
}
);
setResult(rotatedFile); setResult(rotatedFile);
} catch (error) { } catch (error) {
console.error('Error rotating video:', error); console.error('Error rotating video:', error);

44
src/pages/tools/video/rotate/service.ts Normal file
View File

@@ -0,0 +1,44 @@
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';
const ffmpeg = new FFmpeg();
export async function rotateVideo(
input: File,
rotation: number
): Promise<File> {
if (!ffmpeg.loaded) {
await ffmpeg.load({
wasmURL:
'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.9/dist/esm/ffmpeg-core.wasm'
});
}
const inputName = 'input.mp4';
const outputName = 'output.mp4';
await ffmpeg.writeFile(inputName, await fetchFile(input));
const rotateMap: Record<number, string> = {
90: 'transpose=1',
180: 'transpose=2,transpose=2',
270: 'transpose=2',
0: ''
};
const rotateFilter = rotateMap[rotation];
const args = ['-i', inputName];
if (rotateFilter) {
args.push('-vf', rotateFilter);
}
args.push('-c:v', 'libx264', '-preset', 'ultrafast', outputName);
await ffmpeg.exec(args);
const rotatedData = await ffmpeg.readFile(outputName);
return new File(
[new Blob([rotatedData], { type: 'video/mp4' })],
`${input.name.replace(/\.[^/.]+$/, '')}_rotated.mp4`,
{ type: 'video/mp4' }
);
}