[FIX] mail: prevent traceback when ending call in fullScreen on mobile

Before this commit, ending the call on mobile when on fullScreen
would lead to a traceback as the callViewer was updated asynchronously
because it relies on the browser fullScreen promises.

This commit fixes this issue by ensuring that the callViewer still
exists when the fullScreen promise is resolved.

closes odoo/odoo#76317

X-original-commit: cfadf792ecb471d6a717e6cb899db39e0af9005c
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
Signed-off-by: Thanh Dodeur <ThanhDodeurOdoo@users.noreply.github.com>
This commit is contained in:
Thanh Dodeur
2021-09-10 12:33:57 +00:00
parent b04ddee589
commit 08f35dc4dd
4 changed files with 50 additions and 27 deletions
@@ -8,10 +8,18 @@
<i class="o_RtcOptionList_button_icon fa fa-lg fa-th-large"/>
<span class="o_RtcOptionList_button_text">Change layout</span>
</button>
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickFullScreen">
<i class="o_RtcOptionList_button_icon fa fa-lg fa-arrows-alt"/>
<span class="o_RtcOptionList_button_text">Full screen</span>
</button>
<t t-if="rtcOptionList.rtcController.callViewer.isFullScreen">
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickDeactivateFullScreen">
<i class="o_RtcOptionList_button_icon fa fa-lg fa-compress"/>
<span class="o_RtcOptionList_button_text">Exit full screen</span>
</button>
</t>
<t t-else="">
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickActivateFullScreen">
<i class="o_RtcOptionList_button_icon fa fa-lg fa-arrows-alt"/>
<span class="o_RtcOptionList_button_text">Full screen</span>
</button>
</t>
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickOptions">
<i class="o_RtcOptionList_button_icon fa fa-lg fa-cog"/>
<span class="o_RtcOptionList_button_text">Settings</span>
@@ -88,30 +88,32 @@ function factory(dependencies) {
this.messaging.userSetting.rtcConfigurationMenu.toggle();
}
/**
* @param {boolean} force Force the fullScreen state.
*/
async toggleFullScreen(force) {
if (!this.exists()) {
return;
}
async activateFullScreen() {
const el = document.body;
const fullScreenElement = document.webkitFullscreenElement || document.fullscreenElement;
if (force !== undefined ? force : !fullScreenElement) {
try {
if (el.requestFullscreen) {
await el.requestFullscreen();
} else if (el.mozRequestFullScreen) {
await el.mozRequestFullScreen();
} else if (el.webkitRequestFullscreen) {
await el.webkitRequestFullscreen();
}
try {
if (el.requestFullscreen) {
await el.requestFullscreen();
} else if (el.mozRequestFullScreen) {
await el.mozRequestFullScreen();
} else if (el.webkitRequestFullscreen) {
await el.webkitRequestFullscreen();
}
if (this.exists()) {
this.update({ isFullScreen: true });
} catch (e) {
}
} catch (e) {
if (this.exists()) {
this.update({ isFullScreen: false });
}
return;
this.env.services.notification.notify({
message: this.env._t("The FullScreen mode was denied by the browser"),
type: 'warning',
});
}
}
async deactivateFullScreen() {
const fullScreenElement = document.webkitFullscreenElement || document.fullscreenElement;
if (fullScreenElement) {
if (document.exitFullscreen) {
await document.exitFullscreen();
@@ -120,6 +122,8 @@ function factory(dependencies) {
} else if (document.webkitCancelFullScreen) {
await document.webkitCancelFullScreen();
}
}
if (this.exists()) {
this.update({ isFullScreen: false });
}
}
@@ -271,7 +275,7 @@ function factory(dependencies) {
* @private
*/
_onChangeMailRtcChannel() {
this.toggleFullScreen(false);
this.deactivateFullScreen();
this.update({ filterVideoGrid: false });
}
@@ -93,6 +93,7 @@ function factory(dependencies) {
RtcController.fields = {
callViewer: one2one('mail.rtc_call_viewer', {
inverse: 'rtcController',
required: true,
}),
isSmall: attr({
compute: '_computeIsSmall',
@@ -12,7 +12,8 @@ function factory(dependencies) {
*/
_created() {
super._created();
this.onClickFullScreen = this.onClickFullScreen.bind(this);
this.onClickActivateFullScreen = this.onClickActivateFullScreen.bind(this);
this.onClickDeactivateFullScreen = this.onClickDeactivateFullScreen.bind(this);
this.onClickLayout = this.onClickLayout.bind(this);
this.onClickOptions = this.onClickOptions.bind(this);
}
@@ -24,8 +25,16 @@ function factory(dependencies) {
/**
* @param {MouseEvent} ev
*/
onClickFullScreen(ev) {
this.rtcController.callViewer.toggleFullScreen();
onClickActivateFullScreen(ev) {
this.rtcController.callViewer.activateFullScreen();
this.component.trigger('o-popover-close');
}
/**
* @param {MouseEvent} ev
*/
onClickDeactivateFullScreen(ev) {
this.rtcController.callViewer.deactivateFullScreen();
this.component.trigger('o-popover-close');
}
@@ -54,6 +63,7 @@ function factory(dependencies) {
component: attr(),
rtcController: one2one('mail.rtc_controller', {
inverse: 'rtcOptionList',
required: true,
}),
};