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

feat: Check if this is an embed player (disable next video and autoplay features)

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-18 12:03:00 +03:00
parent 5066f60c00
commit d702689a0c
2 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend-tools/video-js/index.html
View File

@ -7,7 +7,12 @@
<title>VideoJS</title> <title>VideoJS</title>
</head> </head>
<body> <body>
<h1>Main Video Player</h1>
<div id="video-js-root-main"></div> <div id="video-js-root-main"></div>
<hr />
<h1>Embed Video Player</h1>
<div id="video-js-root-embed"></div> <div id="video-js-root-embed"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>

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

@ -21,11 +21,11 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
const userPreferences = useRef(new UserPreferences()); // User preferences instance const userPreferences = useRef(new UserPreferences()); // User preferences instance
const customComponents = useRef({}); // Store custom components for cleanup const customComponents = useRef({}); // Store custom components for cleanup
/* const isDevelopment = // Check if this is an embed player (disable next video and autoplay features)
process.env.NODE_ENV === 'development' || const isEmbedPlayer = videoId === 'video-embed';
window.location.hostname === 'localhost' ||
window.location.hostname.includes('vercel.app'); */ const enableDevEnvironment = true;
const isDevelopment = false; const isDevelopment = enableDevEnvironment || window.location.hostname.includes('vercel.app');
console.log('isDevelopment', isDevelopment); console.log('isDevelopment', isDevelopment);
console.log('window.location.hostname', window.location.hostname); console.log('window.location.hostname', window.location.hostname);
@ -1841,7 +1841,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// END: Implement custom time display component // END: Implement custom time display component
// BEGIN: Implement custom next video button // BEGIN: Implement custom next video button
if (mediaData?.nextLink || 1 === 1) { if (!isEmbedPlayer && (mediaData?.nextLink || isDevelopment)) {
// it seems that the nextLink is not always available, and it is need the this.player().trigger('nextVideo'); from NextVideoButton.js // TODO: remove the 1===1 and the mediaData?.nextLink // it seems that the nextLink is not always available, and it is need the this.player().trigger('nextVideo'); from NextVideoButton.js // TODO: remove the 1===1 and the mediaData?.nextLink
const nextVideoButton = new NextVideoButton(playerRef.current, { const nextVideoButton = new NextVideoButton(playerRef.current, {
nextLink: mediaData.nextLink, nextLink: mediaData.nextLink,
@ -1852,26 +1852,28 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// END: Implement custom next video button // END: Implement custom next video button
// BEGIN: Implement autoplay toggle button - simplified // BEGIN: Implement autoplay toggle button - simplified
try { if (!isEmbedPlayer) {
const autoplayToggleButton = new AutoplayToggleButton(playerRef.current, { try {
userPreferences: userPreferences.current, const autoplayToggleButton = new AutoplayToggleButton(playerRef.current, {
}); userPreferences: userPreferences.current,
// Add it after the play button });
const fullscreenToggleIndex = controlBar.children().indexOf(fullscreenToggle); // Add it after the play button
controlBar.addChild(autoplayToggleButton, {}, fullscreenToggleIndex - 1); const fullscreenToggleIndex = controlBar.children().indexOf(fullscreenToggle);
controlBar.addChild(autoplayToggleButton, {}, fullscreenToggleIndex - 1);
// Store reference for later use // Store reference for later use
customComponents.current.autoplayToggleButton = autoplayToggleButton; customComponents.current.autoplayToggleButton = autoplayToggleButton;
// Force update icon after adding to DOM to ensure correct display // Force update icon after adding to DOM to ensure correct display
setTimeout(() => { setTimeout(() => {
autoplayToggleButton.updateIcon(); autoplayToggleButton.updateIcon();
console.log('✓ Autoplay toggle button icon updated after DOM insertion'); console.log('✓ Autoplay toggle button icon updated after DOM insertion');
}, 100); }, 100);
console.log('✓ Autoplay toggle button added successfully'); console.log('✓ Autoplay toggle button added successfully');
} catch (error) { } catch (error) {
console.error('✗ Failed to add autoplay toggle button:', error); console.error('✗ Failed to add autoplay toggle button:', error);
}
} }
// END: Implement autoplay toggle button // END: Implement autoplay toggle button
@ -2528,8 +2530,9 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
console.log('isAutoplayEnabled', isAutoplayEnabled); console.log('isAutoplayEnabled', isAutoplayEnabled);
console.log('hasNextVideo', hasNextVideo); console.log('hasNextVideo', hasNextVideo);
console.log('isEmbedPlayer', isEmbedPlayer);
if (isAutoplayEnabled && hasNextVideo) { if (!isEmbedPlayer && isAutoplayEnabled && hasNextVideo) {
// Get next video data for countdown display - find the next video in related videos // Get next video data for countdown display - find the next video in related videos
let nextVideoData = { let nextVideoData = {
title: 'Next Video', title: 'Next Video',