From b08a2e3943a1be9b48e895ddb117539deadc424d Mon Sep 17 00:00:00 2001
From: Alain Takoudjou <alain.takoudjou@nexedi.com>
Date: Mon, 29 Mar 2021 20:44:24 +0200
Subject: [PATCH] Add Unshare button on each shared video and remove global
 unshare screen button

---
 static/galene.css  | 15 +++++++++++++--
 static/galene.html | 14 ++++++++------
 static/galene.js   | 36 ++++++++++++++++++++++++++----------
 3 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/static/galene.css b/static/galene.css
index 5f6ed69..8677f2e 100644
--- a/static/galene.css
+++ b/static/galene.css
@@ -478,7 +478,10 @@ textarea.form-reply {
 .top-video-controls {
     text-align: right;
     bottom: inherit;
-    top: 5px;
+    top: 0;
+    line-height: 1.1;
+    font-size: 1.3em;
+    text-shadow: 1px 1px 2px rgb(90 86 86);
 }
 
 .controls-button {
@@ -512,7 +515,7 @@ textarea.form-reply {
     cursor: pointer;
 }
 
-.video-controls span:last-child {
+.video-controls span:last-child, .top-video-controls span:last-child {
     margin-right: 0;
 }
 
@@ -530,6 +533,10 @@ textarea.form-reply {
     font-size: 0.85em;
 }
 
+.video-controls .video-stop {
+    color: #d03e3e;
+}
+
 .video-controls span.disabled, .video-controls span.disabled:hover, .top-video-controls span.disabled:hover{
     opacity: .2;
     color: #c8c8c8
@@ -1233,6 +1240,10 @@ header .collapse {
         margin-bottom: 60px;
     }
 
+    .top-video-controls {
+        opacity: 1;
+    }
+
     .login-container {
         position: fixed;
         height: calc(var(--vh, 1vh) * 100 - 56px);
diff --git a/static/galene.html b/static/galene.html
index 49d10bd..1786929 100644
--- a/static/galene.html
+++ b/static/galene.html
@@ -60,12 +60,6 @@
                     <label>Share Screen</label>
                   </div>
                 </li>
-                <li>
-                  <div id="unsharebutton" class="invisible nav-link nav-button nav-cancel">
-                    <span><i class="fas fa-window-close" aria-hidden="true"></i></span>
-                    <label>Unshare Screen</label>
-                  </div>
-                </li>
                 <li>
                   <div id="stopvideobutton" class="invisible nav-link nav-button nav-cancel">
                     <span><i class="fas fa-window-close" aria-hidden="true"></i></span>
@@ -265,6 +259,14 @@
         </div>
       </div>
     </div>
+    <div id="topvideocontrols-template" class="invisible">
+      <div class="top-video-controls">
+        <div class="controls-button controls-right">
+          <span class="close-icon video-stop" title="Stop video">
+          </span>
+        </div>
+      </div>
+    </div>
 
     <script src="/protocol.js" defer></script>
     <script src="/scripts/toastify.js" defer></script>
diff --git a/static/galene.js b/static/galene.js
index 254f34b..df4b642 100644
--- a/static/galene.js
+++ b/static/galene.js
@@ -420,7 +420,6 @@ function setButtonsVisibility() {
     let connected = serverConnection && serverConnection.socket;
     let permissions = serverConnection.permissions;
     let local = !!findUpMedia('local');
-    let share = !!findUpMedia('screenshare');
     let video = !!findUpMedia('video');
     let canWebrtc = !(typeof RTCPeerConnection === 'undefined');
     let canFile =
@@ -440,7 +439,6 @@ function setButtonsVisibility() {
     // allow multiple shared documents
     setVisibility('sharebutton', canWebrtc && permissions.present &&
                   ('getDisplayMedia' in navigator.mediaDevices));
-    setVisibility('unsharebutton', share);
 
     setVisibility('stopvideobutton', video);
 
@@ -516,12 +514,6 @@ document.getElementById('sharebutton').onclick = function(e) {
     addShareMedia();
 };
 
-document.getElementById('unsharebutton').onclick = function(e) {
-    e.preventDefault();
-    closeUpMediaKind('screenshare');
-    resizePeers();
-};
-
 document.getElementById('stopvideobutton').onclick = function(e) {
     e.preventDefault();
     closeUpMediaKind('video');
@@ -1428,10 +1420,18 @@ function addCustomControls(media, container, c) {
 
     let template =
         document.getElementById('videocontrols-template').firstElementChild;
+    let toptemplate =
+        document.getElementById('topvideocontrols-template').firstElementChild;
     controls = cloneHTMLElement(template);
     controls.id = 'controls-' + c.localId;
+    let topcontrols = cloneHTMLElement(toptemplate);
+    topcontrols.id = 'topcontrols-' + c.localId;
 
     let volume = getVideoButton(controls, 'volume');
+    let stopsharing = getVideoButton(topcontrols, 'video-stop');
+    if (c.kind !== "screenshare") {
+        stopsharing.remove();
+    }
     if(c.kind === 'local') {
         volume.remove();
     } else {
@@ -1440,8 +1440,9 @@ function addCustomControls(media, container, c) {
                         getVideoButton(controls, "volume-slider"));
     }
 
+    container.appendChild(topcontrols);
     container.appendChild(controls);
-    registerControlHandlers(media, container);
+    registerControlHandlers(media, container, c);
 }
 
 /**
@@ -1474,8 +1475,9 @@ function setVolumeButton(muted, button, slider) {
 /**
  * @param {HTMLVideoElement} media
  * @param {HTMLElement} container
+ * @param {Stream} c
  */
-function registerControlHandlers(media, container) {
+function registerControlHandlers(media, container, c) {
     let play = getVideoButton(container, 'video-play');
     if(play) {
         play.onclick = function(event) {
@@ -1484,6 +1486,20 @@ function registerControlHandlers(media, container) {
         };
     }
 
+    let stop = getVideoButton(container, 'video-stop');
+    if(stop) {
+        stop.onclick = function(event) {
+            event.preventDefault();
+            try {
+                c.close(true);
+                delMedia(c.localId);
+            } catch(e) {
+                console.error(e);
+                displayError(e);
+            }
+        };
+    }
+
     let volume = getVideoButton(container, 'volume');
     if (volume) {
         volume.onclick = function(event) {