From 7b298178e3bfb79215719a515fff9fbbe5a6e178 Mon Sep 17 00:00:00 2001 From: Thanh Dodeur Date: Fri, 15 Oct 2021 09:37:17 +0000 Subject: [PATCH] [FIX] mail: allow focus on any rtc session MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Before this commit, in the rtc call viewer, it was only possible to focus videos, this commit changes that by allowing to focus any rtc session. This is a first step in improving the focusing and layout system. This commit also changes the call viewer and call participant card templates to ensure that they remain consistent when focusing non-video sessions, which also fixes a bug which caused avatars to not be round when the displayed image had an aspect ratio other than 1. closes odoo/odoo#79862 X-original-commit: d49407423164c44e86558cd2fc4f6c3ae47aed25 Signed-off-by: Sébastien Theys (seb) --- .../rtc_call_participant_card.scss | 37 ++++++++++++------- .../rtc_call_participant_card.xml | 27 ++++++-------- .../rtc_call_viewer/rtc_call_viewer.scss | 5 --- .../rtc_call_viewer/rtc_call_viewer.xml | 4 +- .../static/src/models/messaging/messaging.js | 6 +-- .../rtc_call_participant_card.js | 16 ++++++-- .../models/rtc_call_viewer/rtc_call_viewer.js | 5 ++- .../models/rtc_layout_menu/rtc_layout_menu.js | 4 ++ .../src/models/rtc_session/rtc_session.js | 25 +------------ 9 files changed, 59 insertions(+), 70 deletions(-) diff --git a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.scss b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.scss index 44a6b38a4d9..f1391a4c65f 100644 --- a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.scss +++ b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.scss @@ -8,16 +8,21 @@ position: relative; } -.o_RtcCallParticipantCard_avatar { +.o_RtcCallParticipantCard_avatarFrame { display: flex; - justify-content: center; - max-height: 100%; user-select: none; + aspect-ratio: 16/9; + + &.o-isMinimized { + aspect-ratio: 1; + } } .o_RtcCallParticipantCard_avatarImage { - max-height: 100px; - max-width: 100px; + max-height: #{"min(100%, 100px)"}; // interpolated as not supported by Sass + max-width: #{"min(100%, 100px)"}; + aspect-ratio: 1; + object-fit: cover; border: 5px solid gray('700'); &.o-isTalking { @@ -74,6 +79,7 @@ max-width: 50%; overflow: hidden; bottom: 0; + left: 0; } .o_RtcCallParticipantCard_overlayTop { @@ -110,8 +116,12 @@ .o_RtcCallParticipantCard { border-radius: $o-mail-rounded-rectangle-border-radius-sm; + &.o-isClickable { + cursor: pointer; + } + &.o-isTalking { - box-shadow: inset 0 0 0 map-get($spacers, 2) darken($o-enterprise-primary-color, 5%); + box-shadow: inset 0 0 0 map-get($spacers, 1) darken($o-enterprise-primary-color, 5%); } &.o-isInvitation { @@ -119,20 +129,19 @@ } } +.o_RtcCallParticipantCard_avatarFrame { + border-radius: $o-mail-rounded-rectangle-border-radius-sm; + &:not(.o-isMinimized) { + background-color: $o-brand-secondary; + } +} + .o_RtcCallParticipantCard_connectionState { color: theme-color('warning'); } .o_RtcCallParticipantCard_container { border-radius: $o-mail-rounded-rectangle-border-radius-sm; - - &.o-canClick { - cursor: pointer; - } - - &:not(.o-isMinimized) { - background-color: $o-brand-secondary; - } } .o_RtcCallParticipantCard_liveIndicator { diff --git a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml index b5632fef845..67219c70554 100644 --- a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml +++ b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml @@ -4,33 +4,30 @@
-
- + -
+
Avatar @@ -79,14 +76,12 @@ - - - - - - - - + + + + + + diff --git a/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.scss b/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.scss index 1a859391fd9..31ec027762e 100644 --- a/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.scss +++ b/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.scss @@ -77,12 +77,7 @@ aspect-ratio: 16/9; } -.o_RtcCallViewer_mainParticipant { - width: 100%; -} - .o_RtcCallViewer_mainParticipantContainer { - max-height: 100%; display: flex; flex-grow: 1; } diff --git a/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml b/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml index 6fbc044891b..c22dc856ae9 100644 --- a/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml +++ b/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml @@ -11,9 +11,9 @@
-
+
- +
diff --git a/addons/mail/static/src/models/messaging/messaging.js b/addons/mail/static/src/models/messaging/messaging.js index 25c4bfed2b1..d5df8d6eb74 100644 --- a/addons/mail/static/src/models/messaging/messaging.js +++ b/addons/mail/static/src/models/messaging/messaging.js @@ -163,7 +163,7 @@ function factory(dependencies) { id: sessionId, }); const focusedSessionId = this.focusedRtcSession && this.focusedRtcSession.id; - if (!sessionId || focusedSessionId === sessionId || !rtcSession.videoStream) { + if (!sessionId || focusedSessionId === sessionId) { this.update({ focusedRtcSession: unlink() }); return; } @@ -304,9 +304,7 @@ function factory(dependencies) { isCausal: true, readonly: true, }), - focusedRtcSession: one2one('mail.rtc_session', { - inverse: 'focusingMessaging', - }), + focusedRtcSession: one2one('mail.rtc_session'), /** * Mailbox History. */ diff --git a/addons/mail/static/src/models/rtc_call_participant_card/rtc_call_participant_card.js b/addons/mail/static/src/models/rtc_call_participant_card/rtc_call_participant_card.js index b3fcd9c8c14..6db7fa294cb 100644 --- a/addons/mail/static/src/models/rtc_call_participant_card/rtc_call_participant_card.js +++ b/addons/mail/static/src/models/rtc_call_participant_card/rtc_call_participant_card.js @@ -2,6 +2,7 @@ import { registerNewModel } from '@mail/model/model_core'; import { attr, many2one, one2one } from '@mail/model/model_field'; +import { isEventHandled, markEventHandled } from '@mail/utils/utils'; function factory(dependencies) { @@ -14,7 +15,7 @@ function factory(dependencies) { super._created(); this.onChangeVolume = this.onChangeVolume.bind(this); this.onClick = this.onClick.bind(this); - this.onClickVideo = this.onClickVideo.bind(this); + this.onClickVolumeAnchor = this.onClickVolumeAnchor.bind(this); } //---------------------------------------------------------------------- @@ -32,7 +33,13 @@ function factory(dependencies) { * @param {MouseEvent} ev */ async onClick(ev) { + if (isEventHandled(ev, 'CallParticipantCard.clickVolumeAnchor')) { + return; + } if (!this.invitedPartner && !this.invitedGuest) { + if (!this.isMinimized) { + this.messaging.toggleFocusedRtcSession(this.rtcSession.id); + } return; } const channel = this.channel; @@ -51,11 +58,12 @@ function factory(dependencies) { } /** + * Handled by the popover component. + * * @param {MouseEvent} ev */ - async onClickVideo(ev) { - ev.stopPropagation(); - this.messaging.toggleFocusedRtcSession(this.rtcSession.id); + async onClickVolumeAnchor(ev) { + markEventHandled(ev, 'CallParticipantCard.clickVolumeAnchor'); } //---------------------------------------------------------------------- diff --git a/addons/mail/static/src/models/rtc_call_viewer/rtc_call_viewer.js b/addons/mail/static/src/models/rtc_call_viewer/rtc_call_viewer.js index 375f589e31a..dbf798713dd 100644 --- a/addons/mail/static/src/models/rtc_call_viewer/rtc_call_viewer.js +++ b/addons/mail/static/src/models/rtc_call_viewer/rtc_call_viewer.js @@ -181,10 +181,13 @@ function factory(dependencies) { if (!this.threadView) { return 'tiled'; } + if (this.isMinimized) { + return 'tiled'; + } if (!this.threadView.thread.rtc) { return 'tiled'; } - if (!this.threadView.thread.videoCount || !this.mainParticipantCard) { + if (!this.mainParticipantCard) { return 'tiled'; } if ( diff --git a/addons/mail/static/src/models/rtc_layout_menu/rtc_layout_menu.js b/addons/mail/static/src/models/rtc_layout_menu/rtc_layout_menu.js index 7788a8e2629..c510de2d84d 100644 --- a/addons/mail/static/src/models/rtc_layout_menu/rtc_layout_menu.js +++ b/addons/mail/static/src/models/rtc_layout_menu/rtc_layout_menu.js @@ -2,6 +2,7 @@ import { registerNewModel } from '@mail/model/model_core'; import { attr, one2one } from '@mail/model/model_field'; +import { clear } from '@mail/model/model_field_command'; function factory(dependencies) { @@ -35,6 +36,9 @@ function factory(dependencies) { this.callViewer.update({ filterVideoGrid: true, }); + if (this.messaging.focusedRtcSession && !this.messaging.focusedRtcSession.videoStream) { + this.messaging.update({ focusedRtcSession: clear() }); + } break; } } diff --git a/addons/mail/static/src/models/rtc_session/rtc_session.js b/addons/mail/static/src/models/rtc_session/rtc_session.js index 04533d13472..7ee09ed5151 100644 --- a/addons/mail/static/src/models/rtc_session/rtc_session.js +++ b/addons/mail/static/src/models/rtc_session/rtc_session.js @@ -4,8 +4,7 @@ import { browser } from "@web/core/browser/browser"; import { registerNewModel } from '@mail/model/model_core'; import { attr, many2one, one2one, one2many } from '@mail/model/model_field'; -import { clear, unlink } from '@mail/model/model_field_command'; -import { OnChange } from '@mail/model/model_onchange'; +import { clear } from '@mail/model/model_field_command'; function factory(dependencies) { @@ -283,15 +282,6 @@ function factory(dependencies) { }, delay); } - /** - * @private - */ - _onChangeVideoStream() { - if (!this.videoStream) { - this.update({ focusingMessaging: unlink() }); - } - } - /** * cleanly removes the audio stream of the session * @@ -349,13 +339,6 @@ function factory(dependencies) { connectionState: attr({ default: 'Waiting for the peer to send a RTC offer', }), - /** - * If this field is set, this session is 'focused' which means that it will - * be displayed as the main session. - */ - focusingMessaging: one2one('mail.messaging', { - inverse: 'focusedRtcSession', - }), guest: many2one('mail.guest', { inverse: 'rtcSessions', }), @@ -470,12 +453,6 @@ function factory(dependencies) { compute: '_computeVolume', }), }; - RtcSession.onChanges = [ - new OnChange({ - dependencies: ['videoStream'], - methodName: '_onChangeVideoStream', - }), - ]; RtcSession.identifyingFields = ['id']; RtcSession.modelName = 'mail.rtc_session';