+55 -18

src/components/overlays/detailsModal/components/carousels/EpisodeCarousel.tsx

··· 45 45 const updateItem = useProgressStore((s) => s.updateItem); 46 46 const confirmModal = useModal("season-watch-confirm"); 47 47 48 48 + const [canScrollLeft, setCanScrollLeft] = useState(false); 49 49 + const [canScrollRight, setCanScrollRight] = useState(false); 50 50 + 51 51 + const updateScrollState = () => { 52 52 + if (!carouselRef.current) { 53 53 + setCanScrollLeft(false); 54 54 + setCanScrollRight(false); 55 55 + return; 56 56 + } 57 57 + 58 58 + const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current; 59 59 + const isAtStart = scrollLeft <= 1; 60 60 + const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1; 61 61 + 62 62 + setCanScrollLeft(!isAtStart); 63 63 + setCanScrollRight(!isAtEnd); 64 64 + }; 65 65 + 66 66 + useEffect(() => { 67 67 + const carousel = carouselRef.current; 68 68 + if (!carousel) return; 69 69 + 70 70 + updateScrollState(); 71 71 + 72 72 + carousel.addEventListener("scroll", updateScrollState); 73 73 + window.addEventListener("resize", updateScrollState); 74 74 + 75 75 + return () => { 76 76 + carousel.removeEventListener("scroll", updateScrollState); 77 77 + window.removeEventListener("resize", updateScrollState); 78 78 + }; 79 79 + }, []); 80 80 + 48 81 const handleScroll = (direction: "left" | "right") => { 49 82 if (!carouselRef.current) return; 50 83 ··· 530 563 {/* Episodes Carousel */} 531 564 <div className="relative"> 532 565 {/* Left scroll button */} 533 533 - <div className="absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block"> 534 534 - <button 535 535 - type="button" 536 536 - className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm" 537 537 - onClick={() => handleScroll("left")} 538 538 - > 539 539 - <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" /> 540 540 - </button> 541 541 - </div> 566 566 + {canScrollLeft && ( 567 567 + <div className="absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block"> 568 568 + <button 569 569 + type="button" 570 570 + className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm" 571 571 + onClick={() => handleScroll("left")} 572 572 + > 573 573 + <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" /> 574 574 + </button> 575 575 + </div> 576 576 + )} 542 577 543 578 <div 544 579 ref={carouselRef} ··· 783 818 </div> 784 819 785 820 {/* Right scroll button */} 786 786 - <div className="absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block"> 787 787 - <button 788 788 - type="button" 789 789 - className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm" 790 790 - onClick={() => handleScroll("right")} 791 791 - > 792 792 - <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" /> 793 793 - </button> 794 794 - </div> 821 821 + {canScrollRight && ( 822 822 + <div className="absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block"> 823 823 + <button 824 824 + type="button" 825 825 + className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm" 826 826 + onClick={() => handleScroll("right")} 827 827 + > 828 828 + <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" /> 829 829 + </button> 830 830 + </div> 831 831 + )} 795 832 </div> 796 833 </div> 797 834 );

+63 -26

src/components/player/atoms/Episodes.tsx

··· 766 766 ], 767 767 ); 768 768 769 769 + const [canScrollLeft, setCanScrollLeft] = useState(false); 770 770 + const [canScrollRight, setCanScrollRight] = useState(false); 771 771 + 772 772 + const updateScrollState = () => { 773 773 + if (!carouselRef.current) { 774 774 + setCanScrollLeft(false); 775 775 + setCanScrollRight(false); 776 776 + return; 777 777 + } 778 778 + 779 779 + const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current; 780 780 + const isAtStart = scrollLeft <= 1; 781 781 + const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1; 782 782 + 783 783 + setCanScrollLeft(!isAtStart); 784 784 + setCanScrollRight(!isAtEnd); 785 785 + }; 786 786 + 787 787 + useEffect(() => { 788 788 + const carousel = carouselRef.current; 789 789 + if (!carousel) return; 790 790 + 791 791 + updateScrollState(); 792 792 + 793 793 + carousel.addEventListener("scroll", updateScrollState); 794 794 + window.addEventListener("resize", updateScrollState); 795 795 + 796 796 + return () => { 797 797 + carousel.removeEventListener("scroll", updateScrollState); 798 798 + window.removeEventListener("resize", updateScrollState); 799 799 + }; 800 800 + }, []); 801 801 + 769 802 const handleScroll = (direction: "left" | "right") => { 770 803 if (!carouselRef.current) return; 771 804 ··· 916 949 content = ( 917 950 <div className="relative"> 918 951 {/* Horizontal scroll buttons */} 919 919 - <div 920 920 - className={classNames( 921 921 - "absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4", 922 922 - forceCompactEpisodeView ? "hidden" : "hidden lg:block", 923 923 - )} 924 924 - > 925 925 - <button 926 926 - type="button" 927 927 - className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm" 928 928 - onClick={() => handleScroll("left")} 952 952 + {canScrollLeft && ( 953 953 + <div 954 954 + className={classNames( 955 955 + "absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4", 956 956 + forceCompactEpisodeView ? "hidden" : "hidden lg:block", 957 957 + )} 929 958 > 930 930 - <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" /> 931 931 - </button> 932 932 - </div> 959 959 + <button 960 960 + type="button" 961 961 + className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm" 962 962 + onClick={() => handleScroll("left")} 963 963 + > 964 964 + <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" /> 965 965 + </button> 966 966 + </div> 967 967 + )} 933 968 934 969 <div 935 970 ref={carouselRef} ··· 996 1031 </div> 997 1032 998 1033 {/* Right scroll button */} 999 999 - <div 1000 1000 - className={classNames( 1001 1001 - "absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4", 1002 1002 - forceCompactEpisodeView ? "hidden" : "hidden lg:block", 1003 1003 - )} 1004 1004 - > 1005 1005 - <button 1006 1006 - type="button" 1007 1007 - className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm" 1008 1008 - onClick={() => handleScroll("right")} 1034 1034 + {canScrollRight && ( 1035 1035 + <div 1036 1036 + className={classNames( 1037 1037 + "absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4", 1038 1038 + forceCompactEpisodeView ? "hidden" : "hidden lg:block", 1039 1039 + )} 1009 1040 > 1010 1010 - <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" /> 1011 1011 - </button> 1012 1012 - </div> 1041 1041 + <button 1042 1042 + type="button" 1043 1043 + className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm" 1044 1044 + onClick={() => handleScroll("right")} 1045 1045 + > 1046 1046 + <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" /> 1047 1047 + </button> 1048 1048 + </div> 1049 1049 + )} 1013 1050 </div> 1014 1051 ); 1015 1052 }

+50 -3

src/pages/discover/components/CarouselNavButtons.tsx

··· 1 1 + import { useCallback, useEffect, useState } from "react"; 2 2 + 1 3 import { Icon, Icons } from "@/components/Icon"; 2 4 import { Flare } from "@/components/utils/Flare"; 3 5 ··· 11 13 interface NavButtonProps { 12 14 direction: "left" | "right"; 13 15 onClick: () => void; 16 16 + visible: boolean; 14 17 } 15 18 16 16 - function NavButton({ direction, onClick }: NavButtonProps) { 19 19 + function NavButton({ direction, onClick, visible }: NavButtonProps) { 20 20 + if (!visible) return null; 21 21 + 17 22 return ( 18 23 <button 19 24 type="button" ··· 43 48 categorySlug, 44 49 carouselRefs, 45 50 }: CarouselNavButtonsProps) { 51 51 + const [canScrollLeft, setCanScrollLeft] = useState(false); 52 52 + const [canScrollRight, setCanScrollRight] = useState(false); 53 53 + 54 54 + const updateScrollState = useCallback(() => { 55 55 + const carousel = carouselRefs.current[categorySlug]; 56 56 + if (!carousel) { 57 57 + setCanScrollLeft(false); 58 58 + setCanScrollRight(false); 59 59 + return; 60 60 + } 61 61 + 62 62 + const { scrollLeft, scrollWidth, clientWidth } = carousel; 63 63 + const isAtStart = scrollLeft <= 1; 64 64 + const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1; 65 65 + 66 66 + setCanScrollLeft(!isAtStart); 67 67 + setCanScrollRight(!isAtEnd); 68 68 + }, [categorySlug, carouselRefs]); 69 69 + 70 70 + useEffect(() => { 71 71 + const carousel = carouselRefs.current[categorySlug]; 72 72 + if (!carousel) return; 73 73 + 74 74 + updateScrollState(); 75 75 + 76 76 + carousel.addEventListener("scroll", updateScrollState); 77 77 + window.addEventListener("resize", updateScrollState); 78 78 + 79 79 + return () => { 80 80 + carousel.removeEventListener("scroll", updateScrollState); 81 81 + window.removeEventListener("resize", updateScrollState); 82 82 + }; 83 83 + }, [categorySlug, carouselRefs, updateScrollState]); 84 84 + 46 85 const handleScroll = (direction: "left" | "right") => { 47 86 const carousel = carouselRefs.current[categorySlug]; 48 87 if (!carousel) return; ··· 76 115 77 116 return ( 78 117 <> 79 79 - <NavButton direction="left" onClick={() => handleScroll("left")} /> 80 80 - <NavButton direction="right" onClick={() => handleScroll("right")} /> 118 118 + <NavButton 119 119 + direction="left" 120 120 + onClick={() => handleScroll("left")} 121 121 + visible={canScrollLeft} 122 122 + /> 123 123 + <NavButton 124 124 + direction="right" 125 125 + onClick={() => handleScroll("right")} 126 126 + visible={canScrollRight} 127 127 + /> 81 128 </> 82 129 ); 83 130 }

+79 -26

src/pages/discover/components/CategoryButtons.tsx

··· 1 1 + import { useCallback, useEffect, useState } from "react"; 2 2 + 1 3 import { Icon, Icons } from "@/components/Icon"; 2 4 3 5 interface CategoryButtonsProps { ··· 15 17 isMobile, 16 18 showAlwaysScroll, 17 19 }: CategoryButtonsProps) { 18 18 - const renderScrollButton = (direction: "left" | "right") => ( 19 19 - <div> 20 20 - <button 21 21 - type="button" 22 22 - className="flex items-center rounded-full px-4 text-white py-3" 23 23 - onClick={() => { 24 24 - const element = document.getElementById( 25 25 - `button-carousel-${categoryType}`, 26 26 - ); 27 27 - if (element) { 28 28 - element.scrollBy({ 29 29 - left: direction === "left" ? -200 : 200, 30 30 - behavior: "smooth", 31 31 - }); 32 32 - } 33 33 - }} 34 34 - > 35 35 - <Icon 36 36 - icon={direction === "left" ? Icons.CHEVRON_LEFT : Icons.CHEVRON_RIGHT} 37 37 - className="text-2xl rtl:-scale-x-100" 38 38 - /> 39 39 - </button> 40 40 - </div> 41 41 - ); 20 20 + const [canScrollLeft, setCanScrollLeft] = useState(false); 21 21 + const [canScrollRight, setCanScrollRight] = useState(false); 22 22 + 23 23 + const updateScrollState = useCallback(() => { 24 24 + const element = document.getElementById(`button-carousel-${categoryType}`); 25 25 + if (!element) { 26 26 + setCanScrollLeft(false); 27 27 + setCanScrollRight(false); 28 28 + return; 29 29 + } 30 30 + 31 31 + const { scrollLeft, scrollWidth, clientWidth } = element; 32 32 + const isAtStart = scrollLeft <= 1; 33 33 + const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1; 34 34 + 35 35 + setCanScrollLeft(!isAtStart); 36 36 + setCanScrollRight(!isAtEnd); 37 37 + }, [categoryType]); 38 38 + 39 39 + useEffect(() => { 40 40 + const element = document.getElementById(`button-carousel-${categoryType}`); 41 41 + if (!element) return; 42 42 + 43 43 + updateScrollState(); 44 44 + 45 45 + element.addEventListener("scroll", updateScrollState); 46 46 + window.addEventListener("resize", updateScrollState); 47 47 + 48 48 + return () => { 49 49 + element.removeEventListener("scroll", updateScrollState); 50 50 + window.removeEventListener("resize", updateScrollState); 51 51 + }; 52 52 + }, [categoryType, updateScrollState]); 53 53 + 54 54 + useEffect(() => { 55 55 + const timeoutId = setTimeout(() => { 56 56 + updateScrollState(); 57 57 + }, 0); 58 58 + return () => clearTimeout(timeoutId); 59 59 + }, [categories, categoryType, updateScrollState]); 60 60 + 61 61 + const renderScrollButton = (direction: "left" | "right") => { 62 62 + const shouldShow = direction === "left" ? canScrollLeft : canScrollRight; 63 63 + 64 64 + if (!shouldShow && !showAlwaysScroll && !isMobile) return null; 65 65 + 66 66 + return ( 67 67 + <div> 68 68 + <button 69 69 + type="button" 70 70 + className="flex items-center rounded-full px-4 text-white py-3" 71 71 + onClick={() => { 72 72 + const element = document.getElementById( 73 73 + `button-carousel-${categoryType}`, 74 74 + ); 75 75 + if (element) { 76 76 + element.scrollBy({ 77 77 + left: direction === "left" ? -200 : 200, 78 78 + behavior: "smooth", 79 79 + }); 80 80 + } 81 81 + }} 82 82 + > 83 83 + <Icon 84 84 + icon={ 85 85 + direction === "left" ? Icons.CHEVRON_LEFT : Icons.CHEVRON_RIGHT 86 86 + } 87 87 + className="text-2xl rtl:-scale-x-100" 88 88 + /> 89 89 + </button> 90 90 + </div> 91 91 + ); 92 92 + }; 42 93 43 94 return ( 44 95 <div className="flex overflow-x-auto"> 45 45 - {(showAlwaysScroll || isMobile) && renderScrollButton("left")} 96 96 + {(showAlwaysScroll || isMobile || canScrollLeft) && 97 97 + renderScrollButton("left")} 46 98 47 99 <div 48 100 id={`button-carousel-${categoryType}`} ··· 62 114 </div> 63 115 </div> 64 116 65 65 - {(showAlwaysScroll || isMobile) && renderScrollButton("right")} 117 117 + {(showAlwaysScroll || isMobile || canScrollRight) && 118 118 + renderScrollButton("right")} 66 119 </div> 67 120 ); 68 121 }

+1 -1

src/stores/__old/watched/store.ts

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