Remove VideoJSNew and consolidate player components

Deleted VideoJSNew.jsx and removed VideoJSPlayerNew from exports. Merged VideoJSPlayerNew.css into VideoJSPlayer.css and updated VideoJSPlayer.jsx with new features, configuration, and sample data. Refactored and enhanced VideoJSPlayer to be the main player component, updating references and improving tooltip, autoplay, and control bar logic.
This commit is contained in:
Yiannis Christodoulou 2025-10-06 12:41:54 +03:00
parent afaab453e1
commit a29d94dcbd
6 changed files with 3071 additions and 3101 deletions

View File

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

View File

@ -1,6 +1,5 @@
// Export all Video.js components // Export all Video.js components
export { default as VideoJSPlayer } from './video-player/VideoJSPlayer'; export { default as VideoJSPlayer } from './video-player/VideoJSPlayer';
export { default as VideoJSPlayerNew } from './video-player/VideoJSPlayerNew';
export { default as EndScreenOverlay } from './overlays/EndScreenOverlay'; export { default as EndScreenOverlay } from './overlays/EndScreenOverlay';
export { default as AutoplayCountdownOverlay } from './overlays/AutoplayCountdownOverlay'; export { default as AutoplayCountdownOverlay } from './overlays/AutoplayCountdownOverlay';
export { default as ChapterMarkers } from './markers/ChapterMarkers'; export { default as ChapterMarkers } from './markers/ChapterMarkers';

View File

@ -2,39 +2,16 @@ import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import VideoJS from './VideoJS.jsx'; import VideoJS from './VideoJS.jsx';
import VideoJSNew from './VideoJSNew.jsx';
// Mount the components when the DOM is ready // Mount the components when the DOM is ready
const mountComponents = () => { const mountComponents = () => {
// Mount main video player
const rootContainerMain = document.getElementById('video-js-root-main-old');
if (rootContainerMain && !rootContainerMain.hasChildNodes()) {
const rootMain = createRoot(rootContainerMain);
rootMain.render(
<StrictMode>
<VideoJS videoId="video-main-old" />
</StrictMode>
);
}
// Mount embed video player
const rootContainerEmbed = document.getElementById('video-js-root-embed-old');
if (rootContainerEmbed && !rootContainerEmbed.hasChildNodes()) {
const rootEmbed = createRoot(rootContainerEmbed);
rootEmbed.render(
<StrictMode>
<VideoJS videoId="video-embed-old" />
</StrictMode>
);
}
// Mount main video player // Mount main video player
const rootContainerMainNew = document.getElementById('video-js-root-main'); const rootContainerMainNew = document.getElementById('video-js-root-main');
if (rootContainerMainNew && !rootContainerMainNew.hasChildNodes()) { if (rootContainerMainNew && !rootContainerMainNew.hasChildNodes()) {
const rootMain = createRoot(rootContainerMainNew); const rootMain = createRoot(rootContainerMainNew);
rootMain.render( rootMain.render(
<StrictMode> <StrictMode>
<VideoJSNew videoId="video-main" /> <VideoJS videoId="video-main" />
</StrictMode> </StrictMode>
); );
} }
@ -45,7 +22,7 @@ const mountComponents = () => {
const rootEmbed = createRoot(rootContainerEmbedNew); const rootEmbed = createRoot(rootContainerEmbedNew);
rootEmbed.render( rootEmbed.render(
<StrictMode> <StrictMode>
<VideoJSNew videoId="video-embed" /> <VideoJS videoId="video-embed" />
</StrictMode> </StrictMode>
); );
} }