Archived
2
0

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.
This commit is contained in:
Ethan Waldo 2023-01-04 23:33:00 -05:00
parent 1c228a7daa
commit 10e2fbd499
3 changed files with 29 additions and 1 deletions

View File

@ -194,7 +194,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Ref, Watch, Vue, Prop } from 'vue-property-decorator' import { Component, Ref, Watch, Vue, Prop } from 'vue-property-decorator'
import ResizeObserver from 'resize-observer-polyfill' 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 Emote from './emote.vue'
import Resolution from './resolution.vue' import Resolution from './resolution.vue'
@ -417,6 +417,7 @@
onFullscreenChange(this._player, () => { onFullscreenChange(this._player, () => {
this.fullscreen = isFullscreen() this.fullscreen = isFullscreen()
this.fullscreen ? lockKeyboard() : unlockKeyboard()
this.onResize() this.onResize()
}) })

View File

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

View File

@ -8,6 +8,18 @@ export function makeid(length: number) {
return result 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) { export function elementRequestFullscreen(el: HTMLElement) {
if (typeof el.requestFullscreen === 'function') { if (typeof el.requestFullscreen === 'function') {
el.requestFullscreen() el.requestFullscreen()