Merge branch 'main' into tools-filtering

src/pages/tools/video/loop/index.tsx

@@ -11,6 +11,7 @@ import ToolFileResult from '@components/result/ToolFileResult';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import { updateNumberField } from '@utils/string';
 import * as Yup from 'yup';
+import { useTranslation } from 'react-i18next';
 
 const initialValues: InitialValuesType = {
   loops: 2
@@ -21,6 +22,7 @@ const validationSchema = Yup.object({
 });
 
 export default function Loop({ title, longDescription }: ToolComponentProps) {
+  const { t } = useTranslation('video');
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
   const [loading, setLoading] = useState(false);
@@ -43,7 +45,7 @@ export default function Loop({ title, longDescription }: ToolComponentProps) {
     updateField
   }) => [
     {
-      title: 'Loops',
+      title: t('loop.loops'),
       component: (
         <Box>
           <TextFieldWithDesc
@@ -51,7 +53,7 @@ export default function Loop({ title, longDescription }: ToolComponentProps) {
               updateNumberField(value, 'loops', updateField)
             }
             value={values.loops}
-            label={'Number of Loops'}
+            label={t('loop.numberOfLoops')}
           />
         </Box>
       )
@@ -66,14 +68,14 @@ export default function Loop({ title, longDescription }: ToolComponentProps) {
         loading ? (
           <ToolFileResult
             value={null}
-            title={'Looping Video'}
+            title={t('loop.loopingVideo')}
             loading={true}
             extension={''}
           />
         ) : (
           <ToolFileResult
             value={result}
-            title={'Looped Video'}
+            title={t('loop.resultTitle')}
             extension={'mp4'}
           />
         )
@@ -83,7 +85,10 @@ export default function Loop({ title, longDescription }: ToolComponentProps) {
       getGroups={getGroups}
       setInput={setInput}
       compute={compute}
-      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+      toolInfo={{
+        title: t('loop.toolInfo.title', { title }),
+        description: longDescription
+      }}
     />
   );
 }

src/pages/tools/video/loop/meta.ts

@@ -2,26 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('video', {
-  name: 'Loop video',
   path: 'loop',
   icon: 'material-symbols:loop',
-  description:
-    'Create looping videos by repeating the video content. Set the number of loops or create infinite loops.',
-  shortDescription:
-    'Create looping videos by repeating content (MP4, MOV, AVI).',
-  keywords: [
-    'loop',
-    'video',
-    'repeat',
-    'cycle',
-    'mp4',
-    'mov',
-    'avi',
-    'video editing',
-    'playback'
-  ],
-  longDescription:
-    'This tool allows you to create looping videos by repeating the video content multiple times. You can set the number of loops or create infinite loops. Useful for creating background videos, animated content, or repeating sequences. Supports various video formats including MP4, MOV, and AVI.',
-  userTypes: ['General Users', 'Students', 'Developers'],
-  component: lazy(() => import('./index'))
+
+  keywords: ['video', 'loop', 'repeat', 'continuous'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'video:loop.title',
+    description: 'video:loop.description',
+    shortDescription: 'video:loop.shortDescription',
+    userTypes: ['General Users', 'Students', 'Developers']
+  }
 });