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

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

@@ -1,5 +1,5 @@
-import '../styles/EditingTools.css';
+import "../styles/EditingTools.css";
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
 interface EditingToolsProps {
   onSplit: () => void;
@@ -24,7 +24,7 @@ const EditingTools = ({
   canUndo,
   canRedo,
   isPlaying = false,
-  isPlayingSegments = false,
+  isPlayingSegments = false
 }: EditingToolsProps) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false);
 
@@ -34,14 +34,14 @@ const EditingTools = ({
     };
 
     checkScreenSize();
-    window.addEventListener('resize', checkScreenSize);
+    window.addEventListener("resize", checkScreenSize);
-    return () => window.removeEventListener('resize', checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
   }, []);
 
   // Handle play button click with iOS fix
   const handlePlay = () => {
     // Ensure lastSeekedPosition is used when play is clicked
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       console.log("Play button clicked, current lastSeekedPosition:", window.lastSeekedPosition);
     }
 
@@ -58,12 +58,22 @@ const EditingTools = ({
           <button
             className={`button segments-button`}
             onClick={onPlaySegments}
-            data-tooltip={isPlayingSegments ? "Stop segments playback" : "Play segments in one continuous flow"}
+            data-tooltip={
-            style={{ fontSize: '0.875rem' }}
+              isPlayingSegments ? "Stop segments playback" : "Play segments in one continuous flow"
+            }
+            style={{ fontSize: "0.875rem" }}
           >
             {isPlayingSegments ? (
               <>
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
                   <circle cx="12" cy="12" r="10" />
                   <line x1="10" y1="15" x2="10" y2="9" />
                   <line x1="14" y1="15" x2="14" y2="9" />
@@ -73,7 +83,15 @@ const EditingTools = ({
               </>
             ) : (
               <>
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
                   <circle cx="12" cy="12" r="10" />
                   <polygon points="10 8 16 12 10 16 10 8" />
                 </svg>
@@ -115,15 +133,23 @@ const EditingTools = ({
           {/* Standard Play button (only shown when not in segments playback on small screens) */}
           {(!isPlayingSegments || !isSmallScreen) && (
             <button
-              className={`button play-button ${isPlayingSegments ? 'greyed-out' : ''}`}
+              className={`button play-button ${isPlayingSegments ? "greyed-out" : ""}`}
               onClick={handlePlay}
               data-tooltip={isPlaying ? "Pause video" : "Play full video"}
-              style={{ fontSize: '0.875rem' }}
+              style={{ fontSize: "0.875rem" }}
               disabled={isPlayingSegments}
             >
               {isPlaying && !isPlayingSegments ? (
                 <>
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
                     <circle cx="12" cy="12" r="10" />
                     <line x1="10" y1="15" x2="10" y2="9" />
                     <line x1="14" y1="15" x2="14" y2="9" />
@@ -133,7 +159,15 @@ const EditingTools = ({
                 </>
               ) : (
                 <>
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
                     <circle cx="12" cy="12" r="10" />
                     <polygon points="10 8 16 12 10 16 10 8" />
                   </svg>
@@ -175,12 +209,20 @@ const EditingTools = ({
             className="button"
             aria-label="Undo"
             data-tooltip="Undo last action"
-            disabled={!canUndo}
+            disabled={!canUndo || isPlayingSegments}
             onClick={onUndo}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg
-              <path d="M9 14 4 9l5-5"/>
+              xmlns="http://www.w3.org/2000/svg"
-              <path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11"/>
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M9 14 4 9l5-5" />
+              <path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11" />
             </svg>
             <span className="button-text">Undo</span>
           </button>
@@ -188,12 +230,20 @@ const EditingTools = ({
             className="button"
             aria-label="Redo"
             data-tooltip="Redo last undone action"
-            disabled={!canRedo}
+            disabled={!canRedo || isPlayingSegments}
             onClick={onRedo}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg
-              <path d="m15 14 5-5-5-5"/>
+              xmlns="http://www.w3.org/2000/svg"
-              <path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5v0A5.5 5.5 0 0 0 9.5 20H13"/>
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="m15 14 5-5-5-5" />
+              <path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5v0A5.5 5.5 0 0 0 9.5 20H13" />
             </svg>
             <span className="button-text">Redo</span>
           </button>
@@ -202,9 +252,14 @@ const EditingTools = ({
             className="button"
             onClick={onReset}
             data-tooltip="Reset to full video"
+            disabled={isPlayingSegments}
           >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-              <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
+              <path
+                fillRule="evenodd"
+                d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+                clipRule="evenodd"
+              />
             </svg>
             <span className="reset-text">Reset</span>
           </button>

frontend-tools/video-editor/client/src/styles/EditingTools.css

@@ -1,5 +1,4 @@
 #video-editor-trim-root {
-
   /* Tooltip styles - only on desktop where hover is available */
   @media (hover: hover) and (pointer: fine) {
     [data-tooltip] {
@@ -122,7 +121,6 @@
       cursor: pointer;
       min-width: auto;
 
-      /* Disabled hover effect as requested */
       &:hover:not(:disabled) {
         color: inherit;
       }
@@ -147,7 +145,8 @@
   }
 
   /* Style for play buttons with highlight effect */
-  .play-button, .preview-button {
+  .play-button,
+  .preview-button {
     font-weight: 600;
     display: flex;
     align-items: center;
@@ -185,7 +184,8 @@
   }
 
   /* Completely disable ALL hover effects for play buttons */
-  .play-button:hover:not(:disabled), .preview-button:hover:not(:disabled) {
+  .play-button:hover:not(:disabled),
+  .preview-button:hover:not(:disabled) {
     /* Reset everything to prevent any changes */
     color: inherit !important;
     transform: none !important;
@@ -194,15 +194,14 @@
     background: none !important;
   }
 
-  .play-button svg, .preview-button svg {
+  .play-button svg,
+  .preview-button svg {
     height: 1.5rem;
     width: 1.5rem;
     /* Make sure SVG scales with the button but doesn't change layout */
     flex-shrink: 0;
   }
 
-  /* Preview mode styles removed - replaced by segments playback mode */
-  
   @keyframes pulse {
     0% {
       opacity: 0.8;
@@ -239,7 +238,8 @@
     }
 
     /* Keep font size consistent regardless of screen size */
-    .preview-button, .play-button {
+    .preview-button,
+    .play-button {
       font-size: 0.875rem !important;
     }
   }
@@ -322,8 +322,6 @@
       padding: 0.25rem;
     }
 
-    /* Removed preview mode message styles */
-    
     .divider {
       margin: 0 0.25rem;
     }

frontend-tools/video-editor/client/src/styles/TimelineControls.css

@@ -56,7 +56,7 @@
 
   .timeline-marker {
     position: absolute;
-    height: 82px;  /* Increased height to extend below timeline */
+    height: 82px; /* Increased height to extend below timeline */
     width: 2px;
     background-color: #000;
     transform: translateX(-50%);
@@ -83,7 +83,7 @@
 
   .timeline-marker-drag {
     position: absolute;
-    bottom: -12px;  /* Changed from -6px to -12px to move it further down */
+    bottom: -12px; /* Changed from -6px to -12px to move it further down */
     left: 50%;
     transform: translateX(-50%);
     width: 16px;
@@ -257,7 +257,7 @@
     }
 
     .clip-segment-handle:after {
-      content: "";
+      content: '';
       position: absolute;
       top: 50%;
       left: 50%;
@@ -438,7 +438,7 @@
     font-size: 0.875rem;
     border: none;
     cursor: pointer;
-    margin-right: 0.50rem;
+    margin-right: 0.5rem;
   }
 
   .time-button:hover {
@@ -669,27 +669,27 @@
   }
 
   .modal-success-icon svg {
-    color: #4CAF50;
+    color: #4caf50;
     animation: fadeIn 0.5s ease-in-out;
   }
 
   .modal-error-icon svg {
-    color: #F44336; 
+    color: #f44336;
     animation: fadeIn 0.5s ease-in-out;
   }
 
   .success-link {
-    background-color: #4CAF50;
+    background-color: #4caf50;
     color: white;
     transition: background-color 0.3s;
   }
 
   .success-link:hover {
-    background-color: #388E3C;
+    background-color: #388e3c;
   }
 
   .error-message {
-    color: #F44336;
+    color: #f44336;
     font-weight: 500;
   }
 
@@ -809,32 +809,42 @@
 }
 
 @keyframes pulse {
-  0% { opacity: 0.7; transform: scale(1); }
+  0% {
-  50% { opacity: 1; transform: scale(1.05); }
+    opacity: 0.7;
-  100% { opacity: 0.7; transform: scale(1); }
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  100% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
 }
 
-/* Preview mode styles removed - replaced by segments playback mode */
-
 /* Segments playback mode styles - minimal functional styling */
 .segments-playback-mode .tooltip-time-btn {
   opacity: 1;
   cursor: pointer;
 }
 
-.segments-playback-mode .tooltip-action-btn.set-in,
-.segments-playback-mode .tooltip-action-btn.set-out,
-.segments-playback-mode .tooltip-action-btn.play-from-start {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 .segments-playback-mode .tooltip-action-btn.play,
 .segments-playback-mode .tooltip-action-btn.pause {
   opacity: 1;
   cursor: pointer;
 }
 
+/* Disable all interactions within tooltips during segments playback */
+.two-row-tooltip.segments-playback-mode {
+  pointer-events: none !important;
+}
+
+/* Allow pointer events only on the tooltip container itself for positioning */
+.two-row-tooltip.segments-playback-mode > * {
+  pointer-events: none !important;
+}
+
 /* Show segments playback message */
 .segments-playback-message {
   display: flex;

frontend-tools/video-editor/client/src/styles/TwoRowTooltip.css

@@ -56,6 +56,17 @@
   overflow: hidden !important;
 }
 
+/* Disabled state for time display */
+.tooltip-time-display.disabled {
+  pointer-events: none !important;
+  cursor: not-allowed !important;
+  opacity: 0.6 !important;
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+}
+
 .tooltip-actions {
   display: flex;
   justify-content: space-between;
@@ -107,7 +118,7 @@
 
 /* Triangle arrow pointing up to the button */
 .tooltip-action-btn[data-tooltip]:after {
-  content: '';
+  content: "";
   position: absolute;
   top: 35px; /* Match the before element */
   left: 50%; /* Center horizontally */