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

Added view url information in history and queue

Browse source
This commit is contained in:
ArabCoders 2025-01-13 17:15:04 +03:00
parent a473e19ead
commit fd32097982
5 changed files with 43 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ui/components/History.vue
View file

@ -75,7 +75,8 @@
</div>
<div class="columns is-multiline">
<LateLoader :unrender="true" :min-height="210" class="column is-6" v-for="item in sortCompleted" :key="item._id">
<LateLoader :unrender="true" :min-height="hideThumbnail ? 210 : 410" class="column is-6"
v-for="item in sortCompleted" :key="item._id">
<div class="card"
:class="{ 'is-bordered-danger': item.status === 'error', 'is-bordered-info': item.live_in || item.is_live }">
<header class="card-header has-tooltip">
@ -114,7 +115,7 @@
<div class="columns is-mobile is-multiline">
<div class="column is-12" v-if="item.live_in">
<span class="has-text-info">
LIVE stream is scheduled to start at {{ moment(item.live_in).format() }}
Live stream is scheduled to start at {{ moment(item.live_in).format() }}
</span>
</div>
<div class="column is-12" v-if="item.error">
@ -130,7 +131,7 @@
:class="{ 'has-text-success': item.status === 'finished', 'has-text-danger': item.status !== 'finished' }">
<i :class="setIcon(item)" />
</span>
<span v-if="item.status == 'finished' && item.is_live">Stream Ended</span>
<span v-if="item.status == 'finished' && item.is_live">Live Ended</span>
<span v-else>{{ ucFirst(item.status) }}</span>
</span>
</span>
@ -139,7 +140,7 @@
<span class="icon has-text-info">
<i class="fa-solid fa-calendar" />
</span>
<span>Live Stream</span>
<span>Live</span>
</span>
</span>
</div>
@ -151,8 +152,8 @@
</div>
<div class="column is-half-mobile has-text-centered is-text-overflow"
v-if="item.live_in && item.status != 'finished'">
<span :date-datetime="item.datetime"
v-tooltip="'Will start at: ' + moment(item.live_in).format('YYYY-M-DD H:mm Z')">
<span :date-datetime="item.live_in"
v-tooltip="'Starts at: ' + moment(item.live_in).format('YYYY-M-DD H:mm Z')">
{{ moment(item.live_in).fromNow() }}
</span>
</div>
@ -202,6 +203,14 @@
</span>
</a>
</div>
<div class="column is-half-mobile" v-if="item.url">
<button class="button is-info is-fullwidth" @click="emitter('getInfo', item.url)">
<span class="icon-text is-block">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Information</span>
</span>
</button>
</div>
</div>
</div>
</div>
@ -245,6 +254,7 @@ import { useStorage } from '@vueuse/core'
import { makeDownload, formatBytes, ucFirst } from '~/utils/index'
import toast from '~/plugins/toast'
const emitter = defineEmits(['getInfo'])
const config = useConfigStore()
const stateStore = useStateStore()
const socket = useSocketStore()

10
ui/components/NewDownload.vue
View file

@ -107,10 +107,10 @@
</div>
</div>
<div class="column is-6-tablet is-4-mobile has-text-left">
<button type="submit" class="button is-info" @click="getInfo" :class="{ 'is-loading': !socket.isConnected }"
:disabled="!socket.isConnected || addInProgress || !url">
<button type="submit" class="button is-info" @click="emitter('getInfo', url)"
:class="{ 'is-loading': !socket.isConnected }" :disabled="!socket.isConnected || addInProgress || !url">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Info</span>
<span>Information</span>
</button>
</div>
<div class="column is-6-tablet is-6-mobile has-text-right">
@ -132,13 +132,13 @@
<datalist id="folders" v-if="config?.folders">
<option v-for="dir in config.folders" :key="dir" :value="dir" />
</datalist>
<GetInfo v-if="get_info && url" :link="url" @closeModel="get_info = false" />
</main>
</template>
<script setup>
import { useStorage } from '@vueuse/core'
const emitter = defineEmits(['getInfo'])
const config = useConfigStore();
const socket = useSocketStore();
const toast = useToast();
@ -151,8 +151,6 @@ const downloadPath = useStorage('downloadPath', null)
const url = useStorage('downloadUrl', null)
const showAdvanced = useStorage('show_advanced', false)
const addInProgress = ref(false)
const get_info = ref(false)
const getInfo = () => get_info.value = true
const addDownload = () => {
addInProgress.value = true;

14
ui/components/Queue.vue
View file

@ -34,8 +34,8 @@
</div>
<div class="columns is-multiline">
<LateLoader :unrender="true" :min-height="265" class="column is-6" v-for="item in stateStore.queue"
:key="item._id">
<LateLoader :unrender="true" :min-height="hideThumbnail ? 265 : 475" class="column is-6"
v-for="item in stateStore.queue" :key="item._id">
<div class="card">
<header class="card-header">
<div class="card-header-title is-text-overflow is-block" v-tooltip="item.title">
@ -102,6 +102,14 @@
</span>
</button>
</div>
<div class="column is-half-mobile" v-if="item.url">
<button class="button is-info is-fullwidth" @click="emitter('getInfo', item.url)">
<span class="icon-text is-block">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Information</span>
</span>
</button>
</div>
</div>
</div>
</div>
@ -134,7 +142,7 @@ import moment from 'moment'
import { useStorage } from '@vueuse/core'
import { ucFirst } from '~/utils/index'
const toast = useToast();
const emitter = defineEmits(['getInfo'])
const config = useConfigStore();
const stateStore = useStateStore();
const socket = useSocketStore();

11
ui/layouts/default.vue
View file

@ -67,8 +67,9 @@
</div>
</nav>
<NewDownload v-if="config.showForm" />
<NuxtPage />
<NewDownload v-if="config.showForm" @getInfo="url => get_info = url" />
<NuxtPage @getInfo="url => get_info = url" />
<GetInfo v-if="get_info" :link="get_info" @closeModel="get_info = ''" />
<div class="columns mt-3 is-mobile">
<div class="column is-8-mobile">
@ -104,6 +105,7 @@ const socket = useSocketStore()
const config = useConfigStore()
const isChecking = ref(false)
const toast = useToast()
const get_info = ref('')
const applyPreferredColorScheme = scheme => {
for (let s = 0; s < document.styleSheets.length; s++) {
@ -150,6 +152,11 @@ const checkCookies = async () => {
if (true === isChecking.value) {
return
}
if (false === confirm(`Check for cookies status?`)) {
return
}
try {
isChecking.value = true
const response = await fetch(config.app.url_host + config.app.url_prefix + 'api/youtube/auth')

5
ui/pages/index.vue
View file

@ -1,11 +1,12 @@
<template>
<div>
<Queue />
<History />
<Queue @getInfo="url => emitter('getInfo', url)" />
<History @getInfo="url => emitter('getInfo', url)" />
</div>
</template>
<script setup>
const emitter = defineEmits(['getInfo'])
const config = useConfigStore()
const stateStore = useStateStore()