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
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">

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

@ -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",

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

@ -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 */

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

@ -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;
}