Use prefixed versions of other fullscreen APIs too

This commit is contained in:
David Baker 2023-01-03 18:33:11 +00:00
parent 05be247946
commit d2175b40a4
2 changed files with 15 additions and 2 deletions

View File

@ -17,6 +17,12 @@ limitations under the License.
import "matrix-js-sdk/src/@types/global";
declare global {
interface Document {
// Safari only supports this prefixed, so tell the type system about it
webkitExitFullscreen: () => void;
webkitFullscreenElement: HTMLElement | null;
}
interface Window {
// TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
OLM_OPTIONS: Record<string, string>;

View File

@ -54,16 +54,23 @@ export function useFullscreen(ref: React.RefObject<HTMLElement>): {
);
const onFullscreenChanged = useCallback(() => {
if (!document.fullscreenElement) {
if (!document.fullscreenElement && !document.webkitFullscreenElement) {
setFullscreenParticipant(null);
}
}, [setFullscreenParticipant]);
useEventTarget(ref.current, "fullscreenchange", onFullscreenChanged);
useEventTarget(ref.current, "webkitfullscreenchange", onFullscreenChanged);
useEffect(() => {
if (disposed) {
document.exitFullscreen();
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else {
logger.error("No available fullscreen API!");
}
setFullscreenParticipant(null);
}
}, [disposed]);