From 3d99247c012a2b35062c24faf7b3dd2f8139c091 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Tue, 22 Apr 2025 17:24:48 +0300
Subject: [PATCH] make the date update dynamic

---
 .vscode/settings.json     |  2 ++
 ui/components/History.vue | 20 +++++-----------
 ui/components/Queue.vue   | 12 ++++------
 ui/plugins/rtime.js       | 49 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 61 insertions(+), 22 deletions(-)
 create mode 100644 ui/plugins/rtime.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a0b3ca03..41b2ff98 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -48,6 +48,8 @@
     "preferredquality",
     "printtraffic",
     "quicktime",
+    "rtime",
+    "smhd",
     "timespec",
     "tmpfilename",
     "upgrader",
diff --git a/ui/components/History.vue b/ui/components/History.vue
index 562c86ae..6a065c02 100644
--- a/ui/components/History.vue
+++ b/ui/components/History.vue
@@ -125,17 +125,13 @@
                 </td>
                 <td class="is-vcentered has-text-centered is-unselectable">
                   <span class="user-hint" :date-datetime="item.datetime"
-                    v-tooltip="moment(item.datetime).format('YYYY-M-DD H:mm Z')">
-                    {{ moment(item.datetime).fromNow() }}
-                  </span>
+                    v-tooltip="moment(item.datetime).format('YYYY-M-DD H:mm Z')" v-rtime="item.datetime" />
                 </td>
                 <td class="is-vcentered has-text-centered is-unselectable"
                   v-if="item.live_in && 'not_live' === item.status">
-                  <span class="icon"><i class="fa-solid fa-spin fa-rotate-right" /></span>
                   <span :date-datetime="item.live_in" class="user-hint"
-                    v-tooltip="'Will automatically be requeued at: ' + moment(item.live_in).format('YYYY-M-DD H:mm Z')">
-                    {{ moment(item.live_in).fromNow() }}
-                  </span>
+                    v-tooltip="'Will automatically be requeued at: ' + moment(item.live_in).format('YYYY-M-DD H:mm Z')"
+                    v-rtime="item.live_in" />
                 </td>
                 <td class="is-vcentered has-text-centered is-unselectable" v-else>
                   {{ item.file_size ? formatBytes(item.file_size) : '-' }}
@@ -259,17 +255,13 @@
               </div>
               <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable"
                 v-if="item.live_in && 'not_live' === item.status">
-                <span class="icon"><i class="fa-solid fa-spin fa-rotate-right" /></span>
                 <span :date-datetime="item.live_in" class="user-hint"
-                  v-tooltip="'Will automatically be requeued at: ' + moment(item.live_in).format('YYYY-M-DD H:mm Z')">
-                  {{ moment(item.live_in).fromNow() }}
-                </span>
+                  v-tooltip="'Will automatically be requeued at: ' + moment(item.live_in).format('YYYY-M-DD H:mm Z')"
+                  v-rtime="item.live_in" />
               </div>
               <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
                 <span class="user-hint" :date-datetime="item.datetime"
-                  v-tooltip="moment(item.datetime).format('YYYY-M-DD H:mm Z')">
-                  {{ moment(item.datetime).fromNow() }}
-                </span>
+                  v-tooltip="moment(item.datetime).format('YYYY-M-DD H:mm Z')" v-rtime="item.datetime" />
               </div>
               <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable"
                 v-if="item.file_size">
diff --git a/ui/components/Queue.vue b/ui/components/Queue.vue
index 066c477a..3f9d21b9 100644
--- a/ui/components/Queue.vue
+++ b/ui/components/Queue.vue
@@ -83,10 +83,8 @@
                   </div>
                 </td>
                 <td class="has-text-centered is-text-overflow is-unselectable">
-                  <span :data-datetime="item.datetime"
-                    v-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
-                    {{ moment(item.datetime).fromNow() }}
-                  </span>
+                  <span v-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')"
+                    :data-datetime="item.datetime" v-rtime="item.datetime" />
                 </td>
                 <td class="is-vcentered is-items-center">
                   <div class="field is-grouped is-grouped-centered">
@@ -167,10 +165,8 @@
                 </span>
               </div>
               <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
-                <span :data-datetime="item.datetime"
-                  v-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
-                  {{ moment(item.datetime).fromNow() }}
-                </span>
+                <span v-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')" :data-datetime="item.datetime"
+                  v-rtime="item.datetime" />
               </div>
               <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
                 <label class="checkbox is-block">
diff --git a/ui/plugins/rtime.js b/ui/plugins/rtime.js
new file mode 100644
index 00000000..a6a934fc
--- /dev/null
+++ b/ui/plugins/rtime.js
@@ -0,0 +1,49 @@
+import { defineNuxtPlugin } from '#app'
+import moment from 'moment'
+
+const parseInterval = arg => {
+  const match = arg.match(/^(\d+)([smhd])$/)
+  if (!match) {
+    return 60 * 1000
+  }
+
+  const [, numStr, unit] = match
+  const num = parseInt(numStr, 10)
+
+  switch (unit) {
+    case 'd': return num * 24 * 3600 * 1000
+    case 'h': return num * 3600 * 1000
+    case 'm': return num * 60 * 1000
+    case 's': return num * 1000
+    default: return 60 * 1000
+  }
+}
+
+export default defineNuxtPlugin(nuxtApp => nuxtApp.vueApp.directive('rtime', {
+  mounted(el, binding) {
+    const intervalMs = binding.arg ? parseInterval(binding.arg) : 60 * 1000
+    const update = () => el.textContent = moment(binding.value).fromNow()
+
+    update()
+    el._next_timer = window.setInterval(update, intervalMs)
+  },
+  updated(el, binding) {
+    if (binding.oldValue !== binding.value) {
+      if (null != el._next_timer) {
+        clearInterval(el._next_timer)
+      }
+
+      const intervalMs = binding.arg ? parseInterval(binding.arg) : 60 * 1000
+
+      const update = () => el.textContent = moment(binding.value).fromNow()
+      update()
+
+      el._next_timer = window.setInterval(update, intervalMs)
+    }
+  },
+  beforeUnmount(el) {
+    if (null != el._next_timer) {
+      clearInterval(el._next_timer)
+    }
+  }
+}))