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 @@ -
  • - -
  • + 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) {