mirror of
https://github.com/Boof2015/astra-mobile.git
synced 2026-08-19 04:06:43 +02:00
initial home screen
This commit is contained in:
Boof2015
+727
-44
@@ -1,50 +1,561 @@
|
||||
import { View, Pressable, StyleSheet } from 'react-native';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { Pressable, ScrollView, StyleSheet, View, type LayoutChangeEvent } from 'react-native';
|
||||
import { Image } from 'expo-image';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Screen } from '@/components/Screen';
|
||||
import { Text } from '@/components/Text';
|
||||
import { AstraLogo } from '@/components/AstraLogo';
|
||||
import { FormatBadges } from '@/components/FormatBadge';
|
||||
import { SpectrumCurve } from '@/components/SpectrumCurve';
|
||||
import { TrackRow } from '@/components/library/TrackRow';
|
||||
import { PlaylistRow } from '@/components/library/PlaylistRow';
|
||||
import { ScanProgress } from '@/components/library/ScanProgress';
|
||||
import { colors, fonts, radius, spacing } from '@/theme';
|
||||
import { playSample } from '@/audio/playbackController';
|
||||
import { SAMPLE_TRACKS } from '@/audio/sampleTracks';
|
||||
import { useLibraryStore } from '@/stores/libraryStore';
|
||||
import { usePlaylistStore } from '@/stores/playlistStore';
|
||||
import { usePlayerStore } from '@/stores/playerStore';
|
||||
import {
|
||||
playTracks,
|
||||
shuffleTracks,
|
||||
skipToNext,
|
||||
skipToPrevious,
|
||||
togglePlay,
|
||||
} from '@/audio/playbackController';
|
||||
import { dbTrackToTrack } from '@/library/trackAdapter';
|
||||
import { artworkUri } from '@/library/artwork';
|
||||
import { formatDuration } from '@/lib/format';
|
||||
import { useScopeActive } from '@/scope/scopeStore';
|
||||
import type { PlaybackState, Track } from '@/types/audio';
|
||||
import type { Album, DbTrack } from '@/types/library';
|
||||
|
||||
export default function HomeScreen() {
|
||||
const RECENT_ALBUM_LIMIT = 8;
|
||||
const RECENT_TRACK_LIMIT = 3;
|
||||
const PLAYLIST_LIMIT = 4;
|
||||
const PLAYER_CARD_MIN_HEIGHT = 174;
|
||||
const CURVE_POINTS = 64;
|
||||
|
||||
function chooseRandomAlbum(albums: Album[], currentKey?: string | null): string | null {
|
||||
if (albums.length === 0) return null;
|
||||
if (albums.length === 1) return albums[0].identity_key;
|
||||
|
||||
let next: string | null = currentKey ?? null;
|
||||
while (next === currentKey) {
|
||||
next = albums[Math.floor(Math.random() * albums.length)].identity_key;
|
||||
}
|
||||
return next;
|
||||
}
|
||||
|
||||
function albumMeta(album: Album, tracks: DbTrack[]): string {
|
||||
const duration = tracks.reduce((sum, track) => sum + track.duration, 0);
|
||||
return [
|
||||
album.year ? String(album.year) : null,
|
||||
`${album.track_count} ${album.track_count === 1 ? 'track' : 'tracks'}`,
|
||||
formatDuration(duration),
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' / ');
|
||||
}
|
||||
|
||||
function formatCount(count: number, noun: string): string {
|
||||
return `${count} ${count === 1 ? noun : `${noun}s`}`;
|
||||
}
|
||||
|
||||
function SectionHeader({
|
||||
title,
|
||||
trailing,
|
||||
actionLabel,
|
||||
onActionPress,
|
||||
}: {
|
||||
title: string;
|
||||
trailing?: string;
|
||||
actionLabel?: string;
|
||||
onActionPress?: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Screen>
|
||||
<View style={styles.header}>
|
||||
<AstraLogo size={36} />
|
||||
<Text style={styles.wordmark}>ASTRA</Text>
|
||||
</View>
|
||||
<Text variant="label" style={styles.tagline}>
|
||||
Audiophile player
|
||||
</Text>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text variant="heading">Quick start</Text>
|
||||
<Text variant="body" color={colors.textSecondary} style={styles.cardBody}>
|
||||
On-device library scanning lands next. For now, stream a test track to
|
||||
verify playback, background audio, and lock-screen controls.
|
||||
<View style={styles.sectionHeader}>
|
||||
<View style={styles.sectionTitleGroup}>
|
||||
<Text variant="heading" style={styles.sectionTitle}>
|
||||
{title}
|
||||
</Text>
|
||||
{trailing ? (
|
||||
<Text variant="label" numberOfLines={1}>
|
||||
{trailing}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
{onActionPress && actionLabel ? (
|
||||
<Pressable style={styles.seeAllButton} onPress={onActionPress} accessibilityRole="button">
|
||||
<Text variant="label" color={colors.accentText}>
|
||||
{actionLabel}
|
||||
</Text>
|
||||
<Ionicons name="chevron-forward" size={14} color={colors.accentText} />
|
||||
</Pressable>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
<View style={styles.badges}>
|
||||
<FormatBadges track={SAMPLE_TRACKS[0]} />
|
||||
function AlbumCover({ album, size }: { album: Album; size: number }) {
|
||||
return (
|
||||
<View style={[styles.albumArt, { width: size, height: size }]}>
|
||||
{album.artwork_hash ? (
|
||||
<Image
|
||||
source={{ uri: artworkUri(album.artwork_hash) }}
|
||||
style={styles.image}
|
||||
contentFit="cover"
|
||||
transition={120}
|
||||
/>
|
||||
) : (
|
||||
<AstraLogo size={Math.round(size * 0.36)} />
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function NowPlayingCard({
|
||||
track,
|
||||
playbackState,
|
||||
currentTime,
|
||||
duration,
|
||||
onOpen,
|
||||
}: {
|
||||
track: Track;
|
||||
playbackState: PlaybackState;
|
||||
currentTime: number;
|
||||
duration: number;
|
||||
onOpen: () => void;
|
||||
}) {
|
||||
const isPlaying = playbackState === 'playing';
|
||||
const isLoading = playbackState === 'loading';
|
||||
const progress = duration > 0 ? Math.min(1, currentTime / duration) : 0;
|
||||
const scopeActive = useScopeActive();
|
||||
const [cardSize, setCardSize] = useState({ width: 0, height: PLAYER_CARD_MIN_HEIGHT });
|
||||
|
||||
const onCardLayout = (event: LayoutChangeEvent) => {
|
||||
const { width, height } = event.nativeEvent.layout;
|
||||
setCardSize((prev) =>
|
||||
prev.width === width && prev.height === height ? prev : { width, height }
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.playerCard} onLayout={onCardLayout}>
|
||||
{scopeActive && cardSize.width > 0 ? (
|
||||
<View pointerEvents="none" style={styles.playerSpectrum}>
|
||||
<SpectrumCurve
|
||||
active={scopeActive}
|
||||
pointCount={CURVE_POINTS}
|
||||
analysisFrameMs={0}
|
||||
dbMin={-84}
|
||||
dbMax={-20}
|
||||
width={cardSize.width}
|
||||
height={cardSize.height}
|
||||
lineWidth={1.4}
|
||||
lineOpacity={0.38}
|
||||
fillOpacity={0.28}
|
||||
glow
|
||||
glowOpacity={0.07}
|
||||
/>
|
||||
</View>
|
||||
) : null}
|
||||
{scopeActive && cardSize.width > 0 ? (
|
||||
<View pointerEvents="none" style={styles.playerSpectrumVeil} />
|
||||
) : null}
|
||||
<Pressable style={styles.playerArt} onPress={onOpen} accessibilityRole="button">
|
||||
{track.artworkData ? (
|
||||
<Image source={{ uri: track.artworkData }} style={styles.image} contentFit="cover" />
|
||||
) : (
|
||||
<AstraLogo size={42} />
|
||||
)}
|
||||
</Pressable>
|
||||
<View style={styles.playerMeta}>
|
||||
<Text variant="label" color={colors.textTertiary}>
|
||||
NOW PLAYING
|
||||
</Text>
|
||||
<Text variant="heading" numberOfLines={1}>
|
||||
{track.title}
|
||||
</Text>
|
||||
<Text variant="body" color={colors.textSecondary} numberOfLines={1}>
|
||||
{track.album ? `${track.artist} / ${track.album}` : track.artist}
|
||||
</Text>
|
||||
<View style={styles.seekTrack}>
|
||||
<View style={[styles.seekFill, { width: `${progress * 100}%` }]} />
|
||||
</View>
|
||||
<View style={styles.placeholderControls}>
|
||||
<Pressable hitSlop={10} onPress={() => void skipToPrevious()}>
|
||||
<Ionicons name="play-skip-back" size={22} color={colors.textSecondary} />
|
||||
</Pressable>
|
||||
<Pressable hitSlop={10} onPress={() => void togglePlay()} style={styles.playCircle}>
|
||||
<Ionicons
|
||||
name={isLoading ? 'ellipsis-horizontal' : isPlaying ? 'pause' : 'play'}
|
||||
size={18}
|
||||
color={colors.bgPrimary}
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable hitSlop={10} onPress={() => void skipToNext()}>
|
||||
<Ionicons name="play-skip-forward" size={22} color={colors.textSecondary} />
|
||||
</Pressable>
|
||||
<Pressable hitSlop={10} onPress={onOpen}>
|
||||
<Ionicons name="expand-outline" size={21} color={colors.textTertiary} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function RecentlyAddedAlbum({
|
||||
album,
|
||||
onPress,
|
||||
}: {
|
||||
album: Album;
|
||||
onPress: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Pressable style={styles.recentAlbum} onPress={onPress} accessibilityRole="button">
|
||||
<AlbumCover album={album} size={112} />
|
||||
<Text variant="body" numberOfLines={1} style={styles.recentAlbumTitle}>
|
||||
{album.album}
|
||||
</Text>
|
||||
<Text variant="label" numberOfLines={1}>
|
||||
{album.artist}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
function RandomAlbumCard({
|
||||
album,
|
||||
tracks,
|
||||
onPlay,
|
||||
onShuffle,
|
||||
onReroll,
|
||||
onOpen,
|
||||
}: {
|
||||
album: Album;
|
||||
tracks: DbTrack[];
|
||||
onPlay: () => void;
|
||||
onShuffle: () => void;
|
||||
onReroll: () => void;
|
||||
onOpen: () => void;
|
||||
}) {
|
||||
const disabled = tracks.length === 0;
|
||||
|
||||
return (
|
||||
<View style={styles.randomCard}>
|
||||
<Pressable style={styles.randomMain} onPress={onOpen} accessibilityRole="button">
|
||||
<AlbumCover album={album} size={96} />
|
||||
<View style={styles.randomMeta}>
|
||||
<Text variant="label" color={colors.textTertiary}>
|
||||
RANDOM ALBUM
|
||||
</Text>
|
||||
<Text variant="heading" numberOfLines={2}>
|
||||
{album.album}
|
||||
</Text>
|
||||
<Text variant="body" color={colors.textSecondary} numberOfLines={1}>
|
||||
{album.artist}
|
||||
</Text>
|
||||
<Text variant="label" numberOfLines={1}>
|
||||
{albumMeta(album, tracks)}
|
||||
</Text>
|
||||
</View>
|
||||
<Pressable
|
||||
style={({ pressed }) => [styles.cta, pressed && styles.ctaPressed]}
|
||||
onPress={() => {
|
||||
void playSample();
|
||||
}}
|
||||
style={styles.reroll}
|
||||
onPress={onReroll}
|
||||
hitSlop={8}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Pick another random album"
|
||||
>
|
||||
<Ionicons name="play" size={20} color={colors.bgPrimary} />
|
||||
<Text style={styles.ctaText}>Play sample track</Text>
|
||||
<Ionicons name="shuffle" size={19} color={colors.textSecondary} />
|
||||
</Pressable>
|
||||
</Pressable>
|
||||
|
||||
<View style={styles.randomActions}>
|
||||
<Pressable
|
||||
style={[styles.primaryButton, disabled && styles.buttonDisabled]}
|
||||
disabled={disabled}
|
||||
onPress={onPlay}
|
||||
accessibilityRole="button"
|
||||
>
|
||||
<Ionicons name="play" size={16} color={colors.bgPrimary} />
|
||||
<Text variant="body" style={styles.primaryButtonText}>
|
||||
Play
|
||||
</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
style={[styles.secondaryButton, disabled && styles.buttonDisabled]}
|
||||
disabled={disabled}
|
||||
onPress={onShuffle}
|
||||
accessibilityRole="button"
|
||||
>
|
||||
<Ionicons name="shuffle" size={16} color={colors.accent} />
|
||||
<Text variant="body" color={colors.accent}>
|
||||
Shuffle
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyHomeCard({
|
||||
isScanning,
|
||||
scanError,
|
||||
onAddFolder,
|
||||
}: {
|
||||
isScanning: boolean;
|
||||
scanError: string | null;
|
||||
onAddFolder: () => void;
|
||||
}) {
|
||||
return (
|
||||
<View style={styles.emptyCard}>
|
||||
<Ionicons name="folder-open-outline" size={34} color={colors.textTertiary} />
|
||||
<View style={styles.emptyCopy}>
|
||||
<Text variant="heading">No music yet</Text>
|
||||
<Text variant="body" color={colors.textSecondary}>
|
||||
Add a local folder to fill Home with albums, history, favorites, and playlists.
|
||||
</Text>
|
||||
{scanError ? (
|
||||
<Text variant="caption" color={colors.warning} numberOfLines={2}>
|
||||
Scan problem: {scanError}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
<Pressable
|
||||
style={[styles.primaryButton, isScanning && styles.buttonDisabled]}
|
||||
disabled={isScanning}
|
||||
onPress={onAddFolder}
|
||||
accessibilityRole="button"
|
||||
>
|
||||
<Ionicons name="add" size={18} color={colors.bgPrimary} />
|
||||
<Text variant="body" style={styles.primaryButtonText}>
|
||||
Add folder
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomeScreen() {
|
||||
const router = useRouter();
|
||||
const tracks = useLibraryStore((s) => s.tracks);
|
||||
const albums = useLibraryStore((s) => s.albums);
|
||||
const recentlyPlayedTracks = useLibraryStore((s) => s.recentlyPlayedTracks);
|
||||
const isScanning = useLibraryStore((s) => s.isScanning);
|
||||
const scanError = useLibraryStore((s) => s.scanError);
|
||||
const addFolder = useLibraryStore((s) => s.addFolder);
|
||||
const playlists = usePlaylistStore((s) => s.playlists);
|
||||
const favoriteTracks = usePlaylistStore((s) => s.favoriteTracks);
|
||||
const currentTrack = usePlayerStore((s) => s.currentTrack);
|
||||
const currentPath = currentTrack?.path;
|
||||
const playbackState = usePlayerStore((s) => s.playbackState);
|
||||
const currentTime = usePlayerStore((s) => s.currentTime);
|
||||
const duration = usePlayerStore((s) => s.duration);
|
||||
|
||||
const [randomAlbumKey, setRandomAlbumKey] = useState<string | null>(null);
|
||||
const [randomSeed] = useState(() => Math.random());
|
||||
|
||||
const tracksByAlbum = useMemo(() => {
|
||||
const map = new Map<string, DbTrack[]>();
|
||||
for (const track of tracks) {
|
||||
const list = map.get(track.album_identity_key) ?? [];
|
||||
list.push(track);
|
||||
map.set(track.album_identity_key, list);
|
||||
}
|
||||
return map;
|
||||
}, [tracks]);
|
||||
|
||||
const recentlyAddedAlbums = useMemo(
|
||||
() => [...albums].sort((a, b) => b.latest_added_at - a.latest_added_at).slice(0, RECENT_ALBUM_LIMIT),
|
||||
[albums]
|
||||
);
|
||||
|
||||
const homePlaylists = useMemo(
|
||||
() =>
|
||||
[...playlists]
|
||||
.sort(
|
||||
(a, b) =>
|
||||
(b.last_played_at ?? b.updated_at ?? b.created_at) -
|
||||
(a.last_played_at ?? a.updated_at ?? a.created_at)
|
||||
)
|
||||
.slice(0, PLAYLIST_LIMIT),
|
||||
[playlists]
|
||||
);
|
||||
|
||||
const randomAlbum = useMemo(() => {
|
||||
if (!albums.length) return null;
|
||||
const selected = randomAlbumKey
|
||||
? albums.find((album) => album.identity_key === randomAlbumKey)
|
||||
: null;
|
||||
if (selected) return selected;
|
||||
return albums[Math.floor(randomSeed * albums.length) % albums.length];
|
||||
}, [albums, randomAlbumKey, randomSeed]);
|
||||
const randomTracks = randomAlbum ? (tracksByAlbum.get(randomAlbum.identity_key) ?? []) : [];
|
||||
const recentTracks = recentlyPlayedTracks.slice(0, RECENT_TRACK_LIMIT);
|
||||
const canExpandRecentTracks = recentlyPlayedTracks.length > RECENT_TRACK_LIMIT;
|
||||
const hasLibrary = tracks.length > 0;
|
||||
|
||||
const openAlbum = (album: Album) => {
|
||||
router.push({
|
||||
pathname: '/library/album/[key]',
|
||||
params: { key: album.identity_key },
|
||||
});
|
||||
};
|
||||
|
||||
const playTrackList = (list: DbTrack[], index = 0) => {
|
||||
if (list.length === 0) return;
|
||||
void playTracks(list.map(dbTrackToTrack), index);
|
||||
};
|
||||
|
||||
const playAlbum = (album: Album, shuffled = false) => {
|
||||
const albumTracks = tracksByAlbum.get(album.identity_key) ?? [];
|
||||
if (albumTracks.length === 0) return;
|
||||
if (shuffled) {
|
||||
void shuffleTracks(albumTracks.map(dbTrackToTrack));
|
||||
} else {
|
||||
void playTracks(albumTracks.map(dbTrackToTrack), 0);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Screen>
|
||||
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.content}>
|
||||
<View style={styles.header}>
|
||||
<AstraLogo size={36} />
|
||||
<Text style={styles.wordmark}>ASTRA</Text>
|
||||
</View>
|
||||
<Text variant="label" style={styles.tagline}>
|
||||
Audiophile player
|
||||
</Text>
|
||||
|
||||
<ScanProgress />
|
||||
|
||||
{!hasLibrary ? (
|
||||
<>
|
||||
{currentTrack ? (
|
||||
<View style={styles.topFeature}>
|
||||
<NowPlayingCard
|
||||
track={currentTrack}
|
||||
playbackState={playbackState}
|
||||
currentTime={currentTime}
|
||||
duration={duration}
|
||||
onOpen={() => router.push('/now-playing')}
|
||||
/>
|
||||
</View>
|
||||
) : null}
|
||||
<EmptyHomeCard
|
||||
isScanning={isScanning}
|
||||
scanError={scanError}
|
||||
onAddFolder={() => void addFolder()}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<View style={styles.topFeature}>
|
||||
{currentTrack ? (
|
||||
<NowPlayingCard
|
||||
track={currentTrack}
|
||||
playbackState={playbackState}
|
||||
currentTime={currentTime}
|
||||
duration={duration}
|
||||
onOpen={() => router.push('/now-playing')}
|
||||
/>
|
||||
) : randomAlbum ? (
|
||||
<RandomAlbumCard
|
||||
album={randomAlbum}
|
||||
tracks={randomTracks}
|
||||
onOpen={() => openAlbum(randomAlbum)}
|
||||
onPlay={() => playAlbum(randomAlbum)}
|
||||
onShuffle={() => playAlbum(randomAlbum, true)}
|
||||
onReroll={() => setRandomAlbumKey(chooseRandomAlbum(albums, randomAlbum.identity_key))}
|
||||
/>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<SectionHeader
|
||||
title="Recently Played"
|
||||
trailing={
|
||||
recentlyPlayedTracks.length > 0
|
||||
? formatCount(recentlyPlayedTracks.length, 'track')
|
||||
: undefined
|
||||
}
|
||||
actionLabel={
|
||||
canExpandRecentTracks ? 'See all' : undefined
|
||||
}
|
||||
onActionPress={
|
||||
canExpandRecentTracks ? () => router.push('/recently-played') : undefined
|
||||
}
|
||||
/>
|
||||
{recentTracks.length > 0 ? (
|
||||
<View style={styles.listBlock}>
|
||||
{recentTracks.map((track, index) => (
|
||||
<TrackRow
|
||||
key={track.path}
|
||||
track={track}
|
||||
active={track.path === currentPath}
|
||||
swipeToQueue={false}
|
||||
onPress={() => playTrackList(recentTracks, index)}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
) : (
|
||||
<Text variant="body" color={colors.textSecondary} style={styles.emptyLine}>
|
||||
No recent plays yet.
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<SectionHeader title="Recently Added" />
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.albumRail}
|
||||
>
|
||||
{recentlyAddedAlbums.map((album) => (
|
||||
<RecentlyAddedAlbum
|
||||
key={album.identity_key}
|
||||
album={album}
|
||||
onPress={() => openAlbum(album)}
|
||||
/>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<SectionHeader title="Favorites & Playlists" />
|
||||
<View style={styles.listBlock}>
|
||||
<PlaylistRow
|
||||
name="Favorites"
|
||||
trackCount={favoriteTracks.length}
|
||||
coverHash={favoriteTracks[0]?.artwork_hash ?? null}
|
||||
pinned
|
||||
onPress={() => router.push('/library/playlist/favorites')}
|
||||
/>
|
||||
{homePlaylists.map((playlist) => (
|
||||
<PlaylistRow
|
||||
key={playlist.id}
|
||||
name={playlist.name}
|
||||
trackCount={playlist.track_count}
|
||||
missingCount={playlist.missing_track_count}
|
||||
coverHash={playlist.auto_cover_hash}
|
||||
onPress={() => router.push(`/library/playlist/${playlist.id}`)}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</ScrollView>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
content: {
|
||||
paddingBottom: spacing.xxl,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
@@ -61,37 +572,209 @@ const styles = StyleSheet.create({
|
||||
marginTop: spacing.xs,
|
||||
letterSpacing: 1,
|
||||
},
|
||||
card: {
|
||||
topFeature: {
|
||||
marginTop: spacing.xxl,
|
||||
},
|
||||
playerCard: {
|
||||
minHeight: PLAYER_CARD_MIN_HEIGHT,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'stretch',
|
||||
gap: spacing.lg,
|
||||
padding: spacing.lg,
|
||||
borderRadius: radius.lg,
|
||||
borderRadius: radius.md,
|
||||
backgroundColor: colors.glassBg,
|
||||
borderColor: colors.glassBorder,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
cardBody: {
|
||||
playerSpectrum: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
playerSpectrumVeil: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(8, 10, 15, 0.28)',
|
||||
},
|
||||
playerArt: {
|
||||
width: 112,
|
||||
aspectRatio: 1,
|
||||
alignSelf: 'center',
|
||||
borderRadius: radius.md,
|
||||
backgroundColor: colors.bgTertiary,
|
||||
borderColor: colors.glassBorder,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
playerMeta: {
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
justifyContent: 'center',
|
||||
gap: spacing.xs,
|
||||
},
|
||||
seekTrack: {
|
||||
height: 3,
|
||||
borderRadius: 2,
|
||||
backgroundColor: colors.glassBorder,
|
||||
overflow: 'hidden',
|
||||
marginTop: spacing.sm,
|
||||
lineHeight: 20,
|
||||
},
|
||||
badges: {
|
||||
marginTop: spacing.md,
|
||||
seekFill: {
|
||||
width: '38%',
|
||||
height: 3,
|
||||
backgroundColor: colors.accent,
|
||||
},
|
||||
cta: {
|
||||
marginTop: spacing.lg,
|
||||
placeholderControls: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginTop: spacing.sm,
|
||||
maxWidth: 220,
|
||||
},
|
||||
playCircle: {
|
||||
width: 38,
|
||||
height: 38,
|
||||
borderRadius: 19,
|
||||
backgroundColor: colors.accent,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
section: {
|
||||
marginTop: spacing.xl,
|
||||
},
|
||||
sectionHeader: {
|
||||
minHeight: 32,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: spacing.md,
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
sectionTitleGroup: {
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
gap: 2,
|
||||
},
|
||||
sectionTitle: {
|
||||
flex: 1,
|
||||
},
|
||||
seeAllButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
paddingVertical: spacing.xs,
|
||||
paddingLeft: spacing.sm,
|
||||
},
|
||||
albumRail: {
|
||||
gap: spacing.md,
|
||||
paddingRight: spacing.lg,
|
||||
},
|
||||
recentAlbum: {
|
||||
width: 112,
|
||||
},
|
||||
recentAlbumTitle: {
|
||||
marginTop: spacing.sm,
|
||||
fontSize: 14,
|
||||
},
|
||||
albumArt: {
|
||||
borderRadius: radius.md,
|
||||
backgroundColor: colors.bgTertiary,
|
||||
borderColor: colors.glassBorder,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
image: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
randomCard: {
|
||||
borderRadius: radius.md,
|
||||
backgroundColor: colors.glassBg,
|
||||
borderColor: colors.glassBorder,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
randomMain: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing.md,
|
||||
padding: spacing.lg,
|
||||
},
|
||||
randomMeta: {
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
gap: 3,
|
||||
},
|
||||
reroll: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: colors.glassHighlight,
|
||||
},
|
||||
randomActions: {
|
||||
flexDirection: 'row',
|
||||
gap: spacing.sm,
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingBottom: spacing.lg,
|
||||
},
|
||||
primaryButton: {
|
||||
minHeight: 40,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: spacing.sm,
|
||||
gap: spacing.xs,
|
||||
backgroundColor: colors.accent,
|
||||
paddingVertical: spacing.md,
|
||||
borderRadius: radius.md,
|
||||
borderRadius: radius.pill,
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingVertical: spacing.sm,
|
||||
},
|
||||
ctaPressed: {
|
||||
backgroundColor: colors.accentHover,
|
||||
},
|
||||
ctaText: {
|
||||
fontFamily: fonts.sans.semibold,
|
||||
fontSize: 15,
|
||||
primaryButtonText: {
|
||||
color: colors.bgPrimary,
|
||||
fontFamily: fonts.sans.semibold,
|
||||
},
|
||||
secondaryButton: {
|
||||
minHeight: 40,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: spacing.xs,
|
||||
borderColor: colors.accent,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderRadius: radius.pill,
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingVertical: spacing.sm,
|
||||
},
|
||||
buttonDisabled: {
|
||||
opacity: 0.45,
|
||||
},
|
||||
listBlock: {
|
||||
backgroundColor: colors.bgPrimary,
|
||||
},
|
||||
emptyLine: {
|
||||
paddingVertical: spacing.md,
|
||||
},
|
||||
emptyCard: {
|
||||
marginTop: spacing.xl,
|
||||
padding: spacing.lg,
|
||||
borderRadius: radius.md,
|
||||
backgroundColor: colors.glassBg,
|
||||
borderColor: colors.glassBorder,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
gap: spacing.md,
|
||||
},
|
||||
emptyCopy: {
|
||||
gap: spacing.xs,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
import { Pressable, StyleSheet, View } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { FlashList } from '@shopify/flash-list';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Screen } from '@/components/Screen';
|
||||
import { Text } from '@/components/Text';
|
||||
import { TrackRow } from '@/components/library/TrackRow';
|
||||
import { colors, spacing } from '@/theme';
|
||||
import { useLibraryStore } from '@/stores/libraryStore';
|
||||
import { usePlayerStore } from '@/stores/playerStore';
|
||||
import { playTracks } from '@/audio/playbackController';
|
||||
import { dbTrackToTrack } from '@/library/trackAdapter';
|
||||
|
||||
function formatCount(count: number, noun: string): string {
|
||||
return `${count} ${count === 1 ? noun : `${noun}s`}`;
|
||||
}
|
||||
|
||||
function EmptyList() {
|
||||
return (
|
||||
<View style={styles.emptyState}>
|
||||
<Ionicons name="time-outline" size={24} color={colors.textTertiary} />
|
||||
<Text variant="body" color={colors.textSecondary} style={styles.emptyText}>
|
||||
No recent plays yet.
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RecentlyPlayedScreen() {
|
||||
const router = useRouter();
|
||||
const tracks = useLibraryStore((s) => s.recentlyPlayedTracks);
|
||||
const currentPath = usePlayerStore((s) => s.currentTrack?.path);
|
||||
|
||||
const playFrom = (index: number) => {
|
||||
if (tracks.length === 0) return;
|
||||
void playTracks(tracks.map(dbTrackToTrack), index);
|
||||
};
|
||||
|
||||
return (
|
||||
<Screen>
|
||||
<Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
|
||||
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
|
||||
<Text variant="body" color={colors.textSecondary}>
|
||||
Home
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
<View style={styles.heading}>
|
||||
<Text variant="title" numberOfLines={1}>
|
||||
Recently Played
|
||||
</Text>
|
||||
<Text variant="label">{formatCount(tracks.length, 'track')}</Text>
|
||||
</View>
|
||||
|
||||
<FlashList
|
||||
data={tracks}
|
||||
keyExtractor={(track) => track.path}
|
||||
showsVerticalScrollIndicator={false}
|
||||
renderItem={({ item, index }) => (
|
||||
<TrackRow
|
||||
track={item}
|
||||
active={item.path === currentPath}
|
||||
swipeToQueue={false}
|
||||
onPress={() => playFrom(index)}
|
||||
/>
|
||||
)}
|
||||
ListEmptyComponent={<EmptyList />}
|
||||
contentContainerStyle={styles.listContent}
|
||||
/>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
back: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
marginTop: spacing.md,
|
||||
marginBottom: spacing.lg,
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
heading: {
|
||||
gap: spacing.xs,
|
||||
marginBottom: spacing.lg,
|
||||
},
|
||||
listContent: {
|
||||
paddingBottom: spacing.xxl,
|
||||
},
|
||||
emptyState: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: spacing.sm,
|
||||
paddingVertical: spacing.xxl,
|
||||
},
|
||||
emptyText: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import {
|
||||
State,
|
||||
useActiveTrack,
|
||||
@@ -6,9 +6,19 @@ import {
|
||||
useProgress,
|
||||
} from 'react-native-track-player';
|
||||
import { usePlayerStore } from '@/stores/playerStore';
|
||||
import { useLibraryStore } from '@/stores/libraryStore';
|
||||
import type { PlaybackState } from '@/types/audio';
|
||||
import { rntpToTrack } from './sampleTracks';
|
||||
|
||||
const RECENT_PLAY_THRESHOLD_MS = 15_000;
|
||||
|
||||
interface RecentPlayCandidate {
|
||||
path: string | null;
|
||||
accumulatedMs: number;
|
||||
playingSinceMs: number | null;
|
||||
recorded: boolean;
|
||||
}
|
||||
|
||||
function mapState(state?: State): PlaybackState {
|
||||
switch (state) {
|
||||
case State.Playing:
|
||||
@@ -32,10 +42,18 @@ export function usePlaybackSync(): void {
|
||||
const activeTrack = useActiveTrack();
|
||||
const progress = useProgress(500);
|
||||
const playbackState = usePlaybackState();
|
||||
const mappedPlaybackState = mapState(playbackState.state);
|
||||
const recentPlayCandidate = useRef<RecentPlayCandidate>({
|
||||
path: null,
|
||||
accumulatedMs: 0,
|
||||
playingSinceMs: null,
|
||||
recorded: false,
|
||||
});
|
||||
|
||||
const setCurrentTrack = usePlayerStore((s) => s.setCurrentTrack);
|
||||
const setProgress = usePlayerStore((s) => s.setProgress);
|
||||
const setPlaybackState = usePlayerStore((s) => s.setPlaybackState);
|
||||
const recordTrackPlayed = useLibraryStore((s) => s.recordTrackPlayed);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentTrack(activeTrack ? rntpToTrack(activeTrack) : null);
|
||||
@@ -46,6 +64,49 @@ export function usePlaybackSync(): void {
|
||||
}, [progress.position, progress.duration, setProgress]);
|
||||
|
||||
useEffect(() => {
|
||||
setPlaybackState(mapState(playbackState.state));
|
||||
}, [playbackState.state, setPlaybackState]);
|
||||
setPlaybackState(mappedPlaybackState);
|
||||
}, [mappedPlaybackState, setPlaybackState]);
|
||||
|
||||
useEffect(() => {
|
||||
const path = activeTrack?.url ? String(activeTrack.url) : null;
|
||||
const now = Date.now();
|
||||
const candidate = recentPlayCandidate.current;
|
||||
|
||||
if (!path || mappedPlaybackState === 'stopped') {
|
||||
recentPlayCandidate.current = {
|
||||
path: null,
|
||||
accumulatedMs: 0,
|
||||
playingSinceMs: null,
|
||||
recorded: false,
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
if (candidate.path !== path) {
|
||||
candidate.path = path;
|
||||
candidate.accumulatedMs = 0;
|
||||
candidate.playingSinceMs = null;
|
||||
candidate.recorded = false;
|
||||
}
|
||||
|
||||
if (mappedPlaybackState !== 'playing') {
|
||||
if (candidate.playingSinceMs != null) {
|
||||
candidate.accumulatedMs += now - candidate.playingSinceMs;
|
||||
candidate.playingSinceMs = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (candidate.playingSinceMs == null) {
|
||||
candidate.playingSinceMs = now;
|
||||
}
|
||||
|
||||
const elapsedMs = candidate.accumulatedMs + (now - candidate.playingSinceMs);
|
||||
if (candidate.recorded || elapsedMs < RECENT_PLAY_THRESHOLD_MS) return;
|
||||
|
||||
candidate.recorded = true;
|
||||
void recordTrackPlayed(path).catch((err) => {
|
||||
console.warn('[library] playback history update failed', err);
|
||||
});
|
||||
}, [activeTrack?.url, mappedPlaybackState, progress.position, recordTrackPlayed]);
|
||||
}
|
||||
|
||||
@@ -32,9 +32,11 @@ interface TabBarProps {
|
||||
*/
|
||||
export function TabBar({ items, onPress }: TabBarProps) {
|
||||
const insets = useSafeAreaInsets();
|
||||
const homeFocused = items.some((item) => item.name === 'index' && item.focused);
|
||||
|
||||
return (
|
||||
<View style={styles.wrap}>
|
||||
<MiniPlayer />
|
||||
{!homeFocused ? <MiniPlayer /> : null}
|
||||
<View
|
||||
style={[
|
||||
styles.bar,
|
||||
|
||||
+33
-1
@@ -105,7 +105,8 @@ export function getAlbums(db: LibraryDatabase): Promise<Album[]> {
|
||||
MAX(COALESCE(album_artist, artist)) AS artist,
|
||||
MAX(year) AS year,
|
||||
MAX(artwork_hash) AS artwork_hash,
|
||||
COUNT(*) AS track_count
|
||||
COUNT(*) AS track_count,
|
||||
MAX(added_at) AS latest_added_at
|
||||
FROM tracks
|
||||
GROUP BY album_identity_key
|
||||
ORDER BY 3 COLLATE NOCASE, 2 COLLATE NOCASE
|
||||
@@ -141,6 +142,37 @@ export async function getTrackCount(db: LibraryDatabase): Promise<number> {
|
||||
return row?.count ?? 0;
|
||||
}
|
||||
|
||||
// --- Playback history --------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Record a local library play. The INSERT is sourced from `tracks`, so streamed
|
||||
* samples / external paths are ignored unless they are actually in the library.
|
||||
*/
|
||||
export async function markTrackPlayed(db: LibraryDatabase, path: string): Promise<boolean> {
|
||||
const result = await db.run(
|
||||
`INSERT INTO playback_history (track_path, last_played_at, play_count)
|
||||
SELECT path, ?, 1 FROM tracks WHERE path = ?
|
||||
ON CONFLICT(track_path) DO UPDATE SET
|
||||
last_played_at = excluded.last_played_at,
|
||||
play_count = playback_history.play_count + 1`,
|
||||
[Date.now(), path]
|
||||
);
|
||||
return result.changes > 0;
|
||||
}
|
||||
|
||||
export function getRecentlyPlayedTracks(
|
||||
db: LibraryDatabase,
|
||||
limit = 24
|
||||
): Promise<DbTrack[]> {
|
||||
return db.all<DbTrack>(
|
||||
`SELECT t.* FROM playback_history h
|
||||
JOIN tracks t ON t.path = h.track_path
|
||||
ORDER BY h.last_played_at DESC
|
||||
LIMIT ?`,
|
||||
[limit]
|
||||
);
|
||||
}
|
||||
|
||||
// --- Loudness (M4 normalization facts) ---------------------------------------
|
||||
|
||||
export interface TrackLoudness {
|
||||
|
||||
+13
-2
@@ -9,11 +9,12 @@
|
||||
// tags) measured for normalization; v8 clears any loudness measured by the earlier
|
||||
// ungated whole-file method so it re-measures with the fast gated subset method;
|
||||
// v9 adds ReplayGain peak columns + an `rg_scanned` sentinel so tag reading runs
|
||||
// once per track (and is retried if it ever failed), independent of loudness.
|
||||
// once per track (and is retried if it ever failed), independent of loudness;
|
||||
// v10 adds lightweight local playback history for Home.
|
||||
|
||||
import type { LibraryDatabase } from './database';
|
||||
|
||||
export const SCHEMA_VERSION = 9;
|
||||
export const SCHEMA_VERSION = 10;
|
||||
|
||||
// One statement per entry — op-sqlite executes single statements.
|
||||
const MIGRATIONS: readonly (readonly string[])[] = [
|
||||
@@ -141,6 +142,16 @@ const MIGRATIONS: readonly (readonly string[])[] = [
|
||||
`ALTER TABLE tracks ADD COLUMN replay_gain_album_peak REAL`,
|
||||
`ALTER TABLE tracks ADD COLUMN rg_scanned INTEGER NOT NULL DEFAULT 0`,
|
||||
],
|
||||
// v9 -> v10 — recently played facts. No FK so rows can survive temporary
|
||||
// folder removal; Home joins against tracks so missing files stay hidden.
|
||||
[
|
||||
`CREATE TABLE IF NOT EXISTS playback_history (
|
||||
track_path TEXT PRIMARY KEY NOT NULL,
|
||||
last_played_at INTEGER NOT NULL,
|
||||
play_count INTEGER NOT NULL DEFAULT 1
|
||||
)`,
|
||||
'CREATE INDEX IF NOT EXISTS idx_playback_history_last_played ON playback_history(last_played_at DESC)',
|
||||
],
|
||||
];
|
||||
|
||||
export async function migrate(db: LibraryDatabase): Promise<void> {
|
||||
|
||||
@@ -14,6 +14,7 @@ export interface ArtistAlbum {
|
||||
year: number | null;
|
||||
artwork_hash: string | null;
|
||||
track_count: number;
|
||||
latest_added_at: number;
|
||||
duration: number;
|
||||
}
|
||||
|
||||
@@ -77,6 +78,7 @@ function buildArtistAlbums(tracks: readonly DbTrack[]): ArtistAlbum[] {
|
||||
if (existing) {
|
||||
existing.track_count += 1;
|
||||
existing.duration += track.duration;
|
||||
existing.latest_added_at = Math.max(existing.latest_added_at, track.added_at);
|
||||
if (existing.year == null && track.year != null) existing.year = track.year;
|
||||
if (!existing.artwork_hash && track.artwork_hash) existing.artwork_hash = track.artwork_hash;
|
||||
continue;
|
||||
@@ -89,6 +91,7 @@ function buildArtistAlbums(tracks: readonly DbTrack[]): ArtistAlbum[] {
|
||||
year: track.year,
|
||||
artwork_hash: track.artwork_hash,
|
||||
track_count: 1,
|
||||
latest_added_at: track.added_at,
|
||||
duration: track.duration,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
import { create } from 'zustand';
|
||||
import type { Album, Artist, DbTrack, LibraryFolder } from '@/types/library';
|
||||
import { openLibraryDb } from '@/db/database';
|
||||
import { getAlbums, getAllTracks, getTrackCount } from '@/db/queries';
|
||||
import {
|
||||
getAlbums,
|
||||
getAllTracks,
|
||||
getRecentlyPlayedTracks,
|
||||
getTrackCount,
|
||||
markTrackPlayed,
|
||||
} from '@/db/queries';
|
||||
import { ensureArtworkThumbnails } from '@/library/artwork';
|
||||
import { buildArtistList } from '@/library/artistGrouping';
|
||||
import {
|
||||
@@ -36,6 +42,7 @@ const IDLE_PROGRESS: ScanProgressState = { phase: 'idle', processed: 0, total: 0
|
||||
interface LibraryStore {
|
||||
initialized: boolean;
|
||||
tracks: DbTrack[];
|
||||
recentlyPlayedTracks: DbTrack[];
|
||||
albums: Album[];
|
||||
artists: Artist[];
|
||||
folders: FolderWithCount[];
|
||||
@@ -48,6 +55,7 @@ interface LibraryStore {
|
||||
|
||||
initialize: () => Promise<void>;
|
||||
refresh: () => Promise<void>;
|
||||
recordTrackPlayed: (path: string) => Promise<void>;
|
||||
recomputeArtists: () => void;
|
||||
setViewMode: (mode: ViewMode) => void;
|
||||
setTrackSort: (sort: TrackSort) => void;
|
||||
@@ -78,6 +86,7 @@ export const useLibraryStore = create<LibraryStore>((set, get) => {
|
||||
return {
|
||||
initialized: false,
|
||||
tracks: [],
|
||||
recentlyPlayedTracks: [],
|
||||
albums: [],
|
||||
artists: [],
|
||||
folders: [],
|
||||
@@ -118,11 +127,12 @@ export const useLibraryStore = create<LibraryStore>((set, get) => {
|
||||
|
||||
refresh: async () => {
|
||||
const db = await openLibraryDb();
|
||||
const [tracks, albums, folders, totalTrackCount] = await Promise.all([
|
||||
const [tracks, albums, folders, totalTrackCount, recentlyPlayedTracks] = await Promise.all([
|
||||
getAllTracks(db),
|
||||
getAlbums(db),
|
||||
loadFolders(),
|
||||
getTrackCount(db),
|
||||
getRecentlyPlayedTracks(db),
|
||||
]);
|
||||
try {
|
||||
await ensureArtworkThumbnails(tracks.map((track) => track.artwork_hash));
|
||||
@@ -131,11 +141,19 @@ export const useLibraryStore = create<LibraryStore>((set, get) => {
|
||||
}
|
||||
// The artist list is derived in JS so it can honor the grouping mode.
|
||||
const artists = buildArtistList(tracks, useSettingsStore.getState().artistGroupingMode);
|
||||
set({ tracks, albums, artists, folders, totalTrackCount });
|
||||
set({ tracks, recentlyPlayedTracks, albums, artists, folders, totalTrackCount });
|
||||
// Playlist counts/missing states depend on tracks — keep them in step.
|
||||
await usePlaylistStore.getState().refresh();
|
||||
},
|
||||
|
||||
recordTrackPlayed: async (path) => {
|
||||
const db = await openLibraryDb();
|
||||
const recorded = await markTrackPlayed(db, path);
|
||||
if (!recorded) return;
|
||||
const recentlyPlayedTracks = await getRecentlyPlayedTracks(db);
|
||||
set({ recentlyPlayedTracks });
|
||||
},
|
||||
|
||||
// Rebuild the artist list from in-memory tracks (e.g. on grouping-mode change),
|
||||
// without re-querying SQLite.
|
||||
recomputeArtists: () =>
|
||||
|
||||
@@ -55,6 +55,8 @@ export interface Album {
|
||||
year: number | null;
|
||||
artwork_hash: string | null;
|
||||
track_count: number;
|
||||
/** Newest track import timestamp in this album, used by Home recently-added. */
|
||||
latest_added_at: number;
|
||||
}
|
||||
|
||||
export interface Artist {
|
||||
|
||||
Reference in New Issue
Block a user