mirror/App
1
0
Fork 0
mirror of https://github.com/Jellify-Music/App.git synced 2026-04-27 05:59:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #108 from anultravioletaurora/9-again-implement-playlist-crud

Browse Source 
Address Image Query Memory Leak
This commit is contained in:
Violet Caulfield
2025-02-11 14:16:12 -06:00
committed by GitHub
parent 52b0d307fd 74d41f2f1d
commit 66b6e6fb38
4 changed files with 69 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/queries/image.ts
+3 -1
View File
@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
import { QueryKeys } from "../../enums/query-keys";
import { fetchItemImage } from "./functions/images";
import { ImageType } from "@jellyfin/sdk/lib/generated-client/models";
import { QueryConfig } from "./query.config";
export const useItemImage = (itemId: string, imageType: ImageType = ImageType.Primary, width: number = 150, height: number = 150) => useQuery({
queryKey: [
@@ -12,5 +13,6 @@ export const useItemImage = (itemId: string, imageType: ImageType = ImageType.Pr
Math.ceil(height / 100) * 100 // So these keys need to match
],
queryFn: () => fetchItemImage(itemId, imageType, width, height),
retry: 3,
retry: 2,
staleTime: QueryConfig.staleTime.oneDay,
});
components/Artist/component.tsx
+1
View File
@@ -43,6 +43,7 @@ export default function Artist({
alignContent="center">
<YStack alignContent="center" justifyContent="center" minHeight={bannerHeight}>
<BlurhashedImage
borderRadius={0}
item={artist}
width={width}
/>
components/Player/mini-player.tsx
+53 -53
View File
@@ -26,62 +26,62 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
}}>
{ nowPlaying && (
<XStack
alignItems="center"
margin={0}
padding={0}
height={"$6"}
onPress={() => navigation.navigate("Player")}
>
<YStack
alignContent="center"
flex={1}>
<BlurhashedImage
item={nowPlaying!.item}
width={width / 7}
borderRadius={2}
/>
</YStack>
{/** Memoize TextTickers otherwise they won't animate due to the progress being updated in the PlayerContext */}
{ useMemo(() => {
return (
<YStack
alignContent="flex-start"
marginLeft={"$2"}
flex={4}
maxWidth={"$20"}
>
<TextTicker {...TextTickerConfig}>
<Text bold>{nowPlaying?.title ?? "Nothing Playing"}</Text>
</TextTicker>
<TextTicker {...TextTickerConfig}>
<Text color={getTokens().color.telemagenta}>{nowPlaying?.artist ?? ""}</Text>
</TextTicker>
useMemo(() => {
return (
<XStack
alignItems="center"
margin={0}
padding={0}
height={"$6"}
onPress={() => navigation.navigate("Player")}
>
<YStack
alignContent="center"
flex={1}>
<BlurhashedImage
item={nowPlaying!.item}
width={width / 7}
borderRadius={2}
/>
</YStack>
)
}, [
nowPlaying
])}
<XStack
justifyContent="flex-end"
flex={2}
>
<PlayPauseButton />
<Icon
large
color={theme.borderColor.val}
name="skip-next"
onPress={() => useSkip.mutate(undefined)}
/>
</XStack>
</XStack>
)}
<YStack
alignContent="flex-start"
marginLeft={"$2"}
flex={4}
maxWidth={"$20"}
>
<TextTicker {...TextTickerConfig}>
<Text bold>{nowPlaying?.title ?? "Nothing Playing"}</Text>
</TextTicker>
<TextTicker {...TextTickerConfig}>
<Text color={getTokens().color.telemagenta}>{nowPlaying?.artist ?? ""}</Text>
</TextTicker>
</YStack>
<XStack
justifyContent="flex-end"
flex={2}
>
<PlayPauseButton />
<Icon
large
color={theme.borderColor.val}
name="skip-next"
onPress={() => useSkip.mutate(undefined)}
/>
</XStack>
</XStack>
)
}, [
nowPlaying
])
)
}
</View>
)
}
components/Player/screens/index.tsx
+12 -6
View File
@@ -103,14 +103,20 @@ export default function PlayerScreen({
justifyContent="center"
alignContent="center"
minHeight={width / 1.1}
onPress={() => {
useTogglePlayback.mutate(undefined)
}}
// onPress={() => {
// useTogglePlayback.mutate(undefined)
// }}
>
<BlurhashedImage
item={nowPlaying!.item}
width={width / 1.1}
{ useMemo(() => {
return (
<BlurhashedImage
item={nowPlaying!.item}
width={width / 1.1}
/>
)
}, [
nowPlaying
])}
</XStack>
<XStack marginHorizontal={20} paddingVertical={5}>