Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-21 07:22:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor scroll carousel in Discover.tsx

Browse source
This commit is contained in:
kirbo 2024-06-03 23:36:47 -07:00 committed by Weblate
parent 5f4fd0600c
commit b2e5af356e
1 changed files with 10 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/pages/Discover.tsx
View file

@ -226,7 +226,6 @@ export function Discover() {
genres.forEach((genre) => fetchMoviesForGenre(genre.id)); genres.forEach((genre) => fetchMoviesForGenre(genre.id));
}, [genres]); }, [genres]);
// Update the scrollCarousel function to use the new ref map
function scrollCarousel(categorySlug: string, direction: string) { function scrollCarousel(categorySlug: string, direction: string) {
const carousel = carouselRefs.current[categorySlug]; const carousel = carouselRefs.current[categorySlug];
if (carousel) { if (carousel) {
@ -237,22 +236,7 @@ export function Discover() {
const scrollAmount = movieWidth * visibleMovies * 0.69; // Silly number :3 const scrollAmount = movieWidth * visibleMovies * 0.69; // Silly number :3
if (direction === "left") { if (direction === "left") {
if (carousel.scrollLeft <= 5) { carousel.scrollBy({ left: -scrollAmount, behavior: "smooth" });
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
} else { } else {
carousel.scrollBy({ left: scrollAmount, behavior: "smooth" }); carousel.scrollBy({ left: scrollAmount, behavior: "smooth" });
} }
@ -284,42 +268,22 @@ export function Discover() {
} }
}, [movieWidth]); }, [movieWidth]);
let isScrolling = false;
function handleWheel(e: React.WheelEvent, categorySlug: string) { function handleWheel(e: React.WheelEvent, categorySlug: string) {
if (isScrolling) {
return;
}
isScrolling = true;
const carousel = carouselRefs.current[categorySlug]; const carousel = carouselRefs.current[categorySlug];
if (carousel && !e.deltaX) { if (carousel) {
const movieElements = carousel.getElementsByTagName("a"); const movieElements = carousel.getElementsByTagName("a");
if (movieElements.length > 0) { 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) { if (e.deltaY < 5) {
carousel.scrollBy({ left: -scrollAmount, behavior: "smooth" }); scrollCarousel(categorySlug, "left");
} else { } 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); const [isHovered, setIsHovered] = useState(false);
useEffect(() => {
if (!isHovered) {
document.body.style.overflow = "auto";
}
}, [isHovered]);
const handleMouseEnter = () => { const handleMouseEnter = () => {
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
setIsHovered(true); setIsHovered(true);
@ -329,6 +293,12 @@ export function Discover() {
setIsHovered(false); setIsHovered(false);
}; };
useEffect(() => {
if (!isHovered) {
document.body.style.overflow = "auto";
}
}, [isHovered]);
function renderMovies(medias: Media[], category: string, isTVShow = false) { function renderMovies(medias: Media[], category: string, isTVShow = false) {
const categorySlug = `${category.toLowerCase().replace(/ /g, "-")}${Math.random()}`; // Convert the category to a slug const categorySlug = `${category.toLowerCase().replace(/ /g, "-")}${Math.random()}`; // Convert the category to a slug
const displayCategory = const displayCategory =