From fd32097982d962be9788b23b531cb2eb6956ba19 Mon Sep 17 00:00:00 2001
From: ArabCoders <admin@arabcoders.org>
Date: Mon, 13 Jan 2025 17:15:04 +0300
Subject: [PATCH] Added view url information in history and queue

---
 ui/components/History.vue     | 22 ++++++++++++++++------
 ui/components/NewDownload.vue | 10 ++++------
 ui/components/Queue.vue       | 14 +++++++++++---
 ui/layouts/default.vue        | 11 +++++++++--
 ui/pages/index.vue            |  5 +++--
 5 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/ui/components/History.vue b/ui/components/History.vue
index 08ce1aea..9e41e712 100644
--- a/ui/components/History.vue
+++ b/ui/components/History.vue
@@ -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()
diff --git a/ui/components/NewDownload.vue b/ui/components/NewDownload.vue
index ae3662f1..1f91c007 100644
--- a/ui/components/NewDownload.vue
+++ b/ui/components/NewDownload.vue
@@ -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;
diff --git a/ui/components/Queue.vue b/ui/components/Queue.vue
index 91af9588..0b49c6f4 100644
--- a/ui/components/Queue.vue
+++ b/ui/components/Queue.vue
@@ -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();
diff --git a/ui/layouts/default.vue b/ui/layouts/default.vue
index acc4c917..4e99ab91 100644
--- a/ui/layouts/default.vue
+++ b/ui/layouts/default.vue
@@ -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')
diff --git a/ui/pages/index.vue b/ui/pages/index.vue
index aead7ed2..4c63a272 100644
--- a/ui/pages/index.vue
+++ b/ui/pages/index.vue
@@ -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()