From 3b9c9acdeb5825ba3a1ab60143c6bdeb552c7923 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Fri, 28 Mar 2025 22:44:05 +0300
Subject: [PATCH] extends the improvements to download page.

---
 app/library/Utils.py           |  2 +-
 ui/assets/css/style.css        |  5 +++++
 ui/components/EmbedPlayer.vue  | 13 ++++++++++---
 ui/components/History.vue      |  4 ++--
 ui/components/Queue.vue        |  4 ++--
 ui/components/VideoPlayer.vue  |  5 +++--
 ui/pages/browser/[...slug].vue |  9 +--------
 7 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/app/library/Utils.py b/app/library/Utils.py
index 12ca271a..210d2ad4 100644
--- a/app/library/Utils.py
+++ b/app/library/Utils.py
@@ -540,7 +540,7 @@ def get_file_sidecar(file: pathlib.Path) -> list[dict]:
 
 
 @lru_cache(maxsize=512)
-def get_possible_images(dir: str) -> list[str]:
+def get_possible_images(dir: str) -> list[dict]:
     images = []
 
     path_loc = pathlib.Path(dir, "test.jpg")
diff --git a/ui/assets/css/style.css b/ui/assets/css/style.css
index 264f0995..0867fd4b 100644
--- a/ui/assets/css/style.css
+++ b/ui/assets/css/style.css
@@ -281,3 +281,8 @@ hr {
   background-repeat: no-repeat;
   background-blend-mode: darken;
 }
+
+.is-unbounded-model {
+  max-height: unset !important;
+  width: unset !important;
+}
diff --git a/ui/components/EmbedPlayer.vue b/ui/components/EmbedPlayer.vue
index 0b692a4e..ce22b216 100644
--- a/ui/components/EmbedPlayer.vue
+++ b/ui/components/EmbedPlayer.vue
@@ -1,9 +1,16 @@
+<style scoped>
+.embed-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80vh;
+  width: 80vw;
+}
+</style>
 <template>
   <div class="content">
     <h1 class="has-text-white">Not downloaded yet.</h1>
-    <figure class="image is-16by9">
-      <iframe class="has-ratio" :src="url" frameborder="0" allowfullscreen />
-    </figure>
+    <iframe class="embed-content" :src="url" frameborder="0" allowfullscreen />
   </div>
 </template>
 
diff --git a/ui/components/History.vue b/ui/components/History.vue
index 92d00baf..965ea74c 100644
--- a/ui/components/History.vue
+++ b/ui/components/History.vue
@@ -350,7 +350,7 @@
 
     <div class="modal is-active" v-if="video_item">
       <div class="modal-background" @click="closeVideo"></div>
-      <div class="modal-content">
+      <div class="modal-content is-unbounded-model">
         <VideoPlayer type="default" :isMuted="false" autoplay="true" :isControls="true" :item="video_item"
           class="is-fullwidth" @closeModel="closeVideo" />
       </div>
@@ -359,7 +359,7 @@
 
     <div class="modal is-active" v-if="embed_url">
       <div class="modal-background" @click="embed_url = ''"></div>
-      <div class="modal-content">
+      <div class="modal-content is-unbounded-model">
         <EmbedPlayer :url="embed_url" @closeModel="embed_url = ''" />
       </div>
       <button class="modal-close is-large" aria-label="close" @click="embed_url = ''"></button>
diff --git a/ui/components/Queue.vue b/ui/components/Queue.vue
index 0fa5a62b..3eabebe4 100644
--- a/ui/components/Queue.vue
+++ b/ui/components/Queue.vue
@@ -137,7 +137,7 @@
           </header>
           <div v-if="false === hideThumbnail" class="card-image">
             <figure class="image is-3by1">
-              <span v-if="isEmbedable(item.url)" @click="() => embed_url = getEmbedable(item.url)" class="play-overlay">
+              <span v-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url)" class="play-overlay">
                 <div class="play-icon embed-icon"></div>
                 <img @load="e => pImg(e)" :src="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)"
                   v-if="item.extras?.thumbnail" />
@@ -224,7 +224,7 @@
 
     <div class="modal is-active" v-if="embed_url">
       <div class="modal-background" @click="embed_url = ''"></div>
-      <div class="modal-content">
+      <div class="modal-content is-unbounded-model">
         <EmbedPlayer :url="embed_url" @closeModel="embed_url = ''" />
       </div>
       <button class="modal-close is-large" aria-label="close" @click="embed_url = ''"></button>
diff --git a/ui/components/VideoPlayer.vue b/ui/components/VideoPlayer.vue
index bd163757..026dc49f 100644
--- a/ui/components/VideoPlayer.vue
+++ b/ui/components/VideoPlayer.vue
@@ -3,8 +3,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
-  width: 100%;
+  height: auto;
+  max-height: 80vh;
+  max-width: 80vw;
 }
 </style>
 <template>
diff --git a/ui/pages/browser/[...slug].vue b/ui/pages/browser/[...slug].vue
index 8131f03b..07147039 100644
--- a/ui/pages/browser/[...slug].vue
+++ b/ui/pages/browser/[...slug].vue
@@ -1,10 +1,3 @@
-<style>
-.is-unbounded {
-  max-height: unset !important;
-  width: unset !important;
-}
-</style>
-
 <template>
   <div>
     <div class="mt-1 columns is-multiline">
@@ -114,7 +107,7 @@
     </div>
     <div class="modal is-active" v-if="model_item">
       <div class="modal-background" @click="closeModel"></div>
-      <div class="modal-content" :class="{ 'is-unbounded': ['image', 'text'].includes(model_item.type) }">
+      <div class="modal-content is-unbounded-model">
         <VideoPlayer type="default" :isMuted="false" autoplay="true" :isControls="true" :item="model_item"
           class="is-fullwidth" @closeModel="closeModel" v-if="'video' === model_item.type" />
         <GetInfo :link="model_item.filename" :useUrl="true" @closeModel="closeModel" :externalModel="true"