Merge pull request m1k1o#232 from Dishwasha/master

Use Keyboard API to lock screen for supported browsers

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()
       })
 

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 {}

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()