wip: use general poster component

components/common/ItemImage.tsx

@@ -1,5 +1,6 @@
 import { useImageColors } from "@/hooks/useImageColors";
 import { apiAtom } from "@/providers/JellyfinProvider";
+import { getItemImage } from "@/utils/getItemImage";
 import { Ionicons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image, ImageProps, ImageSource } from "expo-image";
@@ -21,6 +22,8 @@ interface Props extends ImageProps {
     | "Thumb";
   quality?: number;
   width?: number;
+  useThemeColor?: boolean;
+  onError?: () => void;
 }
 
 export const ItemImage: React.FC<Props> = ({
@@ -28,80 +31,41 @@ export const ItemImage: React.FC<Props> = ({
   variant = "Primary",
   quality = 90,
   width = 1000,
+  useThemeColor = false,
+  onError,
   ...props
 }) => {
   const [api] = useAtom(apiAtom);
 
   const source = useMemo(() => {
-    if (!api) return null;
-
-    let tag: string | null | undefined;
-    let blurhash: string | null | undefined;
-    let src: ImageSource | null = null;
-
-    console.log("ImageItem ~ " + variant, item.Name, item.ImageTags);
-
-    switch (variant) {
-      case "Backdrop":
-        if (item.Type === "Episode") {
-          tag = item.ParentBackdropImageTags?.[0];
-          if (!tag) break;
-          blurhash = item.ImageBlurHashes?.Backdrop?.[tag];
-          src = {
-            uri: `${api.basePath}/Items/${item.ParentBackdropItemId}/Images/Backdrop/0?quality=${quality}&tag=${tag}&width=${width}`,
-            blurhash,
-          };
-          break;
-        }
-
-        tag = item.BackdropImageTags?.[0];
-        if (!tag) break;
-        blurhash = item.ImageBlurHashes?.Backdrop?.[tag];
-        src = {
-          uri: `${api.basePath}/Items/${item.Id}/Images/Backdrop/0?quality=${quality}&tag=${tag}&width=${width}`,
-          blurhash,
-        };
-        break;
-      case "Primary":
-        tag = item.ImageTags?.["Primary"];
-        if (!tag) break;
-        blurhash = item.ImageBlurHashes?.Primary?.[tag];
-
-        src = {
-          uri: `${api.basePath}/Items/${item.Id}/Images/Primary?quality=${quality}&tag=${tag}&width=${width}`,
-          blurhash,
-        };
-        break;
-      case "Thumb":
-        tag = item.ImageTags?.["Thumb"];
-        if (!tag) break;
-        blurhash = item.ImageBlurHashes?.Thumb?.[tag];
-
-        src = {
-          uri: `${api.basePath}/Items/${item.Id}/Images/Backdrop?quality=${quality}&tag=${tag}&width=${width}`,
-          blurhash,
-        };
-        break;
-      default:
-        tag = item.ImageTags?.["Primary"];
-        src = {
-          uri: `${api.basePath}/Items/${item.Id}/Images/Primary?quality=${quality}&tag=${tag}&width=${width}`,
-        };
-        break;
+    if (!api) {
+      onError && onError();
+      return;
     }
-
-    console.log("src: ", src?.uri?.slice(0, 30));
-
-    return src;
-  }, [item.ImageTags]);
-
-  useImageColors(source?.uri);
+    return getItemImage({
+      item,
+      api,
+      variant,
+      quality,
+      width,
+    });
+  }, [api, item, quality, variant, width]);
 
   // return placeholder icon if no source
-  if (!source?.uri) return;
-  <View {...props}>
-    <Ionicons name="image-outline" size={24} color="white" />;
-  </View>;
+  if (!source?.uri)
+    return (
+      <View
+        {...props}
+        className="flex flex-col items-center justify-center border border-neutral-800 bg-neutral-900"
+      >
+        <Ionicons
+          name="image-outline"
+          size={24}
+          color="white"
+          style={{ opacity: 0.4 }}
+        />
+      </View>
+    );
 
   return (
     <Image