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/styles/TwoRowTooltip.css

@@ -23,7 +23,7 @@
 }
 
 .tooltip-row:first-child {
-  margin-bottom: 6px; 
+  margin-bottom: 6px;
 }
 
 .tooltip-time-btn {
@@ -56,6 +56,26 @@
   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;
+}
+
+/* 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;
@@ -69,13 +89,13 @@
   background-color: #f3f4f6;
   border: none;
   border-radius: 4px;
-  padding: 5px; 
+  padding: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: #4b5563;
-  width: 26px; 
+  width: 26px;
   height: 26px;
   min-width: 20px !important;
   position: relative; /* Add relative positioning for tooltips */
@@ -100,14 +120,16 @@
   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;
 }
 
 /* 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 */
@@ -119,7 +141,9 @@
   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;
 }
@@ -175,7 +199,7 @@
 }
 
 .tooltip-action-btn.play-from-start {
-  color: #4f46e5; 
+  color: #4f46e5;
 }
 
 .tooltip-action-btn.play-from-start:hover {
@@ -194,7 +218,7 @@
   padding: 6px 10px;
   display: flex;
   flex-direction: row;
-  color: #10b981; 
+  color: #10b981;
 }
 
 .tooltip-action-btn.new-segment:hover {
@@ -227,43 +251,80 @@
   color: #9ca3af;
 }
 
+/* Ensure pause button is properly styled when disabled */
+.tooltip-action-btn.pause.disabled {
+  color: #9ca3af !important;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tooltip-action-btn.pause.disabled:hover {
+  background-color: #f3f4f6 !important;
+  color: #9ca3af !important;
+}
+
+/* Ensure play button is properly styled when disabled */
+.tooltip-action-btn.play.disabled {
+  color: #9ca3af !important;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tooltip-action-btn.play.disabled:hover {
+  background-color: #f3f4f6 !important;
+  color: #9ca3af !important;
+}
+
+/* Ensure time adjustment buttons are properly styled when disabled */
+.tooltip-time-btn.disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+  background-color: #f3f4f6 !important;
+  color: #9ca3af !important;
+}
+
+.tooltip-time-btn.disabled:hover {
+  background-color: #f3f4f6 !important;
+  color: #9ca3af !important;
+}
+
 /* Additional mobile optimizations */
 @media (max-width: 768px) {
   .two-row-tooltip {
-    padding: 4px; 
+    padding: 4px;
   }
-  
+
   .tooltip-row:first-child {
-    margin-bottom: 4px; 
+    margin-bottom: 4px;
   }
-  
+
   .tooltip-time-btn {
     min-width: 20px !important;
     font-size: 0.7rem !important;
     padding: 3px 6px !important;
   }
-  
+
   .tooltip-time-display {
     font-size: 0.8rem !important;
     padding: 3px 4px !important;
     min-width: 90px !important;
   }
-  
+
   .tooltip-action-btn {
     width: 24px;
     height: 24px;
     padding: 4px;
   }
-  
+
   .tooltip-action-btn.new-segment {
     padding: 4px 8px;
   }
-  
+
   .tooltip-action-btn svg {
     width: 14px;
     height: 14px;
   }
-  
+
   /* Adjust tooltip position for small screens - maintain the same position but adjust size */
   .tooltip-action-btn[data-tooltip]:before {
     min-width: 100px;
@@ -272,7 +333,7 @@
     height: 24px;
     top: 33px; /* Maintain the same relative distance on mobile */
   }
-  
+
   .tooltip-action-btn[data-tooltip]:after {
     top: 33px; /* Match the tooltip position */
   }