diff --git a/components/CurrentlyPlayingBar.tsx b/components/CurrentlyPlayingBar.tsx index 5fbd7b53..92a938a7 100644 --- a/components/CurrentlyPlayingBar.tsx +++ b/components/CurrentlyPlayingBar.tsx @@ -17,7 +17,6 @@ import Animated, { import Video from "react-native-video"; import { Text } from "./common/Text"; import { Loader } from "./Loader"; -import { debounce } from "lodash"; export const CurrentlyPlayingBar: React.FC = () => { const segments = useSegments(); @@ -25,7 +24,6 @@ export const CurrentlyPlayingBar: React.FC = () => { currentlyPlaying, pauseVideo, playVideo, - setCurrentlyPlayingState, stopPlayback, setVolume, setIsPlaying, @@ -36,7 +34,6 @@ export const CurrentlyPlayingBar: React.FC = () => { } = usePlayback(); const [api] = useAtom(apiAtom); - const [user] = useAtom(userAtom); const aBottom = useSharedValue(0); const aPadding = useSharedValue(0); @@ -66,6 +63,8 @@ export const CurrentlyPlayingBar: React.FC = () => { }; }); + const from = useMemo(() => segments[2], [segments]); + useEffect(() => { if (segments.find((s) => s.includes("tabs"))) { // Tab screen - i.e. home @@ -94,19 +93,20 @@ export const CurrentlyPlayingBar: React.FC = () => { [currentlyPlaying?.item] ); - const backdropUrl = useMemo( - () => - getBackdropUrl({ + const poster = useMemo(() => { + if (currentlyPlaying?.item.Type === "Audio") + return `${api?.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`; + else + return getBackdropUrl({ api, item: currentlyPlaying?.item, quality: 70, width: 200, - }), - [currentlyPlaying?.item, api] - ); + }); + }, [currentlyPlaying?.item.Id, api]); const videoSource = useMemo(() => { - if (!api || !currentlyPlaying || !backdropUrl) return null; + if (!api || !currentlyPlaying || !poster) return null; return { uri: currentlyPlaying.url, isNetwork: true, @@ -120,13 +120,13 @@ export const CurrentlyPlayingBar: React.FC = () => { description: currentlyPlaying.item?.Overview ? currentlyPlaying.item?.Overview : undefined, - imageUri: backdropUrl, + imageUri: poster, subtitle: currentlyPlaying.item?.Album ? currentlyPlaying.item?.Album : undefined, }, }; - }, [currentlyPlaying, startPosition, api, backdropUrl]); + }, [currentlyPlaying, startPosition, api, poster]); if (!api || !currentlyPlaying) return null; @@ -174,8 +174,8 @@ export const CurrentlyPlayingBar: React.FC = () => { controls={false} pictureInPicture={true} poster={ - backdropUrl && currentlyPlaying.item?.Type === "Audio" - ? backdropUrl + poster && currentlyPlaying.item?.Type === "Audio" + ? poster : undefined } debug={{ @@ -228,10 +228,17 @@ export const CurrentlyPlayingBar: React.FC = () => { { - if (currentlyPlaying.item?.Type === "Audio") - router.push(`/albums/${currentlyPlaying.item?.AlbumId}`); - else - router.push(`/items/page?id=${currentlyPlaying.item?.Id}`); + if (currentlyPlaying.item?.Type === "Audio") { + router.push( + // @ts-ignore + `/(auth)/(tabs)/${from}/albums/${currentlyPlaying.item.AlbumId}` + ); + } else { + router.push( + // @ts-ignore + `/(auth)/(tabs)/${from}/items/page?id=${currentlyPlaying.item?.Id}` + ); + } }} > {currentlyPlaying.item?.Name} @@ -240,7 +247,8 @@ export const CurrentlyPlayingBar: React.FC = () => { { router.push( - `/(auth)/series/${currentlyPlaying.item.SeriesId}` + // @ts-ignore + `/(auth)/(tabs)/${from}/series/${currentlyPlaying.item.SeriesId}` ); }} className="text-xs opacity-50"