mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-10-06 22:32:41 +07:00
Yiannis Christodoulou
826 lines
36 KiB
React
826 lines
36 KiB
React
import React, { useEffect, useRef, useState, useMemo } from 'react';
|
|
import videojs from 'video.js';
|
|
import 'video.js/dist/video-js.css';
|
|
|
|
// Import the separated components
|
|
import EndScreenOverlay from '../overlays/EndScreenOverlay';
|
|
import ChapterMarkers from '../markers/ChapterMarkers';
|
|
import NextVideoButton from '../controls/NextVideoButton';
|
|
import CustomRemainingTime from '../controls/CustomRemainingTime';
|
|
|
|
function VideoJSPlayer() {
|
|
const videoRef = useRef(null);
|
|
const playerRef = useRef(null); // Track the player instance
|
|
|
|
// Safely access window.MEDIA_DATA with fallback using useMemo
|
|
const mediaData = useMemo(
|
|
() =>
|
|
typeof window !== 'undefined' && window.MEDIA_DATA
|
|
? window.MEDIA_DATA
|
|
: {
|
|
data: {},
|
|
siteUrl: '',
|
|
hasNextLink: true,
|
|
},
|
|
[]
|
|
);
|
|
|
|
// Define chapters as JSON object
|
|
// Note: The sample-chapters.vtt file is no longer needed as chapters are now loaded from this JSON
|
|
const chaptersData = [
|
|
{ startTime: 0, endTime: 5, text: 'Start111' },
|
|
{ startTime: 5, endTime: 10, text: 'Introduction - EuroHPC' },
|
|
{ startTime: 10, endTime: 15, text: 'Planning - EuroHPC' },
|
|
{ startTime: 15, endTime: 20, text: 'Parcel Discounts - EuroHPC' },
|
|
{ startTime: 20, endTime: 25, text: 'Class Studies - EuroHPC' },
|
|
{ startTime: 25, endTime: 30, text: 'Sustainability - EuroHPC' },
|
|
{ startTime: 30, endTime: 35, text: 'Funding and Finance - EuroHPC' },
|
|
{ startTime: 35, endTime: 40, text: 'Virtual HPC Academy - EuroHPC' },
|
|
{ startTime: 40, endTime: 45, text: 'Wrapping up - EuroHPC' },
|
|
];
|
|
|
|
// Get video data from mediaData
|
|
const currentVideo = useMemo(
|
|
() => ({
|
|
id: mediaData.data?.friendly_token || 'default-video',
|
|
title: mediaData.data?.title || 'Video',
|
|
poster: mediaData.siteUrl + mediaData.data?.poster_url || '',
|
|
sources: mediaData.data?.original_media_url
|
|
? [
|
|
{
|
|
src: mediaData.siteUrl + mediaData.data.original_media_url,
|
|
type: 'video/mp4',
|
|
},
|
|
]
|
|
: [
|
|
{
|
|
src: '/videos/sample-video.mp4',
|
|
type: 'video/mp4',
|
|
},
|
|
],
|
|
}),
|
|
[mediaData]
|
|
);
|
|
|
|
// Mock related videos data (would come from API)
|
|
const [relatedVideos] = useState([
|
|
{
|
|
id: 'Otbc37Yj4',
|
|
title: 'Amazing Ocean Depths',
|
|
author: 'Marine Explorer',
|
|
views: '2.1M views',
|
|
thumbnail: 'https://picsum.photos/320/180?random=1',
|
|
category: 'nature',
|
|
},
|
|
{
|
|
id: 'Kt9m2Pv8x',
|
|
title: 'Deep Sea Creatures',
|
|
author: 'Aquatic Life',
|
|
views: '854K views',
|
|
thumbnail: 'https://picsum.photos/320/180?random=2',
|
|
category: 'nature',
|
|
},
|
|
{
|
|
id: 'Ln5q8Bw3r',
|
|
title: 'Coral Reef Paradise',
|
|
author: 'Ocean Films',
|
|
views: '1.7M views',
|
|
thumbnail: 'https://picsum.photos/320/180?random=3',
|
|
category: 'nature',
|
|
},
|
|
{
|
|
id: 'Mz4x7Cy9p',
|
|
title: 'Underwater Adventure',
|
|
author: 'Sea Documentaries',
|
|
views: '3.2M views',
|
|
thumbnail: 'https://picsum.photos/320/180?random=4',
|
|
category: 'nature',
|
|
},
|
|
{
|
|
id: 'Nx8v2Fk6w',
|
|
title: 'Marine Wildlife',
|
|
author: 'Nature Plus',
|
|
views: '967K views',
|
|
thumbnail: 'https://picsum.photos/320/180?random=5',
|
|
category: 'nature',
|
|
},
|
|
{
|
|
id: 'Py7t4Mn1q',
|
|
title: 'Ocean Mysteries',
|
|
author: 'Discovery Zone',
|
|
views: '1.4M views',
|
|
thumbnail: 'https://picsum.photos/320/180?random=6',
|
|
category: 'nature',
|
|
},
|
|
{
|
|
id: 'Qw5e8Rt2n',
|
|
title: 'Whales and Dolphins',
|
|
author: 'Ocean Planet',
|
|
views: '2.8M views',
|
|
thumbnail: 'https://picsum.photos/320/180?random=7',
|
|
category: 'nature',
|
|
},
|
|
{
|
|
id: 'Uv3k9Lp7m',
|
|
title: 'Tropical Fish Paradise',
|
|
author: 'Aquatic World',
|
|
views: '1.2M views',
|
|
thumbnail: 'https://picsum.photos/320/180?random=8',
|
|
category: 'nature',
|
|
},
|
|
{
|
|
id: 'Zx6c4Mn8b',
|
|
title: 'Deep Ocean Exploration',
|
|
author: 'Marine Science',
|
|
views: '3.7M views',
|
|
thumbnail: 'https://picsum.photos/320/180?random=9',
|
|
category: 'nature',
|
|
},
|
|
]);
|
|
|
|
// Function to navigate to next video
|
|
const goToNextVideo = () => {
|
|
console.log('Next video functionality disabled for single video mode');
|
|
|
|
if (mediaData.onClickNextCallback && typeof mediaData.onClickNextCallback === 'function') {
|
|
mediaData.onClickNextCallback();
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
// Only initialize if we don't already have a player and element exists
|
|
if (videoRef.current && !playerRef.current) {
|
|
// Check if element is already a Video.js player
|
|
if (videoRef.current.player) {
|
|
// console.log('Video.js already initialized on this element');
|
|
return;
|
|
}
|
|
|
|
const timer = setTimeout(() => {
|
|
// Double-check that we still don't have a player and element exists
|
|
if (!playerRef.current && videoRef.current && !videoRef.current.player) {
|
|
playerRef.current = videojs(videoRef.current, {
|
|
// ===== STANDARD <video> ELEMENT OPTIONS =====
|
|
|
|
// Controls whether player has user-interactive controls
|
|
controls: true,
|
|
|
|
// Player dimensions - removed for responsive design
|
|
|
|
// Autoplay behavior: false, true, 'muted', 'play', 'any'
|
|
autoplay: true,
|
|
|
|
// Start video over when it ends
|
|
loop: false,
|
|
|
|
// Start video muted
|
|
muted: false,
|
|
|
|
// Poster image URL displayed before video starts
|
|
poster: currentVideo.poster,
|
|
|
|
// Preload behavior: 'auto', 'metadata', 'none'
|
|
preload: 'auto',
|
|
|
|
// Video sources from current video
|
|
sources: currentVideo.sources,
|
|
|
|
// ===== VIDEO.JS-SPECIFIC OPTIONS =====
|
|
|
|
// Aspect ratio for fluid mode (e.g., '16:9', '4:3')
|
|
aspectRatio: '16:9',
|
|
|
|
// Hide all components except control bar for audio-only mode
|
|
audioOnlyMode: false,
|
|
|
|
// Display poster persistently for audio poster mode
|
|
audioPosterMode: false,
|
|
|
|
// Prevent autoSetup for elements with data-setup attribute
|
|
autoSetup: undefined,
|
|
|
|
// Custom breakpoints for responsive design
|
|
breakpoints: {
|
|
tiny: 210,
|
|
xsmall: 320,
|
|
small: 425,
|
|
medium: 768,
|
|
large: 1440,
|
|
xlarge: 2560,
|
|
huge: 2561,
|
|
},
|
|
|
|
// Disable picture-in-picture mode
|
|
disablePictureInPicture: false,
|
|
|
|
// Enable document picture-in-picture API
|
|
enableDocumentPictureInPicture: false,
|
|
|
|
// Enable smooth seeking experience
|
|
enableSmoothSeeking: false,
|
|
|
|
// Use experimental SVG icons instead of font icons
|
|
experimentalSvgIcons: false,
|
|
|
|
// Make player scale to fit container
|
|
fluid: true,
|
|
|
|
// Fullscreen options
|
|
fullscreen: {
|
|
options: {
|
|
navigationUI: 'hide',
|
|
},
|
|
},
|
|
|
|
// Player element ID
|
|
id: undefined,
|
|
|
|
// Milliseconds of inactivity before user considered inactive (0 = never)
|
|
inactivityTimeout: 2000,
|
|
|
|
// Language code for player (e.g., 'en', 'es', 'fr')
|
|
language: 'en',
|
|
|
|
// Custom language definitions
|
|
languages: {},
|
|
|
|
// Enable live UI with progress bar and live edge button
|
|
liveui: false,
|
|
|
|
// Live tracker options
|
|
liveTracker: {
|
|
trackingThreshold: 20, // Seconds threshold for showing live UI
|
|
liveTolerance: 15, // Seconds tolerance for being "live"
|
|
},
|
|
|
|
// Force native controls for touch devices
|
|
nativeControlsForTouch: false,
|
|
|
|
// Normalize autoplay behavior
|
|
normalizeAutoplay: false,
|
|
|
|
// Custom message when media cannot be played
|
|
notSupportedMessage: undefined,
|
|
|
|
// Prevent title attributes on UI elements for better accessibility
|
|
noUITitleAttributes: false,
|
|
|
|
// Array of playback speed options (e.g., [0.5, 1, 1.5, 2])
|
|
playbackRates: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
|
|
|
|
// Prefer non-fullscreen playback on mobile
|
|
playsinline: true,
|
|
|
|
// Plugin initialization options
|
|
plugins: {},
|
|
|
|
// Control poster image display
|
|
posterImage: true,
|
|
|
|
// Prefer full window over fullscreen on some devices
|
|
preferFullWindow: false,
|
|
|
|
// Enable responsive player based on breakpoints
|
|
responsive: true,
|
|
|
|
// Restore element when player is disposed
|
|
restoreEl: false,
|
|
|
|
// Suppress "not supported" error until user interaction
|
|
suppressNotSupportedError: false,
|
|
|
|
// Allow techs to override poster
|
|
techCanOverridePoster: false,
|
|
|
|
// Order of preferred playback technologies
|
|
techOrder: ['html5'],
|
|
|
|
// User interaction options
|
|
userActions: {
|
|
// Enable/disable or customize click behavior
|
|
click: true,
|
|
|
|
// Enable/disable or customize double-click behavior (fullscreen toggle)
|
|
doubleClick: true,
|
|
|
|
// Hotkey configuration
|
|
hotkeys: {
|
|
// Function to override fullscreen key (default: 'f')
|
|
fullscreenKey: function (event) {
|
|
return event.which === 70; // 'f' key
|
|
},
|
|
|
|
// Function to override mute key (default: 'm')
|
|
muteKey: function (event) {
|
|
return event.which === 77; // 'm' key
|
|
},
|
|
|
|
// Function to override play/pause key (default: 'k' and Space)
|
|
playPauseKey: function (event) {
|
|
return event.which === 75 || event.which === 32; // 'k' or Space
|
|
},
|
|
},
|
|
},
|
|
|
|
// URL to vtt.js for WebVTT support
|
|
'vtt.js': undefined,
|
|
|
|
// Spatial navigation for smart TV/remote control navigation
|
|
spatialNavigation: {
|
|
enabled: false,
|
|
horizontalSeek: false,
|
|
},
|
|
|
|
// ===== CONTROL BAR OPTIONS =====
|
|
controlBar: {
|
|
progressControl: {
|
|
seekBar: {
|
|
timeTooltip: {
|
|
// Customize TimeTooltip behavior
|
|
displayNegative: false, // Don't show negative time
|
|
},
|
|
},
|
|
},
|
|
// Remaining time display configuration
|
|
remainingTimeDisplay: false,
|
|
/* remainingTimeDisplay: {
|
|
displayNegative: true,
|
|
}, */
|
|
|
|
// Volume panel configuration
|
|
volumePanel: {
|
|
inline: true, // Display volume control inline
|
|
vertical: false, // Use horizontal volume slider
|
|
},
|
|
|
|
// Fullscreen toggle button
|
|
fullscreenToggle: true,
|
|
|
|
// Picture-in-picture toggle button
|
|
pictureInPictureToggle: true,
|
|
|
|
// Playback rate menu button
|
|
playbackRateMenuButton: true,
|
|
|
|
// Descriptions button
|
|
descriptionsButton: true,
|
|
|
|
// Subtitles button
|
|
subtitlesButton: true,
|
|
|
|
// Captions button (disabled to avoid duplicate)
|
|
captionsButton: false,
|
|
|
|
// Audio track button
|
|
audioTrackButton: true,
|
|
|
|
// Live display
|
|
liveDisplay: true,
|
|
|
|
// Seek to live button
|
|
seekToLive: true,
|
|
|
|
// Custom control spacer
|
|
customControlSpacer: true,
|
|
|
|
// Chapters menu button (moved after subtitles/captions)
|
|
chaptersButton: true,
|
|
},
|
|
|
|
// ===== HTML5 TECH OPTIONS =====
|
|
html5: {
|
|
// Force native controls for touch devices
|
|
nativeControlsForTouch: false,
|
|
|
|
// Use native audio tracks instead of emulated
|
|
nativeAudioTracks: true,
|
|
|
|
// Use native text tracks instead of emulated
|
|
nativeTextTracks: true,
|
|
|
|
// Use native video tracks instead of emulated
|
|
nativeVideoTracks: true,
|
|
|
|
// Preload text tracks
|
|
preloadTextTracks: true,
|
|
},
|
|
|
|
// ===== COMPONENT CONFIGURATION =====
|
|
children: [
|
|
'mediaLoader',
|
|
'posterImage',
|
|
'textTrackDisplay',
|
|
'loadingSpinner',
|
|
'bigPlayButton',
|
|
'liveTracker',
|
|
'controlBar',
|
|
'errorDisplay',
|
|
'textTrackSettings',
|
|
'resizeManager',
|
|
],
|
|
});
|
|
|
|
// Event listeners
|
|
playerRef.current.on('ready', () => {
|
|
// Auto-play video when navigating from next button
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const hasVideoParam = urlParams.get('m');
|
|
if (hasVideoParam) {
|
|
// Small delay to ensure everything is loaded
|
|
setTimeout(() => {
|
|
if (playerRef.current && !playerRef.current.isDisposed()) {
|
|
playerRef.current.play().catch((error) => {
|
|
console.log('Autoplay was prevented:', error);
|
|
});
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
// Add English subtitle track after player is ready
|
|
playerRef.current.addRemoteTextTrack(
|
|
{
|
|
kind: 'subtitles',
|
|
src: '/sample-subtitles.vtt',
|
|
srclang: 'en',
|
|
label: 'English Subtitles',
|
|
default: false,
|
|
},
|
|
false
|
|
);
|
|
|
|
// Add Greek subtitle track
|
|
playerRef.current.addRemoteTextTrack(
|
|
{
|
|
kind: 'subtitles',
|
|
src: '/sample-subtitles-greek.vtt',
|
|
srclang: 'el',
|
|
label: 'Greek Subtitles (Ελληνικά)',
|
|
default: false,
|
|
},
|
|
false
|
|
);
|
|
|
|
// Create a text track for chapters programmatically
|
|
const chaptersTrack = playerRef.current.addTextTrack('chapters', 'Chapters', 'en');
|
|
|
|
// Add cues to the chapters track
|
|
chaptersData.forEach((chapter) => {
|
|
const cue = new (window.VTTCue || window.TextTrackCue)(
|
|
chapter.startTime,
|
|
chapter.endTime,
|
|
chapter.text
|
|
);
|
|
chaptersTrack.addCue(cue);
|
|
});
|
|
|
|
// Force chapter markers update after chapters are loaded
|
|
setTimeout(() => {
|
|
const progressControl = playerRef.current
|
|
.getChild('controlBar')
|
|
.getChild('progressControl');
|
|
if (progressControl) {
|
|
const seekBar = progressControl.getChild('seekBar');
|
|
if (seekBar) {
|
|
const markers = seekBar.getChild('ChapterMarkers');
|
|
if (markers && markers.updateChapterMarkers) {
|
|
markers.updateChapterMarkers();
|
|
}
|
|
}
|
|
}
|
|
}, 500);
|
|
|
|
console.log('Subtitles loaded but disabled by default - use CC button to enable');
|
|
});
|
|
|
|
// Add Next Video button to control bar and reorder chapters button
|
|
playerRef.current.ready(() => {
|
|
const controlBar = playerRef.current.getChild('controlBar');
|
|
const playToggle = controlBar.getChild('playToggle');
|
|
const currentTimeDisplay = controlBar.getChild('currentTimeDisplay');
|
|
|
|
// BEGIN: Implement custom time display component
|
|
const customRemainingTime = new CustomRemainingTime(playerRef.current, {
|
|
displayNegative: false,
|
|
customPrefix: '',
|
|
customSuffix: '',
|
|
});
|
|
|
|
// Insert it in the desired position (e.g., after current time display)
|
|
if (currentTimeDisplay) {
|
|
const currentTimeIndex = controlBar.children().indexOf(currentTimeDisplay);
|
|
controlBar.addChild(customRemainingTime, {}, currentTimeIndex + 1);
|
|
} else {
|
|
controlBar.addChild(customRemainingTime, {}, 2);
|
|
}
|
|
// END: Implement custom time display component
|
|
|
|
// BEGIN: Implement custom next video button
|
|
if (mediaData.hasNextLink) {
|
|
const nextVideoButton = new NextVideoButton(playerRef.current);
|
|
const playToggleIndex = controlBar.children().indexOf(playToggle); // Insert it after play button
|
|
controlBar.addChild(nextVideoButton, {}, playToggleIndex + 1);
|
|
}
|
|
// END: Implement custom next video button
|
|
|
|
// Remove duplicate captions button and move chapters to end
|
|
const cleanupControls = () => {
|
|
// Log all current children for debugging
|
|
const allChildren = controlBar.children();
|
|
|
|
// Try to find and remove captions/subs-caps button (but keep subtitles)
|
|
const possibleCaptionButtons = ['captionsButton', 'subsCapsButton'];
|
|
possibleCaptionButtons.forEach((buttonName) => {
|
|
const button = controlBar.getChild(buttonName);
|
|
if (button) {
|
|
try {
|
|
controlBar.removeChild(button);
|
|
console.log(`✓ Removed ${buttonName}`);
|
|
} catch (e) {
|
|
console.log(`✗ Failed to remove ${buttonName}:`, e);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Alternative: hide buttons we can't remove
|
|
allChildren.forEach((child, index) => {
|
|
const name = (child.name_ || child.constructor.name || '').toLowerCase();
|
|
if (name.includes('caption') && !name.includes('subtitle')) {
|
|
child.hide();
|
|
console.log(`✓ Hidden button at index ${index}: ${name}`);
|
|
}
|
|
});
|
|
|
|
// Move chapters button to the very end
|
|
const chaptersButton = controlBar.getChild('chaptersButton');
|
|
if (chaptersButton) {
|
|
try {
|
|
controlBar.removeChild(chaptersButton);
|
|
controlBar.addChild(chaptersButton);
|
|
console.log('✓ Chapters button moved to last position');
|
|
} catch (e) {
|
|
console.log('✗ Failed to move chapters button:', e);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Try multiple times with different delays
|
|
setTimeout(cleanupControls, 200);
|
|
setTimeout(cleanupControls, 500);
|
|
setTimeout(cleanupControls, 1000);
|
|
|
|
// Make menus clickable instead of hover-only
|
|
setTimeout(() => {
|
|
const setupClickableMenus = () => {
|
|
// Find all menu buttons (chapters, subtitles, etc.)
|
|
const menuButtons = ['chaptersButton', 'subtitlesButton', 'playbackRateMenuButton'];
|
|
|
|
menuButtons.forEach((buttonName) => {
|
|
const button = controlBar.getChild(buttonName);
|
|
if (button && button.menuButton_) {
|
|
// Override the menu button behavior
|
|
const menuButton = button.menuButton_;
|
|
|
|
// Disable hover events
|
|
menuButton.off('mouseenter');
|
|
menuButton.off('mouseleave');
|
|
|
|
// Add click-to-toggle behavior
|
|
menuButton.on('click', function () {
|
|
if (this.menu.hasClass('vjs-lock-showing')) {
|
|
this.menu.removeClass('vjs-lock-showing');
|
|
this.menu.hide();
|
|
} else {
|
|
this.menu.addClass('vjs-lock-showing');
|
|
this.menu.show();
|
|
}
|
|
});
|
|
|
|
console.log(`✓ Made ${buttonName} clickable`);
|
|
} else if (button) {
|
|
// For buttons without menuButton_ property
|
|
const buttonEl = button.el();
|
|
if (buttonEl) {
|
|
// Add click handler to show/hide menu
|
|
buttonEl.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const menu = buttonEl.querySelector('.vjs-menu');
|
|
if (menu) {
|
|
if (menu.style.display === 'block') {
|
|
menu.style.display = 'none';
|
|
} else {
|
|
// Hide other menus first
|
|
document.querySelectorAll('.vjs-menu').forEach((m) => {
|
|
if (m !== menu) m.style.display = 'none';
|
|
});
|
|
menu.style.display = 'block';
|
|
}
|
|
}
|
|
});
|
|
|
|
console.log(`✓ Added click handler to ${buttonName}`);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
setupClickableMenus();
|
|
}, 1500);
|
|
|
|
// Add chapter markers to progress control
|
|
const progressControl = controlBar.getChild('progressControl');
|
|
if (progressControl) {
|
|
const progressHolder = progressControl.getChild('seekBar');
|
|
if (progressHolder) {
|
|
const chapterMarkers = new ChapterMarkers(playerRef.current);
|
|
progressHolder.addChild(chapterMarkers);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Listen for next video event
|
|
playerRef.current.on('nextVideo', () => {
|
|
console.log('Next video requested');
|
|
goToNextVideo();
|
|
});
|
|
|
|
playerRef.current.on('play', () => {
|
|
console.log('Video started playing');
|
|
});
|
|
|
|
playerRef.current.on('pause', () => {
|
|
console.log('Video paused');
|
|
});
|
|
|
|
// Store reference to end screen for cleanup
|
|
let endScreen = null;
|
|
|
|
playerRef.current.on('ended', () => {
|
|
console.log('Video ended');
|
|
console.log('Available relatedVideos:', relatedVideos);
|
|
|
|
// Keep controls active after video ends
|
|
setTimeout(() => {
|
|
if (playerRef.current && !playerRef.current.isDisposed()) {
|
|
// Remove vjs-ended class if it disables controls
|
|
const playerEl = playerRef.current.el();
|
|
if (playerEl) {
|
|
// Keep the visual ended state but ensure controls work
|
|
const controlBar = playerRef.current.getChild('controlBar');
|
|
if (controlBar) {
|
|
controlBar.show();
|
|
controlBar.el().style.opacity = '1';
|
|
controlBar.el().style.pointerEvents = 'auto';
|
|
}
|
|
}
|
|
}
|
|
}, 50);
|
|
|
|
// Prevent creating multiple end screens
|
|
if (endScreen) {
|
|
console.log('End screen already exists, removing previous one');
|
|
playerRef.current.removeChild(endScreen);
|
|
endScreen = null;
|
|
}
|
|
|
|
// Show end screen with related videos
|
|
endScreen = new EndScreenOverlay(playerRef.current, {
|
|
relatedVideos: relatedVideos,
|
|
});
|
|
|
|
// Also store the data directly on the component as backup
|
|
endScreen.relatedVideos = relatedVideos;
|
|
|
|
playerRef.current.addChild(endScreen);
|
|
endScreen.show();
|
|
});
|
|
|
|
// Hide end screen when user wants to replay
|
|
playerRef.current.on('play', () => {
|
|
if (endScreen) {
|
|
endScreen.hide();
|
|
}
|
|
});
|
|
|
|
// Hide end screen when user seeks
|
|
playerRef.current.on('seeking', () => {
|
|
if (endScreen) {
|
|
endScreen.hide();
|
|
}
|
|
});
|
|
|
|
// Handle replay button functionality
|
|
playerRef.current.on('replay', () => {
|
|
if (endScreen) {
|
|
endScreen.hide();
|
|
}
|
|
playerRef.current.currentTime(0);
|
|
playerRef.current.play();
|
|
});
|
|
|
|
playerRef.current.on('error', (error) => {
|
|
console.error('Video.js error:', error);
|
|
});
|
|
|
|
playerRef.current.on('fullscreenchange', () => {
|
|
console.log('Fullscreen changed:', playerRef.current.isFullscreen());
|
|
});
|
|
|
|
playerRef.current.on('volumechange', () => {
|
|
console.log('Volume changed:', playerRef.current.volume(), 'Muted:', playerRef.current.muted());
|
|
});
|
|
|
|
playerRef.current.on('ratechange', () => {
|
|
console.log('Playback rate changed:', playerRef.current.playbackRate());
|
|
});
|
|
|
|
playerRef.current.on('texttrackchange', () => {
|
|
console.log('Text track changed');
|
|
const textTracks = playerRef.current.textTracks();
|
|
for (let i = 0; i < textTracks.length; i++) {
|
|
console.log(
|
|
'Track',
|
|
i,
|
|
':',
|
|
textTracks[i].kind,
|
|
textTracks[i].label,
|
|
'Mode:',
|
|
textTracks[i].mode
|
|
);
|
|
}
|
|
});
|
|
|
|
// Focus the player element so keyboard controls work
|
|
// This ensures spacebar can pause/play the video
|
|
playerRef.current.ready(() => {
|
|
// Focus the player element
|
|
if (playerRef.current.el()) {
|
|
playerRef.current.el().focus();
|
|
console.log('Video player focused for keyboard controls');
|
|
}
|
|
|
|
// Start playing the video immediately if autoplay is enabled
|
|
if (playerRef.current.autoplay()) {
|
|
playerRef.current.play().catch((error) => {
|
|
console.log('Autoplay prevented by browser:', error);
|
|
// If autoplay fails, we can still focus the element
|
|
// so the user can manually start and use keyboard controls
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}, 0);
|
|
|
|
return () => {
|
|
clearTimeout(timer);
|
|
};
|
|
}
|
|
|
|
// Cleanup function
|
|
return () => {
|
|
if (playerRef.current && !playerRef.current.isDisposed()) {
|
|
playerRef.current.dispose();
|
|
playerRef.current = null;
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
// Additional effect to ensure video gets focus for keyboard controls
|
|
useEffect(() => {
|
|
const focusVideo = () => {
|
|
if (playerRef.current && playerRef.current.el()) {
|
|
playerRef.current.el().focus();
|
|
console.log('Video element focused for keyboard controls');
|
|
}
|
|
};
|
|
|
|
// Focus when the page becomes visible or gains focus
|
|
const handleVisibilityChange = () => {
|
|
if (!document.hidden) {
|
|
setTimeout(focusVideo, 100);
|
|
}
|
|
};
|
|
|
|
const handleWindowFocus = () => {
|
|
setTimeout(focusVideo, 100);
|
|
};
|
|
|
|
// Add event listeners
|
|
document.addEventListener('visibilitychange', handleVisibilityChange);
|
|
window.addEventListener('focus', handleWindowFocus);
|
|
|
|
// Initial focus attempt
|
|
setTimeout(focusVideo, 500);
|
|
|
|
return () => {
|
|
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
|
window.removeEventListener('focus', handleWindowFocus);
|
|
};
|
|
}, []);
|
|
|
|
return <video ref={videoRef} className="video-js vjs-default-skin" tabIndex="0" />;
|
|
}
|
|
|
|
export default VideoJSPlayer;
|