From 4ea46bbfad6c2136f1f1f99fab1a85b7090df48b Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Sun, 10 Aug 2025 22:28:53 +0200 Subject: [PATCH] [mirotalk] - improve widget --- app/src/config.template.js | 7 ++ app/src/server.js | 2 +- package-lock.json | 4 +- package.json | 2 +- public/js/brand.js | 9 +- public/js/client.js | 4 +- public/js/widget.js | 55 ++++++--- widgets/example-1.html | 1 + widgets/maker.html | 226 ++++++++++++++++++++++++++++++------- 9 files changed, 248 insertions(+), 62 deletions(-) diff --git a/app/src/config.template.js b/app/src/config.template.js index 4353cdac..1fb631f8 100644 --- a/app/src/config.template.js +++ b/app/src/config.template.js @@ -17,6 +17,13 @@ module.exports = { expertImages: [ 'https://photo.cloudron.pocketsolution.net/uploads/original/95/7d/a5f7f7a2c89a5fee7affda5f013c.jpeg', ], + buttons: { + audio: true, + video: true, + screen: true, + chat: true, + join: true, + }, checkOnlineStatus: false, isOnline: true, customMessages: { diff --git a/app/src/server.js b/app/src/server.js index 7ff53ac6..b36a71e9 100755 --- a/app/src/server.js +++ b/app/src/server.js @@ -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.5.55 + * @version 1.5.56 * */ diff --git a/package-lock.json b/package-lock.json index e7a5a4ad..b53fb959 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "mirotalk", - "version": "1.5.55", + "version": "1.5.56", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "mirotalk", - "version": "1.5.55", + "version": "1.5.56", "license": "AGPL-3.0", "dependencies": { "@mattermost/client": "10.9.0", diff --git a/package.json b/package.json index fcb19eef..23966ae8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mirotalk", - "version": "1.5.55", + "version": "1.5.56", "description": "A free WebRTC browser-based video call", "main": "server.js", "scripts": { diff --git a/public/js/brand.js b/public/js/brand.js index 85d059a9..7f060fc4 100644 --- a/public/js/brand.js +++ b/public/js/brand.js @@ -48,6 +48,13 @@ let brand = { expertImages: [ 'https://photo.cloudron.pocketsolution.net/uploads/original/95/7d/a5f7f7a2c89a5fee7affda5f013c.jpeg', ], + buttons: { + audio: true, + video: true, + screen: true, + chat: true, + join: true, + }, checkOnlineStatus: false, isOnline: true, customMessages: { @@ -96,7 +103,7 @@ let brand = { }, about: { imageUrl: '../images/mirotalk-logo.gif', - title: 'WebRTC P2P v1.5.55', + title: 'WebRTC P2P v1.5.56', html: ` - ` + ` ) .join(''); } @@ -709,6 +722,21 @@ document.addEventListener('DOMContentLoaded', function () { if (!autoInit) return; try { + const buttonsAttr = autoInit.getAttribute('data-buttons'); + let buttonsConfig = { ...MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.buttons }; + if (buttonsAttr) { + // Normalize and map + const requested = buttonsAttr + .split(',') + .map((b) => b.trim().toLowerCase()) + .filter(Boolean); + // Start all false then enable requested valid keys + buttonsConfig = { audio: false, video: false, screen: false, chat: false, join: false }; + requested.forEach((key) => { + if (key in buttonsConfig) buttonsConfig[key] = true; + }); + } + const config = { domain: autoInit.getAttribute('data-domain') || window.location.host, roomId: autoInit.getAttribute('data-room') || 'support-room', @@ -756,6 +784,7 @@ document.addEventListener('DOMContentLoaded', function () { expertImages: config.expertImages, checkOnlineStatus: config.checkOnline, customMessages: config.customMessages, + buttons: buttonsConfig, }, }); } diff --git a/widgets/example-1.html b/widgets/example-1.html index 60a01bb6..88582d2d 100644 --- a/widgets/example-1.html +++ b/widgets/example-1.html @@ -15,6 +15,7 @@ data-position="bottom-right" data-check-online="false" data-expert-images="https://i.pravatar.cc/40?img=1,https://i.pravatar.cc/40?img=2,https://i.pravatar.cc/40?img=3" + data-buttons="audio,video,screen,chat,join" data-heading="Need Help?" data-subheading="Get instant support from our expert team!" data-connect-text="connect in < 5 seconds" diff --git a/widgets/maker.html b/widgets/maker.html index 714825a5..a926e12c 100644 --- a/widgets/maker.html +++ b/widgets/maker.html @@ -346,6 +346,63 @@ display: none; } + .button-toggle-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); + gap: 10px 14px; + margin-top: 8px; + } + + .toggle { + position: relative; + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; + font-weight: 600; + background: #eef1f4; + border: 1px solid #d5dade; + padding: 8px 10px 8px 40px; + border-radius: 8px; + cursor: pointer; + user-select: none; + transition: + background 0.25s, + border-color 0.25s; + } + + .toggle input { + position: absolute; + opacity: 0; + pointer-events: none; + } + + .toggle::before { + content: ''; + position: absolute; + left: 10px; + width: 20px; + height: 20px; + border-radius: 6px; + background: linear-gradient(135deg, #9aa0a6, #7e858c); + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); + transition: background 0.25s; + } + + .toggle.checked { + background: #e5faf0; + border-color: #00c853; + color: #116d3d; + } + + .toggle.checked::before { + background: linear-gradient(135deg, #00e676, #00c853); + } + + .toggle:active { + transform: scale(0.97); + } + @media (max-width: 768px) { .content { grid-template-columns: 1fr; @@ -453,6 +510,30 @@ + + +
+ +
+ + + + + +
+
@@ -555,6 +636,11 @@ https://i.pravatar.cc/40?img=1,https://i.pravatar.cc/40?img=2,https://i.pravatar offlineText: document.getElementById('offline-text'), poweredBy: document.getElementById('powered-by'), expertImages: document.getElementById('expert-images'), + btnAudio: document.getElementById('btn-audio'), + btnVideo: document.getElementById('btn-video'), + btnScreen: document.getElementById('btn-screen'), + btnChat: document.getElementById('btn-chat'), + btnJoin: document.getElementById('btn-join'), }; const generatedCode = document.getElementById('generated-code'); @@ -579,36 +665,45 @@ https://i.pravatar.cc/40?img=1,https://i.pravatar.cc/40?img=2,https://i.pravatar 'https://i.pravatar.cc/40?img=1,https://i.pravatar.cc/40?img=2,https://i.pravatar.cc/40?img=3', }; + const buttonsSelected = []; + if (form.btnAudio.checked) buttonsSelected.push('audio'); + if (form.btnVideo.checked) buttonsSelected.push('video'); + if (form.btnScreen.checked) buttonsSelected.push('screen'); + if (form.btnChat.checked) buttonsSelected.push('chat'); + if (form.btnJoin.checked) buttonsSelected.push('join'); + + const buttonsAttr = buttonsSelected.join(','); + const html = ` - - - MiroTalk Widget -