apps/web/src/hooks/useNowPlaying.tsx apps/web/src/hooks/useStories.tsx

+2 -2

apps/web/src/pages/home/Home.tsx

··· 1 1 import Main from "../../layouts/Main"; 2 2 import Feed from "./feed"; 3 3 - import NowPlayings from "./nowplayings"; 3 3 + import Stories from "./stories"; 4 4 5 5 const Home = () => { 6 6 const jwt = localStorage.getItem("token"); 7 7 return ( 8 8 <Main> 9 9 <div className="mt-[50px]"> 10 10 - {jwt && <NowPlayings />} 10 10 + {jwt && <Stories />} 11 11 <Feed /> 12 12 </div> 13 13 </Main>

+1 -1

apps/web/src/pages/home/feed/Feed.tsx

··· 80 80 await queryClient.invalidateQueries({ 81 81 queryKey: ["infiniteFeed", feedUri], 82 82 }); 83 83 - await queryClient.invalidateQueries({ queryKey: ["now-playings"] }); 83 83 + await queryClient.invalidateQueries({ queryKey: ["stories"] }); 84 84 // await queryClient.invalidateQueries({ queryKey: ["scrobblesChart"] }); 85 85 }; 86 86

+16 -16

apps/web/src/pages/home/nowplayings/NowPlayings.tsx apps/web/src/pages/home/stories/Stories.tsx

··· 9 9 import utc from "dayjs/plugin/utc"; 10 10 import { useEffect, useState, useRef } from "react"; 11 11 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react"; 12 12 - import { useNowPlayingsQuery } from "../../../hooks/useNowPlaying"; 12 12 + import { useStoriesQuery } from "../../../hooks/useStories"; 13 13 import styles, { getModalStyles } from "./styles"; 14 14 import _ from "lodash"; 15 15 import ContentLoader from "react-content-loader"; ··· 88 88 text-decoration: none; 89 89 `; 90 90 91 91 - function NowPlayings() { 91 91 + function Stories() { 92 92 const [isOpen, setIsOpen] = useState(false); 93 93 - const { data: rawNowPlayings, isLoading } = useNowPlayingsQuery(); 93 93 + const { data: rawStories, isLoading } = useStoriesQuery(); 94 94 95 95 // Deduplicate by trackId + did (user) + createdAt to ensure truly unique entries 96 96 - const nowPlayings = _.uniqBy( 97 97 - rawNowPlayings || [], 96 96 + const stories = _.uniqBy( 97 97 + rawStories || [], 98 98 (item) => `${item.trackId}-${item.did}-${item.createdAt}`, 99 99 ); 100 100 ··· 121 121 122 122 const onNext = () => { 123 123 const nextIndex = currentIndex + 1; 124 124 - if (nextIndex >= nowPlayings!.length) { 124 124 + if (nextIndex >= stories!.length) { 125 125 setIsOpen(false); 126 126 return; 127 127 } 128 128 129 129 setCurrentIndex(nextIndex); 130 130 - setCurrentlyPlaying(nowPlayings![nextIndex]); 130 130 + setCurrentlyPlaying(stories![nextIndex]); 131 131 setProgress(0); 132 132 }; 133 133 ··· 140 140 } 141 141 142 142 setCurrentIndex(prevIndex); 143 143 - setCurrentlyPlaying(nowPlayings![prevIndex]); 143 143 + setCurrentlyPlaying(stories![prevIndex]); 144 144 setProgress(0); 145 145 }; 146 146 ··· 189 189 190 190 window.addEventListener("resize", handleResize); 191 191 return () => window.removeEventListener("resize", handleResize); 192 192 - }, [nowPlayings]); 192 192 + }, [stories]); 193 193 194 194 useEffect(() => { 195 195 if (!isOpen) { ··· 210 210 }, [isOpen]); 211 211 212 212 useEffect(() => { 213 213 - if (!nowPlayings) { 213 213 + if (!stories) { 214 214 return; 215 215 } 216 216 217 217 if (progress >= 100) { 218 218 setProgress(0); 219 219 - const nextIndex = (currentIndex + 1) % nowPlayings.length; 219 219 + const nextIndex = (currentIndex + 1) % stories.length; 220 220 setCurrentIndex(nextIndex); 221 221 - setCurrentlyPlaying(nowPlayings[nextIndex]); 221 221 + setCurrentlyPlaying(stories[nextIndex]); 222 222 223 223 if (nextIndex === 0) { 224 224 setIsOpen(false); 225 225 } 226 226 } 227 227 // eslint-disable-next-line react-hooks/exhaustive-deps 228 228 - }, [progress, nowPlayings]); 228 228 + }, [progress, stories]); 229 229 230 230 return ( 231 231 <Container> ··· 331 331 className="flex overflow-x-auto no-scrollbar h-full" 332 332 style={{ scrollbarWidth: "none", msOverflowStyle: "none" }} 333 333 > 334 334 - {nowPlayings.map((item, index) => ( 334 334 + {stories.map((item, index) => ( 335 335 <StoryContainer 336 336 key={`${item.id}-${item.did}-${item.createdAt}`} 337 337 onClick={() => { ··· 434 434 )} 435 435 </div> 436 436 <div className="flex items-center h-[500px] w-[50px]"> 437 437 - {currentIndex < (nowPlayings || []).length - 1 && ( 437 437 + {currentIndex < (stories || []).length - 1 && ( 438 438 <div className="cursor-pointer" onClick={onNext}> 439 439 <ChevronRight 440 440 size={50} ··· 461 461 ); 462 462 } 463 463 464 464 - export default NowPlayings; 464 464 + export default Stories;

-3

apps/web/src/pages/home/nowplayings/index.tsx

··· 1 1 - import NowPlayings from "./NowPlayings"; 2 2 - 3 3 - export default NowPlayings;

apps/web/src/pages/home/nowplayings/styles.tsx apps/web/src/pages/home/stories/styles.tsx

+3

apps/web/src/pages/home/stories/index.tsx

··· 1 1 + import Stories from "./Stories"; 2 2 + 3 3 + export default Stories;