mrleo1nidandClaude Opus 5.5
ed063d3763
ci / contract / contract (сгенерированный код совпадает с openapi.yaml) (push) Successful in 1m30s
ci / mobile / mobile (Metro-бандл Android) (push) Successful in 2m57s
ci / ts / ts (packages + web) (push) Successful in 1m16s
ci / docker / docker (образы собираются — их сервер собирает сам при обновлении) (push) Successful in 33s
- My Wave is rendered with react-native-skia on the UI thread; physics and colour helpers moved to @pipu/core (wave-anim) and shared with web. - Full-screen player honours ui_prefs.mobile_player (cover / wave). - Theme switching (dark / light / system) via a theme context and useColors() across all screens. - Profile: theme, wave variant, player view, sound quality sheet (Wi-Fi / mobile / downloads), recent-tracks cache clearing on next cold start, and a change-password sheet. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
69 lines
2.9 KiB
TypeScript
69 lines
2.9 KiB
TypeScript
import { unwrap } from '@pipu/core';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { FlatList, Pressable, Text, View } from 'react-native';
|
|
|
|
import { useSession } from '../../lib/session';
|
|
import { downloads } from '../../offline/downloads';
|
|
import { player } from '../../player/controller';
|
|
import { usePlayerState } from '../../player/hooks';
|
|
import { useColors } from '../../theme';
|
|
import { Button, Cover, Icon, Screen, TrackRow, formatDuration, useErrorText } from '../../ui/kit';
|
|
|
|
export default function AlbumScreen() {
|
|
const colors = useColors();
|
|
const { id } = useLocalSearchParams<{ id: string }>();
|
|
const { t } = useTranslation();
|
|
const router = useRouter();
|
|
const session = useSession();
|
|
const current = usePlayerState().track;
|
|
const errorText = useErrorText();
|
|
const album = useQuery({
|
|
queryKey: ['album', id],
|
|
queryFn: async () => unwrap(await session.client.GET('/api/v1/albums/{id}', { params: { path: { id } } })),
|
|
});
|
|
const a = album.data;
|
|
const ctx = { type: 'album' as const, id };
|
|
|
|
return (
|
|
<Screen>
|
|
<FlatList
|
|
data={a?.tracks ?? []}
|
|
keyExtractor={(tr) => tr.id}
|
|
ListHeaderComponent={
|
|
<View style={{ padding: 16, gap: 12, alignItems: 'center' }}>
|
|
<Pressable onPress={() => router.back()} style={{ alignSelf: 'flex-start' }} accessibilityRole="button" accessibilityLabel={t('form.close')}>
|
|
<Icon name="arrow-back" color={colors.text} />
|
|
</Pressable>
|
|
{album.error ? <Text style={{ color: colors.danger }}>{errorText(album.error)}</Text> : null}
|
|
{a && (
|
|
<>
|
|
<Cover album={a} size={220} />
|
|
<Text style={{ color: colors.text, fontSize: 22, fontWeight: '700', textAlign: 'center' }}>{a.title}</Text>
|
|
<Pressable onPress={() => router.push(`/artist/${a.artist.id}`)}>
|
|
<Text style={{ color: colors.text2 }}>
|
|
{a.artist.name}
|
|
{a.year ? ` · ${a.year}` : ''} · {formatDuration(a.duration_ms)}
|
|
</Text>
|
|
</Pressable>
|
|
<Button title={t('player.play')} icon="play-arrow" onPress={() => void player.playList(a.tracks, 0, ctx)} />
|
|
<Button title={t('mobile.dl_album')} variant="secondary" icon="download" onPress={() => void downloads.enqueue(a.tracks)} />
|
|
</>
|
|
)}
|
|
</View>
|
|
}
|
|
renderItem={({ item, index }) => (
|
|
<TrackRow
|
|
track={item}
|
|
numbered={item.track_no ?? index + 1}
|
|
current={current?.id === item.id}
|
|
onPress={() => void player.playList(a?.tracks ?? [], index, ctx)}
|
|
onLike={() => void player.react(item, item.reaction === 'like' ? null : 'like').then(() => album.refetch())}
|
|
/>
|
|
)}
|
|
/>
|
|
</Screen>
|
|
);
|
|
}
|