[mirotalk] - fix: animate participants panel slide-in after chat pin and sync videoMediaContainer width transition

This commit is contained in:
Miroslav Pejic
2026-04-29 18:14:36 +02:00
parent a91e7bec81
commit fec645697b
7 changed files with 45 additions and 33 deletions
+1 -1
View File
@@ -1,5 +1,5 @@
# ==================================================== # ====================================================
# MiroTalk P2P v.1.8.21 - Environment Configuration # MiroTalk P2P v.1.8.22 - Environment Configuration
# ==================================================== # ====================================================
# App environment # App environment
+1 -1
View File
@@ -2,7 +2,7 @@
/** /**
* ============================================== * ==============================================
* MiroTalk P2P v.1.8.21 - Configuration File * MiroTalk P2P v.1.8.22 - Configuration File
* ============================================== * ==============================================
* *
* This file is the central configuration source. * This file is the central configuration source.
+1 -1
View File
@@ -45,7 +45,7 @@ dependencies: {
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661 * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com * @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.8.21 * @version 1.8.22
* *
*/ */
+21 -21
View File
@@ -1,17 +1,17 @@
{ {
"name": "mirotalk", "name": "mirotalk",
"version": "1.8.21", "version": "1.8.22",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "mirotalk", "name": "mirotalk",
"version": "1.8.21", "version": "1.8.22",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"dependencies": { "dependencies": {
"@mattermost/client": "11.6.0", "@mattermost/client": "11.6.0",
"@ngrok/ngrok": "1.7.0", "@ngrok/ngrok": "1.7.0",
"@sentry/node": "^10.50.0", "@sentry/node": "^10.51.0",
"axios": "^1.15.2", "axios": "^1.15.2",
"chokidar": "^5.0.0", "chokidar": "^5.0.0",
"colors": "^1.4.0", "colors": "^1.4.0",
@@ -1213,18 +1213,18 @@
"license": "Apache-2.0" "license": "Apache-2.0"
}, },
"node_modules/@sentry/core": { "node_modules/@sentry/core": {
"version": "10.50.0", "version": "10.51.0",
"resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.50.0.tgz", "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.51.0.tgz",
"integrity": "sha512-J4A+vzUO3adl0TkFCjaN1+4miamrjHiEIYuLHiuu1lmAjq5WIVw32ObvAh4yMwNtxyaEMosTrrh5M6f12XSJFg==", "integrity": "sha512-Y45V/YXvVLEXmOdkbD1oG1gkRWFi9guCEGg3PlIlIpRjAbZUrvLGgjRJIc1E7XpSzmOnWbs5BbUxMv4PDaPj2w==",
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=18" "node": ">=18"
} }
}, },
"node_modules/@sentry/node": { "node_modules/@sentry/node": {
"version": "10.50.0", "version": "10.51.0",
"resolved": "https://registry.npmjs.org/@sentry/node/-/node-10.50.0.tgz", "resolved": "https://registry.npmjs.org/@sentry/node/-/node-10.51.0.tgz",
"integrity": "sha512-TvwzFQu8MGKzMQ2/tqxcNzFA8UG2kKTB+GDmA4uOzx3+GT849YZRRSJzEXCmYhk1teVd2fbmgqyYY2nyLF5a+Q==", "integrity": "sha512-2yZLRZwS1dKG8/4eOTpGSo/gO/EgmT9aPj6lAzUkRa7bZCTTdW4BraaHU0leX5T94909Qfhbr3W5AVTfDOCKiQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@fastify/otel": "0.18.0", "@fastify/otel": "0.18.0",
@@ -1254,9 +1254,9 @@
"@opentelemetry/sdk-trace-base": "^2.6.1", "@opentelemetry/sdk-trace-base": "^2.6.1",
"@opentelemetry/semantic-conventions": "^1.40.0", "@opentelemetry/semantic-conventions": "^1.40.0",
"@prisma/instrumentation": "7.6.0", "@prisma/instrumentation": "7.6.0",
"@sentry/core": "10.50.0", "@sentry/core": "10.51.0",
"@sentry/node-core": "10.50.0", "@sentry/node-core": "10.51.0",
"@sentry/opentelemetry": "10.50.0", "@sentry/opentelemetry": "10.51.0",
"import-in-the-middle": "^3.0.0" "import-in-the-middle": "^3.0.0"
}, },
"engines": { "engines": {
@@ -1264,13 +1264,13 @@
} }
}, },
"node_modules/@sentry/node-core": { "node_modules/@sentry/node-core": {
"version": "10.50.0", "version": "10.51.0",
"resolved": "https://registry.npmjs.org/@sentry/node-core/-/node-core-10.50.0.tgz", "resolved": "https://registry.npmjs.org/@sentry/node-core/-/node-core-10.51.0.tgz",
"integrity": "sha512-Eb1BYf4Lc7ZYmdX3acKP6SgyGikrBA370gbGHaWI5jRu7G7vig8sIu1ghPmY5AlvqBPOetado7GniXr6fAXbTw==", "integrity": "sha512-VP9DMEzBEuauABrfDHYz/pRYa74M09uRJLz0ls3yel3sKhYHMyCB29ZxbKcciUhD4d33dwgi8DbaPZV2H/wnfQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@sentry/core": "10.50.0", "@sentry/core": "10.51.0",
"@sentry/opentelemetry": "10.50.0", "@sentry/opentelemetry": "10.51.0",
"import-in-the-middle": "^3.0.0" "import-in-the-middle": "^3.0.0"
}, },
"engines": { "engines": {
@@ -1306,12 +1306,12 @@
} }
}, },
"node_modules/@sentry/opentelemetry": { "node_modules/@sentry/opentelemetry": {
"version": "10.50.0", "version": "10.51.0",
"resolved": "https://registry.npmjs.org/@sentry/opentelemetry/-/opentelemetry-10.50.0.tgz", "resolved": "https://registry.npmjs.org/@sentry/opentelemetry/-/opentelemetry-10.51.0.tgz",
"integrity": "sha512-axn3pgDPveGdaMUC0abMCmFN7ux2pA5ebPufCef4lMIsyg7BBQvaEJ+vE19wjstMaBCAJGsdZlL3eeP2rtgRMw==", "integrity": "sha512-Qc7AlCE4uhB+SvHLqah4RgR1WdY7wmmr/hx9g/prDP9R1ocshmUEMrZK9qjuwaklW7/fmkFCXI8ETxo5L1bHIA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@sentry/core": "10.50.0" "@sentry/core": "10.51.0"
}, },
"engines": { "engines": {
"node": ">=18" "node": ">=18"
+2 -2
View File
@@ -1,6 +1,6 @@
{ {
"name": "mirotalk", "name": "mirotalk",
"version": "1.8.21", "version": "1.8.22",
"description": "A free WebRTC browser-based video call", "description": "A free WebRTC browser-based video call",
"main": "server.js", "main": "server.js",
"scripts": { "scripts": {
@@ -46,7 +46,7 @@
"dependencies": { "dependencies": {
"@mattermost/client": "11.6.0", "@mattermost/client": "11.6.0",
"@ngrok/ngrok": "1.7.0", "@ngrok/ngrok": "1.7.0",
"@sentry/node": "^10.50.0", "@sentry/node": "^10.51.0",
"axios": "^1.15.2", "axios": "^1.15.2",
"chokidar": "^5.0.0", "chokidar": "^5.0.0",
"colors": "^1.4.0", "colors": "^1.4.0",
+1 -1
View File
@@ -109,7 +109,7 @@ let brand = {
}, },
about: { about: {
imageUrl: '../images/mirotalk-logo.gif', imageUrl: '../images/mirotalk-logo.gif',
title: 'WebRTC P2P v1.8.21', title: 'WebRTC P2P v1.8.22',
html: ` html: `
<button <button
id="support-button" id="support-button"
+18 -6
View File
@@ -15,7 +15,7 @@
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661 * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com * @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.8.21 * @version 1.8.22
* *
*/ */
@@ -6464,9 +6464,6 @@ function setChatRoomBtn() {
function setParticipantsBtn() { function setParticipantsBtn() {
participantsBtn.addEventListener('click', async (e) => { participantsBtn.addEventListener('click', async (e) => {
e.preventDefault(); e.preventDefault();
if (!isChatRoomVisible) {
showChatRoomDraggable();
}
if (!isMobileDevice && canBePinned()) { if (!isMobileDevice && canBePinned()) {
if (isCaptionPinned) { if (isCaptionPinned) {
@@ -6474,14 +6471,29 @@ function setParticipantsBtn() {
return; return;
} }
msgerDraggable.classList.add('msger-pinned-sidebar-open');
if (!isChatRoomVisible) {
showChatRoomDraggable();
}
if (!isChatPinned) { if (!isChatPinned) {
chatPin(); chatPin();
} }
openPinnedParticipantsSidebar(true); // Wait for the panel-slide-in animation to play before overlaying the participants sidebar.
await sleep(500);
msgerCPBtn.classList.add('active');
searchPeerBarName?.focus();
screenReaderAccessibility.announceMessage('Participants list opened');
return; return;
} }
if (!isChatRoomVisible) {
showChatRoomDraggable();
}
syncParticipantsPanelVisibility(true); syncParticipantsPanelVisibility(true);
searchPeerBarName?.focus(); searchPeerBarName?.focus();
screenReaderAccessibility.announceMessage('Participants list opened'); screenReaderAccessibility.announceMessage('Participants list opened');
@@ -15568,7 +15580,7 @@ function showAbout() {
Swal.fire({ Swal.fire({
background: swBg, background: swBg,
position: 'center', position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.21', title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.22',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about, imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' }, customClass: { image: 'img-about' },
html: ` html: `