sync player state with store.

client/src/components/video.vue

@@ -332,8 +332,10 @@
 
     @Watch('volume')
     onVolumeChanged(volume: number) {
-      if (this._video) {
+      volume /= 100
-        this._video.volume = this.volume / 100
+
+      if (this._video && this._video.volume != volume) {
+        this._video.volume = volume
       }
     }
 
@@ -342,10 +344,10 @@
       if (this._video && this._video.muted != muted) {
         this._video.muted = muted
         this.startsMuted = muted
-      }
 
-      if (!muted) {
+        if (!muted) {
-        this.mutedOverlay = false
+          this.mutedOverlay = false
+        }
       }
     }
 
@@ -365,9 +367,11 @@
 
     @Watch('playing')
     onPlayingChanged(playing: boolean) {
-      if (playing) {
+      if (this._video && this._video.paused && playing) {
         this.play()
-      } else {
+      }
+
+      if (this._video && !this._video.paused && !playing) {
         this.pause()
       }
     }
@@ -382,6 +386,7 @@
     mounted() {
       this._container.addEventListener('resize', this.onResise)
       this.onVolumeChanged(this.volume)
+      this.onMutedChanged(this.muted)
       this.onStreamChanged(this.stream)
       this.onResise()
 
@@ -415,6 +420,19 @@
         this.$accessor.video.setPlayable(false)
       })
 
+      this._video.addEventListener('volumechange', (event) => {
+        this.$accessor.video.setMuted(this._video.muted)
+        this.$accessor.video.setVolume(this._video.volume * 100)
+      })
+
+      this._video.addEventListener('playing', () => {
+        this.$accessor.video.play()
+      })
+
+      this._video.addEventListener('pause', () => {
+        this.$accessor.video.pause()
+      })
+
       document.addEventListener('focusin', this.onFocus.bind(this))
 
       /* Initialize Guacamole Keyboard */

docs/changelog.md

@@ -17,6 +17,7 @@
 - Add japanese characters support.
 - Sanitize display name and markdown codeblock input to prevent xss.
 - Display unmute overlay when joined.
+- Sync player play/pause/mute/umpute/volume state with store (beneficial for mobiles when using fullscreen mode).
 
 ## [n.eko v2.4](https://github.com/m1k1o/neko/releases/tag/v2.4)