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: 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>
</head>
<body>
<h1>Main Video Player</h1>
<div id="video-js-root-main"></div>
<hr />
<h1>Embed Video Player</h1>
<div id="video-js-root-embed"></div>
<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 customComponents = useRef({}); // Store custom components for cleanup
/* const isDevelopment =
process.env.NODE_ENV === 'development' ||
window.location.hostname === 'localhost' ||
window.location.hostname.includes('vercel.app'); */
const isDevelopment = false;
// Check if this is an embed player (disable next video and autoplay features)
const isEmbedPlayer = videoId === 'video-embed';
const enableDevEnvironment = true;
const isDevelopment = enableDevEnvironment || window.location.hostname.includes('vercel.app');
console.log('isDevelopment', isDevelopment);
console.log('window.location.hostname', window.location.hostname);
@ -1841,7 +1841,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// END: Implement custom time display component
// 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
const nextVideoButton = new NextVideoButton(playerRef.current, {
nextLink: mediaData.nextLink,
@ -1852,26 +1852,28 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// END: Implement custom next video button
// BEGIN: Implement autoplay toggle button - simplified
try {
const autoplayToggleButton = new AutoplayToggleButton(playerRef.current, {
userPreferences: userPreferences.current,
});
// Add it after the play button
const fullscreenToggleIndex = controlBar.children().indexOf(fullscreenToggle);
controlBar.addChild(autoplayToggleButton, {}, fullscreenToggleIndex - 1);
if (!isEmbedPlayer) {
try {
const autoplayToggleButton = new AutoplayToggleButton(playerRef.current, {
userPreferences: userPreferences.current,
});
// Add it after the play button
const fullscreenToggleIndex = controlBar.children().indexOf(fullscreenToggle);
controlBar.addChild(autoplayToggleButton, {}, fullscreenToggleIndex - 1);
// Store reference for later use
customComponents.current.autoplayToggleButton = autoplayToggleButton;
// Store reference for later use
customComponents.current.autoplayToggleButton = autoplayToggleButton;
// Force update icon after adding to DOM to ensure correct display
setTimeout(() => {
autoplayToggleButton.updateIcon();
console.log('✓ Autoplay toggle button icon updated after DOM insertion');
}, 100);
// Force update icon after adding to DOM to ensure correct display
setTimeout(() => {
autoplayToggleButton.updateIcon();
console.log('✓ Autoplay toggle button icon updated after DOM insertion');
}, 100);
console.log('✓ Autoplay toggle button added successfully');
} catch (error) {
console.error('✗ Failed to add autoplay toggle button:', error);
console.log('✓ Autoplay toggle button added successfully');
} catch (error) {
console.error('✗ Failed to add autoplay toggle button:', error);
}
}
// END: Implement autoplay toggle button
@ -2528,8 +2530,9 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
console.log('isAutoplayEnabled', isAutoplayEnabled);
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
let nextVideoData = {
title: 'Next Video',