CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-09 08:58:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement the next video functionality

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-07-13 16:04:41 +03:00
parent 3d08f3b29f
commit 6d4f6a93a6
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,10 +20,10 @@ function VideoJSPlayer() {
: { : {
data: {}, data: {},
siteUrl: '', siteUrl: '',
hasNextLink: true,
}, },
[] []
); );
console.log('window.MEDIA_DATA hasNextLink', mediaData.hasNextLink);
// Define chapters as JSON object // Define chapters as JSON object
// Note: The sample-chapters.vtt file is no longer needed as chapters are now loaded from this JSON // Note: The sample-chapters.vtt file is no longer needed as chapters are now loaded from this JSON
@ -138,9 +138,13 @@ function VideoJSPlayer() {
}, },
]); ]);
// Function to navigate to next video (disabled for single video) // Function to navigate to next video
const goToNextVideo = () => { const goToNextVideo = () => {
// console.log('Next video functionality disabled for single video mode'); console.log('Next video functionality disabled for single video mode');
if (mediaData.onClickNextCallback && typeof mediaData.onClickNextCallback === 'function') {
mediaData.onClickNextCallback();
}
}; };
useEffect(() => { useEffect(() => {
@ -494,7 +498,7 @@ function VideoJSPlayer() {
const playToggle = controlBar.getChild('playToggle'); const playToggle = controlBar.getChild('playToggle');
const currentTimeDisplay = controlBar.getChild('currentTimeDisplay'); const currentTimeDisplay = controlBar.getChild('currentTimeDisplay');
// Implement custom time display component // BEGIN: Implement custom time display component
const customRemainingTime = new CustomRemainingTime(playerRef.current, { const customRemainingTime = new CustomRemainingTime(playerRef.current, {
displayNegative: false, displayNegative: false,
customPrefix: '', customPrefix: '',
@ -508,12 +512,15 @@ function VideoJSPlayer() {
} else { } else {
controlBar.addChild(customRemainingTime, {}, 2); controlBar.addChild(customRemainingTime, {}, 2);
} }
// END: Implement custom time display component
// Implement custom next video button // BEGIN: Implement custom next video button
const nextVideoButton = new NextVideoButton(playerRef.current); if (mediaData.hasNextLink) {
const nextVideoButton = new NextVideoButton(playerRef.current);
const playToggleIndex = controlBar.children().indexOf(playToggle); // Insert it after play button const playToggleIndex = controlBar.children().indexOf(playToggle); // Insert it after play button
controlBar.addChild(nextVideoButton, {}, playToggleIndex + 1); controlBar.addChild(nextVideoButton, {}, playToggleIndex + 1);
}
// END: Implement custom next video button
// Remove duplicate captions button and move chapters to end // Remove duplicate captions button and move chapters to end
const cleanupControls = () => { const cleanupControls = () => {