CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2026-01-20 15:22:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve focus and scroll behavior for embedded video player

Browse Source 
Prevent automatic focus on the video element when in embed mode to avoid unexpected behavior. Update scroll logic to only scroll the video into view if not in an iframe, or if explicitly requested via a URL parameter, improving user experience for embedded players.
This commit is contained in:
Yiannis Christodoulou
2026-01-09 10:54:45 +02:00
parent 30e346b3ff
commit cdfcf4dc54
2 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2312,7 +2312,10 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
// 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');
if (!isEmbedPlayer) {
videoElement.focus(); videoElement.focus();
}
// Add context menu (right-click) handler to the player wrapper and video element // Add context menu (right-click) handler to the player wrapper and video element
// Attach to player wrapper (this catches all clicks on the player) // Attach to player wrapper (this catches all clicks on the player)

6
frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx
View File

@@ -186,12 +186,18 @@ const VideoJSEmbed = ({
// Scroll to the video player with smooth behavior // Scroll to the video player with smooth behavior
const videoElement = document.querySelector(inEmbedRef.current ? '#video-embed' : '#video-main'); const videoElement = document.querySelector(inEmbedRef.current ? '#video-embed' : '#video-main');
if (videoElement) { if (videoElement) {
const urlScroll = getUrlParameter('scroll');
const isIframe = window.parent !== window;
// Only scroll if not in an iframe, OR if explicitly requested via scroll=1 parameter
if (!isIframe || urlScroll === '1' || urlScroll === 'true') {
videoElement.scrollIntoView({ videoElement.scrollIntoView({
behavior: 'smooth', behavior: 'smooth',
block: 'center', block: 'center',
inline: 'nearest' inline: 'nearest'
}); });
} }
}
} else { } else {
console.warn('VideoJS player not found for timestamp navigation'); console.warn('VideoJS player not found for timestamp navigation');
} }