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

This commit is contained in:
Thomas Ricouard 2023-01-23 18:43:48 +01:00
parent 5c7cc5803f
commit f718755120
3 changed files with 81 additions and 54 deletions

View File

@ -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 {

View File

@ -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
}
}

View File

@ -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 {
return .init(width: 50, height: 50)
if isNotifications || theme.statusDisplayStyle == .compact {
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,
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
if let size = size(for: attachment) {
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(
url: attachment.url,
content: { image in
LazyImage(url: attachment.url) { state in
if let image = state.image {
image
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxHeight: isNotifications || theme.statusDisplayStyle == .compact ? imageMaxHeight : nil)
.resizingMode(.aspectFit)
.frame(maxHeight: imageMaxHeight)
.cornerRadius(4)
},
placeholder: {
} else {
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)
}
}
}