Fullscreen

declare const player: HTMLElement;
 
async function toggle(el: HTMLElement) {
  if (document.fullscreenElement) {
    await document.exitFullscreen();
  } else {
    await el.requestFullscreen({ navigationUI: "hide" });
  }
}

/* the element while it is fullscreen */
.player:fullscreen {
  width: 100vw;
  height: 100dvh;
  background: black;
}
 
/* everything behind it (black by default) */
.player::backdrop {
  background: rgb(0 0 0 / 0.9);
}
 
/* style the page around it; :modal matches it too */
:root:has(:fullscreen) .site-header {
  display: none;
}

type WebkitVideo = HTMLVideoElement & {
  webkitEnterFullscreen?: () => void;
};
 
function videoFullscreen(video: WebkitVideo) {
  if (video.requestFullscreen) {
    return video.requestFullscreen();
  }
  video.webkitEnterFullscreen?.(); // iPhone
}

export const fullscreenSupported = () =>
  document.fullscreenEnabled === true;
 
export const isFullscreen = (el?: Element) =>
  el
    ? document.fullscreenElement === el
    : document.fullscreenElement !== null;
 
export async function toggleFullscreen(el: HTMLElement) {
  if (!fullscreenSupported()) return false;
  if (isFullscreen(el)) await document.exitFullscreen();
  else await el.requestFullscreen({ navigationUI: "hide" });
  return true;
}
 
export function onFullscreenChange(cb: () => void) {
  document.addEventListener("fullscreenchange", cb);
  return () =>
    document.removeEventListener("fullscreenchange", cb);
}

import { useCallback, useSyncExternalStore } from "react";
import type { RefObject } from "react";
import {
  isFullscreen,
  onFullscreenChange,
  toggleFullscreen,
} from "./fullscreen.ts";
 
export function useFullscreen(
  ref: RefObject<HTMLElement | null>,
) {
  const active = useSyncExternalStore(
    onFullscreenChange,
    () => (ref.current ? isFullscreen(ref.current) : false),
    () => false, // server render
  );
  const toggle = useCallback(async () => {
    if (ref.current) await toggleFullscreen(ref.current);
  }, [ref]);
  return { active, toggle };
}

type Video = HTMLVideoElement & {
  webkitEnterFullscreen?: () => void;
};
// lock() is missing from TypeScript 5.x lib.dom
type Lockable = ScreenOrientation & {
  lock?(type: "landscape" | "portrait"): Promise<void>;
};
 
export async function playFullscreen(video: Video) {
  if (typeof video.requestFullscreen !== "function") {
    video.webkitEnterFullscreen?.(); // iPhone
    return video.play();
  }
  await video.requestFullscreen({ navigationUI: "hide" });
  const orientation = screen.orientation as Lockable;
  await orientation.lock?.("landscape").catch(() => {
    // desktop or Safari: no lock, that's fine
  });
  await video.play();
}
// on exit, call screen.orientation.unlock()

export function keepAwake() {
  let sentinel: WakeLockSentinel | null = null;
  let wanted = true;
  const acquire = async () => {
    if (!wanted || document.hidden) return;
    try {
      sentinel = await navigator.wakeLock.request("screen");
    } catch {
      // NotAllowedError: battery saver, policy
    }
  };
  const onVisible = () => void acquire();
  document.addEventListener("visibilitychange", onVisible);
  void acquire();
  return async () => {
    wanted = false;
    document.removeEventListener(
      "visibilitychange",
      onVisible,
    );
    await sentinel?.release();
  };
}