Add recently played to profiles

A play is recorded when a new track starts (pausing and resuming doesn't count; returning after 10+ minutes does). Profiles show the last 10, excluding the track playing now; 50 are kept per user. Recent plays are free on every plan; the paid flag is renamed to fullHistory. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MzFywujuH9TiuXbr9vjoX8
2026-10-03 16:02:38 -04:00
parent 87353ccca3
commit ece9c4fd64
14 changed files with 1147 additions and 11 deletions
@@ -0,0 +1,50 @@
+import { Image } from 'expo-image';
+import { Linking, Pressable, StyleSheet, Text, View } from 'react-native';
+import { openUrl, timeAgo, 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 }: { plays: RecentPlayDTO[]; preferred: StreamingService | null | undefined }) {
+  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>
+      ))}
+    </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 },
+});