mirror of https://github.com/sussy-code/smov.git
refactor scroll carousel in Discover.tsx
This commit is contained in:
parent
5f4fd0600c
commit
b2e5af356e
|
@ -226,7 +226,6 @@ export function Discover() {
|
|||
genres.forEach((genre) => fetchMoviesForGenre(genre.id));
|
||||
}, [genres]);
|
||||
|
||||
// Update the scrollCarousel function to use the new ref map
|
||||
function scrollCarousel(categorySlug: string, direction: string) {
|
||||
const carousel = carouselRefs.current[categorySlug];
|
||||
if (carousel) {
|
||||
|
@ -237,22 +236,7 @@ export function Discover() {
|
|||
const scrollAmount = movieWidth * visibleMovies * 0.69; // Silly number :3
|
||||
|
||||
if (direction === "left") {
|
||||
if (carousel.scrollLeft <= 5) {
|
||||
carousel.scrollBy({
|
||||
left: carousel.scrollWidth,
|
||||
behavior: "smooth",
|
||||
}); // Scroll to the end
|
||||
} else {
|
||||
carousel.scrollBy({ left: -scrollAmount, behavior: "smooth" });
|
||||
}
|
||||
} else if (
|
||||
carousel.scrollLeft + carousel.offsetWidth + 5 >=
|
||||
carousel.scrollWidth
|
||||
) {
|
||||
carousel.scrollBy({
|
||||
left: -carousel.scrollWidth,
|
||||
behavior: "smooth",
|
||||
}); // Scroll to the beginning
|
||||
carousel.scrollBy({ left: -scrollAmount, behavior: "smooth" });
|
||||
} else {
|
||||
carousel.scrollBy({ left: scrollAmount, behavior: "smooth" });
|
||||
}
|
||||
|
@ -284,42 +268,22 @@ export function Discover() {
|
|||
}
|
||||
}, [movieWidth]);
|
||||
|
||||
let isScrolling = false;
|
||||
function handleWheel(e: React.WheelEvent, categorySlug: string) {
|
||||
if (isScrolling) {
|
||||
return;
|
||||
}
|
||||
|
||||
isScrolling = true;
|
||||
|
||||
const carousel = carouselRefs.current[categorySlug];
|
||||
if (carousel && !e.deltaX) {
|
||||
if (carousel) {
|
||||
const movieElements = carousel.getElementsByTagName("a");
|
||||
if (movieElements.length > 0) {
|
||||
const posterWidth = movieElements[0].offsetWidth;
|
||||
const visibleMovies = Math.floor(carousel.offsetWidth / posterWidth);
|
||||
const scrollAmount = posterWidth * visibleMovies * 0.62;
|
||||
if (e.deltaY < 5) {
|
||||
carousel.scrollBy({ left: -scrollAmount, behavior: "smooth" });
|
||||
scrollCarousel(categorySlug, "left");
|
||||
} else {
|
||||
carousel.scrollBy({ left: scrollAmount, behavior: "smooth" });
|
||||
scrollCarousel(categorySlug, "right");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
isScrolling = false;
|
||||
}, 345); // Disable scrolling every 3 milliseconds after interaction (only for mouse wheel doe)
|
||||
}
|
||||
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isHovered) {
|
||||
document.body.style.overflow = "auto";
|
||||
}
|
||||
}, [isHovered]);
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
document.body.style.overflow = "hidden";
|
||||
setIsHovered(true);
|
||||
|
@ -329,6 +293,12 @@ export function Discover() {
|
|||
setIsHovered(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isHovered) {
|
||||
document.body.style.overflow = "auto";
|
||||
}
|
||||
}, [isHovered]);
|
||||
|
||||
function renderMovies(medias: Media[], category: string, isTVShow = false) {
|
||||
const categorySlug = `${category.toLowerCase().replace(/ /g, "-")}${Math.random()}`; // Convert the category to a slug
|
||||
const displayCategory =
|
||||
|
|
Loading…
Reference in New Issue