From 828688fa5441aa2a4d12a8582595452732e8b5d5 Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Mon, 4 Mar 2024 20:35:54 +0100 Subject: [PATCH] [mirotalksfu] - improve UI, update dep --- app/src/Server.js | 2 +- package.json | 10 +++++----- public/css/Room.css | 18 +++++++++--------- public/css/VideoGrid.css | 13 ++++++++++++- public/js/Room.js | 2 +- public/js/RoomClient.js | 32 +++++++++++++++++++++++++------- 6 files changed, 53 insertions(+), 24 deletions(-) diff --git a/app/src/Server.js b/app/src/Server.js index c76baac6..5c65c4d8 100644 --- a/app/src/Server.js +++ b/app/src/Server.js @@ -41,7 +41,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.3.79 + * @version 1.3.80 * */ diff --git a/package.json b/package.json index 3e5e8787..65d59b72 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mirotalksfu", - "version": "1.3.79", + "version": "1.3.80", "description": "WebRTC SFU browser-based video calls", "main": "Server.js", "scripts": { @@ -38,15 +38,15 @@ "author": "Miroslav Pejic", "license": "AGPL-3.0", "dependencies": { - "@sentry/integrations": "7.103.0", - "@sentry/node": "7.103.0", + "@sentry/integrations": "7.105.0", + "@sentry/node": "7.105.0", "axios": "^1.6.7", "body-parser": "1.20.2", "colors": "1.4.0", "compression": "1.7.4", "cors": "2.8.5", "crypto-js": "4.2.0", - "express": "4.18.2", + "express": "4.18.3", "httpolyglot": "0.1.2", "jsonwebtoken": "^9.0.2", "mediasoup": "3.13.23", @@ -57,7 +57,7 @@ "socket.io": "4.7.4", "swagger-ui-express": "5.0.0", "uuid": "9.0.1", - "xss": "^1.0.14", + "xss": "^1.0.15", "yamljs": "0.3.0" }, "devDependencies": { diff --git a/public/css/Room.css b/public/css/Room.css index a2fa292e..c5d466f0 100644 --- a/public/css/Room.css +++ b/public/css/Room.css @@ -443,6 +443,15 @@ th { transform: scale(1); } +.dropdown-menu li:hover { + background: var(--btns-bg-color); +} + +/* Hide the default Bootstrap dropdown icon */ +.dropdown-toggle::after { + display: none !important; +} + /*-------------------------------------------------------------- # Style the tab --------------------------------------------------------------*/ @@ -892,15 +901,6 @@ th { # Common --------------------------------------------------------------*/ -.dropdown-menu li:hover { - background: var(--btns-bg-color); -} - -/* Hide the default Bootstrap dropdown icon */ -.dropdown-toggle::after { - display: none !important; -} - select { height: 40px; line-height: 40px; diff --git a/public/css/VideoGrid.css b/public/css/VideoGrid.css index 91109aaf..a55555a6 100644 --- a/public/css/VideoGrid.css +++ b/public/css/VideoGrid.css @@ -92,7 +92,7 @@ right: 0; bottom: 0; color: #fff; - font-size: 14px; + font-size: 10px; display: flex; align-items: center; padding: 5px; @@ -146,6 +146,17 @@ transition: all 0.3s ease-in-out; } +.expand-video-content { + position: relative; + display: none; + float: right; + width: auto; +} + +.expand-video:hover .expand-video-content { + display: inline-flex; +} + #videoMediaContainer video { position: absolute; margin-left: auto; diff --git a/public/js/Room.js b/public/js/Room.js index 4cdcda4e..6a6093b5 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.3.79 + * @version 1.3.80 * */ diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index 05244ced..1a73c377 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.3.79 + * @version 1.3.80 * */ @@ -41,6 +41,7 @@ const html = { bg: 'fas fa-circle-half-stroke', pin: 'fas fa-map-pin', videoPrivacy: 'far fa-circle', + expand: 'fas fa-ellipsis-vertical', }; const icons = { @@ -1990,6 +1991,8 @@ class RoomClient { handleConsumer(id, type, stream, peer_name, peer_info) { let elem, vb, d, p, i, cm, au, pip, fs, ts, sf, sm, sv, gl, ban, ko, pb, pm, pv, pn; + let eDiv, eBtn, eVc; // expand buttons + console.log('PEER-INFO', peer_info); const remotePeerId = peer_info.peer_id; @@ -2017,6 +2020,15 @@ class RoomClient { vb = document.createElement('div'); vb.setAttribute('id', remotePeerId + '__vb'); vb.className = 'videoMenuBar fadein'; + + eDiv = document.createElement('div'); + eDiv.className = 'expand-video'; + eBtn = document.createElement('button'); + eBtn.id = remotePeerId + '_videoExpandBtn'; + eBtn.className = html.expand; + eVc = document.createElement('div'); + eVc.className = 'expand-video-content'; + pv = document.createElement('input'); pv.id = remotePeerId + '___pVolume'; pv.type = 'range'; @@ -2074,15 +2086,21 @@ class RoomClient { pb.className = 'bar'; pb.style.height = '1%'; pm.appendChild(pb); - BUTTONS.consumerVideo.ejectButton && vb.appendChild(ko); - BUTTONS.consumerVideo.banButton && vb.appendChild(ban); - BUTTONS.consumerVideo.geolocationButton && vb.appendChild(gl); + + BUTTONS.consumerVideo.sendMessageButton && eVc.appendChild(sm); + BUTTONS.consumerVideo.sendFileButton && eVc.appendChild(sf); + BUTTONS.consumerVideo.sendVideoButton && eVc.appendChild(sv); + BUTTONS.consumerVideo.geolocationButton && eVc.appendChild(gl); + BUTTONS.consumerVideo.banButton && eVc.appendChild(ban); + BUTTONS.consumerVideo.ejectButton && eVc.appendChild(ko); + + eDiv.appendChild(eBtn); + eDiv.appendChild(eVc); + + vb.appendChild(eDiv); BUTTONS.consumerVideo.audioVolumeInput && !this.isMobileDevice && vb.appendChild(pv); vb.appendChild(au); vb.appendChild(cm); - BUTTONS.consumerVideo.sendVideoButton && vb.appendChild(sv); - BUTTONS.consumerVideo.sendFileButton && vb.appendChild(sf); - BUTTONS.consumerVideo.sendMessageButton && vb.appendChild(sm); BUTTONS.consumerVideo.snapShotButton && vb.appendChild(ts); BUTTONS.consumerVideo.videoPictureInPicture && this.isVideoPictureInPictureSupported &&