diff --git a/app/(auth)/now-playing.tsx b/app/(auth)/now-playing.tsx index e2f7d473..f2bef428 100644 --- a/app/(auth)/now-playing.tsx +++ b/app/(auth)/now-playing.tsx @@ -1,4 +1,5 @@ import { Ionicons } from "@expo/vector-icons"; +import { BottomSheetModalProvider } from "@gorhom/bottom-sheet"; import type { BaseItemDto, MediaSourceInfo, @@ -24,6 +25,9 @@ import { useSharedValue } from "react-native-reanimated"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { Badge } from "@/components/Badge"; import { Text } from "@/components/common/Text"; +import { CreatePlaylistModal } from "@/components/music/CreatePlaylistModal"; +import { PlaylistPickerSheet } from "@/components/music/PlaylistPickerSheet"; +import { TrackOptionsSheet } from "@/components/music/TrackOptionsSheet"; import { apiAtom } from "@/providers/JellyfinProvider"; import { type RepeatMode, @@ -55,6 +59,9 @@ export default function NowPlayingScreen() { const router = useRouter(); const insets = useSafeAreaInsets(); const [viewMode, setViewMode] = useState("player"); + const [trackOptionsOpen, setTrackOptionsOpen] = useState(false); + const [playlistPickerOpen, setPlaylistPickerOpen] = useState(false); + const [createPlaylistOpen, setCreatePlaylistOpen] = useState(false); const { currentTrack, @@ -134,6 +141,18 @@ export default function NowPlayingScreen() { setRepeatMode(nextMode); }, [repeatMode, setRepeatMode]); + const handleOptionsPress = useCallback(() => { + setTrackOptionsOpen(true); + }, []); + + const handleAddToPlaylist = useCallback(() => { + setPlaylistPickerOpen(true); + }, []); + + const handleCreateNewPlaylist = useCallback(() => { + setCreatePlaylistOpen(true); + }, []); + const getRepeatIcon = (): string => { switch (repeatMode) { case "one": @@ -150,108 +169,136 @@ export default function NowPlayingScreen() { if (!currentTrack) { return ( + + + No track playing + + + ); + } + + return ( + - No track playing - - ); - } - - return ( - - {/* Header */} - - - - - - + {/* Header */} + setViewMode("player")} - className='px-3 py-1' + onPress={handleClose} + hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} + className='p-2' > - - Now Playing - + - setViewMode("queue")} - className='px-3 py-1' - > - + setViewMode("player")} + className='px-3 py-1' > - Queue ({queue.length}) - + + Now Playing + + + setViewMode("queue")} + className='px-3 py-1' + > + + Queue ({queue.length}) + + + + + - - - {viewMode === "player" ? ( - + ) : ( + + )} + + - ) : ( - - )} - + + + ); }