From 447040110a940abad4ff8a5116d68ec0af5a47e1 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Sun, 3 Oct 2021 17:11:19 +0200
Subject: [PATCH] [mirotalksfu] - add YouTube share video

---
 README.md                 |   1 +
 public/Room.html          |   8 +++
 public/css/Room.css       |  14 +++++
 public/images/youtube.png | Bin 0 -> 2481 bytes
 public/js/Room.js         |   7 +++
 public/js/RoomClient.js   | 119 ++++++++++++++++++++++++++++++++++++++
 public/landing.html       |   4 +-
 src/Server.js             |  11 +++-
 8 files changed, 159 insertions(+), 5 deletions(-)
 create mode 100644 public/images/youtube.png

diff --git a/README.md b/README.md
index 367f07a4..fed88f5d 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@ Powered by `WebRTC` with [SFU](https://mediasoup.org) integrated server.
 -   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
 -   Full Screen Mode on mouse click on the Video element
 -   Supports [REST API](api/README.md) (Application Programming Interface)
 
diff --git a/public/Room.html b/public/Room.html
index cef512fc..8af0c6ea 100644
--- a/public/Room.html
+++ b/public/Room.html
@@ -139,6 +139,14 @@ access to use this app.
             <button id="startScreenButton" class="hidden"><i class="fas fa-desktop"></i> Start screen</button>
             <button id="stopScreenButton" class="hidden"><i class="fas fa-stop-circle"></i> Stop screen</button>
             <button id="fileShareButton" class="hidden"><i class="fas fa-folder-open"></i> File Sharing</button>
+            <div class="dropdown">
+                <button id="youTubeShareButton" class="hidden"><i class="fab fa-youtube"></i> YouTube</button>
+                <div id="youTubeSettings" class="dropdown-content fadein">
+                    <div id="youTubeOptions">
+                        <button id="youTubeCloseBtn"><i class="fas fa-times"></i> Close Video</button>
+                    </div>
+                </div>
+            </div>
             <div class="dropdown">
                 <button id="whiteboardButton" class="hidden">
                     <i class="fas fa-chalkboard-teacher"></i> Whiteboard
diff --git a/public/css/Room.css b/public/css/Room.css
index 7da4c8b1..c6ceb7ca 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -611,6 +611,20 @@ progress {
     min-width: 100%;
 }
 
+/*--------------------------------------------------------------
+# YouTube Video
+--------------------------------------------------------------*/
+
+#youTubeSettings {
+    display: 'none';
+    position: relative;
+    background: var(--body-bg);
+}
+
+#youTubeCloseBtn:hover {
+    color: red;
+}
+
 /*--------------------------------------------------------------
 # Whiteboard
 --------------------------------------------------------------*/
diff --git a/public/images/youtube.png b/public/images/youtube.png
new file mode 100644
index 0000000000000000000000000000000000000000..3dbb3a59729c550cff8697096f5bcf6031727be0
GIT binary patch
literal 2481
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

literal 0
HcmV?d00001

diff --git a/public/js/Room.js b/public/js/Room.js
index c05df16a..af7d2267 100644
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -434,6 +434,7 @@ function roomIsReady() {
     show(raiseHandButton);
     if (isAudioAllowed) show(startAudioButton);
     if (isVideoAllowed) show(startVideoButton);
+    show(youTubeShareButton);
     show(fileShareButton);
     show(whiteboardButton);
     show(participantsButton);
@@ -612,6 +613,12 @@ function handleButtons() {
     fileShareButton.onclick = () => {
         rc.selectFileToShare();
     };
+    youTubeShareButton.onclick = () => {
+        rc.youTubeShareVideo();
+    };
+    youTubeCloseBtn.onclick = () => {
+        rc.closeYouTube(true);
+    };
     sendAbortBtn.onclick = () => {
         rc.abortFileTransfer();
     };
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index 2e3737bb..b0b866a0 100644
--- a/public/js/RoomClient.js
+++ b/public/js/RoomClient.js
@@ -18,6 +18,7 @@ const image = {
     locked: '../images/locked.png',
     mute: '../images/mute.png',
     hide: '../images/hide.png',
+    youtube: '../images/youtube.png',
 };
 
 const mediaType = {
@@ -458,6 +459,13 @@ class RoomClient {
             }.bind(this),
         );
 
+        this.socket.on(
+            'youTubeAction',
+            function (data) {
+                this.youTubeAction(data);
+            }.bind(this),
+        );
+
         this.socket.on(
             'fileAbort',
             function (data) {
@@ -1857,6 +1865,117 @@ class RoomClient {
         return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
     }
 
+    // ####################################################
+    // YOUTUBE SHARE VIDEO
+    // ####################################################
+
+    youTubeShareVideo() {
+        rc.sound('open');
+
+        Swal.fire({
+            background: swalBackground,
+            position: 'center',
+            imageUrl: image.youtube,
+            title: 'Share YouTube Video',
+            text: 'Past YouTube video URL',
+            input: 'text',
+            showCancelButton: true,
+            confirmButtonText: `Share`,
+            showClass: {
+                popup: 'animate__animated animate__fadeInDown',
+            },
+            hideClass: {
+                popup: 'animate__animated animate__fadeOutUp',
+            },
+        }).then((result) => {
+            if (result.value) {
+                if (!this.thereIsParticipants()) {
+                    userLog('info', 'No participants detected', 'top-end');
+                    return;
+                }
+                // https://www.youtube.com/watch?v=RT6_Id5-7-s
+
+                let you_tube_url = this.getYoutubeEmbed(result.value);
+                if (you_tube_url) {
+                    let data = {
+                        peer_name: this.peer_name,
+                        you_tube_url: you_tube_url,
+                        action: 'open',
+                    };
+                    console.log('YouTube video URL: ', you_tube_url);
+                    this.socket.emit('youTubeAction', data);
+                    this.openYouTube(data);
+                } else {
+                    this.userLog('error', 'Not valid YouTube URL', 'top-end');
+                }
+            }
+        });
+    }
+
+    getYoutubeEmbed(url) {
+        let regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+        let match = url.match(regExp);
+        return match && match[7].length == 11 ? 'https://www.youtube.com/embed/' + match[7] + '?autoplay=1' : false;
+    }
+
+    youTubeAction(data) {
+        let action = data.action;
+        switch (action) {
+            case 'open':
+                this.userLog('info', `${peer_name} <i class="fab fa-youtube"></i> opened the YouTube video`, 'top-end');
+                this.openYouTube(data);
+                break;
+            case 'close':
+                this.userLog('info', `${peer_name} <i class="fab fa-youtube"></i> closed the YouTube video`, 'top-end');
+                this.closeYouTube();
+                break;
+        }
+    }
+
+    openYouTube(data) {
+        let d, iframe;
+        let peer_name = data.peer_name;
+        let you_tube_url = data.you_tube_url;
+        this.closeYouTube();
+        youTubeSettings.style.display = 'block';
+        d = document.createElement('div');
+        d.className = 'Camera';
+        d.id = '__youTube';
+        iframe = document.createElement('iframe');
+        iframe.setAttribute('id', '__youTubeIframe');
+        iframe.setAttribute('title', peer_name);
+        iframe.setAttribute('width', '100%');
+        iframe.setAttribute('height', '100%');
+        iframe.setAttribute('src', you_tube_url);
+        iframe.setAttribute(
+            'allow',
+            'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
+        );
+        iframe.setAttribute('frameborder', '0');
+        iframe.setAttribute('allowfullscreen', true);
+        d.appendChild(iframe);
+        this.videoMediaContainer.appendChild(d);
+        resizeVideoMedia();
+        rc.sound('joined');
+    }
+
+    closeYouTube(emit = false) {
+        if (emit) {
+            let data = {
+                peer_name: this.peer_name,
+                action: 'close',
+            };
+            this.socket.emit('youTubeAction', data);
+        }
+        let youTubeDiv = this.getId('__youTube');
+        if (youTubeDiv) {
+            youTubeSettings.style.display = 'none';
+            youTubeDiv.parentNode.removeChild(youTubeDiv);
+            resizeVideoMedia();
+            rc.sound('left');
+        }
+    }
+
     // ####################################################
     // ROOM ACTION
     // ####################################################
diff --git a/public/landing.html b/public/landing.html
index 99fb50fa..c1e9709a 100644
--- a/public/landing.html
+++ b/public/landing.html
@@ -117,8 +117,8 @@
                                 </h2>
                                 <p class="section-paragraph mb-0">
                                     MiroTalk with SFU integrated Server. We engineered a platform with maximum video
-                                    quality lowest latency that makes your calls crystal clear. Desktop and Mobile
-                                    compatible!
+                                    quality lowest latency that makes your calls crystal clear. Compatible with Desktop
+                                    and Mobile devices!
                                 </p>
                             </div>
                         </div>
diff --git a/src/Server.js b/src/Server.js
index 63ba2033..4ba49668 100644
--- a/src/Server.js
+++ b/src/Server.js
@@ -140,7 +140,7 @@ async function ngrokStart() {
             tunnel: tunnel,
         });
     } catch (err) {
-        console.error('Ngrok Start error: ', err);
+        log.error('Ngrok Start error: ', err);
         process.exit(1);
     }
 }
@@ -192,7 +192,7 @@ async function createWorkers() {
             rtcMaxPort: config.mediasoup.worker.rtcMaxPort,
         });
         worker.on('died', () => {
-            console.error('Mediasoup worker died, exiting in 2 seconds... [pid:%d]', worker.pid);
+            log.error('Mediasoup worker died, exiting in 2 seconds... [pid:%d]', worker.pid);
             setTimeout(() => process.exit(1), 2000);
         });
         workers.push(worker);
@@ -265,6 +265,11 @@ io.on('connection', (socket) => {
         roomList.get(socket.room_id).broadCast(socket.id, 'fileAbort', data);
     });
 
+    socket.on('youTubeAction', (data) => {
+        log.debug('YouTube: ', data);
+        roomList.get(socket.room_id).broadCast(socket.id, 'youTubeAction', data);
+    });
+
     socket.on('wbCanvasToJson', (data) => {
         // let objLength = bytesToSize(Object.keys(data).length);
         // log.debug('Send Whiteboard canvas JSON', { length: objLength });
@@ -328,7 +333,7 @@ io.on('connection', (socket) => {
             const { params } = await roomList.get(socket.room_id).createWebRtcTransport(socket.id);
             callback(params);
         } catch (err) {
-            console.error('Create WebRtc Transport error: ', err);
+            log.error('Create WebRtc Transport error: ', err);
             callback({
                 error: err.message,
             });