Did something really awful to make bad effects

TODO: Overhaul all of this

Jel/Views/Library/Item/ItemHeaderView.swift

@@ -15,6 +15,7 @@ struct ItemHeaderView: View {
     .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)
   
@@ -24,7 +25,7 @@ struct ItemHeaderView: View {
         .hideCaption()
         .setCornerRadius(0)
         .mask(overlayGradient)
-        .padding(.top, 50)
+//        .padding(.top, 50)
         .background {
           LibraryIconView(library: item, imageType: "Backdrop", contentMode: .fill)
             .hideCaption()
@@ -33,17 +34,18 @@ struct ItemHeaderView: View {
         }
       
       HStack {
-        LibraryIconView(library: item, imageType: "Logo", width: 150)
+        LibraryIconView(library: item, imageType: "Logo", width: 200, height: 100, placeHolder: AnyView(Text(item.name ?? "Unknown").font(.title).bold().truncationMode(.middle)))
           .hideCaption()
           .setCornerRadius(0)
           .shadow(radius: 10)
         Spacer()
       }
+      .frame(alignment: .leading)
       .padding(.leading)
     }
   }
 }
 
-#Preview {
-  ItemHeaderView(item: BaseItemDto())
-}
+//  #Preview {
+//    ItemHeaderView(item: BaseItemDto())
+//  }

Jel/Views/Library/Item/ItemMovieView.swift

@@ -15,21 +15,56 @@ struct ItemMovieView: View {
   @State var item: BaseItemDto
   @State var loading: Bool = true
   
+  @State var navigationTitle: String = ""
+  
   var body: some View {
     ScrollView {
+      //      ItemHeaderView(item: item)
+      //        .scrollTransition {content, phase in
+      //          content
+      //            .scaleEffect(phase.isIdentity ? 1 : 2)
+      //            .opacity(phase.isIdentity ? 1 : 0.1)
+      //            .blur(radius: phase.isIdentity ? 0 : 50)
+      //        }
       ItemHeaderView(item: item)
+        .opacity(0) // this is the jankiest thing in existence
+        .background {
+          GeometryReader {geo in
+            ItemHeaderView(item: item)
+              .onChange(of: geo.frame(in: .global).minY) {
+                navigationTitle = geo.frame(in: .global).minY < 0 ? item.name ?? "Unknown" : ""
+              }
+              .scaleEffect(1 + (geo.frame(in: .global).minY > 0 ? geo.frame(in: .global).minY * 0.001 : 0))
+              .offset(y: 1 + (geo.frame(in: .global).minY > 0 ? geo.frame(in: .global).minY * 0.001 : 0))
+              .scrollTransition {content, phase in
+                content
+                  .scaleEffect(phase.isIdentity ? 1 : 2)
+                  .opacity(phase.isIdentity ? 1 : 0.1)
+                  .blur(radius: phase.isIdentity ? 0 : 50)
+              }
+          }
+        }
       
+      VStack {
         Text(item.taglines?[0] ?? "Unknown")
           .font(.headline)
           .padding(.top, 20)
         
         Text(item.overview ?? "Unknown")
           .padding()
+        Text(item.overview ?? "Unknown")
+          .padding()
+        Text(item.overview ?? "Unknown")
+          .padding()
+        Text(item.overview ?? "Unknown")
+          .padding()
+      }
     }
     .redacted(reason: loading ? .placeholder : [])
     .ignoresSafeArea(edges: .top)
+    .scrollIndicators(.hidden)
     .toolbarRole(.editor)
-    .navigationTitle(item.name ?? "Unknown")
+    .navigationTitle(navigationTitle)
     .navigationBarTitleDisplayMode(.inline)
     .onAppear {
       Task {

Jel/Views/Library/LibraryIconView.swift

@@ -22,6 +22,8 @@ struct LibraryIconView: View {
   @State var imageUrl: URL?
   @State var contentMode: ContentMode = .fit
   
+  @State var placeHolder: AnyView?
+  
   var shouldShowCaption: Bool = true
   var imageCornerRadius: CGFloat = 5
   var body: some View {
@@ -32,11 +34,15 @@ struct LibraryIconView: View {
             .resizable()
         } else if state.error != nil {
           Color.red
+        } else {
+          if let content = placeHolder {
+            content
           } else {
             Image(uiImage: blurHashImage)
               .resizable()
           }
         }
+      }
       .aspectRatio(contentMode: contentMode)
       .frame(width: width, height: height)
       .clipShape(RoundedRectangle(cornerRadius: imageCornerRadius))