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:
parent
1c228a7daa
commit
10e2fbd499
@ -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()
|
||||
})
|
||||
|
||||
|
15
client/src/types/navigator.keyboard.d.ts
vendored
Normal file
15
client/src/types/navigator.keyboard.d.ts
vendored
Normal 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 {}
|
@ -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()
|
||||
|
Reference in New Issue
Block a user