From d589e821a58135403aceddfb0b57ab2e566e5252 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 9 Jun 2023 10:46:21 +0200
Subject: [PATCH] Use relative (="ago") time display in audio mode

---
 src/assets/translations/en.json         |  8 ++++-
 src/components/AudioLayout.vue          |  2 +-
 src/components/messages/messageMixin.js | 40 +++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index 04b5939..f262aab 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -11,7 +11,13 @@
     "show_less": "Show less",
     "show_more": "Show more",
     "add_reaction": "Add reaction",
-    "click_to_remove": "Click to remove"
+    "click_to_remove": "Click to remove",
+    "time": {
+      "recently": "just now",
+      "minutes": "1 minute ago | {n} minutes ago",
+      "hours": "1 hour ago | {n} hours ago",
+      "days": "1 day ago | {n} days ago"
+    }
   },
   "menu": {
     "start_private_chat": "Private chat with this user",
diff --git a/src/components/AudioLayout.vue b/src/components/AudioLayout.vue
index d796d38..24b04d9 100644
--- a/src/components/AudioLayout.vue
+++ b/src/components/AudioLayout.vue
@@ -45,7 +45,7 @@
     <div v-if="currentAudioEvent" class="senderAndTime">
       <div class="sender">{{ eventSenderDisplayName(currentAudioEvent) }}</div>
       <div class="time">
-        {{ formatTime(currentAudioEvent.event.origin_server_ts) }}
+        {{ formatTimeAgo(currentAudioEvent.event.origin_server_ts) }}
       </div>
     </div>
     <div class="play-time">
diff --git a/src/components/messages/messageMixin.js b/src/components/messages/messageMixin.js
index 4a822cf..7fde69e 100644
--- a/src/components/messages/messageMixin.js
+++ b/src/components/messages/messageMixin.js
@@ -247,6 +247,46 @@ export default {
       return date.toLocaleString();
     },
 
+    formatTimeAgo(time) {
+      const date = new Date();
+      date.setTime(time);
+      var ti = Math.abs(new Date().getTime() - date.getTime());
+      ti = ti / 1000; // Convert to seconds
+      let s = "";
+      if (ti < 60) {
+        s = this.$t("global.time.recently");
+      } else if (ti < 3600 && Math.round(ti / 60) < 60) {
+        s = this.$tc("global.time.minutes", Math.round(ti / 60));
+      } else if (ti < 86400 && Math.round(ti / 60 / 60) < 24) {
+        s = this.$tc("global.time.hours", Math.round(ti / 60 / 60));
+      } else {
+        s = this.$tc("global.time.days", Math.round(ti / 60 / 60 / 24));
+      }
+      return this.toLocalNumbers(s);
+    },
+
+    /**
+     * Possibly convert numerals to local representation (currently only for "bo" locale)
+     * @param str String in which to convert numerals [0-9]
+     * @returns converted string
+     */
+    toLocalNumbers(str) {
+      if (this.$i18n.locale == "bo") {
+        // Translate to tibetan numerals
+        let result = "";
+        for (let i = 0; i < str.length; i++) {
+          let c = str.charCodeAt(i);
+          if (c >= 48 && c <= 57) {
+            result += String.fromCharCode(c + 0x0f20 - 48);
+          } else {
+            result += String.fromCharCode(c);
+          }
+        }
+        return result;
+      }
+      return str;
+    },
+
     linkify(text) {
       return linkifyHtml(text);
     },