fix #33

client/src/components/video.vue

@@ -312,8 +312,9 @@
       this._video.addEventListener('canplaythrough', () => {
         this.$accessor.video.setPlayable(true)
         if (this.autoplay) {
-          if (!document.hasFocus()) {
+          if (!document.hasFocus() || !this.$accessor.active) {
             this.$accessor.video.setMuted(true)
+            this._video.muted = true
           }
 
           this.$nextTick(() => {
@@ -345,12 +346,16 @@
         return
       }
 
+      try {
         this._video
           .play()
           .then(() => {
             this.onResise()
           })
-        .catch(err => this.$log.error(err))
+          .catch(err => this.$log.error)
+      } catch (err) {
+        this.$log.error(err)
+      }
     }
 
     pause() {
@@ -379,7 +384,7 @@
     }
 
     onFocus() {
-      if (!document.hasFocus()) {
+      if (!document.hasFocus() || !this.$accessor.active) {
         return
       }
 
@@ -388,6 +393,7 @@
           .readText()
           .then(text => {
             if (this.clipboard !== text) {
+              this.$accessor.remote.setClipboard(text)
               this.$accessor.remote.sendClipboard(text)
             }
           })

client/src/main.ts

@@ -27,6 +27,15 @@ new Vue({
   store,
   render: h => h(app),
   created() {
+    const click = () => {
+      this.$accessor.setActive()
+      if (this.$accessor.settings.autoplay && this.$accessor.video.playing) {
+        this.$accessor.video.setMuted(false)
+      }
+      window.removeEventListener('click', click, false)
+    }
+    window.addEventListener('click', click, false)
+
     this.$client.init(this)
     this.$accessor.initialise()
   },

client/src/store/index.ts

@@ -15,12 +15,17 @@ import * as emoji from './emoji'
 export const state = () => ({
   username: get<string>('username', ''),
   password: get<string>('password', ''),
+  active: false,
   connecting: false,
   connected: false,
   locked: false,
 })
 
 export const mutations = mutationTree(state, {
+  setActive(state) {
+    state.active = true
+  },
+
   setLogin(state, { username, password }: { username: string; password: string }) {
     state.username = username
     state.password = password