/**
 * Get current screen orientation, most-reliable API first.
 * screen.orientation ?? matchMedia ?? (screen.height >= screen.width)
 * @returns {'portrait' | 'landscape'}
 */
function getOrientation() {
  const isPortrait =
    window.screen.orientation?.type?.startsWith("portrait") ??
    window.matchMedia?.("(orientation: portrait)")?.matches ??
    window.screen.height >= window.screen.width;

  return isPortrait ? "portrait" : "landscape";
}

/**
 * Subscribe to orientation changes.
 * Returns a cleanup function.
 * @param {(orientation: 'portrait' | 'landscape') => void} callback
 * @returns {() => void}
 */
function onOrientationChange(callback) {
  const handler = () => callback(getOrientation());

  const [target, event] = window.screen.orientation
    ? [window.screen.orientation, "change"]
    : window.matchMedia
      ? [window.matchMedia("(orientation: portrait)"), "change"]
      : [window, "resize"];

  target.addEventListener(event, handler);
  return () => target.removeEventListener(event, handler);
}

// straightforward get function.
getOrientation(); // "portrait" | "landscape"

// subscribe and remove handler when done.
const stopOrientationChange = onOrientationChange((orientation) => {
  console.log(`now ${orientation}`);
});

stopOrientationChange();