From 917a5c238cdf11f0a877366186fb4c4dafb02188 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Mon, 10 Mar 2025 04:25:31 +0000
Subject: [PATCH] feat: trim video

---
 .idea/workspace.xml                    | 39 ++++++++------------
 package-lock.json                      | 45 +++++++++++++++++++++++
 package.json                           |  1 +
 src/components/input/ToolFileInput.tsx | 49 +++++++++++---------------
 src/pages/tools/video/trim/index.tsx   |  1 +
 5 files changed, 82 insertions(+), 53 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index b15d720..407cc6f 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,23 +4,12 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: missing meta">
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/video/trim/index.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/video/trim/meta.ts" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: trim video">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ToolContent.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolContent.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/examples/ToolExamples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ToolExamples.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/shuffle/shuffle.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/shuffle/shuffle.service.test.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/to-morse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/to-morse/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/video/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/video/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/tools/defineTool.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/defineTool.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/tools/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/vite.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/vite.config.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/video/trim/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/video/trim/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -350,15 +339,7 @@
       <workItem from="1741537936314" duration="1294000" />
       <workItem from="1741539602311" duration="4557000" />
       <workItem from="1741547560596" duration="1671000" />
-      <workItem from="1741567442768" duration="12099000" />
-    </task>
-    <task id="LOCAL-00113" summary="fix: tsc">
-      <option name="closed" value="true" />
-      <created>1740464642001</created>
-      <option name="number" value="00113" />
-      <option name="presentableId" value="LOCAL-00113" />
-      <option name="project" value="LOCAL" />
-      <updated>1740464642001</updated>
+      <workItem from="1741567442768" duration="12784000" />
     </task>
     <task id="LOCAL-00114" summary="fix: readme">
       <option name="closed" value="true" />
@@ -744,7 +725,15 @@
       <option name="project" value="LOCAL" />
       <updated>1741568170877</updated>
     </task>
-    <option name="localTasksCounter" value="162" />
+    <task id="LOCAL-00162" summary="feat: trim video">
+      <option name="closed" value="true" />
+      <created>1741580004784</created>
+      <option name="number" value="00162" />
+      <option name="presentableId" value="LOCAL-00162" />
+      <option name="project" value="LOCAL" />
+      <updated>1741580004784</updated>
+    </task>
+    <option name="localTasksCounter" value="163" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -791,7 +780,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="chore: remove prettify test" />
     <MESSAGE value="chore: prettify json in home" />
     <MESSAGE value="feat: jakarta font" />
     <MESSAGE value="chore: img" />
@@ -816,7 +804,8 @@
     <MESSAGE value="refactor: sum" />
     <MESSAGE value="fix: tools by category scroll" />
     <MESSAGE value="fix: missing meta" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: missing meta" />
+    <MESSAGE value="feat: trim video" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: trim video" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/package-lock.json b/package-lock.json
index e96d993..4d80209 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "notistack": "^3.0.1",
         "omggif": "^1.0.10",
         "playwright": "^1.45.0",
+        "rc-slider": "^11.1.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-helmet": "^6.1.0",
@@ -4163,6 +4164,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/cli-cursor": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
@@ -8554,6 +8561,44 @@
         }
       ]
     },
+    "node_modules/rc-slider": {
+      "version": "11.1.8",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-11.1.8.tgz",
+      "integrity": "sha512-2gg/72YFSpKP+Ja5AjC5DPL1YnV8DEITDQrcc1eASrUYjl0esptaBVJBh5nLTXCCp15eD8EuGjwezVGSHhs9tQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.36.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util": {
+      "version": "5.44.4",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.44.4.tgz",
+      "integrity": "sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "react-is": "^18.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
diff --git a/package.json b/package.json
index c63182d..b69da3d 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "notistack": "^3.0.1",
     "omggif": "^1.0.10",
     "playwright": "^1.45.0",
+    "rc-slider": "^11.1.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
diff --git a/src/components/input/ToolFileInput.tsx b/src/components/input/ToolFileInput.tsx
index 4cb7b88..ed80889 100644
--- a/src/components/input/ToolFileInput.tsx
+++ b/src/components/input/ToolFileInput.tsx
@@ -8,6 +8,8 @@ import InputFooter from './InputFooter';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import greyPattern from '@assets/grey-pattern.png';
 import { globalInputHeight } from '../../config/uiConfig';
+import Slider from 'rc-slider';
+import 'rc-slider/assets/index.css';
 
 interface ToolFileInputProps {
   value: File | null;
@@ -309,34 +311,25 @@ export default function ToolFileInput({
                       </Typography>
                     </Box>
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                      <input
-                        type="range"
-                        min={0}
-                        max={videoDuration}
-                        step={0.1}
-                        value={trimStart || 0}
-                        onChange={(e) =>
-                          handleTrimChange(
-                            parseFloat(e.target.value),
-                            trimEnd || videoDuration
-                          )
-                        }
-                        style={{ flex: 1 }}
-                      />
-                      <input
-                        type="range"
-                        min={trimStart || 0}
-                        max={videoDuration}
-                        step={0.1}
-                        value={trimEnd || videoDuration}
-                        onChange={(e) =>
-                          handleTrimChange(
-                            trimStart || 0,
-                            parseFloat(e.target.value)
-                          )
-                        }
-                        style={{ flex: 1 }}
-                      />
+                      <div
+                        className="range-slider-container"
+                        style={{ margin: '20px 0', width: '100%' }}
+                      >
+                        <Slider
+                          range
+                          min={0}
+                          max={videoDuration}
+                          step={0.1}
+                          value={[trimStart || 0, trimEnd || videoDuration]}
+                          onChange={(values) => {
+                            if (Array.isArray(values)) {
+                              handleTrimChange(values[0], values[1]);
+                            }
+                          }}
+                          allowCross={false}
+                          pushable={0.1} // Minimum distance between handles
+                        />
+                      </div>
                     </Box>
                   </Box>
                 )}
diff --git a/src/pages/tools/video/trim/index.tsx b/src/pages/tools/video/trim/index.tsx
index 2c3e2ac..ba83d7a 100644
--- a/src/pages/tools/video/trim/index.tsx
+++ b/src/pages/tools/video/trim/index.tsx
@@ -92,6 +92,7 @@ export default function TrimVideo({ title }: ToolComponentProps) {
             }
             value={values.trimStart}
             label={'Start Time'}
+            sx={{ mb: 2, backgroundColor: 'white' }}
           />
           <TextFieldWithDesc
             onOwnChange={(value) =>