[mirotalksfu] - add video controls on-off

public/js/Room.js

@@ -47,6 +47,7 @@ let isVideoAllowed = false;
 let isScreenAllowed = getScreen();
 let isAudioVideoAllowed = false;
 let isParticipantsListOpen = false;
+let isVideoControlsOn = false;
 let joinRoomWithoutAudioVideo = true;
 let initAudioButton = null;
 let initVideoButton = null;
@@ -903,10 +904,13 @@ function handleSelects() {
         setAspectRatio(BtnsAspectRatio.value);
     };
     BtnVideoObjectFit.onchange = () => {
-        handleVideoObjectFit(BtnVideoObjectFit.value);
+        rc.handleVideoObjectFit(BtnVideoObjectFit.value);
     }; // cover
     BtnVideoObjectFit.selectedIndex = 2;
 
+    BtnVideoControls.onchange = () => {
+        rc.handleVideoControls(BtnVideoControls.value);
+    };
     selectTheme.onchange = () => {
         setTheme(selectTheme.value);
     };
@@ -1672,14 +1676,6 @@ function getParticipantAvatar(peerName) {
     return cfg.msgAvatar + '?name=' + peerName + '&size=32' + '&background=random&rounded=true';
 }
 
-// ####################################################
-// HANDLE VIDEO OBJ FIT
-// ####################################################
-
-function handleVideoObjectFit(value) {
-    document.documentElement.style.setProperty('--videoObjFit', value);
-}
-
 // ####################################################
 // SET THEME
 // ####################################################

public/js/RoomClient.js

@@ -69,7 +69,6 @@ const _EVENTS = {
 };
 
 let recordedBlobs;
-
 class RoomClient {
     constructor(
         remoteAudioEl,
@@ -802,6 +801,7 @@ class RoomClient {
         elem = document.createElement('video');
         elem.setAttribute('id', id);
         elem.setAttribute('playsinline', true);
+        elem.controls = isVideoControlsOn;
         elem.autoplay = true;
         elem.poster = image.poster;
         this.isMobileDevice || type === mediaType.screen ? (elem.className = '') : (elem.className = 'mirror');
@@ -1040,6 +1040,7 @@ class RoomClient {
                 elem = document.createElement('video');
                 elem.setAttribute('id', id);
                 elem.setAttribute('playsinline', true);
+                elem.controls = isVideoControlsOn;
                 elem.autoplay = true;
                 elem.className = '';
                 elem.poster = image.poster;
@@ -1603,10 +1604,12 @@ class RoomClient {
             this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true;
         });
         videoPlayer.addEventListener('click', () => {
-            if ((this.isMobileDevice && this.isVideoOnFullScreen) || !this.isMobileDevice) {
-                videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none';
-                this.toggleFullScreen(videoPlayer);
-                this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true;
+            if (!videoPlayer.hasAttribute('controls')) {
+                if ((this.isMobileDevice && this.isVideoOnFullScreen) || !this.isMobileDevice) {
+                    videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none';
+                    this.toggleFullScreen(videoPlayer);
+                    this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true;
+                }
             }
         });
         videoPlayer.addEventListener('fullscreenchange', (e) => {
@@ -1623,6 +1626,26 @@ class RoomClient {
         });
     }
 
+    // ####################################################
+    // HANDLE VIDEO | OBJ FIT | CONTROLS |
+    // ####################################################
+
+    handleVideoObjectFit(value) {
+        document.documentElement.style.setProperty('--videoObjFit', value);
+    }
+
+    handleVideoControls(value) {
+        isVideoControlsOn = value == 'On' ? true : false;
+        let cameras = this.getEcN('Camera');
+        for (let i = 0; i < cameras.length; i++) {
+            let cameraId = cameras[i].id.replace('__d', '');
+            let videoPlayer = this.getId(cameraId);
+            videoPlayer.hasAttribute('controls')
+                ? videoPlayer.removeAttribute('controls')
+                : videoPlayer.setAttribute('controls', isVideoControlsOn);
+        }
+    }
+
     // ####################################################
     // TAKE SNAPSHOT
     // ####################################################
@@ -2343,7 +2366,7 @@ class RoomClient {
     }
 
     // ####################################################
-    // SHARE VIDEO YOUTUBE or MP4
+    // SHARE VIDEO YOUTUBE - MP4 - WEBM - OGG or AUDIO mp3
     // ####################################################
 
     handleSV(uid) {

public/views/Room.html

@@ -246,6 +246,13 @@
                         <option value="none">none</option>
                     </select>
                     <br />
+                    <p>Video Controls:</p>
+                    <br />
+                    <select id="BtnVideoControls" class="form-select text-light bg-dark">
+                        <option value="Off">Off</option>
+                        <option value="On">On</option>
+                    </select>
+                    <br />
                 </div>
 
                 <div id="tabStyling" class="tabcontent">