Creepso/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2026-03-11 17:55:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix nav buttons on safari

Browse source
This commit is contained in:
Pas 2025-03-06 11:20:11 -07:00
parent 26d942bd7c
commit 2e9e7abec0
2 changed files with 54 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
src/pages/discover/components/CarouselNavButtons.tsx
View file

@ -8,6 +8,37 @@ interface CarouselNavButtonsProps {
}>;
}
interface NavButtonProps {
direction: "left" | "right";
onClick: () => void;
}
function NavButton({ direction, onClick }: NavButtonProps) {
return (
<button
type="button"
className={`absolute ${direction === "left" ? "left-12" : "right-12"} top-1/2 transform -translate-y-3/4 z-10`}
onClick={onClick}
>
<Flare.Base className="group -m-[0.705em] rounded-full bg-search-hoverBackground transition-transform duration-300 focus:relative focus:z-10 hover:bg-mediaCard-hoverBackground tabbable hover:scale-110">
<Flare.Light
flareSize={90}
cssColorVar="--colors-mediaCard-hoverAccent"
backgroundClass="bg-mediaCard-hoverBackground duration-100"
className="rounded-full group-hover:opacity-100 z-20"
/>
<Flare.Child className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full active:scale-110 transition-[transform,background-color] duration-200 z-30">
<Icon
icon={
direction === "left" ? Icons.CHEVRON_LEFT : Icons.CHEVRON_RIGHT
}
/>
</Flare.Child>
</Flare.Base>
</button>
);
}
export function CarouselNavButtons({
categorySlug,
carouselRefs,
@ -19,52 +50,34 @@ export function CarouselNavButtons({
const movieElements = carousel.getElementsByTagName("a");
if (movieElements.length === 0) return;
const movieWidth = movieElements[0].offsetWidth;
const visibleMovies = Math.floor(carousel.offsetWidth / movieWidth);
const scrollAmount = movieWidth * (visibleMovies > 5 ? 4 : 2);
// Wait for next frame to ensure measurements are available
requestAnimationFrame(() => {
const movieWidth = movieElements[0].getBoundingClientRect().width;
carousel.scrollBy({
left: direction === "left" ? -scrollAmount : scrollAmount,
behavior: "smooth",
const carouselWidth = carousel.getBoundingClientRect().width;
if (movieWidth === 0 || carouselWidth === 0) {
return;
}
const visibleMovies = Math.floor(carouselWidth / movieWidth);
const scrollAmount = movieWidth * (visibleMovies > 5 ? 4 : 2);
const newScrollPosition =
carousel.scrollLeft +
(direction === "left" ? -scrollAmount : scrollAmount);
carousel.scrollTo({
left: newScrollPosition,
behavior: "smooth",
});
});
};
return (
<>
<button
type="button"
className="absolute left-12 top-1/2 transform -translate-y-3/4 z-10"
onClick={() => handleScroll("left")}
>
<Flare.Base className="group -m-[0.705em] rounded-full bg-search-hoverBackground transition-transform duration-300 focus:relative focus:z-10 hover:bg-mediaCard-hoverBackground tabbable hover:scale-110">
<Flare.Light
flareSize={90}
cssColorVar="--colors-mediaCard-hoverAccent"
backgroundClass="bg-mediaCard-hoverBackground duration-100"
className="rounded-full group-hover:opacity-100 z-20"
/>
<Flare.Child className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full active:scale-110 transition-[transform,background-color] duration-200 z-30">
<Icon icon={Icons.CHEVRON_LEFT} />
</Flare.Child>
</Flare.Base>
</button>
<button
type="button"
className="absolute right-12 top-1/2 transform -translate-y-3/4 z-10"
onClick={() => handleScroll("right")}
>
<Flare.Base className="group -m-[0.705em] rounded-full bg-search-hoverBackground transition-transform duration-300 focus:relative focus:z-10 hover:bg-mediaCard-hoverBackground tabbable hover:scale-110">
<Flare.Light
flareSize={90}
cssColorVar="--colors-mediaCard-hoverAccent"
backgroundClass="bg-mediaCard-hoverBackground duration-100"
className="rounded-full group-hover:opacity-100 z-20"
/>
<Flare.Child className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full active:scale-110 transition-[transform,background-color] duration-200 z-30">
<Icon icon={Icons.CHEVRON_RIGHT} />
</Flare.Child>
</Flare.Base>
</button>
<NavButton direction="left" onClick={() => handleScroll("left")} />
<NavButton direction="right" onClick={() => handleScroll("right")} />
</>
);
}

2
src/pages/discover/components/MediaCarousel.tsx
View file

@ -78,7 +78,7 @@ export function MediaCarousel({
<div className="relative overflow-hidden carousel-container">
<div
id={`carousel-${categorySlug}`}
className="grid grid-flow-col auto-cols-max gap-4 pt-0 pb-4 overflow-auto scrollbar rounded-xl overflow-y-hidden md:pl-8 md:pr-8"
className="grid grid-flow-col auto-cols-max gap-4 pt-0 pb-4 overflow-x-scroll scrollbar rounded-xl overflow-y-hidden md:pl-8 md:pr-8"
ref={(el) => {
carouselRefs.current[categorySlug] = el;
}}