make the date update dynamic

.vscode/settings.json

@@ -48,6 +48,8 @@
     "preferredquality",
     "printtraffic",
     "quicktime",
+    "rtime",
+    "smhd",
     "timespec",
     "tmpfilename",
     "upgrader",

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')">
+                    v-tooltip="moment(item.datetime).format('YYYY-M-DD H:mm Z')" v-rtime="item.datetime" />
-                    {{ moment(item.datetime).fromNow() }}
-                  </span>
                 </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')">
+                    v-tooltip="'Will automatically be requeued at: ' + moment(item.live_in).format('YYYY-M-DD H:mm Z')"
-                    {{ moment(item.live_in).fromNow() }}
+                    v-rtime="item.live_in" />
-                  </span>
                 </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')">
+                  v-tooltip="'Will automatically be requeued at: ' + moment(item.live_in).format('YYYY-M-DD H:mm Z')"
-                  {{ moment(item.live_in).fromNow() }}
+                  v-rtime="item.live_in" />
-                </span>
               </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')">
+                  v-tooltip="moment(item.datetime).format('YYYY-M-DD H:mm Z')" v-rtime="item.datetime" />
-                  {{ moment(item.datetime).fromNow() }}
-                </span>
               </div>
               <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable"
                 v-if="item.file_size">

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"
+                  <span v-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')"
-                    v-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
+                    :data-datetime="item.datetime" v-rtime="item.datetime" />
-                    {{ moment(item.datetime).fromNow() }}
-                  </span>
                 </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"
+                <span v-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')" :data-datetime="item.datetime"
-                  v-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
+                  v-rtime="item.datetime" />
-                  {{ moment(item.datetime).fromNow() }}
-                </span>
               </div>
               <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
                 <label class="checkbox is-block">

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)
+    }
+  }
+}))