teal.fm
Your music, beautifully tracked. All yours. (coming soon)
teal.fm
teal-fm
atproto
add actor play view
+1
-1
apps/amethyst/app/(tabs)/_layout.tsx
+1
-1
apps/amethyst/app/(tabs)/_layout.tsx
+10
-27
apps/amethyst/app/(tabs)/index.tsx
+10
-27
apps/amethyst/app/(tabs)/index.tsx
···
1
1
import * as React from "react";
2
-
import { ActivityIndicator, View } from "react-native";
2
+
import { ActivityIndicator, ScrollView, View } from "react-native";
3
3
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4
4
import { CardHeader, CardTitle } from "../../components/ui/card";
5
5
import { Text } from "@/components/ui/text";
6
6
import { useStore } from "@/stores/mainStore";
7
7
import AuthOptions from "../auth/options";
8
8
9
-
import { Response } from "@atproto/api/src/client/types/app/bsky/actor/getProfile";
10
9
import { Stack } from "expo-router";
11
10
import ActorPlaysView from "@/components/play/actorPlaysView";
12
11
···
14
13
"https://i.pinimg.com/originals/ef/a2/8d/efa28d18a04e7fa40ed49eeb0ab660db.jpg";
15
14
16
15
export default function Screen() {
17
-
const [profile, setProfile] = React.useState<Response | null>(null);
18
16
const j = useStore((state) => state.status);
19
17
// @me
20
18
const agent = useStore((state) => state.pdsAgent);
21
-
const isReady = useStore((state) => state.isAgentReady);
22
-
React.useEffect(() => {
23
-
if (agent) {
24
-
agent
25
-
.getProfile({ actor: agent.did ?? "teal.fm" })
26
-
.then((profile) => {
27
-
console.log(profile);
28
-
return setProfile(profile);
29
-
})
30
-
.catch((e) => {
31
-
console.log(e);
32
-
});
33
-
} else {
34
-
console.log("No agent");
35
-
}
36
-
}, [isReady, agent]);
19
+
const profile = useStore((state) => state.profiles[agent?.did ?? ""]);
37
20
38
21
if (j !== "loggedIn") {
39
22
return <AuthOptions />;
···
49
32
}
50
33
51
34
return (
52
-
<View className="flex-1 justify-start items-start gap-5 p-6 bg-background">
35
+
<ScrollView className="flex-1 justify-start items-start gap-5 p-6 bg-background">
53
36
<Stack.Screen
54
37
options={{
55
38
title: "Home",
···
60
43
<CardHeader className="items-start pb-0">
61
44
<Avatar alt="Rick Sanchez's Avatar" className="w-24 h-24">
62
45
<AvatarImage
63
-
source={{ uri: profile?.data.avatar ?? GITHUB_AVATAR_URI }}
46
+
source={{ uri: profile.bsky?.avatar ?? GITHUB_AVATAR_URI }}
64
47
/>
65
48
<AvatarFallback>
66
49
<Text>
67
-
{profile?.data.displayName?.substring(0, 1) ?? " Richard"}
50
+
{profile.bsky?.displayName?.substring(0, 1) ?? " Richard"}
68
51
</Text>
69
52
</AvatarFallback>
70
53
</Avatar>
71
54
<View className="px-3" />
72
55
<CardTitle className="text-center">
73
-
{profile?.data.displayName ?? " Richard"}
56
+
{profile.bsky?.displayName ?? " Richard"}
74
57
</CardTitle>
75
58
{profile
76
-
? profile.data?.description?.split("\n").map((str, i) => (
59
+
? profile.bsky?.description?.split("\n").map((str, i) => (
77
60
<Text className="text-start self-start place-self-start" key={i}>
78
61
{str}
79
62
</Text>
80
63
)) || "A very mysterious person"
81
64
: "Loading..."}
82
65
</CardHeader>
83
-
<View className="max-w-xl w-full gap-2 pl-6">
66
+
<View className="max-w-xl w-full gap-2 pl-6 pt-6">
84
67
<Text className="text-left text-3xl font-serif">Your Stamps</Text>
85
-
<ActorPlaysView repo={profile.data.did} />
68
+
<ActorPlaysView repo={agent?.did} />
86
69
</View>
87
-
</View>
70
+
</ScrollView>
88
71
);
89
72
}
+3
-3
apps/amethyst/components/play/actorPlaysView.tsx
+3
-3
apps/amethyst/components/play/actorPlaysView.tsx
···
1
1
import { useStore } from "@/stores/mainStore";
2
2
import { Record as Play } from "@teal/lexicons/src/types/fm/teal/alpha/feed/play";
3
3
import { useEffect, useState } from "react";
4
-
import { View, Text, ScrollView } from "react-native";
4
+
import { Text, ScrollView } from "react-native";
5
5
import PlayView from "./playView";
6
6
interface ActorPlaysViewProps {
7
-
repo: string;
7
+
repo: string | undefined;
8
8
}
9
9
interface PlayWrapper {
10
10
cid: string;
···
39
39
return (
40
40
<ScrollView className="w-full *:gap-4">
41
41
{play.map((p) => (
42
-
<PlayView play={p.value} />
42
+
<PlayView key={p.uri} play={p.value} />
43
43
))}
44
44
</ScrollView>
45
45
);
+20
apps/amethyst/global.css
+20
apps/amethyst/global.css
···
62
62
.var-font-soft {
63
63
font-variation-settings: "SOFT" 100;
64
64
}
65
+
66
+
@supports not selector(::-webkit-scrollbar) {
67
+
scrollbar-color: rgba(0, 0, 0, 0.8) transparent;
68
+
scrollbar-width: thin;
69
+
}
70
+
71
+
::-webkit-scrollbar {
72
+
width: 7px;
73
+
}
74
+
::-webkit-scrollbar-track {
75
+
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
76
+
}
77
+
::-webkit-scrollbar-thumb {
78
+
background-color: darkslategray;
79
+
outline: 1px solid slategrey;
80
+
border-radius: 99px;
81
+
}
82
+
::webkit-scrollbar-thumb:hover {
83
+
background-color: slategray;
84
+
}