From 3149ae7cef49ee41f1ee258befdadeefaa2817cc Mon Sep 17 00:00:00 2001
From: nevolodia <bolodiab3007@gmail.com>
Date: Thu, 22 May 2025 16:58:22 +0200
Subject: [PATCH] Main flip page tool and meta added.

---
 src/pages/tools/video/flip/index.tsx | 113 +++++++++++++++++++++++++++
 src/pages/tools/video/flip/meta.ts   |  15 ++++
 2 files changed, 128 insertions(+)
 create mode 100644 src/pages/tools/video/flip/index.tsx
 create mode 100644 src/pages/tools/video/flip/meta.ts

diff --git a/src/pages/tools/video/flip/index.tsx b/src/pages/tools/video/flip/index.tsx
new file mode 100644
index 0000000..c01fd41
--- /dev/null
+++ b/src/pages/tools/video/flip/index.tsx
@@ -0,0 +1,113 @@
+import { Box } from '@mui/material';
+import { useCallback, useState } from 'react';
+import * as Yup from 'yup';
+import ToolFileResult from '@components/result/ToolFileResult';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import { debounce } from 'lodash';
+import ToolVideoInput from '@components/input/ToolVideoInput';
+import { flipVideo } from './service';
+import { FlipOrientation, InitialValuesType } from './types';
+import SimpleRadio from '@components/options/SimpleRadio';
+
+export const initialValues: InitialValuesType = {
+  orientation: 'horizontal'
+};
+
+export const validationSchema = Yup.object({
+  orientation: Yup.string()
+    .oneOf(
+      ['horizontal', 'vertical'],
+      'Orientation must be horizontal or vertical'
+    )
+    .required('Orientation is required')
+});
+
+const orientationOptions: { value: FlipOrientation; label: string }[] = [
+  { value: 'horizontal', label: 'Horizontal (Mirror)' },
+  { value: 'vertical', label: 'Vertical (Upside Down)' }
+];
+
+export default function FlipVideo({ title }: ToolComponentProps) {
+  const [input, setInput] = useState<File | null>(null);
+  const [result, setResult] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const compute = async (
+    optionsValues: InitialValuesType,
+    input: File | null
+  ) => {
+    if (!input) return;
+    setLoading(true);
+
+    try {
+      const flippedFile = await flipVideo(input, optionsValues.orientation);
+      setResult(flippedFile);
+    } catch (error) {
+      console.error('Error flipping video:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const debouncedCompute = useCallback(debounce(compute, 1000), []);
+
+  const getGroups: GetGroupsType<InitialValuesType> = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'Orientation',
+      component: (
+        <Box>
+          {orientationOptions.map((orientationOption) => (
+            <SimpleRadio
+              key={orientationOption.value}
+              title={orientationOption.label}
+              checked={values.orientation === orientationOption.value}
+              onClick={() => {
+                updateField('orientation', orientationOption.value);
+              }}
+            />
+          ))}
+        </Box>
+      )
+    }
+  ];
+
+  return (
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={
+        <ToolVideoInput
+          value={input}
+          onChange={setInput}
+          title={'Input Video'}
+        />
+      }
+      resultComponent={
+        loading ? (
+          <ToolFileResult
+            title={'Flipping Video'}
+            value={null}
+            loading={true}
+            extension={''}
+          />
+        ) : (
+          <ToolFileResult
+            title={'Flipped Video'}
+            value={result}
+            extension={'mp4'}
+          />
+        )
+      }
+      initialValues={initialValues}
+      getGroups={getGroups}
+      compute={debouncedCompute}
+      setInput={setInput}
+      validationSchema={validationSchema}
+    />
+  );
+}
diff --git a/src/pages/tools/video/flip/meta.ts b/src/pages/tools/video/flip/meta.ts
new file mode 100644
index 0000000..3462925
--- /dev/null
+++ b/src/pages/tools/video/flip/meta.ts
@@ -0,0 +1,15 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('video', {
+  name: 'Flip Video',
+  path: 'flip',
+  icon: 'mdi:flip-horizontal',
+  description:
+    'This online utility allows you to flip videos horizontally or vertically. You can preview the flipped video before processing. Supports common video formats like MP4, WebM, and OGG.',
+  shortDescription: 'Flip videos horizontally or vertically',
+  keywords: ['flip', 'video', 'mirror', 'edit', 'horizontal', 'vertical'],
+  longDescription:
+    'Easily flip your videos horizontally (mirror) or vertically (upside down) with this simple online tool.',
+  component: lazy(() => import('./index'))
+});