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

Keep poster visible for audio embeds and update track handling

Browse Source 
Ensures the poster image remains visible during playback for audio files in embed players by updating both JavaScript logic and CSS. Also updates subtitle track handling to set the default track and adjusts Video.js player configuration for better control over native and emulated tracks.
This commit is contained in:
Yiannis Christodoulou 2025-10-17 14:05:38 +03:00
parent 55c701e055
commit 2a12fec89e
2 changed files with 40 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1849,7 +1849,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
src: '/sample-subtitles.vtt',
srclang: 'en',
label: 'English Subtitles',
default: false,
default: true,
},
{
kind: 'subtitles',
@ -1870,7 +1870,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
src: track.src,
srclang: track.srclang,
label: track.label,
default: false,
default: track.default || false,
}))
: [];
@ -2150,16 +2150,17 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
nativeControlsForTouch: PlayerConfig.nativeControlsForTouch,
// Use native audio tracks instead of emulated - disabled for consistency
nativeAudioTracks: true,
nativeAudioTracks: false,
// Use native text tracks instead of emulated - disabled for consistency
nativeTextTracks: true,
// Use Video.js text tracks for full positioning control on mobile
// Native tracks don't allow CSS positioning control
nativeTextTracks: isTouchDevice,
// Use native video tracks instead of emulated - disabled for consistency
nativeVideoTracks: true,
nativeVideoTracks: false,
// Preload text tracks
preloadTextTracks: true,
preloadTextTracks: false,
// Play inline
playsinline: true,
@ -2189,9 +2190,28 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
userPreferences.current.setupAutoSave(playerRef.current);
// Add class for audio files to enable audio-specific styling
console.log('mediaData.media_type', mediaData.data?.media_type);
if (mediaData.data?.media_type === 'audio') {
playerRef.current.addClass('vjs-audio-type');
// For embed players, ensure poster stays visible during playback
if (isEmbedPlayer) {
const ensurePosterVisible = () => {
const posterEl = playerRef.current.el().querySelector('.vjs-poster');
if (posterEl) {
posterEl.style.display = 'block';
posterEl.style.opacity = '1';
posterEl.style.visibility = 'visible';
}
};
// Keep poster visible on all play events
playerRef.current.on('play', ensurePosterVisible);
playerRef.current.on('playing', ensurePosterVisible);
playerRef.current.on('timeupdate', ensurePosterVisible);
// Initial call
setTimeout(ensurePosterVisible, 200);
}
}
// Enable tooltips for all standard VideoJS buttons
@ -3939,7 +3959,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
</p>
{/* Add subtitle tracks */}
{/* {subtitleTracks &&
{subtitleTracks &&
subtitleTracks.map((track, index) => (
<track
key={index}
@ -3950,7 +3970,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
default={track.default}
/>
))}
{/*
<track kind="chapters" src="/sample-chapters.vtt" /> */}
{/* Add chapters track */}
{/* {chaptersData &&

10
frontend-tools/video-js/src/styles/embed.css
View File

@ -18,6 +18,16 @@
background-color: #000 !important;
}
/* Keep poster visible even when playing for audio files */
#page-embed .video-js-root-embed .video-js.vjs-audio-type .vjs-poster,
#page-embed .video-js-root-embed .video-js.vjs-audio-poster-mode .vjs-poster,
#page-embed .video-js-root-embed .video-js.vjs-has-started.vjs-audio-type .vjs-poster,
#page-embed .video-js-root-embed .video-js.vjs-playing.vjs-audio-type .vjs-poster {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Fullscreen video element - maintain aspect ratio */
#page-embed .video-js-root-embed .video-js video {
position: absolute !important;