[mirotalksfu] - fix Video Menu Bar on mobile

هذا الالتزام موجود في:
Miroslav Pejic
2025-09-28 01:02:55 +02:00
الأصل 63dbd1a9e1
التزام 7784889521
7 ملفات معدلة مع 43 إضافات و26 حذوفات

عرض الملف

@@ -64,7 +64,7 @@ dev dependencies: {
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.9.72
* @version 1.9.73
*
*/

4
package-lock.json مولّد
عرض الملف

@@ -1,12 +1,12 @@
{
"name": "mirotalksfu",
"version": "1.9.72",
"version": "1.9.73",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalksfu",
"version": "1.9.72",
"version": "1.9.73",
"license": "AGPL-3.0",
"dependencies": {
"@aws-sdk/client-s3": "^3.896.0",

عرض الملف

@@ -1,6 +1,6 @@
{
"name": "mirotalksfu",
"version": "1.9.72",
"version": "1.9.73",
"description": "WebRTC SFU browser-based video calls",
"main": "Server.js",
"scripts": {

عرض الملف

@@ -153,7 +153,7 @@
/* Mobile floating menubar when appended to body */
.videoMenuBar.mobile-floating {
z-index: 2;
z-index: 1000;
position: fixed;
top: env(safe-area-inset-top, 0px);
left: 0;

عرض الملف

@@ -78,7 +78,7 @@ let BRAND = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: '<strong>WebRTC SFU v1.9.72</strong>',
title: '<strong>WebRTC SFU v1.9.73</strong>',
html: `
<button
id="support-button"

عرض الملف

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.9.72
* @version 1.9.73
*
*/
@@ -5693,7 +5693,7 @@ function showAbout() {
position: 'center',
imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
customClass: { image: 'img-about' },
title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.9.72',
title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.9.73',
html: `
<br />
<div id="about">

عرض الملف

@@ -9,7 +9,7 @@
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.9.72
* @version 1.9.73
*
*/
@@ -2658,12 +2658,14 @@ class RoomClient {
};
if (this.isMobileDevice) {
vb.classList.add('mobile-floating');
document.body.appendChild(vb);
d.addEventListener('mouseleave', hideVideoMenu);
} else {
vb.classList.remove('mobile-floating');
d.appendChild(vb);
document.addEventListener('click', hideVideoMenu);
d.addEventListener('mouseleave', hideVideoMenu);
}
vb.addEventListener('click', (e) => e.stopPropagation());
this.videoMediaContainer.appendChild(d);
@@ -3171,6 +3173,7 @@ class RoomClient {
vb.classList.remove('mobile-floating');
d.appendChild(vb);
}
vb.addEventListener('click', (e) => e.stopPropagation());
this.videoMediaContainer.appendChild(d);
@@ -3419,13 +3422,22 @@ class RoomClient {
d.appendChild(h);
d.appendChild(pm);
const hideVideoMenu = () => {
if (vb && !vb.classList.contains('hidden')) {
hide(vb);
setCamerasBorderNone();
}
};
if (this.isMobileDevice) {
vb.classList.add('mobile-floating');
document.body.appendChild(vb);
} else {
vb.classList.remove('mobile-floating');
d.appendChild(vb);
d.addEventListener('mouseleave', hideVideoMenu);
}
vb.addEventListener('click', (e) => e.stopPropagation());
this.videoMediaContainer.appendChild(d);
BUTTONS.videoOff.muteAudioButton && this.handleAU(au.id);
@@ -4602,9 +4614,18 @@ class RoomClient {
};
const hideDropdown = () => {
hoverTimeout = setTimeout(() => eVc.classList.remove('show'), 200);
if (vb && !vb.classList.contains('hidden')) {
hide(vb);
setCamerasBorderNone();
};
// Toggle dropdown visibility (used on mobile and optionally elsewhere)
const toggleDropdown = (e) => {
if (e) {
e.preventDefault();
e.stopPropagation();
}
if (eVc.classList.contains('show')) {
eVc.classList.remove('show');
} else {
showDropdown();
}
};
@@ -4615,19 +4636,15 @@ class RoomClient {
eVc.addEventListener('mouseleave', hideDropdown);
d.addEventListener('mouseleave', hideDropdown);
} else {
eBtn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
eVc.classList.toggle('show');
eBtn.addEventListener('click', toggleDropdown);
eVc.addEventListener('click', toggleDropdown);
// Optionally, close dropdown when clicking outside the tile, dropdown, and menu bar
document.addEventListener('click', (event) => {
const target = event.target;
if (!d.contains(target) && !eVc.contains(target) && !vb.contains(target)) {
hideDropdown();
}
});
// close if tapping outside
document.addEventListener(
'click',
(ev) => {
if (!eVc.contains(ev.target) && ev.target !== eBtn) eVc.classList.remove('show');
},
{ passive: true }
);
}
}