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

feat: Skip the autoplay if is playlist by passing the isPlayList to the video.js

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-25 12:09:48 +03:00
parent 8201d523d0
commit f3888981db
3 changed files with 64 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1039,6 +1039,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// other // other
useRoundedCorners: false, useRoundedCorners: false,
isPlayList: true,
previewSprite: { previewSprite: {
url: 'https://deic.mediacms.io/media/original/thumbnails/user/thorkild/2ca18fadeef8475eae513c12cc0830d3.19990812hd_1920_1080_30fps.mp4sprites.jpg', url: 'https://deic.mediacms.io/media/original/thumbnails/user/thorkild/2ca18fadeef8475eae513c12cc0830d3.19990812hd_1920_1080_30fps.mp4sprites.jpg',
frame: { width: 160, height: 90, seconds: 10 }, frame: { width: 160, height: 90, seconds: 10 },
@ -1293,6 +1294,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
poster: mediaData.data?.poster_url ? mediaData.siteUrl + mediaData.data.poster_url : '', poster: mediaData.data?.poster_url ? mediaData.siteUrl + mediaData.data.poster_url : '',
previewSprite: mediaData?.previewSprite || {}, previewSprite: mediaData?.previewSprite || {},
useRoundedCorners: mediaData?.useRoundedCorners, useRoundedCorners: mediaData?.useRoundedCorners,
isPlayList: mediaData?.isPlayList,
related_media: mediaData.data?.related_media || [], related_media: mediaData.data?.related_media || [],
nextLink: mediaData?.nextLink || null, nextLink: mediaData?.nextLink || null,
urlAutoplay: mediaData?.urlAutoplay || true, urlAutoplay: mediaData?.urlAutoplay || true,
@ -2538,56 +2540,70 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
const hasNextVideo = mediaData.nextLink !== null; const hasNextVideo = mediaData.nextLink !== null;
if (!isEmbedPlayer && isAutoplayEnabled && hasNextVideo) { if (!isEmbedPlayer && isAutoplayEnabled && hasNextVideo) {
// Get next video data for countdown display - find the next video in related videos // If it's a playlist, skip countdown and play directly
let nextVideoData = { if (currentVideo.isPlayList) {
title: 'Next Video', // Clean up any existing overlays
author: '', if (endScreen) {
duration: 0, playerRef.current.removeChild(endScreen);
thumbnail: '', endScreen = null;
}; }
if (autoplayCountdown) {
playerRef.current.removeChild(autoplayCountdown);
autoplayCountdown = null;
}
// Try to find the next video by URL matching or just use the first related video // Play next video directly without countdown
if (relatedVideos.length > 0) { goToNextVideo();
// For now, use the first related video as the next video } else {
// In a real implementation, you might want to find the specific next video // Get next video data for countdown display - find the next video in related videos
const nextVideo = relatedVideos[0]; let nextVideoData = {
nextVideoData = { title: 'Next Video',
title: nextVideo.title || 'Next Video', author: '',
author: nextVideo.author || '', duration: 0,
duration: nextVideo.duration || 0, thumbnail: '',
thumbnail: nextVideo.thumbnail || '',
}; };
}
// Clean up any existing overlays // Try to find the next video by URL matching or just use the first related video
if (endScreen) { if (relatedVideos.length > 0) {
playerRef.current.removeChild(endScreen); const nextVideo = relatedVideos[0];
endScreen = null; nextVideoData = {
} title: nextVideo.title || 'Next Video',
if (autoplayCountdown) { author: nextVideo.author || '',
playerRef.current.removeChild(autoplayCountdown); duration: nextVideo.duration || 0,
autoplayCountdown = null; thumbnail: nextVideo.thumbnail || '',
} };
}
// Show autoplay countdown // Clean up any existing overlays
autoplayCountdown = new AutoplayCountdownOverlay(playerRef.current, { if (endScreen) {
nextVideoData: nextVideoData, playerRef.current.removeChild(endScreen);
countdownSeconds: 5, endScreen = null;
onPlayNext: () => { }
goToNextVideo(); if (autoplayCountdown) {
}, playerRef.current.removeChild(autoplayCountdown);
onCancel: () => { autoplayCountdown = null;
// Hide countdown and show end screen instead }
if (autoplayCountdown) {
playerRef.current.removeChild(autoplayCountdown);
autoplayCountdown = null;
}
showEndScreen();
},
});
playerRef.current.addChild(autoplayCountdown); // Show autoplay countdown
autoplayCountdown.startCountdown(); autoplayCountdown = new AutoplayCountdownOverlay(playerRef.current, {
nextVideoData: nextVideoData,
countdownSeconds: 500,
onPlayNext: () => {
goToNextVideo();
},
onCancel: () => {
// Hide countdown and show end screen instead
if (autoplayCountdown) {
playerRef.current.removeChild(autoplayCountdown);
autoplayCountdown = null;
}
showEndScreen();
},
});
playerRef.current.addChild(autoplayCountdown);
autoplayCountdown.startCountdown();
}
} else { } else {
// Autoplay disabled or no next video - show regular end screen // Autoplay disabled or no next video - show regular end screen
showEndScreen(); showEndScreen();

2
frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx
View File

@ -16,6 +16,7 @@ import React, { useEffect, useRef } from 'react';
const VideoJSEmbed = ({ const VideoJSEmbed = ({
data, data,
useRoundedCorners, useRoundedCorners,
isPlayList,
playerVolume, playerVolume,
playerSoundMuted, playerSoundMuted,
videoQuality, videoQuality,
@ -66,6 +67,7 @@ const VideoJSEmbed = ({
window.MEDIA_DATA = { window.MEDIA_DATA = {
data: data || {}, data: data || {},
useRoundedCorners: useRoundedCorners, useRoundedCorners: useRoundedCorners,
isPlayList: isPlayList,
playerVolume: playerVolume || 0.5, playerVolume: playerVolume || 0.5,
playerSoundMuted: playerSoundMuted || (urlMuted === '1'), playerSoundMuted: playerSoundMuted || (urlMuted === '1'),
videoQuality: videoQuality || 'auto', videoQuality: videoQuality || 'auto',

1
frontend/src/static/js/components/media-viewer/VideoViewer/index.js
View File

@ -392,6 +392,7 @@ export default class VideoViewer extends React.PureComponent {
return React.createElement(VideoJSEmbed, { return React.createElement(VideoJSEmbed, {
data: this.props.data, data: this.props.data,
useRoundedCorners: site.useRoundedCorners, useRoundedCorners: site.useRoundedCorners,
isPlayList: !!MediaPageStore.get('playlist-id'),
playerVolume: this.browserCache.get('player-volume'), playerVolume: this.browserCache.get('player-volume'),
playerSoundMuted: this.browserCache.get('player-sound-muted'), playerSoundMuted: this.browserCache.get('player-sound-muted'),
videoQuality: this.browserCache.get('video-quality'), videoQuality: this.browserCache.get('video-quality'),