Add initial support for alt text

The input doesn't actually work right now, but it's a step in the right
direction.

public/style.css

@@ -688,12 +688,20 @@ form.search {
 .draft-attachment-entry {
   display: table-cell;
   width: 25%;
-  height: 60px;
+  height: 125px;
+}
+
+.draft-attachment-entry input {
+  height: 2em;
+  width: 100%;
+  background: rgba(255,255,255,0.5);
+  color: #000;
+  border: none;
 }
 
 .draft-attachment-entry a {
   display: block;
-  height: 60px;
+  height: 100%;
   opacity: 0;
   background: transparent;
   font-size: 45px;
@@ -938,11 +946,30 @@ input.form-control[type=file] {
   animation-duration: 0.1s;
 }
 
+div.viewer-content {
+  display: flex;
+  flex-flow: column;
+}
+
 audio.viewer-content {
   min-height: 0;
   width: 75%;
 }
 
+.viewer-content img {
+  max-height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  object-fit: contain;
+}
+
+.viewer-content .alt-text {
+  text-align: center;
+  font-size: large;
+  margin: 1em auto 0 auto;
+  max-width: 1080px;
+}
+
 @keyframes zoom {
   from { transform: scale(.9) }
   to { transform: scale(1) }

src/Mastodon/ApiUrl.elm

@@ -30,6 +30,7 @@ module Mastodon.ApiUrl
         , block
         , unblock
         , uploadMedia
+        , updateMedia
         , streaming
         , search
         )
@@ -209,3 +210,8 @@ streaming =
 uploadMedia : String
 uploadMedia =
     apiPrefix ++ "/media"
+
+
+updateMedia : String -> String
+updateMedia id =
+    apiPrefix ++ "/media/" ++ id

src/Mastodon/Decoder.elm

@@ -155,6 +155,7 @@ attachmentDecoder =
         |> Pipe.optional "remote_url" Decode.string ""
         |> Pipe.optional "preview_url" Decode.string ""
         |> Pipe.optional "text_url" (Decode.nullable Decode.string) Nothing
+        |> Pipe.optional "description" (Decode.nullable Decode.string) Nothing
 
 
 contextDecoder : Decode.Decoder Context

src/Mastodon/Model.elm

@@ -161,6 +161,7 @@ type alias Attachment =
     , remote_url : String
     , preview_url : String
     , text_url : Maybe String
+    , description : Maybe String
     }
 
 

src/Ports.elm

@@ -6,6 +6,7 @@ port module Ports
         , saveClients
         , setStatus
         , uploadMedia
+        , updateMedia
         , notify
         , uploadSuccess
         , uploadError
@@ -32,6 +33,9 @@ port scrollIntoView : String -> Cmd msg
 port uploadMedia : { id : String, url : String, token : String } -> Cmd msg
 
 
+port updateMedia : { id : String, url : String, token : String, description : String } -> Cmd msg
+
+
 port notify : { title : String, icon : String, body : String, clickUrl : String } -> Cmd msg
 
 

src/Types.elm

@@ -22,6 +22,7 @@ type DraftMsg
     | SelectAccount String
     | SetAutoState Autocomplete.Msg
     | ToggleSpoiler Bool
+    | UpdateAltText String String
     | UpdateInputInformation InputInformation
     | UpdateSensitive Bool
     | UpdateSpoiler String

src/Update/Draft.elm

@@ -101,6 +101,17 @@ update draftMsg currentUser ({ draft } as model) =
             in
                 { model | draft = newDraft } ! []
 
+        UpdateAltText id altText ->
+            { model | draft = { draft | attachments =
+                draft.attachments |> List.map
+                    (\a ->
+                        if a.id == id then
+                            { a | description = Just altText }
+                        else
+                            a
+                    )
+                } } ! []
+
         UpdateSensitive sensitive ->
             { model | draft = { draft | sensitive = sensitive } } ! []
 

src/View/Draft.elm

@@ -312,7 +312,12 @@ draftAttachments attachments =
                     [ href ""
                     , onClickWithPreventAndStop <| DraftEvent (RemoveMedia attachment.id)
                     ]
-                    [ text "×" ]
+                    [ text "×" ],
+                  input
+                    [ type_ "field"
+                    , placeholder "Alt text",
+                    onInput <| DraftEvent << (UpdateAltText attachment.id)]
+                    []
                 ]
     in
         div [ class "draft-attachments-field" ]

src/View/Viewer.elm

@@ -25,6 +25,8 @@ viewerView ({ attachments, attachment } as viewer) =
                         , onClickWithPreventAndStop event
                         ]
                         [ text label ]
+
+        altText = Maybe.withDefault "No description. 😢" attachment.description
     in
         div
             [ class "viewer"
@@ -35,7 +37,10 @@ viewerView ({ attachments, attachment } as viewer) =
             , navLink "❮" "prev" prev <| ViewerEvent NextAttachment
             , case attachment.type_ of
                 "image" ->
-                    img [ class "viewer-content", src attachment.url ] []
+                    div [ class "viewer-content" ] [
+                        img [ src attachment.url, alt altText, title altText ] [],
+                        span [ class "alt-text" ] [ text altText ]
+                    ]
 
                 "audio" ->
                     audio