CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-12-12 23:02:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: Disable Segment Tools and Reset Preview State During Playback (#1305)

Browse Source 
* 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
This commit is contained in:
Yiannis Christodoulou
2025-07-01 15:33:39 +03:00
committed by GitHub
parent 83f3eec940
commit 4f1c4a2b4c
38 changed files with 2959 additions and 2305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,7 +56,7 @@
.timeline-marker {
position: absolute;
height: 82px; /* Increased height to extend below timeline */
height: 82px; /* Increased height to extend below timeline */
width: 2px;
background-color: #000;
transform: translateX(-50%);
@@ -83,7 +83,7 @@
.timeline-marker-drag {
position: absolute;
bottom: -12px; /* Changed from -6px to -12px to move it further down */
bottom: -12px; /* Changed from -6px to -12px to move it further down */
left: 50%;
transform: translateX(-50%);
width: 16px;
@@ -248,14 +248,14 @@
right: 0;
border-radius: 0 2px 2px 0;
}
/* Enhanced handles for touch devices */
@media (pointer: coarse) {
.clip-segment-handle {
width: 14px; /* Wider target for touch devices */
background-color: rgba(0, 0, 0, 0.4); /* Darker by default for better visibility */
}
.clip-segment-handle:after {
content: "";
position: absolute;
@@ -267,15 +267,15 @@
background-color: rgba(255, 255, 255, 0.8);
border-radius: 1px;
}
.clip-segment-handle.left:after {
box-shadow: -2px 0 0 rgba(0, 0, 0, 0.5);
}
.clip-segment-handle.right:after {
box-shadow: 2px 0 0 rgba(0, 0, 0, 0.5);
}
/* Active state for touch feedback */
.clip-segment-handle:active {
background-color: rgba(0, 0, 0, 0.6);
@@ -284,19 +284,19 @@
.timeline-marker {
height: 85px;
}
.timeline-marker-head {
width: 24px;
height: 24px;
top: -13px;
}
.timeline-marker-drag {
width: 24px;
height: 24px;
bottom: -18px;
}
.timeline-marker-head.dragging {
width: 28px;
height: 28px;
@@ -321,7 +321,7 @@
.segment-tooltip:after,
.empty-space-tooltip:after {
content: '';
content: "";
position: absolute;
bottom: -5px;
left: 50%;
@@ -335,7 +335,7 @@
.segment-tooltip:before,
.empty-space-tooltip:before {
content: '';
content: "";
position: absolute;
bottom: -6px;
left: 50%;
@@ -438,7 +438,7 @@
font-size: 0.875rem;
border: none;
cursor: pointer;
margin-right: 0.50rem;
margin-right: 0.5rem;
}
.time-button:hover {
@@ -532,8 +532,8 @@
}
/* General styles for all save buttons */
.save-button,
.save-copy-button,
.save-button,
.save-copy-button,
.save-segments-button {
color: #ffffff;
background: #0066cc;
@@ -548,8 +548,8 @@
}
/* Shared hover effect */
.save-button:hover,
.save-copy-button:hover,
.save-button:hover,
.save-copy-button:hover,
.save-segments-button:hover {
background-color: #0056b3;
}
@@ -561,30 +561,30 @@
justify-content: space-between;
gap: 0.5rem;
}
.save-button,
.save-copy-button,
.save-button,
.save-copy-button,
.save-segments-button {
flex: 1;
font-size: 0.7rem;
padding: 0.25rem 0.35rem;
}
}
/* Very small screens - adjust save buttons */
@media (max-width: 480px) {
.save-button,
.save-copy-button,
.save-button,
.save-copy-button,
.save-segments-button {
font-size: 0.675rem;
padding: 0.25rem;
}
/* Remove margins for controls-right buttons */
.controls-right {
margin: 0;
}
.controls-right button {
margin: 0;
}
@@ -595,7 +595,7 @@
[data-tooltip] {
position: relative;
}
[data-tooltip]:before {
content: attr(data-tooltip);
position: absolute;
@@ -612,13 +612,15 @@
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;
}
[data-tooltip]:after {
content: '';
content: "";
position: absolute;
bottom: 100%;
left: 50%;
@@ -628,17 +630,19 @@
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;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
opacity: 1;
visibility: visible;
}
}
/* Hide button tooltips on touch devices */
@media (pointer: coarse) {
[data-tooltip]:before,
@@ -669,27 +673,27 @@
}
.modal-success-icon svg {
color: #4CAF50;
color: #4caf50;
animation: fadeIn 0.5s ease-in-out;
}
.modal-error-icon svg {
color: #F44336;
color: #f44336;
animation: fadeIn 0.5s ease-in-out;
}
.success-link {
background-color: #4CAF50;
background-color: #4caf50;
color: white;
transition: background-color 0.3s;
}
.success-link:hover {
background-color: #388E3C;
background-color: #388e3c;
}
.error-message {
color: #F44336;
color: #f44336;
font-weight: 500;
}
@@ -809,47 +813,18 @@
}
@keyframes pulse {
0% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
100% { opacity: 0.7; transform: scale(1); }
}
/* Preview mode styles */
.preview-mode .tooltip-action-btn {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.preview-mode .tooltip-time-btn {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
/* Timeline preview mode styles */
.timeline-container-card.preview-mode {
pointer-events: none;
}
.timeline-container-card.preview-mode .timeline-marker-head,
.timeline-container-card.preview-mode .timeline-marker-drag,
.timeline-container-card.preview-mode .clip-segment,
.timeline-container-card.preview-mode .clip-segment-handle,
.timeline-container-card.preview-mode .time-button,
.timeline-container-card.preview-mode .zoom-button,
.timeline-container-card.preview-mode .save-button,
.timeline-container-card.preview-mode .save-copy-button,
.timeline-container-card.preview-mode .save-segments-button {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.timeline-container-card.preview-mode .clip-segment:hover {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.15);
background-color: inherit !important;
0% {
opacity: 0.7;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.05);
}
100% {
opacity: 0.7;
transform: scale(1);
}
}
/* Segments playback mode styles - minimal functional styling */
@@ -858,19 +833,26 @@
cursor: pointer;
}
.segments-playback-mode .tooltip-action-btn.set-in,
.segments-playback-mode .tooltip-action-btn.set-out,
.segments-playback-mode .tooltip-action-btn.play-from-start {
opacity: 0.5;
pointer-events: none;
}
.segments-playback-mode .tooltip-action-btn.play,
.segments-playback-mode .tooltip-action-btn.pause {
opacity: 1;
cursor: pointer;
}
/* 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;
}
/* 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 */
.segments-playback-message {
display: flex;
@@ -889,4 +871,4 @@
width: 1.25rem;
margin-right: 0.5rem;
color: #3b82f6;
}
}