astra/astra-mobile
1
0
Fork 0
mirror of https://github.com/Boof2015/astra-mobile.git synced 2026-08-19 04:06:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

move now playing buttons around

Browse Source
This commit is contained in:
Boof2015
2026-07-13 12:06:51 -04:00
parent 6fc88c30a1
commit d757e51255
2 changed files with 69 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/lyrics/LyricsView.tsx
+29 -31
View File
@@ -1,8 +1,8 @@
// Lyrics mode for now-playing — a lyrics-first takeover that replaces the whole
// art/controls body (and the standard header). Lyrics fill the screen over the
// blurred-art wash; a slim strip on top (dismiss · track · favorite · exit) and a
// minimal control bar below (progress + prev/play/next) stay permanently visible
// so you never lose control to go fully immersive. The ♫ toggle exits back to the
// blurred-art wash; a slim strip on top (dismiss + track) and a minimal control
// bar below (favorite + prev/play/next + exit) stay permanently visible so you
// never lose control to go fully immersive. The lyrics toggle exits back to the
// art view; swipe-down still closes the player.
import { Image } from 'expo-image';
@@ -94,32 +94,6 @@ export function LyricsView({
</View>
</View>
<TactilePressable android_ripple={ripple.bounded}
onPress={onToggleFavorite}
haptic={isFavorite ? 'toggleOff' : 'toggleOn'}
confirmationScale={1.08}
hitSlop={10}
style={styles.stripBtn}
accessibilityLabel={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
accessibilityState={{ selected: isFavorite }}
>
<Ionicons
name={isFavorite ? 'heart' : 'heart-outline'}
size={20}
color={isFavorite ? colors.accent : colors.textTertiary}
/>
</TactilePressable>
<TactilePressable android_ripple={ripple.bounded}
onPress={onExitLyrics}
haptic="selection"
hitSlop={10}
style={styles.stripBtn}
accessibilityLabel="Hide lyrics"
accessibilityState={{ selected: true }}
>
<MaterialCommunityIcons name="script-text-outline" size={20} color={colors.accent} />
</TactilePressable>
</View>
<LyricsBand
@@ -133,6 +107,21 @@ export function LyricsView({
<View style={styles.controls}>
<SeekBar currentTime={currentTime} duration={duration} trackKey={track.id} onSeek={onSeek} />
<View style={styles.transport}>
<TactilePressable android_ripple={ripple.bounded}
onPress={onToggleFavorite}
haptic={isFavorite ? 'toggleOff' : 'toggleOn'}
confirmationScale={1.08}
hitSlop={10}
style={styles.transportBtn}
accessibilityLabel={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
accessibilityState={{ selected: isFavorite }}
>
<Ionicons
name={isFavorite ? 'heart' : 'heart-outline'}
size={22}
color={isFavorite ? colors.accent : colors.textTertiary}
/>
</TactilePressable>
<TactilePressable android_ripple={ripple.bounded} onPress={onPrev} haptic="action" hitSlop={12} style={styles.transportBtn} accessibilityLabel="Previous">
<Ionicons name="play-skip-back" size={28} color={colors.textPrimary} />
</TactilePressable>
@@ -146,6 +135,16 @@ export function LyricsView({
<TactilePressable android_ripple={ripple.bounded} onPress={onNext} haptic="action" hitSlop={12} style={styles.transportBtn} accessibilityLabel="Next">
<Ionicons name="play-skip-forward" size={28} color={colors.textPrimary} />
</TactilePressable>
<TactilePressable android_ripple={ripple.bounded}
onPress={onExitLyrics}
haptic="selection"
hitSlop={10}
style={styles.transportBtn}
accessibilityLabel="Hide lyrics"
accessibilityState={{ selected: true }}
>
<MaterialCommunityIcons name="script-text-outline" size={22} color={colors.accent} />
</TactilePressable>
</View>
</View>
</View>
@@ -210,8 +209,7 @@ const useStyles = createThemedStyles((colors) => ({
transport: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: spacing.xl,
justifyContent: 'space-between',
marginTop: spacing.xs,
},
transportBtn: {
src/components/player/NowPlayingOverlay.tsx
+40 -42
View File
@@ -555,48 +555,6 @@ export function NowPlayingOverlay() {
</Text>
</View>
<View style={[styles.headerSide, styles.headerActions]}>
{!isDesktopTarget && track ? (
<TactilePressable
style={styles.headerBtn} android_ripple={ripple.icon(22)}
haptic="selection"
onPress={showLyrics}
hitSlop={12}
accessibilityLabel={
hasTabletCompanion
? 'Show lyrics in companion'
: lyricsVisible
? 'Hide lyrics'
: 'Show lyrics'
}
accessibilityState={{
selected: hasTabletCompanion
? nowPlayingCompanion === 'lyrics'
: lyricsVisible,
}}
>
<PlayerStateIcon
selected={
(hasTabletCompanion && nowPlayingCompanion === 'lyrics') ||
(!hasTabletCompanion && lyricsVisible)
}
size={20}
inactive={
<MaterialCommunityIcons
name="script-text-outline"
size={20}
color={colors.textSecondary}
/>
}
active={
<MaterialCommunityIcons
name="script-text-outline"
size={20}
color={colors.accent}
/>
}
/>
</TactilePressable>
) : null}
<Pressable
style={styles.headerBtn} android_ripple={ripple.icon(22)}
onPress={openMenu}
@@ -1229,6 +1187,46 @@ export function NowPlayingOverlay() {
<FormatBadges track={track} wrap={false} variant="plain" />
</View>
<View style={styles.subActions}>
<TactilePressable
hitSlop={10}
style={styles.subBtn} android_ripple={ripple.icon(20)}
haptic="selection"
onPress={showLyrics}
accessibilityLabel={
hasTabletCompanion
? 'Show lyrics in companion'
: lyricsVisible
? 'Hide lyrics'
: 'Show lyrics'
}
accessibilityState={{
selected: hasTabletCompanion
? nowPlayingCompanion === 'lyrics'
: lyricsVisible,
}}
>
<PlayerStateIcon
selected={
(hasTabletCompanion && nowPlayingCompanion === 'lyrics') ||
(!hasTabletCompanion && lyricsVisible)
}
size={SUB_ICON_SIZE + 2}
inactive={
<MaterialCommunityIcons
name="script-text-outline"
size={SUB_ICON_SIZE + 2}
color={colors.textTertiary}
/>
}
active={
<MaterialCommunityIcons
name="script-text-outline"
size={SUB_ICON_SIZE + 2}
color={colors.accent}
/>
}
/>
</TactilePressable>
<TactilePressable
hitSlop={10}
style={styles.subBtn} android_ripple={ripple.icon(20)}