added more info to media Metadata, and cleaned up itemDTO object.

.vscode/launch.json

@@ -37,7 +37,8 @@
         "YTP_LOG_LEVEL": "DEBUG",
         "YTP_DEBUG": "true",
         "YTP_YTDL_DEBUG": "true",
-        "YTP_MAX_WORKERS": "2"
+        "YTP_MAX_WORKERS": "2",
+        "YTP_IGNORE_UI": "true",
       }
     },
     {

app/library/DownloadQueue.py

@@ -135,6 +135,12 @@ class DownloadQueue:
                 LOG.exception(e)
                 return {"status": "error", "msg": str(e)}
 
+            extras: dict = {}
+            fields: tuple = ("uploader", "channel", "thumbnail")
+            for field in fields:
+                if entry.get(field, None):
+                    extras[field] = entry.get(field)
+
             dl = ItemDTO(
                 id=entry.get("id"),
                 title=entry.get("title"),
@@ -153,6 +159,7 @@ class DownloadQueue:
                 is_live=is_live,
                 live_in=live_in,
                 options=options,
+                extras=extras,
             )
 
             for property, value in entry.items():

app/library/HttpAPI.py

@@ -123,7 +123,12 @@ class HttpAPI(common):
                     preloaded += 2
 
         if preloaded < 1:
-            raise ValueError(f"Could not find the frontend UI static assets. '{staticDir}'.")
+            message = f"Could not find the frontend UI static assets. '{staticDir}'."
+            if self.config.ignore_ui:
+                LOG.warning(message)
+                return
+
+            raise ValueError(message)
 
         LOG.info(f"Preloaded '{preloaded}' static files.")
 
@@ -301,9 +306,7 @@ class HttpAPI(common):
         remove_file: bool = bool(post.get("remove_file", True))
 
         return web.json_response(
-            data=await (
-                self.queue.cancel(ids) if where == "queue" else self.queue.clear(ids, remove_file=remove_file)
-            ),
+            data=await (self.queue.cancel(ids) if where == "queue" else self.queue.clear(ids, remove_file=remove_file)),
             status=web.HTTPOk.status_code,
             dumps=self.encoder.encode,
         )

app/library/ItemDTO.py

@@ -36,6 +36,7 @@ class ItemDTO:
     live_in: str | None = None
     file_size: int | None = None
     options: dict = field(default_factory=dict)
+    extras: dict = field(default_factory=dict)
 
     # yt-dlp injected fields.
     tmpfilename: str | None = None
@@ -48,5 +49,21 @@ class ItemDTO:
     speed: str | None = None
     eta: str | None = None
 
+    def serialize(self) -> dict:
+        deprecated: tuple = (
+            "thumbnail",
+            "quality",
+            "format",
+        )
+
+        if self.thumbnail and "thumbnail" not in self.extras:
+            self.extras["thumbnail"] = self.thumbnail
+
+        dump = self.__dict__.copy()
+        for f in deprecated:
+            dump.pop(f)
+
+        return dump
+
     def json(self) -> str:
-        return json.dumps(self, default=lambda o: o.__dict__, sort_keys=True, indent=4)
+        return json.dumps(self.serialize(), default=lambda o: o.__dict__, sort_keys=True, indent=4)

app/library/Utils.py

@@ -4,7 +4,6 @@ import json
 import logging
 import os
 import pathlib
-import posixpath
 import re
 import socket
 import uuid

app/library/config.py

@@ -64,6 +64,7 @@ class Config:
     new_version_available: bool = False
     ytdlp_version: str = YTDLP_VERSION
     started: int = 0
+    ignore_ui: bool = False
     presets: list = [
         {"name": "default", "format": "default", "postprocessors": [], "args": {}},
         {
@@ -142,6 +143,7 @@ class Config:
         "allow_manifestless",
         "access_log",
         "remove_files",
+        "ignore_ui",
     )
 
     _frontend_vars: tuple = (

app/library/encoder.py

@@ -9,6 +9,9 @@ class Encoder(json.JSONEncoder):
     """
 
     def default(self, o):
+        if isinstance(o, object) and hasattr(o, "serialize"):
+            return o.serialize()
+
         if isinstance(o, object) and hasattr(o, "__dict__"):
             return o.__dict__
 

ui/components/History.vue

@@ -101,13 +101,14 @@
             <figure class="image is-3by1">
               <span v-if="'finished' === item.status" @click="playVideo(item)" class="play-overlay">
                 <div class="play-icon"></div>
-                <img :src="config.app.url_host + config.app.url_prefix + 'thumbnail?url=' + encodePath(item.thumbnail)"
-                  :alt="item.title" v-if="item.thumbnail" />
+                <img
+                  :src="config.app.url_host + config.app.url_prefix + 'thumbnail?url=' + encodePath(item.extras.thumbnail)"
+                  :alt="item.title" v-if="item.extras?.thumbnail" />
                 <img v-else src="/images/placeholder.png" :alt="item.title" />
               </span>
               <NuxtLink v-else target="_blank" :href="item.url" v-tooltip="`Open: ${item.title} link`">
-                <img :alt="item.title" v-if="item.thumbnail"
-                  :src="config.app.url_host + config.app.url_prefix + 'thumbnail?url=' + encodePath(item.thumbnail)" />
+                <img :alt="item.title" v-if="item.extras?.thumbnail"
+                  :src="config.app.url_host + config.app.url_prefix + 'thumbnail?url=' + encodePath(item.extras.thumbnail)" />
                 <img v-else src="/images/placeholder.png" :alt="item.title" />
               </NuxtLink>
             </figure>
@@ -233,7 +234,8 @@
       <div class="modal-background"></div>
       <div class="modal-content">
         <VideoPlayer type="default" :link="video_link" :isMuted="false" autoplay="true" :isControls="true"
-          :title="video_title" class="is-fullwidth" @closeModel="video_link = ''; video_title = ''" />
+          :title="video_title" :thumbnail="video_thumbnail" :artist="video_artist" class="is-fullwidth"
+          @closeModel="video_link = ''; video_title = ''; video_thumbnail = ''; video_artist = '';" />
       </div>
       <button class="modal-close is-large" aria-label="close" @click="video_link = ''"></button>
     </div>
@@ -250,38 +252,51 @@ const config = useConfigStore()
 const stateStore = useStateStore()
 const socket = useSocketStore()
 
-const selectedElms = ref([]);
-const masterSelectAll = ref(false);
+const selectedElms = ref([])
+const masterSelectAll = ref(false)
 const showCompleted = useStorage('showCompleted', true)
 const hideThumbnail = useStorage('hideThumbnailHistory', false)
 const direction = useStorage('sortCompleted', 'desc')
 
 const video_link = ref('')
 const video_title = ref('')
+const video_thumbnail = ref('')
+const video_artist = ref('')
 
 const playVideo = item => {
-  video_link.value = makeDownload(config, item, 'm3u8');
-  video_title.value = item.title;
+  video_thumbnail.value = '';
+  video_artist.value = '';
+  video_link.value = makeDownload(config, item, 'm3u8')
+  video_title.value = item.title
+  if (item.extras?.thumbnail) {
+    video_thumbnail.value = config.app.url_host + config.app.url_prefix + 'thumbnail?url=' + encodePath(item.extras.thumbnail)
+  }
+  if (item.extras?.channel) {
+    video_artist.value = item.extras.channel
+  }
+  if (!video_artist.value && item.extras?.uploader) {
+    video_artist.value = item.extras.uploader
+  }
 }
 
 watch(masterSelectAll, (value) => {
   for (const key in stateStore.history) {
-    const element = stateStore.history[key];
+    const element = stateStore.history[key]
     if (value) {
-      selectedElms.value.push(element._id);
+      selectedElms.value.push(element._id)
     } else {
-      selectedElms.value = [];
+      selectedElms.value = []
     }
   }
 })
 
 const sortCompleted = computed(() => {
-  const thisDirection = direction.value;
+  const thisDirection = direction.value
   return Object.values(stateStore.history).sort((a, b) => {
     if ('asc' === thisDirection) {
-      return new Date(a.datetime) - new Date(b.datetime);
+      return new Date(a.datetime) - new Date(b.datetime)
     }
-    return new Date(b.datetime) - new Date(a.datetime);
+    return new Date(b.datetime) - new Date(a.datetime)
   })
 })
 
@@ -293,80 +308,80 @@ const showMessage = (item) => {
     return false
   }
 
-  return item.msg.length > 0;
+  return item.msg.length > 0
 }
 
 const hasIncomplete = computed(() => {
   if (Object.keys(stateStore.history)?.length < 0) {
-    return false;
+    return false
   }
 
   for (const key in stateStore.history) {
-    const element = stateStore.history[key];
+    const element = stateStore.history[key]
     if (element.status !== 'finished') {
-      return true;
+      return true
     }
   }
-  return false;
+  return false
 })
 
 const hasCompleted = computed(() => {
   if (Object.keys(stateStore.history)?.length < 0) {
-    return false;
+    return false
   }
 
   for (const key in stateStore.history) {
-    const element = stateStore.history[key];
+    const element = stateStore.history[key]
     if (element.status === 'finished') {
-      return true;
+      return true
     }
   }
-  return false;
+  return false
 })
 
 const deleteSelectedItems = () => {
   if (selectedElms.value.length < 1) {
-    toast.error('No items selected.');
-    return;
+    toast.error('No items selected.')
+    return
   }
 
   let msg = `Are you sure you want to delete '${selectedElms.value.length}' items?`
   if (true === config.app.remove_files) {
-    msg += '\nThis will delete the files from the server if they exist.';
+    msg += '\nThis will delete the files from the server if they exist.'
   }
 
   if (false === confirm(msg)) {
-    return;
+    return
   }
 
   for (const key in selectedElms.value) {
-    const item = stateStore.history[selectedElms.value[key]];
+    const item = stateStore.history[selectedElms.value[key]]
     if ('finished' === item.status) {
-      socket.emit('archive_item', item);
+      socket.emit('archive_item', item)
     }
     socket.emit('item_delete', {
       id: item._id,
       remove_file: config.app.remove_files,
-    });
+    })
   }
 }
 
 const clearCompleted = () => {
-  let msg = 'Are you sure you want to clear all completed downloads?';
+  let msg = 'Are you sure you want to clear all completed downloads?'
   if (false === confirm(msg)) {
-    return;
+    return
   }
 
   for (const key in stateStore.history) {
     if ('finished' === ag(stateStore.get('history', key, {}), 'status')) {
-      socket.emit('item_delete', { id: stateStore.history[key]._id, remove_file: false, });
+      socket.emit('item_delete', { id: stateStore.history[key]._id, remove_file: false, })
     }
   }
 }
 
 const clearIncomplete = () => {
   if (false === confirm('Are you sure you want to clear all in-complete downloads?')) {
-    return;
+    return
   }
 
   for (const key in stateStore.history) {
@@ -374,40 +389,40 @@ const clearIncomplete = () => {
       socket.emit('item_delete', {
         id: stateStore.history[key]._id,
         remove_file: false,
-      });
+      })
     }
   }
 }
 
 const setIcon = item => {
   if (item.status === 'finished' && item.is_live) {
-    return 'fa-solid fa-globe';
+    return 'fa-solid fa-globe'
   }
 
   if (item.status === 'finished') {
-    return 'fa-solid fa-circle-check';
+    return 'fa-solid fa-circle-check'
   }
 
   if (item.status === 'error') {
-    return 'fa-solid fa-circle-xmark';
+    return 'fa-solid fa-circle-xmark'
   }
 
   if (item.status === 'canceled') {
-    return 'fa-solid fa-eject';
+    return 'fa-solid fa-eject'
   }
 
-  return 'fa-solid fa-circle';
+  return 'fa-solid fa-circle'
 }
 
 const requeueIncomplete = () => {
   if (false === confirm('Are you sure you want to re-queue all incomplete downloads?')) {
-    return false;
+    return false
   }
 
   for (const key in stateStore.history) {
-    const item = stateStore.get('history', key, {});
+    const item = stateStore.get('history', key, {})
     if ('finished' === item.status) {
-      continue;
+      continue
     }
     reQueueItem(item)
   }
@@ -417,12 +432,12 @@ const archiveItem = item => {
   if (!confirm(`Archive '${item.title ?? item.id ?? item.url ?? '??'}'?`)) {
     return
   }
-  socket.emit('archive_item', item);
-  socket.emit('item_delete', { id: item._id, remove_file: false });
+  socket.emit('archive_item', item)
+  socket.emit('item_delete', { id: item._id, remove_file: false })
 }
 
 const removeItem = item => {
-  const msg = `Remove '${item.title ?? item.id ?? item.url ?? '??'}'?\n this will delete the file from the server.`;
+  const msg = `Remove '${item.title ?? item.id ?? item.url ?? '??'}'?\n this will delete the file from the server.`
   if (config.app.remove_files && !confirm(msg)) {
     return false
   }
@@ -430,7 +445,7 @@ const removeItem = item => {
   socket.emit('item_delete', {
     id: item._id,
     remove_file: config.app.remove_files
-  });
+  })
 }
 
 const reQueueItem = item => {
@@ -442,6 +457,6 @@ const reQueueItem = item => {
     ytdlp_config: item.ytdlp_config,
     ytdlp_cookies: item.ytdlp_cookies,
     output_template: item.output_template,
-  });
+  })
 }
 </script>

ui/components/Queue.vue

@@ -50,9 +50,9 @@
             </div>
           </header>
           <div v-if="false === hideThumbnail" class="card-image">
-            <figure class="image is-3by1" v-if="item.thumbnail">
+            <figure class="image is-3by1" v-if="item.extras?.thumbnail">
               <NuxtLink v-tooltip="item.title" :href="item.url" target="_blank">
-                <img :src="config.app.url_host + config.app.url_prefix + 'thumbnail?url=' + encodePath(item.thumbnail)"
+                <img :src="config.app.url_host + config.app.url_prefix + 'thumbnail?url=' + encodePath(item.extras.thumbnail)"
                   :alt="item.title" />
               </NuxtLink>
             </figure>

ui/components/VideoPlayer.vue

@@ -43,6 +43,14 @@ const props = defineProps({
     type: String,
     default: ''
   },
+  thumbnail: {
+    type: String,
+    default: ''
+  },
+  artist: {
+    type: String,
+    default: ''
+  },
   isControls: {
     type: Boolean,
     default: true
@@ -85,10 +93,24 @@ onUnmounted(() => {
   if (props.title) {
     window.document.title = 'YTPTube'
   }
-
 })
 
 const prepareVideoPlayer = () => {
+  let mediaMetadata = {
+    title: props.title,
+  };
+
+  if (props.thumbnail) {
+    mediaMetadata['artwork'] = [
+      { src: props.thumbnail, sizes: '1920x1080', type: 'image/jpeg' },
+    ]
+  }
+  if (props.artist) {
+    mediaMetadata['artist'] = props.artist
+  }
+
+  console.log(mediaMetadata)
+
   player = new Plyr(video.value, {
     debug: false,
     clickToPlay: true,
@@ -106,9 +128,7 @@ const prepareVideoPlayer = () => {
       key: 'plyr'
     },
     title: props.title,
-    mediaMetadata: {
-      title: props.title
-    },
+    mediaMetadata: mediaMetadata,
     captions: {
       update: true,
     }