From 7b1e23c990c7fdefbb981ec9398366b7e0f186fc Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Sun, 12 Mar 2023 18:59:34 +0100
Subject: [PATCH] [mirotalksfu] - add video zoomIn/out on video mouse wheel

---
 README.md               | 38 +++++++++++++++++++-------------------
 public/js/RoomClient.js | 20 ++++++++++++++++++++
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index db1a4f83..acb4c63b 100644
--- a/README.md
+++ b/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
--   Unlimited number of conference rooms, without call time limitation
--   Desktop and Mobile compatible
--   Translated in 133 languages
--   Optimized Room URL Sharing (share it to your participants, wait for them to join)
--   Possibility to Password protect the Room for the meeting
+-   No download, plug-in or login required, entirely browser-based.
+-   Unlimited number of conference rooms, without call time limitation.
+-   Desktop and Mobile compatible.
+-   Translated in 133 languages.
+-   Optimized Room URL Sharing for mobile.
+-   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)
--   Echo cancellation and noise suppression that makes your audio crystal clear
+-   Webcam Streaming up to 4K quality (Front - Rear for mobile).
+-   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
--   Select Microphone - Speaker and Video source
--   Recording your Screen, Audio, or Video
--   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
--   Full-Screen Mode on mouse click on the Video element
--   Possibility to Change UI Themes
--   Possibility to protect your Host with username and password (default disabled)
--   Supports [REST API](app/api/README.md) (Application Programming Interface)
--   [Slack](https://api.slack.com/apps/) API integration
--   [Sentry](https://sentry.io/) error reporting
+-   Advance collaborative whiteboard for the teachers.
+-   Select Microphone - Speaker and Video source.
+-   Recording your Screen, Audio, or Video.
+-   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.
+-   Full-Screen Mode on mouse click on the Video element, Zoom In/Out on video mouse wheel.
+-   Possibility to Change UI Themes.
+-   Possibility to protect your Host with username and password (default disabled).
+-   Supports [REST API](app/api/README.md) (Application Programming Interface).
+-   [Slack](https://api.slack.com/apps/) API integration.
+-   [Sentry](https://sentry.io/) error reporting.
 
 </details>
 
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index 4ddb4ef7..e8547ab8 100644
--- a/public/js/RoomClient.js
+++ b/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
     // ####################################################