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 @@
-
-
-
-
-
-
@@ -265,6 +259,14 @@
+
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) {