Display image alt in feed

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
+        ZStack(alignment: .bottomTrailing) {
-          if let image = state.image {
+          LazyImage(url: attachement.url) { state in
-            image
+            if let image = state.image {
-              .resizingMode(.aspectFill)
+              image
-              .cornerRadius(4)
+                .resizingMode(.aspectFill)
-              .frame(width: newSize.width, height: newSize.height)
+                .cornerRadius(4)
-          } else {
+                .frame(width: newSize.width, height: newSize.height)
-            RoundedRectangle(cornerRadius: 4)
+            } else {
-              .fill(Color.gray)
+              RoundedRectangle(cornerRadius: 4)
-              .frame(width: newSize.width, height: newSize.height)
+                .fill(Color.gray)
-              .shimmering()
+                .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
+            ZStack(alignment: .bottomTrailing) {
-              if let image = state.image {
+              LazyImage(url: attachement.url) { state in
-                image
+                if let image = state.image {
-                  .resizingMode(.aspectFill)
+                  image
-                  .cornerRadius(4)
+                    .resizingMode(.aspectFill)
-              } else if state.isLoading {
+                    .cornerRadius(4)
-                RoundedRectangle(cornerRadius: 4)
+                } else if state.isLoading {
-                  .fill(Color.gray)
+                  RoundedRectangle(cornerRadius: 4)
-                  .frame(maxHeight: imageMaxHeight)
+                    .fill(Color.gray)
-                  .frame(width: isCompact ? imageMaxHeight : proxy.frame(in: .local).width)
+                    .frame(maxHeight: imageMaxHeight)
-                  .shimmering()
+                    .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))

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...)