Add ItemHeaderView

2 files changed, 58 insertions, 4 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 {