Display image alt in feed

This commit is contained in:
Thomas Ricouard 2023-01-03 08:45:27 +01:00
parent fb0cd6b623
commit 37a5567fe7
2 changed files with 63 additions and 25 deletions

View File

@ -14,6 +14,8 @@ public struct StatusMediaPreviewView: View {
@State private var isQuickLookLoading: Bool = false @State private var isQuickLookLoading: Bool = false
@State private var width: CGFloat = 0 @State private var width: CGFloat = 0
@State private var altTextDisplayed: String?
@State private var isAltAlertDisplayed: Bool = false
private var imageMaxHeight: CGFloat { private var imageMaxHeight: CGFloat {
if isCompact { if isCompact {
@ -82,6 +84,13 @@ public struct StatusMediaPreviewView: View {
.transition(.opacity) .transition(.opacity)
} }
} }
.alert("Image description",
isPresented: $isAltAlertDisplayed) {
Button("Ok", action: { })
} message: {
Text(altTextDisplayed ?? "")
}
} }
@ViewBuilder @ViewBuilder
@ -100,6 +109,7 @@ public struct StatusMediaPreviewView: View {
let availableWidth = UIScreen.main.bounds.width - (.layoutPadding * 2) - avatarColumnWidth let availableWidth = UIScreen.main.bounds.width - (.layoutPadding * 2) - avatarColumnWidth
let newSize = imageSize(from: size, let newSize = imageSize(from: size,
newWidth: availableWidth) newWidth: availableWidth)
ZStack(alignment: .bottomTrailing) {
LazyImage(url: attachement.url) { state in LazyImage(url: attachement.url) { state in
if let image = state.image { if let image = state.image {
image image
@ -113,6 +123,18 @@ public struct StatusMediaPreviewView: View {
.shimmering() .shimmering()
} }
} }
if let alt = attachement.description {
Button {
altTextDisplayed = alt
isAltAlertDisplayed = true
} label: {
Text("ALT")
}
.padding(8)
.background(.thinMaterial)
.cornerRadius(4)
}
}
} else { } else {
AsyncImage( AsyncImage(
url: attachement.url, url: attachement.url,
@ -146,6 +168,7 @@ public struct StatusMediaPreviewView: View {
GeometryReader { proxy in GeometryReader { proxy in
switch type { switch type {
case .image: case .image:
ZStack(alignment: .bottomTrailing) {
LazyImage(url: attachement.url) { state in LazyImage(url: attachement.url) { state in
if let image = state.image { if let image = state.image {
image image
@ -161,6 +184,19 @@ public struct StatusMediaPreviewView: View {
} }
.frame(width: isCompact ? imageMaxHeight : proxy.frame(in: .local).width) .frame(width: isCompact ? imageMaxHeight : proxy.frame(in: .local).width)
.frame(height: imageMaxHeight) .frame(height: imageMaxHeight)
if let alt = attachement.description {
Button {
altTextDisplayed = alt
isAltAlertDisplayed = true
} label: {
Text("ALT")
.font(.footnote)
}
.padding(4)
.background(.thinMaterial)
.cornerRadius(4)
}
}
case .gifv, .video: case .gifv, .video:
if let url = attachement.url { if let url = attachement.url {
VideoPlayerView(viewModel: .init(url: url)) VideoPlayerView(viewModel: .init(url: url))

View File

@ -19,14 +19,16 @@ For contributors and myself, here is a todo list of features that could be added
- [ ] DM / Conversations - [ ] DM / Conversations
- [X] Lists support - [X] Lists support
- [ ] Display images alt - [X] Display images alt
- [ ] Editor: Post image alts - [ ] Editor: Post image alts
- [ ] Editor: Add / Edit polls - [ ] Editor: Add / Edit polls
- [ ] Editor: Support video types - [ ] Editor: Support video types
- [ ] Editor: Add photos from camera - [ ] Editor: Add photos from camera
- [ ] Editor: Support custom emojis
- [X] Editor: Autocomplete for mentions / hashtags - [X] Editor: Autocomplete for mentions / hashtags
- [ ] Better settings tab - [ ] Better settings tab
- [ ] Edit profile - [ ] Edit profile
- [ ] Handle emoji in status
- [X] Light theme - [X] Light theme
- [X] More themes - [X] More themes
- [ ] Honor & display server side features (filter, default visibility, etc...) - [ ] Honor & display server side features (filter, default visibility, etc...)