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

feat: Truncate chapter's title above the timeline thumbnail if is too long

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-25 12:29:27 +03:00
parent 89a74f6570
commit 71b9935d2c
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend-tools/video-js/src/components/markers/ChapterMarkers.js
View File

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

6
frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
View File

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