vod frog, frog with the vods
fix fullscreen on Safari: use webkit-prefixed fullscreen API
+24
-10
+24
-10
src/lib/VideoPlayer.svelte
+24
-10
src/lib/VideoPlayer.svelte
···
83
83
84
84
$effect(() => {
85
85
document.addEventListener("fullscreenchange", onFullscreenChange);
86
-
return () =>
87
-
document.removeEventListener(
88
-
"fullscreenchange",
89
-
onFullscreenChange,
90
-
);
86
+
document.addEventListener("webkitfullscreenchange", onFullscreenChange);
87
+
return () => {
88
+
document.removeEventListener("fullscreenchange", onFullscreenChange);
89
+
document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
90
+
};
91
91
});
92
92
93
93
let lastHopProgress = 0; // Track progress to trigger frog hops at intervals
···
123
123
else videoEl.pause();
124
124
}
125
125
126
+
function getFullscreenElement(): Element | null {
127
+
return document.fullscreenElement
128
+
|| (document as any).webkitFullscreenElement
129
+
|| null;
130
+
}
131
+
126
132
function toggleFullscreen() {
127
-
const wrapper = videoEl?.closest(".player-wrapper");
133
+
const wrapper = videoEl?.closest(".player-wrapper") as any;
128
134
if (!wrapper) return;
129
-
if (!document.fullscreenElement) {
130
-
wrapper.requestFullscreen?.().catch(() => {});
135
+
if (!getFullscreenElement()) {
136
+
if (wrapper.requestFullscreen) {
137
+
wrapper.requestFullscreen().catch(() => {});
138
+
} else if (wrapper.webkitRequestFullscreen) {
139
+
wrapper.webkitRequestFullscreen();
140
+
}
131
141
} else {
132
-
document.exitFullscreen?.().catch(() => {});
142
+
if (document.exitFullscreen) {
143
+
document.exitFullscreen().catch(() => {});
144
+
} else if ((document as any).webkitExitFullscreen) {
145
+
(document as any).webkitExitFullscreen();
146
+
}
133
147
}
134
148
}
135
149
136
150
function onFullscreenChange() {
137
-
isFullscreen = !!document.fullscreenElement;
151
+
isFullscreen = !!getFullscreenElement();
138
152
}
139
153
140
154
/** Calculate seek position from a mouse or touch event on the scrub bar */