Merge pull request #61 from AbdullahDaGoat/modal

Fixed dtuff
2024-12-20 14:37:43 +01:00 · 2024-06-21 09:39:52 -04:00 · 2024-06-21 09:39:52 -04:00 · f10594e013
commit f10594e013
parent 20a9337dc3 7b4f5e2fe7
6 changed files with 83 additions and 49 deletions
--- a/src/backend/metadata/tmdb.ts
+++ b/src/backend/metadata/tmdb.ts
@ -91,14 +91,28 @@ export function formatTMDBMeta(
 export function formatTMDBMetaToMediaItem(media: TMDBMediaResult): MediaItem {
  const type = TMDBMediaToMediaItemType(media.object_type);

-  return {
+  // Define the basic structure of MediaItem
+  const mediaItem: MediaItem = {
    title: media.title,
    id: media.id.toString(),
    year: media.original_release_date?.getFullYear() ?? 0,
    release_date: media.original_release_date,
    poster: media.poster,
    type,
+    seasons: undefined,
  };
+
+  // If it's a TV show, include the seasons information
+  if (type === "show") {
+    const seasons = media.seasons?.map((season) => ({
+      title: season.title,
+      id: season.id.toString(),
+      number: season.season_number,
+    }));
+    mediaItem.seasons = seasons as MWSeasonMeta[];
+  }
+
+  return mediaItem;
 }

 export function TMDBIdToUrlId(
--- a/src/components/media/ModalEpisodeSelector.tsx
+++ b/src/components/media/ModalEpisodeSelector.tsx
@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";

 import { get } from "@/backend/metadata/tmdb";
+import { Flare } from "@/components/utils/Flare";
 import { conf } from "@/setup/config";

 interface ModalEpisodeSelectorProps {
@ -57,8 +58,8 @@ export function EpisodeSelector({
  }, [handleSeasonSelect, tmdbId]);

  return (
-    <div className="flex flex-row">
-      <div className="sm:w-96 w-96 sm:block cursor-pointer overflow-y-scroll overflow-x-hidden max-h-60 max-w-24">
+    <div className="flex flex-row relative">
+      <div className="w-24 sm:w-96 cursor-pointer overflow-y-auto overflow-x-hidden max-h-60 z-10">
        {seasonsData.map((season) => (
          <div
            key={season.season_number}
@ -76,8 +77,8 @@ export function EpisodeSelector({
          </div>
        ))}
      </div>
-      <div className="flex-auto mt-4 cursor-pointer sm:mt-0 sm:ml-4 overflow-y-auto overflow-x-hidden max-h-60 order-1 sm:order-2">
-        <div className="grid grid-cols-3 gap-2">
+      <div className="flex-auto mt-4 sm:mt-0 sm:ml-4 cursor-pointer overflow-x-auto overflow-y-hidden sm:overflow-y-auto sm:overflow-x-hidden max-h-60 max-w-[70vw] z-0">
+        <div className="flex sm:grid sm:grid-cols-3 sm:gap-2">
          {selectedSeason ? (
            selectedSeason.episodes.map(
              (episode: {
@ -87,23 +88,31 @@ export function EpisodeSelector({
                show_id: number;
                id: number;
              }) => (
-                <div
+                <Flare.Base
                  key={episode.episode_number}
                  onClick={() =>
                    navigate(
                      `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${episode.show_id}/${episode.id}`,
                    )
                  }
-                  className="bg-mediaCard-hoverBackground rounded p-2 hover:scale-95 transition-transform transition-border-color duration-[0.28s] ease-in-out transform-origin-center"
+                  className="group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-[0.28s] flex-shrink-0 w-48 sm:w-auto mr-2 sm:mr-0"
                >
-                  <img
-                    src={`https://image.tmdb.org/t/p/w500/${episode.still_path}`}
-                    className="w-full h-auto rounded"
+                  <Flare.Light
+                    flareSize={300}
+                    cssColorVar="--colors-mediaCard-hoverAccent"
+                    backgroundClass="bg-mediaCard-hoverBackground duration-200"
+                    className="rounded-xl bg-background-main group-hover:opacity-100"
                  />
-                  <p className="text-center text-[0.95em] mt-2">
-                    {episode.name}
-                  </p>
-                </div>
+                  <div className="relative z-10">
+                    <img
+                      src={`https://image.tmdb.org/t/p/w500/${episode.still_path}`}
+                      className="w-full h-auto rounded"
+                    />
+                    <p className="text-center text-[0.95em] mt-2">
+                      {episode.name}
+                    </p>
+                  </div>
+                </Flare.Base>
              ),
            )
          ) : (
--- a/src/components/media/PopupModal.tsx
+++ b/src/components/media/PopupModal.tsx
@ -20,6 +20,29 @@ interface PopupModalProps {
  media: MediaItem;
 }

+interface MediaData {
+  backdrop_path?: string;
+  title?: string;
+  name?: string;
+  runtime?: number;
+  release_date?: string;
+  first_air_date?: string;
+  vote_average?: number;
+  genres?: Array<{ name: string }>;
+  overview?: string;
+}
+
+interface MediaInfo {
+  results?: Array<{
+    iso_3166_1: string;
+    rating?: string;
+    release_dates?: Array<{
+      certification: string;
+      release_date: string;
+    }>;
+  }>;
+}
+
 type StyleState = {
  opacity: number;
  visibility: "visible" | "hidden" | undefined;
@ -46,11 +69,10 @@ export function PopupModal({
    opacity: 0,
    visibility: "hidden",
  });
-  const [data, setData] = useState<any>(null);
-  const [mediaInfo, setMediaInfo] = useState<any>(null);
+  const [data, setData] = useState<MediaData | null>(null);
+  const [mediaInfo, setMediaInfo] = useState<MediaInfo | null>(null);
  const [error, setError] = useState<string | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [menuOpen, setMenuOpen] = useState<boolean>(false); // Added definition for menuOpen
+  // const [menuOpen, setMenuOpen] = useState<boolean>(false);
  const navigate = useNavigate();

  useEffect(() => {
@ -62,7 +84,6 @@ export function PopupModal({
        onClose();
      }
    }
-
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
@ -83,7 +104,7 @@ export function PopupModal({

      try {
        const mediaTypePath = media.type === "show" ? "tv" : media.type;
-        const result = await get<any>(`/${mediaTypePath}/${media.id}`, {
+        const result = await get<MediaData>(`/${mediaTypePath}/${media.id}`, {
          api_key: conf().TMDB_READ_API_KEY,
          language: "en-US",
        });
@ -107,7 +128,7 @@ export function PopupModal({
        const mediaTypeForAPI = media.type === "show" ? "tv" : media.type;
        const endpointSuffix =
          media.type === "show" ? "content_ratings" : "release_dates";
-        const result = await get<any>(
+        const result = await get<MediaInfo>(
          `/${mediaTypeForAPI}/${media.id}/${endpointSuffix}`,
          {
            api_key: conf().TMDB_READ_API_KEY,
@ -126,10 +147,7 @@ export function PopupModal({
  }, [media.id, media.type, isVisible]);

  if (!isVisible && style.visibility === "hidden") return null;
-
-  if (error) {
-    return <div>Error: {error}</div>;
-  }
+  if (error) return <div>Error: {error}</div>;

  const isTVShow = media.type === "show";
  const usReleaseInfo = mediaInfo?.results?.find(
@ -158,11 +176,7 @@ export function PopupModal({
      <div
        ref={modalRef}
        className="rounded-xl bg-modal-background flex flex-col justify-center items-center transition-opacity duration-100 max-w-full sm:max-w-xl w-full sm:w-auto sm:h-auto overflow-y-auto p-4"
-        style={{
-          opacity: style.opacity,
-          maxHeight: "90vh",
-          height: "auto",
-        }}
+        style={{ opacity: style.opacity, maxHeight: "90vh", height: "auto" }}
      >
        <div className="aspect-w-16 aspect-h-9 w-full sm:w-auto">
          <div className="rounded-xl">
@ -172,9 +186,7 @@ export function PopupModal({
                alt={media.poster ? "" : "failed to fetch :("}
                className="rounded-xl object-cover w-full h-full"
                loading="lazy"
-                style={{
-                  maxHeight: "60vh",
-                }}
+                style={{ maxHeight: "60vh" }}
              />
            ) : (
              <Skeleton />
@ -239,19 +251,17 @@ export function PopupModal({
          </div>
          <div className="flex flex-row gap-3 pb-3 pt-2">
            <div className="flex items-center space-x-[2px] font-semibold">
-              {Array.from({ length: 5 }, (_, index) => {
-                return (
-                  <span key={index}>
-                    {index < Math.round(Number(data?.vote_average) / 2) ? (
-                      <Icon icon={Icons.STAR} />
-                    ) : (
-                      <Icon icon={Icons.STAR_BORDER} />
-                    )}
-                  </span>
-                );
-              })}
+              {Array.from({ length: 5 }, (_, index) => (
+                <span key={index}>
+                  {index < Math.round(Number(data?.vote_average) / 2) ? (
+                    <Icon icon={Icons.STAR} />
+                  ) : (
+                    <Icon icon={Icons.STAR_BORDER} />
+                  )}
+                </span>
+              ))}
            </div>
-            {data?.genres?.length > 0
+            {data?.genres && data.genres.length > 0
              ? data.genres.map((genre: { name: string }) => (
                  <div key={genre.name} className="inline-block">
                    <div className="px-2 py-1 bg-mediaCard-hoverBackground rounded hover:bg-search-background cursor-default duration-200 transition-colors transform hover:scale-110">
@ -259,8 +269,9 @@ export function PopupModal({
                    </div>
                  </div>
                ))
-              : Array.from({ length: 3 }).map((_) => (
-                  <div className="inline-block">
+              : Array.from({ length: 3 }).map((_, idx) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <div className="inline-block" key={idx}>
                    <Skeleton />
                  </div>
                ))}
--- a/src/components/player/atoms/Episodes.tsx
+++ b/src/components/player/atoms/Episodes.tsx
@ -118,8 +118,6 @@ function EpisodesView({
        const newData = setPlayerMeta(loadingState.value.fullData, episodeId);
        if (newData) onChange?.(newData);
      }
-      // prevent router clear here, otherwise its done double
-      // player already switches route after meta change
      router.close(true);
    },
    [setPlayerMeta, loadingState, router, onChange],
--- a/src/setup/App.tsx
+++ b/src/setup/App.tsx
@ -134,6 +134,7 @@ function App() {
              </LegacyUrlView>
            }
          />
+
          <Route path="/browse/:query?" element={<HomePage />} />
          <Route path="/" element={<HomePage />} />
          <Route path="/register" element={<RegisterPage />} />
--- a/src/utils/mediaTypes.ts
+++ b/src/utils/mediaTypes.ts
@ -1,4 +1,5 @@
 export interface MediaItem {
+  seasons: import("c:/Users/huzei/OneDrive/Desktop/Sudo-Flix/src/backend/metadata/types/mw").MWSeasonMeta[];
  id: string;
  title: string;
  year?: number;