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

feat: Add a method to support player in the same page (e.g. for the embed page)

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-18 11:15:26 +03:00
parent e780ffd5f9
commit 5066f60c00
5 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,9 @@
<title>VideoJS</title>
</head>
<body>
<div id="video-js-root"></div>
<div id="video-js-root-main"></div>
<div id="video-js-root-embed"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

2
frontend-tools/video-js/src/VideoJS.css
View File

@ -73,12 +73,12 @@ html {
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1000;
padding: 0;
height: calc(100% - 46px);
box-sizing: border-box;
padding: 20px;
gap: 10px;
z-index: 4;
}
.vjs-related-videos-title {
color: white;

4
frontend-tools/video-js/src/VideoJS.jsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { VideoJSPlayer } from './components';
function VideoJS() {
return <VideoJSPlayer />;
function VideoJS({ videoId = 'default-video', ...props }) {
return <VideoJSPlayer videoId={videoId} {...props} />;
}
export default VideoJS;

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

@ -15,16 +15,17 @@ import CustomSettingsMenu from '../controls/CustomSettingsMenu';
import SeekIndicator from '../controls/SeekIndicator';
import UserPreferences from '../../utils/UserPreferences';
function VideoJSPlayer() {
function VideoJSPlayer({ videoId = 'default-video' }) {
const videoRef = useRef(null);
const playerRef = useRef(null); // Track the player instance
const userPreferences = useRef(new UserPreferences()); // User preferences instance
const customComponents = useRef({}); // Store custom components for cleanup
const isDevelopment =
/* const isDevelopment =
process.env.NODE_ENV === 'development' ||
window.location.hostname === 'localhost' ||
window.location.hostname.includes('vercel.app');
window.location.hostname.includes('vercel.app'); */
const isDevelopment = false;
console.log('isDevelopment', isDevelopment);
console.log('window.location.hostname', window.location.hostname);
@ -1483,7 +1484,7 @@ function VideoJSPlayer() {
},
// Player element ID
id: undefined,
id: mediaData.id,
// Milliseconds of inactivity before user considered inactive (0 = never)
inactivityTimeout: 2000,
@ -2742,7 +2743,7 @@ function VideoJSPlayer() {
};
}, []);
return <video ref={videoRef} className="video-js vjs-default-skin" tabIndex="0" />;
return <video ref={videoRef} id={videoId} className="video-js vjs-default-skin" tabIndex="0" />;
}
export default VideoJSPlayer;

22
frontend-tools/video-js/src/main.jsx
View File

@ -7,12 +7,24 @@ import VideoJS from './VideoJS.jsx';
// Mount the components when the DOM is ready
const mountComponents = () => {
const rootContainer = document.getElementById('video-js-root');
if (rootContainer) {
const root = createRoot(rootContainer);
root.render(
// Mount main video player
const rootContainerMain = document.getElementById('video-js-root-main');
if (rootContainerMain) {
const rootMain = createRoot(rootContainerMain);
rootMain.render(
<StrictMode>
<VideoJS />
<VideoJS videoId="video-main" />
</StrictMode>
);
}
// Mount embed video player
const rootContainerEmbed = document.getElementById('video-js-root-embed');
if (rootContainerEmbed) {
const rootEmbed = createRoot(rootContainerEmbed);
rootEmbed.render(
<StrictMode>
<VideoJS videoId="video-embed" />
</StrictMode>
);
}