From 6f0241982e30cf92a8df1262fdadc5cae91c9cd8 Mon Sep 17 00:00:00 2001 From: Felix Stupp Date: Sun, 6 Nov 2022 12:52:01 +0100 Subject: [PATCH] Implement thumbnail view --- server/templates/collection_element.htm | 8 +- server/templates/collection_episodes.htm | 8 +- server/templates/dashboard.htm | 12 +- server/templates/macros.htm | 201 ++++++++++++++++++++ server/templates/media_list.htm | 4 +- server/templates/recommendations_simple.htm | 8 +- 6 files changed, 222 insertions(+), 19 deletions(-) diff --git a/server/templates/collection_element.htm b/server/templates/collection_element.htm index 17a9055..726c6a0 100644 --- a/server/templates/collection_element.htm +++ b/server/templates/collection_element.htm @@ -110,11 +110,9 @@

{% else %}

Episodes

- + {{ macros.media_thumbnail_list( + links=media_links, + ) }} {% endif %} diff --git a/server/templates/collection_episodes.htm b/server/templates/collection_episodes.htm index ea2d56d..7fa8305 100644 --- a/server/templates/collection_episodes.htm +++ b/server/templates/collection_episodes.htm @@ -12,10 +12,8 @@

{{ title }}

back to collection info

Episodes

- + {{ macros.media_thumbnail_list( + links=media_links, + ) }} diff --git a/server/templates/dashboard.htm b/server/templates/dashboard.htm index 70938b7..c706def 100644 --- a/server/templates/dashboard.htm +++ b/server/templates/dashboard.htm @@ -12,16 +12,22 @@

{{ title }}

{% if began_videos %}

Began Videos

- {{ macros.media_table(began_videos) }} + {{ macros.media_thumbnail_list( + elements=began_videos, + ) }} {% endif %}

From Pinned Collections

{% if links_from_pinned_collections %} - {{ macros.link_differ_table(links_from_pinned_collections) }} + {{ macros.media_thumbnail_list( + links=links_from_pinned_collections, + ) }} {% else %} No pinned collections with episodes to watch found. See pinned collections {% endif %}

Latest Videos

- {{ macros.media_table(media_list) }} + {{ macros.media_thumbnail_list( + elements=media_list, + ) }} diff --git a/server/templates/macros.htm b/server/templates/macros.htm index 236d395..6e84b8a 100644 --- a/server/templates/macros.htm +++ b/server/templates/macros.htm @@ -86,6 +86,126 @@ font-size: 1.2rem; } + /* thumbnail view */ + .thumbnail_img { + width: 100%; + aspect-ratio: 16 / 9; + } + .thumbnail_list { + display: grid; + grid-template-columns: repeat(auto-fill, calc(240px * 1.2)); + gap: 1rem; + justify-content: center; + } + .thumbnail_list::after { + content: ""; + flex: auto; + } + .thumbnail_entry { + display: flex; + /*width: 240px;*/ + flex-direction: column; + flex-wrap: nowrap; + align-items: stretch; + gap: .1rem; + } + .thumbnail_view { + display: block; + position: relative; + z-index: 0; + } + .thumbnail_view > * { + z-index: 30; + } + .thumbnail_view > .thumbnail_img { + display: block; + z-index: 10; + } + .thumbnail_view > .button_list { + display: inline-flex; + flex-wrap: nowrap; + align-items: center; + align-content: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + gap: 1rem; + opacity: 0%; + visibility: hidden; + transition: opacity .2s linear, visibility .2s linear; + } + .thumbnail_view:hover > .button_list, + .thumbnail_view:active > .button_list { + opacity: 100%; + visibility: visible; + } + .thumbnail_view > .button_list button, + .thumbnail_view > .button_list .button { + display: inline-block; + color: white; + font-size: 1.8em; + width: 2.4rem; + height: 2.4rem; + text-align: center; + vertical-align: middle; + margin: 0; + padding: .2rem; + border-radius: 100%; + background-color: rgba(0, 0, 0, 0.6); + } + .thumbnail_view > .button_list .play_button { + font-size: 2em; + width: 2.8rem; + height: 2.8rem; + } + .thumbnail_view > .additional_info, + .thumbnail_view > .episode_info, + .thumbnail_view > .length, + .thumbnail_view > .release_date { + display: block; + font-size: .8em; + position: absolute; + margin: .2rem; + z-index: 40; + } + .thumbnail_view > .episode_info, + .thumbnail_view > .length, + .thumbnail_view > .release_date { + padding: .2rem; + border-radius: .2rem; + --box-color: rgba(0, 0, 0, 0.7); + background-color: var(--box-color); + box-shadow: 0 0 .4rem .16rem var(--box-color); + } + .thumbnail_view > .episode_info { + top: 0; + left: 0; + } + .thumbnail_view > .additional_info { + top: 0; + right: 0; + } + .thumbnail_view > .release_date { + left: 0; + bottom: 0; + } + .thumbnail_view > .length { + bottom: 0; + right: 0; + } + .thumbnail_title { + padding: .1rem; + white-space: normal; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + max-height: calc(2em + (.24em * 2)); + font-size: .9rem; + font-weight: 300; + } /* Collection Table Listing */ .collection_table_list .thumbnail_img { max-width: 140px; @@ -194,6 +314,25 @@ {% endif %} {% endmacro %} +{% macro media_thumbnail_buttons( + element, + show_fragment=True, +) %} + {% set api_uri = "/api/media/" + element.id|string %} + {% set fragment = ("media_element_" + element.id|string) if show_fragment else None %} + {% if element.watched %} + {{ as_play_link(element, symbol='▷') }} + {{ post_form(api_uri, "watched", "false", "✅"|safe, fragment) }} + {% elif element.ignored %} + {{ as_play_link(element, symbol='▷') }} + {{ post_form(api_uri, "ignored", "false", "❎"|safe, fragment) }} + {% else %} + {{ post_form(api_uri, "watched", "true", "✓"|safe, fragment) }} + {{ as_play_link(element, symbol='▷') }} + {{ post_form(api_uri, "ignored", "true", "✕"|safe, fragment) }} + {% endif %} +{% endmacro %} + {% macro link_position_marker(link, prefix=false) -%} {{- prefix and (link.season != 0 or link.episode != 0) | tenary(", ", "") -}} {%- if link.season != 0 -%} @@ -205,6 +344,68 @@ {%- endif -%} {%- endmacro %} +{% macro media_thumbnail_view( + element=None, + link=None, +) %} + {% set element = link.element if link else element %} +
+
+ Thumbnail for {{ element.title }} + {% if link and (link.season or link.episode) %} + + {%- if link.season != 0 -%} + s{{ "%02d" % link.season }} + {%- endif -%} + {%- if link.episode != 0 -%} + e{{ "%02d" % link.episode }} + {%- endif -%} + + {% endif %} +
+ {{ media_thumbnail_buttons(element) }} +
+ {% if caller is defined %} +
+ {{ caller() }} +
+ {% endif %} + + {{ element.release_date | time_since }} + + + {{- element.length | timedelta -}} + +
+ + {{ element.title }} + +
+{%- endmacro %} + +{% macro media_thumbnail_list( + elements=None, + links=None, +) %} + {%- set l = elements or links -%} +
+ {% for o in l %} + {% set elem = o.element if links else o %} + {{ media_thumbnail_view( + element=o if not links else None, + link=o if links else None, + ) }} + {% endfor %} +
+{%- endmacro %} + {% macro media_entry_content(element, show_fragment=True) %} {{ media_element_buttons(element, show_fragment=show_fragment) }} {{ element.release_date.strftime("%d.%m.%Y") }} diff --git a/server/templates/media_list.htm b/server/templates/media_list.htm index fb4d60e..11a8a14 100644 --- a/server/templates/media_list.htm +++ b/server/templates/media_list.htm @@ -10,6 +10,8 @@ {{ macros.body_header() }}

{{ title }}

- {{ macros.media_table(media_list) }} + {{ macros.media_thumbnail_list( + elements=media_list, + ) }} diff --git a/server/templates/recommendations_simple.htm b/server/templates/recommendations_simple.htm index f9fbf7c..88e9614 100644 --- a/server/templates/recommendations_simple.htm +++ b/server/templates/recommendations_simple.htm @@ -10,10 +10,8 @@ {{ macros.body_header() }}

{{ title }}

- + {{ macros.media_thumbnail_list( + elements=media_list, + ) }}