Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-01-11 20:10:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Revert "feat: hide the arrow buttons on scroll lists when at either end of the list"

Browse source 
This reverts commit 4f781f9736.
This commit is contained in:
Pas 2025-11-11 12:41:12 -07:00
parent 2084033b13
commit 8d8a5bdb66
5 changed files with 74 additions and 248 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/components/overlays/detailsModal/components/carousels/EpisodeCarousel.tsx
View file

@ -45,39 +45,6 @@ export function EpisodeCarousel({
const updateItem = useProgressStore((s) => s.updateItem);
const confirmModal = useModal("season-watch-confirm");
const [canScrollLeft, setCanScrollLeft] = useState(false);
const [canScrollRight, setCanScrollRight] = useState(false);
const updateScrollState = () => {
if (!carouselRef.current) {
setCanScrollLeft(false);
setCanScrollRight(false);
return;
}
const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current;
const isAtStart = scrollLeft <= 1;
const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
setCanScrollLeft(!isAtStart);
setCanScrollRight(!isAtEnd);
};
useEffect(() => {
const carousel = carouselRef.current;
if (!carousel) return;
updateScrollState();
carousel.addEventListener("scroll", updateScrollState);
window.addEventListener("resize", updateScrollState);
return () => {
carousel.removeEventListener("scroll", updateScrollState);
window.removeEventListener("resize", updateScrollState);
};
}, []);
const handleScroll = (direction: "left" | "right") => {
if (!carouselRef.current) return;
@ -563,17 +530,15 @@ export function EpisodeCarousel({
{/* Episodes Carousel */}
<div className="relative">
{/* Left scroll button */}
{canScrollLeft && (
<div className="absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
<button
type="button"
className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
onClick={() => handleScroll("left")}
>
<Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" />
</button>
</div>
)}
<div className="absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
<button
type="button"
className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
onClick={() => handleScroll("left")}
>
<Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" />
</button>
</div>
<div
ref={carouselRef}
@ -818,17 +783,15 @@ export function EpisodeCarousel({
</div>
{/* Right scroll button */}
{canScrollRight && (
<div className="absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
<button
type="button"
className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
onClick={() => handleScroll("right")}
>
<Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" />
</button>
</div>
)}
<div className="absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
<button
type="button"
className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
onClick={() => handleScroll("right")}
>
<Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" />
</button>
</div>
</div>
</div>
);

89
src/components/player/atoms/Episodes.tsx
View file

@ -766,39 +766,6 @@ export function EpisodesView({
],
);
const [canScrollLeft, setCanScrollLeft] = useState(false);
const [canScrollRight, setCanScrollRight] = useState(false);
const updateScrollState = () => {
if (!carouselRef.current) {
setCanScrollLeft(false);
setCanScrollRight(false);
return;
}
const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current;
const isAtStart = scrollLeft <= 1;
const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
setCanScrollLeft(!isAtStart);
setCanScrollRight(!isAtEnd);
};
useEffect(() => {
const carousel = carouselRef.current;
if (!carousel) return;
updateScrollState();
carousel.addEventListener("scroll", updateScrollState);
window.addEventListener("resize", updateScrollState);
return () => {
carousel.removeEventListener("scroll", updateScrollState);
window.removeEventListener("resize", updateScrollState);
};
}, []);
const handleScroll = (direction: "left" | "right") => {
if (!carouselRef.current) return;
@ -949,22 +916,20 @@ export function EpisodesView({
content = (
<div className="relative">
{/* Horizontal scroll buttons */}
{canScrollLeft && (
<div
className={classNames(
"absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4",
forceCompactEpisodeView ? "hidden" : "hidden lg:block",
)}
<div
className={classNames(
"absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4",
forceCompactEpisodeView ? "hidden" : "hidden lg:block",
)}
>
<button
type="button"
className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
onClick={() => handleScroll("left")}
>
<button
type="button"
className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
onClick={() => handleScroll("left")}
>
<Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" />
</button>
</div>
)}
<Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" />
</button>
</div>
<div
ref={carouselRef}
@ -1031,22 +996,20 @@ export function EpisodesView({
</div>
{/* Right scroll button */}
{canScrollRight && (
<div
className={classNames(
"absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4",
forceCompactEpisodeView ? "hidden" : "hidden lg:block",
)}
<div
className={classNames(
"absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4",
forceCompactEpisodeView ? "hidden" : "hidden lg:block",
)}
>
<button
type="button"
className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
onClick={() => handleScroll("right")}
>
<button
type="button"
className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
onClick={() => handleScroll("right")}
>
<Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" />
</button>
</div>
)}
<Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" />
</button>
</div>
</div>
);
}

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

@ -1,5 +1,3 @@
import { useCallback, useEffect, useState } from "react";
import { Icon, Icons } from "@/components/Icon";
import { Flare } from "@/components/utils/Flare";
@ -13,12 +11,9 @@ interface CarouselNavButtonsProps {
interface NavButtonProps {
direction: "left" | "right";
onClick: () => void;
visible: boolean;
}
function NavButton({ direction, onClick, visible }: NavButtonProps) {
if (!visible) return null;
function NavButton({ direction, onClick }: NavButtonProps) {
return (
<button
type="button"
@ -48,40 +43,6 @@ export function CarouselNavButtons({
categorySlug,
carouselRefs,
}: CarouselNavButtonsProps) {
const [canScrollLeft, setCanScrollLeft] = useState(false);
const [canScrollRight, setCanScrollRight] = useState(false);
const updateScrollState = useCallback(() => {
const carousel = carouselRefs.current[categorySlug];
if (!carousel) {
setCanScrollLeft(false);
setCanScrollRight(false);
return;
}
const { scrollLeft, scrollWidth, clientWidth } = carousel;
const isAtStart = scrollLeft <= 1;
const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
setCanScrollLeft(!isAtStart);
setCanScrollRight(!isAtEnd);
}, [categorySlug, carouselRefs]);
useEffect(() => {
const carousel = carouselRefs.current[categorySlug];
if (!carousel) return;
updateScrollState();
carousel.addEventListener("scroll", updateScrollState);
window.addEventListener("resize", updateScrollState);
return () => {
carousel.removeEventListener("scroll", updateScrollState);
window.removeEventListener("resize", updateScrollState);
};
}, [categorySlug, carouselRefs, updateScrollState]);
const handleScroll = (direction: "left" | "right") => {
const carousel = carouselRefs.current[categorySlug];
if (!carousel) return;
@ -115,16 +76,8 @@ export function CarouselNavButtons({
return (
<>
<NavButton
direction="left"
onClick={() => handleScroll("left")}
visible={canScrollLeft}
/>
<NavButton
direction="right"
onClick={() => handleScroll("right")}
visible={canScrollRight}
/>
<NavButton direction="left" onClick={() => handleScroll("left")} />
<NavButton direction="right" onClick={() => handleScroll("right")} />
</>
);
}

105
src/pages/discover/components/CategoryButtons.tsx
View file

@ -1,5 +1,3 @@
import { useCallback, useEffect, useState } from "react";
import { Icon, Icons } from "@/components/Icon";
interface CategoryButtonsProps {
@ -17,84 +15,34 @@ export function CategoryButtons({
isMobile,
showAlwaysScroll,
}: CategoryButtonsProps) {
const [canScrollLeft, setCanScrollLeft] = useState(false);
const [canScrollRight, setCanScrollRight] = useState(false);
const updateScrollState = useCallback(() => {
const element = document.getElementById(`button-carousel-${categoryType}`);
if (!element) {
setCanScrollLeft(false);
setCanScrollRight(false);
return;
}
const { scrollLeft, scrollWidth, clientWidth } = element;
const isAtStart = scrollLeft <= 1;
const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
setCanScrollLeft(!isAtStart);
setCanScrollRight(!isAtEnd);
}, [categoryType]);
useEffect(() => {
const element = document.getElementById(`button-carousel-${categoryType}`);
if (!element) return;
updateScrollState();
element.addEventListener("scroll", updateScrollState);
window.addEventListener("resize", updateScrollState);
return () => {
element.removeEventListener("scroll", updateScrollState);
window.removeEventListener("resize", updateScrollState);
};
}, [categoryType, updateScrollState]);
useEffect(() => {
const timeoutId = setTimeout(() => {
updateScrollState();
}, 0);
return () => clearTimeout(timeoutId);
}, [categories, categoryType, updateScrollState]);
const renderScrollButton = (direction: "left" | "right") => {
const shouldShow = direction === "left" ? canScrollLeft : canScrollRight;
if (!shouldShow && !showAlwaysScroll && !isMobile) return null;
return (
<div>
<button
type="button"
className="flex items-center rounded-full px-4 text-white py-3"
onClick={() => {
const element = document.getElementById(
`button-carousel-${categoryType}`,
);
if (element) {
element.scrollBy({
left: direction === "left" ? -200 : 200,
behavior: "smooth",
});
}
}}
>
<Icon
icon={
direction === "left" ? Icons.CHEVRON_LEFT : Icons.CHEVRON_RIGHT
}
className="text-2xl rtl:-scale-x-100"
/>
</button>
</div>
);
};
const renderScrollButton = (direction: "left" | "right") => (
<div>
<button
type="button"
className="flex items-center rounded-full px-4 text-white py-3"
onClick={() => {
const element = document.getElementById(
`button-carousel-${categoryType}`,
);
if (element) {
element.scrollBy({
left: direction === "left" ? -200 : 200,
behavior: "smooth",
});
}
}}
>
<Icon
icon={direction === "left" ? Icons.CHEVRON_LEFT : Icons.CHEVRON_RIGHT}
className="text-2xl rtl:-scale-x-100"
/>
</button>
</div>
);
return (
<div className="flex overflow-x-auto">
{(showAlwaysScroll || isMobile || canScrollLeft) &&
renderScrollButton("left")}
{(showAlwaysScroll || isMobile) && renderScrollButton("left")}
<div
id={`button-carousel-${categoryType}`}
@ -114,8 +62,7 @@ export function CategoryButtons({
</div>
</div>
{(showAlwaysScroll || isMobile || canScrollRight) &&
renderScrollButton("right")}
{(showAlwaysScroll || isMobile) && renderScrollButton("right")}
</div>
);
}

2
src/stores/__old/watched/store.ts
View file

@ -1,10 +1,10 @@
import { useProgressStore } from "@/stores/progress";
import { createVersionedStore } from "../migrations";
import { OldData, migrateV2Videos } from "./migrations/v2";
import { migrateV3Videos } from "./migrations/v3";
import { migrateV4Videos } from "./migrations/v4";
import { WatchedStoreData } from "./types";
import { createVersionedStore } from "../migrations";
export const VideoProgressStore = createVersionedStore<WatchedStoreData>()
.setKey("video-progress")