From 10e2fbd4992c6ad6993b4f8eb31bcd5e7e046f83 Mon Sep 17 00:00:00 2001
From: Ethan Waldo <ewaldo@healthetechs.com>
Date: Wed, 4 Jan 2023 23:33:00 -0500
Subject: [PATCH] Use Keyboard API to lock screen for supported browsers

When using fullscreen mode, hitting the escape key will exit out of
fullscreen mode.  To stay in fullscreen mode but pass the escape
key through, we can use the Keyboard API to require the escape key
be held down https://wicg.github.io/keyboard-lock/#escape-key.

Tested in Chrome which supports Keyboard API and Firefox which does
not https://caniuse.com/?search=navigator.keyboard with no errors
in either case.
---
 client/src/components/video.vue          |  3 ++-
 client/src/types/navigator.keyboard.d.ts | 15 +++++++++++++++
 client/src/utils/index.ts                | 12 ++++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 client/src/types/navigator.keyboard.d.ts

diff --git a/client/src/components/video.vue b/client/src/components/video.vue
index a93893e..ac3c3bc 100644
--- a/client/src/components/video.vue
+++ b/client/src/components/video.vue
@@ -194,7 +194,7 @@
 <script lang="ts">
   import { Component, Ref, Watch, Vue, Prop } from 'vue-property-decorator'
   import ResizeObserver from 'resize-observer-polyfill'
-  import { elementRequestFullscreen, onFullscreenChange, isFullscreen } from '~/utils'
+  import { elementRequestFullscreen, onFullscreenChange, isFullscreen, lockKeyboard, unlockKeyboard } from '~/utils'
 
   import Emote from './emote.vue'
   import Resolution from './resolution.vue'
@@ -417,6 +417,7 @@
 
       onFullscreenChange(this._player, () => {
         this.fullscreen = isFullscreen()
+        this.fullscreen ? lockKeyboard() : unlockKeyboard()
         this.onResize()
       })
 
diff --git a/client/src/types/navigator.keyboard.d.ts b/client/src/types/navigator.keyboard.d.ts
new file mode 100644
index 0000000..9d98c86
--- /dev/null
+++ b/client/src/types/navigator.keyboard.d.ts
@@ -0,0 +1,15 @@
+// navigator.keyboard.d.ts
+
+// Type declarations for Keyboard API
+// https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API
+interface Keyboard {
+  lock(keyCodes?: array<string>): Promise<void>;
+  unlock(): void;
+}
+
+interface NavigatorKeyboard {
+  // Only available in a secure context.
+  readonly keyboard?: Keyboard;
+}
+
+interface Navigator extends NavigatorKeyboard {}
diff --git a/client/src/utils/index.ts b/client/src/utils/index.ts
index 4e2df9c..c7a5693 100644
--- a/client/src/utils/index.ts
+++ b/client/src/utils/index.ts
@@ -8,6 +8,18 @@ export function makeid(length: number) {
   return result
 }
 
+export function lockKeyboard() {
+  if (navigator && navigator.keyboard) {
+    navigator.keyboard.lock();
+  }
+}
+
+export function unlockKeyboard() {
+  if (navigator && navigator.keyboard) {
+    navigator.keyboard.unlock();
+  }
+}
+
 export function elementRequestFullscreen(el: HTMLElement) {
   if (typeof el.requestFullscreen === 'function') {
     el.requestFullscreen()