From 07dff34e20e0436a7ef6291f1a86f1032078556a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 2 Jan 2023 14:21:38 +0800
Subject: [PATCH] Show formatted duration for video media

---
 src/components/status.css | 55 ++++++++++++++++++++-------------------
 src/components/status.jsx | 17 ++++++++++++
 2 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index ae65237a..ebc1d6ad 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -357,39 +357,40 @@
   position: relative;
   background-clip: padding-box;
 }
-.status .media-video:before {
-  /* draw a circle in the middle */
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.status .media-video[data-formatted-duration]:before {
+  pointer-events: none;
+  content: '⏵';
   width: 70px;
   height: 70px;
-  border-radius: 50%;
+  font-size: 50px;
+  position: absolute;
+  text-indent: 3px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--text-insignificant-color);
   background-color: var(--bg-blur-color);
   backdrop-filter: blur(6px) saturate(3) invert(0.2);
-  z-index: 1;
+  display: flex;
+  place-content: center;
+  place-items: center;
+  border-radius: 70px;
 }
-.status .media-video:after {
-  /* show play icon */
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-35%, -50%);
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 15px 0 15px 26px;
-  border-color: transparent transparent transparent
-    var(--text-insignificant-color);
+.status .media-video[data-formatted-duration]:hover:before {
+  color: var(--text-color);
+}
+.status .media-video[data-formatted-duration]:after {
+  font-size: 12px;
   pointer-events: none;
-  opacity: 0.75;
-  z-index: 2;
-}
-.status .media-video:hover:after {
-  opacity: 1;
+  content: attr(data-formatted-duration);
+  position: absolute;
+  bottom: 8px;
+  left: 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-gif video {
   object-fit: cover;
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 5f8df8af..5dbff1f5 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -764,9 +764,11 @@ function Media({ media, showOriginal, onClick = () => {} }) {
     const shortDuration = original.duration <= 20;
     const isGIF = type === 'gifv' || shortDuration;
     const loopable = original.duration <= 60;
+    const formattedDuration = formatDuration(original.duration);
     return (
       <div
         class={`media media-${isGIF ? 'gif' : 'video'}`}
+        data-formatted-duration={formattedDuration}
         style={{
           backgroundColor:
             rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
@@ -1423,4 +1425,19 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
   );
 }
 
+function formatDuration(time) {
+  if (!time) return;
+  let hours = Math.floor(time / 3600);
+  let minutes = Math.floor((time % 3600) / 60);
+  let seconds = Math.round(time % 60);
+
+  if (hours === 0) {
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  } else {
+    return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds
+      .toString()
+      .padStart(2, '0')}`;
+  }
+}
+
 export default Status;