Merge pull request #232 from Dishwasha/master
Use Keyboard API to lock screen for supported browsers
This commit is contained in:
commit
1509521129
@ -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()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
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
|
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()
|
||||||
|
Reference in New Issue
Block a user