blurhashed go bye bye

components/Album/index.tsx

@@ -7,16 +7,13 @@ import { RunTimeTicks } from "../Global/helpers/time-codes";
 import Track from "../Global/components/track";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import FavoriteButton from "../Global/components/favorite-button";
-import BlurhashedImage from "../Global/components/blurhashed-image";
-import Avatar from "../Global/components/avatar";
 import { useQuery } from "@tanstack/react-query";
 import { QueryKeys } from "../../enums/query-keys";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { getImageApi, getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import Client from "../../api/client";
 import { useMemo } from "react";
-import { useSharedValue } from "react-native-reanimated";
 import { ItemCard } from "../Global/components/item-card";
-
+import { Image } from 'expo-image'
 
 export function AlbumScreen({ 
     route, 
@@ -72,11 +69,13 @@ export function AlbumScreen({
                                 marginTop={"$4"}
                                 minHeight={width / 1.1}
                                 >
-                                <BlurhashedImage
-                                    item={album}
-                                    width={width / 1.1}
-                                    height={width / 1.1}
-                                    />
+                                <Image
+                                    source={getImageApi(Client.api!).getItemImageUrlById(album.Id!)}
+                                    style={{
+                                        width: width / 1.1,
+                                        height: width / 1.1
+                                    }}
+                                />
 
                                 <H5 textAlign="center">{ album.Name ?? "Untitled Album" }</H5>
                                 <Text>{ album.ProductionYear?.toString() ?? "" }</Text>

components/Artist/index.tsx

@@ -1,21 +1,20 @@
-import { RouteProp, useIsFocused } from "@react-navigation/native";
+import { RouteProp } from "@react-navigation/native";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { StackParamList } from "../types";
 import Client from "../../api/client";
 import { QueryKeys } from "../../enums/query-keys";
 import { BaseItemKind, ItemSortBy, SortOrder } from "@jellyfin/sdk/lib/generated-client/models";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { getImageApi, getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { ScrollView, FlatList } from "react-native";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { YStack } from "tamagui";
-import BlurhashedImage from "../Global/components/blurhashed-image";
 import FavoriteButton from "../Global/components/favorite-button";
 import { ItemCard } from "../Global/components/item-card";
-import { H2, H3 } from "../Global/helpers/text";
+import { H3 } from "../Global/helpers/text";
 import fetchSimilar from "../../api/queries/functions/similar";
-import HorizontalCardList from "../Global/components/horizontal-list";
+import { Image } from "expo-image";
 
 export function ArtistScreen({ 
     route, 
@@ -73,10 +72,12 @@ export function ArtistScreen({
             removeClippedSubviews
         >
             <YStack alignContent="center" justifyContent="center" minHeight={bannerHeight}>
-                <BlurhashedImage
-                    borderRadius={0}
-                    item={artist}
-                    width={width}
+                <Image
+                    source={getImageApi(Client.api!).getItemImageUrlById(artist.Id!)}
+                    style={{
+                        width: width,
+                        height: bannerHeight
+                    }}
                 />
             </YStack>
 

package-lock.json

@@ -25,6 +25,7 @@
         "axios": "^1.7.9",
         "burnt": "^0.12.2",
         "expo": "^52.0.0",
+        "expo-image": "^2.0.7",
         "invert-color": "^2.0.0",
         "lodash": "^4.17.21",
         "react": "18.3.1",
@@ -11367,6 +11368,23 @@
         "react": "*"
       }
     },
+    "node_modules/expo-image": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/expo-image/-/expo-image-2.0.7.tgz",
+      "integrity": "sha512-kv40OIJOkItwznhdqFmKxTMC5O8GkpyTf8ng7Py4Hy6IBiH59dkeP6vUZQhzPhJOm5v1kZK4XldbskBosqzOug==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*",
+        "react-native-web": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-web": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/expo-keep-awake": {
       "version": "14.0.2",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-14.0.2.tgz",

package.json

@@ -35,6 +35,7 @@
     "axios": "^1.7.9",
     "burnt": "^0.12.2",
     "expo": "^52.0.0",
+    "expo-image": "^2.0.7",
     "invert-color": "^2.0.0",
     "lodash": "^4.17.21",
     "react": "18.3.1",