From 071c147440e963baab03e60056eb74f03b1146c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 26 Oct 2021 12:01:17 +0200 Subject: [PATCH 01/10] Remove speaking indicator MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/voip/_CallView.scss | 1 - res/css/views/voip/_VideoFeed.scss | 8 -------- src/components/views/voip/VideoFeed.tsx | 9 --------- 3 files changed, 18 deletions(-) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 088486bdf6c..26c6f3e73ce 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -74,7 +74,6 @@ limitations under the License. > .mx_VideoFeed { width: 100%; height: 100%; - border-width: 0 !important; // Override mx_VideoFeed_speaking &.mx_VideoFeed_voice { display: flex; diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss index 1f17a546928..29dcb5cba3c 100644 --- a/res/css/views/voip/_VideoFeed.scss +++ b/res/css/views/voip/_VideoFeed.scss @@ -26,14 +26,6 @@ limitations under the License. aspect-ratio: 16 / 9; } - &.mx_VideoFeed_speaking { - border: $accent-color 2px solid; - - .mx_VideoFeed_video { - border-radius: 0; - } - } - .mx_VideoFeed_video { width: 100%; background-color: transparent; diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx index 13461c35918..4f1a1c19d96 100644 --- a/src/components/views/voip/VideoFeed.tsx +++ b/src/components/views/voip/VideoFeed.tsx @@ -45,7 +45,6 @@ interface IProps { interface IState { audioMuted: boolean; videoMuted: boolean; - speaking: boolean; } @replaceableComponent("views.voip.VideoFeed") @@ -58,7 +57,6 @@ export default class VideoFeed extends React.PureComponent { this.state = { audioMuted: this.props.feed.isAudioMuted(), videoMuted: this.props.feed.isVideoMuted(), - speaking: false, }; } @@ -106,7 +104,6 @@ export default class VideoFeed extends React.PureComponent { this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream); this.props.feed.removeListener(CallFeedEvent.MuteStateChanged, this.onMuteStateChanged); if (this.props.feed.purpose === SDPStreamMetadataPurpose.Usermedia) { - this.props.feed.removeListener(CallFeedEvent.Speaking, this.onSpeaking); this.props.feed.measureVolumeActivity(false); } this.stopMedia(); @@ -115,7 +112,6 @@ export default class VideoFeed extends React.PureComponent { this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream); this.props.feed.addListener(CallFeedEvent.MuteStateChanged, this.onMuteStateChanged); if (this.props.feed.purpose === SDPStreamMetadataPurpose.Usermedia) { - this.props.feed.addListener(CallFeedEvent.Speaking, this.onSpeaking); this.props.feed.measureVolumeActivity(true); } this.playMedia(); @@ -172,10 +168,6 @@ export default class VideoFeed extends React.PureComponent { }); }; - private onSpeaking = (speaking: boolean): void => { - this.setState({ speaking }); - }; - private onResize = (e) => { if (this.props.onResize && !this.props.feed.isLocal()) { this.props.onResize(e); @@ -187,7 +179,6 @@ export default class VideoFeed extends React.PureComponent { const wrapperClasses = classnames("mx_VideoFeed", { mx_VideoFeed_voice: this.state.videoMuted, - mx_VideoFeed_speaking: this.state.speaking, }); const micIconClasses = classnames("mx_VideoFeed_mic", { mx_VideoFeed_mic_muted: this.state.audioMuted, From d2e29996db9d591f3bd2e92320efd1e7222be990 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 26 Oct 2021 12:01:55 +0200 Subject: [PATCH 02/10] Remove mic icon for primary feed MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/VideoFeed.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx index 4f1a1c19d96..9386529ab51 100644 --- a/src/components/views/voip/VideoFeed.tsx +++ b/src/components/views/voip/VideoFeed.tsx @@ -186,7 +186,11 @@ export default class VideoFeed extends React.PureComponent { }); let micIcon; - if (feed.purpose !== SDPStreamMetadataPurpose.Screenshare && !pipMode) { + if ( + feed.purpose !== SDPStreamMetadataPurpose.Screenshare && + !primary && + !pipMode + ) { micIcon = (
); From 26d0ea2ccf607ce03ea7dd0d5a3ee459a566a226 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 26 Oct 2021 13:00:24 +0200 Subject: [PATCH 03/10] Remove caching as it doesn't seem to be neccessary MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/voip/CallView/CallViewButtons.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/components/views/voip/CallView/CallViewButtons.tsx b/src/components/views/voip/CallView/CallViewButtons.tsx index 466311f4212..e7cba611944 100644 --- a/src/components/views/voip/CallView/CallViewButtons.tsx +++ b/src/components/views/voip/CallView/CallViewButtons.tsx @@ -162,18 +162,6 @@ export default class CallViewButtons extends React.Component { mx_CallViewButtons_button_sidebarOff: !this.props.buttonsState.sidebarShown, }); - // Put the other states of the mic/video icons in the document to make sure they're cached - // (otherwise the icon disappears briefly when toggled) - const micCacheClasses = classNames("mx_CallViewButtons_button", "mx_CallViewButtons_button_invisible", { - mx_CallViewButtons_button_micOn: this.props.buttonsState.micMuted, - mx_CallViewButtons_button_micOff: !this.props.buttonsState.micMuted, - }); - - const vidCacheClasses = classNames("mx_CallViewButtons_button", "mx_CallViewButtons_button_invisible", { - mx_CallViewButtons_button_vidOn: this.props.buttonsState.micMuted, - mx_CallViewButtons_button_vidOff: !this.props.buttonsState.micMuted, - }); - const callControlsClasses = classNames("mx_CallViewButtons", { mx_CallViewButtons_hidden: !this.state.visible, }); @@ -298,8 +286,6 @@ export default class CallViewButtons extends React.Component { yOffset={TOOLTIP_Y_OFFSET} /> { vidMuteButton } -
-
{ screensharingButton } { sidebarButton } { contextMenuButton } From 782485004905acb745658e8c60fb3902702aa142 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 26 Oct 2021 13:00:47 +0200 Subject: [PATCH 04/10] Add call view buttons colors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/themes/dark/css/_dark.scss | 5 +++++ res/themes/legacy-dark/css/_legacy-dark.scss | 8 +++++--- res/themes/legacy-light/css/_legacy-light.scss | 5 +++++ res/themes/light/css/_light.scss | 5 +++++ 4 files changed, 20 insertions(+), 3 deletions(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 865eb4de433..0761ee16282 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -103,6 +103,11 @@ $settings-profile-button-bg-color: #e7e7e7; $settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color; $settings-subsection-fg-color: $text-secondary-color; +$call-view-button-on-foreground: $primary-content; +$call-view-button-on-background: $system; +$call-view-button-off-foreground: $system; +$call-view-button-off-background: $primary-content; + $topleftmenu-color: $primary-content; $roomheader-color: $primary-content; $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3); diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 5fa0e903ba2..fb237755970 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -23,8 +23,6 @@ $tertiary-fg-color: $primary-fg-color; $primary-bg-color: $bg-color; $muted-fg-color: $header-panel-text-primary-color; - - // used for dialog box text $light-fg-color: $header-panel-text-secondary-color; @@ -131,8 +129,12 @@ $space-nav: rgba($panel-base, 0.1); // ******************** -$theme-button-bg-color: #e3e8f0; +$call-view-button-on-foreground: $primary-content; +$call-view-button-on-background: $system; +$call-view-button-off-foreground: $system; +$call-view-button-off-background: $primary-content; +$theme-button-bg-color: #e3e8f0; $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons $roomlist-filter-active-bg-color: $roomlist-button-bg-color; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 7fe56497875..d92a0387e13 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -206,6 +206,11 @@ $space-nav: rgba($tertiary-content, 0.15); $voipcall-plinth-color: $system; +$call-view-button-on-foreground: $secondary-content; +$call-view-button-on-background: $background; +$call-view-button-off-foreground: $background; +$call-view-button-off-background: $secondary-content; + $username-variant1-color: #368bd6; $username-variant2-color: #ac3ba8; $username-variant3-color: #03b381; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index ef4ab0115d4..62b961d0082 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -155,6 +155,11 @@ $settings-profile-button-bg-color: #e7e7e7; $settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color; $settings-subsection-fg-color: #61708b; +$call-view-button-on-foreground: $secondary-content; +$call-view-button-on-background: $background; +$call-view-button-off-foreground: $background; +$call-view-button-off-background: $secondary-content; + $voip-decline-color: #f48080; $voip-accept-color: #80f480; From 06b45be32c483ee86c500a31bd09cd4b5e9f7c29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 28 Oct 2021 08:37:43 +0200 Subject: [PATCH 05/10] Refactor button code MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/voip/CallView/_CallViewButtons.scss | 123 +++++++++---- .../views/voip/CallView/CallViewButtons.tsx | 169 +++++++----------- 2 files changed, 157 insertions(+), 135 deletions(-) diff --git a/res/css/views/voip/CallView/_CallViewButtons.scss b/res/css/views/voip/CallView/_CallViewButtons.scss index d9396ac3eec..b046ddf40aa 100644 --- a/res/css/views/voip/CallView/_CallViewButtons.scss +++ b/res/css/views/voip/CallView/_CallViewButtons.scss @@ -20,10 +20,11 @@ limitations under the License. position: absolute; display: flex; justify-content: center; - bottom: 5px; + bottom: 24px; opacity: 1; transition: opacity 0.5s; z-index: 200; // To be above _all_ feeds + gap: 18px; &.mx_CallViewButtons_hidden { opacity: 0.001; // opacity 0 can cause a re-layout @@ -32,69 +33,121 @@ limitations under the License. .mx_CallViewButtons_button { cursor: pointer; - margin-left: 2px; - margin-right: 2px; + + background-color: $call-view-button-on-background; + + border-radius: 100%; + height: 40px; + width: 40px; + + display: flex; + justify-content: center; + align-items: center; &::before { content: ''; display: inline-block; - height: 48px; - width: 48px; + mask-repeat: no-repeat; + mask-size: contain; + mask-position: center; - background-repeat: no-repeat; - background-size: contain; - background-position: center; - } + background-color: $call-view-button-on-foreground; - &.mx_CallViewButtons_dialpad::before { - background-image: url('$(res)/img/voip/dialpad.svg'); + height: 24px; + width: 24px; } - &.mx_CallViewButtons_button_micOn::before { - background-image: url('$(res)/img/voip/mic-on.svg'); - } + // State buttons + &.mx_CallViewButtons_button_on { + background-color: $call-view-button-on-background; - &.mx_CallViewButtons_button_micOff::before { - background-image: url('$(res)/img/voip/mic-off.svg'); - } + &::before { + background-color: $call-view-button-on-foreground; + } - &.mx_CallViewButtons_button_vidOn::before { - background-image: url('$(res)/img/voip/vid-on.svg'); - } + &.mx_CallViewButtons_button_mic::before { + mask-image: url('$(res)/img/voip/call-view/mic-on.svg'); + } - &.mx_CallViewButtons_button_vidOff::before { - background-image: url('$(res)/img/voip/vid-off.svg'); - } + &.mx_CallViewButtons_button_vid::before { + mask-image: url('$(res)/img/voip/call-view/cam-on.svg'); + } - &.mx_CallViewButtons_button_screensharingOn::before { - background-image: url('$(res)/img/voip/screensharing-on.svg'); - } + &.mx_CallViewButtons_button_screensharing { + background-color: $accent; - &.mx_CallViewButtons_button_screensharingOff::before { - background-image: url('$(res)/img/voip/screensharing-off.svg'); + &::before { + mask-image: url('$(res)/img/voip/call-view/screensharing.svg'); + background-color: white; // Same on both themes + } + } + + &.mx_CallViewButtons_button_sidebar::before { + mask-image: url('$(res)/img/voip/call-view/sidebar-on.svg'); + } } - &.mx_CallViewButtons_button_sidebarOn::before { - background-image: url('$(res)/img/voip/sidebar-on.svg'); + &.mx_CallViewButtons_button_off { + background-color: $call-view-button-off-background; + + &::before { + background-color: $call-view-button-off-foreground; + } + + &.mx_CallViewButtons_button_mic::before { + mask-image: url('$(res)/img/voip/call-view/mic-off.svg'); + } + + &.mx_CallViewButtons_button_vid::before { + mask-image: url('$(res)/img/voip/call-view/cam-off.svg'); + } + + &.mx_CallViewButtons_button_screensharing { + background-color: $call-view-button-on-background; + + &::before { + mask-image: url('$(res)/img/voip/call-view/screensharing.svg'); + background-color: $call-view-button-on-foreground; + } + } + + &.mx_CallViewButtons_button_sidebar { + background-color: $call-view-button-on-background; + + &::before { + mask-image: url('$(res)/img/voip/call-view/sidebar-off.svg'); + background-color: $call-view-button-on-foreground; + } + } } + // State buttons - &.mx_CallViewButtons_button_sidebarOff::before { - background-image: url('$(res)/img/voip/sidebar-off.svg'); + // Stateless buttons + &.mx_CallViewButtons_dialpad::before { + mask-image: url('$(res)/img/voip/call-view/dialpad.svg'); } - &.mx_CallViewButtons_button_hangup::before { - background-image: url('$(res)/img/voip/hangup.svg'); + &.mx_CallViewButtons_button_hangup { + background-color: $alert; + + &::before { + mask-image: url('$(res)/img/voip/call-view/hangup.svg'); + background-color: white; // Same on both themes + } } &.mx_CallViewButtons_button_more::before { - background-image: url('$(res)/img/voip/more.svg'); + mask-image: url('$(res)/img/voip/call-view/more.svg'); } + // Stateless buttons + // Invisible state &.mx_CallViewButtons_button_invisible { visibility: hidden; pointer-events: none; position: absolute; } + // Invisible state } } diff --git a/src/components/views/voip/CallView/CallViewButtons.tsx b/src/components/views/voip/CallView/CallViewButtons.tsx index e7cba611944..0b65fc232e6 100644 --- a/src/components/views/voip/CallView/CallViewButtons.tsx +++ b/src/components/views/voip/CallView/CallViewButtons.tsx @@ -39,6 +39,31 @@ const TOOLTIP_Y_OFFSET = -24; const CONTROLS_HIDE_DELAY = 2000; +interface IButtonProps { + state: boolean; + className: string; + onLabel: string; + offLabel: string; + onClick: () => void; +} + +const CallViewToggleButton: React.FC = ({ state: isOn, className, onLabel, offLabel, onClick }) => { + const classes = classNames("mx_CallViewButtons_button", className, { + mx_CallViewButtons_button_on: isOn, + mx_CallViewButtons_button_off: !isOn, + }); + + return ( + + ); +}; + interface IProps { call: MatrixCall; pipMode: boolean; @@ -142,101 +167,10 @@ export default class CallViewButtons extends React.Component { }; public render(): JSX.Element { - const micClasses = classNames("mx_CallViewButtons_button", { - mx_CallViewButtons_button_micOn: !this.props.buttonsState.micMuted, - mx_CallViewButtons_button_micOff: this.props.buttonsState.micMuted, - }); - - const vidClasses = classNames("mx_CallViewButtons_button", { - mx_CallViewButtons_button_vidOn: !this.props.buttonsState.vidMuted, - mx_CallViewButtons_button_vidOff: this.props.buttonsState.vidMuted, - }); - - const screensharingClasses = classNames("mx_CallViewButtons_button", { - mx_CallViewButtons_button_screensharingOn: this.props.buttonsState.screensharing, - mx_CallViewButtons_button_screensharingOff: !this.props.buttonsState.screensharing, - }); - - const sidebarButtonClasses = classNames("mx_CallViewButtons_button", { - mx_CallViewButtons_button_sidebarOn: this.props.buttonsState.sidebarShown, - mx_CallViewButtons_button_sidebarOff: !this.props.buttonsState.sidebarShown, - }); - const callControlsClasses = classNames("mx_CallViewButtons", { mx_CallViewButtons_hidden: !this.state.visible, }); - let vidMuteButton; - if (this.props.buttonsVisibility.vidMute) { - vidMuteButton = ( - - ); - } - - let screensharingButton; - if (this.props.buttonsVisibility.screensharing) { - screensharingButton = ( - - ); - } - - let sidebarButton; - if (this.props.buttonsVisibility.sidebar) { - sidebarButton = ( - - ); - } - - let contextMenuButton; - if (this.props.buttonsVisibility.contextMenu) { - contextMenuButton = ( - - ); - } - let dialpadButton; - if (this.props.buttonsVisibility.dialpad) { - dialpadButton = ( - - ); - } - let dialPad; if (this.state.showDialpad) { dialPad = { > { dialPad } { contextMenu } - { dialpadButton } - } + - { vidMuteButton } - { screensharingButton } - { sidebarButton } - { contextMenuButton } + { this.props.buttonsVisibility.vidMute && } + { this.props.buttonsVisibility.screensharing && } + { this.props.buttonsVisibility.sidebar && } + { this.props.buttonsVisibility.contextMenu && } Date: Thu, 28 Oct 2021 08:37:56 +0200 Subject: [PATCH 06/10] Update call view button icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/img/voip/call-view/cam-off.svg | 3 +++ res/img/voip/call-view/cam-on.svg | 3 +++ res/img/voip/call-view/dialpad.svg | 0 res/img/voip/call-view/hangup.svg | 3 +++ res/img/voip/call-view/mic-off.svg | 3 +++ res/img/voip/call-view/mic-on.svg | 3 +++ res/img/voip/call-view/more.svg | 3 +++ res/img/voip/call-view/screensharing.svg | 3 +++ res/img/voip/call-view/sidebar-off.svg | 6 ++++++ res/img/voip/call-view/sidebar-on.svg | 5 +++++ res/img/voip/dialpad.svg | 17 ----------------- res/img/voip/hangup.svg | 17 ----------------- res/img/voip/mic-off.svg | 18 ------------------ res/img/voip/mic-on.svg | 17 ----------------- res/img/voip/more.svg | 17 ----------------- res/img/voip/screensharing-off.svg | 18 ------------------ res/img/voip/screensharing-on.svg | 18 ------------------ res/img/voip/sidebar-off.svg | 20 -------------------- res/img/voip/sidebar-on.svg | 19 ------------------- res/img/voip/vid-off.svg | 19 ------------------- res/img/voip/vid-on.svg | 18 ------------------ 21 files changed, 32 insertions(+), 198 deletions(-) create mode 100644 res/img/voip/call-view/cam-off.svg create mode 100644 res/img/voip/call-view/cam-on.svg create mode 100644 res/img/voip/call-view/dialpad.svg create mode 100644 res/img/voip/call-view/hangup.svg create mode 100644 res/img/voip/call-view/mic-off.svg create mode 100644 res/img/voip/call-view/mic-on.svg create mode 100644 res/img/voip/call-view/more.svg create mode 100644 res/img/voip/call-view/screensharing.svg create mode 100644 res/img/voip/call-view/sidebar-off.svg create mode 100644 res/img/voip/call-view/sidebar-on.svg delete mode 100644 res/img/voip/dialpad.svg delete mode 100644 res/img/voip/hangup.svg delete mode 100644 res/img/voip/mic-off.svg delete mode 100644 res/img/voip/mic-on.svg delete mode 100644 res/img/voip/more.svg delete mode 100644 res/img/voip/screensharing-off.svg delete mode 100644 res/img/voip/screensharing-on.svg delete mode 100644 res/img/voip/sidebar-off.svg delete mode 100644 res/img/voip/sidebar-on.svg delete mode 100644 res/img/voip/vid-off.svg delete mode 100644 res/img/voip/vid-on.svg diff --git a/res/img/voip/call-view/cam-off.svg b/res/img/voip/call-view/cam-off.svg new file mode 100644 index 00000000000..9a362905210 --- /dev/null +++ b/res/img/voip/call-view/cam-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/voip/call-view/cam-on.svg b/res/img/voip/call-view/cam-on.svg new file mode 100644 index 00000000000..fb18058786f --- /dev/null +++ b/res/img/voip/call-view/cam-on.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/voip/call-view/dialpad.svg b/res/img/voip/call-view/dialpad.svg new file mode 100644 index 00000000000..e69de29bb2d diff --git a/res/img/voip/call-view/hangup.svg b/res/img/voip/call-view/hangup.svg new file mode 100644 index 00000000000..255433abdc5 --- /dev/null +++ b/res/img/voip/call-view/hangup.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/voip/call-view/mic-off.svg b/res/img/voip/call-view/mic-off.svg new file mode 100644 index 00000000000..74d821e6256 --- /dev/null +++ b/res/img/voip/call-view/mic-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/voip/call-view/mic-on.svg b/res/img/voip/call-view/mic-on.svg new file mode 100644 index 00000000000..57428a3cd8d --- /dev/null +++ b/res/img/voip/call-view/mic-on.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/voip/call-view/more.svg b/res/img/voip/call-view/more.svg new file mode 100644 index 00000000000..af15cf16304 --- /dev/null +++ b/res/img/voip/call-view/more.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/voip/call-view/screensharing.svg b/res/img/voip/call-view/screensharing.svg new file mode 100644 index 00000000000..4639c34cbfb --- /dev/null +++ b/res/img/voip/call-view/screensharing.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/voip/call-view/sidebar-off.svg b/res/img/voip/call-view/sidebar-off.svg new file mode 100644 index 00000000000..86aae6a05a4 --- /dev/null +++ b/res/img/voip/call-view/sidebar-off.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/res/img/voip/call-view/sidebar-on.svg b/res/img/voip/call-view/sidebar-on.svg new file mode 100644 index 00000000000..535b589098b --- /dev/null +++ b/res/img/voip/call-view/sidebar-on.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/voip/dialpad.svg b/res/img/voip/dialpad.svg deleted file mode 100644 index 79c9ba16122..00000000000 --- a/res/img/voip/dialpad.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/res/img/voip/hangup.svg b/res/img/voip/hangup.svg deleted file mode 100644 index dfb20bd519e..00000000000 --- a/res/img/voip/hangup.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/res/img/voip/mic-off.svg b/res/img/voip/mic-off.svg deleted file mode 100644 index 6409f1fd073..00000000000 --- a/res/img/voip/mic-off.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/res/img/voip/mic-on.svg b/res/img/voip/mic-on.svg deleted file mode 100644 index 3493b3c5818..00000000000 --- a/res/img/voip/mic-on.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/res/img/voip/more.svg b/res/img/voip/more.svg deleted file mode 100644 index 7990f6bcff2..00000000000 --- a/res/img/voip/more.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/res/img/voip/screensharing-off.svg b/res/img/voip/screensharing-off.svg deleted file mode 100644 index dc19e9892e4..00000000000 --- a/res/img/voip/screensharing-off.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/res/img/voip/screensharing-on.svg b/res/img/voip/screensharing-on.svg deleted file mode 100644 index a8e7fe308e4..00000000000 --- a/res/img/voip/screensharing-on.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/res/img/voip/sidebar-off.svg b/res/img/voip/sidebar-off.svg deleted file mode 100644 index 7637a9ab559..00000000000 --- a/res/img/voip/sidebar-off.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/res/img/voip/sidebar-on.svg b/res/img/voip/sidebar-on.svg deleted file mode 100644 index a625334be4e..00000000000 --- a/res/img/voip/sidebar-on.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/res/img/voip/vid-off.svg b/res/img/voip/vid-off.svg deleted file mode 100644 index 199d97ab974..00000000000 --- a/res/img/voip/vid-off.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/res/img/voip/vid-on.svg b/res/img/voip/vid-on.svg deleted file mode 100644 index d8146d01d34..00000000000 --- a/res/img/voip/vid-on.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - From 338cf6f32d8c3a7fc5e7936fda4b533bf3d8c4fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 28 Oct 2021 09:00:39 +0200 Subject: [PATCH 07/10] i18n MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/i18n/strings/en_EN.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 1fffc04696d..fd8b1bd1e86 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -926,16 +926,16 @@ "%(sharerName)s is presenting": "%(sharerName)s is presenting", "Your camera is turned off": "Your camera is turned off", "Your camera is still enabled": "Your camera is still enabled", - "Start the camera": "Start the camera", + "Dialpad": "Dialpad", + "Mute the microphone": "Mute the microphone", + "Unmute the microphone": "Unmute the microphone", "Stop the camera": "Stop the camera", + "Start the camera": "Start the camera", "Stop sharing your screen": "Stop sharing your screen", "Start sharing your screen": "Start sharing your screen", "Hide sidebar": "Hide sidebar", "Show sidebar": "Show sidebar", "More": "More", - "Dialpad": "Dialpad", - "Unmute the microphone": "Unmute the microphone", - "Mute the microphone": "Mute the microphone", "Hangup": "Hangup", "Video Call": "Video Call", "Voice Call": "Voice Call", From a10acd6f8ff477aec66bc61857fecb429a4775fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 28 Oct 2021 15:05:51 +0200 Subject: [PATCH 08/10] Add dialpad icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/img/voip/call-view/dialpad.svg | 3 +++ 1 file changed, 3 insertions(+) diff --git a/res/img/voip/call-view/dialpad.svg b/res/img/voip/call-view/dialpad.svg index e69de29bb2d..68f1c71b6dc 100644 --- a/res/img/voip/call-view/dialpad.svg +++ b/res/img/voip/call-view/dialpad.svg @@ -0,0 +1,3 @@ + + + From 5ef7f8d1de18378e70dfc25090c5b7e81b0dd696 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 5 Nov 2021 17:25:41 +0100 Subject: [PATCH 09/10] Fix button sizing in PiP MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/voip/_CallView.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 26c6f3e73ce..5a58711fa53 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -49,13 +49,16 @@ limitations under the License. } .mx_CallViewButtons { - bottom: 0px; + bottom: 13px; } .mx_CallViewButtons_button { + width: 34px; + height: 34px; + &::before { - width: 36px; - height: 36px; + width: 22px; + height: 22px; } } From b6ceeb94b8e8368005f9b8264cba25d71ba7a2ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 5 Nov 2021 17:41:39 +0100 Subject: [PATCH 10/10] Fix secondary voice video feed color MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/voip/_CallViewSidebar.scss | 2 ++ res/themes/dark/css/_dark.scss | 2 ++ res/themes/legacy-dark/css/_legacy-dark.scss | 2 ++ res/themes/legacy-light/css/_legacy-light.scss | 2 ++ res/themes/light/css/_light.scss | 2 ++ 5 files changed, 10 insertions(+) diff --git a/res/css/views/voip/_CallViewSidebar.scss b/res/css/views/voip/_CallViewSidebar.scss index fd9c76defcb..4871ccfe65e 100644 --- a/res/css/views/voip/_CallViewSidebar.scss +++ b/res/css/views/voip/_CallViewSidebar.scss @@ -39,6 +39,8 @@ limitations under the License. display: flex; align-items: center; justify-content: center; + + background-color: $video-feed-secondary-background; } .mx_VideoFeed_video { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 0761ee16282..36dc2cf0380 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -108,6 +108,8 @@ $call-view-button-on-background: $system; $call-view-button-off-foreground: $system; $call-view-button-off-background: $primary-content; +$video-feed-secondary-background: $system; + $topleftmenu-color: $primary-content; $roomheader-color: $primary-content; $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3); diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index fb237755970..fcb7402c7f3 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -134,6 +134,8 @@ $call-view-button-on-background: $system; $call-view-button-off-foreground: $system; $call-view-button-off-background: $primary-content; +$video-feed-secondary-background: $system; + $theme-button-bg-color: #e3e8f0; $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index d92a0387e13..a714ec292a8 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -211,6 +211,8 @@ $call-view-button-on-background: $background; $call-view-button-off-foreground: $background; $call-view-button-off-background: $secondary-content; +$video-feed-secondary-background: #394049; // XXX: Color from dark theme + $username-variant1-color: #368bd6; $username-variant2-color: #ac3ba8; $username-variant3-color: #03b381; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 62b961d0082..54f2dd741f0 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -160,6 +160,8 @@ $call-view-button-on-background: $background; $call-view-button-off-foreground: $background; $call-view-button-off-background: $secondary-content; +$video-feed-secondary-background: #394049; // XXX: Color from dark theme + $voip-decline-color: #f48080; $voip-accept-color: #80f480;