feat: change gif speed

src/pages/video/gif/change-speed/index.tsx

@@ -0,0 +1,150 @@
+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 from '../../../../components/options/ToolOptions';
+import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
+import ToolInputAndResult from '../../../../components/ToolInputAndResult';
+import Typography from '@mui/material/Typography';
+import { FrameOptions, GifReader, GifWriter } from 'omggif';
+import { gifBinaryToFile } from '../../../../utils/gif';
+
+const initialValues = {
+  newSpeed: 200
+};
+const validationSchema = Yup.object({
+  // splitSeparator: Yup.string().required('The separator is required')
+});
+export default function ChangeSpeed() {
+  const [input, setInput] = useState<File | null>(null);
+  const [result, setResult] = useState<File | null>(null);
+
+  const compute = (optionsValues: typeof initialValues, input: File) => {
+    const { newSpeed } = optionsValues;
+
+    const processImage = async (file: File, newSpeed: number) => {
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(file);
+
+      reader.onload = async () => {
+        const arrayBuffer = reader.result;
+
+        if (arrayBuffer instanceof ArrayBuffer) {
+          const intArray = new Uint8Array(arrayBuffer);
+
+          const reader = new GifReader(intArray as Buffer);
+          const info = reader.frameInfo(0);
+          const imageDataArr: ImageData[] = new Array(reader.numFrames())
+            .fill(0)
+            .map((_, k) => {
+              const image = new ImageData(info.width, info.height);
+
+              reader.decodeAndBlitFrameRGBA(k, image.data as any);
+
+              return image;
+            });
+          const gif = new GifWriter(
+            [],
+            imageDataArr[0].width,
+            imageDataArr[0].height,
+            { loop: 20 }
+          );
+
+          // Decode the GIF
+          imageDataArr.forEach((imageData) => {
+            const palette = [];
+            const pixels = new Uint8Array(imageData.width * imageData.height);
+
+            const { data } = imageData;
+            for (let j = 0, k = 0, jl = data.length; j < jl; j += 4, k++) {
+              const r = Math.floor(data[j] * 0.1) * 10;
+              const g = Math.floor(data[j + 1] * 0.1) * 10;
+              const b = Math.floor(data[j + 2] * 0.1) * 10;
+              const color = (r << 16) | (g << 8) | (b << 0);
+
+              const index = palette.indexOf(color);
+
+              if (index === -1) {
+                pixels[k] = palette.length;
+                palette.push(color);
+              } else {
+                pixels[k] = index;
+              }
+            }
+
+            // Force palette to be power of 2
+
+            let powof2 = 1;
+            while (powof2 < palette.length) powof2 <<= 1;
+            palette.length = powof2;
+
+            const delay = newSpeed / 10; // Delay in hundredths of a sec (100 = 1s)
+            const options: FrameOptions = {
+              // @ts-ignore
+              palette: new Uint32Array(palette),
+              delay: delay
+            };
+            gif.addFrame(
+              0,
+              0,
+              imageData.width,
+              imageData.height,
+              // @ts-ignore
+              pixels,
+              options
+            );
+          });
+          const newFile = gifBinaryToFile(gif.getOutputBuffer(), file.name);
+
+          setResult(newFile);
+        }
+      };
+    };
+
+    processImage(input, newSpeed);
+  };
+  return (
+    <Box>
+      <ToolInputAndResult
+        input={
+          <ToolFileInput
+            value={input}
+            onChange={setInput}
+            accept={['image/gif']}
+            title={'Input GIF'}
+          />
+        }
+        result={
+          <ToolFileResult
+            title={'Output GIF with new speed'}
+            value={result}
+            extension={'gif'}
+          />
+        }
+      />
+      <ToolOptions
+        compute={compute}
+        getGroups={({ values, setFieldValue }) => [
+          {
+            title: 'New GIF speed',
+            component: (
+              <Box>
+                <TextFieldWithDesc
+                  value={values.newSpeed}
+                  onChange={(val) => setFieldValue('newSpeed', val)}
+                  description={'Default new GIF speed.'}
+                  InputProps={{ endAdornment: <Typography>ms</Typography> }}
+                  type={'number'}
+                />
+              </Box>
+            )
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
+    </Box>
+  );
+}