Use Nuke to load images + start movieView

4 files changed, 103 insertions, 32 deletions

diff --git a/Jel/Views/Library/Item/ItemMovieView.swift b/Jel/Views/Library/Item/ItemMovieView.swift
new file mode 100644
index 0000000..6a29654
--- /dev/null
+++ b/Jel/Views/Library/Item/ItemMovieView.swift
@@ -0,0 +1,44 @@
+//
+//  ItemMovieView.swift
+//  Jel
+//
+//  Created by zerocool on 12/23/23.
+//
+
+import SwiftUI
+import JellyfinKit
+
+struct ItemMovieView: View {
+  @EnvironmentObject var jellyfinClient: JellyfinClientController
+  @StateObject var authState: AuthStateController = AuthStateController.shared
+  
+  @State var item: BaseItemDto
+  @State var loading: Bool = true
+  var body: some View {
+    VStack {
+      Text(item.name ?? "Unknown")
+        .font(.title)
+      
+      Text(item.taglines?[0] ?? "Unknown")
+        .font(.headline)
+      Text(item.overview ?? "Unknown")
+    }
+    .navigationTitle(item.name ?? "Unknown")
+    .navigationBarTitleDisplayMode(.inline)
+    .redacted(reason: loading ? .placeholder : [])
+    .onAppear {
+      Task {
+        do {
+          let request = Paths.getItem(userID: authState.userId ?? "", itemID: item.id ?? "")
+          item = try await jellyfinClient.send(request).value
+          loading = false
+        } catch {
+        }
+      }
+    }
+  }
+}
+
+#Preview {
+  ItemMovieView(item: BaseItemDto())
+}
diff --git a/Jel/Views/Library/Item/ItemView.swift b/Jel/Views/Library/Item/ItemView.swift
new file mode 100644
index 0000000..d3446af
--- /dev/null
+++ b/Jel/Views/Library/Item/ItemView.swift
@@ -0,0 +1,25 @@
+//
+//  ItemView.swift
+//  Jel
+//
+//  Created by zerocool on 12/23/23.
+//
+
+import SwiftUI
+import JellyfinKit
+
+struct ItemView: View {
+  @State var item: BaseItemDto
+    var body: some View {
+      switch item.type {
+        case .movie:
+          ItemMovieView(item: item)
+        default:
+          Text("Unkown media")
+      }
+    }
+}
+
+#Preview {
+  ItemView(item: BaseItemDto())
+}
diff --git a/Jel/Views/Library/LibraryDetailView.swift b/Jel/Views/Library/LibraryDetailView.swift
index 37ab613..4b140df 100644
--- a/Jel/Views/Library/LibraryDetailView.swift
+++ b/Jel/Views/Library/LibraryDetailView.swift
@@ -28,8 +28,13 @@ struct LibraryDetailView: View {
     ScrollView {
       LazyVGrid(columns: columns) {
         ForEach(items ?? []) {item in
-          LibraryIconView(library: item, imageType: "Primary", height: 150)
-            .padding()
+          NavigationLink {
+            ItemView(item: item)
+          } label: {
+            LibraryIconView(library: item, imageType: "Primary", width: 170)
+              .padding()
+          }
+          .buttonStyle(PlainButtonStyle())
         }
       }
     }
diff --git a/Jel/Views/Library/LibraryIconView.swift b/Jel/Views/Library/LibraryIconView.swift
index 6a7d5ae..71c6e14 100644
--- a/Jel/Views/Library/LibraryIconView.swift
+++ b/Jel/Views/Library/LibraryIconView.swift
@@ -7,49 +7,46 @@
 
 import SwiftUI
 import JellyfinKit
+import NukeUI
 
 struct LibraryIconView: View {
   @EnvironmentObject var jellyfinClient: JellyfinClientController
   
-  @State var library: BaseItemDto
+  var library: BaseItemDto
   
-  @State var loadingImage: Bool = true
-  @State var imageType: String = "Primary"
+  var imageType: String = "Primary"
   var width: CGFloat?
   var height: CGFloat?
   
   @State var blurHashImage: UIImage = UIImage()
   @State var imageUrl: URL?
   var body: some View {
-    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)
+    VStack {
+      LazyImage(url: imageUrl) {state in
+        if let image = state.image {
+          image
+            .resizable()
+        } else if state.error != nil {
+          Color.red
+        } else {
+          Image(uiImage: blurHashImage)
+            .resizable()
+        }
       }
-    } 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()
+      .aspectRatio(contentMode: .fit)
+      .frame(width: width, height: height)
+      .clipShape(RoundedRectangle(cornerRadius: 5))
       
-      let imageId = library.id ?? ""
-      let request = Paths.getItemImage(itemID: imageId, imageType: imageType)
-      imageUrl = jellyfinClient.getUrl()?.appending(path: request.url?.absoluteString ?? "")
+      Text(library.name ?? "Unknown")
+        .font(.subheadline)
+        .onAppear {
+          let blurhash = library.imageBlurHashes?.primary?[library.imageTags?[imageType] ?? ""] ?? ""
+          blurHashImage = UIImage(blurHash: blurhash, size: CGSize(width: 16, height: 16)) ?? UIImage()
+          
+          let imageId = library.id ?? ""
+          let request = Paths.getItemImage(itemID: imageId, imageType: imageType)
+          imageUrl = jellyfinClient.getUrl()?.appending(path: request.url?.absoluteString ?? "")
+        }
     }
   }
 }