From b04ddee589563a78da1c0f45f717cd4af872cfb1 Mon Sep 17 00:00:00 2001
From: Thanh Dodeur <tso@odoo.com>
Date: Tue, 7 Sep 2021 09:38:11 +0000
Subject: [PATCH] [FIX] mail: prevent video auto fullScreen and adds autoplay
 on safari
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, safari mobile would immediately launch new videos
as fullScreen, while safari would prevent the autoplay of videos, as
the play request didn't originate from a user input.

This commit fixes those issues.

closes odoo/odoo#76316

X-original-commit: d1a74a1f180f5a6963355ae7e402d42351d1d16c
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 .../static/src/components/rtc_video/rtc_video.js | 13 ++++++++++++-
 .../src/components/rtc_video/rtc_video.xml       |  6 +++++-
 .../static/src/models/rtc_session/rtc_session.js | 16 ++++++++++++++--
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/addons/mail/static/src/components/rtc_video/rtc_video.js b/addons/mail/static/src/components/rtc_video/rtc_video.js
index 9b0b2df55c4..185669d651f 100644
--- a/addons/mail/static/src/components/rtc_video/rtc_video.js
+++ b/addons/mail/static/src/components/rtc_video/rtc_video.js
@@ -60,11 +60,22 @@ export class RtcVideo extends Component {
     //--------------------------------------------------------------------------
 
     /**
+     * Plays the video as some browsers may not support or block autoplay.
+     *
      * @private
      * @param {Event} ev
      */
     async _onVideoLoadedMetaData(ev) {
-        await ev.target.play();
+        try {
+            await ev.target.play();
+        } catch (error)  {
+            if (typeof error === 'object' && error.name === 'NotAllowedError') {
+                // Ignored as some browsers may reject play() calls that do not
+                // originate from a user input.
+                return;
+            }
+            throw error;
+        }
     }
 }
 
diff --git a/addons/mail/static/src/components/rtc_video/rtc_video.xml b/addons/mail/static/src/components/rtc_video/rtc_video.xml
index 14248f3b0d6..8dc63649de4 100644
--- a/addons/mail/static/src/components/rtc_video/rtc_video.xml
+++ b/addons/mail/static/src/components/rtc_video/rtc_video.xml
@@ -4,7 +4,11 @@
     <t t-name="mail.RtcVideo" owl="1">
         <video class="o_RtcVideo_video"
            t-ref="video"
-           t-on-loadedmetadata="_onVideoLoadedMetaData"/>
+           playsinline="true"
+           autoplay="true"
+           muted="true"
+           t-on-loadedmetadata="_onVideoLoadedMetaData"
+        />
     </t>
 
 </templates>
diff --git a/addons/mail/static/src/models/rtc_session/rtc_session.js b/addons/mail/static/src/models/rtc_session/rtc_session.js
index 6051339efbb..5a11c625a4f 100644
--- a/addons/mail/static/src/models/rtc_session/rtc_session.js
+++ b/addons/mail/static/src/models/rtc_session/rtc_session.js
@@ -104,19 +104,31 @@ function factory(dependencies) {
          * @param {boolean} param0.isMuted
          * @param {boolean} param0.isTalking
          */
-        setAudio({ audioStream, isMuted, isTalking }) {
+        async setAudio({ audioStream, isMuted, isTalking }) {
             this._removeAudio();
             const audioElement = this.audioElement || new window.Audio();
             audioElement.srcObject = audioStream;
             audioElement.volume = this.partner && this.partner.volumeSetting ? this.partner.volumeSetting.volume : this.volume;
             audioElement.muted = this.messaging.mailRtc.currentRtcSession.isDeaf;
-            audioElement.play();
+            // Using both autoplay and play() as safari may prevent play() outside of user interactions
+            // while some browsers may not support or block autoplay.
+            audioElement.autoplay = true;
             this.update({
                 audioElement,
                 audioStream,
                 isMuted,
                 isTalking,
             });
+            try {
+                await audioElement.play();
+            } catch (error)  {
+                if (typeof error === 'object' && error.name === 'NotAllowedError') {
+                    // Ignored as some browsers may reject play() calls that do not
+                    // originate from a user input.
+                    return;
+                }
+                throw error;
+            }
         }
 
         /**