+18 -55

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 - 81 48 const handleScroll = (direction: "left" | "right") => { 82 49 if (!carouselRef.current) return; 83 50 ··· 563 530 {/* Episodes Carousel */} 564 531 <div className="relative"> 565 532 {/* Left scroll button */} 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 - )} 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> 577 542 578 543 <div 579 544 ref={carouselRef} ··· 818 783 </div> 819 784 820 785 {/* Right scroll button */} 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 - )} 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> 832 795 </div> 833 796 </div> 834 797 );

+26 -63

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 - 802 769 const handleScroll = (direction: "left" | "right") => { 803 770 if (!carouselRef.current) return; 804 771 ··· 949 916 content = ( 950 917 <div className="relative"> 951 918 {/* Horizontal scroll buttons */} 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 - )} 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")} 958 929 > 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 - )} 930 930 + <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" /> 931 931 + </button> 932 932 + </div> 968 933 969 934 <div 970 935 ref={carouselRef} ··· 1031 996 </div> 1032 997 1033 998 {/* Right scroll button */} 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 - )} 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")} 1040 1009 > 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 - )} 1010 1010 + <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" /> 1011 1011 + </button> 1012 1012 + </div> 1050 1013 </div> 1051 1014 ); 1052 1015 }

+3 -50

src/pages/discover/components/CarouselNavButtons.tsx

··· 1 1 - import { useCallback, useEffect, useState } from "react"; 2 2 - 3 1 import { Icon, Icons } from "@/components/Icon"; 4 2 import { Flare } from "@/components/utils/Flare"; 5 3 ··· 13 11 interface NavButtonProps { 14 12 direction: "left" | "right"; 15 13 onClick: () => void; 16 16 - visible: boolean; 17 14 } 18 15 19 19 - function NavButton({ direction, onClick, visible }: NavButtonProps) { 20 20 - if (!visible) return null; 21 21 - 16 16 + function NavButton({ direction, onClick }: NavButtonProps) { 22 17 return ( 23 18 <button 24 19 type="button" ··· 48 43 categorySlug, 49 44 carouselRefs, 50 45 }: 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 - 85 46 const handleScroll = (direction: "left" | "right") => { 86 47 const carousel = carouselRefs.current[categorySlug]; 87 48 if (!carousel) return; ··· 115 76 116 77 return ( 117 78 <> 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 - /> 79 79 + <NavButton direction="left" onClick={() => handleScroll("left")} /> 80 80 + <NavButton direction="right" onClick={() => handleScroll("right")} /> 128 81 </> 129 82 ); 130 83 }

+26 -79

src/pages/discover/components/CategoryButtons.tsx

··· 1 1 - import { useCallback, useEffect, useState } from "react"; 2 2 - 3 1 import { Icon, Icons } from "@/components/Icon"; 4 2 5 3 interface CategoryButtonsProps { ··· 17 15 isMobile, 18 16 showAlwaysScroll, 19 17 }: CategoryButtonsProps) { 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 - }; 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 + ); 93 42 94 43 return ( 95 44 <div className="flex overflow-x-auto"> 96 96 - {(showAlwaysScroll || isMobile || canScrollLeft) && 97 97 - renderScrollButton("left")} 45 45 + {(showAlwaysScroll || isMobile) && renderScrollButton("left")} 98 46 99 47 <div 100 48 id={`button-carousel-${categoryType}`} ··· 114 62 </div> 115 63 </div> 116 64 117 117 - {(showAlwaysScroll || isMobile || canScrollRight) && 118 118 - renderScrollButton("right")} 65 65 + {(showAlwaysScroll || isMobile) && renderScrollButton("right")} 119 66 </div> 120 67 ); 121 68 }

+1 -1

src/stores/__old/watched/store.ts

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