From 71b9935d2cadcd07d69598781566e904e11c32ef Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Thu, 25 Sep 2025 12:29:27 +0300 Subject: [PATCH] feat: Truncate chapter's title above the timeline thumbnail if is too long --- .../src/components/markers/ChapterMarkers.js | 12 +++++++++--- .../src/components/video-player/VideoJSPlayer.jsx | 6 +++++- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/frontend-tools/video-js/src/components/markers/ChapterMarkers.js b/frontend-tools/video-js/src/components/markers/ChapterMarkers.js index d41a11b2..c0a02468 100644 --- a/frontend-tools/video-js/src/components/markers/ChapterMarkers.js +++ b/frontend-tools/video-js/src/components/markers/ChapterMarkers.js @@ -215,8 +215,12 @@ class ChapterMarkers extends Component { const endTime = formatTime(currentChapter.endTime); // const timeAtPosition = formatTime(currentTime); - // Update text content without rebuilding DOM - this.chapterTitle.textContent = currentChapter.chapterTitle; + // Update text content without rebuilding DOM - truncate if too long + const truncatedTitle = + currentChapter.chapterTitle.length > 30 + ? currentChapter.chapterTitle.substring(0, 30) + '...' + : currentChapter.chapterTitle; + this.chapterTitle.textContent = truncatedTitle; this.chapterInfo.textContent = `${startTime} - ${endTime}`; // this.positionInfo.textContent = `Position: ${timeAtPosition}`; @@ -338,7 +342,9 @@ class ChapterMarkers extends Component { const tooltip = videojs.dom.createEl('div', { className: 'vjs-chapter-marker-tooltip', }); - tooltip.textContent = cue.chapterTitle; + // Truncate tooltip text if too long + const truncatedTooltipTitle = cue.text.length > 30 ? cue.text.substring(0, 30) + '...' : cue.text; + tooltip.textContent = truncatedTooltipTitle; marker.appendChild(tooltip); // Add click handler to jump to chapter diff --git a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx index daf82594..8c341bd1 100644 --- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx +++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx @@ -43,7 +43,11 @@ function VideoJSPlayer({ videoId = 'default-video' }) { poster_url: '/media/original/thumbnails/user/markos/6497e960081b4b8abddcf4cbdf2bf4eb_btbR39g.20250604_080632.mp4.jpg', chapter_data: [ - { startTime: '00:00:00.000', endTime: '00:00:08.295', chapterTitle: 'A1 test' }, + { + startTime: '00:00:00.000', + endTime: '00:00:08.295', + chapterTitle: 'A1 Lorem ipsum dolor sit amet consectetur adipisicing elit.', + }, { startTime: '00:00:24.295', endTime: '00:00:48.590', chapterTitle: 'A2 of Marine Life' }, { startTime: '00:00:48.590',