[FIX] mail: prevent video auto fullScreen and adds autoplay on safari

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>

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;
+        }
     }
 }
 

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>

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;
+            }
         }
 
         /**