Add proper audio preview support

public/style.css

@@ -874,6 +874,11 @@ input.form-control[type=file] {
   animation-duration: 0.1s;
 }
 
+audio.viewer-content {
+  min-height: 0;
+  width: 75%;
+}
+
 @keyframes zoom {
   from { transform: scale(.9) }
   to { transform: scale(1) }

src/View/Status.elm

@@ -35,24 +35,40 @@ attachmentPreview context sensitive attachments ({ url, preview_url } as attachm
         attId =
             "att" ++ attachment.id ++ context
 
+        previewUrl =
+            if preview_url == "" then
+                url
+            else
+                preview_url
+
         media =
-            a
+            case attachment.type_ of
-                [ if nsfw then
+                "audio" ->
-                    class "attachment-image nsfw"
+                    a
-                  else
+                        [ if nsfw then
-                    class "attachment-image"
+                            class "attachment-image nsfw"
-                , href url
+                          else
-                , onClickWithPreventAndStop <|
+                            class "attachment-image"
-                    ViewerEvent (OpenViewer attachments attachment)
-                ]
-                [ img [ src <|
-                            if preview_url == "" then
-                                url
-                            else
-                                preview_url
                         ]
-                        []
+                        [ audio
-                ]
+                            [ controls True
+                            , style [("width", "100%")]
+                            ]
+                            [ source [ src url ] []
+                            ]
+                        ]
+
+                _ ->
+                    a
+                        [ if nsfw then
+                            class "attachment-image nsfw"
+                          else
+                            class "attachment-image"
+                        , href url
+                        , onClickWithPreventAndStop <|
+                            ViewerEvent (OpenViewer attachments attachment)
+                        ]
+                        [ img [ src previewUrl ] [] ]
     in
         li [ class "attachment-entry" ] <|
             if nsfw then
@@ -61,7 +77,7 @@ attachmentPreview context sensitive attachments ({ url, preview_url } as attachm
                     [ text "Sensitive content"
                     , br [] []
                     , br [] []
-                    , text "click to show image"
+                    , text "click to show attachment"
                     ]
                 , media
                 ]

src/View/Viewer.elm

@@ -37,12 +37,20 @@ viewerView ({ attachments, attachment } as viewer) =
                 "image" ->
                     img [ class "viewer-content", src attachment.url ] []
 
+                "audio" ->
+                    audio
+                        [ class "viewer-content"
+                        , controls True
+                        ]
+                        [ source [ src attachment.url ] [] ]
+
                 _ ->
                     video
                         [ class "viewer-content"
                         , preload "auto"
                         , autoplay True
                         , loop True
+                        , controls True
                         ]
                         [ source [ src attachment.url ] [] ]
             , navLink "❯" "next" next <| ViewerEvent NextAttachment