From 8a8dad12c8d722fe530043a8d9cef92da49b60cc Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 9 Jan 2023 01:17:16 +0800
Subject: [PATCH] Better handling of audio

---
 src/components/status.css | 35 ++++++++++++++++++++++++++---------
 src/components/status.jsx | 19 +++++++++++++++++--
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index 2f8af54d..ec05dd52 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -366,7 +366,7 @@
   height: 100%;
   object-fit: cover;
 }
-.status .media:not(.media-audio) {
+.status .media {
   cursor: pointer;
 }
 @keyframes position-object {
@@ -391,12 +391,11 @@
   height: 100%;
   object-fit: contain;
 }
-.status .media-video,
-.status .media-gif {
+.status :is(.media-video, .media-audio, .media-gif) {
   position: relative;
   background-clip: padding-box;
 }
-.status .media-video[data-formatted-duration]:before {
+.status :is(.media-video, .media-audio)[data-formatted-duration]:before {
   pointer-events: none;
   content: '⏵';
   width: 70px;
@@ -416,23 +415,26 @@
   border-radius: 70px;
   transition: all 0.2s ease-in-out;
 }
-.status .media-video[data-formatted-duration]:hover:before {
+.status :is(.media-video, .media-audio)[data-formatted-duration]:hover:before {
   color: var(--text-color);
   background-color: var(--bg-blur-color);
 }
-.status .media-video[data-formatted-duration]:after {
+.status :is(.media-video, .media-audio)[data-formatted-duration]:after {
   font-size: 12px;
   pointer-events: none;
   content: attr(data-formatted-duration);
   position: absolute;
   bottom: 8px;
-  left: 8px;
+  right: 8px;
   color: var(--bg-color);
   background-color: var(--text-color);
   backdrop-filter: blur(6px) saturate(3) invert(0.2);
   border-radius: 4px;
   padding: 0 4px;
 }
+.status .media-audio[data-formatted-duration]:after {
+  content: '♬ ' attr(data-formatted-duration);
+}
 .status .media-gif[data-label]:not(:hover):after {
   font-size: 12px;
   font-weight: bold;
@@ -440,7 +442,7 @@
   content: attr(data-label);
   position: absolute;
   bottom: 8px;
-  left: 8px;
+  right: 8px;
   color: var(--bg-faded-color);
   background-color: var(--text-insignificant-color);
   backdrop-filter: blur(6px) saturate(3) invert(0.2);
@@ -458,12 +460,27 @@
 .status .media-contain video {
   object-fit: contain !important;
 }
-.status .media-audio {
+/* .status .media-audio {
   border: 0;
   min-height: 0;
 }
 .status .media-audio audio {
   width: 100%;
+} */
+.status .media-audio {
+  width: 100%;
+  height: 100%;
+  background-image: radial-gradient(
+      circle at center center,
+      var(--bg-color),
+      var(--bg-faded-color)
+    ),
+    repeating-radial-gradient(
+      circle at center center,
+      transparent,
+      var(--bg-faded-color) 16px
+    );
+  background-blend-mode: multiply;
 }
 
 /* CARD */
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 4ce72fea..fafe5dc9 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -839,9 +839,24 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
       </div>
     );
   } else if (type === 'audio') {
+    const formattedDuration = formatDuration(original.duration);
     return (
-      <div class="media media-audio">
-        <audio src={remoteUrl || url} preload="none" controls />
+      <div
+        class="media media-audio"
+        data-formatted-duration={formattedDuration}
+        onClick={onClick}
+      >
+        {showOriginal ? (
+          <audio src={remoteUrl || url} preload="none" controls autoplay />
+        ) : previewUrl ? (
+          <img
+            src={previewUrl}
+            alt={description}
+            width={width}
+            height={height}
+            loading="lazy"
+          />
+        ) : null}
       </div>
     );
   }