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 1/2] 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 47170101..f63c8d30 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()

From b41d0bf956fd3ed6f747119507c0393747a592f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Sat, 25 Mar 2023 22:19:01 +0100
Subject: [PATCH 2/2] lint fix.

---
 client/src/components/video.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/video.vue b/client/src/components/video.vue
index f63c8d30..341ccbfd 100644
--- a/client/src/components/video.vue
+++ b/client/src/components/video.vue
@@ -390,14 +390,15 @@
         try {
           await this._video.play()
         } catch (err: any) {
-          if (!this._video.muted ) {
-            // video.play() can fail if audio is set due restrictive browsers autoplay policy
-            // retry with muted audio
+          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) {
+              // if it still fails, we're not playing anything
               this.$accessor.video.pause()
             }
           } else {
@@ -441,7 +442,6 @@
       this._video.addEventListener('canplaythrough', () => {
         this.$accessor.video.setPlayable(true)
         if (this.autoplay) {
-
           this.$nextTick(() => {
             this.$accessor.video.play()
           })