From 6d2d7a2eed9e444039bede9d571ea739fbac1319 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Tue, 8 Apr 2025 23:46:00 -0600
Subject: [PATCH] fix editor picks carousels

---
 src/pages/discover/components/LazyMediaCarousel.tsx |  2 +-
 src/pages/discover/components/MediaCarousel.tsx     |  2 +-
 src/pages/discover/discoverContent.tsx              | 12 ++++++++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/pages/discover/components/LazyMediaCarousel.tsx b/src/pages/discover/components/LazyMediaCarousel.tsx
index 023eaf28..300a56e3 100644
--- a/src/pages/discover/components/LazyMediaCarousel.tsx
+++ b/src/pages/discover/components/LazyMediaCarousel.tsx
@@ -52,7 +52,7 @@ export function LazyMediaCarousel({
   }, [media, preloadedMedia]);
 
   const categoryName = title || category?.name || genre?.name || "";
-  const categorySlug = categoryName.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+  const categorySlug = `${categoryName.toLowerCase().replace(/[^a-z0-9]+/g, "-")}-${mediaType}`;
 
   // Test intersection observer
   // useEffect(() => {
diff --git a/src/pages/discover/components/MediaCarousel.tsx b/src/pages/discover/components/MediaCarousel.tsx
index c0515702..649f6a52 100644
--- a/src/pages/discover/components/MediaCarousel.tsx
+++ b/src/pages/discover/components/MediaCarousel.tsx
@@ -34,7 +34,7 @@ export function MediaCarousel({
   carouselRefs,
 }: MediaCarouselProps) {
   const { t } = useTranslation();
-  const categorySlug = category.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+  const categorySlug = `${category.toLowerCase().replace(/[^a-z0-9]+/g, "-")}-${isTVShow ? "tv" : "movie"}`;
   const browser = !!window.chrome;
   let isScrolling = false;
 
diff --git a/src/pages/discover/discoverContent.tsx b/src/pages/discover/discoverContent.tsx
index 42007391..72a09422 100644
--- a/src/pages/discover/discoverContent.tsx
+++ b/src/pages/discover/discoverContent.tsx
@@ -290,9 +290,17 @@ export function DiscoverContent() {
   };
 
   const handleCategoryClick = (id: string, name: string) => {
-    const categorySlug = name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
-    const element = document.getElementById(`carousel-${categorySlug}`);
+    // Try both movie and tv versions of the category slug
+    const categorySlugBase = name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+    const movieElement = document.getElementById(
+      `carousel-${categorySlugBase}-movie`,
+    );
+    const tvElement = document.getElementById(
+      `carousel-${categorySlugBase}-tv`,
+    );
 
+    // Scroll to the first element that exists
+    const element = movieElement || tvElement;
     if (element) {
       element.scrollIntoView({
         behavior: "smooth",