From db6fc4355dca92ca933014e84f3533ebbeef00f8 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Mon, 2 Jun 2025 11:36:29 -0600
Subject: [PATCH] fix more details modal stuff

---
 .../overlays/details/DetailsContent.tsx       |  22 ++-
 .../overlays/details/DetailsHeader.tsx        |  17 +-
 .../overlays/details/DetailsModal.tsx         |   2 +-
 .../overlays/details/DetailsSkeleton.tsx      | 151 ++++++++++++++----
 src/components/overlays/details/types.ts      |   4 +
 5 files changed, 158 insertions(+), 38 deletions(-)

diff --git a/src/components/overlays/details/DetailsContent.tsx b/src/components/overlays/details/DetailsContent.tsx
index 1fe1d48d..0d810b61 100644
--- a/src/components/overlays/details/DetailsContent.tsx
+++ b/src/components/overlays/details/DetailsContent.tsx
@@ -79,7 +79,19 @@ export function DetailsContent({ data, minimal = false }: DetailsContentProps) {
           undefined,
           formattedLanguage,
         );
-        setImdbData(imdbMetadata);
+        // Transform the data to match the expected format
+        if (
+          typeof imdbMetadata.imdb_rating === "number" &&
+          typeof imdbMetadata.votes === "number"
+        ) {
+          setImdbData({
+            rating: imdbMetadata.imdb_rating,
+            votes: imdbMetadata.votes,
+            trailer_url: imdbMetadata.trailer_url || null,
+          });
+        } else {
+          setImdbData(null);
+        }
 
         // Fetch Rotten Tomatoes data
         if (data.type === "movie") {
@@ -176,15 +188,16 @@ export function DetailsContent({ data, minimal = false }: DetailsContentProps) {
           )}
         </div>
         <div
-          className="absolute inset-0 bg-cover bg-center opacity-60 before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_center,_transparent_0%,_rgba(0,0,0,0.5)_80%)]"
+          className="absolute inset-0 bg-cover bg-top opacity-60 before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_center,_transparent_0%,_rgba(0,0,0,0.5)_80%)]"
           style={{
             backgroundImage: data.backdrop
               ? `url(${data.backdrop})`
               : undefined,
+            backgroundPosition: "center top",
             maskImage:
-              "linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 120px)",
+              "linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 150px)",
             WebkitMaskImage:
-              "linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 120px)",
+              "linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 150px)",
             zIndex: -1,
           }}
         />
@@ -204,6 +217,7 @@ export function DetailsContent({ data, minimal = false }: DetailsContentProps) {
           seasons={
             data.type === "show" ? data.seasonData?.seasons.length : undefined
           }
+          imdbData={imdbData}
         />
 
         {/* Two Column Layout - Stacked on Mobile */}
diff --git a/src/components/overlays/details/DetailsHeader.tsx b/src/components/overlays/details/DetailsHeader.tsx
index 222b91e2..0ff70938 100644
--- a/src/components/overlays/details/DetailsHeader.tsx
+++ b/src/components/overlays/details/DetailsHeader.tsx
@@ -18,6 +18,7 @@ export function DetailsHeader({
   voteCount,
   releaseDate,
   seasons,
+  imdbData,
 }: DetailsHeaderProps) {
   const formatDate = (dateString?: string) => {
     if (!dateString) return null;
@@ -30,7 +31,7 @@ export function DetailsHeader({
       <div className="flex items-center gap-2 text-sm text-white/80">
         {voteAverage && (
           <div className="flex items-center gap-1">
-            <Icon icon={Icons.RISING_STAR} className="text-yellow-400" />
+            <Icon icon={Icons.TMDB} />
             <span>{voteAverage.toFixed(1)}</span>
             {voteCount && (
               <span className="text-white/60">
@@ -39,6 +40,20 @@ export function DetailsHeader({
             )}
           </div>
         )}
+        {imdbData?.rating && (
+          <>
+            <span className="text-white/60">•</span>
+            <div className="flex items-center gap-1">
+              <Icon icon={Icons.IMDB} className="text-yellow-400" />
+              <span>{imdbData.rating.toFixed(1)}</span>
+              {imdbData.votes && (
+                <span className="text-white/60">
+                  ({imdbData.votes.toLocaleString()})
+                </span>
+              )}
+            </div>
+          </>
+        )}
         {releaseDate && (
           <>
             <span className="text-white/60">•</span>
diff --git a/src/components/overlays/details/DetailsModal.tsx b/src/components/overlays/details/DetailsModal.tsx
index 53edde6b..4e6b637b 100644
--- a/src/components/overlays/details/DetailsModal.tsx
+++ b/src/components/overlays/details/DetailsModal.tsx
@@ -117,7 +117,7 @@ export function DetailsModal({ id, data, minimal }: DetailsModalProps) {
       darken
       close={modal.hide}
       show={modal.isShown}
-      durationClass="duration-400"
+      durationClass="duration-500"
     >
       <Helmet>
         <html data-no-scroll />
diff --git a/src/components/overlays/details/DetailsSkeleton.tsx b/src/components/overlays/details/DetailsSkeleton.tsx
index 99645296..23d07b26 100644
--- a/src/components/overlays/details/DetailsSkeleton.tsx
+++ b/src/components/overlays/details/DetailsSkeleton.tsx
@@ -1,41 +1,128 @@
 export function DetailsSkeleton() {
+  // Static arrays of unique identifiers for skeleton elements
+  const episodeSkeletons = [
+    "episode-skeleton-1",
+    "episode-skeleton-2",
+    "episode-skeleton-3",
+    "episode-skeleton-4",
+  ];
+  const castSkeletons = [
+    "cast-skeleton-1",
+    "cast-skeleton-2",
+    "cast-skeleton-3",
+    "cast-skeleton-4",
+    "cast-skeleton-5",
+    "cast-skeleton-6",
+  ];
+
   return (
-    <div className="animate-pulse">
-      <div className="relative">
-        {/* Backdrop */}
-        <div className="h-64 relative -mt-12">
-          <div
-            className="absolute inset-0 bg-mediaCard-hoverBackground"
-            style={{
-              maskImage:
-                "linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 60px)",
-              WebkitMaskImage:
-                "linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 60px)",
-            }}
-          />
+    <div className="relative h-full flex flex-col animate-pulse">
+      {/* Backdrop */}
+      <div
+        className="relative -mt-12 z-20"
+        style={{
+          height: "500px",
+        }}
+      >
+        {/* Title/Logo positioned on backdrop */}
+        <div className="absolute inset-x-0 bottom-20 z-30 px-6">
+          <div className="h-12 w-64 bg-white/10 rounded-lg" />{" "}
+          {/* Logo/Title placeholder */}
         </div>
-        {/* Content */}
-        <div className="px-6 pb-6 mt-[-30px]">
-          <div className="h-8 w-3/4 bg-white/10 rounded mb-3" /> {/* Title */}
-          <div className="space-y-2 mb-6">
+        <div
+          className="absolute inset-0 bg-white/10"
+          style={{
+            maskImage:
+              "linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 120px)",
+            WebkitMaskImage:
+              "linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 120px)",
+            zIndex: -1,
+          }}
+        />
+      </div>
+
+      {/* Content */}
+      <div className="px-6 pb-6 mt-[-70px] flex-grow relative z-30">
+        {/* Header */}
+        <div className="flex flex-wrap items-center gap-4 mb-6">
+          <div className="h-10 w-32 bg-white/10 rounded-lg" />{" "}
+          {/* Play button */}
+          <div className="h-10 w-32 bg-white/10 rounded-lg" />{" "}
+          {/* Trailer button */}
+          <div className="h-10 w-32 bg-white/10 rounded-lg" />{" "}
+          {/* Share button */}
+          <div className="flex-1" />
+          <div className="h-6 w-24 bg-white/10 rounded-lg" /> {/* Rating */}
+          <div className="h-6 w-24 bg-white/10 rounded-lg" />{" "}
+          {/* Release date */}
+        </div>
+
+        {/* Two Column Layout */}
+        <div className="grid grid-cols-1 md:grid-cols-3 md:gap-6 pt-4">
+          {/* Left Column - Main Content (2/3) */}
+          <div className="md:col-span-2">
             {/* Description */}
-            <div className="h-4 bg-white/10 rounded w-full" />
-            <div className="h-4 bg-white/10 rounded w-full" />
-            <div className="h-4 bg-white/10 rounded w-full" />
-            <div className="h-4 bg-white/10 rounded w-3/4" />
+            <div className="space-y-2 mb-6">
+              <div className="h-4 bg-white/10 rounded w-full" />
+              <div className="h-4 bg-white/10 rounded w-full" />
+              <div className="h-4 bg-white/10 rounded w-3/4" />
+            </div>
+
+            {/* Genres */}
+            <div className="flex flex-wrap gap-2 mb-6">
+              <div className="h-6 w-20 bg-white/10 rounded-full" />
+              <div className="h-6 w-24 bg-white/10 rounded-full" />
+              <div className="h-6 w-16 bg-white/10 rounded-full" />
+            </div>
+
+            {/* Director and Cast */}
+            <div className="space-y-4 mb-6">
+              <div className="h-4 w-48 bg-white/10 rounded" /> {/* Director */}
+              <div className="h-4 w-64 bg-white/10 rounded" /> {/* Cast */}
+            </div>
           </div>
-          {/* Additional details */}
-          <div className="grid grid-cols-2 gap-3 mb-6">
-            <div className="h-4 bg-white/10 rounded w-3/4" />
-            <div className="h-4 bg-white/10 rounded w-3/4" />
-            <div className="h-4 bg-white/10 rounded w-3/4" />
-            <div className="h-4 bg-white/10 rounded w-3/4" />
+
+          {/* Right Column - Details Info (1/3) */}
+          <div className="md:col-span-1">
+            <div className="bg-video-context-border p-4 rounded-lg border-buttons-primary bg-opacity-80">
+              <div className="space-y-3">
+                <div className="h-4 w-32 bg-white/10 rounded" /> {/* Runtime */}
+                <div className="h-4 w-24 bg-white/10 rounded" />{" "}
+                {/* Language */}
+                <div className="h-4 w-36 bg-white/10 rounded" />{" "}
+                {/* Release date */}
+                <div className="h-4 w-20 bg-white/10 rounded" /> {/* Rating */}
+                <div className="h-4 w-40 bg-white/10 rounded" />{" "}
+                {/* External ratings */}
+              </div>
+            </div>
           </div>
-          {/* Genres */}
-          <div className="flex flex-wrap gap-2">
-            <div className="h-6 w-20 bg-white/10 rounded-full" />
-            <div className="h-6 w-24 bg-white/10 rounded-full" />
-            <div className="h-6 w-16 bg-white/10 rounded-full" />
+        </div>
+
+        {/* Episodes Carousel Skeleton */}
+        <div className="mt-8">
+          <div className="h-6 w-48 bg-white/10 rounded mb-4" />{" "}
+          {/* Season selector */}
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {episodeSkeletons.map((key) => (
+              <div key={key} className="aspect-video bg-white/10 rounded-lg" />
+            ))}
+          </div>
+        </div>
+
+        {/* Cast Carousel Skeleton */}
+        <div className="mt-8">
+          <div className="h-6 w-32 bg-white/10 rounded mb-4" />{" "}
+          {/* Cast title */}
+          <div className="flex gap-4 overflow-x-auto pb-4">
+            {castSkeletons.map((key) => (
+              <div key={key} className="flex-shrink-0 w-32">
+                <div className="aspect-[2/3] bg-white/10 rounded-lg mb-2" />{" "}
+                {/* Profile image */}
+                <div className="h-4 w-24 bg-white/10 rounded mx-auto" />{" "}
+                {/* Name */}
+              </div>
+            ))}
           </div>
         </div>
       </div>
diff --git a/src/components/overlays/details/types.ts b/src/components/overlays/details/types.ts
index 07765486..ae474d17 100644
--- a/src/components/overlays/details/types.ts
+++ b/src/components/overlays/details/types.ts
@@ -109,6 +109,10 @@ export interface DetailsHeaderProps {
   voteCount?: number;
   releaseDate?: string;
   seasons?: number;
+  imdbData?: {
+    rating: number;
+    votes: number;
+  };
 }
 
 export interface DetailsInfoProps {