diff --git a/public/style.css b/public/style.css index 5cabcf7..861547b 100644 --- a/public/style.css +++ b/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) } diff --git a/src/Mastodon/ApiUrl.elm b/src/Mastodon/ApiUrl.elm index 030c55b..6a1eb8e 100644 --- a/src/Mastodon/ApiUrl.elm +++ b/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 diff --git a/src/Mastodon/Decoder.elm b/src/Mastodon/Decoder.elm index edd2431..46742a4 100644 --- a/src/Mastodon/Decoder.elm +++ b/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 diff --git a/src/Mastodon/Model.elm b/src/Mastodon/Model.elm index f53a08d..016dcbc 100644 --- a/src/Mastodon/Model.elm +++ b/src/Mastodon/Model.elm @@ -161,6 +161,7 @@ type alias Attachment = , remote_url : String , preview_url : String , text_url : Maybe String + , description : Maybe String } diff --git a/src/Ports.elm b/src/Ports.elm index ff1b9f2..c82e880 100644 --- a/src/Ports.elm +++ b/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 diff --git a/src/Types.elm b/src/Types.elm index 24b4148..4b59239 100644 --- a/src/Types.elm +++ b/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 diff --git a/src/Update/Draft.elm b/src/Update/Draft.elm index bd9678b..2190142 100644 --- a/src/Update/Draft.elm +++ b/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 } } ! [] diff --git a/src/View/Draft.elm b/src/View/Draft.elm index 669dd5b..11c1b79 100644 --- a/src/View/Draft.elm +++ b/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" ] diff --git a/src/View/Viewer.elm b/src/View/Viewer.elm index ce81311..b5ab9be 100644 --- a/src/View/Viewer.elm +++ b/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