From 217cc451ead1d8a5bae0682c6aeab8d2e9a90a14 Mon Sep 17 00:00:00 2001
From: Pawel Urbanek <pawel.urbanek@medvc.eu>
Date: Fri, 24 Mar 2023 16:17:05 +0100
Subject: [PATCH] add autoplay audio if possible

---
 client/src/components/video.vue | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/client/src/components/video.vue b/client/src/components/video.vue
index 4717010..f63c8d3 100644
--- a/client/src/components/video.vue
+++ b/client/src/components/video.vue
@@ -229,7 +229,6 @@
     private observer = new ResizeObserver(this.onResize.bind(this))
     private focused = false
     private fullscreen = false
-    private startsMuted = true
     private mutedOverlay = true
 
     get admin() {
@@ -361,7 +360,6 @@
     onMutedChanged(muted: boolean) {
       if (this._video && this._video.muted != muted) {
         this._video.muted = muted
-        this.startsMuted = muted
 
         if (!muted) {
           this.mutedOverlay = false
@@ -392,7 +390,19 @@
         try {
           await this._video.play()
         } catch (err: any) {
-          this.$accessor.video.pause()
+          if (!this._video.muted ) {
+            // video.play() can fail if audio is set due restrictive browsers autoplay policy
+            // retry with muted audio
+            try {
+              this.$accessor.video.setMuted(true)
+              this._video.muted = true
+              await this._video.play()
+            } catch (err: any) {
+              this.$accessor.video.pause()
+            }
+          } else {
+            this.$accessor.video.pause()
+          }
         }
       }
 
@@ -431,10 +441,6 @@
       this._video.addEventListener('canplaythrough', () => {
         this.$accessor.video.setPlayable(true)
         if (this.autoplay) {
-          // start as muted due to restrictive browsers autoplay policy
-          if (this.startsMuted && (!document.hasFocus() || !this.$accessor.active)) {
-            this.$accessor.video.setMuted(true)
-          }
 
           this.$nextTick(() => {
             this.$accessor.video.play()