[mirotalksfu] - add video zoomIn/out on video mouse wheel

README.md

@@ -24,31 +24,31 @@
 <br/>
 
 -   Is `100% Free` - `Open Source` - `Self Hosted` and [PWA](https://en.wikipedia.org/wiki/Progressive_web_application)!
--   No download, plug-in or login required, entirely browser-based
+-   No download, plug-in or login required, entirely browser-based.
--   Unlimited number of conference rooms, without call time limitation
+-   Unlimited number of conference rooms, without call time limitation.
--   Desktop and Mobile compatible
+-   Desktop and Mobile compatible.
--   Translated in 133 languages
+-   Translated in 133 languages.
--   Optimized Room URL Sharing (share it to your participants, wait for them to join)
+-   Optimized Room URL Sharing for mobile.
--   Possibility to Password protect the Room for the meeting
+-   Possibility to Password protect the Room for the meeting.
 -   Lobby mode lets you protect your meeting by only allowing people to enter after a formal approval by a moderator.
--   Webcam Streaming up to 4K quality (Front - Rear for mobile)
+-   Webcam Streaming up to 4K quality (Front - Rear for mobile).
--   Echo cancellation and noise suppression that makes your audio crystal clear
+-   Echo cancellation and noise suppression that makes your audio crystal clear.
 -   Screen Sharing to present documents, slides, and more ...
 -   File Sharing (with drag-and-drop), share any files to your participants in the room
 -   Take a snapshot from the video frame(screen/cam) to save it as an image on your device.
 -   Chat with Emoji Picker to show you feeling, private messages, Markdown support, possibility to Save the conversations, and many more.
 -   Speech recognition, execute the app features simply with your voice.
--   Advance collaborative whiteboard for the teachers
+-   Advance collaborative whiteboard for the teachers.
--   Select Microphone - Speaker and Video source
+-   Select Microphone - Speaker and Video source.
--   Recording your Screen, Audio, or Video
+-   Recording your Screen, Audio, or Video.
--   Share any YouTube video in real-time to your participants
+-   Share any YouTube video in real-time to your participants.
--   Share any mp4, webm, ogg video in real-time to your participants with possibility to download it
+-   Share any mp4, webm, ogg video in real-time to your participants with possibility to download it.
--   Full-Screen Mode on mouse click on the Video element
+-   Full-Screen Mode on mouse click on the Video element, Zoom In/Out on video mouse wheel.
--   Possibility to Change UI Themes
+-   Possibility to Change UI Themes.
--   Possibility to protect your Host with username and password (default disabled)
+-   Possibility to protect your Host with username and password (default disabled).
--   Supports [REST API](app/api/README.md) (Application Programming Interface)
+-   Supports [REST API](app/api/README.md) (Application Programming Interface).
--   [Slack](https://api.slack.com/apps/) API integration
+-   [Slack](https://api.slack.com/apps/) API integration.
--   [Sentry](https://sentry.io/) error reporting
+-   [Sentry](https://sentry.io/) error reporting.
 
 </details>
 

public/js/RoomClient.js

@@ -1309,6 +1309,7 @@ class RoomClient {
                 this.handleDD(elem.id, this.peer_id, true);
                 this.handleTS(elem.id, ts.id);
                 this.handlePN(elem.id, pn.id, d.id, isScreen);
+                this.handleZV(elem.id);
                 if (!isScreen) this.handleVP(elem.id, vp.id);
                 this.popupPeerInfo(p.id, this.peer_info);
                 this.checkPeerInfoStatus(this.peer_info);
@@ -1632,6 +1633,7 @@ class RoomClient {
                 this.handlePV(id + '___' + pv.id);
                 this.handleKO(ko.id);
                 this.handlePN(elem.id, pn.id, d.id, remoteIsScreen);
+                this.handleZV(elem.id);
                 this.popupPeerInfo(p.id, peer_info);
                 this.checkPeerInfoStatus(peer_info);
                 if (!remoteIsScreen && remotePrivacyOn) this.setVideoPrivacyStatus(remotePeerId, remotePrivacyOn);
@@ -2355,6 +2357,24 @@ class RoomClient {
         resizeVideoMedia();
     }
 
+    // ####################################################
+    // HANDLE VIDEO ZOOM-IN/OUT
+    // ####################################################
+
+    handleZV(elemId) {
+        let videoPlayer = this.getId(elemId);
+        let zoom = 1;
+        if (videoPlayer) {
+            videoPlayer.addEventListener('wheel', (e) => {
+                e.preventDefault();
+                let delta = e.wheelDelta ? e.wheelDelta : -e.deltaY;
+                delta > 0 ? (zoom *= 1.2) : (zoom /= 1.2);
+                if (zoom < 1) zoom = 1;
+                videoPlayer.style.scale = zoom;
+            });
+        }
+    }
+
     // ####################################################
     // REMOVE VIDEO PIN MEDIA CONTAINER
     // ####################################################