Introduce MediaUI

Author: Dimillian

App/IcySkyApp.swift

@@ -2,6 +2,7 @@ import ATProtoKit
 import Auth
 import AuthUI
 import DesignSystem
+import MediaUI
 import Models
 import Network
 import Router
@@ -45,6 +46,12 @@ struct IcySkyApp: App {
           case .auth:
             AuthView()
               .environment(auth)
+          case let .fullScreenMedia(images, preloadedImage, namespace):
+            FullScreenMediaView(
+              images: images,
+              preloadedImage: preloadedImage,
+              namespace: namespace
+            )
           }
         }
       )

IcySky.xcodeproj/project.pbxproj

@@ -14,6 +14,7 @@
 		9F1552EF2CEF35C000DD9F6E /* DesignSystem in Frameworks */ = {isa = PBXBuildFile; productRef = 9F1552EE2CEF35C000DD9F6E /* DesignSystem */; };
 		9F1552F12CEF35C000DD9F6E /* FeedUI in Frameworks */ = {isa = PBXBuildFile; productRef = 9F1552F02CEF35C000DD9F6E /* FeedUI */; };
 		9F1552F32CEF35C000DD9F6E /* PostUI in Frameworks */ = {isa = PBXBuildFile; productRef = 9F1552F22CEF35C000DD9F6E /* PostUI */; };
+		9F21F9B72CFDC288003B9250 /* MediaUI in Frameworks */ = {isa = PBXBuildFile; productRef = 9F21F9B62CFDC288003B9250 /* MediaUI */; };
 		9F5892032CEB2E2D00798943 /* Network in Frameworks */ = {isa = PBXBuildFile; productRef = 9F5892022CEB2E2D00798943 /* Network */; };
 		9F5892972CEC703B00798943 /* DesignSystem in Frameworks */ = {isa = PBXBuildFile; productRef = 9F5892962CEC703B00798943 /* DesignSystem */; };
 		9F58939D2CEDF04200798943 /* Auth in Frameworks */ = {isa = PBXBuildFile; productRef = 9F58939C2CEDF04200798943 /* Auth */; };
@@ -56,6 +57,7 @@
 				9FA557082CF61EE4008A62B4 /* NotificationsUI in Frameworks */,
 				9F5892032CEB2E2D00798943 /* Network in Frameworks */,
 				9F1552E82CEF35B200DD9F6E /* Models in Frameworks */,
+				9F21F9B72CFDC288003B9250 /* MediaUI in Frameworks */,
 				9F58939D2CEDF04200798943 /* Auth in Frameworks */,
 				9FD63DE02CEF1F5B00243D9A /* PostUI in Frameworks */,
 				9F5892972CEC703B00798943 /* DesignSystem in Frameworks */,
@@ -132,6 +134,7 @@
 				9F1552F22CEF35C000DD9F6E /* PostUI */,
 				9FAEE3B92CF09BB400F86CDC /* SettingsUI */,
 				9FA557072CF61EE4008A62B4 /* NotificationsUI */,
+				9F21F9B62CFDC288003B9250 /* MediaUI */,
 			);
 			productName = IcySky;
 			productReference = 9F2142232CE9DAA1004167D7 /* IcySky.app */;
@@ -450,6 +453,10 @@
 			isa = XCSwiftPackageProductDependency;
 			productName = PostUI;
 		};
+		9F21F9B62CFDC288003B9250 /* MediaUI */ = {
+			isa = XCSwiftPackageProductDependency;
+			productName = MediaUI;
+		};
 		9F5892022CEB2E2D00798943 /* Network */ = {
 			isa = XCSwiftPackageProductDependency;
 			productName = Network;

Packages/Features/Package.swift

@@ -22,6 +22,7 @@ let package = Package(
     .library(name: "SettingsUI", targets: ["SettingsUI"]),
     .library(name: "NotificationsUI", targets: ["NotificationsUI"]),
     .library(name: "DesignSystem", targets: ["DesignSystem"]),
+    .library(name: "MediaUI", targets: ["MediaUI"]),
   ],
   dependencies: [
     .package(name: "Model", path: "../Model"),
@@ -57,6 +58,13 @@ let package = Package(
       name: "SettingsUI",
       dependencies: baseDeps
     ),
+    .target(
+      name: "MediaUI",
+      dependencies: baseDeps + [
+        .product(name: "Nuke", package: "Nuke"),
+        .product(name: "NukeUI", package: "Nuke"),
+      ]
+    ),
     .target(
       name: "NotificationsUI",
       dependencies: baseDeps + ["PostUI"]

Packages/Features/Sources/MediaUI/FullScreenMediaView.swift

@@ -0,0 +1,58 @@
+import Foundation
+import Nuke
+import NukeUI
+import SwiftUI
+
+public struct FullScreenMediaView: View {
+  let images: [URL]
+  let preloadedImage: URL?
+  let namespace: Namespace.ID
+
+  @State private var isFirstImageLoaded: Bool = false
+
+  public init(images: [URL], preloadedImage: URL?, namespace: Namespace.ID) {
+    self.images = images
+    self.preloadedImage = preloadedImage
+    self.namespace = namespace
+  }
+
+  var firstImageURL: URL? {
+    if let preloadedImage, !isFirstImageLoaded {
+      return preloadedImage
+    }
+    return images.first
+  }
+
+  public var body: some View {
+    ScrollView(.horizontal) {
+      LazyHStack {
+        ForEach(images.indices, id: \.self) { index in
+          LazyImage(url: index == 0 ? firstImageURL : images[index]) { state in
+            if let image = state.image {
+              image
+                .resizable()
+                .scaledToFill()
+                .aspectRatio(contentMode: .fit)
+            } else {
+              RoundedRectangle(cornerRadius: 8)
+                .fill(.thinMaterial)
+            }
+          }
+          .containerRelativeFrame([.horizontal, .vertical])
+        }
+      }
+      .scrollTargetLayout()
+    }
+    .scrollContentBackground(.hidden)
+    .scrollTargetBehavior(.viewAligned)
+    .navigationTransition(.zoom(sourceID: images[0], in: namespace))
+    .task {
+      do {
+        let data = try await Nuke.ImagePipeline.shared.data(for: .init(url: images.first))
+        if !data.0.isEmpty {
+          self.isFirstImageLoaded = true
+        }
+      } catch {}
+    }
+  }
+}

Packages/Features/Sources/PostUI/Row/PostRowImagesView.swift

@@ -2,17 +2,19 @@ import ATProtoKit
 import DesignSystem
 import Models
 import NukeUI
+import Router
 import SwiftUI
 
 struct PostRowImagesView: View {
-  @Namespace private var namespace
   @Environment(\.isQuote) var isQuote
+  @Environment(Router.self) var router
+
+  @Namespace private var namespace
 
   let quoteMaxSize: CGFloat = 100
-  
   let images: AppBskyLexicon.Embed.ImagesDefinition.View
-  @State private var firstImageSize: CGSize?
 
+  @State private var firstImageSize: CGSize?
   @State private var isMediaExpanded: Bool = false
 
   var body: some View {
@@ -26,12 +28,13 @@ struct PostRowImagesView: View {
           )
       }
     }
-    .padding(.bottom, images.images.count > 1 && !isQuote ? 15 : 0)
+    .padding(.bottom, images.images.count > 1 && !isQuote ? CGFloat(images.images.count) * 7 : 0)
     .onTapGesture {
-      isMediaExpanded.toggle()
-    }
-    .fullScreenCover(isPresented: $isMediaExpanded) {
-      expandedView
+      router.presentedSheet = .fullScreenMedia(
+        images: images.images.map(\.fullSizeImageURL),
+        preloadedImage: images.images.first?.thumbnailImageURL,
+        namespace: namespace
+      )
     }
   }
 
@@ -51,15 +54,14 @@ struct PostRowImagesView: View {
           image
             .resizable()
             .scaledToFill()
-            .frame(width: finalWidth, height: finalHeight)
             .aspectRatio(contentMode: .fit)
         } else {
           RoundedRectangle(cornerRadius: 8)
             .fill(.thinMaterial)
-            .frame(width: finalWidth, height: finalHeight)
         }
       }
       .processors([.resize(size: .init(width: finalWidth, height: finalHeight))])
+      .frame(width: finalWidth, height: finalHeight)
       .matchedTransitionSource(id: image.fullSizeImageURL, in: namespace)
       .glowingRoundedRectangle()
       .onAppear {
@@ -72,29 +74,4 @@ struct PostRowImagesView: View {
       isQuote ? 1 : (firstImageSize?.width ?? width) / (firstImageSize?.height ?? height),
       contentMode: .fit)
   }
-
-  private var expandedView: some View {
-    ScrollView(.horizontal) {
-      LazyHStack {
-        ForEach(images.images, id: \.thumbnailImageURL) { image in
-          LazyImage(url: image.fullSizeImageURL) { state in
-            if let image = state.image {
-              image
-                .resizable()
-                .scaledToFill()
-                .aspectRatio(contentMode: .fit)
-            } else {
-              RoundedRectangle(cornerRadius: 8)
-                .fill(.thinMaterial)
-            }
-          }
-          .containerRelativeFrame([.horizontal, .vertical])
-        }
-      }
-      .scrollTargetLayout()
-    }
-    .scrollContentBackground(.hidden)
-    .scrollTargetBehavior(.viewAligned)
-    .navigationTransition(.zoom(sourceID: images.images[0].fullSizeImageURL, in: namespace))
-  }
 }

Packages/Model/Sources/Router/SheetDestination.swift

@@ -3,6 +3,10 @@ import SwiftUI
 
 public enum SheetDestination: Hashable, Identifiable {
   public var id: Int { self.hashValue }
-  
+
   case auth
+  case fullScreenMedia(
+    images: [URL],
+    preloadedImage: URL?,
+    namespace: Namespace.ID)
 }