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

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

@@ -208,7 +208,7 @@ const EditingTools = ({
           <button
             className="button"
             aria-label="Undo"
-            data-tooltip="Undo last action"
+            data-tooltip={isPlayingSegments ? "Disabled during preview" : "Undo last action"}
             disabled={!canUndo || isPlayingSegments}
             onClick={onUndo}
           >
@@ -229,7 +229,7 @@ const EditingTools = ({
           <button
             className="button"
             aria-label="Redo"
-            data-tooltip="Redo last undone action"
+            data-tooltip={isPlayingSegments ? "Disabled during preview" : "Redo last undone action"}
             disabled={!canRedo || isPlayingSegments}
             onClick={onRedo}
           >
@@ -251,7 +251,7 @@ const EditingTools = ({
           <button
             className="button"
             onClick={onReset}
-            data-tooltip="Reset to full video"
+            data-tooltip={isPlayingSegments ? "Disabled during preview" : "Reset to full video"}
             disabled={isPlayingSegments}
           >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">

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

@@ -2878,8 +2878,8 @@ const TimelineControls = ({
                     isPlayingSegments
                       ? "Disabled during preview"
                       : isPlaying
-                        ? "Pause playback"
+                      ? "Pause playback"
-                        : "Play from current position"
+                      : "Play from current position"
                   }
                   style={{
                     userSelect: "none",
@@ -3142,8 +3142,8 @@ const TimelineControls = ({
                     isPlayingSegments
                       ? "Disabled during preview"
                       : availableSegmentDuration < 0.5
-                        ? "Not enough space for new segment"
+                      ? "Not enough space for new segment"
-                        : "Create new segment"
+                      : "Create new segment"
                   }
                   disabled={availableSegmentDuration < 0.5 || isPlayingSegments}
                   onClick={async (e) => {
@@ -3735,8 +3735,8 @@ const TimelineControls = ({
                     isPlayingSegments
                       ? "Disabled during preview"
                       : isPlaying
-                        ? "Pause playback"
+                      ? "Pause playback"
-                        : "Play from here until next segment"
+                      : "Play from here until next segment"
                   }
                   style={{
                     userSelect: "none",

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

@@ -612,9 +612,7 @@
       white-space: nowrap;
       opacity: 0;
       visibility: hidden;
-      transition:
+      transition: opacity 0.2s, visibility 0.2s;
-        opacity 0.2s,
-        visibility 0.2s;
       z-index: 1000;
       pointer-events: none;
     }
@@ -630,9 +628,7 @@
       border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
       opacity: 0;
       visibility: hidden;
-      transition:
+      transition: opacity 0.2s, visibility 0.2s;
-        opacity 0.2s,
-        visibility 0.2s;
       pointer-events: none;
     }
 
@@ -839,14 +835,18 @@
   cursor: pointer;
 }
 
-/* Disable all interactions within tooltips during segments playback */
+/* During segments playback mode, disable button interactions but keep hover working */
-.two-row-tooltip.segments-playback-mode {
+.segments-playback-mode .tooltip-time-btn[disabled],
-  pointer-events: none !important;
+.segments-playback-mode .tooltip-action-btn[disabled] {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
 }
 
-/* Allow pointer events only on the tooltip container itself for positioning */
+/* Ensure disabled buttons still show tooltips on hover */
-.two-row-tooltip.segments-playback-mode > * {
+.segments-playback-mode [data-tooltip][disabled]:hover:before,
-  pointer-events: none !important;
+.segments-playback-mode [data-tooltip][disabled]:hover:after {
+  opacity: 1 !important;
+  visibility: visible !important;
 }
 
 /* Show segments playback message */

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

@@ -67,6 +67,15 @@
   -ms-user-select: none !important;
 }
 
+/* Force disabled tooltips to show on hover for better user feedback */
+.tooltip-time-btn.disabled[data-tooltip]:hover:before,
+.tooltip-time-btn.disabled[data-tooltip]:hover:after,
+.tooltip-action-btn.disabled[data-tooltip]:hover:before,
+.tooltip-action-btn.disabled[data-tooltip]:hover:after {
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
 .tooltip-actions {
   display: flex;
   justify-content: space-between;
@@ -111,9 +120,7 @@
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
-  transition:
+  transition: opacity 0.2s, visibility 0.2s;
-    opacity 0.2s,
-    visibility 0.2s;
   z-index: 2500; /* High z-index */
   pointer-events: none;
 }
@@ -132,9 +139,7 @@
   margin-left: 0; /* Reset margin */
   opacity: 0;
   visibility: hidden;
-  transition:
+  transition: opacity 0.2s, visibility 0.2s;
-    opacity 0.2s,
-    visibility 0.2s;
   z-index: 2500; /* High z-index */
   pointer-events: none;
 }