forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 🎵
Rename NowPlayings to Stories
+22
-22
apps/web/src/hooks/useNowPlaying.tsx
apps/web/src/hooks/useStories.tsx
apps/web/src/hooks/useNowPlaying.tsx
apps/web/src/hooks/useStories.tsx
+2
-2
apps/web/src/pages/home/Home.tsx
+2
-2
apps/web/src/pages/home/Home.tsx
···
1
1
import Main from "../../layouts/Main";
2
2
import Feed from "./feed";
3
-
import NowPlayings from "./nowplayings";
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
-
{jwt && <NowPlayings />}
10
+
{jwt && <Stories />}
11
11
<Feed />
12
12
</div>
13
13
</Main>
+1
-1
apps/web/src/pages/home/feed/Feed.tsx
+1
-1
apps/web/src/pages/home/feed/Feed.tsx
···
80
80
await queryClient.invalidateQueries({
81
81
queryKey: ["infiniteFeed", feedUri],
82
82
});
83
-
await queryClient.invalidateQueries({ queryKey: ["now-playings"] });
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
+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
-
import { useNowPlayingsQuery } from "../../../hooks/useNowPlaying";
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
-
function NowPlayings() {
91
+
function Stories() {
92
92
const [isOpen, setIsOpen] = useState(false);
93
-
const { data: rawNowPlayings, isLoading } = useNowPlayingsQuery();
93
+
const { data: rawStories, isLoading } = useStoriesQuery();
94
94
95
95
// Deduplicate by trackId + did (user) + createdAt to ensure truly unique entries
96
-
const nowPlayings = _.uniqBy(
97
-
rawNowPlayings || [],
96
+
const stories = _.uniqBy(
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
-
if (nextIndex >= nowPlayings!.length) {
124
+
if (nextIndex >= stories!.length) {
125
125
setIsOpen(false);
126
126
return;
127
127
}
128
128
129
129
setCurrentIndex(nextIndex);
130
-
setCurrentlyPlaying(nowPlayings![nextIndex]);
130
+
setCurrentlyPlaying(stories![nextIndex]);
131
131
setProgress(0);
132
132
};
133
133
···
140
140
}
141
141
142
142
setCurrentIndex(prevIndex);
143
-
setCurrentlyPlaying(nowPlayings![prevIndex]);
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
-
}, [nowPlayings]);
192
+
}, [stories]);
193
193
194
194
useEffect(() => {
195
195
if (!isOpen) {
···
210
210
}, [isOpen]);
211
211
212
212
useEffect(() => {
213
-
if (!nowPlayings) {
213
+
if (!stories) {
214
214
return;
215
215
}
216
216
217
217
if (progress >= 100) {
218
218
setProgress(0);
219
-
const nextIndex = (currentIndex + 1) % nowPlayings.length;
219
+
const nextIndex = (currentIndex + 1) % stories.length;
220
220
setCurrentIndex(nextIndex);
221
-
setCurrentlyPlaying(nowPlayings[nextIndex]);
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
-
}, [progress, nowPlayings]);
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
-
{nowPlayings.map((item, index) => (
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
-
{currentIndex < (nowPlayings || []).length - 1 && (
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
-
export default NowPlayings;
464
+
export default Stories;
-3
apps/web/src/pages/home/nowplayings/index.tsx
-3
apps/web/src/pages/home/nowplayings/index.tsx
apps/web/src/pages/home/nowplayings/styles.tsx
apps/web/src/pages/home/stories/styles.tsx
apps/web/src/pages/home/nowplayings/styles.tsx
apps/web/src/pages/home/stories/styles.tsx