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

fix: Fullscreeen left/right/play/pause arrow keys doesn't work

Browse Source 
BUG3. Fullscreeen left / right arrows doesn't work. Even if they work, if i leave the fullscreen and then enter again they are lost.
This commit is contained in:
Yiannis Christodoulou 2025-09-22 22:48:40 +03:00
parent 641ee66e59
commit a89ee7b0e0
3 changed files with 88 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2411,9 +2411,9 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// Store components reference for potential cleanup // Store components reference for potential cleanup
// BEGIN: Add custom arrow key seek functionality // BEGIN: Add comprehensive keyboard event handling
const handleKeyDown = (event) => { const handleAllKeyboardEvents = (event) => {
// Only handle if the player has focus or no input elements are focused // Only handle if no input elements are focused
const activeElement = document.activeElement; const activeElement = document.activeElement;
const isInputFocused = const isInputFocused =
activeElement && activeElement &&
@ -2425,6 +2425,20 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
return; // Don't interfere with input fields return; // Don't interfere with input fields
} }
// Handle space key for play/pause
if (event.code === 'Space' || event.key === ' ') {
event.preventDefault();
if (playerRef.current) {
if (playerRef.current.paused()) {
playerRef.current.play();
} else {
playerRef.current.pause();
}
}
return;
}
// Handle arrow keys for seeking
const seekAmount = 5; // 5 seconds const seekAmount = 5; // 5 seconds
if (event.key === 'ArrowRight' || event.keyCode === 39) { if (event.key === 'ArrowRight' || event.keyCode === 39) {
@ -2450,14 +2464,14 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
}; };
// Add keyboard event listener to the document // Add keyboard event listener to the document
document.addEventListener('keydown', handleKeyDown); document.addEventListener('keydown', handleAllKeyboardEvents);
// Store cleanup function // Store cleanup function for arrow keys
customComponents.current.cleanupKeyboardHandler = () => { customComponents.current.cleanupArrowKeyHandler = () => {
document.removeEventListener('keydown', handleKeyDown); document.removeEventListener('keydown', handleAllKeyboardEvents);
}; };
// END: Add custom arrow key seek functionality // END: Add comprehensive keyboard event handling
}); });
// Listen for next video event // Listen for next video event
@ -2632,48 +2646,40 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
}); });
// Focus the player element so keyboard controls work // Focus the player element so keyboard controls work
// This ensures spacebar can pause/play the video // This ensures keyboard events work properly in both normal and fullscreen modes
playerRef.current.ready(() => { playerRef.current.ready(() => {
// Focus the player element and set up keyboard controls // Focus the player element and set up focus handling
if (playerRef.current.el()) { if (playerRef.current.el()) {
// Make the video element focusable // Make the video element focusable
const videoElement = playerRef.current.el(); const videoElement = playerRef.current.el();
videoElement.setAttribute('tabindex', '0'); videoElement.setAttribute('tabindex', '0');
videoElement.focus(); videoElement.focus();
}
});
// Add custom keyboard event handler for space key // Handle focus when entering/exiting fullscreen to ensure keyboard events work
const handleKeyPress = (event) => { playerRef.current.on('fullscreenchange', () => {
// Only handle space key when video element is focused or no other input is focused setTimeout(() => {
if (event.code === 'Space' || event.key === ' ') { if (playerRef.current && playerRef.current.el()) {
const activeElement = document.activeElement; const videoElement = playerRef.current.el();
const isInputFocused = videoElement.setAttribute('tabindex', '0');
activeElement && videoElement.focus();
(activeElement.tagName === 'INPUT' ||
activeElement.tagName === 'TEXTAREA' ||
activeElement.contentEditable === 'true');
// Only prevent default and control video if no input is focused // In fullscreen mode, ensure the player container has focus
if (!isInputFocused) { if (playerRef.current.isFullscreen()) {
event.preventDefault(); // Focus the fullscreen element to ensure keyboard events are captured
if (playerRef.current) { const fullscreenElement =
if (playerRef.current.paused()) { document.fullscreenElement ||
playerRef.current.play(); document.webkitFullscreenElement ||
} else { document.mozFullScreenElement ||
playerRef.current.pause(); document.msFullscreenElement;
if (fullscreenElement) {
fullscreenElement.setAttribute('tabindex', '0');
fullscreenElement.focus();
} }
} }
} }
} }, 100); // Small delay to ensure fullscreen transition is complete
};
// Add event listener to document for global space key handling
document.addEventListener('keydown', handleKeyPress);
// Store cleanup function
customComponents.current.cleanupKeyboardHandler = () => {
document.removeEventListener('keydown', handleKeyPress);
};
}
}); });
} }
}, 0); }, 0);
@ -2685,9 +2691,9 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// Cleanup function // Cleanup function
return () => { return () => {
// Clean up keyboard event listener if it exists // Clean up keyboard event listeners if they exist
if (customComponents.current && customComponents.current.cleanupKeyboardHandler) { if (customComponents.current && customComponents.current.cleanupArrowKeyHandler) {
customComponents.current.cleanupKeyboardHandler(); customComponents.current.cleanupArrowKeyHandler();
} }
if (playerRef.current && !playerRef.current.isDisposed()) { if (playerRef.current && !playerRef.current.isDisposed()) {

76
static/video_js/video-js.js
View File

File diff suppressed because one or more lines are too long

2
static/video_js/video-js.js.map
View File

File diff suppressed because one or more lines are too long