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> <title>VideoJS</title>
</head> </head>
<body> <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> <script type="module" src="/src/main.jsx"></script>
</body> </body>
</html> </html>

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

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

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

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import { VideoJSPlayer } from './components'; import { VideoJSPlayer } from './components';
function VideoJS() { function VideoJS({ videoId = 'default-video', ...props }) {
return <VideoJSPlayer />; return <VideoJSPlayer videoId={videoId} {...props} />;
} }
export default VideoJS; 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 SeekIndicator from '../controls/SeekIndicator';
import UserPreferences from '../../utils/UserPreferences'; import UserPreferences from '../../utils/UserPreferences';
function VideoJSPlayer() { function VideoJSPlayer({ videoId = 'default-video' }) {
const videoRef = useRef(null); const videoRef = useRef(null);
const playerRef = useRef(null); // Track the player instance const playerRef = useRef(null); // Track the player instance
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 = /* const isDevelopment =
process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'development' ||
window.location.hostname === 'localhost' || 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('isDevelopment', isDevelopment);
console.log('window.location.hostname', window.location.hostname); console.log('window.location.hostname', window.location.hostname);
@ -1483,7 +1484,7 @@ function VideoJSPlayer() {
}, },
// Player element ID // Player element ID
id: undefined, id: mediaData.id,
// Milliseconds of inactivity before user considered inactive (0 = never) // Milliseconds of inactivity before user considered inactive (0 = never)
inactivityTimeout: 2000, 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; 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 // Mount the components when the DOM is ready
const mountComponents = () => { const mountComponents = () => {
const rootContainer = document.getElementById('video-js-root'); // Mount main video player
if (rootContainer) { const rootContainerMain = document.getElementById('video-js-root-main');
const root = createRoot(rootContainer); if (rootContainerMain) {
root.render( const rootMain = createRoot(rootContainerMain);
rootMain.render(
<StrictMode> <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> </StrictMode>
); );
} }