[mirotalk] - add hide myself button, update dep

package.json

@@ -33,8 +33,8 @@
     "license": "AGPL-3.0",
     "homepage": "https://github.com/miroslavpejic85/mirotalk",
     "dependencies": {
-        "@sentry/integrations": "^7.45.0",
-        "@sentry/node": "^7.45.0",
+        "@sentry/integrations": "^7.46.0",
+        "@sentry/node": "^7.46.0",
         "body-parser": "^1.20.2",
         "colors": "^1.4.0",
         "compression": "^1.7.4",

public/css/client.css

@@ -697,7 +697,7 @@ em-emoji-picker {
 }
 
 #mySettingsTable {
-    margin-top: 20px;
+    /* margin-top: 5px; */
     width: 100%;
     color: #fff;
 }

public/js/client.js

@@ -75,6 +75,8 @@ const chatInputEmoji = {
 const className = {
     user: 'fas fa-user',
     clock: 'fas fa-clock',
+    hideMeOn: 'fas fa-user-slash',
+    hideMeOff: 'fas fa-user',
     audioOn: 'fas fa-microphone',
     audioOff: 'fas fa-microphone-slash',
     videoOn: 'fas fa-video',
@@ -170,6 +172,8 @@ const usersCountLimit = 2; // Limit 2 users per room if userLimitsActive true
 
 const useAvatarApi = true; // if false the cam-Off avatar = avatarImg
 
+let isHideMeActive = false; // Hide myself from the meeting view
+
 let notifyBySound = true; // turn on - off sound notifications
 
 let thisRoomPassword = null;
@@ -284,6 +288,7 @@ let initSpeakerSelect;
 // buttons bar
 let buttonsBar;
 let shareRoomBtn;
+let hideMeBtn;
 let audioBtn;
 let videoBtn;
 let swapCameraBtn;
@@ -460,6 +465,7 @@ function getHtmlElementsById() {
     // buttons Bar
     buttonsBar = getId('buttonsBar');
     shareRoomBtn = getId('shareRoomBtn');
+    hideMeBtn = getId('hideMeBtn');
     audioBtn = getId('audioBtn');
     videoBtn = getId('videoBtn');
     swapCameraBtn = getId('swapCameraBtn');
@@ -600,6 +606,7 @@ function setButtonsToolTip() {
     setTippy(initScreenShareBtn, 'Toggle screen sharing', 'top');
     // main buttons
     setTippy(shareRoomBtn, 'Invite others to join', 'right-start');
+    setTippy(hideMeBtn, 'Toggle hide myself from the room view', 'right-start');
     setTippy(audioBtn, 'Stop the audio', 'right-start');
     setTippy(videoBtn, 'Stop the video', 'right-start');
     setTippy(screenShareBtn, 'Start screen sharing', 'right-start');
@@ -641,6 +648,7 @@ function setButtonsToolTip() {
         'If Active, When SpaceBar keydown the microphone will be activated, on keyup will be deactivated, like a walkie-talkie.',
         'right',
     );
+    setTippy(switchSounds, 'Toggle room notify sounds', 'right');
     // tab btns
     setTippy(tabDevicesBtn, 'Devices', 'top');
     setTippy(tabBandwidthBtn, 'Bandwidth', 'top');
@@ -2768,6 +2776,7 @@ function handleVideoPinUnpin(elemId, pnId, camId, peerId, isScreen = false) {
     let videoPinMediaContainer = getId('videoPinMediaContainer');
     if (btnPn && videoPlayer && cam) {
         btnPn.addEventListener('click', () => {
+            if (isMobileDevice) return;
             playSound('click');
             isVideoPinned = !isVideoPinned;
             if (isVideoPinned) {
@@ -3014,6 +3023,7 @@ function refreshMyVideoAudioStatus(localMediaStream) {
  */
 function manageLeftButtons() {
     setShareRoomBtn();
+    setHideMeButton();
     setAudioBtn();
     setVideoBtn();
     setSwapCameraBtn();
@@ -3040,6 +3050,16 @@ function setShareRoomBtn() {
     });
 }
 
+/**
+ * Hide myself from room view
+ */
+function setHideMeButton() {
+    hideMeBtn.addEventListener('click', (e) => {
+        isHideMeActive = !isHideMeActive;
+        handleHideMe(isHideMeActive);
+    });
+}
+
 /**
  * Audio mute - unmute button click event
  */
@@ -5508,6 +5528,23 @@ async function emitPeerStatus(element, status) {
     });
 }
 
+/**
+ * Handle hide myself from room view
+ * @param {boolean} isHideMeActive
+ */
+function handleHideMe(isHideMeActive) {
+    const myVideoWrap = getId('myVideoWrap');
+    const myVideoPinBtn = getId('myVideoPinBtn');
+    if (isHideMeActive && isVideoPinned) myVideoPinBtn.click();
+    myVideoWrap.style.display = isHideMeActive ? 'none' : 'inline-block';
+    hideMeBtn.className = isHideMeActive ? className.hideMeOn : className.hideMeOff;
+    hideMeBtn.style.color = isHideMeActive ? 'red' : 'black';
+    isHideMeActive ? playSound('off') : playSound('on');
+    if (Object.keys(peerConnections).length === 1) {
+        resizeVideoMedia();
+    }
+}
+
 /**
  * Set my Hand Status and Icon
  */

public/js/videoGrid.js

@@ -64,9 +64,13 @@ function resizeVideoMedia() {
     let Height = videoMediaContainer.offsetHeight - Margin * 2;
     let Cameras = getEcN('Camera');
     let max = 0;
+    let optional = isHideMeActive ? 1 : 0;
+    let isOneVideoElement = videoMediaContainer.childElementCount - optional == 1 ? true : false;
+
+    console.log('videoMediaContainer.childElementCount: ' + videoMediaContainer.childElementCount - optional);
 
     let bigWidth = Width * 4;
-    if (videoMediaContainer.childElementCount == 1) {
+    if (videoMediaContainer.childElementCount - optional == 1) {
         Width = Width - bigWidth;
     }
 
@@ -82,22 +86,21 @@ function resizeVideoMedia() {
     }
 
     max = max - Margin * 2;
-    setWidth(videoMediaContainer, Cameras, max, bigWidth, Margin, Height);
+    setWidth(Cameras, max, bigWidth, Margin, Height, isOneVideoElement);
     document.documentElement.style.setProperty('--vmi-wh', max / 3 + 'px');
 }
 
 /**
  * Set Width
- * @param {object} videoMediaContainer
  * @param {object} Cameras
  * @param {integer} width
  * @param {integer} bigWidth
  * @param {integer} margin
  * @param {integer} maxHeight
+ * @param {integer} isOneVideoElement
  */
-function setWidth(videoMediaContainer, Cameras, width, bigWidth, margin, maxHeight) {
+function setWidth(Cameras, width, bigWidth, margin, maxHeight, isOneVideoElement) {
     ratio = customRatio ? 0.68 : ratio;
-    let isOneVideoElement = videoMediaContainer.childElementCount == 1 ? true : false;
     for (let s = 0; s < Cameras.length; s++) {
         Cameras[s].style.width = width + 'px';
         Cameras[s].style.margin = margin + 'px';

public/views/client.html

@@ -101,6 +101,7 @@ access to use this app.
 
         <div id="buttonsBar" class="fadein">
             <button id="shareRoomBtn" class="fas fa-share-alt"></button>
+            <button id="hideMeBtn" class="fas fa-user"></button>
             <button id="audioBtn" class="fas fa-microphone"></button>
             <button id="videoBtn" class="fas fa-video"></button>
             <button id="swapCameraBtn" class="fas fa-camera-rotate"></button>