From 82b90e36123df79a58cc4f88133b7859d73dfd0b Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Fri, 12 Jul 2024 15:28:36 +0200 Subject: [PATCH] [mirotalksfu] - add more themes, update dep --- app/src/Server.js | 2 +- package.json | 4 +- public/js/Room.js | 211 ++++++++++++++++++++++++++++------------ public/js/RoomClient.js | 2 +- public/views/Room.html | 4 + 5 files changed, 156 insertions(+), 67 deletions(-) diff --git a/app/src/Server.js b/app/src/Server.js index 408ba24e..29f1233a 100644 --- a/app/src/Server.js +++ b/app/src/Server.js @@ -44,7 +44,7 @@ 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.4.93 + * @version 1.4.94 * */ diff --git a/package.json b/package.json index 608ac78a..2aef3982 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mirotalksfu", - "version": "1.4.93", + "version": "1.4.94", "description": "WebRTC SFU browser-based video calls", "main": "Server.js", "scripts": { @@ -73,7 +73,7 @@ "mediasoup-client": "3.7.12", "ngrok": "^5.0.0-beta.2", "nodemailer": "^6.9.14", - "openai": "^4.52.5", + "openai": "^4.52.7", "qs": "6.12.3", "socket.io": "4.7.5", "swagger-ui-express": "5.0.1", diff --git a/public/js/Room.js b/public/js/Room.js index 5525ae6b..cbd149a7 100644 --- a/public/js/Room.js +++ b/public/js/Room.js @@ -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.4.93 + * @version 1.4.94 * */ @@ -3948,84 +3948,169 @@ function setTheme() { const theme = selectTheme.value; switch (theme) { case 'dark': - swalBackground = 'radial-gradient(#393939, #000000)'; - document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#393939, #000000)'); - document.documentElement.style.setProperty('--transcription-bg', 'radial-gradient(#393939, #000000)'); - document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#393939, #000000)'); - document.documentElement.style.setProperty('--left-msg-bg', '#056162'); - document.documentElement.style.setProperty('--right-msg-bg', '#252d31'); - document.documentElement.style.setProperty('--select-bg', '#2c2c2c'); - document.documentElement.style.setProperty('--tab-btn-active', '#393939'); - document.documentElement.style.setProperty('--settings-bg', 'radial-gradient(#393939, #000000)'); - document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#393939, #000000)'); - // document.documentElement.style.setProperty('--btns-bg-color', 'radial-gradient(#000000, #393939)'); + swalBackground = 'linear-gradient(135deg, #000000, #434343)'; + document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #000000, #434343)'); + document.documentElement.style.setProperty( + '--transcription-bg', + 'linear-gradient(135deg, #000000, #434343)', + ); + document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #000000, #434343)'); + document.documentElement.style.setProperty('--left-msg-bg', '#1a1a1a'); + document.documentElement.style.setProperty('--right-msg-bg', '#2e2e2e'); + document.documentElement.style.setProperty('--select-bg', '#333333'); + document.documentElement.style.setProperty('--tab-btn-active', '#434343'); + document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #000000, #434343)'); + document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #000000, #434343)'); document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.7)'); - document.body.style.background = 'radial-gradient(#393939, #000000)'; + document.body.style.background = 'linear-gradient(135deg, #000000, #434343)'; selectTheme.selectedIndex = 0; break; case 'grey': - swalBackground = 'radial-gradient(#666, #333)'; - document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#666, #333)'); - document.documentElement.style.setProperty('--transcription-bg', 'radial-gradient(#666, #333)'); - document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#666, #333)'); - document.documentElement.style.setProperty('--left-msg-bg', '#056162'); - document.documentElement.style.setProperty('--right-msg-bg', '#252d31'); - document.documentElement.style.setProperty('--select-bg', '#2c2c2c'); - document.documentElement.style.setProperty('--tab-btn-active', '#666'); - document.documentElement.style.setProperty('--settings-bg', 'radial-gradient(#666, #333)'); - document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#797979, #000)'); - document.documentElement.style.setProperty('--btns-bg-color', 'radial-gradient(#333, #666)'); - document.body.style.background = 'radial-gradient(#666, #333)'; + swalBackground = 'linear-gradient(135deg, #1a1a1a, #4f4f4f)'; + document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #1a1a1a, #4f4f4f)'); + document.documentElement.style.setProperty( + '--transcription-bg', + 'linear-gradient(135deg, #1a1a1a, #4f4f4f)', + ); + document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #1a1a1a, #4f4f4f)'); + document.documentElement.style.setProperty('--left-msg-bg', '#2c2c2c'); + document.documentElement.style.setProperty('--right-msg-bg', '#3f3f3f'); + document.documentElement.style.setProperty('--select-bg', '#2a2a2a'); + document.documentElement.style.setProperty('--tab-btn-active', '#4f4f4f'); + document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #1a1a1a, #4f4f4f)'); + document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #1a1a1a, #4f4f4f)'); + document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.7)'); + document.body.style.background = 'linear-gradient(135deg, #1a1a1a, #4f4f4f)'; selectTheme.selectedIndex = 1; break; case 'green': - swalBackground = 'radial-gradient(#003934, #001E1A)'; - document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#003934, #001E1A)'); - document.documentElement.style.setProperty('--transcription-bg', 'radial-gradient(#003934, #001E1A)'); - document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#003934, #001E1A)'); - document.documentElement.style.setProperty('--left-msg-bg', '#001E1A'); - document.documentElement.style.setProperty('--right-msg-bg', '#003934'); - document.documentElement.style.setProperty('--select-bg', '#001E1A'); - document.documentElement.style.setProperty('--tab-btn-active', '#003934'); - document.documentElement.style.setProperty('--settings-bg', 'radial-gradient(#003934, #001E1A)'); - document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#003934, #001E1A)'); - document.documentElement.style.setProperty('--btns-bg-color', 'radial-gradient(#001E1A, #003934)'); - document.body.style.background = 'radial-gradient(#003934, #001E1A)'; + swalBackground = 'linear-gradient(135deg, #002a22, #004d40)'; + document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #002a22, #004d40)'); + document.documentElement.style.setProperty( + '--transcription-bg', + 'linear-gradient(135deg, #002a22, #004d40)', + ); + document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #002a22, #004d40)'); + document.documentElement.style.setProperty('--left-msg-bg', '#001d1a'); + document.documentElement.style.setProperty('--right-msg-bg', '#003d2e'); + document.documentElement.style.setProperty('--select-bg', '#002a22'); + document.documentElement.style.setProperty('--tab-btn-active', '#004d40'); + document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #002a22, #004d40)'); + document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #002a22, #004d40)'); + document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 42, 34, 0.7)'); + document.body.style.background = 'linear-gradient(135deg, #002a22, #004d40)'; selectTheme.selectedIndex = 2; break; case 'blue': - swalBackground = 'radial-gradient(#306bac, #141B41)'; - document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#306bac, #141B41)'); - document.documentElement.style.setProperty('--transcription-bg', 'radial-gradient(#306bac, #141B41)'); - document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#306bac, #141B41)'); - document.documentElement.style.setProperty('--left-msg-bg', '#141B41'); - document.documentElement.style.setProperty('--right-msg-bg', '#306bac'); - document.documentElement.style.setProperty('--select-bg', '#141B41'); - document.documentElement.style.setProperty('--tab-btn-active', '#306bac'); - document.documentElement.style.setProperty('--settings-bg', 'radial-gradient(#306bac, #141B41)'); - document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#306bac, #141B41)'); - document.documentElement.style.setProperty('--btns-bg-color', 'radial-gradient(#141B41, #306bac)'); - document.body.style.background = 'radial-gradient(#306bac, #141B41)'; + swalBackground = 'linear-gradient(135deg, #00274d, #004d80)'; + document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #00274d, #004d80)'); + document.documentElement.style.setProperty( + '--transcription-bg', + 'linear-gradient(135deg, #00274d, #004d80)', + ); + document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #00274d, #004d80)'); + document.documentElement.style.setProperty('--left-msg-bg', '#001f3f'); + document.documentElement.style.setProperty('--right-msg-bg', '#003366'); + document.documentElement.style.setProperty('--select-bg', '#00274d'); + document.documentElement.style.setProperty('--tab-btn-active', '#004d80'); + document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #00274d, #004d80)'); + document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #00274d, #004d80)'); + document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 39, 77, 0.7)'); + document.body.style.background = 'linear-gradient(135deg, #00274d, #004d80)'; selectTheme.selectedIndex = 3; break; case 'red': - swalBackground = 'radial-gradient(#69140E, #3C1518)'; - document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#69140E, #3C1518)'); - document.documentElement.style.setProperty('--transcription-bg', 'radial-gradient(#69140E, #3C1518)'); - document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#69140E, #3C1518)'); - document.documentElement.style.setProperty('--left-msg-bg', '#3C1518'); - document.documentElement.style.setProperty('--right-msg-bg', '#69140E'); - document.documentElement.style.setProperty('--select-bg', '#3C1518'); - document.documentElement.style.setProperty('--tab-btn-active', '#69140E'); - document.documentElement.style.setProperty('--settings-bg', 'radial-gradient(#69140E, #3C1518)'); - document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#69140E, #3C1518)'); - document.documentElement.style.setProperty('--btns-bg-color', 'radial-gradient(3C1518, #69140E)'); - document.body.style.background = 'radial-gradient(#69140E, #3C1518)'; + swalBackground = 'linear-gradient(135deg, #2a0d0d, #4d1a1a)'; + document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #2a0d0d, #4d1a1a)'); + document.documentElement.style.setProperty( + '--transcription-bg', + 'linear-gradient(135deg, #2a0d0d, #4d1a1a)', + ); + document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #2a0d0d, #4d1a1a)'); + document.documentElement.style.setProperty('--left-msg-bg', '#2b0f0f'); + document.documentElement.style.setProperty('--right-msg-bg', '#4d1a1a'); + document.documentElement.style.setProperty('--select-bg', '#2a0d0d'); + document.documentElement.style.setProperty('--tab-btn-active', '#4d1a1a'); + document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #2a0d0d, #4d1a1a)'); + document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #2a0d0d, #4d1a1a)'); + document.documentElement.style.setProperty('--btns-bg-color', 'rgba(42, 13, 13, 0.7)'); + document.body.style.background = 'linear-gradient(135deg, #2a0d0d, #4d1a1a)'; selectTheme.selectedIndex = 4; break; + case 'purple': + swalBackground = 'linear-gradient(135deg, #2a001d, #4d004a)'; + document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #2a001d, #4d004a)'); + document.documentElement.style.setProperty( + '--transcription-bg', + 'linear-gradient(135deg, #2a001d, #4d004a)', + ); + document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #2a001d, #4d004a)'); + document.documentElement.style.setProperty('--left-msg-bg', '#1b0014'); + document.documentElement.style.setProperty('--right-msg-bg', '#3e002a'); + document.documentElement.style.setProperty('--select-bg', '#2a001d'); + document.documentElement.style.setProperty('--tab-btn-active', '#4d004a'); + document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #2a001d, #4d004a)'); + document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #2a001d, #4d004a)'); + document.documentElement.style.setProperty('--btns-bg-color', 'rgba(42, 0, 29, 0.7)'); + document.body.style.background = 'linear-gradient(135deg, #2a001d, #4d004a)'; + selectTheme.selectedIndex = 5; + break; + case 'orange': + swalBackground = 'linear-gradient(135deg, #3d1a00, #ff8c00)'; // Darker gradient + document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)'); + document.documentElement.style.setProperty( + '--transcription-bg', + 'linear-gradient(135deg, #3d1a00, #ff8c00)', + ); + document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)'); + document.documentElement.style.setProperty('--left-msg-bg', '#2c0f00'); + document.documentElement.style.setProperty('--right-msg-bg', '#ff8c00'); + document.documentElement.style.setProperty('--select-bg', '#3d1a00'); + document.documentElement.style.setProperty('--tab-btn-active', '#ff8c00'); + document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)'); + document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)'); + document.documentElement.style.setProperty('--btns-bg-color', 'rgba(61, 26, 0, 0.7)'); // Darker button color + document.body.style.background = 'linear-gradient(135deg, #3d1a00, #ff8c00)'; + selectTheme.selectedIndex = 6; + break; + case 'pink': + swalBackground = 'linear-gradient(135deg, #4d001d, #ff66b2)'; + document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #4d001d, #ff66b2)'); + document.documentElement.style.setProperty( + '--transcription-bg', + 'linear-gradient(135deg, #4d001d, #ff66b2)', + ); + document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #4d001d, #ff66b2)'); + document.documentElement.style.setProperty('--left-msg-bg', '#3e0016'); + document.documentElement.style.setProperty('--right-msg-bg', '#ff66b2'); + document.documentElement.style.setProperty('--select-bg', '#4d001d'); + document.documentElement.style.setProperty('--tab-btn-active', '#ff66b2'); + document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #4d001d, #ff66b2)'); + document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #4d001d, #ff66b2)'); + document.documentElement.style.setProperty('--btns-bg-color', 'rgba(77, 0, 29, 0.7)'); + document.body.style.background = 'linear-gradient(135deg, #4d001d, #ff66b2)'; + selectTheme.selectedIndex = 7; + break; + case 'yellow': + swalBackground = 'linear-gradient(135deg, #4d3b00, #ffc107)'; // Darker gradient + document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)'); + document.documentElement.style.setProperty( + '--transcription-bg', + 'linear-gradient(135deg, #4d3b00, #ffc107)', + ); + document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)'); + document.documentElement.style.setProperty('--left-msg-bg', '#3b2d00'); + document.documentElement.style.setProperty('--right-msg-bg', '#ffc107'); + document.documentElement.style.setProperty('--select-bg', '#4d3b00'); + document.documentElement.style.setProperty('--tab-btn-active', '#ffc107'); + document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)'); + document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)'); + document.documentElement.style.setProperty('--btns-bg-color', 'rgba(77, 59, 0, 0.7)'); // Darker button color + document.body.style.background = 'linear-gradient(135deg, #4d3b00, #ffc107)'; + selectTheme.selectedIndex = 8; + break; default: break; - //... } wbIsBgTransparent = false; if (rc) rc.isChatBgTransparent = false; @@ -4113,7 +4198,7 @@ function showAbout() { imageUrl: image.about, customClass: { image: 'img-about' }, position: 'center', - title: 'WebRTC SFU v1.4.93', + title: 'WebRTC SFU v1.4.94', html: `
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index 28ad547c..cd1dbc6d 100644 --- a/public/js/RoomClient.js +++ b/public/js/RoomClient.js @@ -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.4.93 + * @version 1.4.94 * */ diff --git a/public/views/Room.html b/public/views/Room.html index 81a289ba..5ed6632e 100644 --- a/public/views/Room.html +++ b/public/views/Room.html @@ -1092,6 +1092,10 @@ access to use this app. + + + +