mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-12-23 20:02:37 -05:00
feat: Improve Visual Distinction Between Trim and Chapters Editors (#1445)
* Update .gitignore * feat: Improve Visual Distinction Between Trim and Chapters Editors * fix: Convert timeline header styles to CSS classes Moved inline styles for timeline headers in chapters and video editors to dedicated CSS classes for better maintainability and consistency. * Bump version to 7.3.0 Update the VERSION in cms/version.py to 7.3.0 for the new release. * build assets * Update segment color schemes in video and chapters editor. * build assets * build assets * fix: Prevent Safari from resetting segments after drag operations Prevent Safari from resetting segments when loadedmetadata fires multiple times and fix stale state issues in click handlers by using refs instead of closure variables. * build assets * Bump version to 7.3.0-beta.3 Update the VERSION string in cms/version.py to reflect the new pre-release version 7.3.0-beta.3.
This commit is contained in:
Yiannis Christodoulou
committed by
GitHub
GitHub
parent
aeef8284bf
commit
d9b1d6cab1
@@ -309,6 +309,11 @@ const App = () => {
|
||||
canRedo={historyPosition < history.length - 1}
|
||||
/>
|
||||
|
||||
{/* Timeline Header */}
|
||||
<div className="timeline-header-container">
|
||||
<h2 className="timeline-header-title">Trim or Split</h2>
|
||||
</div>
|
||||
|
||||
{/* Timeline Controls */}
|
||||
<TimelineControls
|
||||
currentTime={currentTime}
|
||||
|
||||
@@ -28,9 +28,9 @@ const ClipSegments = ({ segments }: ClipSegmentsProps) => {
|
||||
|
||||
// Generate the same color background for a segment as shown in the timeline
|
||||
const getSegmentColorClass = (index: number) => {
|
||||
// Return CSS class based on index modulo 8
|
||||
// This matches the CSS nth-child selectors in the timeline
|
||||
return `segment-default-color segment-color-${(index % 8) + 1}`;
|
||||
// Return CSS class based on index modulo 20
|
||||
// This matches the CSS classes for up to 20 segments
|
||||
return `segment-default-color segment-color-${(index % 20) + 1}`;
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -99,6 +99,7 @@
|
||||
}
|
||||
|
||||
.segment-thumbnail {
|
||||
display: none;
|
||||
width: 4rem;
|
||||
height: 2.25rem;
|
||||
background-size: cover;
|
||||
@@ -129,7 +130,7 @@
|
||||
margin-top: 0.25rem;
|
||||
display: inline-block;
|
||||
background-color: #f3f4f6;
|
||||
padding: 0 0.5rem;
|
||||
padding: 0;
|
||||
border-radius: 0.25rem;
|
||||
color: black;
|
||||
}
|
||||
@@ -169,28 +170,67 @@
|
||||
color: rgba(51, 51, 51, 0.7);
|
||||
}
|
||||
|
||||
/* Generate 20 shades of #2563eb (rgb(37, 99, 235)) */
|
||||
/* Base color: #2563eb = rgb(37, 99, 235) */
|
||||
/* Creating variations from lighter to darker */
|
||||
.segment-color-1 {
|
||||
background-color: rgba(59, 130, 246, 0.15);
|
||||
background-color: rgba(147, 179, 247, 0.2);
|
||||
}
|
||||
.segment-color-2 {
|
||||
background-color: rgba(16, 185, 129, 0.15);
|
||||
background-color: rgba(129, 161, 243, 0.2);
|
||||
}
|
||||
.segment-color-3 {
|
||||
background-color: rgba(245, 158, 11, 0.15);
|
||||
background-color: rgba(111, 143, 239, 0.2);
|
||||
}
|
||||
.segment-color-4 {
|
||||
background-color: rgba(239, 68, 68, 0.15);
|
||||
background-color: rgba(93, 125, 237, 0.2);
|
||||
}
|
||||
.segment-color-5 {
|
||||
background-color: rgba(139, 92, 246, 0.15);
|
||||
background-color: rgba(75, 107, 235, 0.2);
|
||||
}
|
||||
.segment-color-6 {
|
||||
background-color: rgba(236, 72, 153, 0.15);
|
||||
background-color: rgba(65, 99, 235, 0.2);
|
||||
}
|
||||
.segment-color-7 {
|
||||
background-color: rgba(6, 182, 212, 0.15);
|
||||
background-color: rgba(55, 91, 235, 0.2);
|
||||
}
|
||||
.segment-color-8 {
|
||||
background-color: rgba(250, 204, 21, 0.15);
|
||||
background-color: rgba(45, 83, 235, 0.2);
|
||||
}
|
||||
.segment-color-9 {
|
||||
background-color: rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
.segment-color-10 {
|
||||
background-color: rgba(33, 89, 215, 0.2);
|
||||
}
|
||||
.segment-color-11 {
|
||||
background-color: rgba(29, 79, 195, 0.2);
|
||||
}
|
||||
.segment-color-12 {
|
||||
background-color: rgba(25, 69, 175, 0.2);
|
||||
}
|
||||
.segment-color-13 {
|
||||
background-color: rgba(21, 59, 155, 0.2);
|
||||
}
|
||||
.segment-color-14 {
|
||||
background-color: rgba(17, 49, 135, 0.2);
|
||||
}
|
||||
.segment-color-15 {
|
||||
background-color: rgba(15, 43, 119, 0.2);
|
||||
}
|
||||
.segment-color-16 {
|
||||
background-color: rgba(13, 37, 103, 0.2);
|
||||
}
|
||||
.segment-color-17 {
|
||||
background-color: rgba(11, 31, 87, 0.2);
|
||||
}
|
||||
.segment-color-18 {
|
||||
background-color: rgba(9, 25, 71, 0.2);
|
||||
}
|
||||
.segment-color-19 {
|
||||
background-color: rgba(7, 19, 55, 0.2);
|
||||
}
|
||||
.segment-color-20 {
|
||||
background-color: rgba(5, 13, 39, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,16 @@
|
||||
#video-editor-trim-root {
|
||||
.timeline-header-container {
|
||||
margin-left: 1rem;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.timeline-header-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #2563eb;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.timeline-container-card {
|
||||
background-color: white;
|
||||
border-radius: 0.5rem;
|
||||
@@ -11,6 +23,8 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
@@ -20,7 +34,7 @@
|
||||
}
|
||||
|
||||
.timeline-title-text {
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.current-time {
|
||||
@@ -48,10 +62,11 @@
|
||||
.timeline-container {
|
||||
position: relative;
|
||||
min-width: 100%;
|
||||
background-color: #fafbfc;
|
||||
background-color: #eff6ff;
|
||||
height: 70px;
|
||||
border-radius: 0.25rem;
|
||||
overflow: visible !important;
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
@@ -194,7 +209,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0.4rem;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
background-color: rgba(59, 130, 246, 0.6);
|
||||
color: white;
|
||||
opacity: 1;
|
||||
transition: background-color 0.2s;
|
||||
@@ -202,15 +217,15 @@
|
||||
}
|
||||
|
||||
.clip-segment:hover .clip-segment-info {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(59, 130, 246, 0.7);
|
||||
}
|
||||
|
||||
.clip-segment.selected .clip-segment-info {
|
||||
background-color: rgba(59, 130, 246, 0.5);
|
||||
background-color: rgba(37, 99, 235, 0.8);
|
||||
}
|
||||
|
||||
.clip-segment.selected:hover .clip-segment-info {
|
||||
background-color: rgba(59, 130, 246, 0.4);
|
||||
background-color: rgba(37, 99, 235, 0.75);
|
||||
}
|
||||
|
||||
.clip-segment-name {
|
||||
|
||||
Reference in New Issue
Block a user