make it possible to view local item info

ui/components/History.vue

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

ui/pages/index.vue

@@ -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" />
+    <Queue @getInfo="(url: string) => view_info(url, false)" :thumbnails="show_thumbnail"
-    <History @getInfo="url => get_info = url" @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" @closeModel="get_info = ''" />
+    <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 get_info = ref<string>('')
-const bg_enable = useStorage('random_bg', true)
+const get_info_use_url = ref<boolean>(false)
-const bg_opacity = useStorage('random_bg_opacity', 0.85)
+const bg_enable = useStorage<boolean>('random_bg', true)
-const display_style = useStorage('display_style', 'cards')
+const bg_opacity = useStorage<number>('random_bg_opacity', 0.85)
-const show_thumbnail = useStorage('show_thumbnail', true)
+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
   }