astra/astra-mobile
1
0
Fork 0
mirror of https://github.com/Boof2015/astra-mobile.git synced 2026-08-12 05:10:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

optimize further

Browse Source
This commit is contained in:
Boof2015
2026-07-12 12:16:52 -04:00
parent 5cc1099853
commit 804e47a7ca
69 changed files with 588 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(tabs)/eq.tsx
+6 -4
View File
@@ -38,6 +38,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { isWideWindow } from '@/theme/adaptive';
import { useEQStore } from '@/stores/eqStore';
import { useScopeActive } from '@/scope/scopeStore';
@@ -75,6 +76,7 @@ const BAND_TYPES: EQBandType[] = ['lowshelf', 'peaking', 'highshelf', 'highpass'
export default function EQScreen() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const eq = useEQStore();
@@ -217,7 +219,7 @@ export default function EQScreen() {
};
const presetRowEl = (
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.presetRow, isWide && styles.sideItem]}
onPress={() => setSheet('preset')}
>
@@ -285,7 +287,7 @@ export default function EQScreen() {
onChange={eq.setPreamp}
/>
</View>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.eqToggle, eq.enabled && styles.eqToggleOn]}
onPress={eq.toggleEnabled}
>
@@ -321,10 +323,10 @@ export default function EQScreen() {
</Text>
</View>
<View style={styles.headerActions}>
<Pressable style={styles.iconButton} onPress={() => setSheet('save')} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} style={styles.iconButton} onPress={() => setSheet('save')} hitSlop={8}>
<Ionicons name="save-outline" size={20} color={colors.textSecondary} />
</Pressable>
<Pressable style={styles.iconButton} onPress={() => setSheet('overflow')} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} style={styles.iconButton} onPress={() => setSheet('overflow')} hitSlop={8}>
<Ionicons name="ellipsis-vertical" size={20} color={colors.textSecondary} />
</Pressable>
</View>
src/app/(tabs)/index.tsx
+21 -11
View File
@@ -28,10 +28,12 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { rgbaFromHex } from '@/theme/colorUtils';
import { useLibraryStore } from '@/stores/libraryStore';
import { usePlaylistStore } from '@/stores/playlistStore';
import { usePlayerStore } from '@/stores/playerStore';
import { usePlayerUiStore } from '@/stores/playerUiStore';
import { useSearchStore } from '@/stores/searchStore';
import {
playTracks,
@@ -93,6 +95,7 @@ function SectionHeader({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
return (
<View style={styles.sectionHeader}>
<View style={styles.sectionTitleGroup}>
@@ -106,7 +109,7 @@ function SectionHeader({
) : null}
</View>
{onActionPress && actionLabel ? (
<Pressable style={styles.seeAllButton} onPress={onActionPress} accessibilityRole="button">
<Pressable style={styles.seeAllButton} android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onActionPress} accessibilityRole="button">
<Text variant="label" color={colors.accentText}>
{actionLabel}
</Text>
@@ -160,6 +163,7 @@ function NowPlayingCard({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
const isPlaying = playbackState === 'playing';
const isLoading = playbackState === 'loading';
const scopeActive = useScopeActive();
@@ -194,7 +198,7 @@ function NowPlayingCard({
{scopeActive && cardSize.width > 0 ? (
<View pointerEvents="none" style={styles.playerSpectrumVeil} />
) : null}
<Pressable style={styles.playerArt} onPress={onOpen} accessibilityRole="button">
<Pressable style={styles.playerArt} android_ripple={ripple.tile} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onOpen} accessibilityRole="button">
{track.artworkData ? (
<Image source={{ uri: track.artworkData }} style={styles.image} contentFit="cover" />
) : (
@@ -213,20 +217,20 @@ function NowPlayingCard({
</Text>
<NowPlayingSeekStrip />
<View style={styles.placeholderControls}>
<Pressable hitSlop={10} onPress={() => void skipToPrevious()}>
<Pressable hitSlop={10} android_ripple={ripple.icon(20)} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={() => void skipToPrevious()}>
<Ionicons name="play-skip-back" size={22} color={colors.textSecondary} />
</Pressable>
<Pressable hitSlop={10} onPress={() => void togglePlay()} style={styles.playCircle}>
<Pressable hitSlop={10} onPress={() => void togglePlay()} style={styles.playCircle} android_ripple={ripple.onAccent()} unstable_pressDelay={SCROLL_PRESS_DELAY}>
<Ionicons
name={isLoading ? 'ellipsis-horizontal' : isPlaying ? 'pause' : 'play'}
size={18}
color={colors.bgPrimary}
/>
</Pressable>
<Pressable hitSlop={10} onPress={() => void skipToNext()}>
<Pressable hitSlop={10} android_ripple={ripple.icon(20)} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={() => void skipToNext()}>
<Ionicons name="play-skip-forward" size={22} color={colors.textSecondary} />
</Pressable>
<Pressable hitSlop={10} onPress={onOpen}>
<Pressable hitSlop={10} android_ripple={ripple.icon(20)} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onOpen}>
<Ionicons name="expand-outline" size={21} color={colors.textTertiary} />
</Pressable>
</View>
@@ -243,8 +247,9 @@ function RecentlyAddedAlbum({
onPress: () => void;
}) {
const styles = useStyles();
const ripple = useRipple();
return (
<Pressable style={styles.recentAlbum} onPress={onPress} accessibilityRole="button">
<Pressable style={styles.recentAlbum} android_ripple={ripple.tile} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onPress} accessibilityRole="button">
<AlbumCover album={album} size={112} />
<Text variant="body" numberOfLines={1} style={styles.recentAlbumTitle}>
{album.album}
@@ -273,11 +278,12 @@ function RandomAlbumCard({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
const disabled = tracks.length === 0;
return (
<View style={styles.randomCard}>
<Pressable style={styles.randomMain} onPress={onOpen} accessibilityRole="button">
<Pressable style={styles.randomMain} android_ripple={ripple.tile} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onOpen} accessibilityRole="button">
<AlbumCover album={album} size={96} />
<View style={styles.randomMeta}>
<Text variant="label" color={colors.textTertiary}>
@@ -294,7 +300,7 @@ function RandomAlbumCard({
</Text>
</View>
<Pressable
style={styles.reroll}
style={styles.reroll} android_ripple={ripple.icon(20)} unstable_pressDelay={SCROLL_PRESS_DELAY}
onPress={onReroll}
hitSlop={8}
accessibilityRole="button"
@@ -306,6 +312,7 @@ function RandomAlbumCard({
<View style={styles.randomActions}>
<Pressable
android_ripple={ripple.onAccent()} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={[styles.primaryButton, disabled && styles.buttonDisabled]}
disabled={disabled}
onPress={onPlay}
@@ -317,6 +324,7 @@ function RandomAlbumCard({
</Text>
</Pressable>
<Pressable
android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={[styles.secondaryButton, disabled && styles.buttonDisabled]}
disabled={disabled}
onPress={onShuffle}
@@ -341,6 +349,7 @@ function EmptyHomeCard({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
return (
<View style={styles.emptyCard}>
<Ionicons name="folder-open-outline" size={34} color={colors.textTertiary} />
@@ -356,6 +365,7 @@ function EmptyHomeCard({
) : null}
</View>
<Pressable
android_ripple={ripple.onAccent()} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.primaryButton}
onPress={onManageFolders}
accessibilityRole="button"
@@ -486,7 +496,7 @@ export default function HomeScreen() {
<NowPlayingCard
track={currentTrack}
playbackState={playbackState}
onOpen={() => router.push('/now-playing')}
onOpen={() => usePlayerUiStore.getState().openPlayer()}
/>
</View>
) : null}
@@ -502,7 +512,7 @@ export default function HomeScreen() {
<NowPlayingCard
track={currentTrack}
playbackState={playbackState}
onOpen={() => router.push('/now-playing')}
onOpen={() => usePlayerUiStore.getState().openPlayer()}
/>
) : randomAlbum ? (
<RandomAlbumCard
src/app/(tabs)/library/artist/[name].tsx
+5 -2
View File
@@ -26,6 +26,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import type { Palette } from '@/theme/palettes';
import { useLibraryStore } from '@/stores/libraryStore';
import { usePlayerStore } from '@/stores/playerStore';
@@ -291,6 +292,7 @@ function SectionHeader({
onPress?: () => void;
}) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
return (
<View style={styles.sectionHeader}>
@@ -303,7 +305,7 @@ function SectionHeader({
</Text>
</View>
{onPress ? (
<Pressable style={styles.seeAllButton} onPress={onPress} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.seeAllButton} onPress={onPress} accessibilityRole="button">
<Text variant="label" color={colors.accentText}>
See all
</Text>
@@ -322,6 +324,7 @@ function AlbumRail({
onAlbumPress: (album: ArtistAlbum) => void;
}) {
const styles = useStyles();
const ripple = useRipple();
return (
<ScrollView
horizontal
@@ -329,7 +332,7 @@ function AlbumRail({
contentContainerStyle={styles.albumRail}
>
{albums.map((album) => (
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
key={album.identity_key}
style={styles.albumCard}
onPress={() => onAlbumPress(album)}
src/app/(tabs)/library/artist/[name]/albums.tsx
+3 -1
View File
@@ -12,12 +12,14 @@ import { Text } from '@/components/Text';
import { AlbumGridItem } from '@/components/library/AlbumGridItem';
import { spacing } from '@/theme';
import { useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { useLibraryStore } from '@/stores/libraryStore';
import { useSettingsStore } from '@/stores/settingsStore';
import { buildArtistDetail } from '@/library/artistDetail';
export default function ArtistAlbumsScreen() {
const colors = useColors();
const ripple = useRipple();
const router = useRouter();
const { name = 'Artist' } = useLocalSearchParams<{ name: string }>();
const allTracks = useLibraryStore((s) => s.tracks);
@@ -30,7 +32,7 @@ export default function ArtistAlbumsScreen() {
return (
<Screen>
<Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary} numberOfLines={1}>
{name}
src/app/(tabs)/library/artist/[name]/appearances.tsx
+3 -1
View File
@@ -13,6 +13,7 @@ import { TrackRow } from '@/components/library/TrackRow';
import { TrackActionsSheet } from '@/components/library/TrackActionsSheet';
import { spacing } from '@/theme';
import { useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { useLibraryStore } from '@/stores/libraryStore';
import { usePlayerStore } from '@/stores/playerStore';
import { useSettingsStore } from '@/stores/settingsStore';
@@ -23,6 +24,7 @@ import type { DbTrack } from '@/types/library';
export default function ArtistAppearancesScreen() {
const colors = useColors();
const ripple = useRipple();
const router = useRouter();
const { name = 'Artist' } = useLocalSearchParams<{ name: string }>();
const allTracks = useLibraryStore((s) => s.tracks);
@@ -43,7 +45,7 @@ export default function ArtistAppearancesScreen() {
return (
<Screen>
<Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary} numberOfLines={1}>
{name}
src/app/(tabs)/library/artist/[name]/songs.tsx
+3 -1
View File
@@ -13,6 +13,7 @@ import { TrackRow } from '@/components/library/TrackRow';
import { TrackActionsSheet } from '@/components/library/TrackActionsSheet';
import { spacing } from '@/theme';
import { useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { useLibraryStore } from '@/stores/libraryStore';
import { usePlayerStore } from '@/stores/playerStore';
import { useSettingsStore } from '@/stores/settingsStore';
@@ -23,6 +24,7 @@ import type { DbTrack } from '@/types/library';
export default function ArtistSongsScreen() {
const colors = useColors();
const ripple = useRipple();
const router = useRouter();
const { name = 'Artist' } = useLocalSearchParams<{ name: string }>();
const allTracks = useLibraryStore((s) => s.tracks);
@@ -43,7 +45,7 @@ export default function ArtistSongsScreen() {
return (
<Screen>
<Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary} numberOfLines={1}>
{name}
src/app/(tabs)/library/index.tsx
+5 -3
View File
@@ -39,6 +39,7 @@ import {
} from '@/components/search/PullSearchGesture';
import { spacing } from '@/theme';
import { useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { useLibraryStore } from '@/stores/libraryStore';
import { usePlayerStore } from '@/stores/playerStore';
import { useSearchStore } from '@/stores/searchStore';
@@ -77,6 +78,7 @@ const ARTIST_SORT_OPTIONS: ArtistSort[] = ['name', 'track_count'];
export default function LibraryScreen() {
const colors = useColors();
const ripple = useRipple();
const router = useRouter();
const viewMode = useLibraryStore((s) => s.viewMode);
const setViewMode = useLibraryStore((s) => s.setViewMode);
@@ -244,7 +246,7 @@ export default function LibraryScreen() {
Library
</Text>
{!isEmpty ? (
<Pressable
<Pressable android_ripple={ripple.bounded}
hitSlop={8}
onPress={() => openQuickSearch()}
accessibilityRole="button"
@@ -281,14 +283,14 @@ export default function LibraryScreen() {
<Text variant="label">
{selectedIds.size} selected
</Text>
<Pressable onPress={exitSelection} hitSlop={8} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} onPress={exitSelection} hitSlop={8} accessibilityRole="button">
<Text variant="label" color={colors.accentText}>
Cancel
</Text>
</Pressable>
</View>
) : sortable ? (
<Pressable
<Pressable android_ripple={ripple.bounded}
style={styles.sortTrigger}
onPress={() => setSortSheetOpen(true)}
accessibilityRole="button"
src/app/(tabs)/library/playlist/[id].tsx
+5 -2
View File
@@ -27,6 +27,7 @@ import { TextPromptModal } from '@/components/sheets/TextPromptModal';
import { CollapsingHeader, useDetailCollapse } from '@/components/library/CollapsingDetail';
import { spacing } from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { usePlaylistStore } from '@/stores/playlistStore';
import { usePlayerStore } from '@/stores/playerStore';
import { playTracks, shuffleTracks } from '@/audio/playbackController';
@@ -54,9 +55,10 @@ function basename(path: string): string {
function MissingRow({ entry, onLongPress }: { entry: PlaylistTrackEntry; onLongPress: () => void }) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
return (
<Pressable style={styles.missingRow} onLongPress={onLongPress} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.missingRow} onLongPress={onLongPress} accessibilityRole="button">
<View style={styles.missingMeta}>
<Text variant="body" numberOfLines={1} color={colors.textTertiary}>
{entry.fallback_title ?? basename(entry.track_path)}
@@ -74,6 +76,7 @@ type Prompt = { kind: 'rename'; playlist: Playlist } | null;
export default function PlaylistScreen() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const { id } = useLocalSearchParams<{ id: string }>();
@@ -283,7 +286,7 @@ export default function PlaylistScreen() {
heroMeta={<Text variant="label">{meta}</Text>}
heroExtra={
isDynamic && playlistId != null ? (
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.editRules}
onPress={() =>
router.push({
src/app/(tabs)/library/playlist/edit-dynamic.tsx
+17 -12
View File
@@ -27,6 +27,7 @@ import {
} from '@/components/sheets/AppSheet';
import { fonts, fontSize, radius, spacing } from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { usePlaylistStore } from '@/stores/playlistStore';
import {
DYNAMIC_PLAYLIST_PRESETS,
@@ -327,15 +328,16 @@ function DraftActions({
onApply: () => void;
}) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
return (
<View style={styles.sheetActions}>
<Pressable style={[styles.sheetButton, styles.cancelButton]} onPress={onCancel} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} style={[styles.sheetButton, styles.cancelButton]} onPress={onCancel} accessibilityRole="button">
<Text variant="label" color={colors.textSecondary}>
Cancel
</Text>
</Pressable>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.sheetButton, styles.applyButton, disabled && styles.applyDisabled]}
disabled={disabled}
onPress={onApply}
@@ -529,6 +531,7 @@ function ConditionEditorSheet({
onApply: () => void;
}) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const draft = target.draft;
const error = validateCondition(draft);
@@ -536,7 +539,7 @@ function ConditionEditorSheet({
return (
<AppSheet onClose={onCancel}>
<AppSheetTitle title={target.mode === 'new' ? 'Add filter' : 'Edit filter'} />
<Pressable style={styles.sheetSelectRow} onPress={onChangeField} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} style={styles.sheetSelectRow} onPress={onChangeField} accessibilityRole="button">
<View style={styles.sheetSelectText}>
<Text variant="caption" color={colors.textTertiary}>
FIELD
@@ -568,7 +571,7 @@ function ConditionEditorSheet({
<View style={styles.conditionSheetFooter}>
{target.mode === 'edit' ? (
<Pressable style={styles.removeButton} onPress={onRemove} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} style={styles.removeButton} onPress={onRemove} accessibilityRole="button">
<Ionicons name="trash-outline" size={17} color={colors.warning} />
<Text variant="label" color={colors.warning}>
Remove
@@ -713,11 +716,12 @@ function FilterCard({
onRemove: () => void;
}) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const option = fieldOptionForKey(getConditionFieldKey(condition));
return (
<Pressable style={styles.ruleCard} onPress={onPress} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} style={styles.ruleCard} onPress={onPress} accessibilityRole="button">
<View style={styles.cardIcon}>
<Ionicons name={option?.icon ?? 'options-outline'} size={18} color={colors.accent} />
</View>
@@ -729,7 +733,7 @@ function FilterCard({
{fieldGroupLabel(condition)}
</Text>
</View>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={styles.cardRemove}
onPress={onRemove}
hitSlop={8}
@@ -744,6 +748,7 @@ function FilterCard({
export default function DynamicPlaylistEditorScreen() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const { id } = useLocalSearchParams<{ id?: string }>();
@@ -1036,7 +1041,7 @@ export default function DynamicPlaylistEditorScreen() {
>
<Screen padded={false}>
<View style={styles.header}>
<Pressable
<Pressable android_ripple={ripple.bounded}
onPress={() => router.back()}
hitSlop={8}
style={styles.headerButton}
@@ -1080,7 +1085,7 @@ export default function DynamicPlaylistEditorScreen() {
contentContainerStyle={styles.presetRow}
>
{DYNAMIC_PLAYLIST_PRESETS.map((preset) => (
<Pressable
<Pressable android_ripple={ripple.bounded}
key={preset.id}
style={styles.presetChip}
onPress={() => applyPreset(preset.rules)}
@@ -1100,7 +1105,7 @@ export default function DynamicPlaylistEditorScreen() {
<Text variant="caption" style={styles.sectionLabel}>
FILTERS
</Text>
<Pressable style={styles.inlineAction} onPress={() => openFieldPicker('new')} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} style={styles.inlineAction} onPress={() => openFieldPicker('new')} accessibilityRole="button">
<Ionicons name="add" size={16} color={colors.accent} />
<Text variant="label" color={colors.accent}>
Add filter
@@ -1133,7 +1138,7 @@ export default function DynamicPlaylistEditorScreen() {
<Text variant="caption" style={styles.sectionLabel}>
ORDER
</Text>
<Pressable style={styles.sortCard} onPress={openSortSheet} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} style={styles.sortCard} onPress={openSortSheet} accessibilityRole="button">
<View style={styles.cardIcon}>
<Ionicons name="swap-vertical" size={18} color={colors.accent} />
</View>
@@ -1161,7 +1166,7 @@ export default function DynamicPlaylistEditorScreen() {
{status.label}
</Text>
</View>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.previewButton, normalizedRulesError !== null && styles.disabled]}
disabled={normalizedRulesError !== null}
onPress={() => setSheet({ kind: 'preview' })}
@@ -1172,7 +1177,7 @@ export default function DynamicPlaylistEditorScreen() {
Preview
</Text>
</Pressable>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.saveButton, saveDisabled && styles.disabled]}
disabled={saveDisabled}
onPress={save}
src/app/+native-intent.ts
+2 -2
View File
@@ -1,6 +1,6 @@
import {
getNotificationClickRedirectPath,
isNotificationClickPath,
resolveNotificationClick,
} from '@/audio/notificationIntent';
import { getEQPresetShareRedirectPath } from '@/audio/eqShareIntent';
@@ -10,7 +10,7 @@ type RedirectSystemPathEvent = {
};
export async function redirectSystemPath({ path }: RedirectSystemPathEvent): Promise<string> {
if (isNotificationClickPath(path)) return getNotificationClickRedirectPath();
if (isNotificationClickPath(path)) return resolveNotificationClick();
const eqShareRedirect = getEQPresetShareRedirectPath(path);
if (eqShareRedirect) return eqShareRedirect;
src/app/_layout.tsx
+10 -13
View File
@@ -17,6 +17,7 @@ import {
JetBrainsMono_500Medium,
} from '@expo-google-fonts/jetbrains-mono';
import { usePlaybackSync } from '@/audio/usePlaybackSync';
import { NowPlayingHost } from '@/components/player/NowPlayingHost';
import { QuickSearchOverlay } from '@/components/search/QuickSearchOverlay';
import { useScopeLifecycle } from '@/scope/useScopeLifecycle';
import { useLibraryStore } from '@/stores/libraryStore';
@@ -45,10 +46,12 @@ import { useOnboardingStore } from '@/stores/onboardingStore';
import { OnboardingFlow } from '@/components/onboarding/OnboardingFlow';
import { useTheme } from '@/theme/themed';
// Anchor the root stack at the tabs so a deep link straight to a top-level route (the
// widget/notification opening `now-playing`, or `recently-played`) builds `[(tabs), route]`
// instead of just `[route]`. Without this, dismissing the now-playing modal pops to an empty
// stack → blank screen. Only affects deep-link/launch ordering; normal nav is unchanged.
// Anchor the root stack at the tabs so a deep link straight to a top-level route
// (the widget's `recently-played`, the notification-click redirect) builds
// `[(tabs), route]` instead of just `[route]` — backing out of a deep-linked
// route must never land on an empty stack. Only affects deep-link/launch
// ordering; normal nav is unchanged. (Now-playing itself is no longer a route —
// it's the store-gated NowPlayingHost overlay.)
export const unstable_settings = {
initialRouteName: '(tabs)',
};
@@ -357,18 +360,12 @@ export default function RootLayout() {
}}
>
<Stack.Screen name="(tabs)" />
<Stack.Screen
name="now-playing"
options={{
presentation: 'transparentModal',
animation: 'none',
gestureEnabled: false,
contentStyle: { backgroundColor: 'transparent' },
}}
/>
</Stack>
{onboardingComplete ? (
<>
{/* Always-mounted player overlay (store-gated); open/close is a pure
UI-thread slide with zero mount cost after the first mount. */}
<NowPlayingHost />
<QuickSearchOverlay />
<SyncConflictPrompt />
</>
src/app/desktop-remote.tsx
+22 -12
View File
@@ -27,8 +27,10 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { isWideWindow, WIDE_MIN_WIDTH } from '@/theme/adaptive';
import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
import { usePlayerUiStore } from '@/stores/playerUiStore';
import type { DesktopRemoteDiscoveredDesktop } from '@/types/desktopRemote';
// Layout mirrors now-playing's adaptive pattern (minus the scope stage): a
@@ -189,9 +191,10 @@ function DiscoveredDesktopRow({ desktop, onPair, disabled }: {
disabled: boolean;
}) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
return (
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.discoveredRow, disabled && styles.buttonDisabled]}
onPress={() => onPair(desktop)}
disabled={disabled}
@@ -219,6 +222,7 @@ function DiscoveredDesktopRow({ desktop, onPair, disabled }: {
export default function DesktopRemoteScreen() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const { pair } = useLocalSearchParams<{ pair?: string }>();
@@ -390,7 +394,7 @@ export default function DesktopRemoteScreen() {
maxLength={6}
textContentType="oneTimeCode"
/>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[
styles.primaryButton,
(normalizedPinInput.length !== 6 || !pinPairingActive) && styles.buttonDisabled,
@@ -416,7 +420,7 @@ export default function DesktopRemoteScreen() {
Open Astra Desktop settings, enable Phone Remote, then scan or paste the pairing link.
</Text>
<View style={styles.actionRow}>
<Pressable style={styles.primaryButton} onPress={() => router.push('/desktop-remote/scan' as never)}>
<Pressable android_ripple={ripple.bounded} style={styles.primaryButton} onPress={() => router.push('/desktop-remote/scan' as never)}>
<Ionicons name="scan" size={18} color={colors.accentTextStrong} />
<Text variant="body" color={colors.accentTextStrong}>
Scan QR
@@ -433,7 +437,7 @@ export default function DesktopRemoteScreen() {
autoCorrect={false}
keyboardType="url"
/>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.secondaryButton, !pairingLink.trim() && styles.buttonDisabled]}
disabled={!pairingLink.trim()}
onPress={() => void pairFromInput(pairingLink)}
@@ -470,7 +474,7 @@ export default function DesktopRemoteScreen() {
autoCapitalize="none"
autoCorrect={false}
/>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[
styles.secondaryButton,
(!manualBaseUrl.trim() || !manualTicket.trim()) && styles.buttonDisabled,
@@ -523,7 +527,7 @@ export default function DesktopRemoteScreen() {
>
<View style={[styles.remoteShell, { width: remoteLayout.contentWidth }]}>
<View style={styles.remoteNowHeader}>
<Pressable style={styles.headerBtn} onPress={() => router.back()} hitSlop={12}>
<Pressable android_ripple={ripple.bounded} style={styles.headerBtn} onPress={() => router.back()} hitSlop={12}>
<Ionicons name="chevron-down" size={26} color={colors.textSecondary} />
</Pressable>
<View style={styles.headerMid}>
@@ -534,7 +538,7 @@ export default function DesktopRemoteScreen() {
{remoteSource}
</Text>
</View>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={styles.headerBtn}
onPress={() => void reconnect()}
hitSlop={12}
@@ -582,20 +586,26 @@ export default function DesktopRemoteScreen() {
</View>
<View style={styles.manageActions}>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={styles.primaryButton}
onPress={() => router.replace('/now-playing' as never)}
onPress={() => {
// The player is an overlay, not a route: open it and pop this
// screen so it slides in above wherever the user came from.
usePlayerUiStore.getState().openPlayer();
if (router.canGoBack()) router.back();
else router.replace('/');
}}
>
<Ionicons name="musical-notes-outline" size={18} color={colors.accentTextStrong} />
<Text variant="body" color={colors.accentTextStrong}>
Open Now Playing
</Text>
</Pressable>
<Pressable style={styles.secondaryButton} onPress={() => void reconnect()}>
<Pressable android_ripple={ripple.bounded} style={styles.secondaryButton} onPress={() => void reconnect()}>
<Ionicons name="refresh" size={18} color={colors.textPrimary} />
<Text variant="body">Reconnect</Text>
</Pressable>
<Pressable style={styles.dangerButton} onPress={confirmForget}>
<Pressable android_ripple={ripple.bounded} style={styles.dangerButton} onPress={confirmForget}>
<Ionicons name="trash-outline" size={18} color={colors.warning} />
<Text variant="body" color={colors.warning}>
Forget desktop
@@ -630,7 +640,7 @@ export default function DesktopRemoteScreen() {
) : (
<>
<View style={styles.topBar}>
<Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary}>
Settings
src/app/desktop-remote/scan.tsx
+4 -2
View File
@@ -19,10 +19,12 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
export default function DesktopRemoteScanScreen() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const pairFromInput = useDesktopRemoteStore((s) => s.pairFromInput);
@@ -42,7 +44,7 @@ export default function DesktopRemoteScanScreen() {
return (
<Screen>
<View style={styles.header}>
<Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary}>
Desktop Remote
@@ -62,7 +64,7 @@ export default function DesktopRemoteScanScreen() {
<View style={styles.permissionCard}>
<Ionicons name="camera-outline" size={28} color={colors.accent} />
<Text variant="body">Camera access is needed to scan the desktop pairing QR.</Text>
<Pressable style={styles.primaryButton} onPress={() => void requestPermission()}>
<Pressable android_ripple={ripple.bounded} style={styles.primaryButton} onPress={() => void requestPermission()}>
<Text variant="body" color={colors.accentTextStrong}>
Allow camera
</Text>
src/app/desktop-sync.tsx
+8 -5
View File
@@ -20,6 +20,7 @@ import { Text } from '@/components/Text';
import { SyncConflictDetails } from '@/components/sync/SyncConflictDetails';
import { radius, spacing } from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { formatRelativeTime } from '@/lib/format';
import { getDesktopRemoteConnection } from '@/services/desktopRemoteCredentials';
import { useDesktopSyncStore } from '@/stores/desktopSyncStore';
@@ -67,6 +68,7 @@ function ConflictCard({
onResolve: (resolution: DesktopSyncConflictResolution) => void;
}) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const [selectedResolution, setSelectedResolution] = useState<DesktopSyncConflictResolution | null>(null);
const desktopSnapshot = syncPlaylistToSnapshot(conflict.remote);
@@ -85,7 +87,7 @@ function ConflictCard({
</Text>
<View style={styles.conflictActions}>
{options.map((resolution) => (
<Pressable
<Pressable android_ripple={ripple.bounded}
key={resolution}
style={[
styles.conflictBtn,
@@ -114,7 +116,7 @@ function ConflictCard({
previewResolution={selectedResolution}
/>
<View style={styles.conflictConfirmRow}>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.primaryButton, (!selectedResolution || busy) && styles.disabled]}
disabled={!selectedResolution || busy}
onPress={() => selectedResolution ? onResolve(selectedResolution) : undefined}
@@ -130,6 +132,7 @@ function ConflictCard({
export default function DesktopSyncScreen() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const status = useDesktopSyncStore((s) => s.status);
@@ -172,7 +175,7 @@ export default function DesktopSyncScreen() {
return (
<Screen>
<View style={styles.topBar}>
<Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary}>
Settings
@@ -201,7 +204,7 @@ export default function DesktopSyncScreen() {
Sync uses the same pairing as the Desktop Remote. Pair this phone with Astra Desktop
once and both features work.
</Text>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={styles.primaryButton}
onPress={() => router.push('/desktop-remote' as never)}
>
@@ -225,7 +228,7 @@ export default function DesktopSyncScreen() {
: 'Not synced yet'}
</Text>
</View>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.primaryButton, syncing && styles.disabled]}
disabled={syncing}
onPress={() => void syncNow()}
src/app/eq/import.tsx
+4 -2
View File
@@ -10,10 +10,12 @@ import { genEqId } from '@/audio/eqPresets';
import { useEQStore } from '@/stores/eqStore';
import { radius, spacing } from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import type { EQPreset } from '@/types/audio';
export default function EQPresetImportScreen() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const importPreset = useEQStore((state) => state.importPreset);
@@ -34,7 +36,7 @@ export default function EQPresetImportScreen() {
return (
<Screen>
<View style={styles.header}>
<Pressable style={styles.back} onPress={goToEq} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} style={styles.back} onPress={goToEq} hitSlop={8}>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary}>
Equalizer
@@ -44,7 +46,7 @@ export default function EQPresetImportScreen() {
<View style={styles.errorCard}>
<Ionicons name="alert-circle-outline" size={28} color={colors.warning} />
<Text variant="body">This link does not contain a valid Astra EQ preset.</Text>
<Pressable style={styles.primaryButton} onPress={goToEq}>
<Pressable android_ripple={ripple.bounded} style={styles.primaryButton} onPress={goToEq}>
<Text variant="body" color={colors.accentTextStrong}>
Go to Equalizer
</Text>
src/app/eq/scan.tsx
+5 -3
View File
@@ -22,10 +22,12 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import type { EQPreset } from '@/types/audio';
export default function EQPresetScanScreen() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const importPreset = useEQStore((state) => state.importPreset);
@@ -49,7 +51,7 @@ export default function EQPresetScanScreen() {
return (
<Screen>
<View style={styles.header}>
<Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary}>
Equalizer
@@ -67,7 +69,7 @@ export default function EQPresetScanScreen() {
<View style={styles.permissionCard}>
<Ionicons name="camera-outline" size={28} color={colors.accent} />
<Text variant="body">Camera access is needed to scan EQ preset QR codes.</Text>
<Pressable style={styles.primaryButton} onPress={() => void requestPermission()}>
<Pressable android_ripple={ripple.bounded} style={styles.primaryButton} onPress={() => void requestPermission()}>
<Text variant="body" color={colors.accentTextStrong}>
Allow camera
</Text>
@@ -90,7 +92,7 @@ export default function EQPresetScanScreen() {
{error}
</Text>
</View>
<Pressable style={styles.retryButton} onPress={() => setError(null)}>
<Pressable android_ripple={ripple.bounded} style={styles.retryButton} onPress={() => setError(null)}>
<Text variant="label" color={colors.accentTextStrong}>
Scan again
</Text>
src/app/lastfm/edit.tsx
+6 -4
View File
@@ -19,6 +19,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { useLastFmSettingsStore } from '@/stores/lastFmSettingsStore';
import type { LastFmScrobbleProtocol } from '@/types/lastFm';
@@ -103,6 +104,7 @@ function Field({
export default function LastFmEditScreen() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const { id } = useLocalSearchParams<{ id?: string }>();
@@ -200,7 +202,7 @@ export default function LastFmEditScreen() {
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
>
<View style={styles.header}>
<Pressable style={styles.back} onPress={goBack} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} style={styles.back} onPress={goBack} hitSlop={8}>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary}>
{backLabel}
@@ -219,7 +221,7 @@ export default function LastFmEditScreen() {
<View style={styles.typeCards}>
{PROTOCOL_OPTIONS.map((option) => (
<Pressable
<Pressable android_ripple={ripple.bounded}
key={option.protocol}
style={styles.typeCard}
onPress={() => chooseProtocol(option.protocol)}
@@ -293,7 +295,7 @@ export default function LastFmEditScreen() {
</Text>
) : null}
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.saveButton, !canSubmit || busy ? styles.buttonDisabled : null]}
onPress={() => void onSave()}
disabled={!canSubmit || busy}
@@ -308,7 +310,7 @@ export default function LastFmEditScreen() {
</Pressable>
{editing ? (
<Pressable style={styles.removeButton} onPress={onRemove} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} style={styles.removeButton} onPress={onRemove} accessibilityRole="button">
<Ionicons name="trash-outline" size={18} color={colors.warning} />
<Text variant="body" color={colors.warning}>
Remove destination
src/app/lastfm/index.tsx
+9 -7
View File
@@ -16,6 +16,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { useLastFmSettingsStore } from '@/stores/lastFmSettingsStore';
import { requestLastFmFlush } from '@/services/lastfm';
import type { LastFmProfileStatus } from '@/types/lastFm';
@@ -45,6 +46,7 @@ function customStatusLine(profile: LastFmProfileStatus): { text: string; tone: '
export default function LastFmScreen() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const status = useLastFmSettingsStore((s) => s.status);
@@ -125,7 +127,7 @@ export default function LastFmScreen() {
{profile.username}
</Text>
) : null}
<Pressable
<Pressable android_ripple={ripple.bounded}
onPress={() => confirmDisconnect(profile)}
hitSlop={8}
accessibilityLabel="Disconnect Last.fm"
@@ -134,7 +136,7 @@ export default function LastFmScreen() {
</Pressable>
</View>
) : (
<Pressable
<Pressable android_ripple={ripple.bounded}
style={styles.connectButton}
onPress={() => connectOfficial(profile)}
accessibilityRole="button"
@@ -152,7 +154,7 @@ export default function LastFmScreen() {
const renderCustom = (profile: LastFmProfileStatus) => {
const line = customStatusLine(profile);
return (
<Pressable
<Pressable android_ripple={ripple.bounded}
key={profile.id}
style={styles.row}
onPress={() => router.push({ pathname: '/lastfm/edit', params: { id: profile.id } })}
@@ -195,13 +197,13 @@ export default function LastFmScreen() {
return (
<Screen>
<View style={styles.header}>
<Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary}>
Settings
</Text>
</Pressable>
<Pressable
<Pressable android_ripple={ripple.bounded}
onPress={() => router.push('/lastfm/edit')}
hitSlop={8}
accessibilityLabel="Add destination"
@@ -249,7 +251,7 @@ export default function LastFmScreen() {
) : null}
{status && status.pendingScrobbles > 0 ? (
<Pressable style={styles.retryButton} onPress={() => requestLastFmFlush()}>
<Pressable android_ripple={ripple.bounded} style={styles.retryButton} onPress={() => requestLastFmFlush()}>
<Ionicons name="sync" size={16} color={colors.accentText} />
<Text variant="label" color={colors.accentText}>
Retry {status.pendingScrobbles} queued now
@@ -271,7 +273,7 @@ export default function LastFmScreen() {
)}
</View>
<Pressable style={styles.addButton} onPress={() => router.push('/lastfm/edit')}>
<Pressable android_ripple={ripple.bounded} style={styles.addButton} onPress={() => router.push('/lastfm/edit')}>
<Ionicons name="add" size={18} color={colors.accentTextStrong} />
<Text variant="body" color={colors.accentTextStrong}>
Add destination
src/app/notification.click.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { useEffect } from 'react';
import { View } from 'react-native';
import { useRouter } from 'expo-router';
import { getNotificationClickRedirectPath } from '@/audio/notificationIntent';
import { resolveNotificationClick } from '@/audio/notificationIntent';
import { createThemedStyles } from '@/theme/themed';
export default function NotificationClickRoute() {
@@ -11,7 +11,7 @@ export default function NotificationClickRoute() {
useEffect(() => {
let cancelled = false;
getNotificationClickRedirectPath()
resolveNotificationClick()
.then((href) => {
if (!cancelled) router.replace(href);
})
src/app/recently-played.tsx
+3 -1
View File
@@ -13,6 +13,7 @@ import { TrackRow } from '@/components/library/TrackRow';
import { TrackActionsSheet } from '@/components/library/TrackActionsSheet';
import { spacing } from '@/theme';
import { useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { useLibraryStore } from '@/stores/libraryStore';
import { usePlayerStore } from '@/stores/playerStore';
import { playTracks } from '@/audio/playbackController';
@@ -37,6 +38,7 @@ function EmptyList() {
export default function RecentlyPlayedScreen() {
const colors = useColors();
const ripple = useRipple();
const router = useRouter();
const tracks = useLibraryStore((s) => s.recentlyPlayedTracks);
const currentPath = usePlayerStore((s) => s.currentTrack?.path);
@@ -49,7 +51,7 @@ export default function RecentlyPlayedScreen() {
return (
<Screen>
<Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary}>
Home
src/app/sources/edit.tsx
+6 -4
View File
@@ -18,6 +18,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { useRemoteSourcesStore } from '@/stores/remoteSourcesStore';
import type { RemoteSourceType } from '@/types/remote';
@@ -84,6 +85,7 @@ function Field({
export default function SourceEditScreen() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const { id } = useLocalSearchParams<{ id?: string }>();
@@ -187,7 +189,7 @@ export default function SourceEditScreen() {
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
>
<View style={styles.header}>
<Pressable style={styles.back} onPress={goBack} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} style={styles.back} onPress={goBack} hitSlop={8}>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary}>
{backLabel}
@@ -206,7 +208,7 @@ export default function SourceEditScreen() {
<View style={styles.typeCards}>
{TYPE_OPTIONS.map((option) => (
<Pressable
<Pressable android_ripple={ripple.bounded}
key={option.type}
style={styles.typeCard}
onPress={() => chooseType(option.type)}
@@ -274,7 +276,7 @@ export default function SourceEditScreen() {
) : null}
<View style={styles.actions}>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.button, styles.secondaryButton, busy ? styles.buttonDisabled : null]}
onPress={() => void onTest()}
disabled={!!busy}
@@ -287,7 +289,7 @@ export default function SourceEditScreen() {
</Text>
)}
</Pressable>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[
styles.button,
styles.primaryButton,
src/app/sources/index.tsx
+7 -5
View File
@@ -16,6 +16,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { useRemoteSourcesStore } from '@/stores/remoteSourcesStore';
import type { RemoteSourceRow, RemoteSyncProgress } from '@/types/remote';
@@ -39,6 +40,7 @@ function statusLine(
export default function SourcesScreen() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const sources = useRemoteSourcesStore((s) => s.sources);
@@ -103,7 +105,7 @@ export default function SourcesScreen() {
return (
<Screen>
<View style={styles.header}>
<Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Pressable android_ripple={ripple.bounded} style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary}>
Settings
@@ -111,11 +113,11 @@ export default function SourcesScreen() {
</Pressable>
<View style={styles.headerActions}>
{sources.length > 0 ? (
<Pressable onPress={() => void syncAll()} hitSlop={8} accessibilityLabel="Sync all">
<Pressable android_ripple={ripple.bounded} onPress={() => void syncAll()} hitSlop={8} accessibilityLabel="Sync all">
<Ionicons name="sync" size={20} color={colors.textSecondary} />
</Pressable>
) : null}
<Pressable
<Pressable android_ripple={ripple.bounded}
onPress={() => router.push('/sources/edit')}
hitSlop={8}
accessibilityLabel="Add server"
@@ -137,7 +139,7 @@ export default function SourcesScreen() {
No servers yet. Add a Subsonic or Jellyfin server to stream and browse your
self-hosted library.
</Text>
<Pressable style={styles.addButton} onPress={() => router.push('/sources/edit')}>
<Pressable android_ripple={ripple.bounded} style={styles.addButton} onPress={() => router.push('/sources/edit')}>
<Ionicons name="add" size={18} color={colors.accentTextStrong} />
<Text variant="body" color={colors.accentTextStrong}>
Add server
@@ -148,7 +150,7 @@ export default function SourcesScreen() {
sources.map((source) => {
const status = statusLine(source, progressById[source.id] ?? null);
return (
<Pressable
<Pressable android_ripple={ripple.bounded}
key={source.id}
style={styles.row}
onPress={() => setActionFor(source)}
src/audio/notificationIntent.ts
+9 -4
View File
@@ -1,5 +1,6 @@
import TrackPlayer from 'react-native-track-player';
import { usePlayerStore } from '@/stores/playerStore';
import { usePlayerUiStore } from '@/stores/playerUiStore';
const NOTIFICATION_CLICK_TARGETS = new Set([
'trackplayer://notification.click',
@@ -9,8 +10,6 @@ const NOTIFICATION_CLICK_TARGETS = new Set([
'notification.click',
]);
export type NotificationClickRedirectPath = '/' | '/now-playing';
export function isNotificationClickPath(path: string): boolean {
const cleanPath = path.trim();
const pathWithoutSuffix = cleanPath.split(/[?#]/, 1)[0];
@@ -31,8 +30,14 @@ export function isNotificationClickPath(path: string): boolean {
}
}
export async function getNotificationClickRedirectPath(): Promise<NotificationClickRedirectPath> {
return (await hasLoadedTrack()) ? '/now-playing' : '/';
/**
* Notification/widget tap: land on the tabs and, when a track is loaded, open
* the now-playing overlay above them (the player is a store-gated overlay, not
* a route). Returns the route to navigate to.
*/
export async function resolveNotificationClick(): Promise<'/'> {
if (await hasLoadedTrack()) usePlayerUiStore.getState().openPlayer();
return '/';
}
async function hasLoadedTrack(): Promise<boolean> {
src/components/MiniPlayer.tsx
+12 -9
View File
@@ -7,7 +7,7 @@ import {
} from 'react-native';
import { Image } from 'expo-image';
import { Ionicons } from '@expo/vector-icons';
import { usePathname, useRouter } from 'expo-router';
import { usePlayerUiStore } from '@/stores/playerUiStore';
import { Text } from './Text';
import { AstraLogo } from './AstraLogo';
import { SpectrumCurve } from './SpectrumCurve';
@@ -16,6 +16,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { usePlayerStore } from '@/stores/playerStore';
import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
import { usePlaybackTargetStore } from '@/stores/playbackTargetStore';
@@ -72,8 +73,8 @@ function PhoneMiniProgress({ isPlaying }: { isPlaying: boolean }) {
export function MiniPlayer({ visible = true }: MiniPlayerProps) {
const styles = useStyles();
const colors = useColors();
const router = useRouter();
const pathname = usePathname();
const ripple = useRipple();
const playerOpen = usePlayerUiStore((s) => s.playerOpen);
const selectedTarget = usePlaybackTargetStore((s) => s.target);
const track = usePlayerStore((s) => s.currentTrack);
const playbackState = usePlayerStore((s) => s.playbackState);
@@ -107,9 +108,9 @@ export function MiniPlayer({ visible = true }: MiniPlayerProps) {
const isDesktop = presentation.target === 'desktop';
const isPlaying = presentation.playbackState === 'playing';
const isLoading = presentation.playbackState === 'loading';
// The pill sits underneath the now-playing transparentModal; don't burn a
// second live-scope frame loop while it's fully occluded.
const liveScopeActive = visible && scopeActive && !isDesktop && pathname !== '/now-playing';
// The pill sits underneath the now-playing overlay; don't burn a second
// live-scope frame loop while it's fully occluded.
const liveScopeActive = visible && scopeActive && !isDesktop && !playerOpen;
const onLayout = (e: LayoutChangeEvent) => setPillWidth(e.nativeEvent.layout.width);
const onTogglePlay = () => {
@@ -135,8 +136,9 @@ export function MiniPlayer({ visible = true }: MiniPlayerProps) {
<>
<Pressable
pointerEvents={visible ? 'auto' : 'none'}
android_ripple={ripple.bounded}
style={[styles.pill, !visible && styles.hidden]}
onPress={() => router.push('/now-playing')}
onPress={() => usePlayerUiStore.getState().openPlayer()}
onLayout={onLayout}
>
{liveScopeActive && pillWidth > 0 && (
@@ -183,6 +185,7 @@ export function MiniPlayer({ visible = true }: MiniPlayerProps) {
{isDesktop ? (
<Pressable
hitSlop={10}
android_ripple={ripple.icon(22)}
onPress={() => setTargetPickerOpen(true)}
style={styles.control}
accessibilityLabel="Choose output device"
@@ -190,14 +193,14 @@ export function MiniPlayer({ visible = true }: MiniPlayerProps) {
<Ionicons name="desktop-outline" size={21} color={colors.textSecondary} />
</Pressable>
) : null}
<Pressable hitSlop={10} onPress={onTogglePlay} style={styles.control}>
<Pressable hitSlop={10} android_ripple={ripple.icon(22)} onPress={onTogglePlay} style={styles.control}>
<Ionicons
name={isLoading ? 'ellipsis-horizontal' : isPlaying ? 'pause' : 'play'}
size={24}
color={colors.accent}
/>
</Pressable>
<Pressable hitSlop={10} onPress={onSkipNext} style={styles.control}>
<Pressable hitSlop={10} android_ripple={ripple.icon(22)} onPress={onSkipNext} style={styles.control}>
<Ionicons name="play-skip-forward" size={22} color={colors.textPrimary} />
</Pressable>
</View>
src/components/PlaybackTargetPicker.tsx
+4 -4
View File
@@ -10,6 +10,7 @@ import { Ionicons } from '@expo/vector-icons';
import { Text } from './Text';
import { radius, spacing } from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
import { usePlaybackTargetStore, type PlaybackTarget } from '@/stores/playbackTargetStore';
import { usePlayerStore } from '@/stores/playerStore';
@@ -118,9 +119,11 @@ function TargetRow({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
return (
<Pressable
style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
android_ripple={ripple.bounded}
style={styles.row}
onPress={onPress}
accessibilityRole="button"
accessibilityState={{ selected }}
@@ -176,9 +179,6 @@ const useStyles = createThemedStyles((colors) => ({
alignItems: 'center',
gap: spacing.md,
},
rowPressed: {
opacity: 0.65,
},
iconWrap: {
width: 40,
height: 40,
src/components/SegmentedControl.tsx
+4 -4
View File
@@ -16,6 +16,7 @@ import {
radius,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { motion } from '@/theme/motion';
const THUMB_INSET = 3;
@@ -89,6 +90,7 @@ function SegmentButton({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
// 0 = inactive, 1 = active; drives the label colour cross-fade.
const progress = useSharedValue(focused ? 1 : 0);
@@ -106,7 +108,8 @@ function SegmentButton({
return (
<Pressable
style={({ pressed }) => [styles.segment, pressed && styles.segmentPressed]}
android_ripple={ripple.bounded}
style={styles.segment}
onPress={onPress}
accessibilityRole="tab"
accessibilityState={{ selected: focused }}
@@ -143,9 +146,6 @@ const useStyles = createThemedStyles((colors) => ({
justifyContent: 'center',
paddingVertical: 7,
},
segmentPressed: {
opacity: 0.72,
},
label: {
fontSize: 12,
fontFamily: fonts.sans.medium,
src/components/TabBar.tsx
+3
View File
@@ -20,6 +20,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { motion } from '@/theme/motion';
import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
import { usePlaybackTargetStore } from '@/stores/playbackTargetStore';
@@ -161,6 +162,7 @@ interface TabButtonProps {
function TabButton({ meta, focused, onPress }: TabButtonProps) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
// 0 = inactive, 1 = active. Drives the accent fill, label colour, and bloom.
const progress = useSharedValue(focused ? 1 : 0);
// 0 = at rest, 1 = finger down.
@@ -184,6 +186,7 @@ function TabButton({ meta, focused, onPress }: TabButtonProps) {
return (
<Pressable
android_ripple={ripple.icon(26)}
style={styles.tab}
onPress={onPress}
onPressIn={() => {
src/components/WaveformSeekBar.tsx
+8 -2
View File
@@ -36,6 +36,11 @@ interface WaveformSeekBarProps {
touchPadding?: number;
/** Track file URI used to load/cache the offline waveform peaks. */
trackPath?: string;
/**
* False while the bar is mounted but hidden (the now-playing overlay stays
* mounted when closed): pins progress and stops the smooth-time rAF loop.
*/
active?: boolean;
}
const clamp = (fraction: number) => Math.min(1, Math.max(0, fraction));
@@ -54,12 +59,13 @@ export function WaveformSeekBar({
height = CANVAS_HEIGHT,
touchPadding = spacing.md,
trackPath,
active = true,
}: WaveformSeekBarProps) {
const styles = useStyles();
const colors = useColors();
const currentTime = usePlayerStore((s) => s.currentTime);
const currentTime = usePlayerStore((s) => (active ? s.currentTime : 0));
const duration = usePlayerStore((s) => s.duration);
const isPlaying = usePlayerStore((s) => s.playbackState === 'playing');
const isPlaying = usePlayerStore((s) => active && s.playbackState === 'playing');
const [scrubFraction, setScrubFraction] = useState<number | null>(null);
const [barWidth, setBarWidth] = useState(0);
const pendingSeek = usePlayerStore((s) => s.pendingSeek);
src/components/eq/BandDetailPanel.tsx
+3 -1
View File
@@ -11,6 +11,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import type { EQBand } from '@/types/audio';
import {
EQ_MAX_FREQUENCY,
@@ -43,6 +44,7 @@ export type EQEditableValue = 'frequency' | 'gain' | 'Q';
/** "Band N" + type dropdown + On toggle + audible parameter sliders. */
export function BandDetailPanel({ band, bandNumber, onUpdate, onEditType, onEditValue }: BandDetailPanelProps) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
if (!band) {
return (
@@ -61,7 +63,7 @@ export function BandDetailPanel({ band, bandNumber, onUpdate, onEditType, onEdit
<View style={styles.card}>
<View style={styles.header}>
<Text variant="heading">Band {bandNumber}</Text>
<Pressable style={styles.typeButton} onPress={onEditType}>
<Pressable android_ripple={ripple.bounded} style={styles.typeButton} onPress={onEditType}>
<Text variant="label" color={colors.textPrimary}>
{BAND_TYPE_LABEL[band.type]}
</Text>
src/components/eq/BandStrip.tsx
+4 -2
View File
@@ -10,6 +10,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import type { EQBand } from '@/types/audio';
import {
formatFreq,
@@ -28,6 +29,7 @@ interface BandStripProps {
/** Horizontal strip of per-band cells (freq + gain) + a trailing "+" add cell. */
export function BandStrip({ bands, activeBandId, canAdd, onSelect, onAdd }: BandStripProps) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
return (
<ScrollView
@@ -38,7 +40,7 @@ export function BandStrip({ bands, activeBandId, canAdd, onSelect, onAdd }: Band
{bands.map((band) => {
const isActive = band.id === activeBandId;
return (
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
key={band.id}
onPress={() => onSelect(band.id)}
style={[styles.cell, isActive && styles.cellActive]}
@@ -56,7 +58,7 @@ export function BandStrip({ bands, activeBandId, canAdd, onSelect, onAdd }: Band
);
})}
{canAdd ? (
<Pressable onPress={onAdd} style={[styles.cell, styles.addCell]} accessibilityLabel="Add band">
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onAdd} style={[styles.cell, styles.addCell]} accessibilityLabel="Add band">
<Ionicons name="add" size={22} color={colors.accentText} />
</Pressable>
) : null}
src/components/eq/EQPresetNameSheet.tsx
+4 -2
View File
@@ -12,6 +12,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { EqSheet } from './EqSheet';
interface EQPresetNameSheetProps {
@@ -28,6 +29,7 @@ export function EQPresetNameSheet({
onClose,
}: EQPresetNameSheetProps) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const [name, setName] = useState(defaultName);
const trimmed = name.trim();
@@ -56,12 +58,12 @@ export function EQPresetNameSheet({
onSubmitEditing={submit}
/>
<View style={styles.actions}>
<Pressable style={[styles.btn, styles.cancel]} onPress={onClose}>
<Pressable android_ripple={ripple.bounded} style={[styles.btn, styles.cancel]} onPress={onClose}>
<Text variant="label" color={colors.textSecondary}>
Cancel
</Text>
</Pressable>
<Pressable style={[styles.btn, styles.primary, !trimmed && styles.disabled]} disabled={!trimmed} onPress={submit}>
<Pressable android_ripple={ripple.bounded} style={[styles.btn, styles.primary, !trimmed && styles.disabled]} disabled={!trimmed} onPress={submit}>
<Text variant="label" color={colors.accentTextStrong}>
{actionLabel}
</Text>
src/components/eq/EQPresetPreviewSheet.tsx
+4 -2
View File
@@ -9,6 +9,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import type { EQPreset } from '@/types/audio';
import { EqSheet } from './EqSheet';
import { formatGain } from './format';
@@ -29,6 +30,7 @@ export function EQPresetPreviewSheet({
onClose,
}: EQPresetPreviewSheetProps) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const enabledBands = preset.bands.filter((band) => band.enabled).length;
const modeLabel = preset.mode === 'graphic' ? 'Graphic' : 'Parametric';
@@ -68,12 +70,12 @@ export function EQPresetPreviewSheet({
</View>
</View>
<View style={styles.actions}>
<Pressable style={[styles.btn, styles.cancel]} onPress={onClose}>
<Pressable android_ripple={ripple.bounded} style={[styles.btn, styles.cancel]} onPress={onClose}>
<Text variant="label" color={colors.textSecondary}>
Cancel
</Text>
</Pressable>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.btn, styles.primary]}
onPress={() => {
onConfirm();
src/components/eq/EQPresetQrSheet.tsx
+3 -1
View File
@@ -10,6 +10,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { EqSheet } from './EqSheet';
interface EQPresetQrSheetProps {
@@ -20,6 +21,7 @@ interface EQPresetQrSheetProps {
export function EQPresetQrSheet({ presetName, value, onClose }: EQPresetQrSheetProps) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
return (
@@ -33,7 +35,7 @@ export function EQPresetQrSheet({ presetName, value, onClose }: EQPresetQrSheetP
<Text variant="label" numberOfLines={1} color={colors.textSecondary} style={styles.name}>
{presetName}
</Text>
<Pressable style={styles.done} onPress={onClose}>
<Pressable android_ripple={ripple.bounded} style={styles.done} onPress={onClose}>
<Text variant="label" color={colors.accentTextStrong}>
Done
</Text>
src/components/eq/EQSlider.tsx
+5
View File
@@ -12,6 +12,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
const THUMB = 16;
@@ -43,6 +44,7 @@ export function EQSlider({
onValuePress,
}: EQSliderProps) {
const styles = useStyles();
const ripple = useRipple();
const [width, setWidth] = useState(0);
const [active, setActive] = useState(false);
const widthRef = useRef(0);
@@ -119,6 +121,9 @@ export function EQSlider({
</View>
{onValuePress && !disabled ? (
<Pressable
android_ripple={ripple.bounded}
// Deliberate two-property pressed emphasis (accent border + fill), kept
// alongside the ripple — it marks the value as editable, not just pressed.
style={({ pressed }) => [styles.valueButton, pressed && styles.valueButtonPressed]}
onPress={onValuePress}
accessibilityRole="button"
src/components/eq/EQValueEditSheet.tsx
+4 -2
View File
@@ -13,6 +13,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { EqSheet } from './EqSheet';
interface EQValueEditSheetProps {
@@ -40,6 +41,7 @@ export function EQValueEditSheet({
onClose,
}: EQValueEditSheetProps) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const [value, setValue] = useState(initialValue);
const trimmed = value.trim();
@@ -80,12 +82,12 @@ export function EQValueEditSheet({
{valid || trimmed.length === 0 ? rangeLabel : 'Enter a valid number'}
</Text>
<View style={styles.actions}>
<Pressable style={[styles.btn, styles.cancel]} onPress={onClose}>
<Pressable android_ripple={ripple.bounded} style={[styles.btn, styles.cancel]} onPress={onClose}>
<Text variant="label" color={colors.textSecondary}>
Cancel
</Text>
</Pressable>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.btn, styles.apply, !valid && styles.applyDisabled]}
disabled={!valid}
onPress={apply}
src/components/eq/PresetSheet.tsx
+3 -1
View File
@@ -3,6 +3,7 @@ import { Ionicons } from '@expo/vector-icons';
import { Text } from '@/components/Text';
import { spacing } from '@/theme';
import { useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import type { EQPreset } from '@/types/audio';
import {
EqSheet,
@@ -37,6 +38,7 @@ export function PresetSheet({
onClose,
}: PresetSheetProps) {
const colors = useColors();
const ripple = useRipple();
const builtIn = presets.filter((p) => !p.isCustom);
const custom = presets.filter((p) => p.isCustom);
@@ -76,7 +78,7 @@ export function PresetSheet({
onClose();
}}
trailing={
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
hitSlop={10}
onPress={() => onDelete(p.id)}
style={styles.delete}
src/components/eq/SavePresetSheet.tsx
+4 -2
View File
@@ -12,6 +12,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { EqSheet } from './EqSheet';
interface SavePresetSheetProps {
@@ -23,6 +24,7 @@ interface SavePresetSheetProps {
/** Name + save a custom preset from the current bands/preamp. */
export function SavePresetSheet({ defaultName, onSave, onClose }: SavePresetSheetProps) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const [name, setName] = useState(defaultName);
const trimmed = name.trim();
@@ -50,12 +52,12 @@ export function SavePresetSheet({ defaultName, onSave, onClose }: SavePresetShee
}}
/>
<View style={styles.actions}>
<Pressable style={[styles.btn, styles.cancel]} onPress={onClose}>
<Pressable android_ripple={ripple.bounded} style={[styles.btn, styles.cancel]} onPress={onClose}>
<Text variant="label" color={colors.textSecondary}>
Cancel
</Text>
</Pressable>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.btn, styles.save, !trimmed && styles.saveDisabled]}
disabled={!trimmed}
onPress={() => {
src/components/library/AlbumGridItem.tsx
+3 -1
View File
@@ -11,14 +11,16 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { albumArtworkSource } from '@/library/artwork';
import type { Album } from '@/types/library';
export function AlbumGridItem({ album, onPress }: { album: Album; onPress: () => void }) {
const styles = useStyles();
const ripple = useRipple();
const artUri = albumArtworkSource(album);
return (
<Pressable style={styles.item} onPress={onPress} accessibilityRole="button">
<Pressable android_ripple={ripple.tile} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.item} onPress={onPress} accessibilityRole="button">
<View style={styles.art}>
{artUri ? (
<Image
src/components/library/AlbumRow.tsx
+3 -1
View File
@@ -11,6 +11,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { albumArtworkSource } from '@/library/artwork';
import type { Album } from '@/types/library';
@@ -18,9 +19,10 @@ import type { Album } from '@/types/library';
export function AlbumRow({ album, onPress }: { album: Album; onPress: () => void }) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
const artUri = albumArtworkSource(album);
return (
<Pressable style={styles.row} onPress={onPress} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.row} onPress={onPress} accessibilityRole="button">
<View style={styles.art}>
{artUri ? (
<Image
src/components/library/ArtistGridItem.tsx
+3 -1
View File
@@ -11,6 +11,7 @@ import {
radius,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { artworkUri } from '@/library/artwork';
import type { Artist } from '@/types/library';
@@ -18,6 +19,7 @@ import type { Artist } from '@/types/library';
export function ArtistGridItem({ artist, onPress }: { artist: Artist; onPress: () => void }) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
const useMosaic = artist.artwork_hashes.length >= 4;
const hashes = useMosaic ? artist.artwork_hashes.slice(0, 4) : artist.artwork_hashes.slice(0, 1);
@@ -25,7 +27,7 @@ export function ArtistGridItem({ artist, onPress }: { artist: Artist; onPress: (
const tracks = `${artist.track_count} ${artist.track_count === 1 ? 'track' : 'tracks'}`;
return (
<Pressable style={styles.item} onPress={onPress} accessibilityRole="button">
<Pressable android_ripple={ripple.tile} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.item} onPress={onPress} accessibilityRole="button">
<View style={styles.art}>
{hashes.length === 0 ? (
<Ionicons name="person" size={44} color={colors.textTertiary} />
src/components/library/ArtistRow.tsx
+3 -1
View File
@@ -11,14 +11,16 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { artworkUri } from '@/library/artwork';
import type { Artist } from '@/types/library';
export function ArtistRow({ artist, onPress }: { artist: Artist; onPress: () => void }) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
return (
<Pressable style={styles.row} onPress={onPress} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.row} onPress={onPress} accessibilityRole="button">
<View style={styles.art}>
{artist.artwork_hash ? (
<Image
src/components/library/CollapsingDetail.tsx
+8 -6
View File
@@ -34,6 +34,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
// Collapsing detail header. An absolute container whose height shrinks with the
// scroll and clips its faded content, so the track list (padded to the expanded
@@ -155,6 +156,7 @@ export function CollapsingHeader({
onHeroBlockLayout: (e: LayoutChangeEvent) => void;
}) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const insets = useSafeAreaInsets();
const { width: W } = useWindowDimensions();
@@ -246,7 +248,7 @@ export function CollapsingHeader({
{heroMeta}
{heroExtra}
<Animated.View style={[styles.actionRow, heroButtonsStyle]}>
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={[styles.actionButton, styles.primaryAction, disabled && styles.disabledAction]}
onPress={onPlay}
disabled={disabled}
@@ -257,7 +259,7 @@ export function CollapsingHeader({
Play
</Text>
</Pressable>
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={[styles.actionButton, styles.secondaryAction, disabled && styles.disabledAction]}
onPress={onShuffle}
disabled={disabled}
@@ -271,7 +273,7 @@ export function CollapsingHeader({
</Animated.View>
</Animated.View>
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
onPress={onBack}
hitSlop={8}
style={[styles.chevron, { top: barCenterY - 12, left: spacing.md }]}
@@ -299,16 +301,16 @@ export function CollapsingHeader({
style={[styles.barIcons, { top: barCenterY - 16, right: onMore ? spacing.md + 40 : spacing.md }, barIconsStyle]}
pointerEvents={collapsed ? 'auto' : 'none'}
>
<Pressable onPress={onPlay} disabled={disabled} hitSlop={6} style={styles.iconBtn}>
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onPlay} disabled={disabled} hitSlop={6} style={styles.iconBtn}>
<Ionicons name="play" size={20} color={colors.accent} />
</Pressable>
<Pressable onPress={onShuffle} disabled={disabled} hitSlop={6} style={styles.iconBtn}>
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onShuffle} disabled={disabled} hitSlop={6} style={styles.iconBtn}>
<Ionicons name="shuffle" size={20} color={colors.accent} />
</Pressable>
</Animated.View>
{onMore ? (
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
onPress={onMore}
hitSlop={8}
style={[styles.moreButton, { top: barCenterY - 16, right: spacing.md }]}
src/components/library/EmptyLibrary.tsx
+3 -1
View File
@@ -10,9 +10,11 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
export function EmptyLibrary() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
@@ -25,7 +27,7 @@ export function EmptyLibrary() {
<Text variant="body" color={colors.textSecondary} style={styles.body}>
Pick a folder on this device and Astra will scan it into your library.
</Text>
<Pressable style={styles.cta} onPress={() => router.push('/settings')} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} style={styles.cta} onPress={() => router.push('/settings')} accessibilityRole="button">
<Ionicons name="folder-open-outline" size={18} color={colors.bgPrimary} />
<Text variant="body" style={styles.ctaLabel}>
Folder settings
src/components/library/FoldersView.tsx
+13 -18
View File
@@ -36,6 +36,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { useLibraryStore } from '@/stores/libraryStore';
import { usePlayerStore } from '@/stores/playerStore';
import type { DbTrack } from '@/types/library';
@@ -60,6 +61,7 @@ function FolderRow({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
const { node, depth, isExpanded } = row;
const play = (event: GestureResponderEvent) => {
@@ -73,7 +75,8 @@ function FolderRow({
return (
<Pressable
style={({ pressed }) => [styles.folderRow, pressed && styles.rowPressed]}
android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.folderRow}
onPress={() => onToggle(node.id)}
onLongPress={() => onOpenActions(node)}
accessibilityRole="button"
@@ -104,7 +107,8 @@ function FolderRow({
{node.totalTrackCount}
</Text>
<Pressable
style={({ pressed }) => [styles.folderButton, pressed && styles.folderButtonPressed]}
android_ripple={ripple.icon(20)} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.folderButton}
onPress={play}
hitSlop={6}
accessibilityRole="button"
@@ -113,7 +117,8 @@ function FolderRow({
<Ionicons name="play" size={16} color={colors.accent} />
</Pressable>
<Pressable
style={({ pressed }) => [styles.folderButton, pressed && styles.folderButtonPressed]}
android_ripple={ripple.icon(20)} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.folderButton}
onPress={shuffle}
hitSlop={6}
accessibilityRole="button"
@@ -136,6 +141,7 @@ function FolderTrackRow({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
const index = row.folderTracks.findIndex((track) => track.path === row.track.path);
const playFolderTrack = () => {
@@ -148,11 +154,8 @@ function FolderTrackRow({
return (
<Pressable
style={({ pressed }) => [
styles.trackRow,
active && styles.trackRowActive,
pressed && styles.rowPressed,
]}
android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={[styles.trackRow, active && styles.trackRowActive]}
onPress={playFolderTrack}
onLongPress={onOpenActions}
accessibilityRole="button"
@@ -171,7 +174,8 @@ function FolderTrackRow({
{formatDuration(row.track.duration)}
</Text>
<Pressable
style={({ pressed }) => [styles.actionsButton, pressed && styles.actionsButtonPressed]}
android_ripple={ripple.icon(21)} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.actionsButton}
onPress={openActions}
hitSlop={8}
accessibilityRole="button"
@@ -347,9 +351,6 @@ const useStyles = createThemedStyles((colors) => ({
alignItems: 'center',
justifyContent: 'center',
},
folderButtonPressed: {
backgroundColor: colors.glassBg,
},
trackRow: {
flexDirection: 'row',
alignItems: 'center',
@@ -362,9 +363,6 @@ const useStyles = createThemedStyles((colors) => ({
trackRowActive: {
backgroundColor: colors.accentGlow,
},
rowPressed: {
opacity: 0.72,
},
trackMeta: {
flex: 1,
minWidth: 0,
@@ -390,9 +388,6 @@ const useStyles = createThemedStyles((colors) => ({
alignItems: 'center',
justifyContent: 'center',
},
actionsButtonPressed: {
backgroundColor: colors.glassBg,
},
empty: {
flex: 1,
alignItems: 'center',
src/components/library/PlaylistRow.tsx
+3
View File
@@ -11,6 +11,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { artworkUri } from '@/library/artwork';
export function PlaylistRow({
@@ -39,8 +40,10 @@ export function PlaylistRow({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
return (
<Pressable
android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.row}
onPress={onPress}
onLongPress={onLongPress}
src/components/library/PlaylistsView.tsx
+3 -1
View File
@@ -24,6 +24,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { usePlaylistStore } from '@/stores/playlistStore';
import type { Playlist } from '@/types/playlist';
@@ -47,6 +48,7 @@ export function PlaylistsView({
scrollEventThrottle?: number;
}) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const playlists = usePlaylistStore((s) => s.playlists);
@@ -205,7 +207,7 @@ export function PlaylistsView({
/>
<View style={styles.addBar}>
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.addButton}
onPress={() => setAddSheetOpen(true)}
accessibilityRole="button"
src/components/library/SelectionActionBar.tsx
+4 -8
View File
@@ -7,6 +7,7 @@ import { Ionicons } from '@expo/vector-icons';
import { Text } from '@/components/Text';
import { spacing } from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
interface SelectionActionBarProps {
count: number;
@@ -66,13 +67,11 @@ function BarButton({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
return (
<Pressable
style={({ pressed }) => [
styles.button,
pressed && styles.buttonPressed,
disabled && styles.buttonDisabled,
]}
android_ripple={ripple.bounded}
style={[styles.button, disabled && styles.buttonDisabled]}
onPress={onPress}
disabled={disabled}
accessibilityRole="button"
@@ -101,9 +100,6 @@ const useStyles = createThemedStyles((colors) => ({
gap: spacing.xs,
paddingVertical: spacing.md,
},
buttonPressed: {
opacity: 0.7,
},
buttonDisabled: {
opacity: 0.4,
},
src/components/library/TrackRow.tsx
+5 -4
View File
@@ -17,6 +17,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { formatDuration } from '@/lib/format';
import { trackArtworkThumbSource } from '@/library/artwork';
import { dbTrackToTrack } from '@/library/trackAdapter';
@@ -60,6 +61,7 @@ export function TrackRow({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
// Key the artwork by hash (local) or identity path (remote) so the error fallback
// and FlashList recycling work for both.
const artKey = track.source_type !== 'local' ? track.path : track.artwork_hash;
@@ -74,6 +76,7 @@ export function TrackRow({
const row = (
<Pressable
android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={[styles.row, selectionMode && selected && styles.rowSelected]}
onPress={selectionMode ? onToggleSelect : onPress}
onLongPress={selectionMode ? onToggleSelect : (onLongPress ?? onOpenActions)}
@@ -143,7 +146,8 @@ export function TrackRow({
{onOpenActions && !selectionMode ? (
<Pressable
style={({ pressed }) => [styles.actionsButton, pressed && styles.actionsButtonPressed]}
android_ripple={ripple.icon(ACTIONS_BUTTON / 2 + 4)} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.actionsButton}
onPress={openActions}
hitSlop={8}
accessibilityRole="button"
@@ -257,7 +261,4 @@ const useStyles = createThemedStyles((colors) => ({
alignItems: 'center',
justifyContent: 'center',
},
actionsButtonPressed: {
backgroundColor: colors.glassBg,
},
}));
src/components/lyrics/LyricsBand.tsx
+3 -1
View File
@@ -10,6 +10,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Pressable, ScrollView, View, type LayoutChangeEvent } from 'react-native';
import { Text } from '@/components/Text';
import { useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { useSmoothPlaybackTime } from '@/audio/useSmoothPlaybackTime';
import { useLyricsStore } from '@/stores/lyricsStore';
import {
@@ -44,6 +45,7 @@ function clamp(value: number, min: number, max: number): number {
export function LyricsBand({ track, currentTime, duration, isPlaying, onSeek }: LyricsBandProps) {
const colors = useColors();
const ripple = useRipple();
const entry = useLyricsStore((s) => s.byPath[track.path]);
const loadForTrack = useLyricsStore((s) => s.loadForTrack);
@@ -228,7 +230,7 @@ export function LyricsBand({ track, currentTime, duration, isPlaying, onSeek }:
</ScrollView>
{followPaused ? (
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
onPress={recenter}
hitSlop={10}
style={{
src/components/lyrics/LyricsLine.tsx
+3 -1
View File
@@ -20,6 +20,7 @@ import { Pressable, View, type LayoutChangeEvent } from 'react-native';
import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import { Text } from '@/components/Text';
import { useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { getPreferredLyricsTranslation } from '@/lyrics/presentation';
import type { LyricsFurigana, LyricsLine as LyricsLineData } from '@/lyrics/types';
@@ -68,6 +69,7 @@ function buildSegments(text: string, furigana: LyricsFurigana[] | undefined): Se
function LyricsLineComponent({ line, tier, baseSize, translationPriority, onSeek, onLayout }: LyricsLineProps) {
const colors = useColors();
const ripple = useRipple();
const target = TIER[tier];
// Uniform metrics for every line (the whole point — no wrap/reflow between tiers).
const size = baseSize;
@@ -100,7 +102,7 @@ function LyricsLineComponent({ line, tier, baseSize, translationPriority, onSeek
return (
<Animated.View onLayout={onLayout} style={[{ width: '100%', transformOrigin: 'left center' }, animatedStyle]}>
<Pressable onPress={onSeek} style={{ paddingVertical: 7 }}>
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onSeek} style={{ paddingVertical: 7 }}>
<View style={{ alignItems: 'flex-start' }}>
{hasFurigana ? (
<View
src/components/lyrics/LyricsView.tsx
+14 -8
View File
@@ -15,6 +15,7 @@ import { SeekBar } from '@/components/SeekBar';
import { LyricsBand } from './LyricsBand';
import { spacing, radius } from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { usePlayerStore } from '@/stores/playerStore';
import { useLyricsStore } from '@/stores/lyricsStore';
import { getLyricsPayloadSourceLabel } from '@/lyrics/presentation';
@@ -22,6 +23,8 @@ import type { Track } from '@/types/audio';
interface LyricsViewProps {
track: Track;
/** False while mounted but hidden (closed now-playing overlay): pins progress, stops rAF loops. */
active?: boolean;
isPlaying: boolean;
isLoading: boolean;
isFavorite: boolean;
@@ -36,6 +39,7 @@ interface LyricsViewProps {
export function LyricsView({
track,
active = true,
isPlaying,
isLoading,
isFavorite,
@@ -48,10 +52,12 @@ export function LyricsView({
onDismiss,
}: LyricsViewProps) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
// Lyrics mode is phone-target only, so progress comes straight from the
// player store — the 2Hz tick re-renders this takeover, not the whole screen.
const currentTime = usePlayerStore((s) => s.currentTime);
// While inactive the selector pins to 0 so hidden ticks don't re-render.
const currentTime = usePlayerStore((s) => (active ? s.currentTime : 0));
const duration = usePlayerStore((s) => s.duration);
const result = useLyricsStore((s) => s.byPath[track.path]?.result ?? null);
const sourceLabel = result?.status === 'hit' ? getLyricsPayloadSourceLabel(result.lyrics) : null;
@@ -59,7 +65,7 @@ export function LyricsView({
return (
<View style={styles.root}>
<View style={styles.strip}>
<Pressable onPress={onDismiss} hitSlop={12} style={styles.stripBtn} accessibilityLabel="Close player">
<Pressable android_ripple={ripple.bounded} onPress={onDismiss} hitSlop={12} style={styles.stripBtn} accessibilityLabel="Close player">
<Ionicons name="chevron-down" size={24} color={colors.textSecondary} />
</Pressable>
@@ -87,7 +93,7 @@ export function LyricsView({
</View>
</View>
<Pressable
<Pressable android_ripple={ripple.bounded}
onPress={onToggleFavorite}
hitSlop={10}
style={styles.stripBtn}
@@ -101,7 +107,7 @@ export function LyricsView({
/>
</Pressable>
<Pressable
<Pressable android_ripple={ripple.bounded}
onPress={onExitLyrics}
hitSlop={10}
style={styles.stripBtn}
@@ -116,24 +122,24 @@ export function LyricsView({
track={track}
currentTime={currentTime}
duration={duration}
isPlaying={isPlaying}
isPlaying={isPlaying && active}
onSeek={onSeek}
/>
<View style={styles.controls}>
<SeekBar currentTime={currentTime} duration={duration} trackKey={track.id} onSeek={onSeek} />
<View style={styles.transport}>
<Pressable onPress={onPrev} hitSlop={12} style={styles.transportBtn} accessibilityLabel="Previous">
<Pressable android_ripple={ripple.bounded} onPress={onPrev} hitSlop={12} style={styles.transportBtn} accessibilityLabel="Previous">
<Ionicons name="play-skip-back" size={28} color={colors.textPrimary} />
</Pressable>
<Pressable onPress={onPlayPause} hitSlop={12} style={styles.playButton} accessibilityLabel={isPlaying ? 'Pause' : 'Play'}>
<Pressable android_ripple={ripple.bounded} onPress={onPlayPause} hitSlop={12} style={styles.playButton} accessibilityLabel={isPlaying ? 'Pause' : 'Play'}>
<Ionicons
name={isLoading ? 'ellipsis-horizontal' : isPlaying ? 'pause' : 'play'}
size={28}
color={colors.bgPrimary}
/>
</Pressable>
<Pressable onPress={onNext} hitSlop={12} style={styles.transportBtn} accessibilityLabel="Next">
<Pressable android_ripple={ripple.bounded} onPress={onNext} hitSlop={12} style={styles.transportBtn} accessibilityLabel="Next">
<Ionicons name="play-skip-forward" size={28} color={colors.textPrimary} />
</Pressable>
</View>
src/components/onboarding/OnboardingFlow.tsx
+8 -4
View File
@@ -26,6 +26,7 @@ import { formatFolderCount, formatTrackCount } from '@/components/settings/Setti
import { radius, spacing } from '@/theme';
import { motion } from '@/theme/motion';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import type { BaseThemeId } from '@/theme/resolve';
import { useLibraryStore } from '@/stores/libraryStore';
import { useThemeStore } from '@/stores/themeStore';
@@ -51,6 +52,7 @@ const WIZARD_THEME_OPTIONS: { id: BaseThemeId; title: string }[] = [
*/
export function OnboardingFlow({ onDone }: { onDone: () => void }) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const insets = useSafeAreaInsets();
const { width, height } = useWindowDimensions();
@@ -124,7 +126,7 @@ export function OnboardingFlow({ onDone }: { onDone: () => void }) {
</View>
<View style={styles.navRow}>
{canGoBack ? (
<Pressable
<Pressable android_ripple={ripple.bounded}
onPress={goBack}
style={styles.secondaryButton}
accessibilityRole="button"
@@ -135,7 +137,7 @@ export function OnboardingFlow({ onDone }: { onDone: () => void }) {
</Text>
</Pressable>
) : null}
<Pressable
<Pressable android_ripple={ripple.bounded}
onPress={goNext}
style={styles.primaryButton}
accessibilityRole="button"
@@ -174,6 +176,7 @@ function WelcomeStep() {
function LibraryStep() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const folders = useLibraryStore((s) => s.folders);
const totalTrackCount = useLibraryStore((s) => s.totalTrackCount);
@@ -187,7 +190,7 @@ function LibraryStep() {
title="Add your music"
subtitle="Point Astra at the folders where your music lives. It scans them into your library — files on disk are never modified."
/>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.choiceButton, isScanning && styles.disabled]}
disabled={isScanning}
onPress={() => void addFolder()}
@@ -224,6 +227,7 @@ function LibraryStep() {
function ThemeStep() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const baseTheme = useThemeStore((s) => s.baseTheme);
const materialYouAvailable = useThemeStore((s) => s.materialYouAvailable);
@@ -248,7 +252,7 @@ function ThemeStep() {
{options.map((option) => {
const selected = option.id === baseTheme;
return (
<Pressable
<Pressable android_ripple={ripple.bounded}
key={option.id}
onPress={() => void setBaseTheme(option.id)}
style={[styles.themePill, selected && styles.themePillSelected]}
src/components/player/NowPlayingHost.tsx
+25
View File
@@ -0,0 +1,25 @@
import { useEffect } from 'react';
import { NowPlayingOverlay } from '@/components/player/NowPlayingOverlay';
import { usePlayerUiStore } from '@/stores/playerUiStore';
import { usePlayerStore } from '@/stores/playerStore';
const PREWARM_DELAY_MS = 2000;
/**
* Mount gate for the always-mounted now-playing overlay. Nothing mounts until a
* track exists (cold start unchanged); shortly after playback first starts the
* overlay pre-warms hidden so even the FIRST open is a pure slide, no mount cost.
*/
export function NowPlayingHost() {
const everOpened = usePlayerUiStore((s) => s.everOpened);
const hasTrack = usePlayerStore((s) => Boolean(s.currentTrack));
useEffect(() => {
if (everOpened || !hasTrack) return;
const timer = setTimeout(() => usePlayerUiStore.getState().prewarm(), PREWARM_DELAY_MS);
return () => clearTimeout(timer);
}, [everOpened, hasTrack]);
if (!everOpened) return null;
return <NowPlayingOverlay />;
}
src/app/now-playing.tsx → src/components/player/NowPlayingOverlay.tsx
+90 -51
View File
@@ -1,5 +1,6 @@
import { useCallback, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import {
BackHandler,
View,
Pressable,
StyleSheet,
@@ -11,7 +12,6 @@ import { useRouter } from 'expo-router';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
SlideInDown,
runOnJS,
useAnimatedStyle,
useSharedValue,
@@ -37,6 +37,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { WIDE_MIN_WIDTH, isWideWindow } from '@/theme/adaptive';
import { motion } from '@/theme/motion';
import { resolveNavigationArtist } from '@/library/artistGrouping';
@@ -46,6 +47,7 @@ import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
import { usePlayerStore } from '@/stores/playerStore';
import { usePlaylistStore } from '@/stores/playlistStore';
import { usePlaybackTargetStore } from '@/stores/playbackTargetStore';
import { usePlayerUiStore } from '@/stores/playerUiStore';
import { useSettingsStore } from '@/stores/settingsStore';
import type { DbTrack } from '@/types/library';
import {
@@ -266,12 +268,14 @@ function getNowPlayingLayout(
};
}
export default function NowPlayingScreen() {
export function NowPlayingOverlay() {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
const router = useRouter();
const insets = useSafeAreaInsets();
const { width: windowWidth, height: windowHeight } = useWindowDimensions();
const playerOpen = usePlayerUiStore((s) => s.playerOpen);
const [queueOpen, setQueueOpen] = useState(false);
// Stable identity: QueueTray is memo'd, so a fresh arrow here would defeat it.
const closeQueue = useCallback(() => setQueueOpen(false), []);
@@ -353,7 +357,9 @@ export default function NowPlayingScreen() {
const navigateToArtist = () => {
if (!artistName) return;
router.dismissTo({
// Slide the overlay away while the library detail loads underneath.
dismissSheet();
router.navigate({
pathname: '/library/artist/[name]',
params: { name: artistName },
});
@@ -361,7 +367,8 @@ export default function NowPlayingScreen() {
const navigateToAlbum = () => {
if (!albumKey) return;
router.dismissTo({
dismissSheet();
router.navigate({
pathname: '/library/album/[key]',
params: { key: albumKey },
});
@@ -411,18 +418,16 @@ export default function NowPlayingScreen() {
});
}
// Swipe down to minimize. The stack transition is disabled for this route, so
// the sheet owns one continuous enter/exit animation instead of handing off to
// a second native modal animation after release.
const translateY = useSharedValue(0);
// The overlay stays mounted; open/close is this one shared value sliding the
// sheet on the UI thread. Starts off-screen so a pre-warmed mount never flashes.
const translateY = useSharedValue(windowHeight);
const menuProgress = useSharedValue(0);
// Belt-and-suspenders for deep-link entry (widget/notification → now-playing with no
// history): `(tabs)` is the stack anchor (see root _layout unstable_settings), so back()
// returns there; if somehow there's nothing to go back to, replace to the tabs home so
// dismissing can never land on a blank screen.
// Closing is a store toggle, not navigation. Reset the inner layers so a
// reopen starts from the plain player (parity with the old per-open mount).
const dismiss = () => {
if (router.canGoBack()) router.back();
else router.replace('/');
setMenuOpen(false);
setQueueOpen(false);
usePlayerUiStore.getState().closePlayer();
};
const finishCloseMenu = () => setMenuOpen(false);
@@ -480,6 +485,39 @@ export default function NowPlayingScreen() {
}
});
// Open animation (close normally animates via dismissSheet's spring first;
// the else branch covers direct closePlayer calls and keeps the resting
// offset pinned to the current window height across rotation). NOTE: this
// effect must stay BELOW every direct `translateY.value` write — the react
// compiler forbids mutations after an effect that depends on the value.
useEffect(() => {
if (playerOpen) {
translateY.value = withTiming(0, { duration: 240 });
} else {
translateY.value = withTiming(windowHeight, { duration: 200 });
}
}, [playerOpen, windowHeight, translateY]);
// Hardware back, innermost layer first: menu → queue tray → player. Registered
// only while open, so it sits above the focused screen's own handlers (LIFO)
// — e.g. the library-detail back interceptor underneath.
useEffect(() => {
if (!playerOpen) return;
const sub = BackHandler.addEventListener('hardwareBackPress', () => {
if (menuOpen) {
closeMenu();
return true;
}
if (queueOpen) {
setQueueOpen(false);
return true;
}
dismissSheet();
return true;
});
return () => sub.remove();
});
const contentStyle = useAnimatedStyle(() => ({
transform: [{ translateY: translateY.value }],
}));
@@ -493,10 +531,9 @@ export default function NowPlayingScreen() {
}));
return (
<View style={styles.backdrop}>
<View style={StyleSheet.absoluteFill} pointerEvents={playerOpen ? 'auto' : 'none'}>
<GestureDetector gesture={pan}>
<Animated.View
entering={SlideInDown.duration(240)}
style={[
styles.content,
contentStyle,
@@ -520,7 +557,7 @@ export default function NowPlayingScreen() {
{!lyricsMode && (
<View style={styles.header}>
<View style={styles.headerSide}>
<Pressable style={styles.headerBtn} onPress={() => dismissSheet()} hitSlop={12}>
<Pressable style={styles.headerBtn} android_ripple={ripple.icon(22)} onPress={() => dismissSheet()} hitSlop={12}>
<Ionicons name="chevron-down" size={26} color={colors.textSecondary} />
</Pressable>
</View>
@@ -535,7 +572,7 @@ export default function NowPlayingScreen() {
<View style={[styles.headerSide, styles.headerActions]}>
{!isDesktopTarget && track ? (
<Pressable
style={styles.headerBtn}
style={styles.headerBtn} android_ripple={ripple.icon(22)}
onPress={() => void setLyricsVisible(!lyricsVisible)}
hitSlop={12}
accessibilityLabel={lyricsVisible ? 'Hide lyrics' : 'Show lyrics'}
@@ -549,7 +586,7 @@ export default function NowPlayingScreen() {
</Pressable>
) : null}
<Pressable
style={styles.headerBtn}
style={styles.headerBtn} android_ripple={ripple.icon(22)}
onPress={openMenu}
hitSlop={12}
accessibilityLabel="More options"
@@ -563,6 +600,7 @@ export default function NowPlayingScreen() {
{lyricsMode && track ? (
<LyricsView
track={track}
active={playerOpen}
isPlaying={isPlaying}
isLoading={isLoading}
isFavorite={isFavorite}
@@ -634,7 +672,7 @@ export default function NowPlayingScreen() {
</View>
<Pressable
hitSlop={10}
style={styles.inlineActionBtn}
style={styles.inlineActionBtn} android_ripple={ripple.icon(22)}
onPress={() => void sendDesktopControl('toggle-favorite')}
accessibilityLabel={activeTrack.isFavorite ? 'Remove from favorites' : 'Add to favorites'}
accessibilityState={{ selected: activeTrack.isFavorite }}
@@ -657,6 +695,7 @@ export default function NowPlayingScreen() {
<View style={[styles.transport, { marginTop: layout.controlsGap }]}>
<Pressable
hitSlop={10}
android_ripple={ripple.icon(24)}
style={[
styles.transportSideBtn,
desktopSnapshot?.shuffle === undefined && styles.controlDisabled,
@@ -675,7 +714,7 @@ export default function NowPlayingScreen() {
<Pressable
onPress={() => void sendDesktopControl('previous')}
hitSlop={12}
style={styles.transportMainBtn}
style={styles.transportMainBtn} android_ripple={ripple.icon(26)}
accessibilityLabel="Previous"
>
<Ionicons
@@ -687,7 +726,7 @@ export default function NowPlayingScreen() {
<Pressable
onPress={() => void sendDesktopControl(isPlaying ? 'pause' : 'play')}
hitSlop={12}
style={styles.playButton}
style={styles.playButton} android_ripple={ripple.onAccent()}
accessibilityLabel={isPlaying ? 'Pause desktop' : 'Play desktop'}
>
<Ionicons
@@ -699,7 +738,7 @@ export default function NowPlayingScreen() {
<Pressable
onPress={() => void sendDesktopControl('next')}
hitSlop={12}
style={styles.transportMainBtn}
style={styles.transportMainBtn} android_ripple={ripple.icon(26)}
accessibilityLabel="Next"
>
<Ionicons
@@ -710,6 +749,7 @@ export default function NowPlayingScreen() {
</Pressable>
<Pressable
hitSlop={10}
android_ripple={ripple.icon(24)}
style={[
styles.transportSideBtn,
desktopSnapshot?.repeat === undefined && styles.controlDisabled,
@@ -762,7 +802,7 @@ export default function NowPlayingScreen() {
<View style={styles.subActions}>
<Pressable
hitSlop={10}
style={styles.subBtn}
style={styles.subBtn} android_ripple={ripple.icon(20)}
onPress={() => void reconnectDesktop()}
accessibilityLabel="Reconnect to desktop"
>
@@ -771,7 +811,7 @@ export default function NowPlayingScreen() {
{desktopQueue ? (
<Pressable
hitSlop={10}
style={styles.subBtn}
style={styles.subBtn} android_ripple={ripple.icon(20)}
onPress={() => setQueueOpen(true)}
accessibilityLabel="Desktop queue"
>
@@ -794,12 +834,16 @@ export default function NowPlayingScreen() {
: 'Pair with Astra Desktop to control it here.'}
</Text>
<Pressable
style={styles.emptyAction}
onPress={() =>
desktopConnection
? void reconnectDesktop()
: router.push('/desktop-remote' as never)
}
style={styles.emptyAction} android_ripple={ripple.bounded}
onPress={() => {
if (desktopConnection) {
void reconnectDesktop();
return;
}
// Route change happens under the overlay; slide it away.
dismissSheet();
router.push('/desktop-remote' as never);
}}
>
<Text variant="label" color={colors.accentTextStrong}>
{desktopConnection ? 'Reconnect' : 'Pair desktop'}
@@ -871,7 +915,7 @@ export default function NowPlayingScreen() {
showChrome={false}
mode={scopeMode}
edgeFade
paused={queueOpen}
paused={!playerOpen || queueOpen}
/>
<Pressable
onPress={() =>
@@ -880,7 +924,7 @@ export default function NowPlayingScreen() {
.setScopeMode(scopeMode === 'spectrum' ? 'scope' : 'spectrum')
}
hitSlop={12}
style={styles.scopeSwap}
style={styles.scopeSwap} android_ripple={ripple.icon(24)}
accessibilityRole="button"
accessibilityLabel={`Showing ${
scopeMode === 'spectrum' ? 'spectrum' : 'oscilloscope'
@@ -916,7 +960,7 @@ export default function NowPlayingScreen() {
<Pressable
onPress={navigateToArtist}
hitSlop={6}
style={styles.artistButton}
style={styles.artistButton} android_ripple={ripple.bounded}
accessibilityRole="link"
accessibilityLabel={`View artist ${track.artist}`}
>
@@ -928,7 +972,7 @@ export default function NowPlayingScreen() {
</View>
<Pressable
hitSlop={10}
style={styles.inlineActionBtn}
style={styles.inlineActionBtn} android_ripple={ripple.icon(22)}
onPress={() => void toggleFavorite(track)}
accessibilityLabel={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
accessibilityState={{ selected: isFavorite }}
@@ -942,6 +986,7 @@ export default function NowPlayingScreen() {
</View>
<WaveformSeekBar
active={playerOpen}
height={layout.waveformHeight}
touchPadding={WAVEFORM_TOUCH_PADDING}
trackPath={track.path}
@@ -951,7 +996,7 @@ export default function NowPlayingScreen() {
<View style={[styles.transport, { marginTop: layout.controlsGap }]}>
<Pressable
hitSlop={10}
style={styles.transportSideBtn}
style={styles.transportSideBtn} android_ripple={ripple.icon(24)}
onPress={() => void toggleShuffle()}
accessibilityLabel="Shuffle"
accessibilityState={{ selected: shuffle }}
@@ -965,7 +1010,7 @@ export default function NowPlayingScreen() {
<Pressable
onPress={skipToPrevious}
hitSlop={12}
style={styles.transportMainBtn}
style={styles.transportMainBtn} android_ripple={ripple.icon(26)}
>
<Ionicons
name="play-skip-back"
@@ -973,7 +1018,7 @@ export default function NowPlayingScreen() {
color={colors.textPrimary}
/>
</Pressable>
<Pressable onPress={togglePlay} hitSlop={12} style={styles.playButton}>
<Pressable onPress={togglePlay} hitSlop={12} style={styles.playButton} android_ripple={ripple.onAccent()}>
<Ionicons
name={isLoading ? 'ellipsis-horizontal' : isPlaying ? 'pause' : 'play'}
size={PLAY_ICON_SIZE}
@@ -983,7 +1028,7 @@ export default function NowPlayingScreen() {
<Pressable
onPress={skipToNext}
hitSlop={12}
style={styles.transportMainBtn}
style={styles.transportMainBtn} android_ripple={ripple.icon(26)}
>
<Ionicons
name="play-skip-forward"
@@ -993,7 +1038,7 @@ export default function NowPlayingScreen() {
</Pressable>
<Pressable
hitSlop={10}
style={styles.transportSideBtn}
style={styles.transportSideBtn} android_ripple={ripple.icon(24)}
onPress={() => void cycleRepeat()}
accessibilityLabel="Repeat"
accessibilityState={{ selected: repeat !== 'none' }}
@@ -1022,7 +1067,7 @@ export default function NowPlayingScreen() {
<View style={styles.subActions}>
<Pressable
hitSlop={10}
style={styles.subBtn}
style={styles.subBtn} android_ripple={ripple.icon(20)}
onPress={() => void setScopeStageVisible(!scopeStageVisible)}
accessibilityLabel={scopeStageVisible ? 'Hide visualizer' : 'Show visualizer'}
accessibilityState={{ selected: scopeStageVisible }}
@@ -1035,7 +1080,7 @@ export default function NowPlayingScreen() {
</Pressable>
<Pressable
hitSlop={10}
style={styles.subBtn}
style={styles.subBtn} android_ripple={ripple.icon(20)}
onPress={() => setQueueOpen(true)}
accessibilityLabel="Queue"
>
@@ -1077,7 +1122,8 @@ export default function NowPlayingScreen() {
{menuItems.map((item) => (
<Pressable
key={item.key}
style={({ pressed }) => [styles.menuItem, pressed && styles.menuItemPressed]}
android_ripple={ripple.bounded}
style={styles.menuItem}
onPress={item.onPress}
accessibilityRole="button"
>
@@ -1111,10 +1157,6 @@ export default function NowPlayingScreen() {
}
const useStyles = createThemedStyles((colors) => ({
backdrop: {
flex: 1,
backgroundColor: 'transparent',
},
content: {
flex: 1,
backgroundColor: colors.bgPrimary,
@@ -1196,9 +1238,6 @@ const useStyles = createThemedStyles((colors) => ({
gap: spacing.md,
paddingHorizontal: spacing.md,
},
menuItemPressed: {
opacity: 0.6,
},
menuItemLabel: {
flex: 1,
},
src/components/queue/QueueTray.tsx
+15 -13
View File
@@ -43,6 +43,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { motion } from '@/theme/motion';
import { artworkThumbFromSource } from '@/library/artwork';
import { dragArmHaptic, tickHaptic } from '@/lib/haptics';
@@ -155,6 +156,7 @@ interface QueueTrayProps {
export const QueueTray = memo(function QueueTray({ onClose }: QueueTrayProps) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
const insets = useSafeAreaInsets();
const { height: windowHeight } = useWindowDimensions();
const snapPoints = useMemo(() => ['58%', '100%'], []);
@@ -595,7 +597,7 @@ export const QueueTray = memo(function QueueTray({ onClose }: QueueTrayProps) {
</Text>
</View>
{canEdit ? (
<Pressable
<Pressable android_ripple={ripple.bounded}
hitSlop={10}
onPress={() => (editMode ? exitEdit() : setEditMode(true))}
accessibilityRole="button"
@@ -654,7 +656,8 @@ export const QueueTray = memo(function QueueTray({ onClose }: QueueTrayProps) {
{editMode && selectedCount > 0 ? (
<View style={[styles.actionBar, { paddingBottom: insets.bottom + spacing.sm }]}>
<Pressable
style={({ pressed }) => [styles.actionBtn, pressed && styles.actionBtnPressed]}
android_ripple={ripple.bounded}
style={styles.actionBtn}
onPress={groupPlayNext}
accessibilityRole="button"
accessibilityLabel={`Play ${selectedCount} selected songs next`}
@@ -665,7 +668,8 @@ export const QueueTray = memo(function QueueTray({ onClose }: QueueTrayProps) {
</Text>
</Pressable>
<Pressable
style={({ pressed }) => [styles.actionBtn, pressed && styles.actionBtnPressed]}
android_ripple={ripple.bounded}
style={styles.actionBtn}
onPress={groupRemove}
accessibilityRole="button"
accessibilityLabel={`Remove ${selectedCount} selected songs from queue`}
@@ -751,6 +755,7 @@ const QueueRow = memo(function QueueRow({
}: QueueRowProps) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
const entryKey = entry.key;
const title = trackTitle(entry.track);
const artist = trackArtist(entry.track);
@@ -848,7 +853,7 @@ const QueueRow = memo(function QueueRow({
const rowContent = (
<Animated.View style={[styles.row, rowSurfaceStyle]}>
{editMode ? (
<Pressable
<Pressable android_ripple={ripple.bounded}
hitSlop={8}
onPress={onToggleSelect}
style={styles.checkbox}
@@ -891,7 +896,8 @@ const QueueRow = memo(function QueueRow({
<Animated.View style={[styles.rowOuter, rowMotionStyle]}>
<Pressable
onPress={onJump}
style={({ pressed }) => [styles.rowPressable, pressed && styles.rowPressed]}
android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.rowPressable}
accessibilityRole="button"
accessibilityLabel={`Play ${title}`}
accessibilityHint="Opens this song in the queue"
@@ -907,7 +913,8 @@ const QueueRow = memo(function QueueRow({
<Animated.View style={[styles.rowOuter, rowMotionStyle]}>
<Pressable
onPress={onToggleSelect}
style={({ pressed }) => [styles.rowPressable, pressed && styles.rowPressed]}
android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.rowPressable}
accessibilityRole="button"
accessibilityState={{ selected }}
accessibilityLabel={`${selected ? 'Deselect' : 'Select'} ${title}`}
@@ -927,7 +934,8 @@ const QueueRow = memo(function QueueRow({
>
<Pressable
onPress={onJump}
style={({ pressed }) => [styles.rowPressable, pressed && styles.rowPressed]}
android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.rowPressable}
accessibilityRole="button"
accessibilityLabel={`Play ${title}`}
accessibilityHint="Opens this song in the queue"
@@ -1023,9 +1031,6 @@ const useStyles = createThemedStyles((colors) => ({
rowPressable: {
height: QUEUE_ROW_HEIGHT,
},
rowPressed: {
opacity: 0.72,
},
row: {
flexDirection: 'row',
alignItems: 'center',
@@ -1090,9 +1095,6 @@ const useStyles = createThemedStyles((colors) => ({
gap: spacing.sm,
paddingVertical: spacing.md,
},
actionBtnPressed: {
opacity: 0.7,
},
actionText: {
color: colors.accent,
},
src/components/queue/RemoteQueueSheet.tsx
+5 -5
View File
@@ -17,6 +17,7 @@ import { FlashList, type ListRenderItemInfo } from '@shopify/flash-list';
import { Text } from '@/components/Text';
import { radius, spacing } from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { formatDuration } from '@/lib/format';
import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
import type { DesktopRemoteQueueItem } from '@/types/desktopRemote';
@@ -28,6 +29,7 @@ interface RemoteQueueSheetProps {
export function RemoteQueueSheet({ onClose }: RemoteQueueSheetProps) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
const queue = useDesktopRemoteStore((s) => s.queue);
const snapPoints = useMemo(() => ['58%', '100%'], []);
const renderFlashListScrollComponent = useBottomSheetScrollableCreator();
@@ -66,7 +68,8 @@ export function RemoteQueueSheet({ onClose }: RemoteQueueSheetProps) {
const renderItem = useCallback(
({ item }: ListRenderItemInfo<DesktopRemoteQueueItem>) => (
<Pressable
style={({ pressed }) => [styles.row, pressed && !item.isCurrent && styles.rowPressed]}
android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.row}
onPress={() => playItem(item)}
disabled={item.isCurrent}
accessibilityRole="button"
@@ -95,7 +98,7 @@ export function RemoteQueueSheet({ onClose }: RemoteQueueSheetProps) {
) : null}
</Pressable>
),
[playItem, colors, styles]
[playItem, colors, styles, ripple]
);
return (
@@ -159,9 +162,6 @@ const useStyles = createThemedStyles((colors) => ({
alignItems: 'center',
gap: spacing.md,
},
rowPressed: {
opacity: 0.6,
},
rowText: {
flex: 1,
minWidth: 0,
src/components/search/QuickSearchOverlay.tsx
+9 -5
View File
@@ -28,6 +28,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import { rgbaFromHex } from '@/theme/colorUtils';
import { enqueueTop, playTracks } from '@/audio/playbackController';
import { dbTrackToTrack } from '@/library/trackAdapter';
@@ -483,6 +484,7 @@ function ResultRow({
onQueueTrack: (track: DbTrack) => void;
}) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const isTrack = result.kind === 'track';
const isShowMode = result.kind === 'show-all' || result.kind === 'show-top';
@@ -494,7 +496,7 @@ function ResultRow({
};
return (
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={[styles.resultRow, active && styles.resultRowActive, isShowMode && styles.showModeRow]}
onPress={onPress}
accessibilityRole="button"
@@ -509,7 +511,7 @@ function ResultRow({
</Text>
</View>
{isTrack ? (
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.queueButton}
onPress={queueTrack}
hitSlop={8}
@@ -535,6 +537,7 @@ function QuickSearchPanel({
onClose: () => void;
}) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const router = useRouter();
const insets = useSafeAreaInsets();
@@ -1005,7 +1008,7 @@ function QuickSearchPanel({
style={styles.input}
/>
{query.length > 0 ? (
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
onPress={() => updateQuery('')}
hitSlop={8}
accessibilityRole="button"
@@ -1014,7 +1017,7 @@ function QuickSearchPanel({
<Ionicons name="close-circle" size={18} color={colors.textTertiary} />
</Pressable>
) : null}
<Pressable onPress={close} hitSlop={8} accessibilityRole="button" accessibilityLabel="Close search">
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={close} hitSlop={8} accessibilityRole="button" accessibilityLabel="Close search">
<Ionicons name="close" size={20} color={colors.textSecondary} />
</Pressable>
</View>
@@ -1066,6 +1069,7 @@ function QuickSearchPanel({
export function QuickSearchOverlay() {
const styles = useStyles();
const ripple = useRipple();
const isOpen = useSearchStore((s) => s.isQuickSearchOpen);
const initialQuery = useSearchStore((s) => s.initialQuery);
const openVersion = useSearchStore((s) => s.openVersion);
@@ -1085,7 +1089,7 @@ export function QuickSearchOverlay() {
onRequestClose={close}
>
<View style={styles.modalRoot}>
<Pressable style={StyleSheet.absoluteFill} onPress={close} accessibilityRole="button" />
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={StyleSheet.absoluteFill} onPress={close} accessibilityRole="button" />
{isOpen ? (
<QuickSearchPanel key={openVersion} initialQuery={initialQuery} onClose={close} />
) : null}
src/components/settings/AccentSwatchRow.tsx
+3 -1
View File
@@ -4,6 +4,7 @@ import { Text } from '@/components/Text';
import { spacing } from '@/theme';
import { ACCENTS, ACCENT_IDS, type AccentId } from '@/theme/accents';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
const SWATCH_SIZE = 36;
@@ -15,6 +16,7 @@ interface AccentSwatchRowProps {
/** Circular accent swatches; the selected one gets a ring + checkmark. */
export function AccentSwatchRow({ value, onChange }: AccentSwatchRowProps) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
return (
<View style={styles.wrap}>
@@ -22,7 +24,7 @@ export function AccentSwatchRow({ value, onChange }: AccentSwatchRowProps) {
{ACCENT_IDS.map((id) => {
const selected = id === value;
return (
<Pressable
<Pressable android_ripple={ripple.bounded}
key={id}
onPress={() => onChange(id)}
accessibilityRole="radio"
src/components/settings/SettingsPanels.tsx
+12 -6
View File
@@ -16,6 +16,7 @@ import {
} from '@/components/settings/SettingsSectionScaffold';
import { radius, spacing } from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
import type { ReplayGainMode } from '@/audio/normalization';
import type { ArtistGroupingMode } from '@/library/artistGrouping';
import type { BaseThemeId, PreferredDark } from '@/theme/resolve';
@@ -81,6 +82,7 @@ export function themeOptionTitle(id: BaseThemeId): string {
export function AppearanceSettingsPanel() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const baseTheme = useThemeStore((s) => s.baseTheme);
const preferredDark = useThemeStore((s) => s.preferredDark);
@@ -102,7 +104,7 @@ export function AppearanceSettingsPanel() {
{options.map((option) => {
const selected = option.id === baseTheme;
return (
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
key={option.id}
style={[styles.option, selected && styles.optionSelected]}
onPress={() => void setBaseTheme(option.id)}
@@ -159,6 +161,7 @@ function LibraryFolderSettingsRow({
onRemove: (folder: FolderWithCount) => void;
}) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
return (
<View style={styles.folderSettingsRow}>
@@ -181,7 +184,7 @@ function LibraryFolderSettingsRow({
: 'Access lost. Remove and add again.'}
</Text>
</View>
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
hitSlop={8}
disabled={disabled}
onPress={() => onRemove(folder)}
@@ -197,6 +200,7 @@ function LibraryFolderSettingsRow({
function LibraryFoldersSettings() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const folders = useLibraryStore((s) => s.folders);
const isScanning = useLibraryStore((s) => s.isScanning);
@@ -230,7 +234,7 @@ function LibraryFoldersSettings() {
: `${formatFolderCount(folders.length)} / ${formatTrackCount(totalTracks)}`}
</Text>
</View>
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={[styles.folderPrimaryAction, isScanning && styles.actionDisabled]}
disabled={isScanning}
onPress={() => void addFolder()}
@@ -245,7 +249,7 @@ function LibraryFoldersSettings() {
{folders.length > 0 ? (
<View style={styles.folderSettingsActions}>
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={[styles.folderSecondaryAction, isScanning && styles.actionDisabled]}
disabled={isScanning}
onPress={() => void rescan()}
@@ -291,6 +295,7 @@ function LibraryFoldersSettings() {
export function LibrarySettingsPanel() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const groupingMode = useSettingsStore((s) => s.artistGroupingMode);
const setArtistGroupingMode = useSettingsStore((s) => s.setArtistGroupingMode);
@@ -314,7 +319,7 @@ export function LibrarySettingsPanel() {
{ARTIST_GROUPING_OPTIONS.map((option) => {
const selected = option.mode === groupingMode;
return (
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
key={option.mode}
style={[styles.option, selected && styles.optionSelected]}
onPress={() => void setArtistGroupingMode(option.mode)}
@@ -353,6 +358,7 @@ export function LibrarySettingsPanel() {
export function AudioSettingsPanel() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const normalizationEnabled = useAudioSettingsStore((s) => s.normalizationEnabled);
const normalizationTargetLufs = useAudioSettingsStore((s) => s.normalizationTargetLufs);
@@ -400,7 +406,7 @@ export function AudioSettingsPanel() {
{REPLAYGAIN_MODES.map((m) => {
const selected = m.mode === replayGainMode;
return (
<Pressable
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
key={m.mode}
style={[styles.modePill, selected && styles.modePillSelected]}
onPress={() => void setReplayGainMode(m.mode)}
src/components/settings/SettingsSectionScaffold.tsx
+10 -2
View File
@@ -14,6 +14,7 @@ import { Screen } from '@/components/Screen';
import { Text } from '@/components/Text';
import { radius, spacing } from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
export type SettingsIconName = keyof typeof Ionicons.glyphMap;
@@ -26,12 +27,18 @@ export function SettingsSectionScreen({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
const router = useRouter();
return (
<Screen>
<View style={styles.header}>
<Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
<Pressable
android_ripple={ripple.bounded}
style={styles.back}
onPress={() => router.back()}
hitSlop={8}
>
<Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
<Text variant="body" color={colors.textSecondary}>
Settings
@@ -98,8 +105,9 @@ export function SettingsNavRow({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
return (
<Pressable style={styles.row} onPress={onPress} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.row} onPress={onPress} accessibilityRole="button">
<View style={styles.rowIcon}>
<Ionicons name={icon} size={20} color={colors.accent} />
</View>
src/components/sheets/ActionSheet.tsx
+4 -4
View File
@@ -12,6 +12,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
export interface ActionSheetItem {
key: string;
@@ -39,6 +40,7 @@ export function ActionSheet({
}) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
const insets = useSafeAreaInsets();
return (
@@ -60,7 +62,8 @@ export function ActionSheet({
{items.map((item) => (
<Pressable
key={item.key}
style={({ pressed }) => [styles.item, pressed && styles.itemPressed]}
android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.item}
onPress={item.onPress}
accessibilityRole="button"
>
@@ -122,9 +125,6 @@ const useStyles = createThemedStyles((colors) => ({
gap: spacing.md,
paddingVertical: spacing.md,
},
itemPressed: {
opacity: 0.6,
},
itemLabel: {
flex: 1,
},
src/components/sheets/AppSheet.tsx
+4 -4
View File
@@ -16,6 +16,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
export function AppSheet({ onClose, children }: { onClose: () => void; children: ReactNode }) {
const styles = useStyles();
@@ -95,12 +96,14 @@ export function AppSheetItem({
}: AppSheetItemProps) {
const styles = useStyles();
const colors = useColors();
const ripple = useRipple();
const tint = destructive ? colors.warning : selected ? colors.accentTextStrong : colors.textPrimary;
return (
<View style={styles.itemRow}>
<Pressable
style={({ pressed }) => [styles.item, pressed && styles.itemPressed]}
android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
style={styles.item}
onPress={onPress}
accessibilityRole="button"
>
@@ -156,9 +159,6 @@ const useStyles = createThemedStyles((colors) => ({
gap: spacing.md,
paddingVertical: spacing.md,
},
itemPressed: {
opacity: 0.6,
},
itemLabel: {
flex: 1,
},
src/components/sheets/PlaylistPickerSheet.tsx
+4 -2
View File
@@ -17,6 +17,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { usePlaylistStore } from '@/stores/playlistStore';
import type { DbTrack } from '@/types/library';
@@ -41,6 +42,7 @@ export function PlaylistPickerSheet({
onAdded,
}: PlaylistPickerSheetProps) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const [step, setStep] = useState<'pick' | 'create'>('pick');
const [playlistName, setPlaylistName] = useState('');
@@ -82,12 +84,12 @@ export function PlaylistPickerSheet({
selectionColor={colors.accent}
/>
<View style={styles.actions}>
<Pressable style={[styles.btn, styles.cancel]} onPress={() => setStep('pick')}>
<Pressable android_ripple={ripple.bounded} style={[styles.btn, styles.cancel]} onPress={() => setStep('pick')}>
<Text variant="label" color={colors.textSecondary}>
Back
</Text>
</Pressable>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.btn, styles.create, !trimmedPlaylistName && styles.createDisabled]}
disabled={!trimmedPlaylistName}
onPress={addToNewPlaylist}
src/components/sheets/TextPromptModal.tsx
+4 -2
View File
@@ -14,6 +14,7 @@ import {
spacing,
} from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
interface TextPromptModalProps {
visible: boolean;
@@ -41,6 +42,7 @@ function TextPromptModalInner({
onClose,
}: TextPromptModalProps) {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const [value, setValue] = useState(initialValue);
const trimmed = value.trim();
@@ -69,12 +71,12 @@ function TextPromptModalInner({
selectionColor={colors.accent}
/>
<View style={styles.actions}>
<Pressable style={styles.action} onPress={onClose} accessibilityRole="button">
<Pressable android_ripple={ripple.bounded} style={styles.action} onPress={onClose} accessibilityRole="button">
<Text variant="body" color={colors.textSecondary}>
Cancel
</Text>
</Pressable>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.action, !trimmed && styles.actionDisabled]}
disabled={!trimmed}
onPress={submit}
src/components/sync/SyncConflictPrompt.tsx
+6 -4
View File
@@ -13,6 +13,7 @@ import { router, usePathname } from 'expo-router';
import { Text } from '@/components/Text';
import { radius, spacing } from '@/theme';
import { createThemedStyles, useColors } from '@/theme/themed';
import { useRipple } from '@/theme/ripple';
import { formatRelativeTime } from '@/lib/format';
import {
buildSyncConflictResolutionPreview,
@@ -64,6 +65,7 @@ function diffLine(desktop: SyncPlaylistSnapshot, phone: SyncPlaylistSnapshot): s
export function SyncConflictPrompt() {
const styles = useStyles();
const ripple = useRipple();
const colors = useColors();
const conflicts = useDesktopSyncStore((s) => s.conflicts);
const status = useDesktopSyncStore((s) => s.status);
@@ -158,7 +160,7 @@ export function SyncConflictPrompt() {
</Text>
<View style={styles.choiceList}>
{options.map((resolution) => (
<Pressable
<Pressable android_ripple={ripple.bounded}
key={resolution}
style={[
styles.choiceRow,
@@ -183,7 +185,7 @@ export function SyncConflictPrompt() {
</Text>
</View>
{count > 1 ? (
<Pressable onPress={review} style={styles.reviewLink}>
<Pressable android_ripple={ripple.bounded} onPress={review} style={styles.reviewLink}>
<Text variant="caption" color={colors.accent}>
Review all {count} conflicts
</Text>
@@ -191,12 +193,12 @@ export function SyncConflictPrompt() {
) : null}
</ScrollView>
<View style={styles.actions}>
<Pressable style={styles.secondaryButton} onPress={dismissConflictPrompt}>
<Pressable android_ripple={ripple.bounded} style={styles.secondaryButton} onPress={dismissConflictPrompt}>
<Text variant="body" color={colors.textSecondary}>
Not now
</Text>
</Pressable>
<Pressable
<Pressable android_ripple={ripple.bounded}
style={[styles.primaryButton, (!selectedResolution || busy) && styles.disabled]}
disabled={!selectedResolution || busy}
onPress={confirm}
src/stores/playerUiStore.ts
+25
View File
@@ -0,0 +1,25 @@
import { create } from 'zustand';
/**
* Now-playing overlay gate. The player is an always-mounted overlay above the
* navigator (not a route): `everOpened` latches the first mount so cold start
* pays nothing, `playerOpen` drives the UI-thread slide open/close. Session
* state only — never persisted.
*/
interface PlayerUiStore {
playerOpen: boolean;
/** Mount latch: once true the overlay stays mounted (hidden) for instant reopen. */
everOpened: boolean;
openPlayer: () => void;
closePlayer: () => void;
/** Mount the overlay hidden (e.g. shortly after playback starts) so even the first open is instant. */
prewarm: () => void;
}
export const usePlayerUiStore = create<PlayerUiStore>((set) => ({
playerOpen: false,
everOpened: false,
openPlayer: () => set({ playerOpen: true, everOpened: true }),
closePlayer: () => set({ playerOpen: false }),
prewarm: () => set({ everOpened: true }),
}));
src/theme/palettes.ts
+8 -2
View File
@@ -5,8 +5,8 @@
* INVARIANT: solid-color tokens must stay 6-digit `#rrggbb` hex — the Skia
* visualizers (SpectrumCurve, OscilloscopeWave, EQGraph, GraphicResponseCurve)
* slice hex chars to build alpha variants. Only `glass*`, `*Glow`,
* `overlayFaint`, and `backdrop` may be `rgba()` strings (they are never fed
* through those helpers).
* `overlayFaint`, `ripple`, and `backdrop` may be `rgba()` strings (they are
* never fed through those helpers).
*/
export interface Palette {
@@ -19,6 +19,8 @@ export interface Palette {
glassBg: string;
glassBorder: string;
glassHighlight: string;
/** Native android_ripple tint (glassHighlight family, transient so slightly stronger). */
ripple: string;
// Text ramp
textPrimary: string;
@@ -65,6 +67,7 @@ export const midnightBase: BasePalette = {
glassBg: 'rgba(124, 146, 196, 0.05)',
glassBorder: 'rgba(124, 146, 196, 0.16)',
glassHighlight: 'rgba(140, 162, 208, 0.08)',
ripple: 'rgba(140, 162, 208, 0.13)',
textPrimary: '#e2e8f4',
textSecondary: '#8a98b8',
@@ -92,6 +95,7 @@ export const darkBase: BasePalette = {
glassBg: 'rgba(165, 175, 195, 0.05)',
glassBorder: 'rgba(165, 175, 195, 0.16)',
glassHighlight: 'rgba(175, 185, 205, 0.08)',
ripple: 'rgba(175, 185, 205, 0.13)',
textPrimary: '#e6e8ec',
textSecondary: '#979da8',
@@ -120,6 +124,7 @@ export const amoledBase: BasePalette = {
glassBg: 'rgba(124, 146, 196, 0.06)',
glassBorder: 'rgba(124, 146, 196, 0.20)',
glassHighlight: 'rgba(140, 162, 208, 0.10)',
ripple: 'rgba(140, 162, 208, 0.14)',
textPrimary: '#e2e8f4',
textSecondary: '#8a98b8',
@@ -148,6 +153,7 @@ export const lightBase: BasePalette = {
glassBg: 'rgba(52, 74, 130, 0.06)',
glassBorder: 'rgba(52, 74, 130, 0.18)',
glassHighlight: 'rgba(52, 74, 130, 0.10)',
ripple: 'rgba(52, 74, 130, 0.12)',
textPrimary: '#171d2e',
textSecondary: '#4d5a78',
src/theme/resolve.ts
+2
View File
@@ -83,6 +83,7 @@ export function buildMaterialYouPalette(ramps: SystemPalette, isDark: boolean):
glassBg: rgbaFromHex(tone(ramps.accent2, 200), 0.06),
glassBorder: rgbaFromHex(tone(ramps.accent2, 200), 0.18),
glassHighlight: rgbaFromHex(tone(ramps.accent2, 200), 0.09),
ripple: rgbaFromHex(tone(ramps.accent2, 200), 0.13),
textPrimary: tone(ramps.neutral1, 50),
textSecondary: tone(ramps.neutral2, 300),
textTertiary: tone(ramps.neutral2, 500),
@@ -107,6 +108,7 @@ export function buildMaterialYouPalette(ramps: SystemPalette, isDark: boolean):
glassBg: rgbaFromHex(tone(ramps.neutral2, 700), 0.06),
glassBorder: rgbaFromHex(tone(ramps.neutral2, 700), 0.16),
glassHighlight: rgbaFromHex(tone(ramps.neutral2, 700), 0.09),
ripple: rgbaFromHex(tone(ramps.neutral2, 700), 0.12),
textPrimary: tone(ramps.neutral1, 900),
textSecondary: tone(ramps.neutral2, 700),
textTertiary: tone(ramps.neutral2, 500),
src/theme/ripple.ts
+53
View File
@@ -0,0 +1,53 @@
// Native android_ripple configs — touch feedback drawn by the Android render
// thread the frame the finger lands, independent of JS-thread load. This is
// the app's ONE press-feedback system: JS `({ pressed })` dim styles were
// removed in its favor (persistent selected/active styles are state, not
// feedback, and stay).
import { useMemo } from 'react';
import type { PressableAndroidRippleConfig } from 'react-native';
import { useColors } from '@/theme/themed';
/**
* Fixed light overlay for accent-filled buttons — the theme `ripple` token is
* invisible on a saturated accent fill. Theme-invariant on purpose (Material's
* on-color ripple), so it is not a palette token.
*/
const ON_ACCENT_COLOR = 'rgba(255, 255, 255, 0.24)';
/**
* `unstable_pressDelay` for Pressables inside SCROLLABLE content (rows, tiles,
* sheet items): a scroll flick claims the touch before the delay elapses, so
* scrolling never flashes ripples on everything it grazes — mirroring Android's
* ViewConfiguration tap timeout in native lists. Quick real taps still ripple
* (RN fires press-in/out on release even under the delay). Fixed chrome
* (tab bar, transport, action bars) stays instant — no delay there.
*/
export const SCROLL_PRESS_DELAY = 80;
export interface RippleSet {
/** Clips to the Pressable rect/borderRadius — rows, cards, pills, sheet items. */
bounded: PressableAndroidRippleConfig;
/** Bounded but drawn ABOVE children — tiles/cards whose artwork covers the Pressable. */
tile: PressableAndroidRippleConfig;
/** Circular unbounded ripple for transparent icon buttons; radius ≈ half the touch target. */
icon: (radius: number) => PressableAndroidRippleConfig;
/** Light overlay for accent-filled buttons (bounded unless a radius is given). */
onAccent: (radius?: number) => PressableAndroidRippleConfig;
}
export function useRipple(): RippleSet {
const colors = useColors();
return useMemo(
() => ({
bounded: { color: colors.ripple },
tile: { color: colors.ripple, foreground: true },
icon: (radius: number) => ({ color: colors.ripple, borderless: true, radius }),
onAccent: (radius?: number) =>
radius == null
? { color: ON_ACCENT_COLOR, foreground: true }
: { color: ON_ACCENT_COLOR, borderless: true, radius },
}),
[colors.ripple]
);
}