t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 馃幍
tsiry-sandratraina.com
1import { handleAtom } from "@/src/atoms/handle";
2import Chips from "@/src/components/Chips";
3import ScrollToTopButton from "@/src/components/ScrollToTopButton";
4import StickyPlayer from "@/src/components/StickyPlayer";
5import useScrollToTop from "@/src/hooks/useScrollToTop";
6import { RootStackParamList } from "@/src/Navigation";
7import { useNowPlayingContext } from "@/src/providers/NowPlayingProvider";
8import { RouteProp } from "@react-navigation/native";
9import { useSetAtom } from "jotai";
10import { FC, useEffect, useState } from "react";
11import { Text, View } from "react-native";
12import Albums from "./Albums";
13import Artists from "./Artists";
14import Scrobbles from "./Scrobbles";
15import Tracks from "./Tracks";
16
17type LibraryRouteProp = RouteProp<
18 RootStackParamList,
19 "Library" | "UserLibrary"
20>;
21
22export type LibraryProps = Partial<{
23 route: LibraryRouteProp;
24 bottom?: number;
25}>;
26
27const Library: FC<LibraryProps> = (props) => {
28 const { bottom, route } = props;
29 const setHandle = useSetAtom(handleAtom);
30 const { scrollToTop, isVisible, fadeAnim, handleScroll, listRef } =
31 useScrollToTop();
32 const nowPlaying = useNowPlayingContext();
33
34 const chips = [
35 { label: "Scrobbles", key: 0 },
36 { label: "Artists", key: 1 },
37 { label: "Albums", key: 2 },
38 { label: "Tracks", key: 3 },
39 ];
40 const [activeChip, setActiveChip] = useState(0);
41
42 useEffect(() => {
43 setHandle(route?.params?.handle);
44 }, [route?.params?.handle]);
45
46 useEffect(() => {
47 if (route?.params?.tab) {
48 setActiveChip(route.params.tab);
49 }
50 }, [route?.params?.tab]);
51
52 const bottomButtonPosition = nowPlaying ? 80 : 20;
53
54 return (
55 <View className="w-full h-full bg-black">
56 <View className="pl-[15px] pr-[15px]">
57 <Text className="font-rockford-medium text-[#fff] text-[21px] mt-[50px]">
58 Library
59 </Text>
60 <View>
61 <Chips
62 items={chips}
63 onChange={(key) => setActiveChip(key as number)}
64 active={activeChip}
65 />
66 </View>
67 {activeChip === 0 && (
68 <Scrobbles handleScroll={handleScroll} listRef={listRef} />
69 )}
70 {activeChip === 1 && (
71 <Artists handleScroll={handleScroll} listRef={listRef} />
72 )}
73 {activeChip === 2 && (
74 <Albums handleScroll={handleScroll} listRef={listRef} />
75 )}
76 {activeChip === 3 && (
77 <Tracks handleScroll={handleScroll} listRef={listRef} />
78 )}
79 </View>
80 {isVisible && (
81 <ScrollToTopButton
82 fadeAnim={fadeAnim}
83 bottom={bottomButtonPosition}
84 onPress={scrollToTop}
85 />
86 )}
87 <View
88 className={`w-full absolute bottom-0 bg-[#000]`}
89 style={{
90 bottom: bottom || 0,
91 }}
92 >
93 <StickyPlayer />
94 </View>
95 </View>
96 );
97};
98
99export default Library;