chrisandClaude Opus 5.5
63d618f0e3
- Every feature is free for everyone (the plan system stays for later); remaining limits are abuse guards - Optional website donation link (NEXT_PUBLIC_DONATION_URL). Not shown in the mobile apps, where tips to the developer generally need in-app purchase - Last.fm/ListenBrainz-sourced plays link to the user's profile, as Last.fm's API terms require - Connections track when they last saw activity; a scrobbler silent for over a week prompts re-linking Spotify (its link expires every 6 months) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MzFywujuH9TiuXbr9vjoX8
66 lines
2.8 KiB
TypeScript
66 lines
2.8 KiB
TypeScript
import { Image } from 'expo-image';
|
|
import { Linking, Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { openUrl, timeAgo, type ProfileDTO, type RecentPlayDTO, type StreamingService } from '@musicshare/shared';
|
|
import { showError } from '@/lib/errors';
|
|
import { colors, radius, space } from '@/lib/theme';
|
|
import { Card, Heading } from './ui';
|
|
|
|
export function RecentPlays({
|
|
plays,
|
|
preferred,
|
|
attribution = {},
|
|
}: {
|
|
plays: RecentPlayDTO[];
|
|
preferred: StreamingService | null | undefined;
|
|
attribution?: ProfileDTO['attribution'];
|
|
}) {
|
|
const credits = (['lastfm', 'listenbrainz'] as const).filter((s) => attribution[s] && plays.some((p) => p.source === s));
|
|
if (plays.length === 0) return null;
|
|
return (
|
|
<Card style={{ gap: 0 }}>
|
|
<Heading style={{ marginBottom: space.sm }}>Recently played</Heading>
|
|
{plays.map((p, i) => (
|
|
<Pressable
|
|
key={`${p.playedAt}-${i}`}
|
|
disabled={!preferred}
|
|
accessibilityRole={preferred ? 'link' : undefined}
|
|
onPress={() => preferred && Linking.openURL(openUrl(p.track, preferred).url).catch((e) => showError(e, "Couldn't open link"))}
|
|
style={({ pressed }) => [styles.row, i > 0 && styles.divider, pressed && { opacity: 0.6 }]}>
|
|
{p.track.artworkUrl ? (
|
|
<Image source={p.track.artworkUrl} style={styles.art} />
|
|
) : (
|
|
<View style={[styles.art, styles.artEmpty]}>
|
|
<Text style={{ color: colors.muted }}>♪</Text>
|
|
</View>
|
|
)}
|
|
<View style={{ flex: 1, minWidth: 0 }}>
|
|
<Text style={styles.title} numberOfLines={1}>
|
|
{p.track.title}
|
|
</Text>
|
|
<Text style={styles.artist} numberOfLines={1}>
|
|
{p.track.artist}
|
|
</Text>
|
|
</View>
|
|
<Text style={styles.time}>{timeAgo(p.playedAt)}</Text>
|
|
</Pressable>
|
|
))}
|
|
{credits.map((s) => (
|
|
<Text key={s} style={styles.credit} onPress={() => Linking.openURL(attribution[s]!)}>
|
|
Some plays via <Text style={{ textDecorationLine: 'underline' }}>{s === 'lastfm' ? 'Last.fm' : 'ListenBrainz'}</Text>
|
|
</Text>
|
|
))}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
row: { flexDirection: 'row', alignItems: 'center', gap: space.md, paddingVertical: space.sm },
|
|
divider: { borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: colors.border },
|
|
art: { width: 40, height: 40, borderRadius: radius.sm, backgroundColor: colors.surface2 },
|
|
artEmpty: { alignItems: 'center', justifyContent: 'center' },
|
|
title: { color: colors.text, fontWeight: '600', fontSize: 14 },
|
|
artist: { color: colors.muted, fontSize: 13 },
|
|
time: { color: colors.muted, fontSize: 12 },
|
|
credit: { color: colors.muted, fontSize: 12, marginTop: space.sm },
|
|
});
|