teal.fm
Your music, beautifully tracked. All yours. (coming soon)
teal.fm
teal-fm
atproto
attempt a styles fix
authored by
Natalie
and committed by
Natalie B.
9fd851bd
511363e3
-142
apps/amethyst/lib/oldStamp.tsx
-142
apps/amethyst/lib/oldStamp.tsx
···
1
-
import { View, ScrollView, TouchableOpacity, Image, Modal } from "react-native";
2
-
import { useState } from "react";
3
-
import { Text } from "../components/ui/text";
4
-
import { Icon } from "@/lib/icons/iconWithClassName";
5
-
import { Check } from "lucide-react-native";
6
1
import { Record as PlayRecord } from "@teal/lexicons/src/types/fm/teal/alpha/feed/play";
7
-
import React from "react";
8
2
9
3
// MusicBrainz API Types
10
4
export interface MusicBrainzArtistCredit {
···
85
79
return [];
86
80
}
87
81
}
88
-
89
-
export function SearchResult({
90
-
result,
91
-
onSelectTrack,
92
-
isSelected,
93
-
selectedRelease,
94
-
onReleaseSelect,
95
-
}: SearchResultProps) {
96
-
const [showReleaseModal, setShowReleaseModal] = useState<boolean>(false);
97
-
98
-
const currentRelease = selectedRelease || result.releases?.[0];
99
-
100
-
return (
101
-
<TouchableOpacity
102
-
onPress={() => {
103
-
onSelectTrack(
104
-
isSelected
105
-
? null
106
-
: {
107
-
...result,
108
-
selectedRelease: currentRelease, // Pass the selected release with the track
109
-
},
110
-
);
111
-
}}
112
-
className={`p-4 mb-2 rounded-lg ${
113
-
isSelected ? "bg-primary/20" : "bg-secondary/10"
114
-
}`}
115
-
>
116
-
<View className="flex-row justify-between items-center gap-2">
117
-
<Image
118
-
className="w-16 h-16 rounded-lg bg-gray-500/50"
119
-
source={{
120
-
uri: `https://coverartarchive.org/release/${currentRelease?.id}/front-250`,
121
-
}}
122
-
/>
123
-
<View className="flex-1">
124
-
<Text className="font-bold text-sm">{result.title}</Text>
125
-
<Text className="text-sm text-gray-600">
126
-
{result["artist-credit"]?.[0]?.artist?.name ?? "Unknown Artist"}
127
-
</Text>
128
-
129
-
{/* Release Selector Button */}
130
-
{result.releases && result.releases?.length > 0 && (
131
-
<TouchableOpacity
132
-
onPress={() => setShowReleaseModal(true)}
133
-
className="p-1 bg-secondary/10 rounded-lg flex md:flex-row items-start md:gap-1"
134
-
>
135
-
<Text className="text-sm text-gray-500">Release:</Text>
136
-
<Text className="text-sm" numberOfLines={1}>
137
-
{currentRelease?.title}
138
-
{currentRelease?.date ? ` (${currentRelease.date})` : ""}
139
-
{currentRelease?.country ? ` - ${currentRelease.country}` : ""}
140
-
</Text>
141
-
</TouchableOpacity>
142
-
)}
143
-
</View>
144
-
{/* Existing icons */}
145
-
{/* <Link href={`https://musicbrainz.org/recording/${result.id}`}>
146
-
<View className="bg-primary/40 rounded-full p-1">
147
-
<Icon icon={Brain} size={20} />
148
-
</View>
149
-
</Link> */}
150
-
{isSelected ? (
151
-
<View className="bg-primary rounded-full p-1">
152
-
<Icon icon={Check} size={20} />
153
-
</View>
154
-
) : (
155
-
<View className="border-2 border-secondary rounded-full p-3"></View>
156
-
)}
157
-
</View>
158
-
159
-
{/* Release Selection Modal */}
160
-
<Modal
161
-
visible={showReleaseModal}
162
-
transparent={true}
163
-
animationType="slide"
164
-
onRequestClose={() => setShowReleaseModal(false)}
165
-
>
166
-
<View className="flex-1 justify-end bg-black/50">
167
-
<View className="bg-background rounded-t-3xl">
168
-
<View className="p-4 border-b border-gray-200">
169
-
<Text className="text-lg font-bold text-center">
170
-
Select Release
171
-
</Text>
172
-
<TouchableOpacity
173
-
className="absolute right-4 top-4"
174
-
onPress={() => setShowReleaseModal(false)}
175
-
>
176
-
<Text className="text-primary">Done</Text>
177
-
</TouchableOpacity>
178
-
</View>
179
-
180
-
<ScrollView className="max-h-[50vh]">
181
-
{result.releases?.map((release) => (
182
-
<TouchableOpacity
183
-
key={release.id}
184
-
className={`p-4 border-b border-gray-100 ${
185
-
selectedRelease?.id === release.id ? "bg-primary/10" : ""
186
-
}`}
187
-
onPress={() => {
188
-
onReleaseSelect(result.id, release);
189
-
setShowReleaseModal(false);
190
-
}}
191
-
>
192
-
<Text className="font-medium">{release.title}</Text>
193
-
<View className="flex-row gap-2">
194
-
{release.date && (
195
-
<Text className="text-sm text-gray-500">
196
-
{release.date}
197
-
</Text>
198
-
)}
199
-
{release.country && (
200
-
<Text className="text-sm text-gray-500">
201
-
{release.country}
202
-
</Text>
203
-
)}
204
-
{release.status && (
205
-
<Text className="text-sm text-gray-500">
206
-
{release.status}
207
-
</Text>
208
-
)}
209
-
</View>
210
-
{release.disambiguation && (
211
-
<Text className="text-sm text-gray-400 italic">
212
-
{release.disambiguation}
213
-
</Text>
214
-
)}
215
-
</TouchableOpacity>
216
-
))}
217
-
</ScrollView>
218
-
</View>
219
-
</View>
220
-
</Modal>
221
-
</TouchableOpacity>
222
-
);
223
-
}