Refactor iPad / macOS layout for medias in order to make the timeline smoother fix #282

IceCubesApp/App/IceCubesApp.swift

@@ -220,6 +220,14 @@ class AppDelegate: NSObject, UIApplicationDelegate {
   }
   
   func application(_: UIApplication, didFailToRegisterForRemoteNotificationsWithError _: Error) {}
+  
+  func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
+    let configuration = UISceneConfiguration(name: nil, sessionRole: connectingSceneSession.role)
+    if connectingSceneSession.role == .windowApplication {
+      configuration.delegateClass = SceneDelegate.self
+    }
+    return configuration
+  }
 }
 
 class ThemeObserverViewController: UIViewController {

Packages/DesignSystem/Sources/DesignSystem/SceneDelegate.swift

@@ -0,0 +1,16 @@
+import UIKit
+
+public class SceneDelegate: NSObject, ObservableObject, UIWindowSceneDelegate {
+  public var window: UIWindow?
+  
+  public var windowWidth: CGFloat {
+    window?.bounds.size.width ?? UIScreen.main.bounds.size.width
+  }
+  
+  public func scene(_ scene: UIScene,
+                    willConnectTo session: UISceneSession,
+                    options connectionOptions: UIScene.ConnectionOptions) {
+    guard let windowScene = scene as? UIWindowScene else { return }
+    self.window = windowScene.keyWindow
+  }
+}

Packages/Status/Sources/Status/Row/StatusMediaPreviewView.swift

@@ -9,6 +9,7 @@ import SwiftUI
 public struct StatusMediaPreviewView: View {
   @Environment(\.openURL) private var openURL
 
+  @EnvironmentObject var sceneDelegate: SceneDelegate
   @EnvironmentObject private var preferences: UserPreferences
   @EnvironmentObject private var quickLook: QuickLook
   @EnvironmentObject private var theme: Theme
@@ -23,10 +24,26 @@ public struct StatusMediaPreviewView: View {
   @State private var isAltAlertDisplayed: Bool = false
   @State private var isHidingMedia: Bool = false
 
+  var availableWidth: CGFloat {
+    if sceneDelegate.windowWidth > .maxColumnWidth {
+      return .maxColumnWidth
+    }
+    return sceneDelegate.windowWidth
+  }
+  
+  var appLayoutWidth: CGFloat {
+    let avatarColumnWidth = theme.avatarPosition == .leading ? AvatarView.Size.status.size.width + .statusColumnsSpacing : 0
+    var sidebarWidth: CGFloat = 0
+    if UIDevice.current.userInterfaceIdiom == .pad && sceneDelegate.windowWidth < (.maxColumnWidth + .sidebarWidth) {
+      sidebarWidth = .sidebarWidth
+    }
+    return (.layoutPadding * 2) + avatarColumnWidth + sidebarWidth
+  }
+  
   private var imageMaxHeight: CGFloat {
     if isNotifications {
       if UIDevice.current.userInterfaceIdiom == .pad {
-        return 150
+        return 100
       }
       return 50
     }
@@ -40,12 +57,6 @@ public struct StatusMediaPreviewView: View {
   }
 
   private func size(for media: MediaAttachment) -> CGSize? {
-    if isNotifications {
-      return .init(width: 50, height: 50)
-    }
-    if theme.statusDisplayStyle == .compact {
-      return .init(width: 100, height: 100)
-    }
     if let width = media.meta?.original?.width,
        let height = media.meta?.original?.height
     {
@@ -55,8 +66,8 @@ public struct StatusMediaPreviewView: View {
   }
 
   private func imageSize(from: CGSize, newWidth: CGFloat) -> CGSize {
-    if isNotifications {
+    if isNotifications || theme.statusDisplayStyle == .compact {
-      return .init(width: 50, height: 50)
+      return .init(width: imageMaxHeight, height: imageMaxHeight)
     }
     let ratio = newWidth / from.width
     let newHeight = from.height * ratio
@@ -137,15 +148,9 @@ public struct StatusMediaPreviewView: View {
     ZStack(alignment: .bottomTrailing) {
       switch attachment.supportedType {
       case .image:
-        if theme.statusDisplayStyle == .large,
+        if let size = size(for: attachment) {
-           let size = size(for: attachment),
-           UIDevice.current.userInterfaceIdiom != .pad,
-           UIDevice.current.userInterfaceIdiom != .mac
-        {
-          let avatarColumnWidth = theme.avatarPosition == .leading ? AvatarView.Size.status.size.width + .statusColumnsSpacing : 0
-          let availableWidth = UIScreen.main.bounds.width - (.layoutPadding * 2) - avatarColumnWidth
           let newSize = imageSize(from: size,
-                                  newWidth: availableWidth)
+                                  newWidth: availableWidth - appLayoutWidth)
 
           LazyImage(url: attachment.url) { state in
             if let image = state.image {
@@ -161,22 +166,19 @@ public struct StatusMediaPreviewView: View {
             }
           }
         } else {
-          AsyncImage(
+          LazyImage(url: attachment.url) { state in
-            url: attachment.url,
+            if let image = state.image {
-            content: { image in
               image
-                .resizable()
+                .resizingMode(.aspectFit)
-                .aspectRatio(contentMode: .fit)
+                .frame(maxHeight: imageMaxHeight)
-                .frame(maxHeight: isNotifications || theme.statusDisplayStyle == .compact ? imageMaxHeight : nil)
                 .cornerRadius(4)
-            },
+            } else {
-            placeholder: {
               RoundedRectangle(cornerRadius: 4)
                 .fill(Color.gray)
-                .frame(maxHeight: isNotifications || theme.statusDisplayStyle == .compact ? imageMaxHeight : nil)
+                .frame(maxHeight: imageMaxHeight)
                 .shimmering()
             }
-          )
+          }
         }
       case .gifv, .video, .audio:
         if let url = attachment.url {
@@ -195,13 +197,14 @@ public struct StatusMediaPreviewView: View {
             altTextDisplayed = alt
             isAltAlertDisplayed = true
           } label: {
-            Text("ALT")
+            Text("status.image.alt-text.abbreviation")
+              .font(theme.statusDisplayStyle == .compact ? .footnote : .body)
           }
-          .padding(8)
+          .padding(4)
           .background(.thinMaterial)
           .cornerRadius(4)
         }
-        .padding(10)
+        .padding(theme.statusDisplayStyle == .compact ? 0 : 10)
       }
     }
   }