danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

make the date update dynamic

Browse source
This commit is contained in:
arabcoders 2025-04-22 17:24:48 +03:00
parent bfe30bc5af
commit 3d99247c01
4 changed files with 61 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.vscode/settings.json vendored
View file

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

20
ui/components/History.vue
View file

@ -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">

12
ui/components/Queue.vue
View file

@ -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">

49
ui/plugins/rtime.js Normal file
View file

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