pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] mail: rename RTC models (step 2)

Browse Source 
- rename 'RtcCallViewer' to 'CallView'
- rename 'RtcActivityNotice' to 'CallSystrayMenu'
- rename 'RtcCallParticipantCard' to 'CallParticipantCard'
- rename 'RtcLayoutMenu' to 'CallLayoutMenu'
- rename 'RtcConfigurationMenu' to 'CallSettingsMenu'

Task-2868876

Part-of: odoo/odoo#92552
This commit is contained in:
Alexandre Kühn
2022-05-31 22:56:42 +02:00
parent 5e0700417c
commit 4d14ba8a00
34 changed files with 250 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/call_action_list/call_action_list.xml
+8 -8
View File
@@ -5,7 +5,7 @@
<t t-if="callActionListView">
<div class="o_CallActionList d-flex justify-content-between" t-attf-class="{{ className }}" t-ref="root">
<div class="o_CallActionList_buttons d-flex align-items-center flex-wrap">
<t t-if="callActionListView.callViewer.threadView.thread.rtc and messaging.rtc.currentRtcSession">
<t t-if="callActionListView.callView.threadView.thread.rtc and messaging.rtc.currentRtcSession">
<button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
t-att-class="{ 'o-isActive': !messaging.rtc.currentRtcSession.isMute, 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
t-att-aria-label="callActionListView.microphoneButtonTitle"
@@ -75,25 +75,25 @@
</t>
</Popover>
</t>
<t t-if="!callActionListView.callViewer.threadView.thread.rtc">
<t t-if="!callActionListView.callView.threadView.thread.rtc">
<button class="o_CallActionList_button o_CallActionList_callToggle btn btn-success d-flex m-1 border-0 rounded-circle shadow-none"
t-att-class="{ 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
aria-label="Join Video Call"
title="Join Video Call"
t-att-disabled="callActionListView.callViewer.threadView.thread.hasPendingRtcRequest"
t-att-disabled="callActionListView.callView.threadView.thread.hasPendingRtcRequest"
t-on-click="callActionListView.onClickToggleVideoCall">
<div class="o_CallActionList_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': callActionListView.isSmall }">
<i class="fa fa-video-camera fa-stack-1x" t-att-class="{ 'fa-lg': !callActionListView.isSmall }"/>
</div>
</button>
</t>
<t t-if="callActionListView.callViewer.threadView.thread">
<t t-if="callActionListView.callViewer.threadView.thread.rtcInvitingSession and !callActionListView.callViewer.threadView.thread.rtc">
<t t-if="callActionListView.callView.threadView.thread">
<t t-if="callActionListView.callView.threadView.thread.rtcInvitingSession and !callActionListView.callView.threadView.thread.rtc">
<button class="o_CallActionList_button o_CallActionList_callToggle o-isActive btn btn-danger d-flex m-1 border-0 rounded-circle shadow-none"
t-att-class="{ 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
aria-label="Reject"
title="Reject"
t-att-disabled="callActionListView.callViewer.threadView.thread.hasPendingRtcRequest"
t-att-disabled="callActionListView.callView.threadView.thread.hasPendingRtcRequest"
t-on-click="callActionListView.onClickRejectCall">
<div class="o_CallActionList_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': callActionListView.isSmall }">
<i class="fa fa-phone fa-stack-1x" t-att-class="{ 'fa-lg': !callActionListView.isSmall }"/>
@@ -102,8 +102,8 @@
</t>
<button class="o_CallActionList_button o_CallActionList_callToggle btn d-flex m-1 border-0 rounded-circle shadow-none"
t-att-aria-label="callActionListView.callButtonTitle"
t-att-class="{ 'o-isActive btn-danger': !!callActionListView.callViewer.threadView.thread.rtc, 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall, 'btn-success': !callActionListView.callViewer.threadView.thread.rtc }"
t-att-disabled="callActionListView.callViewer.threadView.thread.hasPendingRtcRequest"
t-att-class="{ 'o-isActive btn-danger': !!callActionListView.callView.threadView.thread.rtc, 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall, 'btn-success': !callActionListView.callView.threadView.thread.rtc }"
t-att-disabled="callActionListView.callView.threadView.thread.hasPendingRtcRequest"
t-att-title="callActionListView.callButtonTitle"
t-on-click="callActionListView.onClickToggleAudioCall">
<div class="o_CallActionList_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': callActionListView.isSmall }">
addons/mail/static/src/components/call_option_menu/call_option_menu.xml
+1 -1
View File
@@ -8,7 +8,7 @@
<i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-th-large"/>
<span class="o_CallOptionMenu_buttonText">Change layout</span>
</button>
<t t-if="callOptionMenu.callActionListView.callViewer.isFullScreen">
<t t-if="callOptionMenu.callActionListView.callView.isFullScreen">
<button class="o_CallOptionMenu_button" t-on-click="callOptionMenu.onClickDeactivateFullScreen">
<i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-compress"/>
<span class="o_CallOptionMenu_buttonText">Exit full screen</span>
addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.js
+6 -6
View File
@@ -4,20 +4,20 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
const { Component } = owl;
export class RtcActivityNotice extends Component {
export class CallSystrayMenu extends Component {
/**
* @returns {RtcActivityNoticeView}
* @returns {CallSystrayMenu}
*/
get rtcActivityNoticeView() {
get callSystrayMenu() {
return this.props.record;
}
}
Object.assign(RtcActivityNotice, {
Object.assign(CallSystrayMenu, {
props: { record: Object },
template: 'mail.RtcActivityNotice',
template: 'mail.CallSystrayMenu',
});
registerMessagingComponent(RtcActivityNotice);
registerMessagingComponent(CallSystrayMenu);
addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.scss
+2 -2
View File
@@ -2,10 +2,10 @@
// Layout
// ------------------------------------------------------------------
.o_RtcActivityNotice_buttonContent {
.o_CallSystrayMenu_buttonContent {
max-width: 150px;
}
.o_RtcActivityNotice_dot {
.o_CallSystrayMenu_dot {
animation: flash 3s ease infinite;
}
addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml
+7 -7
View File
@@ -1,24 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="mail.RtcActivityNotice" owl="1">
<div class="o_RtcActivityNotice dropdown" t-attf-class="{{ className }}" t-ref="root">
<t t-name="mail.CallSystrayMenu" owl="1">
<div class="o_CallSystrayMenu dropdown" t-attf-class="{{ className }}" t-ref="root">
<t t-if="messaging">
<CallInviteRequestPopupList/>
<t t-if="messaging.rtc.channel">
<button class="o_RtcActivityNotice_button px-3 user-select-none dropdown-toggle o-no-caret o-dropdown--narrow" t-att-title="rtcActivityNoticeView.buttonTitle" role="button" t-on-click="messaging.rtc.onClickActivityNoticeButton">
<div class="o_RtcActivityNotice_buttonContent d-flex align-items-center">
<button class="o_CallSystrayMenu_button px-3 user-select-none dropdown-toggle o-no-caret o-dropdown--narrow" t-att-title="callSystrayMenu.buttonTitle" role="button" t-on-click="messaging.rtc.onClickActivityNoticeButton">
<div class="o_CallSystrayMenu_buttonContent d-flex align-items-center">
<span class="position-relative me-2">
<i class="o_RtcActivityNotice_outputIndicator fa me-2" t-att-class="{
<i class="o_CallSystrayMenu_outputIndicator fa me-2" t-att-class="{
'fa-microphone': !messaging.rtc.sendDisplay and !messaging.rtc.sendUserVideo,
'fa-video-camera': messaging.rtc.sendUserVideo,
'fa-desktop': messaging.rtc.sendDisplay,
}"/>
<small class="position-absolute top-0 end-0 bottom-0 mt-n3 pt-1">
<i class="o_RtcActivityNotice_dot fa fa-circle text-warning small"/>
<i class="o_CallSystrayMenu_dot fa fa-circle text-warning small"/>
</small>
</span>
<em class="o_RtcActivityNotice_buttonTitle text-truncate" t-esc="messaging.rtc.channel.displayName"/>
<em class="o_CallSystrayMenu_buttonTitle text-truncate" t-esc="messaging.rtc.channel.displayName"/>
</div>
</button>
</t>
addons/mail/static/src/components/rtc_activity_notice_container/rtc_activity_notice_container.js
+4 -4
View File
@@ -7,7 +7,7 @@ import { getMessagingComponent } from "@mail/utils/messaging_component";
const { Component } = owl;
export class RtcActivityNoticeContainer extends Component {
export class CallSystrayMenuContainer extends Component {
/**
* @override
@@ -19,7 +19,7 @@ export class RtcActivityNoticeContainer extends Component {
}
Object.assign(RtcActivityNoticeContainer, {
components: { RtcActivityNotice: getMessagingComponent('RtcActivityNotice') },
template: 'mail.RtcActivityNoticeContainer',
Object.assign(CallSystrayMenuContainer, {
components: { CallSystrayMenu: getMessagingComponent('CallSystrayMenu') },
template: 'mail.CallSystrayMenuContainer',
});
addons/mail/static/src/components/rtc_activity_notice_container/rtc_activity_notice_container.xml
+3 -3
View File
@@ -1,10 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="mail.RtcActivityNoticeContainer" owl="1">
<div class="RtcActivityNoticeContainer">
<t t-name="mail.CallSystrayMenuContainer" owl="1">
<div class="CallSystrayMenuContainer">
<t t-if="messaging">
<RtcActivityNotice record="messaging.rtc.rtcActivityNoticeView"/>
<CallSystrayMenu record="messaging.rtc.callSystrayMenu"/>
</t>
</div>
</t>
addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.js
+4 -4
View File
@@ -7,7 +7,7 @@ import Popover from "web.Popover";
const { Component } = owl;
export class RtcCallParticipantCard extends Component {
export class CallParticipantCard extends Component {
/**
* @override
@@ -30,10 +30,10 @@ export class RtcCallParticipantCard extends Component {
}
Object.assign(RtcCallParticipantCard, {
Object.assign(CallParticipantCard, {
props: { record: Object },
template: 'mail.RtcCallParticipantCard',
template: 'mail.CallParticipantCard',
components: { Popover },
});
registerMessagingComponent(RtcCallParticipantCard);
registerMessagingComponent(CallParticipantCard);
addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.scss
+8 -8
View File
@@ -2,11 +2,11 @@
// Layout
// ------------------------------------------------------------------
.o_RtcCallParticipantCard {
.o_CallParticipantCard {
aspect-ratio: 16/9;
}
.o_RtcCallParticipantCard_avatarImage {
.o_CallParticipantCard_avatarImage {
max-height: #{"min(100%, 100px)"}; // interpolated as not supported by Sass
max-width: #{"min(100%, 100px)"};
aspect-ratio: 1;
@@ -17,7 +17,7 @@
}
&.o-isInvitation:not(:hover) {
animation: o_RtcCallParticipantCard_avatarImag_borderPulse 3s linear infinite;
animation: o_CallParticipantCard_avatarImag_borderPulse 3s linear infinite;
}
&.o-isInvitation:hover {
@@ -25,7 +25,7 @@
}
}
@keyframes o_RtcCallParticipantCard_avatarImag_borderPulse {
@keyframes o_CallParticipantCard_avatarImag_borderPulse {
0% { border: solid white }
20% { border: solid $gray-600 }
35% { border: solid $gray-100 }
@@ -34,12 +34,12 @@
85% { border: solid $gray-700 }
}
.o_RtcCallParticipantCard_overlay {
.o_CallParticipantCard_overlay {
pointer-events: none;
margin: Min(5%, map-get($spacers, 2));
}
.o_RtcCallParticipantCard_overlayBottom {
.o_CallParticipantCard_overlayBottom {
max-width: 50%;
}
@@ -47,12 +47,12 @@
// Style
// ------------------------------------------------------------------
.o_RtcCallParticipantCard {
.o_CallParticipantCard {
&.o-isTalking {
box-shadow: inset 0 0 0 map-get($spacers, 1) darken($o-enterprise-primary-color, 5%);
}
}
.o_RtcCallParticipantCard_liveIndicator {
.o_CallParticipantCard_liveIndicator {
user-select: none;
}
addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
+16 -16
View File
@@ -1,9 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="mail.RtcCallParticipantCard" owl="1">
<t t-name="mail.CallParticipantCard" owl="1">
<t t-if="callParticipantCard">
<div class="o_RtcCallParticipantCard position-relative d-flex flex-column align-items-center justify-content-center mh-100 mw-100 p-1 rounded-sm"
<div class="o_CallParticipantCard position-relative d-flex flex-column align-items-center justify-content-center mh-100 mw-100 p-1 rounded-sm"
t-att-class="{
'o-isClickable o_cursor_pointer': callParticipantCard.invitedGuest or callParticipantCard.invitedPartner or !callParticipantCard.isMinimized,
'o-isTalking': !callParticipantCard.isMinimized and callParticipantCard.isTalking,
@@ -21,13 +21,13 @@
<CallParticipantVideo record="callParticipantCard.callParticipantVideoView"/>
</t>
<t t-else="">
<div class="o_RtcCallParticipantCard_avatarFrame d-flex align-items-center justify-content-center h-100 w-100 rounded-sm" t-att-class="{ 'o-isMinimized': callParticipantCard.isMinimized, 'bg-secondary': !callParticipantCard.isMinimized}" draggable="false">
<div class="o_CallParticipantCard_avatarFrame d-flex align-items-center justify-content-center h-100 w-100 rounded-sm" t-att-class="{ 'o-isMinimized': callParticipantCard.isMinimized, 'bg-secondary': !callParticipantCard.isMinimized}" draggable="false">
<img alt="Avatar"
t-att-class="{
'o-isTalking': callParticipantCard.isTalking,
'o-isInvitation': callParticipantCard.isInvitation,
}"
class="o_RtcCallParticipantCard_avatarImage h-100 rounded-circle border-5 o_object_fit_cover"
class="o_CallParticipantCard_avatarImage h-100 rounded-circle border-5 o_object_fit_cover"
t-att-src="callParticipantCard.avatarUrl"
draggable="false"
/>
@@ -36,39 +36,39 @@
<t t-if="callParticipantCard.rtcSession">
<!-- overlay -->
<span class="o_RtcCallParticipantCard_overlay o_RtcCallParticipantCard_overlayBottom position-absolute bottom-0 start-0 d-flex overflow-hidden">
<span class="o_CallParticipantCard_overlay o_CallParticipantCard_overlayBottom position-absolute bottom-0 start-0 d-flex overflow-hidden">
<t t-if="!callParticipantCard.isMinimized">
<span class="o_RtcCallParticipantCard_name p-1 rounded-sm bg-black-75 text-white text-truncate" t-esc="callParticipantCard.name"/>
<span class="o_CallParticipantCard_name p-1 rounded-sm bg-black-75 text-white text-truncate" t-esc="callParticipantCard.name"/>
</t>
<t t-if="callParticipantCard.rtcSession.isScreenSharingOn and callParticipantCard.isMinimized and !callParticipantCard.rtcSession.channel.rtc">
<small class="o_RtcCallParticipantCard_liveIndicator o-isMinimized badge-pill badge-danger d-flex align-items-center font-weight-bolder" title="live" aria-label="live">
<small class="o_CallParticipantCard_liveIndicator o-isMinimized badge-pill badge-danger d-flex align-items-center font-weight-bolder" title="live" aria-label="live">
LIVE
</small>
</t>
</span>
<div class="o_RtcCallParticipantCard_overlay o_RtcCallParticipantCard_overlayTop position-absolute top-0 end-0 d-flex flex-row-reverse">
<div class="o_CallParticipantCard_overlay o_CallParticipantCard_overlayTop position-absolute top-0 end-0 d-flex flex-row-reverse">
<t t-if="callParticipantCard.rtcSession.isSelfMuted and !callParticipantCard.rtcSession.isDeaf">
<span class="o_RtcCallParticipantCard_overlayTopElement d-flex flex-column justify-content-center me-1 rounded-circle bg-900" t-att-class="{'o-isMinimized p-1': callParticipantCard.isMinimized, 'p-2': !callParticipantCard.isMinimized }" title="muted" aria-label="muted">
<span class="o_CallParticipantCard_overlayTopElement d-flex flex-column justify-content-center me-1 rounded-circle bg-900" t-att-class="{'o-isMinimized p-1': callParticipantCard.isMinimized, 'p-2': !callParticipantCard.isMinimized }" title="muted" aria-label="muted">
<i class="fa fa-microphone-slash"/>
</span>
</t>
<t t-if="callParticipantCard.rtcSession.isDeaf">
<span class="o_RtcCallParticipantCard_overlayTopElement d-flex flex-column justify-content-center me-1 rounded-circle bg-900" t-att-class="{'o-isMinimized p-1': callParticipantCard.isMinimized, 'p-2': !callParticipantCard.isMinimized }" title="deaf" aria-label="deaf">
<span class="o_CallParticipantCard_overlayTopElement d-flex flex-column justify-content-center me-1 rounded-circle bg-900" t-att-class="{'o-isMinimized p-1': callParticipantCard.isMinimized, 'p-2': !callParticipantCard.isMinimized }" title="deaf" aria-label="deaf">
<i class="fa fa-deaf"/>
</span>
</t>
<t t-if="callParticipantCard.rtcSession.channel.rtc and callParticipantCard.rtcSession.isAudioInError">
<span class="o_RtcCallParticipantCard_overlayTopElement d-flex flex-column justify-content-center me-1 p-2 rounded-circle bg-900 text-danger" title="Issue with audio">
<span class="o_CallParticipantCard_overlayTopElement d-flex flex-column justify-content-center me-1 p-2 rounded-circle bg-900 text-danger" title="Issue with audio">
<i class="fa fa-exclamation-triangle"/>
</span>
</t>
<t t-if="callParticipantCard.rtcSession.channel.rtc and !callParticipantCard.rtcSession.rtcAsCurrentSession and !['connected', 'completed'].includes(callParticipantCard.rtcSession.connectionState)">
<span class="o_RtcCallParticipantCard_overlayTopElement d-flex flex-column justify-content-center me-1 p-2 rounded-circle bg-900" t-att-title="callParticipantCard.rtcSession.connectionState">
<i class="fa fa-exclamation-triangle o_RtcCallParticipantCard_connectionState text-warning"/>
<span class="o_CallParticipantCard_overlayTopElement d-flex flex-column justify-content-center me-1 p-2 rounded-circle bg-900" t-att-title="callParticipantCard.rtcSession.connectionState">
<i class="fa fa-exclamation-triangle o_CallParticipantCard_connectionState text-warning"/>
</span>
</t>
<t t-if="callParticipantCard.rtcSession.isScreenSharingOn and !callParticipantCard.isMinimized and !callParticipantCard.rtcSession.channel.rtc">
<span class="o_RtcCallParticipantCard_liveIndicator badge-pill badge-danger d-flex align-items-center me-1 font-weight-bolder" title="live" aria-label="live">
<span class="o_CallParticipantCard_liveIndicator badge-pill badge-danger d-flex align-items-center me-1 font-weight-bolder" title="live" aria-label="live">
LIVE
</span>
</t>
@@ -77,12 +77,12 @@
<!-- volume popover -->
<t t-if="!callParticipantCard.rtcSession.isOwnSession">
<Popover>
<i class="o_RtcCallParticipantCard_volumeMenuAnchor position-absolute bottom-0 start-50" t-on-click="callParticipantCard.onClickVolumeAnchor" t-ref="volumeMenuAnchor"/>
<i class="o_CallParticipantCard_volumeMenuAnchor position-absolute bottom-0 start-50" t-on-click="callParticipantCard.onClickVolumeAnchor" t-ref="volumeMenuAnchor"/>
<t t-set-slot="opened">
<div class="d-flex flex-column">
<input type="range" min="0.0" max="1" step="0.01" t-att-value="callParticipantCard.rtcSession.volume" t-on-change="callParticipantCard.onChangeVolume"/>
<t t-if="callParticipantCard.hasConnectionInfo">
<hr class="o_RtcCallParticipantCard_volumeMenuAnchor_separator w-100 border-top"/>
<hr class="o_CallParticipantCard_volumeMenuAnchor_separator w-100 border-top"/>
<div t-esc="callParticipantCard.inboundConnectionTypeText"/>
<div t-esc="callParticipantCard.outboundConnectionTypeText"/>
</t>
addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.js
+7 -7
View File
@@ -13,7 +13,7 @@ const components = {
// TODO a nice-to-have would be a resize handle under the videos.
export class RtcCallViewer extends Component {
export class CallView extends Component {
/**
* @override
@@ -34,9 +34,9 @@ export class RtcCallViewer extends Component {
//--------------------------------------------------------------------------
/**
* @returns {RtcCallViewer}
* @returns {CallView}
*/
get rtcCallViewer() {
get callView() {
return this.props.record;
}
@@ -103,7 +103,7 @@ export class RtcCallViewer extends Component {
const { width, height } = this.tileContainerRef.el.getBoundingClientRect();
const { tileWidth, tileHeight, columnCount } = this._computeTessellation({
aspectRatio: this.rtcCallViewer.aspectRatio,
aspectRatio: this.callView.aspectRatio,
containerHeight: height,
containerWidth: width,
tileCount: this.tileContainerRef.el.children.length,
@@ -123,10 +123,10 @@ export class RtcCallViewer extends Component {
}
Object.assign(RtcCallViewer, {
Object.assign(CallView, {
components,
props: { record: Object },
template: 'mail.RtcCallViewer',
template: 'mail.CallView',
});
registerMessagingComponent(RtcCallViewer);
registerMessagingComponent(CallView);
addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.scss
+5 -5
View File
@@ -2,7 +2,7 @@
// Layout
// ------------------------------------------------------------------
.o_RtcCallViewer {
.o_CallView {
min-height: 50%;
&.o-isMinimized {
@@ -11,7 +11,7 @@
}
}
.o_RtcCallViewer_grid {
.o_CallView_grid {
overflow-y: auto;
overflow-x: hidden;
@@ -22,7 +22,7 @@
&.o-isTiled {
overflow-y: hidden;
.o_RtcCallViewer_participantCard {
.o_CallView_participantCard {
width: var(--width);
height: var(--height);
min-width: var(--width);
@@ -36,7 +36,7 @@
}
}
.o_RtcCallViewer_gridTile {
.o_CallView_gridTile {
aspect-ratio: 16/9;
}
@@ -44,7 +44,7 @@
// Style
// ------------------------------------------------------------------
.o_RtcCallViewer_grid {
.o_CallView_grid {
&::-webkit-scrollbar {
background: gray('900');
addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml
+28 -28
View File
@@ -1,38 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="mail.RtcCallViewer" owl="1">
<t t-if="rtcCallViewer">
<div class="o_RtcCallViewer d-flex flex-column align-items-center justify-content-center bg-dark" t-att-class="{'o-fullScreen fixed-top vw-100 vh-100': rtcCallViewer.isFullScreen, 'o-isMinimized': rtcCallViewer.isMinimized, 'h-50': !rtcCallViewer.isMinimized and !rtcCallViewer.isFullScreen, 'position-relative': !rtcCallViewer.isFullScreen }" t-attf-class="{{ className }}" t-on-mouseleave="rtcCallViewer.onMouseleave" t-ref="root">
<t t-name="mail.CallView" owl="1">
<t t-if="callView">
<div class="o_CallView d-flex flex-column align-items-center justify-content-center bg-dark" t-att-class="{'o-fullScreen fixed-top vw-100 vh-100': callView.isFullScreen, 'o-isMinimized': callView.isMinimized, 'h-50': !callView.isMinimized and !callView.isFullScreen, 'position-relative': !callView.isFullScreen }" t-attf-class="{{ className }}" t-on-mouseleave="callView.onMouseleave" t-ref="root">
<!-- Used to make the component depend on the window size and trigger an update when the window size changes. -->
<t t-set="dummy" t-value="messaging and messaging.device and messaging.device.globalWindowInnerHeight and messaging.device.globalWindowInnerWidth"/>
<!-- Call members display -->
<div class="o_RtcCallViewer_participantContainer d-flex justify-content-between w-100 h-100 overflow-hidden" t-on-click="rtcCallViewer.onClick" t-on-mousemove="rtcCallViewer.onMouseMove">
<t t-if="rtcCallViewer.layout !== 'tiled'">
<div class="o_RtcCallViewer_mainParticipantContainer d-flex flex-grow-1 justify-content-center mw-100 mh-100">
<t t-if="rtcCallViewer.mainParticipantCard">
<RtcCallParticipantCard className="'o_RtcCallViewer_participantCard'" record="rtcCallViewer.mainParticipantCard"/>
<div class="o_CallView_participantContainer d-flex justify-content-between w-100 h-100 overflow-hidden" t-on-click="callView.onClick" t-on-mousemove="callView.onMouseMove">
<t t-if="callView.layout !== 'tiled'">
<div class="o_CallView_mainParticipantContainer d-flex flex-grow-1 justify-content-center mw-100 mh-100">
<t t-if="callView.mainParticipantCard">
<CallParticipantCard className="'o_CallView_participantCard'" record="callView.mainParticipantCard"/>
</t>
</div>
</t>
<t t-if="rtcCallViewer.layout !== 'spotlight'">
<t t-if="callView.layout !== 'spotlight'">
<div
class="o_RtcCallViewer_grid d-flex align-items-center h-100"
class="o_CallView_grid d-flex align-items-center h-100"
t-att-class="{
'o-isTiled flex-wrap justify-content-center w-100': rtcCallViewer.layout === 'tiled',
'flex-column': rtcCallViewer.layout !== 'tiled',
'o-isSidebar': rtcCallViewer.layout === 'sidebar',
'o-isTiled flex-wrap justify-content-center w-100': callView.layout === 'tiled',
'flex-column': callView.layout !== 'tiled',
'o-isSidebar': callView.layout === 'sidebar',
}"
t-ref="tileContainer"
t-attf-style="--height:{{state.tileHeight}}px; --width:{{state.tileWidth}}px; --columns:{{state.columnCount}};"
>
<t t-foreach="rtcCallViewer.tileParticipantCards" t-as="participantCard" t-key="'grid_tile_'+participantCard.localId">
<t t-if="!rtcCallViewer.filterVideoGrid or (participantCard.rtcSession and participantCard.rtcSession.videoStream)">
<t t-foreach="callView.tileParticipantCards" t-as="participantCard" t-key="'grid_tile_'+participantCard.localId">
<t t-if="!callView.filterVideoGrid or (participantCard.rtcSession and participantCard.rtcSession.videoStream)">
<!-- maybe filter focused partner out? -->
<RtcCallParticipantCard
className="'o_RtcCallViewer_participantCard o_RtcCallViewer_gridTile'"
classNameObj="{ 'w-100' : rtcCallViewer.layout === 'sidebar' }"
<CallParticipantCard
className="'o_CallView_participantCard o_CallView_gridTile'"
classNameObj="{ 'w-100' : callView.layout === 'sidebar' }"
record="participantCard"
/>
</t>
@@ -42,26 +42,26 @@
</div>
<!-- Buttons -->
<t t-if="rtcCallViewer.showOverlay or !rtcCallViewer.isControllerFloating">
<div class="o_RtcCallViewer_controls d-flex justify-content-center w-100 pb-1" t-att-class="{ 'o-isFloating position-absolute bottom-0 pb-3': rtcCallViewer.isControllerFloating }">
<div class="o_RtcCallViewer_controlsOverlayContainer" t-on-mousemove="rtcCallViewer.onMouseMoveOverlay">
<CallActionList record="rtcCallViewer.callActionListView"/>
<t t-if="callView.showOverlay or !callView.isControllerFloating">
<div class="o_CallView_controls d-flex justify-content-center w-100 pb-1" t-att-class="{ 'o-isFloating position-absolute bottom-0 pb-3': callView.isControllerFloating }">
<div class="o_CallView_controlsOverlayContainer" t-on-mousemove="callView.onMouseMoveOverlay">
<CallActionList record="callView.callActionListView"/>
</div>
</div>
</t>
<!-- Dialogs -->
<t t-if="messaging.userSetting.rtcConfigurationMenu.isOpen">
<Dialog size="'small'" title="rtcCallViewer.settingsTitle" onClosed="rtcCallViewer.onRtcSettingsDialogClosed">
<RtcConfigurationMenu record="messaging.userSetting.rtcConfigurationMenu"/>
<t t-if="messaging.userSetting.callSettingsMenu.isOpen">
<Dialog size="'small'" title="callView.settingsTitle" onClosed="callView.onRtcSettingsDialogClosed">
<CallSettingsMenu record="messaging.userSetting.callSettingsMenu"/>
<t t-set-slot="buttons">
<!-- Explicit No buttons -->
</t>
</Dialog>
</t>
<t t-if="rtcCallViewer.rtcLayoutMenu">
<Dialog size="'small'" title="rtcCallViewer.layoutSettingsTitle" onClosed="rtcCallViewer.onLayoutSettingsDialogClosed">
<RtcLayoutMenu record="rtcCallViewer.rtcLayoutMenu"/>
<t t-if="callView.layoutMenu">
<Dialog size="'small'" title="callView.layoutSettingsTitle" onClosed="callView.onLayoutSettingsDialogClosed">
<CallLayoutMenu record="callView.layoutMenu"/>
<t t-set-slot="buttons">
<!-- Explicit No buttons -->
</t>
addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.js
+6 -6
View File
@@ -6,7 +6,7 @@ import { browser } from "@web/core/browser/browser";
const { Component, onWillStart, useState } = owl;
export class RtcConfigurationMenu extends Component {
export class CallSettingsMenu extends Component {
/**
* @override
@@ -24,17 +24,17 @@ export class RtcConfigurationMenu extends Component {
}
/**
* @returns {RtcConfigurationMenu|undefined}
* @returns {CallSettingsMenu}
*/
get rtcConfigurationMenu() {
get callSettingsMenu() {
return this.props.record;
}
}
Object.assign(RtcConfigurationMenu, {
Object.assign(CallSettingsMenu, {
props: { record: Object },
template: 'mail.RtcConfigurationMenu',
template: 'mail.CallSettingsMenu',
});
registerMessagingComponent(RtcConfigurationMenu);
registerMessagingComponent(CallSettingsMenu);
addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.scss
+3 -3
View File
@@ -2,15 +2,15 @@
// Layout
// ------------------------------------------------------------------
.o_RtcConfigurationMenu {
.o_CallSettingsMenu {
-webkit-user-select: none;
user-select: none;
}
.o_RtcConfigurationMenu_option {
.o_CallSettingsMenu_option {
min-height: 40px;
}
.o_RtcConfigurationMenu_optionInputGroupInput {
.o_CallSettingsMenu_optionInputGroupInput {
flex-grow: 2;
}
addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
+31 -31
View File
@@ -1,37 +1,37 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="mail.RtcConfigurationMenu" owl="1">
<div class="o_RtcConfigurationMenu d-flex flex-column ms-2 overflow-auto" t-attf-class="{{ className }}" t-ref="root">
<div class="o_RtcConfigurationMenu_option d-flex align-items-center flex-wrap m-2 p-1">
<label class="o_RtcConfigurationMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Input device" aria-label="Input device">
<span class="o_RtcConfigurationMenu_optionName me-2 text-truncate font-weight-bolder">Input device</span>
<t t-name="mail.CallSettingsMenu" owl="1">
<div class="o_CallSettingsMenu d-flex flex-column ms-2 overflow-auto" t-attf-class="{{ className }}" t-ref="root">
<div class="o_CallSettingsMenu_option d-flex align-items-center flex-wrap m-2 p-1">
<label class="o_CallSettingsMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Input device" aria-label="Input device">
<span class="o_CallSettingsMenuoptionName me-2 text-truncate font-weight-bolder">Input device</span>
<div>
<select name="inputDevice" class="o_RtcConfigurationMenu_optionDeviceSelect custom-select" t-att-value="messaging.userSetting.audioInputDeviceId" t-on-change="rtcConfigurationMenu.onChangeSelectAudioInput">
<select name="inputDevice" class="o_CallSettingsMenu_optionDeviceSelect custom-select" t-att-value="messaging.userSetting.audioInputDeviceId" t-on-change="callSettingsMenu.onChangeSelectAudioInput">
<option value="">Browser default</option>
<t t-if="state.userDevices" t-foreach="state.userDevices" t-as="device" t-key="device_index">
<RtcConfigurationMenuDevice device="device"/>
<CallSettingsMenuDevice device="device"/>
</t>
</select>
</div>
</label>
</div>
<div class="o_RtcConfigurationMenu_option d-flex align-items-center flex-wrap m-2 p-1">
<label class="o_RtcConfigurationMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Use Push-to-talk" aria-label="Use Push-to-talk">
<span class="o_RtcConfigurationMenu_optionName me-2 text-truncate font-weight-bolder">Use Push-to-talk</span>
<input type="checkbox" aria-label="toggle push-to-talk" title="toggle push-to-talk" t-on-change="rtcConfigurationMenu.onChangePushToTalk" t-att-checked="messaging.userSetting.usePushToTalk ? 'checked' : ''"/>
<div class="o_CallSettingsMenu_option d-flex align-items-center flex-wrap m-2 p-1">
<label class="o_CallSettingsMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Use Push-to-talk" aria-label="Use Push-to-talk">
<span class="o_CallSettingsMenu_optionName me-2 text-truncate font-weight-bolder">Use Push-to-talk</span>
<input type="checkbox" aria-label="toggle push-to-talk" title="toggle push-to-talk" t-on-change="callSettingsMenu.onChangePushToTalk" t-att-checked="messaging.userSetting.usePushToTalk ? 'checked' : ''"/>
</label>
</div>
<t t-if="messaging.userSetting.usePushToTalk">
<div class="o_RtcConfigurationMenu_option d-flex align-items-center flex-wrap m-2 p-1">
<label class="o_RtcConfigurationMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Push-to-talk key" aria-label="Push-to-talk key">
<span class="o_RtcConfigurationMenu_optionName me-2 text-truncate font-weight-bolder">Push-to-talk key</span>
<span class="o_RtcConfigurationMenu_optionPushToTalkGroup d-flex">
<div class="o_CallSettingsMenu_option d-flex align-items-center flex-wrap m-2 p-1">
<label class="o_CallSettingsMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Push-to-talk key" aria-label="Push-to-talk key">
<span class="o_CallSettingsMenu_optionName me-2 text-truncate font-weight-bolder">Push-to-talk key</span>
<span class="o_CallSettingsMenu_optionPushToTalkGroup d-flex">
<t t-if="messaging.userSetting.pushToTalkKey">
<span class="o_RtcConfigurationMenu_optionPushToTalkGroupKey ms-1 px-3 border border-2 rounded fs-3 font-weight-bolder" t-attf-class="{{ rtcConfigurationMenu.isRegisteringKey ? 'o-isRegistering border-danger' : 'border-primary' }}" t-esc="messaging.userSetting.pushToTalkKeyToString()"/>
<span class="o_CallSettingsMenu_optionPushToTalkGroupKey ms-1 px-3 border border-2 rounded fs-3 font-weight-bolder" t-attf-class="{{ callSettingsMenu.isRegisteringKey ? 'o-isRegistering border-danger' : 'border-primary' }}" t-esc="messaging.userSetting.pushToTalkKeyToString()"/>
</t>
<button class="o_RtcConfigurationMenu_button btn btn-link px-2 py-0 text-black" t-on-click="rtcConfigurationMenu.onClickRegisterKeyButton">
<t t-if="rtcConfigurationMenu.isRegisteringKey">
<button class="o_CallSettingsMenu_button btn btn-link px-2 py-0 text-black" t-on-click="callSettingsMenu.onClickRegisterKeyButton">
<t t-if="callSettingsMenu.isRegisteringKey">
<i title="Cancel" aria-label="Cancel" class="fa fa-2x fa-times-circle"/>
</t>
<t t-else="">
@@ -42,24 +42,24 @@
</label>
</div>
<div t-if="rtcConfigurationMenu.isRegisteringKey">Press a key to register it as the push-to-talk shortcut</div>
<div class="o_RtcConfigurationMenu_option d-flex align-items-center flex-wrap m-2 p-1">
<label class="o_RtcConfigurationMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Delay after releasing push-to-talk" aria-label="Delay after releasing push-to-talk">
<span class="o_RtcConfigurationMenu_optionName me-2 text-truncate font-weight-bolder">Delay after releasing push-to-talk</span>
<div class="o_RtcConfigurationMenu_optionInputGroup d-flex w-100">
<input class="o_RtcConfigurationMenu_optionInputGroupInput" type="range" min="1" max="2000" step="1" t-att-value="messaging.userSetting.voiceActiveDuration" t-on-change="rtcConfigurationMenu.onChangeDelay"/>
<span class="o_RtcConfigurationMenu_optionInputGroupValue p-1"><t t-esc="messaging.userSetting.voiceActiveDuration"/>ms</span>
<div t-if="callSettingsMenu.isRegisteringKey">Press a key to register it as the push-to-talk shortcut</div>
<div class="o_CallSettingsMenu_option d-flex align-items-center flex-wrap m-2 p-1">
<label class="o_CallSettingsMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Delay after releasing push-to-talk" aria-label="Delay after releasing push-to-talk">
<span class="o_CallSettingsMenu_optionName me-2 text-truncate font-weight-bolder">Delay after releasing push-to-talk</span>
<div class="o_CallSettingsMenu_optionInputGroup d-flex w-100">
<input class="o_CallSettingsMenu_optionInputGroupInput" type="range" min="1" max="2000" step="1" t-att-value="messaging.userSetting.voiceActiveDuration" t-on-change="callSettingsMenu.onChangeDelay"/>
<span class="o_CallSettingsMenu_optionInputGroupValue p-1"><t t-esc="messaging.userSetting.voiceActiveDuration"/>ms</span>
</div>
</label>
</div>
</t>
<t t-else="">
<div class="o_RtcConfigurationMenu_option d-flex align-items-center flex-wrap m-2 p-1">
<label class="o_RtcConfigurationMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Minimum activity for voice detection" aria-label="Minimum activity for voice detection">
<span class="o_RtcConfigurationMenu_optionName me-2 text-truncate font-weight-bolder">Minimum activity for voice detection</span>
<div class="o_RtcConfigurationMenu_optionInputGroup d-flex w-100">
<input class="o_RtcConfigurationMenu_optionInputGroupInput" type="range" min="0.001" max="1" step="0.001" t-att-value="messaging.userSetting.voiceActivationThreshold" t-on-change="rtcConfigurationMenu.onChangeThreshold"/>
<span class="o_RtcConfigurationMenu_optionInputGroupValue p-1"><t t-esc="messaging.userSetting.voiceActivationThreshold"/></span>
<div class="o_CallSettingsMenu_option d-flex align-items-center flex-wrap m-2 p-1">
<label class="o_CallSettingsMenu_optionLabel d-flex align-items-center flex-wrap mw-100 o_cursor_pointer" title="Minimum activity for voice detection" aria-label="Minimum activity for voice detection">
<span class="o_CallSettingsMenu_optionName me-2 text-truncate font-weight-bolder">Minimum activity for voice detection</span>
<div class="o_CallSettingsMenu_optionInputGroup d-flex w-100">
<input class="o_CallSettingsMenu_optionInputGroupInput" type="range" min="0.001" max="1" step="0.001" t-att-value="messaging.userSetting.voiceActivationThreshold" t-on-change="callSettingsMenu.onChangeThreshold"/>
<span class="o_CallSettingsMenu_optionInputGroupValue p-1"><t t-esc="messaging.userSetting.voiceActivationThreshold"/></span>
</div>
</label>
</div>
addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.js
+4 -4
View File
@@ -4,11 +4,11 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
const { Component } = owl;
export class RtcConfigurationMenuDevice extends Component {}
export class CallSettingsMenuDevice extends Component {}
Object.assign(RtcConfigurationMenuDevice, {
Object.assign(CallSettingsMenuDevice, {
props: { device: Object },
template: 'mail.RtcConfigurationMenuDevice',
template: 'mail.CallSettingsMenuDevice',
});
registerMessagingComponent(RtcConfigurationMenuDevice);
registerMessagingComponent(CallSettingsMenuDevice);
addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.xml
+1 -1
View File
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="mail.RtcConfigurationMenuDevice" owl="1">
<t t-name="mail.CallSettingsMenuDevice" owl="1">
<t t-if="props.device.kind === 'audioinput'">
<option t-att-value="props.device.deviceId" t-attf-class="{{ className }}" t-ref="root"><t t-esc="props.device.label"/></option>
</t>
addons/mail/static/src/components/rtc_layout_menu/rtc_layout_menu.js
+6 -6
View File
@@ -4,7 +4,7 @@ import { useComponentToModel } from '@mail/component_hooks/use_component_to_mode
import { registerMessagingComponent } from '@mail/utils/messaging_component';
import { LegacyComponent } from "@web/legacy/legacy_component";
export class RtcLayoutMenu extends LegacyComponent {
export class CallLayoutMenu extends LegacyComponent {
/**
* @override
@@ -15,17 +15,17 @@ export class RtcLayoutMenu extends LegacyComponent {
}
/**
* @returns {RtcLayoutMenu}
* @returns {CallLayoutMenu}
*/
get layoutMenu() {
get callLayoutMenu() {
return this.props.record;
}
}
Object.assign(RtcLayoutMenu, {
Object.assign(CallLayoutMenu, {
props: { record: Object },
template: 'mail.RtcLayoutMenu',
template: 'mail.CallLayoutMenu',
});
registerMessagingComponent(RtcLayoutMenu);
registerMessagingComponent(CallLayoutMenu);
addons/mail/static/src/components/rtc_layout_menu/rtc_layout_menu.xml
+34 -34
View File
@@ -1,58 +1,58 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="mail.RtcLayoutMenu" owl="1">
<t t-if="layoutMenu">
<div class="o_RtcLayoutMenu d-flex flex-column p-1" t-attf-class="{{ className }}" t-ref="root">
<t t-if="layoutMenu.callViewer.threadView.thread.videoCount > 0">
<t t-name="mail.CallLayoutMenu" owl="1">
<t t-if="callLayoutMenu">
<div class="o_CallLayoutMenu d-flex flex-column p-1" t-attf-class="{{ className }}" t-ref="root">
<t t-if="callLayoutMenu.callView.threadView.thread.videoCount > 0">
<div class="btn btn-light p-0 rounded font-weight-normal">
<label class="o_RtcLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput m-3" type="radio" name="filter" value="all" t-on-click="layoutMenu.onClickFilter" t-att-checked="!layoutMenu.callViewer.filterVideoGrid"/>
<span class="o_RtcLayoutMenu_inputText text-truncate">Show All</span>
<label class="o_CallLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_CallLayoutMenu_radioInputContainer">
<input class="o_CallLayoutMenu_radioInput m-3" type="radio" name="filter" value="all" t-on-click="callLayoutMenu.onClickFilter" t-att-checked="!callLayoutMenu.callView.filterVideoGrid"/>
<span class="o_CallLayoutMenu_inputText text-truncate">Show All</span>
</div>
</label>
</div>
<div class="btn btn-light p-0 rounded font-weight-normal">
<label class="o_RtcLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput m-3" type="radio" name="filter" value="video" t-on-click="layoutMenu.onClickFilter" t-att-checked="layoutMenu.callViewer.filterVideoGrid"/>
<span class="o_RtcLayoutMenu_inputText text-truncate">Show only video</span>
<label class="o_CallLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_CallLayoutMenu_radioInputContainer">
<input class="o_CallLayoutMenu_radioInput m-3" type="radio" name="filter" value="video" t-on-click="callLayoutMenu.onClickFilter" t-att-checked="callLayoutMenu.callView.filterVideoGrid"/>
<span class="o_CallLayoutMenu_inputText text-truncate">Show only video</span>
</div>
</label>
</div>
<hr class="o_RtcLayoutMenu_separator w-100 bg-300"/>
<hr class="o_CallLayoutMenu_separator w-100 bg-300"/>
</t>
<div class="btn btn-light p-0 rounded font-weight-normal">
<label class="o_RtcLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput m-3" type="radio" name="layout" value="tiled" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'tiled'"/>
<span class="o_RtcLayoutMenu_inputText text-truncate">Tiled</span>
<label class="o_CallLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_CallLayoutMenu_radioInputContainer">
<input class="o_CallLayoutMenu_radioInput m-3" type="radio" name="layout" value="tiled" t-on-click="callLayoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'tiled'"/>
<span class="o_CallLayoutMenu_inputText text-truncate">Tiled</span>
</div>
<span class="o_RtcLayoutMenu_radioIcon me-1">
<t t-call="mail.RtcLayoutMenu_gridSvg"/>
<span class="o_CallLayoutMenu_radioIcon me-1">
<t t-call="mail.CallLayoutMenu_gridSvg"/>
</span>
</label>
</div>
<div class="btn btn-light p-0 rounded font-weight-normal">
<label class="o_RtcLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput m-3" type="radio" name="layout" value="spotlight" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'spotlight'"/>
<span class="o_RtcLayoutMenu_inputText text-truncate">Spotlight</span>
<label class="o_CallLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_CallLayoutMenu_radioInputContainer">
<input class="o_CallLayoutMenu_radioInput m-3" type="radio" name="layout" value="spotlight" t-on-click="callLayoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'spotlight'"/>
<span class="o_CallLayoutMenu_inputText text-truncate">Spotlight</span>
</div>
<span class="o_RtcLayoutMenu_radioIcon me-1">
<t t-call="mail.RtcLayoutMenu_spotlightSvg"/>
<span class="o_CallLayoutMenu_radioIcon me-1">
<t t-call="mail.CallLayoutMenu_spotlightSvg"/>
</span>
</label>
</div>
<div class="btn btn-light p-0 rounded font-weight-normal">
<label class="o_RtcLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput m-3" type="radio" name="layout" value="sidebar" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'sidebar'"/>
<span class="o_RtcLayoutMenu_inputText text-truncate">Sidebar</span>
<label class="o_CallLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_CallLayoutMenu_radioInputContainer">
<input class="o_CallLayoutMenu_radioInput m-3" type="radio" name="layout" value="sidebar" t-on-click="callLayoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'sidebar'"/>
<span class="o_CallLayoutMenu_inputText text-truncate">Sidebar</span>
</div>
<span class="o_RtcLayoutMenu_radioIcon me-1">
<t t-call="mail.RtcLayoutMenu_sidebarSvg"/>
<span class="o_CallLayoutMenu_radioIcon me-1">
<t t-call="mail.CallLayoutMenu_sidebarSvg"/>
</span>
</label>
</div>
@@ -62,7 +62,7 @@
<!-- TODO TEMPORARY ICONS -->
<t t-name="mail.RtcLayoutMenu_gridSvg" owl="1">
<t t-name="mail.CallLayoutMenu_gridSvg" owl="1">
<svg viewBox="0 0 300 300" width="5rem" height="5rem">
<g transform="matrix(1.08 0 0 1.29 63.85 96.61)">
<rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
@@ -94,7 +94,7 @@
</svg>
</t>
<t t-name="mail.RtcLayoutMenu_spotlightSvg" owl="1">
<t t-name="mail.CallLayoutMenu_spotlightSvg" owl="1">
<svg viewBox="0 0 300 300" width="5rem" height="5rem">
<g transform="matrix(3.38 0 0 4.04 150 150)">
<rect style="fill: currentColor" x="-38" y="-20" rx="0" ry="0" width="75" height="39"/>
@@ -102,7 +102,7 @@
</svg>
</t>
<t t-name="mail.RtcLayoutMenu_sidebarSvg" owl="1">
<t t-name="mail.CallLayoutMenu_sidebarSvg" owl="1">
<svg viewBox="0 0 300 300" width="5rem" height="5rem">
<g transform="matrix(2.66 0 0 4.04 122.89 150.02)">
<rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
addons/mail/static/src/components/thread_view/thread_view.xml
+2 -2
View File
@@ -9,8 +9,8 @@
</t>
<div class="o_ThreadView_bottomPart d-flex flex-grow-1">
<div class="o_ThreadView_core d-flex flex-column flex-grow-1">
<t t-if="threadView.rtcCallViewer">
<RtcCallViewer record="threadView.rtcCallViewer"/>
<t t-if="threadView.callView">
<CallView record="threadView.callView"/>
</t>
<t t-if="threadView.isLoading and !threadView.threadCache.isLoaded" name="loadingCondition">
<div class="o_ThreadView_loading d-flex align-self-center flex-grow-1 align-items-center">
addons/mail/static/src/models/call_action_list_view.js
+11 -11
View File
@@ -6,7 +6,7 @@ import { clear, insertAndReplace } from '@mail/model/model_field_command';
registerModel({
name: 'CallActionListView',
identifyingFields: ['callViewer'],
identifyingFields: ['callView'],
recordMethods: {
/**
* @param {MouseEvent} ev
@@ -43,10 +43,10 @@ registerModel({
* @param {MouseEvent} ev
*/
async onClickRejectCall(ev) {
if (this.callViewer.threadView.thread.hasPendingRtcRequest) {
if (this.callView.threadView.thread.hasPendingRtcRequest) {
return;
}
await this.callViewer.threadView.thread.leaveCall();
await this.callView.threadView.thread.leaveCall();
},
/**
* @param {MouseEvent} ev
@@ -58,19 +58,19 @@ registerModel({
* @param {MouseEvent} ev
*/
async onClickToggleAudioCall(ev) {
if (this.callViewer.threadView.thread.hasPendingRtcRequest) {
if (this.callView.threadView.thread.hasPendingRtcRequest) {
return;
}
await this.callViewer.threadView.thread.toggleCall();
await this.callView.threadView.thread.toggleCall();
},
/**
* @param {MouseEvent} ev
*/
async onClickToggleVideoCall(ev) {
if (this.callViewer.threadView.thread.hasPendingRtcRequest) {
if (this.callView.threadView.thread.hasPendingRtcRequest) {
return;
}
await this.callViewer.threadView.thread.toggleCall({
await this.callView.threadView.thread.toggleCall({
startWithVideo: true,
});
},
@@ -79,10 +79,10 @@ registerModel({
* @returns {string|FieldCommand}
*/
_computeCallButtonTitle() {
if (!this.callViewer.threadView.thread) {
if (!this.callView.threadView.thread) {
return clear();
}
if (this.callViewer.threadView.thread.rtc) {
if (this.callView.threadView.thread.rtc) {
return this.env._t("Disconnect");
} else {
return this.env._t("Join Call");
@@ -117,7 +117,7 @@ registerModel({
* @private
*/
_computeIsSmall() {
return Boolean(this.callViewer && this.callViewer.threadView.compact && !this.callViewer.isFullScreen);
return Boolean(this.callView && this.callView.threadView.compact && !this.callView.isFullScreen);
},
/**
* @private
@@ -149,7 +149,7 @@ registerModel({
compute: '_computeCallButtonTitle',
default: '',
}),
callViewer: one('RtcCallViewer', {
callView: one('CallView', {
inverse: 'callActionListView',
readonly: true,
required: true,
addons/mail/static/src/models/call_option_menu.js
+5 -5
View File
@@ -13,7 +13,7 @@ registerModel({
* @param {MouseEvent} ev
*/
async onClickDownloadLogs(ev) {
const channel = this.callActionListView.callViewer.threadView.thread;
const channel = this.callActionListView.callView.threadView.thread;
if (!channel.rtc) {
return;
}
@@ -31,28 +31,28 @@ registerModel({
* @param {MouseEvent} ev
*/
onClickActivateFullScreen(ev) {
this.callActionListView.callViewer.activateFullScreen();
this.callActionListView.callView.activateFullScreen();
this.component.trigger('o-popover-close');
},
/**
* @param {MouseEvent} ev
*/
onClickDeactivateFullScreen(ev) {
this.callActionListView.callViewer.deactivateFullScreen();
this.callActionListView.callView.deactivateFullScreen();
this.component.trigger('o-popover-close');
},
/**
* @param {MouseEvent} ev
*/
onClickLayout(ev) {
this.callActionListView.callViewer.toggleLayoutMenu();
this.callActionListView.callView.toggleLayoutMenu();
this.component.trigger('o-popover-close');
},
/**
* @param {MouseEvent} ev
*/
onClickOptions(ev) {
this.messaging.userSetting.rtcConfigurationMenu.toggle();
this.messaging.userSetting.callSettingsMenu.toggle();
this.component.trigger('o-popover-close');
},
},
addons/mail/static/src/models/call_participant_video_view.js
+4 -4
View File
@@ -6,21 +6,21 @@ import { clear, replace } from '@mail/model/model_field_command';
registerModel({
name: 'CallParticipantVideoView',
identifyingFields: ['rtcCallParticipantCardOwner'],
identifyingFields: ['callParticipantCardOwner'],
recordMethods: {
/**
* @private
* @returns {FieldCommand}
*/
_computeRtcSession() {
if (this.rtcCallParticipantCardOwner.rtcSession) {
return replace(this.rtcCallParticipantCardOwner.rtcSession);
if (this.callParticipantCardOwner.rtcSession) {
return replace(this.callParticipantCardOwner.rtcSession);
}
return clear();
},
},
fields: {
rtcCallParticipantCardOwner: one('RtcCallParticipantCard', {
callParticipantCardOwner: one('CallParticipantCard', {
inverse: 'callParticipantVideoView',
readonly: true,
required: true,
addons/mail/static/src/models/discuss_public_view.js
+1 -1
View File
@@ -28,7 +28,7 @@ registerModel({
}
if (this.channel.defaultDisplayMode === 'video_full_screen') {
await this.channel.toggleCall({ startWithVideo: true });
await this.threadView.rtcCallViewer.activateFullScreen();
await this.threadView.callView.activateFullScreen();
}
},
/**
addons/mail/static/src/models/rtc.js
+2 -2
View File
@@ -1052,7 +1052,7 @@ registerModel({
if (this.currentRtcSession.isMute) {
return;
}
if (this.messaging.userSetting.rtcConfigurationMenu.isRegisteringKey) {
if (this.messaging.userSetting.callSettingsMenu.isRegisteringKey) {
return;
}
this.messaging.browser.clearTimeout(this.pushToTalkTimeout);
@@ -1246,7 +1246,7 @@ registerModel({
recoveryDelay: attr({
default: 3000,
}),
rtcActivityNoticeView: one('RtcActivityNoticeView', {
callSystrayMenu: one('CallSystrayMenu', {
default: insertAndReplace(),
inverse: 'rtc',
isCausal: true,
addons/mail/static/src/models/rtc_activity_notice_view.js
+2 -2
View File
@@ -7,7 +7,7 @@ import { clear } from '@mail/model/model_field_command';
import { sprintf } from '@web/core/utils/strings';
registerModel({
name: 'RtcActivityNoticeView',
name: 'CallSystrayMenu',
identifyingFields: ['rtc'],
recordMethods: {
/**
@@ -30,7 +30,7 @@ registerModel({
default: '',
}),
rtc: one('Rtc', {
inverse: 'rtcActivityNoticeView',
inverse: 'callSystrayMenu',
readonly: true,
required: true,
}),
addons/mail/static/src/models/rtc_call_participant_card.js
+8 -8
View File
@@ -8,7 +8,7 @@ import { isEventHandled, markEventHandled } from '@mail/utils/utils';
import { sprintf } from '@web/core/utils/strings';
registerModel({
name: 'RtcCallParticipantCard',
name: 'CallParticipantCard',
identifyingFields: ['relationalId'],
recordMethods: {
/**
@@ -111,8 +111,8 @@ registerModel({
* @returns {boolean}
*/
_computeIsMinimized() {
const callViewer = this.rtcCallViewerOfMainCard || this.rtcCallViewerOfTile;
return Boolean(callViewer && callViewer.isMinimized);
const callView = this.callViewOfMainCard || this.callViewOfTile;
return Boolean(callView && callView.isMinimized);
},
/**
* @private
@@ -245,15 +245,15 @@ registerModel({
required: true,
}),
/**
* The callViewer for which this card is the spotlight.
* The call view for which this card is the spotlight.
*/
rtcCallViewerOfMainCard: one('RtcCallViewer', {
callViewOfMainCard: one('CallView', {
inverse: 'mainParticipantCard',
}),
/**
* The callViewer for which this card is one of the tiles.
* The call view for which this card is one of the tiles.
*/
rtcCallViewerOfTile: one('RtcCallViewer', {
callViewOfTile: one('CallView', {
inverse: 'tileParticipantCards',
}),
/**
@@ -262,7 +262,7 @@ registerModel({
rtcSession: one('RtcSession'),
callParticipantVideoView: one('CallParticipantVideoView', {
compute: '_computeCallParticipantVideoView',
inverse: 'rtcCallParticipantCardOwner',
inverse: 'callParticipantCardOwner',
isCausal: true,
}),
volumeMenuAnchorRef: attr(),
addons/mail/static/src/models/rtc_call_viewer.js
+16 -16
View File
@@ -10,7 +10,7 @@ import { clear, insert, insertAndReplace, replace } from '@mail/model/model_fiel
import { isEventHandled, markEventHandled } from '@mail/utils/utils';
registerModel({
name: 'RtcCallViewer',
name: 'CallView',
identifyingFields: ['threadView'],
lifecycleHooks: {
_created() {
@@ -54,7 +54,7 @@ registerModel({
if (!this.exists()) {
return;
}
if (isEventHandled(ev, 'RtcCallViewer.MouseMoveOverlay')) {
if (isEventHandled(ev, 'CallView.MouseMoveOverlay')) {
return;
}
this._showOverlay();
@@ -66,7 +66,7 @@ registerModel({
if (!this.exists()) {
return;
}
markEventHandled(ev, 'RtcCallViewer.MouseMoveOverlay');
markEventHandled(ev, 'CallView.MouseMoveOverlay');
this.update({
showOverlay: true,
});
@@ -76,7 +76,7 @@ registerModel({
* @param {MouseEvent} ev
*/
onRtcSettingsDialogClosed(ev) {
this.messaging.userSetting.rtcConfigurationMenu.toggle();
this.messaging.userSetting.callSettingsMenu.toggle();
},
async activateFullScreen() {
const el = document.body;
@@ -117,11 +117,11 @@ registerModel({
}
},
toggleLayoutMenu() {
if (!this.rtcLayoutMenu) {
this.update({ rtcLayoutMenu: insertAndReplace() });
if (!this.layoutMenu) {
this.update({ layoutMenu: insertAndReplace() });
return;
}
this.update({ rtcLayoutMenu: clear() });
this.update({ layoutMenu: clear() });
},
//----------------------------------------------------------------------
// Private
@@ -357,9 +357,9 @@ registerModel({
/**
* If set, the card to be displayed as the "main/spotlight" card.
*/
mainParticipantCard: one('RtcCallParticipantCard', {
mainParticipantCard: one('CallParticipantCard', {
compute: '_computeMainParticipantCard',
inverse: 'rtcCallViewerOfMainCard',
inverse: 'callViewOfMainCard',
}),
/**
* The model for the controller (buttons).
@@ -367,14 +367,14 @@ registerModel({
callActionListView: one('CallActionListView', {
default: insertAndReplace(),
readonly: true,
inverse: 'callViewer',
inverse: 'callView',
isCausal: true,
}),
/**
* The model for the menu to control the layout of the viewer.
*/
rtcLayoutMenu: one('RtcLayoutMenu', {
inverse: 'callViewer',
layoutMenu: one('CallLayoutMenu', {
inverse: 'callView',
isCausal: true,
}),
/**
@@ -391,19 +391,19 @@ registerModel({
}),
showOverlayTimeout: attr(),
/**
* ThreadView on which the call viewer is attached.
* ThreadView on which the call view is attached.
*/
threadView: one('ThreadView', {
inverse: 'rtcCallViewer',
inverse: 'callView',
readonly: true,
required: true,
}),
/**
* List of all participant cards (can either be invitations or rtcSessions).
*/
tileParticipantCards: many('RtcCallParticipantCard', {
tileParticipantCards: many('CallParticipantCard', {
compute: '_computeTileParticipantCards',
inverse: 'rtcCallViewerOfTile',
inverse: 'callViewOfTile',
}),
},
onChanges: [
addons/mail/static/src/models/rtc_configuration_menu.js
+2 -2
View File
@@ -6,7 +6,7 @@ import { registerModel } from '@mail/model/model_core';
import { attr, one } from '@mail/model/model_field';
registerModel({
name: 'RtcConfigurationMenu',
name: 'CallSettingsMenu',
identifyingFields: ['userSetting'],
lifecycleHooks: {
_created() {
@@ -83,7 +83,7 @@ registerModel({
default: false,
}),
userSetting: one('UserSetting', {
inverse: 'rtcConfigurationMenu',
inverse: 'callSettingsMenu',
readonly: true,
}),
},
addons/mail/static/src/models/rtc_layout_menu.js
+6 -6
View File
@@ -5,8 +5,8 @@ import { attr, one } from '@mail/model/model_field';
import { clear } from '@mail/model/model_field_command';
registerModel({
name: 'RtcLayoutMenu',
identifyingFields: ['callViewer'],
name: 'CallLayoutMenu',
identifyingFields: ['callView'],
recordMethods: {
/**
* @param {MouseEvent} ev
@@ -15,12 +15,12 @@ registerModel({
ev.preventDefault();
switch (ev.target.value) {
case 'all':
this.callViewer.update({
this.callView.update({
filterVideoGrid: false,
});
break;
case 'video':
this.callViewer.update({
this.callView.update({
filterVideoGrid: true,
});
if (this.messaging.focusedRtcSession && !this.messaging.focusedRtcSession.videoStream) {
@@ -42,8 +42,8 @@ registerModel({
},
fields: {
component: attr(),
callViewer: one('RtcCallViewer', {
inverse: 'rtcLayoutMenu',
callView: one('CallView', {
inverse: 'layoutMenu',
readonly: true,
}),
},
addons/mail/static/src/models/thread_view.js
+4 -4
View File
@@ -87,7 +87,7 @@ registerModel({
/**
* @private
*/
_computeRtcCallViewer() {
_computeCallView() {
return (this.thread && this.thread.model === 'mail.channel' && this.thread.rtcSessions.length > 0)
? insertAndReplace()
: clear();
@@ -507,10 +507,10 @@ registerModel({
*/
replyingToMessageView: one('MessageView'),
/**
* Determines the Rtc call viewer of this thread.
* Determines the call view of this thread.
*/
rtcCallViewer: one('RtcCallViewer', {
compute: '_computeRtcCallViewer',
callView: one('CallView', {
compute: '_computeCallView',
inverse: 'threadView',
isCausal: true,
readonly: true,
addons/mail/static/src/models/user_setting.js
+1 -1
View File
@@ -275,7 +275,7 @@ registerModel({
/**
* Model for the component with the controls for RTC related settings.
*/
rtcConfigurationMenu: one('RtcConfigurationMenu', {
callSettingsMenu: one('CallSettingsMenu', {
default: insertAndReplace(),
inverse: 'userSetting',
isCausal: true,
addons/mail/static/src/services/systray_service.js
+2 -2
View File
@@ -1,7 +1,7 @@
/** @odoo-module **/
import { MessagingMenuContainer } from '@mail/components/messaging_menu_container/messaging_menu_container';
import { RtcActivityNoticeContainer } from '@mail/components/rtc_activity_notice_container/rtc_activity_notice_container';
import { CallSystrayMenuContainer } from '@mail/components/rtc_activity_notice_container/rtc_activity_notice_container';
import { registry } from '@web/core/registry';
@@ -11,6 +11,6 @@ export const systrayService = {
dependencies: ['messaging'],
start() {
systrayRegistry.add('mail.MessagingMenuContainer', { Component: MessagingMenuContainer });
systrayRegistry.add('mail.RtcActivityNoticeContainer', { Component: RtcActivityNoticeContainer }, { sequence: 100 });
systrayRegistry.add('mail.CallSystrayMenuContainer', { Component: CallSystrayMenuContainer }, { sequence: 100 });
},
};