From 76fc892823959029a4a61f530205c16b6fe8c975 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Sat, 18 Mar 2023 13:31:40 +0100
Subject: [PATCH] fix video state sync, fixes  #250.

---
 client/src/components/video.vue | 20 ++++++++++++++++----
 docs/changelog.md               |  1 +
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/client/src/components/video.vue b/client/src/components/video.vue
index 99bff5c..4717010 100644
--- a/client/src/components/video.vue
+++ b/client/src/components/video.vue
@@ -22,10 +22,10 @@
           @mouseenter.stop.prevent="onMouseEnter"
           @mouseleave.stop.prevent="onMouseLeave"
         />
-        <div v-if="!playing && playable" class="player-overlay" @click.stop.prevent="toggle">
+        <div v-if="!playing && playable" class="player-overlay" @click.stop.prevent="playAndUnmute">
           <i class="fas fa-play-circle" />
         </div>
-        <div v-if="mutedOverlay && muted" class="player-overlay" @click.stop.prevent="unmute">
+        <div v-else-if="mutedOverlay && muted" class="player-overlay" @click.stop.prevent="unmute">
           <i class="fas fa-volume-up" />
         </div>
         <div ref="aspect" class="player-aspect" />
@@ -384,9 +384,16 @@
     }
 
     @Watch('playing')
-    onPlayingChanged(playing: boolean) {
+    async onPlayingChanged(playing: boolean) {
       if (this._video && this._video.paused && playing) {
-        this.play()
+        // if autoplay is disabled, play() will throw an error
+        // and we need to properly save the state otherwise we
+        // would be thinking we're playing when we're not
+        try {
+          await this._video.play()
+        } catch (err: any) {
+          this.$accessor.video.pause()
+        }
       }
 
       if (this._video && !this._video.paused && !playing) {
@@ -560,6 +567,11 @@
       }
     }
 
+    playAndUnmute() {
+      this.$accessor.video.play()
+      this.$accessor.video.setMuted(false)
+    }
+
     unmute() {
       this.$accessor.video.setMuted(false)
     }
diff --git a/docs/changelog.md b/docs/changelog.md
index 49ffecb..796148a 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -13,6 +13,7 @@
 - Fixed keysym mapping for unknown keycodes, which was causing some key combinations to not work on some keyboards.
 - Fixed a bug where `max_fps=0` would lead to an invalid pipeline.
 - Fixed client side webrtc ICE gathering, so that neko can be used without exposed ports, only with STUN and TURN servers.
+- Fixed play state synchronization, when autoplay is disabled.
 
 ### Misc
 - Updated to go 1.19 and Node 18, removed go-events as dependency (by @mbattista).