-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.ts
142 lines (121 loc) · 2.99 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
import { on } from "@sveu/browser"
import type { FullscreenParameter, FullscreenAttributes, FullscreenFunctionMap } from "../utils"
import type { ActionReturn } from "svelte/action"
// from: https://github.com/sindresorhus/screenfull.js/blob/master/src/screenfull.js
const functions_map = [
[
"requestFullscreen",
"exitFullscreen",
"fullscreenElement",
"fullscreenEnabled",
"fullscreenchange",
"fullscreenerror",
],
// New WebKit
[
"webkitRequestFullscreen",
"webkitExitFullscreen",
"webkitFullscreenElement",
"webkitFullscreenEnabled",
"webkitfullscreenchange",
"webkitfullscreenerror",
],
// Old WebKit
[
"webkitRequestFullScreen",
"webkitCancelFullScreen",
"webkitCurrentFullScreenElement",
"webkitCancelFullScreen",
"webkitfullscreenchange",
"webkitfullscreenerror",
],
[
"mozRequestFullScreen",
"mozCancelFullScreen",
"mozFullScreenElement",
"mozFullScreenEnabled",
"mozfullscreenchange",
"mozfullscreenerror",
],
[
"msRequestFullscreen",
"msExitFullscreen",
"msFullscreenElement",
"msFullscreenEnabled",
"MSFullscreenChange",
"MSFullscreenError",
],
] as FullscreenFunctionMap[]
/**
* Make an element enter or exit fullscreen mode.
*
* @param element - The element to make fullscreen.
*
* @param fn - The function to call when the element mounted.
* - `supported` - Whether fullscreen is supported.
* - `enter` - The function to call to enter fullscreen.
* - `exit` - The function to call to exit fullscreen.
* - `toggle` - The function to call to toggle fullscreen.
*
* @example
* ```html
* <script>
* function fn({ supported, enter, exit, toggle }) {
* // Do something with the data
* }
* </script>
*
* <video src="https://vjs.zencdn.net/v/oceans.mp4" on:fullscreen="{(e) => console.log(e.detail)}" use:fullscreen={fn}/>
* ```
*/
export function fullscreen(
element: HTMLElement | SVGElement,
fn: (data: FullscreenParameter) => void,
): ActionReturn<FullscreenParameter, FullscreenAttributes> {
let fullscreen = false
let map = functions_map[0]
function support() {
for (const m of functions_map) {
if (m[1] in document) {
map = m
return true
}
}
return false
}
const supported = support()
const [REQUEST, EXIT, ELEMENT, , EVENT] = map
async function exit() {
if (!supported) return
if (document?.[ELEMENT]) await document[EXIT]()
fullscreen = false
element.dispatchEvent(new CustomEvent("fullscreen", { detail: fullscreen }))
}
async function enter() {
if (!supported) return
if (fullscreen) return
await element[REQUEST]()
fullscreen = true
element.dispatchEvent(new CustomEvent("fullscreen", { detail: fullscreen }))
}
async function toggle() {
if (fullscreen) await exit()
else await enter()
}
fn({ supported, enter, exit, toggle })
const cleanup = on(
document,
EVENT,
() => {
fullscreen = Boolean(document[ELEMENT])
element.dispatchEvent(new CustomEvent("fullscreen", { detail: fullscreen }))
},
false,
)
return {
destroy() {
exit()
cleanup()
},
}
}