From 31d8bac1a0a6cb28f99df4f57774110695a9499a Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Mon, 3 Jan 2022 14:29:39 +0100 Subject: [PATCH] [mirotalksfu] - add full screen btn --- public/css/VideoGrid.css | 32 +++++++++++++++-------- public/js/RoomClient.js | 56 ++++++++++++++++++++++++++++------------ 2 files changed, 61 insertions(+), 27 deletions(-) diff --git a/public/css/VideoGrid.css b/public/css/VideoGrid.css index 1f36299..88d69a7 100644 --- a/public/css/VideoGrid.css +++ b/public/css/VideoGrid.css @@ -32,12 +32,12 @@ animation: show 0.4s ease; } -#videoMediaContainer p { +#videoMediaContainer i { position: absolute; - bottom: 0; - color: white; + display: none; + top: 0; + color: rgb(0, 255, 71); font-size: 14px; - display: flex; align-items: center; padding: 5px; margin: 5px; @@ -47,12 +47,23 @@ background: rgba(0, 0, 0, 0.4); } -#videoMediaContainer i { +.audio { position: absolute; - display: none; - top: 0; - color: rgb(0, 255, 71); + right: 0; + color: white; + margin: 5px; + width: auto; + height: 25px; + border-radius: 5px; + background: rgba(0, 0, 0, 0.1); +} + +.username { + position: absolute; + bottom: 0; + color: white; font-size: 14px; + display: flex; align-items: center; padding: 5px; margin: 5px; @@ -62,12 +73,11 @@ background: rgba(0, 0, 0, 0.4); } -#videoMediaContainer button { +.fscreen { position: absolute; right: 0; + bottom: 0px; color: white; - display: flex; - align-items: center; margin: 5px; width: auto; height: 25px; diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index fa1e4e1..54eda16 100644 --- a/public/js/RoomClient.js +++ b/public/js/RoomClient.js @@ -6,10 +6,13 @@ const cfg = { const html = { newline: '
', - audioOn: 'fas fa-microphone', - audioOff: 'fas fa-microphone-slash', + audioOn: 'fas fa-microphone audio', + audioOff: 'fas fa-microphone-slash audio', videoOn: 'fas fa-video', videoOff: 'fas fa-video-slash', + userName: 'fas fa-user username', + userHand: 'fas fa-hand-paper pulsate', + fullScreen: 'fas fa-expand fscreen', }; const image = { @@ -743,7 +746,7 @@ class RoomClient { } async handleProducer(id, type, stream) { - let elem, d, p, i, b; + let elem, d, p, i, b, fs; this.removeVideoOff(this.peer_id); d = document.createElement('div'); d.className = 'Camera'; @@ -756,22 +759,26 @@ class RoomClient { this.isMobileDevice || type === mediaType.screen ? (elem.className = '') : (elem.className = 'mirror'); p = document.createElement('p'); p.id = this.peer_id + '__name'; - p.className = 'fas fa-user'; + p.className = html.userName; p.innerHTML = ' ' + this.peer_name + ' (me)'; i = document.createElement('i'); i.id = this.peer_id + '__hand'; - i.className = 'fas fa-hand-paper pulsate'; + i.className = html.userHand; b = document.createElement('button'); b.id = this.peer_id + '__audio'; b.className = this.peer_info.peer_audio ? html.audioOn : html.audioOff; + fs = document.createElement('button'); + fs.id = id + '__fullScreen'; + fs.className = html.fullScreen; d.appendChild(elem); d.appendChild(i); d.appendChild(p); d.appendChild(b); + d.appendChild(fs); this.videoMediaContainer.appendChild(d); this.attachMediaStream(elem, stream, type, 'Producer'); this.myVideoEl = elem; - this.handleFS(elem.id); + this.handleFS(elem.id, fs.id); this.setTippy(elem.id, 'Full Screen', 'top-end'); this.popupPeerInfo(p.id, this.peer_info); this.checkPeerInfoStatus(this.peer_info); @@ -940,7 +947,7 @@ class RoomClient { } handleConsumer(id, type, stream, peer_name, peer_info) { - let elem, d, p, i, b; + let elem, d, p, i, b, fs; switch (type) { case mediaType.video: this.removeVideoOff(peer_info.peer_id); @@ -955,21 +962,25 @@ class RoomClient { elem.poster = image.poster; p = document.createElement('p'); p.id = peer_info.peer_id + '__name'; - p.className = 'fas fa-user'; + p.className = html.userName; p.innerHTML = ' ' + peer_name; i = document.createElement('i'); i.id = peer_info.peer_id + '__hand'; - i.className = 'fas fa-hand-paper pulsate'; + i.className = html.userHand; b = document.createElement('button'); b.id = peer_info.peer_id + '__audio'; b.className = peer_info.peer_audio ? html.audioOn : html.audioOff; + fs = document.createElement('button'); + fs.id = id + '__fullScreen'; + fs.className = html.fullScreen; d.appendChild(elem); d.appendChild(p); d.appendChild(i); d.appendChild(b); + d.appendChild(fs); this.videoMediaContainer.appendChild(d); this.attachMediaStream(elem, stream, type, 'Consumer'); - this.handleFS(elem.id); + this.handleFS(elem.id, fs.id); this.setTippy(elem.id, 'Full Screen', 'top-end'); this.popupPeerInfo(p.id, peer_info); this.checkPeerInfoStatus(peer_info); @@ -1024,14 +1035,14 @@ class RoomClient { i.id = peer_id + '__img'; p = document.createElement('p'); p.id = peer_id + '__name'; - p.className = 'fas fa-user'; + p.className = html.userName; p.innerHTML = ' ' + peer_name + (remotePeer ? '' : ' (me) '); b = document.createElement('button'); b.id = peer_id + '__audio'; b.className = peer_audio ? html.audioOn : html.audioOff; h = document.createElement('i'); h.id = peer_info.peer_id + '__hand'; - h.className = 'fas fa-hand-paper pulsate'; + h.className = html.userHand; d.appendChild(i); d.appendChild(p); d.appendChild(b); @@ -1361,16 +1372,29 @@ class RoomClient { ? document.exitFullscreen() : el.requestFullscreen(); } - this.isVideoOnFullScreen = document.fullscreenEnabled; + if (elem == null) this.isVideoOnFullScreen = document.fullscreenEnabled; } - handleFS(id) { - let videoPlayer = this.getId(id); - videoPlayer.addEventListener('click', () => { + handleFS(elemId, fsId) { + let videoPlayer = this.getId(elemId); + let btnFs = this.getId(fsId); + this.setTippy(fsId, 'Full screen', 'top'); + + btnFs.addEventListener('click', () => { videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none'; this.toggleFullScreen(videoPlayer); this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true; }); + videoPlayer.addEventListener('click', () => { + if ( + (this.isMobileDevice && this.isVideoOnFullScreen) || + (!this.isMobileDevice && !this.isVideoOnFullScreen) + ) { + videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none'; + this.toggleFullScreen(videoPlayer); + this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true; + } + }); videoPlayer.addEventListener('fullscreenchange', (e) => { if (!document.fullscreenElement) { videoPlayer.style.pointerEvents = 'auto';