CDN/mediacms
3
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-10-06 22:32:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

fix: Show avatar and title when video is paused/stopped in embed mode

Browse Source
This commit is contained in:
Yiannis Christodoulou
2025-09-29 19:39:59 +03:00
parent 5b691f3456
commit 7c249dd1ef
5 changed files with 28 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js
+27 -35
View File
@@ -183,51 +183,43 @@ class EmbedInfoOverlay extends Component {
const player = this.player();
const overlay = this.el();
// Check if device is touch-enabled
const isTouchDevice =
'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
// Show/hide with controls
player.on('useractive', () => {
overlay.style.opacity = '1';
overlay.style.visibility = 'visible';
});
player.on('userinactive', () => {
// On touch devices, keep overlay visible longer or don't hide it as aggressively
if (isTouchDevice) {
// Keep visible on touch devices when user inactive
overlay.style.opacity = '0.8';
// Function to show overlay only when video is paused/stopped
const updateOverlayVisibility = () => {
if (player.paused() || player.ended()) {
// Show overlay when paused or ended
overlay.style.opacity = '1';
overlay.style.visibility = 'visible';
} else {
// Hide overlay when playing
overlay.style.opacity = '0';
overlay.style.visibility = 'hidden';
}
});
};
// Always show when paused
// Show overlay when video is paused
player.on('pause', () => {
overlay.style.opacity = '1';
overlay.style.visibility = 'visible';
updateOverlayVisibility();
});
// Hide during fullscreen controls fade
player.on('fullscreenchange', () => {
setTimeout(() => {
if (player.isFullscreen()) {
if (player.userActive()) {
overlay.style.opacity = '1';
overlay.style.visibility = 'visible';
} else {
overlay.style.opacity = '0';
overlay.style.visibility = 'hidden';
}
} else {
overlay.style.opacity = '1';
overlay.style.visibility = 'visible';
}
}, 100);
// Hide overlay when video starts playing
player.on('play', () => {
updateOverlayVisibility();
});
// Show overlay when video ends
player.on('ended', () => {
updateOverlayVisibility();
});
// Show overlay when player is ready (initially paused)
player.on('ready', () => {
updateOverlayVisibility();
});
// Initial state check
setTimeout(() => {
updateOverlayVisibility();
}, 100);
}
// Method to update overlay content if needed
frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+1 -1
View File
@@ -43,7 +43,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
title: 'Modi tempora est quaerat numquam',
author_name: 'Markos Gogoulos',
author_profile: '/user/markos/',
author_thumbnail: '/media/userlogos/2024/10/02/markos.jpeg',
author_thumbnail: '/media/userlogos/user.jpg',
url: 'https://demo.mediacms.io/view?m=zK2nirNLC',
poster_url:
'/media/original/thumbnails/user/thorkild/2ca18fadeef8475eae513c12cc0830d3_8hguMHx.19990812hd_1920_1080_30fps.mp4.jpg',