From 585ec1d40087c8eaa00444a80d15b58e15e6fe9e Mon Sep 17 00:00:00 2001 From: girst Date: Fri, 7 Aug 2020 18:23:53 +0200 Subject: [PATCH] implement video badge (for length) --- app/dangerous/templates/channel.html.j2 | 26 ++-------------- app/dangerous/templates/playlist.html.j2 | 25 ++-------------- app/dangerous/templates/search.html.j2 | 22 +------------- app/static/style.css | 14 +++++++++ app/templates/macros.imp.j2 | 38 +++++++++++++++++++++--- 5 files changed, 53 insertions(+), 72 deletions(-) diff --git a/app/dangerous/templates/channel.html.j2 b/app/dangerous/templates/channel.html.j2 index 62462f1..5cc3efd 100644 --- a/app/dangerous/templates/channel.html.j2 +++ b/app/dangerous/templates/channel.html.j2 @@ -36,32 +36,10 @@
- {# TODO: copy pasted from dangerous/search.j2 #} {% for card in rows %} - {% set c = card.content %} - {% if card.type == 'VIDEO' %} - {% call macros.card(c.video_id, c.title, c.length) %} - {{ macros.infobar_subscriptions(c.video_id, c.channel_id, c.author) }} - {{ c.published if c.published }}  - {% endcall %} - {% elif card.type == 'CHANNEL' and c.channel_id != channel_id %} - {% call macros.card_generic("/channel/"~c.channel_id, c.icons[c.icons.largest] if 'icons' in c else '', c.title) %} - Channel - {{ c.subscribers }} - {% endcall %} - {% elif card.type == 'PLAYLIST' %} - {% call macros.card_generic("/playlist?list="~c.playlist_id, "https://i.ytimg.com/vi/"~c.video_id~"/mqdefault.jpg", c.title) %} - {{ c.author }} - {{ c.n_videos }} videos - {% endcall %} - {% elif card.type == 'WEBSITE' %} - {% call macros.card_generic(c.url, c.icons[250] if 'icons' in c else '', c.title) %} - {{ c.domain }} - {% endcall %} - {% endif %} + {{ macros.typed_card(card) }} {% endfor %} - -{{ macros.dummycard() }} + {{ macros.dummycard() }}
diff --git a/app/dangerous/templates/playlist.html.j2 b/app/dangerous/templates/playlist.html.j2 index a77ae3a..8c8c0e7 100644 --- a/app/dangerous/templates/playlist.html.j2 +++ b/app/dangerous/templates/playlist.html.j2 @@ -8,30 +8,9 @@
{# TODO: copy pasted from dangerous/search.j2 #} {% for card in rows %} - {% set c = card.content %} - {% if card.type == 'VIDEO' %} - {% call macros.card(c.video_id, c.title, c.length) %} - {{ macros.infobar_subscriptions(c.video_id, c.channel_id, c.author) }} - {{ c.published if c.published }}  - {% endcall %} - {% elif card.type == 'CHANNEL' and c.channel_id != channel_id %} - {% call macros.card_generic("/channel/"~c.channel_id, c.icons[c.icons.largest] if 'icons' in c else '', c.title) %} - Channel - {{ c.subscribers }} - {% endcall %} - {% elif card.type == 'PLAYLIST' %} - {% call macros.card_generic("/playlist?list="~c.playlist_id, "https://i.ytimg.com/vi/"~c.video_id~"/mqdefault.jpg", c.title) %} - {{ c.author }} - {{ c.n_videos }} videos - {% endcall %} - {% elif card.type == 'WEBSITE' %} - {% call macros.card_generic(c.url, c.icons[c.icons.largest] if 'icons' in c else '', c.title) %} - {{ c.domain }} - {% endcall %} - {% endif %} + {{ macros.typed_card(card) }} {% endfor %} - -{{ macros.dummycard() }} + {{ macros.dummycard() }}
diff --git a/app/dangerous/templates/search.html.j2 b/app/dangerous/templates/search.html.j2 index 1ae40ad..29f4f01 100644 --- a/app/dangerous/templates/search.html.j2 +++ b/app/dangerous/templates/search.html.j2 @@ -88,27 +88,7 @@
{%for x in rows|selectattr('content.error')%}{{x.content.error}}{%endfor%}
{% for card in rows %} - {% set c = card.content %} - {% if card.type == 'VIDEO' %} - {% call macros.card(c.video_id, c.title, c.length) %} - {{ macros.infobar_subscriptions(c.video_id, c.channel_id, c.author) }} - {{ c.published if c.published }}  - {% endcall %} - {% elif card.type == 'CHANNEL' and c.channel_id != channel_id %} - {% call macros.card_generic("/channel/"~c.channel_id, c.icons[c.icons.largest] if 'icons' in c else '', c.title) %} - Channel - {{ c.subscribers }} - {% endcall %} - {% elif card.type == 'PLAYLIST' %} - {% call macros.card_generic("/playlist?list="~c.playlist_id, "https://i.ytimg.com/vi/"~c.video_id~"/mqdefault.jpg", c.title) %} - {{ c.author }} - {{ c.n_videos }} videos - {% endcall %} - {% elif card.type == 'WEBSITE' %} - {% call macros.card_generic(c.url, c.icons[250] if 'icons' in c else '', c.title) %} - {{ c.domain }} - {% endcall %} - {% endif %} + {{ macros.typed_card(card) }} {% endfor %} {{ macros.dummycard() }}
diff --git a/app/static/style.css b/app/static/style.css index f550737..87535a1 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -111,8 +111,22 @@ article { .card .thumb { width: 100%; height: calc(270px / 16 * 9); + position: relative; +} +.card .thumb img { + width: 100%; height: 100%; object-fit: contain; } +.card .thumb .badge { + position: absolute; + right: 0; + bottom: 0; + background: rgba(16,16,16,.8); + margin: .2em; + padding: .2em; + border-radius: 6px; + font-size: smaller; +} .card .title { margin-bottom: .5em; diff --git a/app/templates/macros.imp.j2 b/app/templates/macros.imp.j2 index e29a9d4..34768b2 100644 --- a/app/templates/macros.imp.j2 +++ b/app/templates/macros.imp.j2 @@ -1,7 +1,14 @@ -{% macro card_generic(link, thumbnail, title='') -%} +{% set fallback_img = "data:image/svg+xml," %} + +{% macro card_generic(link, thumbnail, title='', badge=None) -%}
- "}}"> +
+ + {% if badge is not none %} + {{ badge | e }} + {% endif %} +
{{ title | e }}
@@ -11,9 +18,9 @@
{%- endmacro %} -{% macro card(video_id, title='', advanced_text='', pinned="undefined", advanced_title='', post_url=None) -%} +{% macro card(video_id, title='', advanced_text='', pinned="undefined", advanced_title='', post_url=None, badge=None) -%} {% set caller_ = caller %} - {% call card_generic("/watch?v="~video_id, "https://i.ytimg.com/vi/"~video_id~"/mqdefault.jpg", title) %} + {% call card_generic("/watch?v="~video_id, "https://i.ytimg.com/vi/"~video_id~"/mqdefault.jpg", title, badge) %} {{ caller_() }}
{{ advanced_text }}
@@ -31,6 +38,29 @@ {% endcall %} {%- endmacro %} +{% macro typed_card(params) -%} + {% set c = params.content %} + {% if params.type == 'VIDEO' %} + {% call card(c.video_id, c.title, c.published, badge=c.length) %} + {{ infobar_subscriptions(c.video_id, c.channel_id, c.author) }} + {% endcall %} + {% elif params.type == 'CHANNEL' and c.channel_id != channel_id %} + {% call card_generic("/channel/"~c.channel_id, c.icons[c.icons.largest] if 'icons' in c else '', c.title) %} + Channel + {{ c.subscribers }} + {% endcall %} + {% elif params.type == 'PLAYLIST' %} + {% call card_generic("/playlist?list="~c.playlist_id, "https://i.ytimg.com/vi/"~c.video_id~"/mqdefault.jpg", c.title) %} + {{ c.author }} + {{ c.n_videos }} videos + {% endcall %} + {% elif params.type == 'WEBSITE' %} + {% call card_generic(c.url, c.icons[c.icons.largest] if 'icons' in c else '', c.title) %} + {{ c.domain }} + {% endcall %} + {% endif %} +{%- endmacro %} + {% macro dummycard() -%} {% for _ in range(4) %}
-- 2.39.3