extends the improvements to download page.

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")

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;
+}

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="embed-content" :src="url" frameborder="0" allowfullscreen />
-      <iframe class="has-ratio" :src="url" frameborder="0" allowfullscreen />
-    </figure>
   </div>
 </template>
 

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>

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>

ui/components/VideoPlayer.vue

@@ -3,8 +3,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  height: auto;
-  width: 100%;
+  max-height: 80vh;
+  max-width: 80vw;
 }
 </style>
 <template>

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"