From 50be406bbf448d93a2c669419b494797cdde675e Mon Sep 17 00:00:00 2001
From: metamuffin <metamuffin@disroot.org>
Date: Wed, 14 Jun 2023 22:04:31 +0200
Subject: show series as poster

---
 server/src/routes/ui/browser.rs              |  8 +++--
 server/src/routes/ui/node.rs                 | 47 ++++++++++++++--------------
 server/src/routes/ui/style/directorypage.css | 24 +++++++-------
 3 files changed, 41 insertions(+), 38 deletions(-)

(limited to 'server/src')

diff --git a/server/src/routes/ui/browser.rs b/server/src/routes/ui/browser.rs
index d0c09b1..30eb3f2 100644
--- a/server/src/routes/ui/browser.rs
+++ b/server/src/routes/ui/browser.rs
@@ -3,7 +3,7 @@
     which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
     Copyright (C) 2023 metamuffin <metamuffin.org>
 */
-use super::{account::session::Session, error::MyError, layout::DynLayoutPage, node::ItemCard};
+use super::{account::session::Session, error::MyError, layout::DynLayoutPage, node::PosterCard};
 use crate::library::{Library, Node};
 use rocket::{get, State};
 use std::collections::VecDeque;
@@ -26,7 +26,11 @@ pub fn r_all_items(_sess: Session, library: &State<Library>) -> Result<DynLayout
             .page.dir {
                 h1 { "All Items" }
                 ul.directorylisting { @for item in &items {
-                    li { @ItemCard { item: &item } }
+                    li {@PosterCard {
+                        wide: false, dir: false,
+                        path: item.lib_path.clone(),
+                        title: &item.info.title
+                    }}
                 }}
             }
         },
diff --git a/server/src/routes/ui/node.rs b/server/src/routes/ui/node.rs
index d5e52ff..b9e9871 100644
--- a/server/src/routes/ui/node.rs
+++ b/server/src/routes/ui/node.rs
@@ -15,6 +15,7 @@ use crate::{
     CONF,
 };
 use anyhow::Context;
+use jellycommon::DirectoryKind;
 use log::info;
 use rocket::{get, http::ContentType, State};
 use rocket::{FromFormField, UriDisplayQuery};
@@ -49,23 +50,17 @@ markup::define! {
     }
     NodeCard<'a>(node: &'a Arc<Node>) {
         @match node.as_ref() {
-            Node::Directory(dir) => { @DirectoryCard { dir } }
-            Node::Item(item) => { @ItemCard { item } }
-        }
-    }
-    DirectoryCard<'a>(dir: &'a Arc<Directory>) {
-        div.card.dir {
-            div.banner {
-                a[href=uri!(r_library_node(&dir.lib_path))] {
-                    img[src=uri!(r_item_assets(&dir.lib_path, AssetRole::Poster))];
-                }
-                div.hover { a[href=uri!(r_library_node(&dir.lib_path))] { "Open" } }
-            }
-            p.title {
-                a[href=uri!(r_library_node(&dir.lib_path))] {
-                    @dir.info.title
-                }
-            }
+            Node::Directory(dir) => {@PosterCard {
+                wide: !matches!(dir.info.kind, DirectoryKind::Series | DirectoryKind::Season),
+                dir: true,
+                path: dir.lib_path.clone(),
+                title: &dir.info.title
+            }}
+            Node::Item(item) => {@PosterCard {
+                wide: false, dir: false,
+                path: item.lib_path.clone(),
+                title: &item.info.title
+            }}
         }
     }
     DirectoryPage<'a>(dir: &'a Arc<Directory>) {
@@ -81,17 +76,21 @@ markup::define! {
             }
         }
     }
-    ItemCard<'a>(item: &'a Arc<Item>) {
-        div.card.item {
+    PosterCard<'a>(path: PathBuf, title: &'a str, wide: bool, dir: bool) {
+        div[class=if *wide {"card wide poster"} else {"card poster"}] {
             div.banner {
-                a[href=uri!(r_library_node(&item.lib_path))] {
-                    img[src=uri!(r_item_assets(&item.lib_path, AssetRole::Poster))];
+                a[href=uri!(r_library_node(path))] {
+                    img[src=uri!(r_item_assets(path, AssetRole::Poster))];
+                }
+                @if *dir {
+                    div.hoverdir { a[href=&uri!(r_library_node(path))] { "Open" } }
+                } else {
+                    div.hoveritem { a[href=&player_uri(path)] { "▶" } }
                 }
-                div.hover { a[href=&player_uri(&item.lib_path)] { "▶" } }
             }
             p.title {
-                a[href=uri!(r_library_node(&item.lib_path))] {
-                    @item.info.title
+                a[href=uri!(r_library_node(path))] {
+                    @title
                 }
             }
         }
diff --git a/server/src/routes/ui/style/directorypage.css b/server/src/routes/ui/style/directorypage.css
index e81dce7..0d18c82 100644
--- a/server/src/routes/ui/style/directorypage.css
+++ b/server/src/routes/ui/style/directorypage.css
@@ -37,10 +37,10 @@
     padding: 1em;
     height: var(--card-size);
 }
-.card.item {
+.card.poster {
     width: calc(var(--card-size) / var(--item-banner-aspect));
 }
-.card.dir {
+.card.poster.wide {
     width: calc(var(--card-size) / var(--dir-banner-aspect));
 }
 
@@ -56,11 +56,11 @@
     grid-area: 1 / 1;
 }
 
-.card.item .banner img {
+.card.poster .banner img {
     width: calc(var(--card-size) / var(--item-banner-aspect));
     height: var(--card-size);
 }
-.card.dir .banner img {
+.card.poster.wide .banner img {
     width: calc(var(--card-size) / var(--dir-banner-aspect));
     height: var(--card-size);
 }
@@ -70,7 +70,7 @@
 }
 
 
-.card.dir .banner .hover {
+.card.poster .banner .hoverdir {
     transition: opacity 0.3s, backdrop-filter 0.3s;
     opacity: 0;
     display: flex;
@@ -79,12 +79,12 @@
     height: 5em;
     margin-top: -5em;
 }
-.card.dir .banner:hover .hover {
+.card.poster .banner:hover .hoverdir {
     opacity: 1;
     background-color: #0004;
     backdrop-filter: blur(3px);
 }
-.card.dir .banner .hover a {
+.card.poster .banner .hoverdir a {
     text-decoration: none;
     width: 100%;
     height: 1.7em;
@@ -97,11 +97,11 @@
     margin: 0.6em;
     transition: background-color 0.2s;
 }
-.card.dir .banner .hover a:hover {
+.card.poster .banner .hoverdir a:hover {
     background-color: #0008;
 }
 
-.card.item .banner .hover {
+.card.poster .banner .hoveritem {
     pointer-events: none;
     grid-area: 1 / 1;
     transition: opacity 0.3s, backdrop-filter 0.3s;
@@ -110,12 +110,12 @@
     justify-content: center;
     align-items: center;
 }
-.card.item .banner:hover .hover {
+.card.poster .banner:hover .hoveritem {
     opacity: 1;
     background-color: #0004;
     backdrop-filter: blur(3px);
 }
-.card.item .banner .hover a {
+.card.poster .banner .hoveritem a {
     text-decoration: none;
     font-stretch: 200%;
     width: 1em;
@@ -129,7 +129,7 @@
     background-color: #0005;
     transition: background-color 0.2s, font-size 0.2s;
 }
-.card.item .banner .hover a:hover {
+.card.poster .banner .hoveritem a:hover {
     background-color: #0008;
     font-size: 2.4em;
 }
-- 
cgit v1.2.3-70-g09d2