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

refactor: file inputs

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-03-26 03:48:45 +00:00
parent 31dca53efb
commit b762cc86da
12 changed files with 465 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/tools/image/png/change-colors-in-png/index.tsx
View File

@@ -1,16 +1,15 @@
import { Box } from '@mui/material';
import React, { useState } from 'react';
import * as Yup from 'yup';
import ToolFileInput from '@components/input/ToolFileInput';
import ToolFileResult from '@components/result/ToolFileResult';
import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import { GetGroupsType } from '@components/options/ToolOptions';
import ColorSelector from '@components/options/ColorSelector';
import Color from 'color';
import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
import ToolInputAndResult from '@components/ToolInputAndResult';
import { areColorsSimilar } from 'utils/color';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
import ToolImageInput from '@components/input/ToolImageInput';
const initialValues = {
fromColor: 'white',
@@ -125,7 +124,7 @@ export default function ChangeColorsInPng({ title }: ToolComponentProps) {
input={input}
validationSchema={validationSchema}
inputComponent={
<ToolFileInput
<ToolImageInput
value={input}
onChange={setInput}
accept={['image/png']}

4
src/pages/tools/image/png/change-opacity/index.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import ToolFileInput from '@components/input/ToolFileInput';
import ToolImageInput from '@components/input/ToolImageInput';
import ToolFileResult from '@components/result/ToolFileResult';
import { changeOpacity } from './service';
import ToolContent from '@components/ToolContent';
@@ -94,7 +94,7 @@ export default function ChangeOpacity({ title }: ToolComponentProps) {
title={title}
input={input}
inputComponent={
<ToolFileInput
<ToolImageInput
value={input}
onChange={setInput}
accept={['image/png']}

4
src/pages/tools/image/png/compress-png/index.tsx
View File

@@ -1,7 +1,7 @@
import { Box } from '@mui/material';
import React, { useState } from 'react';
import * as Yup from 'yup';
import ToolFileInput from '@components/input/ToolFileInput';
import ToolImageInput from '@components/input/ToolImageInput';
import ToolFileResult from '@components/result/ToolFileResult';
import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
import imageCompression from 'browser-image-compression';
@@ -56,7 +56,7 @@ export default function ChangeColorsInPng({ title }: ToolComponentProps) {
title={title}
input={input}
inputComponent={
<ToolFileInput
<ToolImageInput
value={input}
onChange={setInput}
accept={['image/png']}

4
src/pages/tools/image/png/convert-jgp-to-png/index.tsx
View File

@@ -1,5 +1,5 @@
import { Box } from '@mui/material';
import ToolFileInput from 'components/input/ToolFileInput';
import ToolImageInput from 'components/input/ToolImageInput';
import CheckboxWithDesc from 'components/options/CheckboxWithDesc';
import ColorSelector from 'components/options/ColorSelector';
import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
@@ -101,7 +101,7 @@ export default function ConvertJgpToPng({ title }: ToolComponentProps) {
title={title}
input={input}
inputComponent={
<ToolFileInput
<ToolImageInput
value={input}
onChange={setInput}
accept={['image/jpeg']}

4
src/pages/tools/image/png/create-transparent/index.tsx
View File

@@ -1,7 +1,7 @@
import { Box } from '@mui/material';
import React, { useState } from 'react';
import * as Yup from 'yup';
import ToolFileInput from '@components/input/ToolFileInput';
import ToolImageInput from '@components/input/ToolImageInput';
import ToolFileResult from '@components/result/ToolFileResult';
import ColorSelector from '@components/options/ColorSelector';
import Color from 'color';
@@ -109,7 +109,7 @@ export default function CreateTransparent({ title }: ToolComponentProps) {
<ToolContent
title={title}
inputComponent={
<ToolFileInput
<ToolImageInput
value={input}
onChange={setInput}
accept={['image/png']}

4
src/pages/tools/image/png/crop/index.tsx
View File

@@ -1,7 +1,7 @@
import { Box } from '@mui/material';
import React, { useState } from 'react';
import * as Yup from 'yup';
import ToolFileInput from '@components/input/ToolFileInput';
import ToolImageInput from '@components/input/ToolImageInput';
import ToolFileResult from '@components/result/ToolFileResult';
import { GetGroupsType, UpdateField } from '@components/options/ToolOptions';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
@@ -197,7 +197,7 @@ export default function CropPng({ title }: ToolComponentProps) {
values: InitialValuesType,
updateField: UpdateField<InitialValuesType>
) => (
<ToolFileInput
<ToolImageInput
value={input}
onChange={setInput}
accept={['image/png']}

13
src/pages/tools/video/trim/index.tsx
View File

@@ -1,7 +1,6 @@
import { Box } from '@mui/material';
import React, { useCallback, useEffect, useState } from 'react';
import React, { useCallback, useState } from 'react';
import * as Yup from 'yup';
import ToolFileInput from '@components/input/ToolFileInput';
import ToolFileResult from '@components/result/ToolFileResult';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
@@ -11,6 +10,7 @@ import { updateNumberField } from '@utils/string';
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';
import { debounce } from 'lodash';
import ToolVideoInput from '@components/input/ToolVideoInput';
const ffmpeg = new FFmpeg();
@@ -35,14 +35,16 @@ export default function TrimVideo({ title }: ToolComponentProps) {
optionsValues: typeof initialValues,
input: File | null
) => {
console.log('compute', optionsValues, input);
if (!input) return;
const { trimStart, trimEnd } = optionsValues;
try {
if (!ffmpeg.loaded) {
await ffmpeg.load();
await ffmpeg.load({
wasmURL:
'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.9/dist/esm/ffmpeg-core.wasm'
});
}
const inputName = 'input.mp4';
@@ -111,12 +113,11 @@ export default function TrimVideo({ title }: ToolComponentProps) {
input={input}
renderCustomInput={({ trimStart, trimEnd }, setFieldValue) => {
return (
<ToolFileInput
<ToolVideoInput
value={input}
onChange={setInput}
accept={['video/mp4', 'video/webm', 'video/ogg']}
title={'Input Video'}
type="video"
showTrimControls={true}
onTrimChange={(trimStart, trimEnd) => {
setFieldValue('trimStart', trimStart);