[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:
@@ -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,
|
||||
}),
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user