From 9b564121d57905cd4b3a4590eb267d1ea8822020 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Tue, 24 Jun 2025 17:20:41 +0300
Subject: [PATCH] fix: During segments playback mode, disable button
 interactions but keep hover working

---
 .../client/src/components/EditingTools.tsx    |  6 ++---
 .../src/components/TimelineControls.tsx       | 12 +++++-----
 .../client/src/styles/TimelineControls.css    | 24 +++++++++----------
 .../client/src/styles/TwoRowTooltip.css       | 17 ++++++++-----
 4 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/frontend-tools/video-editor/client/src/components/EditingTools.tsx b/frontend-tools/video-editor/client/src/components/EditingTools.tsx
index c1fe8085..34e7b91a 100644
--- a/frontend-tools/video-editor/client/src/components/EditingTools.tsx
+++ b/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">
diff --git a/frontend-tools/video-editor/client/src/components/TimelineControls.tsx b/frontend-tools/video-editor/client/src/components/TimelineControls.tsx
index 3bf7e6fe..f93def4a 100644
--- a/frontend-tools/video-editor/client/src/components/TimelineControls.tsx
+++ b/frontend-tools/video-editor/client/src/components/TimelineControls.tsx
@@ -2878,8 +2878,8 @@ const TimelineControls = ({
                     isPlayingSegments
                       ? "Disabled during preview"
                       : isPlaying
-                        ? "Pause playback"
-                        : "Play from current position"
+                      ? "Pause playback"
+                      : "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"
-                        : "Create new segment"
+                      ? "Not enough space for 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"
-                        : "Play from here until next segment"
+                      ? "Pause playback"
+                      : "Play from here until next segment"
                   }
                   style={{
                     userSelect: "none",
diff --git a/frontend-tools/video-editor/client/src/styles/TimelineControls.css b/frontend-tools/video-editor/client/src/styles/TimelineControls.css
index aa990a64..2fe198b2 100644
--- a/frontend-tools/video-editor/client/src/styles/TimelineControls.css
+++ b/frontend-tools/video-editor/client/src/styles/TimelineControls.css
@@ -612,9 +612,7 @@
       white-space: nowrap;
       opacity: 0;
       visibility: hidden;
-      transition:
-        opacity 0.2s,
-        visibility 0.2s;
+      transition: 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:
-        opacity 0.2s,
-        visibility 0.2s;
+      transition: opacity 0.2s, visibility 0.2s;
       pointer-events: none;
     }
 
@@ -839,14 +835,18 @@
   cursor: pointer;
 }
 
-/* Disable all interactions within tooltips during segments playback */
-.two-row-tooltip.segments-playback-mode {
-  pointer-events: none !important;
+/* During segments playback mode, disable button interactions but keep hover working */
+.segments-playback-mode .tooltip-time-btn[disabled],
+.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 */
-.two-row-tooltip.segments-playback-mode > * {
-  pointer-events: none !important;
+/* Ensure disabled buttons still show tooltips on hover */
+.segments-playback-mode [data-tooltip][disabled]:hover:before,
+.segments-playback-mode [data-tooltip][disabled]:hover:after {
+  opacity: 1 !important;
+  visibility: visible !important;
 }
 
 /* Show segments playback message */
diff --git a/frontend-tools/video-editor/client/src/styles/TwoRowTooltip.css b/frontend-tools/video-editor/client/src/styles/TwoRowTooltip.css
index 9d70ee92..b86569bd 100644
--- a/frontend-tools/video-editor/client/src/styles/TwoRowTooltip.css
+++ b/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:
-    opacity 0.2s,
-    visibility 0.2s;
+  transition: 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:
-    opacity 0.2s,
-    visibility 0.2s;
+  transition: opacity 0.2s, visibility 0.2s;
   z-index: 2500; /* High z-index */
   pointer-events: none;
 }