Add files via upload
This commit is contained in:
Savsis
GitHub
parent
81ce3b2271
commit
9fb037a648
13 changed files with 832 additions and 518 deletions
|
|
@ -1,24 +1,24 @@
|
|||
import { useCallback } from 'react';
|
||||
import { View, Text, StyleSheet, Pressable } from 'react-native';
|
||||
import Animated, {
|
||||
useSharedValue, useAnimatedStyle, withSpring, FadeInDown, FadeOutDown,
|
||||
useAnimatedGestureHandler, runOnJS,
|
||||
useSharedValue, useAnimatedStyle, withSpring,
|
||||
FadeInDown, FadeOutDown, useAnimatedGestureHandler, runOnJS,
|
||||
} from 'react-native-reanimated';
|
||||
import { PanGestureHandler } from 'react-native-gesture-handler';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { Image } from 'expo-image';
|
||||
import Svg, { Path } from 'react-native-svg';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import { Colors, Font, Radius, Spacing, TAB_BAR_HEIGHT, MINI_PLAYER_HEIGHT } from '../constants/theme';
|
||||
import { usePlayer } from '../store';
|
||||
import Svg, { Path, Rect } from 'react-native-svg';
|
||||
import { Colors, Font, Radius, MINI_PLAYER_HEIGHT, TAB_BAR_HEIGHT } from '../constants/theme';
|
||||
import { usePlayer, useLikes } from '../store';
|
||||
import { useAudio } from '../hooks/useAudio';
|
||||
import { coverUrl } from '../services/api';
|
||||
|
||||
export default function MiniPlayer() {
|
||||
const { queue, index, playing, expanded, setExpanded } = usePlayer();
|
||||
const { queue, index, playing, expanded, setExpanded, progress, duration } = usePlayer();
|
||||
const { togglePlay } = useAudio();
|
||||
const track = queue[index];
|
||||
const insets = useSafeAreaInsets();
|
||||
const { toggleLike, isLiked } = useLikes();
|
||||
const track = queue[index];
|
||||
|
||||
const translateY = useSharedValue(0);
|
||||
const opacity = useSharedValue(1);
|
||||
|
|
@ -27,13 +27,11 @@ export default function MiniPlayer() {
|
|||
onActive: (e) => {
|
||||
if (e.translationY < 0) {
|
||||
translateY.value = Math.max(e.translationY, -80);
|
||||
opacity.value = 1 + e.translationY / 80;
|
||||
opacity.value = 1 + e.translationY / 80;
|
||||
}
|
||||
},
|
||||
onEnd: (e) => {
|
||||
if (e.translationY < -40 || e.velocityY < -400) {
|
||||
runOnJS(openPlayer)();
|
||||
}
|
||||
if (e.translationY < -40 || e.velocityY < -400) runOnJS(openPlayer)();
|
||||
translateY.value = withSpring(0);
|
||||
opacity.value = withSpring(1);
|
||||
},
|
||||
|
|
@ -54,88 +52,123 @@ export default function MiniPlayer() {
|
|||
togglePlay();
|
||||
}, [togglePlay]);
|
||||
|
||||
const onNext = useCallback(() => {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
||||
const ni = usePlayer.getState().nextTrack();
|
||||
usePlayer.getState().setIndex(ni);
|
||||
}, []);
|
||||
|
||||
const onPrev = useCallback(() => {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
||||
const pi = usePlayer.getState().prevTrack();
|
||||
usePlayer.getState().setIndex(pi);
|
||||
}, []);
|
||||
|
||||
if (!track || expanded) return null;
|
||||
|
||||
const cover = coverUrl(track.cover_url);
|
||||
const cover = coverUrl(track.cover_url);
|
||||
const liked = isLiked(track.id);
|
||||
const pct = duration > 0 ? (progress / duration) * 100 : 0;
|
||||
|
||||
return (
|
||||
<PanGestureHandler onGestureEvent={gestureHandler}>
|
||||
<Animated.View
|
||||
style={[styles.wrap, animStyle, { bottom: TAB_BAR_HEIGHT }]}
|
||||
style={[s.wrap, animStyle, { bottom: TAB_BAR_HEIGHT }]}
|
||||
entering={FadeInDown.springify()}
|
||||
exiting={FadeOutDown.springify()}
|
||||
>
|
||||
<BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
|
||||
<View style={styles.border} />
|
||||
{/* Glass background */}
|
||||
<BlurView intensity={30} tint="dark" style={StyleSheet.absoluteFill} />
|
||||
<View style={[StyleSheet.absoluteFill, s.bgTint]} />
|
||||
|
||||
<Pressable style={styles.row} onPress={openPlayer} android_ripple={null}>
|
||||
{/* Progress line at top */}
|
||||
<View style={s.progressBg}>
|
||||
<View style={[s.progressFill, { width: `${pct}%` as any }]} />
|
||||
</View>
|
||||
|
||||
{/* Content row */}
|
||||
<Pressable style={s.row} onPress={openPlayer} android_ripple={null}>
|
||||
{/* Cover */}
|
||||
<Image
|
||||
source={cover ? { uri: cover } : require('../assets/placeholder.png')}
|
||||
style={styles.cover}
|
||||
style={s.cover}
|
||||
contentFit="cover"
|
||||
transition={200}
|
||||
/>
|
||||
|
||||
{/* Info */}
|
||||
<View style={styles.info}>
|
||||
<Text style={styles.title} numberOfLines={1}>{track.title}</Text>
|
||||
<Text style={styles.artist} numberOfLines={1}>{track.artist}</Text>
|
||||
<View style={s.info}>
|
||||
<Text style={s.title} numberOfLines={1}>{track.title}</Text>
|
||||
<Text style={s.artist} numberOfLines={1}>{track.artist}</Text>
|
||||
</View>
|
||||
|
||||
{/* Play/Pause */}
|
||||
<Pressable
|
||||
style={styles.btn}
|
||||
onPress={onPlayPress}
|
||||
hitSlop={12}
|
||||
>
|
||||
{playing ? <PauseIcon /> : <PlayIcon />}
|
||||
</Pressable>
|
||||
{/* Controls */}
|
||||
<View style={s.controls}>
|
||||
{/* Like */}
|
||||
<Pressable
|
||||
onPress={(e) => { e.stopPropagation(); Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); toggleLike(track.id); }}
|
||||
hitSlop={10}
|
||||
style={s.ctlBtn}
|
||||
>
|
||||
<Svg width={18} height={18} viewBox="0 0 24 24" fill={liked ? Colors.pink : 'none'}>
|
||||
<Path
|
||||
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
|
||||
stroke={liked ? Colors.pink : Colors.text2}
|
||||
strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round"
|
||||
/>
|
||||
</Svg>
|
||||
</Pressable>
|
||||
|
||||
{/* Next */}
|
||||
<Pressable
|
||||
style={styles.btn}
|
||||
onPress={() => {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
||||
const next = usePlayer.getState().nextTrack();
|
||||
usePlayer.getState().setIndex(next);
|
||||
}}
|
||||
hitSlop={12}
|
||||
>
|
||||
<NextIcon />
|
||||
</Pressable>
|
||||
{/* Prev */}
|
||||
<Pressable
|
||||
onPress={(e) => { e.stopPropagation(); onPrev(); }}
|
||||
hitSlop={10}
|
||||
style={s.ctlBtn}
|
||||
>
|
||||
<Svg width={18} height={18} fill={Colors.text} viewBox="0 0 24 24">
|
||||
<Path d="M6 6h2v12H6zm3.5 6 8.5 6V6z" />
|
||||
</Svg>
|
||||
</Pressable>
|
||||
|
||||
{/* Play/Pause */}
|
||||
<Pressable
|
||||
onPress={(e) => { e.stopPropagation(); onPlayPress(); }}
|
||||
hitSlop={10}
|
||||
style={s.ctlBtn}
|
||||
>
|
||||
{playing
|
||||
? <Svg width={18} height={18} viewBox="0 0 24 24" fill={Colors.text}><Path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></Svg>
|
||||
: <Svg width={18} height={18} viewBox="0 0 24 24" fill={Colors.text}><Path d="M8 5v14l11-7z" /></Svg>
|
||||
}
|
||||
</Pressable>
|
||||
|
||||
{/* Next */}
|
||||
<Pressable
|
||||
onPress={(e) => { e.stopPropagation(); onNext(); }}
|
||||
hitSlop={10}
|
||||
style={s.ctlBtn}
|
||||
>
|
||||
<Svg width={18} height={18} fill={Colors.text} viewBox="0 0 24 24">
|
||||
<Path d="M6 18l8.5-6L6 6v12zm10-12v12h2V6h-2z" />
|
||||
</Svg>
|
||||
</Pressable>
|
||||
</View>
|
||||
</Pressable>
|
||||
|
||||
{/* Progress line */}
|
||||
<ProgressLine />
|
||||
</Animated.View>
|
||||
</PanGestureHandler>
|
||||
);
|
||||
}
|
||||
|
||||
function ProgressLine() {
|
||||
const { progress, duration } = usePlayer();
|
||||
const pct = duration > 0 ? (progress / duration) * 100 : 0;
|
||||
return (
|
||||
<View style={styles.progressBg}>
|
||||
<View style={[styles.progressFill, { width: `${pct}%` as any }]} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function PlayIcon() { return <Svg width={20} height={20} viewBox="0 0 24 24" fill={Colors.text}><Path d="M8 5v14l11-7z" /></Svg>; }
|
||||
function PauseIcon() { return <Svg width={20} height={20} viewBox="0 0 24 24" fill={Colors.text}><Path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></Svg>; }
|
||||
function NextIcon() { return <Svg width={20} height={20} viewBox="0 0 24 24" fill={Colors.text}><Path d="M6 18l8.5-6L6 6v12zm10-12v12h2V6h-2z" /></Svg>; }
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
wrap: { position: 'absolute', left: 0, right: 0, height: MINI_PLAYER_HEIGHT, overflow: 'hidden' },
|
||||
border: { position: 'absolute', top: 0, left: 0, right: 0, height: StyleSheet.hairlineWidth, backgroundColor: Colors.border },
|
||||
row: { flex: 1, flexDirection: 'row', alignItems: 'center', paddingHorizontal: Spacing.md, gap: Spacing.md },
|
||||
cover: { width: 42, height: 42, borderRadius: Radius.sm, backgroundColor: Colors.elevated },
|
||||
info: { flex: 1 },
|
||||
title: { color: Colors.text, fontSize: Font.sm, fontWeight: '600' },
|
||||
const s = StyleSheet.create({
|
||||
wrap: { position: 'absolute', left: 0, right: 0, height: MINI_PLAYER_HEIGHT, overflow: 'hidden', borderRadius: '14px 14px 0 0' as any, borderTopLeftRadius: 14, borderTopRightRadius: 14 },
|
||||
bgTint: { backgroundColor: 'rgba(10,10,10,0.4)' },
|
||||
progressBg: { position: 'absolute', top: 0, left: 0, right: 0, height: 2, backgroundColor: 'rgba(255,255,255,0.07)', zIndex: 2 },
|
||||
progressFill:{ height: 2, backgroundColor: Colors.accent },
|
||||
row: { flex: 1, flexDirection: 'row', alignItems: 'center', paddingLeft: 14, paddingRight: 4, gap: 12 },
|
||||
cover: { width: 44, height: 44, borderRadius: 9, backgroundColor: Colors.elevated, flexShrink: 0 },
|
||||
info: { flex: 1, minWidth: 0 },
|
||||
title: { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
|
||||
artist: { color: Colors.text2, fontSize: Font.xs, marginTop: 2 },
|
||||
btn: { width: 36, height: 36, alignItems: 'center', justifyContent: 'center' },
|
||||
progressBg: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, backgroundColor: Colors.border },
|
||||
progressFill:{ height: 2, backgroundColor: Colors.green },
|
||||
controls: { flexDirection: 'row', alignItems: 'center' },
|
||||
ctlBtn: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' },
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue