From 52ee7372765e272aad7cb52b9dceecf9d0145f55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Sat, 11 Apr 2020 16:50:59 +0200
Subject: [PATCH] log active keys + onBlur

---
 client/src/components/video.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/client/src/components/video.vue b/client/src/components/video.vue
index b56add2..65a91bc 100644
--- a/client/src/components/video.vue
+++ b/client/src/components/video.vue
@@ -161,6 +161,7 @@
     private observer = new ResizeObserver(this.onResise.bind(this))
     private focused = false
     private fullscreen = false
+    private activeKeys: any = {}
 
     get admin() {
       return this.$accessor.user.admin
@@ -333,12 +334,14 @@
       })
 
       document.addEventListener('focusin', this.onFocus.bind(this))
+      document.addEventListener('focusout', this.onBlur.bind(this))
     }
 
     beforeDestroy() {
       this.observer.disconnect()
       this.$accessor.video.setPlayable(false)
       document.removeEventListener('focusin', this.onFocus.bind(this))
+      document.removeEventListener('focusout', this.onBlur.bind(this))
     }
 
     play() {
@@ -401,6 +404,18 @@
       }
     }
 
+    onBlur() {
+      if (!this.focused || !this.hosting || this.locked) {
+        return
+      }
+
+      let keys = Object.keys(this.activeKeys)
+      for(let key of keys) {
+        this.$client.sendData('keyup', { key })
+        delete this.activeKeys[key]
+      }
+    }
+
     onMousePos(e: MouseEvent) {
       const { w, h } = this.$accessor.video.resolution
       const rect = this._overlay.getBoundingClientRect()
@@ -486,7 +501,9 @@
         return
       }
 
-      this.$client.sendData('keydown', { key: this.getCode(e) })
+      let key = this.getCode(e)
+      this.$client.sendData('keydown', { key })
+      this.activeKeys[key] = true
     }
 
     onKeyUp(e: KeyboardEvent) {
@@ -494,7 +511,9 @@
         return
       }
 
-      this.$client.sendData('keyup', { key: this.getCode(e) })
+      let key = this.getCode(e)
+      this.$client.sendData('keyup', { key })
+      delete this.activeKeys[key]
     }
 
     onResise() {