feat: add internationalization support

src/pages/tools/video/crop-video/index.tsx

@@ -1,13 +1,14 @@
-import { Box, TextField, Typography, Alert } from '@mui/material';
-import { useCallback, useState, useEffect } from 'react';
-import ToolFileResult from '@components/result/ToolFileResult';
+import { Box, Typography, TextField, Alert } from '@mui/material';
+import React, { useState, useCallback } from 'react';
 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 { cropVideo, getVideoDimensions } from './service';
 import { InitialValuesType } from './types';
+import ToolVideoInput from '@components/input/ToolVideoInput';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import ToolFileResult from '@components/result/ToolFileResult';
+import { debounce } from 'lodash';
+import { useTranslation } from 'react-i18next';
 
 const initialValues: InitialValuesType = {
   x: 0,
@@ -17,6 +18,7 @@ const initialValues: InitialValuesType = {
 };
 
 export default function CropVideo({ title }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
   const [loading, setLoading] = useState(false);
@@ -30,19 +32,23 @@ export default function CropVideo({ title }: ToolComponentProps) {
     if (!videoDimensions) return '';
 
     if (values.x < 0 || values.y < 0) {
-      return 'X and Y coordinates must be non-negative';
+      return t('video.cropVideo.errorNonNegativeCoordinates');
     }
 
     if (values.width <= 0 || values.height <= 0) {
-      return 'Width and height must be positive';
+      return t('video.cropVideo.errorPositiveDimensions');
     }
 
     if (values.x + values.width > videoDimensions.width) {
-      return `Crop area extends beyond video width (${videoDimensions.width}px)`;
+      return t('video.cropVideo.errorBeyondWidth', {
+        width: videoDimensions.width
+      });
     }
 
     if (values.y + values.height > videoDimensions.height) {
-      return `Crop area extends beyond video height (${videoDimensions.height}px)`;
+      return t('video.cropVideo.errorBeyondHeight', {
+        height: videoDimensions.height
+      });
     }
 
     return '';
@@ -68,9 +74,7 @@ export default function CropVideo({ title }: ToolComponentProps) {
       setResult(croppedFile);
     } catch (error) {
       console.error('Error cropping video:', error);
-      setProcessingError(
-        'Error cropping video. Please check parameters and video file.'
-      );
+      setProcessingError(t('video.cropVideo.errorCroppingVideo'));
     } finally {
       setLoading(false);
     }
@@ -86,24 +90,26 @@ export default function CropVideo({ title }: ToolComponentProps) {
     updateField
   }) => [
     {
-      title: 'Video Information',
+      title: t('video.cropVideo.videoInformation'),
       component: (
         <Box>
           {videoDimensions ? (
             <Typography variant="body2" sx={{ mb: 2 }}>
-              Video dimensions: {videoDimensions.width} ×{' '}
-              {videoDimensions.height} pixels
+              {t('video.cropVideo.videoDimensions', {
+                width: videoDimensions.width,
+                height: videoDimensions.height
+              })}
             </Typography>
           ) : (
             <Typography variant="body2" sx={{ mb: 2 }}>
-              Load a video to see dimensions
+              {t('video.cropVideo.loadVideoForDimensions')}
             </Typography>
           )}
         </Box>
       )
     },
     {
-      title: 'Crop Coordinates',
+      title: t('video.cropVideo.cropCoordinates'),
       component: (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
           {processingError && (
@@ -113,7 +119,7 @@ export default function CropVideo({ title }: ToolComponentProps) {
           )}
           <Box sx={{ display: 'flex', gap: 2 }}>
             <TextField
-              label="X (left)"
+              label={t('video.cropVideo.xCoordinate')}
               type="number"
               value={values.x}
               onChange={(e) => updateField('x', parseInt(e.target.value) || 0)}
@@ -121,7 +127,7 @@ export default function CropVideo({ title }: ToolComponentProps) {
               inputProps={{ min: 0 }}
             />
             <TextField
-              label="Y (top)"
+              label={t('video.cropVideo.yCoordinate')}
               type="number"
               value={values.y}
               onChange={(e) => updateField('y', parseInt(e.target.value) || 0)}
@@ -131,7 +137,7 @@ export default function CropVideo({ title }: ToolComponentProps) {
           </Box>
           <Box sx={{ display: 'flex', gap: 2 }}>
             <TextField
-              label="Width"
+              label={t('video.cropVideo.width')}
               type="number"
               value={values.width}
               onChange={(e) =>
@@ -141,7 +147,7 @@ export default function CropVideo({ title }: ToolComponentProps) {
               inputProps={{ min: 1 }}
             />
             <TextField
-              label="Height"
+              label={t('video.cropVideo.height')}
               type="number"
               value={values.height}
               onChange={(e) =>
@@ -183,7 +189,9 @@ export default function CropVideo({ title }: ToolComponentProps) {
                 })
                 .catch((error) => {
                   console.error('Error getting video dimensions:', error);
-                  setProcessingError('Failed to load video dimensions');
+                  setProcessingError(
+                    t('video.cropVideo.errorLoadingDimensions')
+                  );
                 });
             } else {
               setVideoDimensions(null);
@@ -191,20 +199,20 @@ export default function CropVideo({ title }: ToolComponentProps) {
             }
             setInput(video);
           }}
-          title={'Input Video'}
+          title={t('video.cropVideo.inputTitle')}
         />
       )}
       resultComponent={
         loading ? (
           <ToolFileResult
-            title={'Cropping Video'}
+            title={t('video.cropVideo.croppingVideo')}
             value={null}
             loading={true}
             extension={''}
           />
         ) : (
           <ToolFileResult
-            title={'Cropped Video'}
+            title={t('video.cropVideo.resultTitle')}
             value={result}
             extension={'mp4'}
           />

src/pages/tools/video/crop-video/meta.ts

@@ -2,13 +2,17 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('video', {
-  name: 'Crop video',
+  name: 'Crop Video',
   path: 'crop-video',
-  icon: 'mdi:crop',
-  description: 'Crop a video by specifying coordinates and dimensions',
-  shortDescription: 'Crop video to specific area',
-  keywords: ['crop', 'video', 'trim', 'cut', 'resize'],
-  longDescription:
-    'Remove unwanted parts from the edges of your video by cropping it to a specific rectangular area. Define the starting coordinates (X, Y) and the width and height of the area you want to keep.',
-  component: lazy(() => import('./index'))
+  icon: 'material-symbols:crop',
+  description:
+    'Crop video files to remove unwanted areas or focus on specific content. Specify crop dimensions and position to create custom video compositions.',
+  shortDescription: 'Crop video to remove unwanted areas',
+  keywords: ['video', 'crop', 'trim', 'edit', 'resize'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'video.cropVideo.name',
+    description: 'video.cropVideo.description',
+    shortDescription: 'video.cropVideo.shortDescription'
+  }
 });