Adds quality options to video to gif tool

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: <Box></Box>
+      title: 'Set Quality',
+      component: (
+        <Box>
+          <SimpleRadio
+            title="Low"
+            onClick={() => {
+              updateField('quality', 'low');
+              updateField('fps', '5');
+              updateField('scale', 'scale=240:-1:flags=bilinear');
+            }}
+            checked={values.quality === 'low'}
+          />
+          <SimpleRadio
+            title="Mid"
+            onClick={() => {
+              updateField('quality', 'mid');
+              updateField('fps', '10');
+              updateField('scale', 'scale=320:-1:flags=bicubic');
+            }}
+            checked={values.quality === 'mid'}
+          />
+          <SimpleRadio
+            title="High"
+            onClick={() => {
+              updateField('quality', 'high');
+              updateField('fps', '15');
+              updateField('scale', 'scale=480:-1:flags=lanczos');
+            }}
+            checked={values.quality === 'high'}
+          />
+        </Box>
+      )
     }
   ];
 

src/pages/tools/video/video-to-gif/types.ts

@@ -1,3 +1,5 @@
 export type InitialValuesType = {
-  // splitSeparator: string;
+  quality: string;
+  fps: string;
+  scale: string;
 };