From a27709ccfd4caa45a84327e49a781e0bc796e65d Mon Sep 17 00:00:00 2001
From: Ryan Fox <flewkey@2a03.party>
Date: Sun, 7 Mar 2021 03:31:09 +0000
Subject: [PATCH] Add proper audio preview support

---
 public/style.css    |  5 +++++
 src/View/Status.elm | 50 ++++++++++++++++++++++++++++++---------------
 src/View/Viewer.elm |  8 ++++++++
 3 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/public/style.css b/public/style.css
index a501803..e6b125c 100644
--- a/public/style.css
+++ b/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) }
diff --git a/src/View/Status.elm b/src/View/Status.elm
index 5967b75..c405774 100644
--- a/src/View/Status.elm
+++ b/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
-                [ if nsfw then
-                    class "attachment-image nsfw"
-                  else
-                    class "attachment-image"
-                , href url
-                , onClickWithPreventAndStop <|
-                    ViewerEvent (OpenViewer attachments attachment)
-                ]
-                [ img [ src <|
-                            if preview_url == "" then
-                                url
-                            else
-                                preview_url
+            case attachment.type_ of
+                "audio" ->
+                    a
+                        [ if nsfw then
+                            class "attachment-image nsfw"
+                          else
+                            class "attachment-image"
                         ]
-                        []
-                ]
+                        [ 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
                 ]
diff --git a/src/View/Viewer.elm b/src/View/Viewer.elm
index 6013d7a..ce81311 100644
--- a/src/View/Viewer.elm
+++ b/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