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

make it possible to view local item info

Browse source
This commit is contained in:
arabcoders 2025-06-20 20:36:22 +03:00
parent 7dca15a5aa
commit c8dbd93efb
2 changed files with 49 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
ui/components/History.vue
View file

@ -190,7 +190,12 @@
</template>
<NuxtLink class="dropdown-item" @click="emitter('getInfo', item.url)">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Information</span>
<span>yt-dlp Information</span>
</NuxtLink>
<NuxtLink class="dropdown-item" @click="emitter('getItemInfo', item._id)">
<span class="icon"><i class="fa-solid fa-info-circle" /></span>
<span>Local Information</span>
</NuxtLink>
<template v-if="item.status != 'finished' || !item.filename">
@ -311,7 +316,8 @@
</div>
<div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable"
v-if="item.file_size">
{{ formatBytes(item.file_size) }}
<span class="has-tooltip" v-tooltip="`Path: ${makePath(item)}`">{{
formatBytes(item.file_size) }}</span>
</div>
</div>
<div class="columns is-mobile is-multiline">
@ -361,7 +367,12 @@
<NuxtLink class="dropdown-item" @click="emitter('getInfo', item.url)">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Information</span>
<span>yt-dlp Information</span>
</NuxtLink>
<NuxtLink class="dropdown-item" @click="emitter('getItemInfo', item._id)">
<span class="icon"><i class="fa-solid fa-info-circle" /></span>
<span>Local Information</span>
</NuxtLink>
<template v-if="item.status != 'finished' || !item.filename">
@ -435,7 +446,7 @@ import { getEmbedable, isEmbedable } from '~/utils/embedable'
import { formatBytes, makeDownload, uri } from '~/utils/index'
import Dropdown from './Dropdown.vue'
const emitter = defineEmits(['getInfo', 'add_new'])
const emitter = defineEmits(['getInfo', 'add_new', 'getItemInfo'])
const props = defineProps({
thumbnails: {
@ -862,4 +873,14 @@ const is_queued = item => {
return item.live_in || item.extras?.live_in || item.extras?.release_in ? 'fa-spin fa-spin-10' : ''
}
const makePath = item => {
if (!item?.filename) {
return ''
}
const real_path = eTrim(item.download_dir, '/') + '/' + sTrim(item.filename, '/')
return real_path.replace(config.app.download_path, '').replace(/^\//, '')
}
</script>

35
ui/pages/index.vue
View file

@ -49,13 +49,15 @@
<NewDownload v-if="config.showForm || config.app.basic_mode" @getInfo="url => get_info = url" :item="item_form"
@clear_form="item_form = {}" @remove_archive="" />
<Queue @getInfo="url => get_info = url" :thumbnails="show_thumbnail" />
<History @getInfo="url => get_info = url" @add_new="item => toNewDownload(item)" :thumbnails="show_thumbnail" />
<GetInfo v-if="get_info" :link="get_info" @closeModel="get_info = ''" />
<Queue @getInfo="(url: string) => view_info(url, false)" :thumbnails="show_thumbnail"
@getItemInfo="(id: string) => view_info(`/api/history/${id}`, true)" />
<History @getInfo="(url: string) => view_info(url, false)" @add_new="item => toNewDownload(item)"
:thumbnails="show_thumbnail" @getItemInfo="(id: string) => view_info(`/api/history/${id}`, true)" />
<GetInfo v-if="get_info" :link="get_info" :useUrl="get_info_use_url" @closeModel="close_info()" />
</div>
</template>
<script setup>
<script setup lang="ts">
import { useStorage } from '@vueuse/core'
const config = useConfigStore()
@ -63,11 +65,12 @@ const stateStore = useStateStore()
const socket = useSocketStore()
const box = useConfirm()
const get_info = ref('')
const bg_enable = useStorage('random_bg', true)
const bg_opacity = useStorage('random_bg_opacity', 0.85)
const display_style = useStorage('display_style', 'cards')
const show_thumbnail = useStorage('show_thumbnail', true)
const get_info = ref<string>('')
const get_info_use_url = ref<boolean>(false)
const bg_enable = useStorage<boolean>('random_bg', true)
const bg_opacity = useStorage<number>('random_bg_opacity', 0.85)
const display_style = useStorage<string>('display_style', 'cards')
const show_thumbnail = useStorage<boolean>('show_thumbnail', true)
const item_form = ref({})
@ -101,17 +104,27 @@ const pauseDownload = () => {
socket.emit('pause', {})
}
const close_info = () => {
get_info.value = ''
get_info_use_url.value = false
}
const view_info = (url: string, useUrl: boolean = false) => {
get_info.value = url
get_info_use_url.value = useUrl
}
watch(get_info, v => {
if (!bg_enable.value) {
return
}
document.querySelector('body').setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
document.querySelector('body')?.setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
})
const changeDisplay = () => display_style.value = display_style.value === 'cards' ? 'list' : 'cards'
const toNewDownload = async (item) => {
const toNewDownload = async (item: any) => {
if (!item) {
return
}