TVGuide/app/public/assets/js/modules/modal.js

export function initProgrammeModal() {
  const modal = document.getElementById("programmeModal");

  if (!modal) {
    return;
  }

  const title = document.getElementById("modalTitle");
  const subtitle = document.getElementById("modalSubtitle");
  const description = document.getElementById("modalDescription");
  const category = document.getElementById("modalCategory");
  const time = document.getElementById("modalTime");
  const meta = document.getElementById("modalMeta");
  const logo = document.getElementById("modalLogo");
  const channel = document.getElementById("modalChannel");
  const watchlistButton =
    document.getElementById("modalWatchlistButton");

  let currentProgramme = null;

  const updateWatchlistButton = () => {
    if (!watchlistButton || !currentProgramme) {
      return;
    }

    const saved =
      window.TVGuideWatchlist?.isSaved(currentProgramme) ||
      false;

    watchlistButton.classList.toggle("is-saved", saved);

    watchlistButton.textContent = saved
      ? "★ Aus Merkliste entfernen"
      : "☆ Zur Merkliste hinzufügen";

    watchlistButton.setAttribute(
      "aria-pressed",
      saved ? "true" : "false"
    );
  };

  const openProgramme = (programme) => {
    if (!programme) {
      return;
    }

    currentProgramme =
      window.TVGuideWatchlist?.normalize(programme) ||
      programme;

    const metadata = currentProgramme.metadata || {};

    title.textContent =
      currentProgramme.title || "";

    subtitle.textContent =
      metadata.episode_title ||
      currentProgramme.subtitle ||
      "";

    subtitle.hidden = !subtitle.textContent;

    description.textContent =
      currentProgramme.description ||
      "Keine Beschreibung vorhanden.";

    category.textContent =
      currentProgramme.category || "";

    category.hidden = !category.textContent;

    const channelName =
      currentProgramme.channel ||
      currentProgramme.channel_name ||
      "";

    const channelNumber =
      currentProgramme.channel_number;

    channel.textContent =
      channelNumber && channelNumber !== 999999
        ? `Kanal ${channelNumber} · ${channelName}`
        : channelName;

    logo.src =
      `/assets/logos/${encodeURIComponent(
        currentProgramme.channel_id || ""
      )}.svg`;

    logo.onerror = () => {
      logo.onerror = null;
      logo.src = "/assets/logos/default.svg";
    };

    const metaItems = [];

    if (metadata.season && metadata.episode) {
      let text =
        `Staffel ${metadata.season} · Episode ${metadata.episode}`;

      if (metadata.episode_total) {
        text += `/${metadata.episode_total}`;
      }

      metaItems.push(text);
    }

    if (metadata.country) {
      metaItems.push(metadata.country);
    } else if (currentProgramme.country) {
      metaItems.push(currentProgramme.country);
    }

    if (metadata.year) {
      metaItems.push(metadata.year);
    } else if (currentProgramme.year) {
      metaItems.push(currentProgramme.year);
    }

    if (metadata.age_rating) {
      metaItems.push(`FSK ${metadata.age_rating}`);
    } else if (currentProgramme.rating) {
      metaItems.push(`FSK ${currentProgramme.rating}`);
    }

    if (
      Array.isArray(metadata.genres) &&
      metadata.genres.length
    ) {
      metaItems.push(metadata.genres.join(", "));
    }

    meta.textContent = metaItems.join(" • ");
    meta.hidden = metaItems.length === 0;

    const start =
      currentProgramme.start_time ||
      currentProgramme.start ||
      "";

    const stop =
      currentProgramme.stop_time ||
      currentProgramme.stop ||
      "";

    time.textContent =
      start && stop
        ? `${start} – ${stop}`
        : "";

    updateWatchlistButton();

    modal.hidden = false;
    document.body.classList.add("modal-open");
  };

  const openProgrammeElement = (programmeElement) => {
    const id = programmeElement.dataset.programmeId;
    const programme =
      window.TVGUIDE_PROGRAMMES?.[id];

    openProgramme(programme);
  };

  const closeModal = () => {
    modal.hidden = true;
    meta.textContent = "";
    currentProgramme = null;

    document.body.classList.remove("modal-open");
  };

  watchlistButton?.addEventListener("click", () => {
    if (
      !currentProgramme ||
      !window.TVGuideWatchlist
    ) {
      return;
    }

    window.TVGuideWatchlist.toggle(
      currentProgramme
    );

    updateWatchlistButton();
  });

  document.addEventListener(
    "tvguide:watchlist-changed",
    updateWatchlistButton
  );

  window.TVGuideProgrammeModal = {
    open: openProgramme,
    close: closeModal
  };

  document.addEventListener("click", (event) => {
    const programme = event.target.closest(
      ".timeline-programme, .dashboard-programme"
    );

    if (!programme) {
      return;
    }

    openProgrammeElement(programme);
  });

  modal
    .querySelectorAll("[data-modal-close]")
    .forEach((element) => {
      element.addEventListener(
        "click",
        closeModal
      );
    });

  document.addEventListener(
    "keydown",
    (event) => {
      if (
        event.key === "Escape" &&
        !modal.hidden
      ) {
        closeModal();
      }
    }
  );
}