From 3366fd3578597ad17a573ba80460bad0d812db8c Mon Sep 17 00:00:00 2001 From: Peter Edens Date: Thu, 17 Jan 2019 16:45:29 +1100 Subject: [PATCH 1/8] initial changes for allowing user to select the audio and video input source and audio output device. Signed-off-by: Peter Edens --- js/app.js | 33 ++++++++++++ js/views/callinfoview.js | 111 +++++++++++++++++++++++++++++++++++++++ js/webrtc.js | 5 ++ 3 files changed, 149 insertions(+) diff --git a/js/app.js b/js/app.js index 48231662325..61df3f9a41f 100644 --- a/js/app.js +++ b/js/app.js @@ -218,6 +218,39 @@ }.bind(this)); }, + onAudioOutputChange: function() { + localStorage.setItem("audioOutput", $('#audioOutput').val()); + + }, + + onAudioSourceChange: function() { + localStorage.setItem("audioSource", $('#audioSource').val()); + OCA.SpreedMe.app.setMediaSource(localStorage.getItem("audioSource"), localStorage.getItem("videoSource")); + }, + + onVideoSourceChange: function() { + localStorage.setItem("videoSource", $('#videoSource').val()); + OCA.SpreedMe.app.setMediaSource(localStorage.getItem("audioSource"), localStorage.getItem("videoSource")); + }, + + initMediaSources: function() { + OCA.SpreedMe.app.setMediaSource(localStorage.getItem("audioSource"), localStorage.getItem("videoSource")); + }, + + setMediaSource: function(audioSource, videoSource) { + + if (typeof OCA.SpreedMe.webrtc !== 'undefined') { + OCA.SpreedMe.webrtc.config.media = { + audio: { + optional: [{sourceId: audioSource}] + }, + video: { + optional: [{sourceId: videoSource}] + } + }; + } + }, + _onKeyUp: function(event) { // Define which objects to check for the event properties. var key = event.which; diff --git a/js/views/callinfoview.js b/js/views/callinfoview.js index 10cc8de23f7..137cdc76473 100644 --- a/js/views/callinfoview.js +++ b/js/views/callinfoview.js @@ -66,6 +66,29 @@ ' {{/if}}' + ' ' + '{{/if}}' + + '
' + + ' ' + + '
' + + '
' + + '
' + + ' ' + + ' '+ + ' ' + + '
' + + '
' + + ' ' + + ' '+ + ' ' + + '
' + + '
' + + ' ' + + ' '+ + ' ' + + '
' + + ' '+ + '
' + + '
' + + '
' + '{{#if showShareLink}}' + ' ' + - '{{#if showShareLink}}' + - ' ' + - '{{/if}}' + - ''; + ' '; var CallInfoView = Marionette.View.extend({ @@ -153,7 +147,7 @@ 'click @ui.passwordButton': 'showPasswordInput', 'click @ui.passwordConfirm': 'confirmPassword', 'submit @ui.passwordForm': 'confirmPassword', - 'click @ui.settingsInput': 'settingsClicked', + 'click @ui.settingsButton': 'settingsButtonClicked', }, modelEvents: { @@ -270,16 +264,6 @@ $(self.ui.passwordInput).focus(); }); - this.ui.settingsButton.tooltip({ - placement: 'bottom', - trigger: 'hover', - title: t('spreed', 'Settings') - }); - - OC.registerMenu($(this.ui.settingsButton), $(this.ui.settingsMenu), function() { - $(self.ui.settingsInput).focus(); - }); - this.initSettings(); }, @@ -312,7 +296,10 @@ // hide empty options if ($('#audioOutput option').length === 0) { - $('#audioOutput').hide(); + var option = document.createElement("option"); + option.value = sourceInfo.deviceId; + option.text = 'Default'; + outputSelect.appendChild(option); } else { var val = localStorage.getItem("audioOutput"); @@ -350,9 +337,9 @@ navigator.mediaDevices.enumerateDevices().then(this.gotSources); }, - settingsClicked: function(e) { + settingsButtonClicked: function(e) { e.preventDefault(); - e.stopPropagation(); + $('.settings-menu').toggle(); }, _canModerate: function() { From a61f9bc95a51c4ecbeefb7b2ee871a17b4a36184 Mon Sep 17 00:00:00 2001 From: Peter Edens Date: Tue, 22 Jan 2019 09:36:23 +1100 Subject: [PATCH 3/8] restarting a call if the media device changes while connected. Signed-off-by: Peter Edens --- js/app.js | 72 ++++++++++++++++++++++++++++++++++++++++ js/views/callinfoview.js | 46 +++++++++++++------------ 2 files changed, 97 insertions(+), 21 deletions(-) diff --git a/js/app.js b/js/app.js index 61df3f9a41f..7a3e22ffc20 100644 --- a/js/app.js +++ b/js/app.js @@ -249,6 +249,73 @@ } }; } + + if (OCA.SpreedMe.app.signaling.currentCallToken !== null) { + this.changingMedia = true; + OCA.SpreedMe.app.signaling.leaveCurrentCall(); + OCA.SpreedMe.webrtc.stopLocalVideo(); + + OCA.SpreedMe.webrtc.startLocalVideo(OCA.SpreedMe.webrtc.config.media); + OCA.SpreedMe.app.connection.joinCall(this.activeRoom.get('token')); + + /*var senders = existingPeer.pc.getLocalStreams(); + for (var i = 0; i < senders.length; i++) { + existingPeer.pc.removeStream(senders[i]); + } + OCA.SpreedMe.webrtc.on('localStream', function() { + senders = this.webrtc.localStreams; + var localStreams = existingPeer.pc.getLocalStreams(); + for (var i = 0; i < senders.length; i++) { + if (!localStreams.includes(senders[i])) { + existingPeer.pc.addStream(senders[i]); + } + } + });*/ + } + }, + + startShareScreen: function(mode) { + var webrtc = OCA.SpreedMe.webrtc; + var screensharingButton = $('#screensharing-button'); + screensharingButton.prop('disabled', true); + webrtc.shareScreen(mode, function(err) { + screensharingButton.prop('disabled', false); + if (!err) { + $('#screensharing-button').attr('data-original-title', t('spreed', 'Screensharing options')) + .removeClass('screensharing-disabled icon-screen-off') + .addClass('icon-screen'); + return; + } + switch (err.name) { + case "HTTPS_REQUIRED": + OC.Notification.showTemporary(t('spreed', 'Screensharing requires the page to be loaded through HTTPS.')); + break; + case "PERMISSION_DENIED": + case "NotAllowedError": + case "CEF_GETSCREENMEDIA_CANCELED": // Experimental, may go away in the future. + break; + case "FF52_REQUIRED": + OC.Notification.showTemporary(t('spreed', 'Sharing your screen only works with Firefox version 52 or newer.')); + break; + case "EXTENSION_UNAVAILABLE": + var extensionURL = null; + if (!!window.chrome && !!window.chrome.webstore) {// Chrome + extensionURL = 'https://chrome.google.com/webstore/detail/screensharing-for-nextclo/kepnpjhambipllfmgmbapncekcmabkol'; + } + if (extensionURL) { + var text = t('spreed', 'Screensharing extension is required to share your screen.'); + var element = $('').attr('href', extensionURL).attr('target','_blank').text(text); + OC.Notification.showTemporary(element, {isHTML: true}); + } else { + OC.Notification.showTemporary(t('spreed', 'Please use a different browser like Firefox or Chrome to share your screen.')); + } + break; + default: + OC.Notification.showTemporary(t('spreed', 'An error occurred while starting screensharing.')); + console.log("Could not start screensharing", err); + break; + } + }); }, _onKeyUp: function(event) { @@ -396,6 +463,11 @@ return; } + if (this.changingMedia) { + this.changingMedia = false; + return; + } + var flags = this.activeRoom.get('participantFlags') || 0; var inCall = flags & OCA.SpreedMe.app.FLAG_IN_CALL !== 0; if (inCall && this._chatViewInMainView === true) { diff --git a/js/views/callinfoview.js b/js/views/callinfoview.js index 0ff21806f48..4b5989553b4 100644 --- a/js/views/callinfoview.js +++ b/js/views/callinfoview.js @@ -70,25 +70,28 @@ ' ' + '' + '' + - ' '; + ''; + var CallInfoView = Marionette.View.extend({ @@ -108,6 +111,7 @@ canFullModerate: this._canFullModerate(), isPublic: this.model.get('type') === 3, showShareLink: !canModerate && this.model.get('type') === 3, + canPublish: OCA.SpreedMe.canPublish(), isDeletable: canModerate && (Object.keys(this.model.get('participants')).length > 2 || this.model.get('numGuests') > 0) }); }, @@ -282,10 +286,10 @@ var sourceInfo = sourceInfos[i]; var option = document.createElement("option"); option.value = sourceInfo.deviceId; - if (sourceInfo.kind === 'audioinput') { + if (sourceInfo.kind === 'audioinput' && audioSelect !== null) { option.text = sourceInfo.label || 'microphone ' + (audioSelect.length + 1); audioSelect.appendChild(option); - } else if (sourceInfo.kind === 'videoinput') { + } else if (sourceInfo.kind === 'videoinput' && videoSelect !== null) { option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1); videoSelect.appendChild(option); } else if (sourceInfo.kind === 'audiooutput') { From d606418bc1bb30b7eaca0a7a53d7041996bbd269 Mon Sep 17 00:00:00 2001 From: Peter Edens Date: Wed, 23 Jan 2019 08:52:48 +1100 Subject: [PATCH 4/8] added speaker icon image Signed-off-by: Peter Edens --- img/speaker.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 img/speaker.svg diff --git a/img/speaker.svg b/img/speaker.svg new file mode 100644 index 00000000000..277120ed9ec --- /dev/null +++ b/img/speaker.svg @@ -0,0 +1 @@ + From 7cca819355016cfdbc1d086c07e3c401ff469b75 Mon Sep 17 00:00:00 2001 From: Joas Schilling <213943+nickvergessen@users.noreply.github.com> Date: Wed, 23 Jan 2019 09:16:57 +1100 Subject: [PATCH 5/8] Update js/app.js Co-Authored-By: Peterede --- js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index 7a3e22ffc20..8556ff05c09 100644 --- a/js/app.js +++ b/js/app.js @@ -219,7 +219,7 @@ }, onAudioOutputChange: function() { - localStorage.setItem("audioOutput", $('#audioOutput').val()); + localStorage.setItem('audioOutput', $('#audioOutput').val()); }, From 3dc46b50812a6ccabddaa6c15a02e10b5df43a9b Mon Sep 17 00:00:00 2001 From: Peter Edens Date: Wed, 23 Jan 2019 09:18:58 +1100 Subject: [PATCH 6/8] restored share link UI Signed-off-by: Peter Edens --- js/views/callinfoview.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/js/views/callinfoview.js b/js/views/callinfoview.js index 4b5989553b4..9edea4b61b3 100644 --- a/js/views/callinfoview.js +++ b/js/views/callinfoview.js @@ -66,6 +66,11 @@ ' {{/if}}' + ' ' + '{{/if}}' + + '{{#if showShareLink}}' + + ' ' + + '{{/if}}' + '
' + ' ' + '
' + From 834cd7cfe5cd1817adc008a7f832ed31cfc0cf78 Mon Sep 17 00:00:00 2001 From: Peter Edens Date: Wed, 23 Jan 2019 09:39:19 +1100 Subject: [PATCH 7/8] removed background-size from settings-input Signed-off-by: Peter Edens --- css/style.scss | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/css/style.scss b/css/style.scss index bd4a03397a8..19085e25385 100644 --- a/css/style.scss +++ b/css/style.scss @@ -960,18 +960,6 @@ input[type="password"] { .settings-input { width: 90%; margin-bottom: 10px; - background-image: - linear-gradient(45deg, transparent 50%, gray 50%), - linear-gradient(135deg, gray 50%, transparent 50%); - background-position: - calc(100% - 20px) calc(1em + 2px), - calc(100% - 15px) calc(1em + 2px), - calc(100% - 2.5em) 0.5em; - background-size: - 5px 5px, - 5px 5px, - 1px 1.5em; - background-repeat: no-repeat; } .settings-menu { From a10b969ba3588bc3361f99c5ae51c901973cbe44 Mon Sep 17 00:00:00 2001 From: Peter Edens Date: Wed, 23 Jan 2019 09:41:57 +1100 Subject: [PATCH 8/8] replaced spaces with tabs Signed-off-by: Peter Edens --- css/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/style.scss b/css/style.scss index 19085e25385..aa1bc561e9e 100644 --- a/css/style.scss +++ b/css/style.scss @@ -952,9 +952,9 @@ input[type="password"] { .settings-option { background-position: left; display: inline-block; - position: relative; - top: 3px; - margin-right: 5px; + position: relative; + top: 3px; + margin-right: 5px; } .settings-input {