mirror/App
1
0
Fork 0
mirror of https://github.com/Jellify-Music/App.git synced 2026-01-07 03:20:19 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add artwork to miniplayer card

Browse Source
This commit is contained in:
Violet Caulfield
2024-12-29 17:48:14 -06:00
parent 7c57f1051e
commit c8f2c1e198
2 changed files with 54 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
api/queries/query.config.ts
View File

@@ -14,6 +14,13 @@ export const queryConfig = {
fillWidth: 100,
format: ImageFormat.Png
},
miniplayerArtwork: {
height: 100,
width: 100,
fillHeight: 100,
fillWidth: 100,
format: ImageFormat.Jpg
},
playerArtwork: {
fillHeight: 500,
fillWidth: 500,

69
components/Player/mini-player.tsx
View File

@@ -9,6 +9,11 @@ import { BlurView } from "@react-native-community/blur";
import Icon from "../Global/icon";
import { Text } from "../Global/text";
import { Colors } from "../../enums/colors";
import { CachedImage } from "@georstat/react-native-image-cache";
import { ImageType } from "@jellyfin/sdk/lib/generated-client/models";
import { getImageApi } from "@jellyfin/sdk/lib/utils/api";
import { queryConfig } from "../../api/queries/query.config";
import { useApiClientContext } from "../jellyfin-api-provider";
export function Miniplayer({ navigation }: { navigation : NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> }) : React.JSX.Element {
@@ -18,35 +23,55 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
const { play, pause } = usePlayerContext();
const { apiClient } = useApiClientContext();
return (
<BlurView>
<XStack height={"$8"} onPress={() => navigation.navigate("Player")}>
<YStack alignItems="flex-start" flex={3}>
<Text bold>{activeTrack?.title ?? "Nothing Playing"}</Text>
<Text>{activeTrack?.artist ?? ""}</Text>
</YStack>
{ activeTrack && (
<Spacer />
<XStack alignItems="flex-end" flex={1}>
{ playbackState.state === State.Playing && (
<Icon name="pause" large onPress={() => pause()} />
)}
<XStack height={"$8"} onPress={() => navigation.navigate("Player")}>
{ playbackState.state === State.Paused && (
<Icon name="play" large onPress={() => play()} />
)}
<CachedImage
source={getImageApi(apiClient!)
.getItemImageUrlById(
activeTrack!.albumId,
ImageType.Primary,
{ ...queryConfig.miniplayerArtwork }
)
}
imageStyle={{
...queryConfig.miniplayerArtwork,
borderRadius: 2
}}
/>
{ playbackState.state === State.Buffering || playbackState.state === State.Loading && (
<Spinner size="small" color={Colors.Primary}/>
)}
<YStack alignItems="flex-start" flex={3}>
<Text bold>{activeTrack?.title ?? "Nothing Playing"}</Text>
<Text>{activeTrack?.artist ?? ""}</Text>
</YStack>
<Icon
large
name="fast-forward"
/>
<Spacer />
<XStack alignItems="flex-end" flex={1}>
{ playbackState.state === State.Playing && (
<Icon name="pause" large onPress={() => pause()} />
)}
{ playbackState.state === State.Paused && (
<Icon name="play" large onPress={() => play()} />
)}
{ playbackState.state === State.Buffering || playbackState.state === State.Loading && (
<Spinner size="small" color={Colors.Primary}/>
)}
<Icon
large
name="fast-forward"
/>
</XStack>
</XStack>
</XStack>
)}
</BlurView>
)
}