Add ItemHeaderView

3 files changed, 87 insertions, 16 deletions

diff --git a/Jel/Views/Library/Item/ItemHeaderView.swift b/Jel/Views/Library/Item/ItemHeaderView.swift
new file mode 100644
index 0000000..1ff25c7
--- /dev/null
+++ b/Jel/Views/Library/Item/ItemHeaderView.swift
@@ -0,0 +1,49 @@
+//
+//  ItemHeaderView.swift
+//  Jel
+//
+//  Created by zerocool on 12/23/23.
+//
+
+import SwiftUI
+import JellyfinKit
+
+struct ItemHeaderView: View {
+  @State var item: BaseItemDto
+  
+  let overlayGradient = LinearGradient(gradient: Gradient(stops: [
+    .init(color: .clear, location: 0),
+    .init(color: .black, location: 0.3),
+    .init(color: .black, location: 0.7),
+    .init(color: .clear, location: 1)
+  ]), startPoint: .bottom, endPoint: .top)
+  
+  var body: some View {
+    ZStack(alignment: .bottom) {
+      LibraryIconView(library: item, imageType: "Backdrop", contentMode: .fill)
+        .hideCaption()
+        .setCornerRadius(0)
+        .mask(overlayGradient)
+        .padding(.top, 50)
+        .background {
+          LibraryIconView(library: item, imageType: "Backdrop", contentMode: .fill)
+            .hideCaption()
+            .setCornerRadius(0)
+            .blur(radius: 50)
+        }
+      
+      HStack {
+        LibraryIconView(library: item, imageType: "Logo", width: 150)
+          .hideCaption()
+          .setCornerRadius(0)
+          .shadow(radius: 10)
+        Spacer()
+      }
+      .padding(.leading)
+    }
+  }
+}
+
+#Preview {
+  ItemHeaderView(item: BaseItemDto())
+}
diff --git a/Jel/Views/Library/Item/ItemMovieView.swift b/Jel/Views/Library/Item/ItemMovieView.swift
index 6a29654..9c95923 100644
--- a/Jel/Views/Library/Item/ItemMovieView.swift
+++ b/Jel/Views/Library/Item/ItemMovieView.swift
@@ -14,18 +14,23 @@ struct ItemMovieView: View {
   
   @State var item: BaseItemDto
   @State var loading: Bool = true
+  
   var body: some View {
-    VStack {
-      Text(item.name ?? "Unknown")
-        .font(.title)
+    ScrollView {
+      ItemHeaderView(item: item)
       
       Text(item.taglines?[0] ?? "Unknown")
         .font(.headline)
+        .padding(.top, 20)
+      
       Text(item.overview ?? "Unknown")
+        .padding()
     }
+    .redacted(reason: loading ? .placeholder : [])
+    .ignoresSafeArea(edges: .top)
+    .toolbarRole(.editor)
     .navigationTitle(item.name ?? "Unknown")
     .navigationBarTitleDisplayMode(.inline)
-    .redacted(reason: loading ? .placeholder : [])
     .onAppear {
       Task {
         do {
diff --git a/Jel/Views/Library/LibraryIconView.swift b/Jel/Views/Library/LibraryIconView.swift
index 71c6e14..7651e56 100644
--- a/Jel/Views/Library/LibraryIconView.swift
+++ b/Jel/Views/Library/LibraryIconView.swift
@@ -20,6 +20,10 @@ struct LibraryIconView: View {
   
   @State var blurHashImage: UIImage = UIImage()
   @State var imageUrl: URL?
+  @State var contentMode: ContentMode = .fit
+  
+  var shouldShowCaption: Bool = true
+  var imageCornerRadius: CGFloat = 5
   var body: some View {
     VStack {
       LazyImage(url: imageUrl) {state in
@@ -33,22 +37,35 @@ struct LibraryIconView: View {
             .resizable()
         }
       }
-      .aspectRatio(contentMode: .fit)
+      .aspectRatio(contentMode: contentMode)
       .frame(width: width, height: height)
-      .clipShape(RoundedRectangle(cornerRadius: 5))
+      .clipShape(RoundedRectangle(cornerRadius: imageCornerRadius))
+      .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 ?? "")
+      }
       
-      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 ?? "")
-        }
+      if shouldShowCaption {
+        Text(library.name ?? "Unknown")
+          .font(.subheadline)
+      }
     }
   }
+  func hideCaption(_ isHidden: Bool = true) -> Self {
+    var copy = self
+    copy.shouldShowCaption = !isHidden
+    return copy
+  }
+  
+  func setCornerRadius(_ cornerRadius: CGFloat = 5) -> Self {
+    var copy = self
+    copy.imageCornerRadius = cornerRadius
+    return copy
+  }
 }
 
 //#Preview {