CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-06 07:28:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-06-24 17:20:41 +03:00
parent add6f6a704
commit 9b564121d5
4 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -612,9 +612,7 @@
white-space: nowrap; white-space: nowrap;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: transition: opacity 0.2s, visibility 0.2s;
opacity 0.2s,
visibility 0.2s;
z-index: 1000; z-index: 1000;
pointer-events: none; pointer-events: none;
} }
@ -630,9 +628,7 @@
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent; border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: transition: opacity 0.2s, visibility 0.2s;
opacity 0.2s,
visibility 0.2s;
pointer-events: none; pointer-events: none;
} }
@ -839,14 +835,18 @@
cursor: pointer; 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 */ /* Show segments playback message */

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

@ -67,6 +67,15 @@
-ms-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 { .tooltip-actions {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -111,9 +120,7 @@
white-space: nowrap; white-space: nowrap;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: transition: opacity 0.2s, visibility 0.2s;
opacity 0.2s,
visibility 0.2s;
z-index: 2500; /* High z-index */ z-index: 2500; /* High z-index */
pointer-events: none; pointer-events: none;
} }
@ -132,9 +139,7 @@
margin-left: 0; /* Reset margin */ margin-left: 0; /* Reset margin */
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: transition: opacity 0.2s, visibility 0.2s;
opacity 0.2s,
visibility 0.2s;
z-index: 2500; /* High z-index */ z-index: 2500; /* High z-index */
pointer-events: none; pointer-events: none;
} }