From 9446f477490b199b3a363ad6653bdd3d3496cae3 Mon Sep 17 00:00:00 2001 From: AndyTheGiant Date: Thu, 24 May 2018 17:42:17 +0200 Subject: [PATCH 1/3] add show switch conditions --- app/script/view_model/VideoCallingViewModel.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/app/script/view_model/VideoCallingViewModel.js b/app/script/view_model/VideoCallingViewModel.js index 4643c5296eb..155a1eefdd6 100644 --- a/app/script/view_model/VideoCallingViewModel.js +++ b/app/script/view_model/VideoCallingViewModel.js @@ -125,6 +125,17 @@ z.viewModel.VideoCallingViewModel = class VideoCallingViewModel { } }); + this.showSwitchCamera = ko.pureComputed(() => { + const hasMultipleCameras = this.availableDevices.video_input().length > 1; + const isVisible = hasMultipleCameras && this.localVideoStream() && this.selfStreamState.videoSend(); + return this.isCallOngoing() && isVisible; + }); + this.showSwitchScreen = ko.pureComputed(() => { + const hasMultipleCameras = this.availableDevices.screen_input().length > 1; + const isVisible = hasMultipleCameras && this.localVideoStream() && this.selfStreamState.screenSend(); + return this.isCallOngoing() && isVisible; + }); + this.showControls = ko.pureComputed(() => { const isFullscreenEnabled = this.showRemoteParticipant() && !this.multitasking.isMinimized(); const isVisible = this.showRemoteVideo() || isFullscreenEnabled; From 941984c3c05eff55b48ff374d46ac69b68a87c42 Mon Sep 17 00:00:00 2001 From: AndyTheGiant Date: Fri, 25 May 2018 12:25:37 +0200 Subject: [PATCH 2/3] feat: toggle device buttons --- app/page/template/video-calling.htm | 23 ++++++++++++++++--- .../components/calling/deviceToggleButton.js | 3 --- app/style/video-calling.less | 7 ++++++ 3 files changed, 27 insertions(+), 6 deletions(-) diff --git a/app/page/template/video-calling.htm b/app/page/template/video-calling.htm index add0174c420..9eb86ce8ee9 100644 --- a/app/page/template/video-calling.htm +++ b/app/page/template/video-calling.htm @@ -51,8 +51,16 @@ data-bind="click: clickedOnStopVideo, css: {'video-controls__button--active': selfStreamState.videoSend()}, attr: {'data-uie-value': selfStreamState.videoSend() ? 'active' : 'inactive'}" data-uie-name="do-call-controls-toggle-video"> -
- + + + + + +
+ @@ -61,7 +69,16 @@ data-bind="click: clickedOnShareScreen, css: {'video-controls__button--active': selfStreamState.screenSend(), 'video-controls__button--disabled': disableToggleScreen()}" data-uie-name="do-call-controls-toggle-screen"> -
+ + + + + +
+ diff --git a/app/script/components/calling/deviceToggleButton.js b/app/script/components/calling/deviceToggleButton.js index 778ec1a4c47..0bd110d5b9d 100644 --- a/app/script/components/calling/deviceToggleButton.js +++ b/app/script/components/calling/deviceToggleButton.js @@ -26,8 +26,6 @@ z.components.DeviceToggleButton = class DeviceToggleButton { constructor(params) { this.availableDevices = params.devices; this.currentDeviceIndex = params.index; - this.iconClass = params.type === z.media.MediaDeviceType.VIDEO_INPUT ? 'icon-video' : 'icon-screensharing'; - this.numberOfDevices = ko.pureComputed(() => { return _.isArray(this.availableDevices()) ? this.availableDevices().length : 0; }); @@ -36,7 +34,6 @@ z.components.DeviceToggleButton = class DeviceToggleButton { ko.components.register('device-toggle-button', { template: ` -
diff --git a/app/style/video-calling.less b/app/style/video-calling.less index 0ec7fcc55d3..86e86dac900 100644 --- a/app/style/video-calling.less +++ b/app/style/video-calling.less @@ -210,6 +210,13 @@ white-space: nowrap; } + device-toggle-button { + position: absolute; + bottom: -16px; + left: 50%; + transform: translateX(-50%); + } + &:hover &__label { opacity: 1; } From 8dcd38ef99065953ea2402a734b226c4a2883cc8 Mon Sep 17 00:00:00 2001 From: AndyTheGiant Date: Fri, 25 May 2018 15:06:34 +0200 Subject: [PATCH 3/3] coe style fixes --- app/page/template/video-calling.htm | 6 +++--- app/script/view_model/VideoCallingViewModel.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/page/template/video-calling.htm b/app/page/template/video-calling.htm index 9eb86ce8ee9..85ad07869dd 100644 --- a/app/page/template/video-calling.htm +++ b/app/page/template/video-calling.htm @@ -58,7 +58,7 @@ type: z.media.MediaDeviceType.VIDEO_INPUT"> - +
@@ -69,14 +69,14 @@ data-bind="click: clickedOnShareScreen, css: {'video-controls__button--active': selfStreamState.screenSend(), 'video-controls__button--disabled': disableToggleScreen()}" data-uie-name="do-call-controls-toggle-screen"> - + - +
diff --git a/app/script/view_model/VideoCallingViewModel.js b/app/script/view_model/VideoCallingViewModel.js index 155a1eefdd6..d140e0b48bb 100644 --- a/app/script/view_model/VideoCallingViewModel.js +++ b/app/script/view_model/VideoCallingViewModel.js @@ -131,8 +131,8 @@ z.viewModel.VideoCallingViewModel = class VideoCallingViewModel { return this.isCallOngoing() && isVisible; }); this.showSwitchScreen = ko.pureComputed(() => { - const hasMultipleCameras = this.availableDevices.screen_input().length > 1; - const isVisible = hasMultipleCameras && this.localVideoStream() && this.selfStreamState.screenSend(); + const hasMultipleScreens = this.availableDevices.screen_input().length > 1; + const isVisible = hasMultipleScreens && this.localVideoStream() && this.selfStreamState.screenSend(); return this.isCallOngoing() && isVisible; });