diff --git a/Packages/Status/Sources/Status/Row/StatusMediaPreviewView.swift b/Packages/Status/Sources/Status/Row/StatusMediaPreviewView.swift index b4d9ef4b..705b5043 100644 --- a/Packages/Status/Sources/Status/Row/StatusMediaPreviewView.swift +++ b/Packages/Status/Sources/Status/Row/StatusMediaPreviewView.swift @@ -14,6 +14,8 @@ public struct StatusMediaPreviewView: View { @State private var isQuickLookLoading: Bool = false @State private var width: CGFloat = 0 + @State private var altTextDisplayed: String? + @State private var isAltAlertDisplayed: Bool = false private var imageMaxHeight: CGFloat { if isCompact { @@ -82,6 +84,13 @@ public struct StatusMediaPreviewView: View { .transition(.opacity) } } + .alert("Image description", + isPresented: $isAltAlertDisplayed) { + Button("Ok", action: { }) + } message: { + Text(altTextDisplayed ?? "") + } + } @ViewBuilder @@ -100,17 +109,30 @@ public struct StatusMediaPreviewView: View { let availableWidth = UIScreen.main.bounds.width - (.layoutPadding * 2) - avatarColumnWidth let newSize = imageSize(from: size, newWidth: availableWidth) - LazyImage(url: attachement.url) { state in - if let image = state.image { - image - .resizingMode(.aspectFill) - .cornerRadius(4) - .frame(width: newSize.width, height: newSize.height) - } else { - RoundedRectangle(cornerRadius: 4) - .fill(Color.gray) - .frame(width: newSize.width, height: newSize.height) - .shimmering() + ZStack(alignment: .bottomTrailing) { + LazyImage(url: attachement.url) { state in + if let image = state.image { + image + .resizingMode(.aspectFill) + .cornerRadius(4) + .frame(width: newSize.width, height: newSize.height) + } else { + RoundedRectangle(cornerRadius: 4) + .fill(Color.gray) + .frame(width: newSize.width, height: newSize.height) + .shimmering() + } + } + if let alt = attachement.description { + Button { + altTextDisplayed = alt + isAltAlertDisplayed = true + } label: { + Text("ALT") + } + .padding(8) + .background(.thinMaterial) + .cornerRadius(4) } } } else { @@ -146,21 +168,35 @@ public struct StatusMediaPreviewView: View { GeometryReader { proxy in switch type { case .image: - LazyImage(url: attachement.url) { state in - if let image = state.image { - image - .resizingMode(.aspectFill) - .cornerRadius(4) - } else if state.isLoading { - RoundedRectangle(cornerRadius: 4) - .fill(Color.gray) - .frame(maxHeight: imageMaxHeight) - .frame(width: isCompact ? imageMaxHeight : proxy.frame(in: .local).width) - .shimmering() + ZStack(alignment: .bottomTrailing) { + LazyImage(url: attachement.url) { state in + if let image = state.image { + image + .resizingMode(.aspectFill) + .cornerRadius(4) + } else if state.isLoading { + RoundedRectangle(cornerRadius: 4) + .fill(Color.gray) + .frame(maxHeight: imageMaxHeight) + .frame(width: isCompact ? imageMaxHeight : proxy.frame(in: .local).width) + .shimmering() + } + } + .frame(width: isCompact ? imageMaxHeight : proxy.frame(in: .local).width) + .frame(height: imageMaxHeight) + if let alt = attachement.description { + Button { + altTextDisplayed = alt + isAltAlertDisplayed = true + } label: { + Text("ALT") + .font(.footnote) + } + .padding(4) + .background(.thinMaterial) + .cornerRadius(4) } } - .frame(width: isCompact ? imageMaxHeight : proxy.frame(in: .local).width) - .frame(height: imageMaxHeight) case .gifv, .video: if let url = attachement.url { VideoPlayerView(viewModel: .init(url: url)) diff --git a/README.md b/README.md index 3ba684a5..bc3e9291 100644 --- a/README.md +++ b/README.md @@ -19,14 +19,16 @@ For contributors and myself, here is a todo list of features that could be added - [ ] DM / Conversations - [X] Lists support -- [ ] Display images alt +- [X] Display images alt - [ ] Editor: Post image alts - [ ] Editor: Add / Edit polls - [ ] Editor: Support video types - [ ] Editor: Add photos from camera +- [ ] Editor: Support custom emojis - [X] Editor: Autocomplete for mentions / hashtags - [ ] Better settings tab - [ ] Edit profile +- [ ] Handle emoji in status - [X] Light theme - [X] More themes - [ ] Honor & display server side features (filter, default visibility, etc...)