clipboard sync and some minor fixes

client/src/components/video.vue

@@ -196,6 +196,10 @@
       return this.$accessor.settings.scroll_invert
     }
 
+    get clipboard() {
+      return this.$accessor.remote.clipboard
+    }
+
     @Watch('volume')
     onVolumeChanged(volume: number) {
       if (this._video) {
@@ -233,6 +237,11 @@
       }
     }
 
+    @Watch('clipboard')
+    onClipboardChanged(clipboard: string) {
+      navigator.clipboard.writeText(clipboard).catch(console.error)
+    }
+
     mounted() {
       this._container.addEventListener('resize', this.onResise)
       this.onVolumeChanged(this.volume)
@@ -249,7 +258,9 @@
       this._video.addEventListener('canplaythrough', () => {
         this.$accessor.video.setPlayable(true)
         if (this.autoplay) {
-          this.$accessor.video.play()
+          this.$nextTick(() => {
+            this.$accessor.video.play()
+          })
         }
       })
 
@@ -261,11 +272,14 @@
         console.error(event.error)
         this.$accessor.video.setPlayable(false)
       })
+
+      document.addEventListener('focusin', this.onFocus.bind(this))
     }
 
     beforeDestroy() {
       this.observer.disconnect()
       this.$accessor.video.setPlayable(false)
+      document.removeEventListener('focusin', this.onFocus.bind(this))
     }
 
     play() {
@@ -308,6 +322,23 @@
       this.onResise()
     }
 
+    onFocus() {
+      if (!document.hasFocus()) {
+        return
+      }
+
+      if (this.hosting) {
+        navigator.clipboard
+          .readText()
+          .then(text => {
+            if (this.clipboard !== text) {
+              this.$accessor.remote.sendClipboard(text)
+            }
+          })
+          .catch(console.error)
+      }
+    }
+
     onMousePos(e: MouseEvent) {
       const { w, h } = this.$accessor.video.resolution
       const rect = this._overlay.getBoundingClientRect()
@@ -362,6 +393,7 @@
 
     onMouseEnter(e: MouseEvent) {
       this._overlay.focus()
+      this.onFocus()
       this.focused = true
     }
 

client/src/neko/base.ts

@@ -165,6 +165,11 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
       this.emit('debug', `peer connection state chagned: ${this._state}`)
 
       switch (this._state) {
+        case 'checking':
+          if (this._timeout) {
+            clearTimeout(this._timeout)
+          }
+          break
         case 'connected':
           this.onConnected()
           break

client/src/neko/events.ts

@@ -29,6 +29,7 @@ export const EVENT = {
     RELEASE: 'control/release',
     REQUEST: 'control/request',
     REQUESTING: 'control/requesting',
+    CLIPBOARD: 'control/clipboard',
     GIVE: 'control/give',
   },
   CHAT: {
@@ -64,6 +65,7 @@ export type ControlEvents =
   | typeof EVENT.CONTROL.RELEASE
   | typeof EVENT.CONTROL.REQUEST
   | typeof EVENT.CONTROL.GIVE
+  | typeof EVENT.CONTROL.CLIPBOARD
 
 export type SystemEvents = typeof EVENT.SYSTEM.DISCONNECT
 export type IdentityEvents = typeof EVENT.IDENTITY.PROVIDE | typeof EVENT.IDENTITY.DETAILS

client/src/neko/index.ts

@@ -17,6 +17,7 @@ import {
   EmotePayload,
   AdminPayload,
   AdminTargetPayload,
+  ControlClipboardPayload,
 } from './messages'
 
 interface NekoEvents extends BaseEvents {}
@@ -254,6 +255,10 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     })
   }
 
+  protected [EVENT.CONTROL.CLIPBOARD]({ text }: ControlClipboardPayload) {
+    this.$accessor.remote.setClipboard(text)
+  }
+
   /////////////////////////////
   // Chat Events
   /////////////////////////////

client/src/neko/messages.ts

@@ -27,6 +27,7 @@ export type WebSocketPayloads =
   | MemberListPayload
   | Member
   | ControlPayload
+  | ControlClipboardPayload
   | ChatPayload
   | ChatSendPayload
   | EmojiSendPayload
@@ -110,6 +111,10 @@ export interface ControlTargetPayload {
   target: string
 }
 
+export interface ControlClipboardPayload {
+  text: string
+}
+
 /*
   CHAT PAYLOADS
 */

client/src/store/remote.ts

@@ -7,6 +7,7 @@ export const namespaced = true
 
 export const state = () => ({
   id: '',
+  clipboard: '',
 })
 
 export const getters = getterTree(state, {
@@ -30,8 +31,13 @@ export const mutations = mutationTree(state, {
     }
   },
 
+  setClipboard(state, clipboard: string) {
+    state.clipboard = clipboard
+  },
+
   clear(state) {
     state.id = ''
+    state.clipboard = ''
   },
 })
 
@@ -41,6 +47,15 @@ export const actions = actionTree(
     initialise({ commit }) {
       //
     },
+
+    sendClipboard({ getters }, clipboard: string) {
+      if (!accessor.connected || !getters.hosting) {
+        return
+      }
+
+      $client.sendMessage(EVENT.CONTROL.CLIPBOARD, { text: clipboard })
+    },
+
     toggle({ getters }) {
       if (!accessor.connected) {
         return