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

chore: rotation options

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-03-29 16:40:14 +00:00
parent 87d47c3aa5
commit 6dc48e77ce
4 changed files with 149 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
.idea/workspace.xml generated
View File

@@ -5,7 +5,10 @@
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: time between dates"> <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: time between dates">
<change beforePath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/meta.ts" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/components/BackButton.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/video/rotate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/video/rotate/index.tsx" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -22,7 +25,7 @@
<option name="PUSH_AUTO_UPDATE" value="true" /> <option name="PUSH_AUTO_UPDATE" value="true" />
<option name="RECENT_BRANCH_BY_REPOSITORY"> <option name="RECENT_BRANCH_BY_REPOSITORY">
<map> <map>
<entry key="$PROJECT_DIR$" value="main" /> <entry key="$PROJECT_DIR$" value="fork/lfsjesus/feature/rotate-video" />
</map> </map>
</option> </option>
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" /> <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -41,66 +44,73 @@
&quot;state&quot;: &quot;OPEN&quot; &quot;state&quot;: &quot;OPEN&quot;
} }
}</component> }</component>
<component name="GitHubPullRequestState">{ <component name="GitHubPullRequestState"><![CDATA[{
&quot;prStates&quot;: [ "prStates": [
{ {
&quot;id&quot;: { "id": {
&quot;id&quot;: &quot;PR_kwDOMJIfts51PkS9&quot;, "id": "PR_kwDOMJIfts51PkS9",
&quot;number&quot;: 22 "number": 22
}, },
&quot;lastSeen&quot;: 1741207144695 "lastSeen": 1741207144695
}, },
{ {
&quot;id&quot;: { "id": {
&quot;id&quot;: &quot;PR_kwDOMJIfts6NiNYl&quot;, "id": "PR_kwDOMJIfts6NiNYl",
&quot;number&quot;: 32 "number": 32
}, },
&quot;lastSeen&quot;: 1741209723869 "lastSeen": 1741209723869
}, },
{ {
&quot;id&quot;: { "id": {
&quot;id&quot;: &quot;PR_kwDOMJIfts6Nheyd&quot;, "id": "PR_kwDOMJIfts6Nheyd",
&quot;number&quot;: 31 "number": 31
}, },
&quot;lastSeen&quot;: 1741213371410 "lastSeen": 1741213371410
}, },
{ {
&quot;id&quot;: { "id": {
&quot;id&quot;: &quot;PR_kwDOMJIfts6NmRBs&quot;, "id": "PR_kwDOMJIfts6NmRBs",
&quot;number&quot;: 33 "number": 33
}, },
&quot;lastSeen&quot;: 1741282429036 "lastSeen": 1741282429036
}, },
{ {
&quot;id&quot;: { "id": {
&quot;id&quot;: &quot;PR_kwDOMJIfts5zyFTs&quot;, "id": "PR_kwDOMJIfts5zyFTs",
&quot;number&quot;: 15 "number": 15
}, },
&quot;lastSeen&quot;: 1741535540953 "lastSeen": 1741535540953
}, },
{ {
&quot;id&quot;: { "id": {
&quot;id&quot;: &quot;PR_kwDOMJIfts6QQB3c&quot;, "id": "PR_kwDOMJIfts6QQB3c",
&quot;number&quot;: 59 "number": 59
}, },
&quot;lastSeen&quot;: 1743018960900 "lastSeen": 1743018960900
}, },
{ {
&quot;id&quot;: { "id": {
&quot;id&quot;: &quot;PR_kwDOMJIfts6QMPEg&quot;, "id": "PR_kwDOMJIfts6QMPEg",
&quot;number&quot;: 58 "number": 58
}, },
&quot;lastSeen&quot;: 1743019452983 "lastSeen": 1743019452983
}, },
{ {
&quot;id&quot;: { "id": {
&quot;id&quot;: &quot;PR_kwDOMJIfts6QZvRI&quot;, "id": "PR_kwDOMJIfts6QZvRI",
&quot;number&quot;: 61 "number": 61
}, },
&quot;lastSeen&quot;: 1743103196866 "lastSeen": 1743103196866
},
{
"id": {
"id": "PR_kwDOMJIfts6QqPrQ",
"number": 73
},
"lastSeen": 1743265865001
} }
] ]
}</component> }]]></component>
<component name="GithubPullRequestsUISettings">{ <component name="GithubPullRequestsUISettings">{
&quot;selectedUrlAndAccountId&quot;: { &quot;selectedUrlAndAccountId&quot;: {
&quot;url&quot;: &quot;https://github.com/iib0011/omni-tools.git&quot;, &quot;url&quot;: &quot;https://github.com/iib0011/omni-tools.git&quot;,
@@ -129,56 +139,56 @@
<option name="hideEmptyMiddlePackages" value="true" /> <option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" /> <option name="showLibraryContents" value="true" />
</component> </component>
<component name="PropertiesComponent"><![CDATA[{ <component name="PropertiesComponent">{
"keyToString": { &quot;keyToString&quot;: {
"ASKED_ADD_EXTERNAL_FILES": "true", &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
"ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true", &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
"Docker.Dockerfile build.executor": "Run", &quot;Docker.Dockerfile build.executor&quot;: &quot;Run&quot;,
"Docker.Dockerfile.executor": "Run", &quot;Docker.Dockerfile.executor&quot;: &quot;Run&quot;,
"Playwright.Create transparent PNG.should make png color transparent.executor": "Run", &quot;Playwright.Create transparent PNG.should make png color transparent.executor&quot;: &quot;Run&quot;,
"Playwright.JoinText Component.executor": "Run", &quot;Playwright.JoinText Component.executor&quot;: &quot;Run&quot;,
"Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run", &quot;Playwright.JoinText Component.should merge text pieces with specified join character.executor&quot;: &quot;Run&quot;,
"RunOnceActivity.OpenProjectViewOnStart": "true", &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
"RunOnceActivity.ShowReadmeOnStart": "true", &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
"RunOnceActivity.git.unshallow": "true", &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
"Vitest.compute function (1).executor": "Run", &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
"Vitest.compute function.executor": "Run", &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
"Vitest.mergeText.executor": "Run", &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
"Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run", &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
"Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run", &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
"Vitest.parsePageRanges.executor": "Run", &quot;Vitest.parsePageRanges.executor&quot;: &quot;Run&quot;,
"Vitest.removeDuplicateLines function.executor": "Run", &quot;Vitest.removeDuplicateLines function.executor&quot;: &quot;Run&quot;,
"Vitest.removeDuplicateLines function.newlines option.executor": "Run", &quot;Vitest.removeDuplicateLines function.newlines option.executor&quot;: &quot;Run&quot;,
"Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run", &quot;Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor&quot;: &quot;Run&quot;,
"Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run", &quot;Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor&quot;: &quot;Run&quot;,
"Vitest.replaceText function.executor": "Run", &quot;Vitest.replaceText function.executor&quot;: &quot;Run&quot;,
"Vitest.timeBetweenDates.executor": "Run", &quot;Vitest.timeBetweenDates.executor&quot;: &quot;Run&quot;,
"git-widget-placeholder": "main", &quot;git-widget-placeholder&quot;: &quot;main&quot;,
"ignore.virus.scanning.warn.message": "true", &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
"kotlin-language-version-configured": "true", &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
"last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/src/components/input", &quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/src/components/input&quot;,
"node.js.detected.package.eslint": "true", &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
"node.js.detected.package.tslint": "true", &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
"node.js.selected.package.eslint": "(autodetect)", &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
"node.js.selected.package.tslint": "(autodetect)", &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
"nodejs_package_manager_path": "npm", &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
"npm.build.executor": "Run", &quot;npm.build.executor&quot;: &quot;Run&quot;,
"npm.dev.executor": "Run", &quot;npm.dev.executor&quot;: &quot;Run&quot;,
"npm.lint.executor": "Run", &quot;npm.lint.executor&quot;: &quot;Run&quot;,
"npm.prebuild.executor": "Run", &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
"npm.script:create:tool.executor": "Run", &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
"npm.test.executor": "Run", &quot;npm.test.executor&quot;: &quot;Run&quot;,
"npm.test:e2e.executor": "Run", &quot;npm.test:e2e.executor&quot;: &quot;Run&quot;,
"npm.test:e2e:run.executor": "Run", &quot;npm.test:e2e:run.executor&quot;: &quot;Run&quot;,
"prettierjs.PrettierConfiguration.Package": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier", &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
"project.structure.last.edited": "Problems", &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
"project.structure.proportion": "0.0", &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
"project.structure.side.proportion": "0.2", &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
"settings.editor.selected.configurable": "refactai_advanced_settings", &quot;settings.editor.selected.configurable&quot;: &quot;refactai_advanced_settings&quot;,
"ts.external.directory.path": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib", &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
"vue.rearranger.settings.migration": "true" &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
} }
}]]></component> }</component>
<component name="ReactDesignerToolWindowState"> <component name="ReactDesignerToolWindowState">
<option name="myId2Visible"> <option name="myId2Visible">
<map> <map>

20
src/components/BackButton.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { IconButton } from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { useNavigate, useNavigationType } from 'react-router-dom';
const BackButton = () => {
const navigate = useNavigate();
const navigationType = useNavigationType(); // Check if there is a history state
const disabled = navigationType === 'POP';
const handleBack = () => {
navigate(-1);
};
return (
<IconButton onClick={handleBack} disabled={disabled}>
<ArrowBackIcon color={disabled ? 'action' : 'primary'} />
</IconButton>
);
};
export default BackButton;

17
src/pages/tools-by-category/index.tsx
View File

@@ -8,6 +8,10 @@ import { capitalizeFirstLetter } from '@utils/string';
import { Icon } from '@iconify/react'; import { Icon } from '@iconify/react';
import { categoriesColors } from 'config/uiConfig'; import { categoriesColors } from 'config/uiConfig';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import IconButton from '@mui/material/IconButton';
import { ArrowBack } from '@mui/icons-material';
import BackButton from '@components/BackButton';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
export default function Home() { export default function Home() {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -35,10 +39,15 @@ export default function Home() {
</Box> </Box>
<Divider sx={{ borderColor: theme.palette.primary.main }} /> <Divider sx={{ borderColor: theme.palette.primary.main }} />
<Box ref={mainContentRef} mt={3} ml={{ xs: 1, md: 2, lg: 3 }} padding={3}> <Box ref={mainContentRef} mt={3} ml={{ xs: 1, md: 2, lg: 3 }} padding={3}>
<Typography <Stack direction={'row'} alignItems={'center'} spacing={1}>
fontSize={22} <IconButton onClick={() => navigate('/')}>
color={theme.palette.primary.main} <ArrowBackIcon color={'primary'} />
>{`All ${capitalizeFirstLetter(categoryName)} Tools`}</Typography> </IconButton>
<Typography
fontSize={22}
color={theme.palette.primary.main}
>{`All ${capitalizeFirstLetter(categoryName)} Tools`}</Typography>
</Stack>
<Grid container spacing={2} mt={2}> <Grid container spacing={2} mt={2}>
{getToolsByCategory() {getToolsByCategory()
.find(({ type }) => type === categoryName) .find(({ type }) => type === categoryName)

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

@@ -1,15 +1,15 @@
import { Box } from '@mui/material'; import { Box } from '@mui/material';
import { useCallback, useState } from 'react'; import React, { 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';
import { ToolComponentProps } from '@tools/defineTool'; import { ToolComponentProps } from '@tools/defineTool';
import { GetGroupsType } from '@components/options/ToolOptions'; import { GetGroupsType } from '@components/options/ToolOptions';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import { updateNumberField } from '@utils/string';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import ToolVideoInput from '@components/input/ToolVideoInput'; import ToolVideoInput from '@components/input/ToolVideoInput';
import { rotateVideo } from './service'; import { rotateVideo } from './service';
import { RotationAngle } from '../../pdf/rotate-pdf/types';
import SimpleRadio from '@components/options/SimpleRadio';
export const initialValues = { export const initialValues = {
rotation: 90 rotation: 90
@@ -21,34 +21,28 @@ export const validationSchema = Yup.object({
.required('Rotation is required') .required('Rotation is required')
}); });
const angleOptions: { value: RotationAngle; label: string }[] = [
{ value: 90, label: '90° Clockwise' },
{ value: 180, label: '180° (Upside down)' },
{ value: 270, label: '270° (90° Counter-clockwise)' }
];
export default function RotateVideo({ title }: ToolComponentProps) { export default function RotateVideo({ title }: ToolComponentProps) {
const [input, setInput] = useState<File | null>(null); const [input, setInput] = useState<File | null>(null);
const [result, setResult] = useState<File | null>(null); const [result, setResult] = useState<File | null>(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const compute = async ( const compute = async (
optionsValues: typeof initialValues, optionsValues: typeof initialValues,
input: File | null input: File | null
) => { ) => {
if (!input) return; if (!input) return;
try {
await validationSchema.validate(optionsValues);
} catch (validationError) {
setError((validationError as Yup.ValidationError).message);
return;
}
setLoading(true); setLoading(true);
setError(null);
try { try {
const rotatedFile = await rotateVideo(input, optionsValues.rotation); const rotatedFile = await rotateVideo(input, optionsValues.rotation);
setResult(rotatedFile); setResult(rotatedFile);
} catch (error) { } catch (error) {
console.error('Error rotating video:', error); console.error('Error rotating video:', error);
setError('Failed to rotate video. Please try again.');
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -64,16 +58,16 @@ export default function RotateVideo({ title }: ToolComponentProps) {
title: 'Rotation', title: 'Rotation',
component: ( component: (
<Box> <Box>
<TextFieldWithDesc {angleOptions.map((angleOption) => (
onOwnChange={(value) => <SimpleRadio
updateNumberField(value, 'rotation', updateField) key={angleOption.value}
} title={angleOption.label}
value={values.rotation} checked={values.rotation === angleOption.value}
label={'Rotation (degrees)'} onClick={() => {
helperText={error || 'Valid values: 0, 90, 180, 270'} updateField('rotation', angleOption.value);
error={!!error} }}
sx={{ mb: 2, backgroundColor: 'white' }} />
/> ))}
</Box> </Box>
) )
} }
@@ -83,14 +77,14 @@ export default function RotateVideo({ title }: ToolComponentProps) {
<ToolContent <ToolContent
title={title} title={title}
input={input} input={input}
renderCustomInput={(_, setFieldValue) => ( inputComponent={
<ToolVideoInput <ToolVideoInput
value={input} value={input}
onChange={setInput} onChange={setInput}
accept={['video/mp4', 'video/webm', 'video/ogg']} accept={['video/mp4', 'video/webm', 'video/ogg']}
title={'Input Video'} title={'Input Video'}
/> />
)} }
resultComponent={ resultComponent={
loading ? ( loading ? (
<ToolFileResult <ToolFileResult