[FIX] mail: remove webRTC component excessive getters

X-original-commit: 9bf4b6c29207b97368f27098df3cfbe79e2b5f0f
Part-of: odoo/odoo#77107
This commit is contained in:
Alexandre Kühn
2021-09-23 20:18:41 +00:00
parent 099bde0b75
commit d5d93bdf05
10 changed files with 44 additions and 114 deletions
@@ -6,17 +6,6 @@ const { Component } = owl;
export class RtcActivityNotice extends Component {
//--------------------------------------------------------------------------
// Getters / Setters
//--------------------------------------------------------------------------
/**
* @returns {mail.thread|undefined}
*/
get thread() {
return this.messaging && this.messaging.mailRtc.channel;
}
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
@@ -26,7 +15,7 @@ export class RtcActivityNotice extends Component {
* @param {MouseEvent} ev
*/
_onClick(ev) {
this.thread.open();
this.messaging.mailRtc.channel.open();
}
}
@@ -4,11 +4,11 @@
<t t-name="mail.RtcActivityNotice" owl="1">
<li class="o_RtcActivityNotice">
<RtcInvitations/>
<t t-if="thread">
<t t-set="title">Open conference: <t t-esc="thread.displayName"/></t>
<t t-if="messaging.mailRtc.channel">
<t t-set="title">Open conference: <t t-esc="messaging.mailRtc.channel.displayName"/></t>
<a class="o_RtcActivityNotice_button" t-att-title="title" role="button" t-on-click="_onClick">
<div class="o_RtcActivityNotice_buttonContent">
<span class="o_RtcActivityNotice_buttonTitle" t-esc="thread.displayName"/>
<span class="o_RtcActivityNotice_buttonTitle" t-esc="messaging.mailRtc.channel.displayName"/>
<i class="o_RtcActivityNotice_outputIndicator fa" t-att-class="{
'fa-microphone': !messaging.mailRtc.sendDisplay and !messaging.mailRtc.sendUserVideo,
'fa-video-camera': messaging.mailRtc.sendUserVideo,
@@ -41,20 +41,6 @@ export class RtcCallViewer extends Component {
return this.messaging.models['mail.rtc_call_viewer'].get(this.props.localId);
}
/**
* Used to make the component depend on the window size and trigger an
* update when the window size changes.
*
* @returns {Object|undefined}
*/
get windowSize() {
const device = this.messaging && this.messaging.device;
return device && {
innerHeight: device.globalWindowInnerHeight,
innerWidth: device.globalWindowInnerWidth,
};
}
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
@@ -5,8 +5,8 @@
<div class="o_RtcCallViewer" t-att-class="{ 'o-fullScreen': rtcCallViewer and rtcCallViewer.isFullScreen, 'o-isMinimized': rtcCallViewer and rtcCallViewer.isMinimized }">
<t t-if="rtcCallViewer">
<!-- used to make the template depend on window size -->
<t t-set="sizeChangeListener" t-value="windowSize"/>
<!-- 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" t-on-click="rtcCallViewer.onClick" t-on-mousemove="rtcCallViewer.onMouseMove">
@@ -23,24 +23,6 @@ export class RtcConfigurationMenu extends Component {
this.state.userDevices = await browser.navigator.mediaDevices.enumerateDevices();
}
//--------------------------------------------------------------------------
// Getters / Setters
//--------------------------------------------------------------------------
/**
* @returns {mail.configuration_menu}
*/
get rtcConfigurationMenu() {
return this.messaging && this.messaging.userSetting.rtcConfigurationMenu;
}
/**
* @returns {mail.user_setting}
*/
get userSetting() {
return this.messaging && this.messaging.userSetting;
}
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
@@ -50,7 +32,7 @@ export class RtcConfigurationMenu extends Component {
* @param {Event} ev
*/
_onChangeDelay(ev) {
this.rtcConfigurationMenu.onChangeDelay(ev.target.value);
this.messaging.rtcConfigurationMenu.onChangeDelay(ev.target.value);
}
/**
@@ -58,7 +40,7 @@ export class RtcConfigurationMenu extends Component {
* @param {Event} ev
*/
_onChangePushToTalk(ev) {
this.rtcConfigurationMenu.onChangePushToTalk();
this.messaging.rtcConfigurationMenu.onChangePushToTalk();
}
/**
@@ -66,7 +48,7 @@ export class RtcConfigurationMenu extends Component {
* @param {Event} ev
*/
_onChangeSelectAudioInput(ev) {
this.rtcConfigurationMenu.onChangeSelectAudioInput(ev.target.value);
this.messaging.rtcConfigurationMenu.onChangeSelectAudioInput(ev.target.value);
}
/**
@@ -74,7 +56,7 @@ export class RtcConfigurationMenu extends Component {
* @param {Event} ev
*/
_onChangeThreshold(ev) {
this.rtcConfigurationMenu.onChangeThreshold(ev.target.value);
this.messaging.rtcConfigurationMenu.onChangeThreshold(ev.target.value);
}
/**
@@ -82,7 +64,7 @@ export class RtcConfigurationMenu extends Component {
* @param {MouseEvent} ev
*/
_onClickRegisterKeyButton() {
this.rtcConfigurationMenu.onClickRegisterKeyButton();
this.messaging.rtcConfigurationMenu.onClickRegisterKeyButton();
}
}
@@ -7,7 +7,7 @@
<label class="o_RtcConfigurationMenu_optionLabel" title="Input device" aria-label="Input device">
<span class="o_RtcConfigurationMenu_optionName">Input device</span>
<div>
<select name="inputDevice" class="o_RtcConfigurationMenu_optionDeviceSelect" t-att-value="userSetting.audioInputDeviceId" t-on-change="_onChangeSelectAudioInput">
<select name="inputDevice" class="o_RtcConfigurationMenu_optionDeviceSelect" t-att-value="messaging.userSetting.audioInputDeviceId" t-on-change="_onChangeSelectAudioInput">
<option value="">Browser default</option>
<t t-if="state.userDevices" t-foreach="state.userDevices" t-as="device">
<t t-if="device.kind === 'audioinput'">
@@ -21,19 +21,19 @@
<div class="o_RtcConfigurationMenu_option">
<label class="o_RtcConfigurationMenu_optionLabel" title="Use Push-to-talk" aria-label="Use Push-to-talk">
<span class="o_RtcConfigurationMenu_optionName">Use Push-to-talk</span>
<input type="checkbox" aria-label="toggle push-to-talk" title="toggle push-to-talk" t-on-change="_onChangePushToTalk" t-att-checked="userSetting.usePushToTalk ? 'checked' : ''"/>
<input type="checkbox" aria-label="toggle push-to-talk" title="toggle push-to-talk" t-on-change="_onChangePushToTalk" t-att-checked="messaging.userSetting.usePushToTalk ? 'checked' : ''"/>
</label>
</div>
<t t-if="userSetting.usePushToTalk">
<t t-if="messaging.userSetting.usePushToTalk">
<div class="o_RtcConfigurationMenu_option">
<label class="o_RtcConfigurationMenu_optionLabel" title="Push-to-talk key" aria-label="Push-to-talk key">
<span class="o_RtcConfigurationMenu_optionName">Push-to-talk key</span>
<span class="o_RtcConfigurationMenu_optionPushToTalkGroup">
<t t-if="userSetting.pushToTalkKey">
<span class="o_RtcConfigurationMenu_optionPushToTalkGroupKey" t-att-class="{ 'o-isRegistering': rtcConfigurationMenu.isRegisteringKey }" t-esc="userSetting.pushToTalkKeyToString()"/>
<t t-if="messaging.userSetting.pushToTalkKey">
<span class="o_RtcConfigurationMenu_optionPushToTalkGroupKey" t-att-class="{ 'o-isRegistering': messaging.userSetting.rtcConfigurationMenu.isRegisteringKey }" t-esc="messaging.userSetting.pushToTalkKeyToString()"/>
</t>
<button class="o_RtcConfigurationMenu_button" t-on-click="_onClickRegisterKeyButton">
<t t-if="rtcConfigurationMenu.isRegisteringKey">
<t t-if="messaging.userSetting.rtcConfigurationMenu.isRegisteringKey">
<i title="Cancel" aria-label="Cancel" class="fa fa-2x fa-times-circle"/>
</t>
<t t-else="">
@@ -44,13 +44,13 @@
</label>
</div>
<div t-if="rtcConfigurationMenu.isRegisteringKey">Press a key to register it as the push-to-talk shortcut</div>
<div t-if="messaging.userSetting.rtcConfigurationMenu.isRegisteringKey">Press a key to register it as the push-to-talk shortcut</div>
<div class="o_RtcConfigurationMenu_option">
<label class="o_RtcConfigurationMenu_optionLabel" title="Delay after releasing push-to-talk" aria-label="Delay after releasing push-to-talk">
<span class="o_RtcConfigurationMenu_optionName">Delay after releasing push-to-talk</span>
<div class="o_RtcConfigurationMenu_optionInputGroup">
<input class="o_RtcConfigurationMenu_optionInputGroupInput" type="range" min="1" max="2000" step="1" t-att-value="userSetting.voiceActiveDuration" t-on-change="_onChangeDelay"/>
<span class="o_RtcConfigurationMenu_optionInputGroupValue"><t t-esc="userSetting.voiceActiveDuration"/>ms</span>
<input class="o_RtcConfigurationMenu_optionInputGroupInput" type="range" min="1" max="2000" step="1" t-att-value="messaging.userSetting.voiceActiveDuration" t-on-change="_onChangeDelay"/>
<span class="o_RtcConfigurationMenu_optionInputGroupValue"><t t-esc="messaging.userSetting.voiceActiveDuration"/>ms</span>
</div>
</label>
</div>
@@ -60,8 +60,8 @@
<label class="o_RtcConfigurationMenu_optionLabel" title="Minimum activity for voice detection" aria-label="Minimum activity for voice detection">
<span class="o_RtcConfigurationMenu_optionName">Minimum activity for voice detection</span>
<div class="o_RtcConfigurationMenu_optionInputGroup">
<input class="o_RtcConfigurationMenu_optionInputGroupInput" type="range" min="0.001" max="1" step="0.001" t-att-value="userSetting.voiceActivationThreshold" t-on-change="_onChangeThreshold"/>
<span class="o_RtcConfigurationMenu_optionInputGroupValue"><t t-esc="userSetting.voiceActivationThreshold"/></span>
<input class="o_RtcConfigurationMenu_optionInputGroupInput" type="range" min="0.001" max="1" step="0.001" t-att-value="messaging.userSetting.voiceActivationThreshold" t-on-change="_onChangeThreshold"/>
<span class="o_RtcConfigurationMenu_optionInputGroupValue"><t t-esc="messaging.userSetting.voiceActivationThreshold"/></span>
</div>
</label>
</div>
@@ -17,20 +17,6 @@ export class RtcController extends Component {
return this.messaging && this.messaging.models['mail.rtc_controller'].get(this.props.localId);
}
/**
* @returns {mail.thread}
*/
get rtcSession() {
return this.messaging && this.messaging.mailRtc.currentRtcSession;
}
/**
* @returns {mail.thread|undefined}
*/
get thread() {
return this.rtcController && this.rtcController.callViewer.threadView.thread;
}
}
Object.assign(RtcController, {
@@ -5,36 +5,36 @@
<div class="o_RtcController">
<t t-if="rtcController">
<div class="o_RtcController_buttons">
<t t-if="thread.mailRtc and rtcSession">
<t t-if="rtcSession.isMuted"><t t-set="microphoneTitle">Unmute</t></t>
<t t-if="rtcController.callViewer.threadView.thread.mailRtc and messaging.mailRtc.currentRtcSession">
<t t-if="messaging.mailRtc.currentRtcSession.isMuted"><t t-set="microphoneTitle">Unmute</t></t>
<t t-else=""><t t-set="microphoneTitle">Mute</t></t>
<button class="o_RtcController_button"
t-att-class="{ 'o-isActive': !rtcSession.isMuted, 'o-isSmall': rtcController.isSmall }"
t-att-class="{ 'o-isActive': !messaging.mailRtc.currentRtcSession.isMuted, 'o-isSmall': rtcController.isSmall }"
t-att-aria-label="microphoneTitle"
t-att-title="microphoneTitle"
t-on-click="rtcController.onClickMicrophone">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa" t-att-class="{
'fa-lg': !rtcController.isSmall,
'fa-microphone': !rtcSession.isMuted,
'fa-microphone-slash': rtcSession.isMuted,
'text-danger': rtcSession.isMuted,
'fa-microphone': !messaging.mailRtc.currentRtcSession.isMuted,
'fa-microphone-slash': messaging.mailRtc.currentRtcSession.isMuted,
'text-danger': messaging.mailRtc.currentRtcSession.isMuted,
}"/>
</div>
</button>
<t t-if="rtcSession.isDeaf"><t t-set="headphoneTitle">Undeafen</t></t>
<t t-if="messaging.mailRtc.currentRtcSession.isDeaf"><t t-set="headphoneTitle">Undeafen</t></t>
<t t-else=""><t t-set="headphoneTitle">Deafen</t></t>
<button class="o_RtcController_button"
t-att-class="{ 'o-isActive': !rtcSession.isDeaf, 'o-isSmall': rtcController.isSmall }"
t-att-class="{ 'o-isActive': !messaging.mailRtc.currentRtcSession.isDeaf, 'o-isSmall': rtcController.isSmall }"
t-att-aria-label="headphoneTitle"
t-att-title="headphoneTitle"
t-on-click="rtcController.onClickDeafen">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa" t-att-class="{
'fa-lg': !rtcController.isSmall,
'fa-headphones': !rtcSession.isDeaf,
'fa-deaf': rtcSession.isDeaf,
'text-danger': rtcSession.isDeaf,
'fa-headphones': !messaging.mailRtc.currentRtcSession.isDeaf,
'fa-deaf': messaging.mailRtc.currentRtcSession.isDeaf,
'text-danger': messaging.mailRtc.currentRtcSession.isDeaf,
}"/>
</div>
</button>
@@ -81,37 +81,37 @@
</t>
</Popover>
</t>
<t t-if="!thread.mailRtc">
<t t-if="!rtcController.callViewer.threadView.thread.mailRtc">
<button class="o_RtcController_button o_RtcController_callToggle"
t-att-class="{ 'o-isSmall': rtcController.isSmall }"
aria-label="Join Video Call"
title="Join Video Call"
t-att-disabled="thread.hasPendingRtcRequest"
t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
t-on-click="rtcController.onClickToggleVideoCall">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa fa-video-camera" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
</div>
</button>
</t>
<t t-if="thread">
<t t-if="thread.rtcInvitingSession and !thread.mailRtc">
<t t-if="rtcController.callViewer.threadView.thread">
<t t-if="rtcController.callViewer.threadView.thread.rtcInvitingSession and !rtcController.callViewer.threadView.thread.mailRtc">
<button class="o_RtcController_button o_RtcController_callToggle o-isActive"
t-att-class="{ 'o-isSmall': rtcController.isSmall }"
aria-label="Reject"
title="Reject"
t-att-disabled="thread.hasPendingRtcRequest"
t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
t-on-click="rtcController.onClickRejectCall">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa fa-phone" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
</div>
</button>
</t>
<t t-if="thread.mailRtc"><t t-set="phoneTitle">Disconnect</t></t>
<t t-if="rtcController.callViewer.threadView.thread.mailRtc"><t t-set="phoneTitle">Disconnect</t></t>
<t t-else=""><t t-set="phoneTitle">Join Call</t></t>
<button class="o_RtcController_button o_RtcController_callToggle"
t-att-aria-label="phoneTitle"
t-att-class="{ 'o-isActive': !!thread.mailRtc, 'o-isSmall': rtcController.isSmall }"
t-att-disabled="thread.hasPendingRtcRequest"
t-att-class="{ 'o-isActive': !!rtcController.callViewer.threadView.thread.mailRtc, 'o-isSmall': rtcController.isSmall }"
t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
t-att-title="phoneTitle"
t-on-click="rtcController.onClickToggleAudioCall">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
@@ -4,20 +4,7 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
const { Component } = owl;
export class RtcInvitations extends Component {
//--------------------------------------------------------------------------
// Getters / Setters
//--------------------------------------------------------------------------
/**
* @returns {mail.thread[]}
*/
get threads() {
return this.messaging && this.messaging.ringingThreads;
}
}
export class RtcInvitations extends Component {}
Object.assign(RtcInvitations, {
props: {},
@@ -3,8 +3,8 @@
<t t-name="mail.RtcInvitations" owl="1">
<div class="o_RtcInvitations">
<t t-if="threads">
<t t-foreach="threads" t-as="thread" t-key="thread.localId">
<t t-if="messaging.ringingThreads">
<t t-foreach="messaging.ringingThreads" t-as="thread" t-key="thread.localId">
<RtcInvitationCard threadLocalId="thread.localId"/>
</t>
</t>