fix: Disable Segment Tools and Reset Preview State During Playback (#1305)

* fix: Disable Segment Tools and Reset Preview State During Playback

* chore: remove some unnecessary comments

* chore: build assets

* fix: do not display the handles (left/right) on preview mode

* fix: Disable all tools on preview mode (undo, redo, reset, etc.)

* Update README.md

* feat: Prettier configuration for video editor

* Update README.md

* Update .prettierrc

* style: Format entire codebase (video-editor) with Prettier

* fix: During segments playback mode, disable button interactions but keep hover working

* feat: Add yarn format

* prettier format

* Update package.json

* feat: Install prettier and improve formatting

* build assets

* Update version.py 6.2.0

frontend-tools/video-editor/client/src/components/IOSVideoPlayer.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import { formatTime } from "@/lib/timeUtils";
-import '../styles/IOSVideoPlayer.css';
+import "../styles/IOSVideoPlayer.css";
 
 interface IOSVideoPlayerProps {
   videoRef: React.RefObject<HTMLVideoElement>;
@@ -8,14 +8,10 @@ interface IOSVideoPlayerProps {
   duration: number;
 }
 
-const IOSVideoPlayer = ({
-  videoRef,
-  currentTime,
-  duration,
-}: IOSVideoPlayerProps) => {
+const IOSVideoPlayer = ({ videoRef, currentTime, duration }: IOSVideoPlayerProps) => {
   const [videoUrl, setVideoUrl] = useState<string>("");
   const [iosVideoRef, setIosVideoRef] = useState<HTMLVideoElement | null>(null);
-  
+
   // Refs for hold-to-continue functionality
   const incrementIntervalRef = useRef<NodeJS.Timeout | null>(null);
   const decrementIntervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -27,17 +23,17 @@ const IOSVideoPlayer = ({
       if (decrementIntervalRef.current) clearInterval(decrementIntervalRef.current);
     };
   }, []);
-  
+
   // Get the video source URL from the main player
   useEffect(() => {
-    if (videoRef.current && videoRef.current.querySelector('source')) {
-      const source = videoRef.current.querySelector('source') as HTMLSourceElement;
+    if (videoRef.current && videoRef.current.querySelector("source")) {
+      const source = videoRef.current.querySelector("source") as HTMLSourceElement;
       if (source && source.src) {
         setVideoUrl(source.src);
       }
     } else {
       // Fallback to sample video if needed
-      setVideoUrl("/videos/sample-video-37s.mp4");
+      setVideoUrl("/videos/sample-video-10m.mp4");
     }
   }, [videoRef]);
 
@@ -61,13 +57,13 @@ const IOSVideoPlayer = ({
   const startIncrement = (e: React.MouseEvent | React.TouchEvent) => {
     // Prevent default to avoid text selection
     e.preventDefault();
-    
+
     if (!iosVideoRef) return;
     if (incrementIntervalRef.current) clearInterval(incrementIntervalRef.current);
-    
+
     // First immediate adjustment
     iosVideoRef.currentTime = Math.min(iosVideoRef.duration, iosVideoRef.currentTime + 0.05);
-    
+
     // Setup continuous adjustment
     incrementIntervalRef.current = setInterval(() => {
       if (iosVideoRef) {
@@ -88,13 +84,13 @@ const IOSVideoPlayer = ({
   const startDecrement = (e: React.MouseEvent | React.TouchEvent) => {
     // Prevent default to avoid text selection
     e.preventDefault();
-    
+
     if (!iosVideoRef) return;
     if (decrementIntervalRef.current) clearInterval(decrementIntervalRef.current);
-    
+
     // First immediate adjustment
     iosVideoRef.currentTime = Math.max(0, iosVideoRef.currentTime - 0.05);
-    
+
     // Setup continuous adjustment
     decrementIntervalRef.current = setInterval(() => {
       if (iosVideoRef) {
@@ -115,12 +111,14 @@ const IOSVideoPlayer = ({
     <div className="ios-video-player-container">
       {/* Current Time / Duration Display */}
       <div className="ios-time-display mb-2">
-        <span className="text-sm">{formatTime(currentTime)} / {formatTime(duration)}</span>
+        <span className="text-sm">
+          {formatTime(currentTime)} / {formatTime(duration)}
+        </span>
       </div>
-      
+
       {/* iOS-optimized Video Element with Native Controls */}
       <video
-        ref={ref => setIosVideoRef(ref)}
+        ref={(ref) => setIosVideoRef(ref)}
         className="w-full rounded-md"
         src={videoUrl}
         controls
@@ -133,26 +131,26 @@ const IOSVideoPlayer = ({
         <source src={videoUrl} type="video/mp4" />
         <p>Your browser doesn't support HTML5 video.</p>
       </video>
-      
+
       {/* iOS Video Skip Controls */}
       <div className="ios-skip-controls mt-3 flex justify-center gap-4">
-        <button 
+        <button
           onClick={jumpBackward15}
           className="ios-control-btn flex items-center justify-center bg-purple-500 text-white py-2 px-4 rounded-md"
         >
           -15s
         </button>
-        <button 
+        <button
           onClick={jumpForward15}
           className="ios-control-btn flex items-center justify-center bg-purple-500 text-white py-2 px-4 rounded-md"
         >
           +15s
         </button>
       </div>
-      
+
       {/* iOS Fine Control Buttons */}
       <div className="ios-fine-controls mt-2 flex justify-center gap-4">
-        <button 
+        <button
           onMouseDown={startDecrement}
           onTouchStart={startDecrement}
           onMouseUp={stopDecrement}
@@ -163,7 +161,7 @@ const IOSVideoPlayer = ({
         >
           -50ms
         </button>
-        <button 
+        <button
           onMouseDown={startIncrement}
           onTouchStart={startIncrement}
           onMouseUp={stopIncrement}
@@ -175,7 +173,7 @@ const IOSVideoPlayer = ({
           +50ms
         </button>
       </div>
-      
+
       <div className="ios-note mt-2 text-xs text-gray-500">
         <p>This player uses native iOS controls for better compatibility with iOS devices.</p>
       </div>
@@ -183,4 +181,4 @@ const IOSVideoPlayer = ({
   );
 };
 
-export default IOSVideoPlayer; 
+export default IOSVideoPlayer;