fix editor picks carousels

This commit is contained in:
Pas 2025-04-08 23:46:00 -06:00
parent a718b8048f
commit 6d2d7a2eed
3 changed files with 12 additions and 4 deletions

View file

@ -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(() => {

View file

@ -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;

View file

@ -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",