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

This commit is contained in:
Bnyro 2025-10-12 20:18:10 +02:00 committed by Markus Heiser
parent 1d138c5968
commit 636738779e
2 changed files with 39 additions and 28 deletions

View File

@ -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,

View File

@ -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 -%}