Archived
2
0

Merge pull request #232 from Dishwasha/master

Use Keyboard API to lock screen for supported browsers
This commit is contained in:
Miroslav Šedivý 2023-01-07 11:58:36 +01:00 committed by GitHub
commit 1509521129
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 1 deletions

View File

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

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