aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] - feat: add slide-in animation when pinning chat and caption panels

Browse Source
This commit is contained in:
Miroslav Pejic
2026-04-29 02:28:48 +02:00
parent 5f15a780cc
commit a658eadc3b
8 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.template
+1 -1
View File
@@ -1,5 +1,5 @@
# ====================================================
# MiroTalk P2P v.1.8.19 - Environment Configuration
# MiroTalk P2P v.1.8.20 - Environment Configuration
# ====================================================
# App environment
app/src/config.template.js
+1 -1
View File
@@ -2,7 +2,7 @@
/**
* ==============================================
* MiroTalk P2P v.1.8.19 - Configuration File
* MiroTalk P2P v.1.8.20 - Configuration File
* ==============================================
*
* This file is the central configuration source.
app/src/server.js
+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 CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.8.19
* @version 1.8.20
*
*/
package-lock.json
Generated
+6 -6
View File
@@ -1,12 +1,12 @@
{
"name": "mirotalk",
"version": "1.8.19",
"version": "1.8.20",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.8.19",
"version": "1.8.20",
"license": "AGPL-3.0",
"dependencies": {
"@mattermost/client": "11.6.0",
@@ -30,7 +30,7 @@
"jsdom": "^29.1.0",
"jsonwebtoken": "^9.0.3",
"nodemailer": "^8.0.7",
"openai": "^6.34.0",
"openai": "^6.35.0",
"qs": "^6.15.1",
"socket.io": "^4.8.3",
"swagger-ui-express": "^5.0.1",
@@ -5063,9 +5063,9 @@
}
},
"node_modules/openai": {
"version": "6.34.0",
"resolved": "https://registry.npmjs.org/openai/-/openai-6.34.0.tgz",
"integrity": "sha512-yEr2jdGf4tVFYG6ohmr3pF6VJuveP0EA/sS8TBx+4Eq5NT10alu5zg2dmxMXMgqpihRDQlFGpRt2XwsGj+Fyxw==",
"version": "6.35.0",
"resolved": "https://registry.npmjs.org/openai/-/openai-6.35.0.tgz",
"integrity": "sha512-L/skwIGnt5xQZHb0UfTu9uAUKbis3ehKypOuJKi20QvG7UStV6C8IC3myGYHcdiF4kms/bAvOJ9UqqNWqi8x/Q==",
"license": "Apache-2.0",
"bin": {
"openai": "bin/cli"
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.8.19",
"version": "1.8.20",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
@@ -65,7 +65,7 @@
"jsdom": "^29.1.0",
"jsonwebtoken": "^9.0.3",
"nodemailer": "^8.0.7",
"openai": "^6.34.0",
"openai": "^6.35.0",
"qs": "^6.15.1",
"socket.io": "^4.8.3",
"swagger-ui-express": "^5.0.1",
public/css/client.css
+19
View File
@@ -4725,6 +4725,25 @@ body {
}
}
/*--------------------------------------------------------------
# Slide-in from right — shared panel pin animation
--------------------------------------------------------------*/
@keyframes slideInFromRight {
from {
transform: translateX(110vw);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.panel-slide-in {
animation: slideInFromRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
transition: none !important; /* suppress width/size transitions while slide is playing */
}
/*
z-index
6 theme custom picker
public/js/brand.js
+1 -1
View File
@@ -109,7 +109,7 @@ let brand = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: 'WebRTC P2P v1.8.19',
title: 'WebRTC P2P v1.8.20',
html: `
<button
id="support-button"
public/js/client.js
+10 -2
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 CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.8.19
* @version 1.8.20
*
*/
@@ -10035,6 +10035,9 @@ function chatPin() {
if (!isMobileDevice) {
undragElement(msgerDraggable, msgerHeader);
}
msgerDraggable.classList.remove('panel-slide-in');
void msgerDraggable.offsetWidth; // force reflow so the animation always restarts
msgerDraggable.classList.add('panel-slide-in');
}
/**
@@ -10042,6 +10045,7 @@ function chatPin() {
*/
function chatUnpin() {
videoMediaContainerUnpin();
msgerDraggable.classList.remove('panel-slide-in');
setSP('--msger-width', 'min(1120px, 92vw)');
setSP('--msger-height', 'min(760px, 92vh)');
elemDisplay(msgerMinBtn, false);
@@ -10150,6 +10154,9 @@ function captionPin() {
setColor(captionTogglePin, 'lime');
resizeVideoMedia();
if (!isMobileDevice) undragElement(captionDraggable, captionHeader);
captionDraggable.classList.remove('panel-slide-in');
void captionDraggable.offsetWidth; // force reflow so the animation always restarts
captionDraggable.classList.add('panel-slide-in');
}
/**
@@ -10157,6 +10164,7 @@ function captionPin() {
*/
function captionUnpin() {
videoMediaContainerUnpin();
captionDraggable.classList.remove('panel-slide-in');
setSP('--caption-width', '420px');
setSP('--caption-height', '680px');
elemDisplay(captionMinBtn, false);
@@ -15556,7 +15564,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.19',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.20',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `