From d9b1d6cab1d2bdfc16f799a0a27b64313e2e0d22 Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Mon, 22 Dec 2025 11:12:19 +0200 Subject: [PATCH] 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. --- .gitignore | 1 + cms/version.py | 2 +- .../chapters-editor/client/src/App.tsx | 5 + .../client/src/components/ClipSegments.tsx | 10 +- .../src/components/TimelineControls.tsx | 127 +++++++++++------- .../client/src/hooks/useVideoChapters.tsx | 35 ++--- .../client/src/styles/ClipSegments.css | 88 ++++++++---- .../client/src/styles/IOSNotification.css | 4 +- .../client/src/styles/Modal.css | 14 +- .../client/src/styles/TimelineControls.css | 36 +++-- .../video-editor/client/src/App.tsx | 5 + .../client/src/components/ClipSegments.tsx | 6 +- .../client/src/styles/ClipSegments.css | 58 ++++++-- .../client/src/styles/TimelineControls.css | 27 +++- static/chapters_editor/chapters-editor.css | 2 +- static/chapters_editor/chapters-editor.js | 110 +++++++-------- static/chapters_editor/chapters-editor.js.map | 2 +- static/css/_commons.css | 46 +++---- static/css/add-media.css | 2 +- static/css/media.css | 10 +- static/css/playlist.css | 2 +- static/js/_commons.js | 2 +- static/js/about.js | 2 +- static/js/add-media.js | 2 +- static/js/base.js | 2 +- static/js/categories.js | 2 +- static/js/embed.js | 2 +- static/js/featured.js | 2 +- static/js/history.js | 2 +- static/js/index.js | 2 +- static/js/latest.js | 2 +- static/js/liked.js | 2 +- static/js/manage-comments.js | 2 +- static/js/manage-media.js | 2 +- static/js/manage-users.js | 2 +- static/js/media.js | 2 +- static/js/members.js | 2 +- static/js/playlist.js | 2 +- static/js/profile-about.js | 2 +- static/js/profile-media.js | 2 +- static/js/profile-playlists.js | 2 +- static/js/profile-shared-by-me.js | 2 +- static/js/profile-shared-with-me.js | 2 +- static/js/recommended.js | 2 +- static/js/search.js | 2 +- static/js/tags.js | 2 +- .../lib/file-uploader/5.13.0/fine-uploader.js | 2 +- .../file-uploader/5.13.0/fine-uploader.min.js | 2 +- static/video_editor/video-editor.css | 2 +- static/video_editor/video-editor.js | 2 +- static/video_editor/video-editor.js.map | 2 +- 51 files changed, 398 insertions(+), 254 deletions(-) diff --git a/.gitignore b/.gitignore index b103c72c..67c383d2 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,4 @@ frontend-tools/video-editor/client/public/videos/sample-video.mp3 frontend-tools/chapters-editor/client/public/videos/sample-video.mp3 static/chapters_editor/videos/sample-video.mp3 static/video_editor/videos/sample-video.mp3 +templates/todo-MS4.md diff --git a/cms/version.py b/cms/version.py index 56bcd646..5ed5d632 100644 --- a/cms/version.py +++ b/cms/version.py @@ -1 +1 @@ -VERSION = "7.2.2" +VERSION = "7.3.0-beta.3" diff --git a/frontend-tools/chapters-editor/client/src/App.tsx b/frontend-tools/chapters-editor/client/src/App.tsx index 4e0b8f1c..5e825b4a 100644 --- a/frontend-tools/chapters-editor/client/src/App.tsx +++ b/frontend-tools/chapters-editor/client/src/App.tsx @@ -150,6 +150,11 @@ const App = () => { canRedo={historyPosition < history.length - 1} /> + {/* Timeline Header */} +
+

Add Chapters

+
+ {/* Timeline Controls */} { // 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}`; }; // Get selected segment @@ -65,8 +65,8 @@ const ClipSegments = ({ segments, selectedSegmentId }: ClipSegmentsProps) => {