diff --git a/frontend-tools/video-js/index.html b/frontend-tools/video-js/index.html index 12cf843c..e1203aae 100644 --- a/frontend-tools/video-js/index.html +++ b/frontend-tools/video-js/index.html @@ -7,7 +7,9 @@ VideoJS -
+
+
+ diff --git a/frontend-tools/video-js/src/VideoJS.css b/frontend-tools/video-js/src/VideoJS.css index bbe59ff8..edd1dd7f 100644 --- a/frontend-tools/video-js/src/VideoJS.css +++ b/frontend-tools/video-js/src/VideoJS.css @@ -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; diff --git a/frontend-tools/video-js/src/VideoJS.jsx b/frontend-tools/video-js/src/VideoJS.jsx index 8f462ea3..acdebfb9 100644 --- a/frontend-tools/video-js/src/VideoJS.jsx +++ b/frontend-tools/video-js/src/VideoJS.jsx @@ -1,8 +1,8 @@ import React from 'react'; import { VideoJSPlayer } from './components'; -function VideoJS() { - return ; +function VideoJS({ videoId = 'default-video', ...props }) { + return ; } export default VideoJS; diff --git a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx index 6025d458..4d60b462 100644 --- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx +++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx @@ -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