CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-08 16:38:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Show overlay (avatar & title) in embed, when controls are visible or video is paused/stopped

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-30 10:11:54 +03:00
parent d34e8ee5c7
commit d5d1e2496f
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend-tools/video-js/index-embed.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VideoJS</title> <title>VideoJS</title>
</head> </head>
<body> <body style="padding: 0; margin: 0">
<!-- <div id="video-js-root-main"></div> --> <!-- <div id="video-js-root-main"></div> -->
<div id="page-embed"> <div id="page-embed">
<div id="video-js-root-embed" class="video-js-root-embed"></div> <div id="video-js-root-embed" class="video-js-root-embed"></div>

19
frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js
View File

@ -184,14 +184,14 @@ class EmbedInfoOverlay extends Component {
const player = this.player(); const player = this.player();
const overlay = this.el(); const overlay = this.el();
// Function to show overlay only when video is paused/stopped // Function to show overlay when controls are visible or video is paused/stopped
const updateOverlayVisibility = () => { const updateOverlayVisibility = () => {
if (player.paused() || player.ended()) { if (player.paused() || player.ended() || player.userActive()) {
// Show overlay when paused or ended // Show overlay when paused, ended, or when user is active (controls visible)
overlay.style.opacity = '1'; overlay.style.opacity = '1';
overlay.style.visibility = 'visible'; overlay.style.visibility = 'visible';
} else { } else {
// Hide overlay when playing // Hide overlay when playing and user is inactive (controls hidden)
overlay.style.opacity = '0'; overlay.style.opacity = '0';
overlay.style.visibility = 'hidden'; overlay.style.visibility = 'hidden';
} }
@ -202,7 +202,7 @@ class EmbedInfoOverlay extends Component {
updateOverlayVisibility(); updateOverlayVisibility();
}); });
// Hide overlay when video starts playing // Update overlay visibility when video starts/stops playing
player.on('play', () => { player.on('play', () => {
updateOverlayVisibility(); updateOverlayVisibility();
}); });
@ -217,6 +217,15 @@ class EmbedInfoOverlay extends Component {
updateOverlayVisibility(); updateOverlayVisibility();
}); });
// Show/hide overlay based on user activity (controls visibility)
player.on('useractive', () => {
updateOverlayVisibility();
});
player.on('userinactive', () => {
updateOverlayVisibility();
});
// Initial state check // Initial state check
setTimeout(() => { setTimeout(() => {
updateOverlayVisibility(); updateOverlayVisibility();