From 377dbc3685c19c406fc0b27a1736132be66a6fff Mon Sep 17 00:00:00 2001 From: C043 Date: Mon, 9 Jun 2025 15:25:14 +0200 Subject: [PATCH 01/16] Initial commit for new tool video to gif --- src/pages/tools/video/index.ts | 5 +- src/pages/tools/video/video-to-gif/index.tsx | 69 +++++++++++++++++++ src/pages/tools/video/video-to-gif/meta.ts | 12 ++++ src/pages/tools/video/video-to-gif/service.ts | 5 ++ src/pages/tools/video/video-to-gif/types.ts | 3 + .../video-to-gif/video-to-gif.service.test.ts | 6 ++ 6 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 src/pages/tools/video/video-to-gif/index.tsx create mode 100644 src/pages/tools/video/video-to-gif/meta.ts create mode 100644 src/pages/tools/video/video-to-gif/service.ts create mode 100644 src/pages/tools/video/video-to-gif/types.ts create mode 100644 src/pages/tools/video/video-to-gif/video-to-gif.service.test.ts diff --git a/src/pages/tools/video/index.ts b/src/pages/tools/video/index.ts index 99bb8e7..4a7c3b8 100644 --- a/src/pages/tools/video/index.ts +++ b/src/pages/tools/video/index.ts @@ -1,3 +1,4 @@ +import { tool as videoVideoToGif } from './video-to-gif/meta'; import { tool as videoChangeSpeed } from './change-speed/meta'; import { tool as videoFlip } from './flip/meta'; import { rotate } from '../string/rotate/service'; @@ -9,6 +10,7 @@ import { tool as loopVideo } from './loop/meta'; import { tool as flipVideo } from './flip/meta'; import { tool as cropVideo } from './crop-video/meta'; import { tool as changeSpeed } from './change-speed/meta'; +import { tool as videoToGif } from './video-to-gif/meta'; export const videoTools = [ ...gifTools, @@ -18,5 +20,6 @@ export const videoTools = [ loopVideo, flipVideo, cropVideo, - changeSpeed + changeSpeed, + videoToGif ]; diff --git a/src/pages/tools/video/video-to-gif/index.tsx b/src/pages/tools/video/video-to-gif/index.tsx new file mode 100644 index 0000000..86c066b --- /dev/null +++ b/src/pages/tools/video/video-to-gif/index.tsx @@ -0,0 +1,69 @@ +import { Box } from '@mui/material'; +import React, { useState } from 'react'; +import ToolContent from '@components/ToolContent'; +import { ToolComponentProps } from '@tools/defineTool'; +import ToolTextInput from '@components/input/ToolTextInput'; +import ToolTextResult from '@components/result/ToolTextResult'; +import { GetGroupsType } from '@components/options/ToolOptions'; +import { CardExampleType } from '@components/examples/ToolExamples'; +import { main } from './service'; +import { InitialValuesType } from './types'; +import ToolVideoInput from '@components/input/ToolVideoInput'; +import ToolFileResult from '@components/result/ToolFileResult'; + +const initialValues: InitialValuesType = { + // splitSeparator: '\n' +}; + +export default function VideoToGif({ + title, + longDescription +}: ToolComponentProps) { + const [input, setInput] = useState(null); + const [result, setResult] = useState(null); + const [loading, setIsLoading] = useState(false); + + const compute = (values: InitialValuesType, input: File | null) => { + setResult(main(input, values)); + }; + + const getGroups: GetGroupsType | null = ({ + values, + updateField + }) => [ + { + title: 'Example Settings', + component: + } + ]; + + return ( + + } + resultComponent={ + loading ? ( + + ) : ( + + ) + } + initialValues={initialValues} + getGroups={getGroups} + setInput={setInput} + compute={compute} + toolInfo={{ title: `What is a ${title}?`, description: longDescription }} + /> + ); +} diff --git a/src/pages/tools/video/video-to-gif/meta.ts b/src/pages/tools/video/video-to-gif/meta.ts new file mode 100644 index 0000000..06f1f3f --- /dev/null +++ b/src/pages/tools/video/video-to-gif/meta.ts @@ -0,0 +1,12 @@ +import { defineTool } from '@tools/defineTool'; +import { lazy } from 'react'; + +export const tool = defineTool('video', { + name: 'Video to Gif', + path: 'video-to-gif', + icon: 'fluent:gif-16-regular', + description: 'This online utility lets you convert a short video to gif.', + shortDescription: 'Quickly convert a short video to gif', + keywords: ['video', 'to', 'gif', 'convert'], + component: lazy(() => import('./index')) +}); diff --git a/src/pages/tools/video/video-to-gif/service.ts b/src/pages/tools/video/video-to-gif/service.ts new file mode 100644 index 0000000..dabc369 --- /dev/null +++ b/src/pages/tools/video/video-to-gif/service.ts @@ -0,0 +1,5 @@ +import { InitialValuesType } from './types'; + +export function main(input: File, options: InitialValuesType): File { + return input; +} diff --git a/src/pages/tools/video/video-to-gif/types.ts b/src/pages/tools/video/video-to-gif/types.ts new file mode 100644 index 0000000..d4135c9 --- /dev/null +++ b/src/pages/tools/video/video-to-gif/types.ts @@ -0,0 +1,3 @@ +export type InitialValuesType = { + // splitSeparator: string; +}; diff --git a/src/pages/tools/video/video-to-gif/video-to-gif.service.test.ts b/src/pages/tools/video/video-to-gif/video-to-gif.service.test.ts new file mode 100644 index 0000000..50e3c16 --- /dev/null +++ b/src/pages/tools/video/video-to-gif/video-to-gif.service.test.ts @@ -0,0 +1,6 @@ +import { expect, describe, it } from 'vitest'; +// import { main } from './service'; +// +// describe('video-to-gif', () => { +// +// }) From c629c7b07c98e6396b7f0bc7522a9780414b6910 Mon Sep 17 00:00:00 2001 From: C043 Date: Mon, 9 Jun 2025 16:00:54 +0200 Subject: [PATCH 02/16] Adds quality options to video to gif tool --- src/pages/tools/video/video-to-gif/index.tsx | 45 +++++++++++++++++--- src/pages/tools/video/video-to-gif/types.ts | 4 +- 2 files changed, 42 insertions(+), 7 deletions(-) diff --git a/src/pages/tools/video/video-to-gif/index.tsx b/src/pages/tools/video/video-to-gif/index.tsx index 86c066b..1c39542 100644 --- a/src/pages/tools/video/video-to-gif/index.tsx +++ b/src/pages/tools/video/video-to-gif/index.tsx @@ -1,18 +1,21 @@ +/* eslint-disable prettier/prettier */ import { Box } from '@mui/material'; import React, { useState } from 'react'; import ToolContent from '@components/ToolContent'; import { ToolComponentProps } from '@tools/defineTool'; -import ToolTextInput from '@components/input/ToolTextInput'; -import ToolTextResult from '@components/result/ToolTextResult'; import { GetGroupsType } from '@components/options/ToolOptions'; -import { CardExampleType } from '@components/examples/ToolExamples'; import { main } from './service'; import { InitialValuesType } from './types'; import ToolVideoInput from '@components/input/ToolVideoInput'; import ToolFileResult from '@components/result/ToolFileResult'; +import CheckboxWithDesc from '@components/options/CheckboxWithDesc'; +import RadioWithTextField from '@components/options/RadioWithTextField'; +import SimpleRadio from '@components/options/SimpleRadio'; const initialValues: InitialValuesType = { - // splitSeparator: '\n' + quality: 'mid', + fps: '10', + scale: 'scale=320:-1:flags=bicubic' }; export default function VideoToGif({ @@ -32,8 +35,38 @@ export default function VideoToGif({ updateField }) => [ { - title: 'Example Settings', - component: + title: 'Set Quality', + component: ( + + { + updateField('quality', 'low'); + updateField('fps', '5'); + updateField('scale', 'scale=240:-1:flags=bilinear'); + }} + checked={values.quality === 'low'} + /> + { + updateField('quality', 'mid'); + updateField('fps', '10'); + updateField('scale', 'scale=320:-1:flags=bicubic'); + }} + checked={values.quality === 'mid'} + /> + { + updateField('quality', 'high'); + updateField('fps', '15'); + updateField('scale', 'scale=480:-1:flags=lanczos'); + }} + checked={values.quality === 'high'} + /> + + ) } ]; diff --git a/src/pages/tools/video/video-to-gif/types.ts b/src/pages/tools/video/video-to-gif/types.ts index d4135c9..b56264e 100644 --- a/src/pages/tools/video/video-to-gif/types.ts +++ b/src/pages/tools/video/video-to-gif/types.ts @@ -1,3 +1,5 @@ export type InitialValuesType = { - // splitSeparator: string; + quality: string; + fps: string; + scale: string; }; From 22cd6def76f20f82c119e1159b596cde145ea9b4 Mon Sep 17 00:00:00 2001 From: C043 Date: Mon, 9 Jun 2025 16:44:47 +0200 Subject: [PATCH 03/16] Adds main logic --- src/pages/tools/video/video-to-gif/index.tsx | 84 +++++++++++++++++-- src/pages/tools/video/video-to-gif/service.ts | 5 -- 2 files changed, 76 insertions(+), 13 deletions(-) delete mode 100644 src/pages/tools/video/video-to-gif/service.ts diff --git a/src/pages/tools/video/video-to-gif/index.tsx b/src/pages/tools/video/video-to-gif/index.tsx index 1c39542..858eed5 100644 --- a/src/pages/tools/video/video-to-gif/index.tsx +++ b/src/pages/tools/video/video-to-gif/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable prettier/prettier */ import { Box } from '@mui/material'; import React, { useState } from 'react'; @@ -8,14 +9,14 @@ import { main } from './service'; import { InitialValuesType } from './types'; import ToolVideoInput from '@components/input/ToolVideoInput'; import ToolFileResult from '@components/result/ToolFileResult'; -import CheckboxWithDesc from '@components/options/CheckboxWithDesc'; -import RadioWithTextField from '@components/options/RadioWithTextField'; import SimpleRadio from '@components/options/SimpleRadio'; +import { FFmpeg } from '@ffmpeg/ffmpeg'; +import { fetchFile } from '@ffmpeg/util'; const initialValues: InitialValuesType = { quality: 'mid', fps: '10', - scale: 'scale=320:-1:flags=bicubic' + scale: '320:-1:flags=bicubic' }; export default function VideoToGif({ @@ -24,10 +25,77 @@ export default function VideoToGif({ }: ToolComponentProps) { const [input, setInput] = useState(null); const [result, setResult] = useState(null); - const [loading, setIsLoading] = useState(false); + const [loading, setLoading] = useState(false); const compute = (values: InitialValuesType, input: File | null) => { - setResult(main(input, values)); + if (!input) return; + const { fps, scale } = values; + let ffmpeg: FFmpeg | null = null; + let ffmpegLoaded = false; + + const convertVideoToGif = async ( + file: File, + fps: string, + scale: string + ): Promise => { + setLoading(true); + + if (!ffmpeg) { + ffmpeg = new FFmpeg(); + } + + if (!ffmpegLoaded) { + await ffmpeg.load({ + wasmURL: + 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.9/dist/esm/ffmpeg-core.wasm' + }); + ffmpegLoaded = true; + } + + const fileName = file.name; + const outputName = 'output.gif'; + + try { + ffmpeg.writeFile(fileName, await fetchFile(file)); + + await ffmpeg.exec([ + '-i', + fileName, + '-vf', + `fps=${fps},scale=${scale},palettegen`, + 'palette.png' + ]); + + await ffmpeg.exec([ + '-i', + fileName, + '-i', + 'palette.png', + '-filter_complex', + `fps=${fps},scale=${scale}[x];[x][1:v]paletteuse`, + outputName + ]); + + const data = await ffmpeg.readFile(outputName); + + const blob = new Blob([data], { type: 'image/gif' }); + const convertedFile = new File([blob], outputName, { + type: 'image/gif' + }); + + await ffmpeg.deleteFile(fileName); + await ffmpeg.deleteFile(outputName); + + setResult(convertedFile); + } catch (err) { + console.error(`Failed to convert video: ${err}`); + throw err; + } finally { + setLoading(false); + } + }; + + convertVideoToGif(input, fps, scale); }; const getGroups: GetGroupsType | null = ({ @@ -43,7 +111,7 @@ export default function VideoToGif({ onClick={() => { updateField('quality', 'low'); updateField('fps', '5'); - updateField('scale', 'scale=240:-1:flags=bilinear'); + updateField('scale', '240:-1:flags=bilinear'); }} checked={values.quality === 'low'} /> @@ -52,7 +120,7 @@ export default function VideoToGif({ onClick={() => { updateField('quality', 'mid'); updateField('fps', '10'); - updateField('scale', 'scale=320:-1:flags=bicubic'); + updateField('scale', '320:-1:flags=bicubic'); }} checked={values.quality === 'mid'} /> @@ -61,7 +129,7 @@ export default function VideoToGif({ onClick={() => { updateField('quality', 'high'); updateField('fps', '15'); - updateField('scale', 'scale=480:-1:flags=lanczos'); + updateField('scale', '480:-1:flags=lanczos'); }} checked={values.quality === 'high'} /> diff --git a/src/pages/tools/video/video-to-gif/service.ts b/src/pages/tools/video/video-to-gif/service.ts deleted file mode 100644 index dabc369..0000000 --- a/src/pages/tools/video/video-to-gif/service.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { InitialValuesType } from './types'; - -export function main(input: File, options: InitialValuesType): File { - return input; -} From 3633420229a9a425d6c08988b7bb655fd35b0d64 Mon Sep 17 00:00:00 2001 From: C043 Date: Mon, 9 Jun 2025 16:54:48 +0200 Subject: [PATCH 04/16] Adds ultra quality option --- src/pages/tools/video/video-to-gif/index.tsx | 16 +++++++++++++--- src/pages/tools/video/video-to-gif/types.ts | 2 ++ 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/pages/tools/video/video-to-gif/index.tsx b/src/pages/tools/video/video-to-gif/index.tsx index 858eed5..22764b2 100644 --- a/src/pages/tools/video/video-to-gif/index.tsx +++ b/src/pages/tools/video/video-to-gif/index.tsx @@ -5,7 +5,6 @@ import React, { useState } from 'react'; import ToolContent from '@components/ToolContent'; import { ToolComponentProps } from '@tools/defineTool'; import { GetGroupsType } from '@components/options/ToolOptions'; -import { main } from './service'; import { InitialValuesType } from './types'; import ToolVideoInput from '@components/input/ToolVideoInput'; import ToolFileResult from '@components/result/ToolFileResult'; @@ -16,7 +15,9 @@ import { fetchFile } from '@ffmpeg/util'; const initialValues: InitialValuesType = { quality: 'mid', fps: '10', - scale: '320:-1:flags=bicubic' + scale: '320:-1:flags=bicubic', + starting: '0', + duration: '' }; export default function VideoToGif({ @@ -29,7 +30,7 @@ export default function VideoToGif({ const compute = (values: InitialValuesType, input: File | null) => { if (!input) return; - const { fps, scale } = values; + const { fps, scale, starting, duration } = values; let ffmpeg: FFmpeg | null = null; let ffmpegLoaded = false; @@ -133,6 +134,15 @@ export default function VideoToGif({ }} checked={values.quality === 'high'} /> + { + updateField('quality', 'ultra'); + updateField('fps', '15'); + updateField('scale', '640:-1:flags=lanczos'); + }} + checked={values.quality === 'ultra'} + /> ) } diff --git a/src/pages/tools/video/video-to-gif/types.ts b/src/pages/tools/video/video-to-gif/types.ts index b56264e..5a754d8 100644 --- a/src/pages/tools/video/video-to-gif/types.ts +++ b/src/pages/tools/video/video-to-gif/types.ts @@ -2,4 +2,6 @@ export type InitialValuesType = { quality: string; fps: string; scale: string; + starting: string; + duration: string; }; From 899797cd48326fed33bed1bd65d234e53f6c33a0 Mon Sep 17 00:00:00 2001 From: C043 Date: Mon, 9 Jun 2025 16:55:59 +0200 Subject: [PATCH 05/16] Removed linting comments --- src/pages/tools/video/video-to-gif/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/tools/video/video-to-gif/index.tsx b/src/pages/tools/video/video-to-gif/index.tsx index 22764b2..93130fa 100644 --- a/src/pages/tools/video/video-to-gif/index.tsx +++ b/src/pages/tools/video/video-to-gif/index.tsx @@ -1,5 +1,3 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ -/* eslint-disable prettier/prettier */ import { Box } from '@mui/material'; import React, { useState } from 'react'; import ToolContent from '@components/ToolContent'; From 9b4d739f19c52e89b828e9bd0b5c8f11d3b09fd9 Mon Sep 17 00:00:00 2001 From: C043 Date: Mon, 9 Jun 2025 16:57:47 +0200 Subject: [PATCH 06/16] Removed unused configuration properties --- src/pages/tools/video/video-to-gif/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/tools/video/video-to-gif/index.tsx b/src/pages/tools/video/video-to-gif/index.tsx index 93130fa..a8eba09 100644 --- a/src/pages/tools/video/video-to-gif/index.tsx +++ b/src/pages/tools/video/video-to-gif/index.tsx @@ -13,9 +13,7 @@ import { fetchFile } from '@ffmpeg/util'; const initialValues: InitialValuesType = { quality: 'mid', fps: '10', - scale: '320:-1:flags=bicubic', - starting: '0', - duration: '' + scale: '320:-1:flags=bicubic' }; export default function VideoToGif({ @@ -28,7 +26,7 @@ export default function VideoToGif({ const compute = (values: InitialValuesType, input: File | null) => { if (!input) return; - const { fps, scale, starting, duration } = values; + const { fps, scale } = values; let ffmpeg: FFmpeg | null = null; let ffmpegLoaded = false; From a1cfccdbbaf3524d84bf4e6968d0b9031fe18a3d Mon Sep 17 00:00:00 2001 From: C043 Date: Mon, 9 Jun 2025 16:58:43 +0200 Subject: [PATCH 07/16] Removed the properties from the type file too --- src/pages/tools/video/video-to-gif/types.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/tools/video/video-to-gif/types.ts b/src/pages/tools/video/video-to-gif/types.ts index 5a754d8..b56264e 100644 --- a/src/pages/tools/video/video-to-gif/types.ts +++ b/src/pages/tools/video/video-to-gif/types.ts @@ -2,6 +2,4 @@ export type InitialValuesType = { quality: string; fps: string; scale: string; - starting: string; - duration: string; }; From a262c9834f47a6519de22b407e719d5569a566d8 Mon Sep 17 00:00:00 2001 From: omenmn Date: Sat, 21 Jun 2025 14:18:15 +0530 Subject: [PATCH 08/16] init new pdf to png --- src/pages/tools/pdf/index.ts | 4 +- src/pages/tools/pdf/pdf-to-png/index.tsx | 62 +++++++++++++++++++ src/pages/tools/pdf/pdf-to-png/meta.ts | 14 +++++ .../pdf/pdf-to-png/pdf-to-png.service.test.ts | 6 ++ src/pages/tools/pdf/pdf-to-png/service.ts | 5 ++ src/pages/tools/pdf/pdf-to-png/types.ts | 3 + 6 files changed, 93 insertions(+), 1 deletion(-) create mode 100644 src/pages/tools/pdf/pdf-to-png/index.tsx create mode 100644 src/pages/tools/pdf/pdf-to-png/meta.ts create mode 100644 src/pages/tools/pdf/pdf-to-png/pdf-to-png.service.test.ts create mode 100644 src/pages/tools/pdf/pdf-to-png/service.ts create mode 100644 src/pages/tools/pdf/pdf-to-png/types.ts diff --git a/src/pages/tools/pdf/index.ts b/src/pages/tools/pdf/index.ts index c5f294f..2f9a4a1 100644 --- a/src/pages/tools/pdf/index.ts +++ b/src/pages/tools/pdf/index.ts @@ -1,3 +1,4 @@ +import { tool as pdfPdfToPng } from './pdf-to-png/meta'; import { tool as pdfRotatePdf } from './rotate-pdf/meta'; import { meta as splitPdfMeta } from './split-pdf/meta'; import { meta as mergePdf } from './merge-pdf/meta'; @@ -12,5 +13,6 @@ export const pdfTools: DefinedTool[] = [ compressPdfTool, protectPdfTool, mergePdf, - pdfToEpub + pdfToEpub, + pdfPdfToPng ]; diff --git a/src/pages/tools/pdf/pdf-to-png/index.tsx b/src/pages/tools/pdf/pdf-to-png/index.tsx new file mode 100644 index 0000000..05add93 --- /dev/null +++ b/src/pages/tools/pdf/pdf-to-png/index.tsx @@ -0,0 +1,62 @@ +import { Box } from '@mui/material'; +import React, { useState } from 'react'; +import ToolContent from '@components/ToolContent'; +import { ToolComponentProps } from '@tools/defineTool'; +import ToolTextInput from '@components/input/ToolTextInput'; +import ToolTextResult from '@components/result/ToolTextResult'; +import { GetGroupsType } from '@components/options/ToolOptions'; +import { CardExampleType } from '@components/examples/ToolExamples'; +import { main } from './service'; +import { InitialValuesType } from './types'; + +const initialValues: InitialValuesType = { + // splitSeparator: '\n' +}; + +const exampleCards: CardExampleType[] = [ + { + title: 'Split a String', + description: 'This example shows how to split a string into multiple lines', + sampleText: 'Hello World,Hello World', + sampleResult: `Hello World +Hello World`, + sampleOptions: { + // splitSeparator: ',' + } + } +]; +export default function PdfToPng({ + title, + longDescription +}: ToolComponentProps) { + const [input, setInput] = useState(''); + const [result, setResult] = useState(''); + + const compute = (values: InitialValuesType, input: string) => { + setResult(main(input, values)); + }; + + const getGroups: GetGroupsType | null = ({ + values, + updateField + }) => [ + { + title: 'Example Settings', + component: + } + ]; + return ( + } + resultComponent={} + initialValues={initialValues} + exampleCards={exampleCards} + getGroups={getGroups} + setInput={setInput} + compute={compute} + toolInfo={{ title: `What is a ${title}?`, description: longDescription }} + /> + ); +} diff --git a/src/pages/tools/pdf/pdf-to-png/meta.ts b/src/pages/tools/pdf/pdf-to-png/meta.ts new file mode 100644 index 0000000..1960368 --- /dev/null +++ b/src/pages/tools/pdf/pdf-to-png/meta.ts @@ -0,0 +1,14 @@ +import { defineTool } from '@tools/defineTool'; +import { lazy } from 'react'; + +export const tool = defineTool('pdf', { + name: 'PDF to PNG', + path: 'pdf-to-png', + icon: 'mdi:image-multiple', // Iconify icon ID + description: 'Transform PDF documents into PNG panels.', + shortDescription: 'Convert PDF into PNG images', + keywords: ['pdf', 'png', 'convert', 'image', 'extract', 'pages'], + longDescription: + 'Upload a PDF and convert each page into a high-quality PNG image directly in your browser. This tool is ideal for extracting visual content or sharing individual pages. No data is uploaded — everything runs locally.', + component: lazy(() => import('./index')) +}); diff --git a/src/pages/tools/pdf/pdf-to-png/pdf-to-png.service.test.ts b/src/pages/tools/pdf/pdf-to-png/pdf-to-png.service.test.ts new file mode 100644 index 0000000..5e7ff29 --- /dev/null +++ b/src/pages/tools/pdf/pdf-to-png/pdf-to-png.service.test.ts @@ -0,0 +1,6 @@ +import { expect, describe, it } from 'vitest'; +// import { main } from './service'; +// +// describe('pdf-to-png', () => { +// +// }) diff --git a/src/pages/tools/pdf/pdf-to-png/service.ts b/src/pages/tools/pdf/pdf-to-png/service.ts new file mode 100644 index 0000000..38333df --- /dev/null +++ b/src/pages/tools/pdf/pdf-to-png/service.ts @@ -0,0 +1,5 @@ +import { InitialValuesType } from './types'; + +export function main(input: string, options: InitialValuesType): string { + return input; +} diff --git a/src/pages/tools/pdf/pdf-to-png/types.ts b/src/pages/tools/pdf/pdf-to-png/types.ts new file mode 100644 index 0000000..d4135c9 --- /dev/null +++ b/src/pages/tools/pdf/pdf-to-png/types.ts @@ -0,0 +1,3 @@ +export type InitialValuesType = { + // splitSeparator: string; +}; From d2acde3e818bcc74659f337b8b9853160b5869d6 Mon Sep 17 00:00:00 2001 From: omenmn Date: Sat, 21 Jun 2025 14:40:01 +0530 Subject: [PATCH 09/16] created pdf to png tool --- package-lock.json | 8 +- package.json | 2 +- src/components/result/ToolMultiFileResult.tsx | 152 ++++++++++++++++++ src/pages/tools/pdf/pdf-to-png/index.tsx | 98 +++++------ .../pdf/pdf-to-png/pdf-to-png.service.test.ts | 6 - src/pages/tools/pdf/pdf-to-png/service.ts | 52 +++++- src/pages/tools/pdf/pdf-to-png/types.ts | 3 - 7 files changed, 259 insertions(+), 62 deletions(-) create mode 100644 src/components/result/ToolMultiFileResult.tsx delete mode 100644 src/pages/tools/pdf/pdf-to-png/pdf-to-png.service.test.ts delete mode 100644 src/pages/tools/pdf/pdf-to-png/types.ts diff --git a/package-lock.json b/package-lock.json index e501cc8..ff64e27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,7 +39,7 @@ "notistack": "^3.0.1", "omggif": "^1.0.10", "pdf-lib": "^1.17.1", - "pdfjs-dist": "^5.2.133", + "pdfjs-dist": "^5.3.31", "playwright": "^1.45.0", "qrcode": "^1.5.4", "rc-slider": "^11.1.8", @@ -8680,9 +8680,9 @@ "license": "0BSD" }, "node_modules/pdfjs-dist": { - "version": "5.2.133", - "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.2.133.tgz", - "integrity": "sha512-abE6ZWDxztt+gGFzfm4bX2ggfxUk9wsDEoFzIJm9LozaY3JdXR7jyLK4Bjs+XLXplCduuWS1wGhPC4tgTn/kzg==", + "version": "5.3.31", + "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.3.31.tgz", + "integrity": "sha512-EhPdIjNX0fcdwYQO+e3BAAJPXt+XI29TZWC7COhIXs/K0JHcUt1Gdz1ITpebTwVMFiLsukdUZ3u0oTO7jij+VA==", "license": "Apache-2.0", "engines": { "node": ">=20.16.0 || >=22.3.0" diff --git a/package.json b/package.json index ed7ebcf..6adcd2e 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "notistack": "^3.0.1", "omggif": "^1.0.10", "pdf-lib": "^1.17.1", - "pdfjs-dist": "^5.2.133", + "pdfjs-dist": "^5.3.31", "playwright": "^1.45.0", "qrcode": "^1.5.4", "rc-slider": "^11.1.8", diff --git a/src/components/result/ToolMultiFileResult.tsx b/src/components/result/ToolMultiFileResult.tsx new file mode 100644 index 0000000..bba516b --- /dev/null +++ b/src/components/result/ToolMultiFileResult.tsx @@ -0,0 +1,152 @@ +import { + Box, + CircularProgress, + Typography, + useTheme, + Button +} from '@mui/material'; +import InputHeader from '../InputHeader'; +import greyPattern from '@assets/grey-pattern.png'; +import { globalInputHeight } from '../../config/uiConfig'; +import ResultFooter from './ResultFooter'; + +export default function ToolFileResult({ + title = 'Result', + value, + zipFile, + loading, + loadingText +}: { + title?: string; + value: File[]; + zipFile?: File | null; + loading?: boolean; + loadingText?: string; +}) { + const theme = useTheme(); + + const getFileType = ( + file: File + ): 'image' | 'video' | 'audio' | 'pdf' | 'unknown' => { + if (file.type.startsWith('image/')) return 'image'; + if (file.type.startsWith('video/')) return 'video'; + if (file.type.startsWith('audio/')) return 'audio'; + if (file.type.startsWith('application/pdf')) return 'pdf'; + return 'unknown'; + }; + + const handleDownload = (file: File) => { + const url = URL.createObjectURL(file); + const a = document.createElement('a'); + a.href = url; + a.download = file.name; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + }; + + return ( + + + + + {loading ? ( + + + + {loadingText}... This may take a moment. + + + ) : value.length > 0 ? ( + value.map((file, idx) => { + const preview = URL.createObjectURL(file); + const fileType = getFileType(file); + + return ( + + {fileType === 'image' && ( + {`Preview + )} + {fileType === 'video' && ( +