github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 全屏判断逻辑调整（#106）

Browse Source
This commit is contained in:
pipipi-pikachu 2022-05-24 21:56:19 +08:00
parent 860dd4bca6
commit cf81839ed3
3 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/global.d.ts vendored
View File

@ -1,13 +1,16 @@
interface HTMLElement {
webkitRequestFullScreen(options?: FullscreenOptions): Promise<void>;
mozRequestFullScreen(options?: FullscreenOptions): Promise<void>;
msRequestFullscreen(options?: FullscreenOptions): Promise<void>;
}
interface Document {
mozFullScreen: boolean;
webkitIsFullScreen: boolean;
webkitFullScreen: boolean;
webkitFullscreenElement: Element | null;
mozFullScreenElement: Element | null;
msFullscreenElement: Element | null;
webkitCurrentFullScreenElement: Element | null;
mozCancelFullScreen(): Promise<void>;
webkitCancelFullScreen(): Promise<void>;
webkitExitFullscreen(): Promise<void>;
msExitFullscreen(): Promise<void>;
}

18
src/utils/fullscreen.ts
View File

@ -4,18 +4,24 @@ export const enterFullscreen = () => {
if (docElm.requestFullscreen) docElm.requestFullscreen()
else if (docElm.mozRequestFullScreen) docElm.mozRequestFullScreen()
else if (docElm.webkitRequestFullScreen) docElm.webkitRequestFullScreen()
else if (docElm.msRequestFullscreen) docElm.msRequestFullscreen()
}
// 退出全屏
export const exitFullscreen = () => {
if (document.exitFullscreen) document.exitFullscreen()
else if (document.mozCancelFullScreen) document.mozCancelFullScreen()
else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen()
else if (document.webkitExitFullscreen) document.webkitExitFullscreen()
else if (document.msExitFullscreen) document.msExitFullscreen()
}
// 判断是否全屏
export const isFullscreen = () => (
document.mozFullScreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen
)
export const isFullscreen = () => {
const fullscreenElement =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement ||
document.webkitCurrentFullScreenElement
return !!fullscreenElement
}

6
src/views/Screen/hooks/useFullscreen.ts
View File

@ -8,7 +8,7 @@ export default () => {
const { exitScreening } = useScreening()
const windowResizeListener = () => {
const handleFullscreenChange = () => {
fullscreenState.value = isFullscreen()
if (!fullscreenState.value && escExit.value) exitScreening()
@ -17,9 +17,9 @@ export default () => {
onMounted(() => {
fullscreenState.value = isFullscreen()
window.addEventListener('resize', windowResizeListener)
document.addEventListener('fullscreenchange', handleFullscreenChange)
})
onUnmounted(() => window.removeEventListener('resize', windowResizeListener))
onUnmounted(() => document.removeEventListener('fullscreenchange', handleFullscreenChange))
const manualExitFullscreen = () => {
if (!fullscreenState.value) return