From 08f35dc4dde0bb68f951df0c305050ef88861dae Mon Sep 17 00:00:00 2001
From: Thanh Dodeur <tso@odoo.com>
Date: Tue, 7 Sep 2021 10:15:55 +0000
Subject: [PATCH] [FIX] mail: prevent traceback when ending call in fullScreen
 on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../rtc_option_list/rtc_option_list.xml       | 16 +++++--
 .../models/rtc_call_viewer/rtc_call_viewer.js | 44 ++++++++++---------
 .../models/rtc_controller/rtc_controller.js   |  1 +
 .../models/rtc_option_list/rtc_option_list.js | 16 +++++--
 4 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/addons/mail/static/src/components/rtc_option_list/rtc_option_list.xml b/addons/mail/static/src/components/rtc_option_list/rtc_option_list.xml
index 92f05c3b262..f7915f74129 100644
--- a/addons/mail/static/src/components/rtc_option_list/rtc_option_list.xml
+++ b/addons/mail/static/src/components/rtc_option_list/rtc_option_list.xml
@@ -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>
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 8d227ea4567..889a2b2b8fa 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
@@ -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 });
         }
 
diff --git a/addons/mail/static/src/models/rtc_controller/rtc_controller.js b/addons/mail/static/src/models/rtc_controller/rtc_controller.js
index 8cd1d552791..163484a8d60 100644
--- a/addons/mail/static/src/models/rtc_controller/rtc_controller.js
+++ b/addons/mail/static/src/models/rtc_controller/rtc_controller.js
@@ -93,6 +93,7 @@ function factory(dependencies) {
     RtcController.fields = {
         callViewer: one2one('mail.rtc_call_viewer', {
             inverse: 'rtcController',
+            required: true,
         }),
         isSmall: attr({
             compute: '_computeIsSmall',
diff --git a/addons/mail/static/src/models/rtc_option_list/rtc_option_list.js b/addons/mail/static/src/models/rtc_option_list/rtc_option_list.js
index 8e52e91d068..e9701b9846b 100644
--- a/addons/mail/static/src/models/rtc_option_list/rtc_option_list.js
+++ b/addons/mail/static/src/models/rtc_option_list/rtc_option_list.js
@@ -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,
         }),
     };