import Plyr from "../../../vendor/plyr/plyr.min.mjs";

const VIDEO_SELECTOR = "video[data-case-video-player]";

export function initCaseVideoPlayers() {
  const videos = Array.from(document.querySelectorAll(VIDEO_SELECTOR));
  if (!videos.length) return;

  videos.forEach((video) => {
    if (video.dataset.plyrReady === "1") return;

    video.removeAttribute("controls");

    const player = new Plyr(video, {
      controls: ["play-large", "play", "progress", "current-time", "duration", "fullscreen"],
      settings: [],
      disableContextMenu: true,
      keyboard: { focused: true, global: false },
      tooltips: { controls: true, seek: true },
      fullscreen: { enabled: true, iosNative: false, fallback: true },
    });

    const root = player.elements?.container;
    if (root) {
      root.classList.add("case-plyr");
      player.on("enterfullscreen", () => root.classList.add("case-plyr--fullscreen"));
      player.on("exitfullscreen", () => root.classList.remove("case-plyr--fullscreen"));
    }

    video.dataset.plyrReady = "1";
  });
}