[feat] video results: display video length on video thumbnail

2 files changed, 39 insertions, 28 deletions

diff --git a/client/simple/src/less/style.less b/client/simple/src/less/style.less
index 4859b33a9..027e8d2bf 100644
--- a/client/simple/src/less/style.less
+++ b/client/simple/src/less/style.less
@@ -169,6 +169,17 @@ article[data-vim-selected].category-social {
   .rounded-corners;
 }
 
+.image-label-bottom-right() {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background: var(--color-image-resolution-background);
+  padding: 0.3rem 0.5rem;
+  font-size: 0.9rem;
+  color: var(--color-image-resolution-font);
+  border-top-left-radius: 0.3rem;
+}
+
 .result {
   margin: @results-margin 0;
   padding: @result-padding;
@@ -295,12 +306,22 @@ article[data-vim-selected].category-social {
     color: var(--color-result-description-highlight-font);
   }
 
-  img.thumbnail {
+  a.thumbnail_link {
+    position: relative;
+    margin-top: 0.6rem;
+    .ltr-margin-right(1rem);
     .ltr-float-left();
-    padding-top: 0.6rem;
-    .ltr-padding-right(1rem);
-    width: 7rem;
-    height: unset; // remove height value that was needed for lazy loading
+
+    img.thumbnail {
+      width: 7rem;
+      height: unset; // remove height value that was needed for lazy loading
+      display: block;
+    }
+
+    .thumbnail_length {
+      .image-label-bottom-right();
+      right: 6px;
+    }
   }
 
   .break {
@@ -391,23 +412,19 @@ article[data-vim-selected].category-social {
 }
 
 .result-videos {
-  img.thumbnail {
-    .ltr-float-left();
-    padding-top: 0.6rem;
-    .ltr-padding-right(1rem);
+  a.thumbnail_link img.thumbnail {
     width: 20rem;
-    height: unset; // remove height value that was needed for lazy loading
   }
-}
 
-.result-videos .content {
-  overflow: hidden;
-}
+  .content {
+    overflow: hidden;
+  }
 
-.result-videos .embedded-video iframe {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  padding: 10px 0 0 0;
+  .embedded-video iframe {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    padding: 10px 0 0 0;
+  }
 }
 
 @supports not (aspect-ratio: 1 / 1) {
@@ -472,14 +489,7 @@ article[data-vim-selected].category-social {
   }
 
   .image_resolution {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    background: var(--color-image-resolution-background);
-    padding: 0.3rem 0.5rem;
-    font-size: 0.9rem;
-    color: var(--color-image-resolution-font);
-    border-top-left-radius: 0.3rem;
+    .image-label-bottom-right();
   }
 
   span.title,
diff --git a/searx/templates/simple/macros.html b/searx/templates/simple/macros.html
index df8469d72..43be87615 100644
--- a/searx/templates/simple/macros.html
+++ b/searx/templates/simple/macros.html
@@ -30,14 +30,15 @@
     {%- endfor %}
   </div>
   {{- result_close_link() -}}
-  {%- if result.thumbnail %}{{ result_open_link(result.url) }}<img class="thumbnail" src="{{ image_proxify(result.thumbnail) }}" title="{{ result.title|striptags }}" loading="lazy">{{ result_close_link() }}{% endif -%}
+  {%- if result.thumbnail %}{{ result_open_link(result.url, classes='thumbnail_link') }}<img class="thumbnail" src="{{ image_proxify(result.thumbnail) }}" title="{{ result.title|striptags }}" loading="lazy">{%- if result.length -%}<span class="thumbnail_length">{{ result.length }}</span>{%- endif -%}{{ result_close_link() }}{% endif -%}
   <h3>{{ result_link(result.url, result.title|safe) }}</h3>
 {%- endmacro -%}
 
 <!-- Draw result sub header -->
 {%- macro result_sub_header(result) -%}
   {%- if result.publishedDate %}<time class="published_date" datetime="{{ result.pubdate }}" >{{ result.publishedDate }}</time>{% endif -%}
-  {%- if result.length %}<div class="result_length">{{ _('Length') }}: {{ result.length }}</div>{% endif -%}
+  <!-- Length is displayed inside the thumbnail if there's any, so don't display it here a second time -->
+  {%- if result.length and not result.thumbnail %}<div class="result_length">{{ _('Length') }}: {{ result.length }}</div>{% endif -%}
   {%- if result.views %}<div class="result_views">{{ _('Views') }}: {{ result.views }}</div>{% endif -%}
   {%- if result.author %}<div class="result_author">{{ _('Author') }}: {{ result.author }}</div>{% endif -%}
   {%- if result.metadata %}<div class="highlight">{{ result.metadata|safe }}</div>{% endif -%}