button

src/app/(features)/srt-player/VideoPlayer/VideoPanel.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, forwardRef, useEffect, useCallback } from "react";
 import { SubtitleDisplay } from "./SubtitleDisplay";
 import { LightButton } from "@/components/ui/buttons";
+import { RangeInput } from "@/components/ui/RangeInput";
 import { getIndex, parseSrt, getNearistIndex } from "../subtitle";
 import { useTranslations } from "next-intl";
 
@@ -196,15 +197,18 @@ const VideoPanel = forwardRef<HTMLVideoElement, VideoPanelProps>(
             {t("autoPause", { enabled: autoPause ? "Yes" : "No" })}
           </LightButton>
         </div>
-        <input
+        <RangeInput
           className="seekbar"
-          type="range"
           min={0}
           max={srtLength}
-          onChange={handleSeek}
-          step={1}
+          onChange={(value) => {
+            if (videoRef.current && parsedSrtRef.current) {
+              videoRef.current.currentTime = parsedSrtRef.current[value]?.start || 0;
+              setProgress(value);
+            }
+          }}
           value={progress}
-        ></input>
+        />
         <span>{spanText}</span>
       </div>
     );

src/app/(features)/srt-player/components/atoms/SeekBar.tsx

@@ -2,25 +2,16 @@
 
 import React from "react";
 import { SeekBarProps } from "../../types/player";
+import { RangeInput } from "@/components/ui/RangeInput";
 
 export function SeekBar({ value, max, onChange, disabled, className }: SeekBarProps) {
-  const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = parseInt(event.target.value);
-    onChange(newValue);
-  }, [onChange]);
-
   return (
-    <input
-      type="range"
-      min={0}
-      max={max}
+    <RangeInput
       value={value}
-      onChange={handleChange}
+      max={max}
+      onChange={onChange}
       disabled={disabled}
-      className={`w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className || ''}`}
-      style={{
-        background: `linear-gradient(to right, #374151 0%, #374151 ${(value / max) * 100}%, #e5e7eb ${(value / max) * 100}%, #e5e7eb 100%)`
-      }}
+      className={className}
     />
   );
 }