feat: add internationalization support

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

@@ -11,6 +11,7 @@ import { FFmpeg } from '@ffmpeg/ffmpeg';
 import { fetchFile } from '@ffmpeg/util';
 import { debounce } from 'lodash';
 import ToolVideoInput from '@components/input/ToolVideoInput';
+import { useTranslation } from 'react-i18next';
 
 const ffmpeg = new FFmpeg();
 
@@ -28,6 +29,7 @@ const validationSchema = Yup.object({
 });
 
 export default function TrimVideo({ title }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
 
@@ -85,7 +87,7 @@ export default function TrimVideo({ title }: ToolComponentProps) {
     updateField
   }) => [
     {
-      title: 'Timestamps',
+      title: t('video.trim.timestamps'),
       component: (
         <Box>
           <TextFieldWithDesc
@@ -93,7 +95,7 @@ export default function TrimVideo({ title }: ToolComponentProps) {
               updateNumberField(value, 'trimStart', updateField)
             }
             value={values.trimStart}
-            label={'Start Time'}
+            label={t('video.trim.startTime')}
             sx={{ mb: 2, backgroundColor: 'background.paper' }}
           />
           <TextFieldWithDesc
@@ -101,7 +103,7 @@ export default function TrimVideo({ title }: ToolComponentProps) {
               updateNumberField(value, 'trimEnd', updateField)
             }
             value={values.trimEnd}
-            label={'End Time'}
+            label={t('video.trim.endTime')}
           />
         </Box>
       )
@@ -116,7 +118,7 @@ export default function TrimVideo({ title }: ToolComponentProps) {
           <ToolVideoInput
             value={input}
             onChange={setInput}
-            title={'Input Video'}
+            title={t('video.trim.inputTitle')}
             showTrimControls={true}
             onTrimChange={(trimStart, trimEnd) => {
               setFieldValue('trimStart', trimStart);
@@ -129,7 +131,7 @@ export default function TrimVideo({ title }: ToolComponentProps) {
       }}
       resultComponent={
         <ToolFileResult
-          title={'Trimmed Video'}
+          title={t('video.trim.resultTitle')}
           value={result}
           extension={'mp4'}
         />

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

@@ -4,10 +4,15 @@ import { lazy } from 'react';
 export const tool = defineTool('video', {
   name: 'Trim Video',
   path: 'trim',
-  icon: 'mdi:scissors',
+  icon: 'material-symbols:content-cut',
   description:
-    'This online utility lets you trim videos by setting start and end points. You can preview the trimmed section before processing. Supports common video formats like MP4, WebM, and OGG.',
-  shortDescription: 'Trim videos by setting start and end points',
-  keywords: ['trim', 'cut', 'video', 'clip', 'edit'],
-  component: lazy(() => import('./index'))
+    'Trim video files by specifying start and end times. Remove unwanted sections from the beginning or end of videos.',
+  shortDescription: 'Trim video by removing unwanted sections',
+  keywords: ['video', 'trim', 'cut', 'edit', 'time'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'video.trim.name',
+    description: 'video.trim.description',
+    shortDescription: 'video.trim.shortDescription'
+  }
 });