Use asyncImage for libraryIcons

2 files changed, 48 insertions, 18 deletions

diff --git a/Jel/Views/Library/LibraryDetailView.swift b/Jel/Views/Library/LibraryDetailView.swift
index 3d5a04b..37ab613 100644
--- a/Jel/Views/Library/LibraryDetailView.swift
+++ b/Jel/Views/Library/LibraryDetailView.swift
@@ -15,11 +15,22 @@ struct LibraryDetailView: View {
   @State var library: BaseItemDto
   @State var items: [BaseItemDto]? = []
   
+  @State var loading: Bool = true
+  
+  let columns = [
+    GridItem(.adaptive(minimum: 150))
+  ]
   var body: some View {
+    if loading {
+      ProgressView()
+        .progressViewStyle(.circular)
+    }
     ScrollView {
-      ForEach(items ?? []) {item in
-        LibraryIconView(library: item, imageType: "Primary", width: 120)
-          .padding()
+      LazyVGrid(columns: columns) {
+        ForEach(items ?? []) {item in
+          LibraryIconView(library: item, imageType: "Primary", height: 150)
+            .padding()
+        }
       }
     }
     .navigationTitle(library.name ?? "Unknown")
@@ -31,6 +42,7 @@ struct LibraryDetailView: View {
         do {
           let res = try await jellyfinClient.send(request)
           items = res.value.items
+          loading = false
         } catch {
         }
       }
@@ -38,6 +50,6 @@ struct LibraryDetailView: View {
   }
 }
 
-#Preview {
-  LibraryDetailView(library: BaseItemDto())
-}
+//#Preview {
+//  LibraryDetailView(library: BaseItemDto())
+//}
diff --git a/Jel/Views/Library/LibraryIconView.swift b/Jel/Views/Library/LibraryIconView.swift
index e5f42b0..6a7d5ae 100644
--- a/Jel/Views/Library/LibraryIconView.swift
+++ b/Jel/Views/Library/LibraryIconView.swift
@@ -18,20 +18,38 @@ struct LibraryIconView: View {
   var width: CGFloat?
   var height: CGFloat?
   
-  @State var loadedImageBinaryData: Data?
-  
+  @State var blurHashImage: UIImage = UIImage()
+  @State var imageUrl: URL?
   var body: some View {
-    VStack {
-      AsyncImageView(imageId: library.id ?? "",
-                     blurhash: library.imageBlurHashes?.primary?[library.imageTags?[imageType] ?? ""] ?? "",
-                     imageType: imageType)
-      .aspectRatio(contentMode: .fill)
-      .frame(width: width, height: height)
-      .clipShape(RoundedRectangle(cornerRadius: 5))
-      
+    AsyncImage(url: imageUrl) {image in
+      VStack {
+        image
+          .resizable()
+          .aspectRatio(contentMode: .fit)
+          .frame(width: width, height: height)
+          .clipShape(RoundedRectangle(cornerRadius: 3))
+        Text(library.name ?? "Unknown")
+          .font(.subheadline)
+      }
+    } placeholder: {
+      VStack {
+        Image(uiImage: blurHashImage)
+          .resizable()
+          .aspectRatio(contentMode: .fit)
+          .frame(width: width, height: height)
+          .clipShape(RoundedRectangle(cornerRadius: 3))
+        Text(library.name ?? "Unknown")
+          .font(.subheadline)
+      }
+    }
+    
+    .onAppear {
+      let blurhash = library.imageBlurHashes?.primary?[library.imageTags?[imageType] ?? ""] ?? ""
+      blurHashImage = UIImage(blurHash: blurhash, size: CGSize(width: 32, height: 32)) ?? UIImage()
       
-      Text(library.name ?? "Unknown")
-        .font(.subheadline)
+      let imageId = library.id ?? ""
+      let request = Paths.getItemImage(itemID: imageId, imageType: imageType)
+      imageUrl = jellyfinClient.getUrl()?.appending(path: request.url?.absoluteString ?? "")
     }
   }
 }