refactor node views

8 files changed, 59 insertions, 84 deletions

diff --git a/common/src/lib.rs b/common/src/lib.rs
index 7c44eda..60cb37f 100644
--- a/common/src/lib.rs
+++ b/common/src/lib.rs
@@ -63,6 +63,7 @@ pub enum NodeKind {
     Movie,
     Video,
     Collection,
+    Channel,
     Show,
     Series,
     Season,
diff --git a/server/src/main.rs b/server/src/main.rs
index 6a75c30..3c5f7f9 100644
--- a/server/src/main.rs
+++ b/server/src/main.rs
@@ -42,9 +42,9 @@ async fn async_main() {
     let database = Database::open(&CONF.database_path).unwrap();
     let federation = Federation::initialize();
     database.create_admin();
-    if let Err(err) = import::import(&database, &federation).await {
-        error!("import not sucessful: {err:?}")
-    }
+    // if let Err(err) = import::import(&database, &federation).await {
+    //     error!("import not sucessful: {err:?}")
+    // }
     build_rocket(remuxer, database, federation)
         .launch()
         .await
diff --git a/server/src/routes/ui/browser.rs b/server/src/routes/ui/browser.rs
index e7f7d96..6e772d0 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::PosterCard};
+use super::{account::session::Session, error::MyError, layout::DynLayoutPage, node::NodeCard};
 use crate::database::Database;
 use anyhow::Context;
 use jellycommon::{Node, NodeKind};
@@ -25,12 +25,8 @@ pub fn r_all_items(_sess: Session, db: &State<Database>) -> Result<DynLayoutPage
         content: markup::new! {
             .page.dir {
                 h1 { "All Items" }
-                ul.directorylisting { @for (id, node) in &items {
-                    li {@PosterCard {
-                        wide: false, dir: false,
-                        id,
-                        title: &node.public.title
-                    }}
+                ul.children { @for (id, node) in &items {
+                    li {@NodeCard { id, node: &node.public }}
                 }}
             }
         },
diff --git a/server/src/routes/ui/node.rs b/server/src/routes/ui/node.rs
index aa99121..c87e56b 100644
--- a/server/src/routes/ui/node.rs
+++ b/server/src/routes/ui/node.rs
@@ -56,7 +56,7 @@ pub async fn r_library_node(
 
     Ok(Either::Left(LayoutPage {
         title: node.title.to_string(),
-        show_back: matches!(node.kind, NodeKind::Movie | NodeKind::Episode),
+        show_back: true, //- !matches!(node.kind, NodeKind::Collection),
         content: markup::new! {
             @NodePage { node: &node, id: &id, children: &children }
         },
@@ -65,41 +65,14 @@ pub async fn r_library_node(
 }
 
 markup::define! {
-    NodePage<'a>(id: &'a str, node: &'a NodePublic, children: &'a Vec<(String, NodePublic)>) {
-        @match node.kind {
-            NodeKind::Collection | NodeKind::Show | NodeKind::Season => { @DirectoryPage { node, _id: id, children } }
-            NodeKind::Series => { @SeriesPage { node, children, id } }
-            NodeKind::Movie | NodeKind::Episode | NodeKind::Video => { @ItemPage { node, id } }
-        }
-    }
     NodeCard<'a>(id: &'a str, node: &'a NodePublic) {
-        @PosterCard {
-            wide: matches!(node.kind, NodeKind::Collection | NodeKind::Video),
-            dir: !matches!(node.kind, NodeKind::Movie | NodeKind::Video | NodeKind::Episode),
-            id,
-            title: &node.title
-        }
-    }
-    DirectoryPage<'a>(_id: &'a str, node: &'a NodePublic, children: &'a Vec<(String, NodePublic)>) {
-        div.page.dir {
-            h1 { @node.title }
-            @if let Some(parent) = &node.parent {
-                a.dirup[href=uri!(r_library_node(parent))] { "Go up" }
-            }
-            ul.directorylisting {
-                @for (id, node) in children.iter() {
-                    li { @NodeCard { id, node } }
-                }
-            }
-        }
-    }
-    PosterCard<'a>(id: &'a str, title: &'a str, wide: bool, dir: bool) {
-        div[class=if *wide {"card wide poster"} else {"card poster"}] {
+        @let cls = format!("card poster {}", match node.kind {NodeKind::Channel => "poster-square", NodeKind::Video => "thumb-land", NodeKind::Collection => "poster-land", _ => "poster-port"});
+        div[class=cls] {
             div.banner {
                 a[href=uri!(r_library_node(id))] {
                     img[src=uri!(r_item_assets(id, AssetRole::Poster))];
                 }
-                @if *dir {
+                @if matches!(node.kind, NodeKind::Collection | NodeKind::Channel) {
                     div.hoverdir { a[href=&uri!(r_library_node(id))] { "Open" } }
                 } else {
                     div.hoveritem { a[href=&player_uri(id)] { "▶" } }
@@ -107,21 +80,18 @@ markup::define! {
             }
             p.title {
                 a[href=uri!(r_library_node(id))] {
-                    @title
+                    @node.title
                 }
             }
         }
     }
-    ItemPage<'a>(id: &'a str, node: &'a NodePublic) {
-        // TODO different image here
+    NodePage<'a>(id: &'a str, node: &'a NodePublic, children: &'a Vec<(String, NodePublic)>) {
         img.backdrop[src=uri!(r_item_assets(id, AssetRole::Backdrop))];
         div.page.item {
-            div.banner {
-                img[src=uri!(r_item_assets(id, AssetRole::Poster))];
-            }
+            div.banner { img[src=uri!(r_item_assets(id, AssetRole::Poster))]; }
             div.title {
                 h1 { @node.title }
-                a.play[href=&player_uri(id)] { "Watch now" }
+                @if node.media.is_some() { a.play[href=&player_uri(id)] { "Watch now" }}
             }
             div.details {
                 div.props {
@@ -133,6 +103,7 @@ markup::define! {
                         p { @match r {
                             Rating::YoutubeLikes(n) => { @format_count(*n) " Likes" }
                             Rating::YoutubeViews(n) => { @format_count(*n) " Views" }
+                            Rating::YoutubeFollowers(n) => { @format_count(*n) " Subscribers" }
                             _ => { "Unknown Rating" }
                         } }
                     }
@@ -140,25 +111,19 @@ markup::define! {
                 h3 { @node.tagline }
                 p { @node.description }
             }
-        }
-    }
-    SeriesPage<'a>(id: &'a str, node: &'a NodePublic, children: &'a Vec<(String, NodePublic)>) {
-        // TODO different image here
-        img.backdrop[src=uri!(r_item_assets(id, AssetRole::Backdrop))];
-        div.page.item {
-            div.banner {
-                img[src=uri!(r_item_assets(id, AssetRole::Poster))];
-            }
-            div.title {
-                h1 { @node.title }
-            }
-            div.details {
-                h3 { @node.tagline }
-                p { @node.description }
+            @match node.kind {
+                NodeKind::Collection | NodeKind::Channel => {
+                    ul.children {@for (id, node) in children.iter() {
+                        li { @NodeCard { id, node } }
+                    }}
+                }
+                NodeKind::Series => {
+                    ol { @for (id, c) in children.iter() {
+                        li { a[href=uri!(r_library_node(id))] { @c.title } }
+                    }}
+                }
+                _ => {}
             }
-            ol { @for (id, c) in children.iter() {
-                li { a[href=uri!(r_library_node(id))] { @c.title } }
-            } }
         }
     }
 }
diff --git a/server/src/routes/ui/style/layout.css b/server/src/routes/ui/style/layout.css
index 7aadadc..2da6d97 100644
--- a/server/src/routes/ui/style/layout.css
+++ b/server/src/routes/ui/style/layout.css
@@ -12,8 +12,9 @@
 :root {
     --card-size: 17em;
     --bar-height: 5em;
-    --item-banner-aspect: 1.41;
-    --dir-banner-aspect: (1.41 / 2);
+    --port-poster-aspect: 1.41;
+    --land-poster-aspect: (1.41 / 2);
+    --land-thumb-aspect: (9 / 16);
     --accent-light: rgb(255, 163, 87);
     --accent-dark: rgb(199, 90, 0);
     --backdrop-height: 24em;
diff --git a/server/src/routes/ui/style/mod.rs b/server/src/routes/ui/style/mod.rs
index e1ba17b..9098691 100644
--- a/server/src/routes/ui/style/mod.rs
+++ b/server/src/routes/ui/style/mod.rs
@@ -35,8 +35,8 @@ fn css_bundle() -> String {
     concat_files!(
         "layout.css",
         "player.css",
-        "itempage.css",
-        "directorypage.css",
+        "nodepage.css",
+        "nodecard.css",
         "js-player.css",
         "forms.css"
     )
diff --git a/server/src/routes/ui/style/directorypage.css b/server/src/routes/ui/style/nodecard.css
index 0d18c82..fea2a10 100644
--- a/server/src/routes/ui/style/directorypage.css
+++ b/server/src/routes/ui/style/nodecard.css
@@ -4,21 +4,19 @@
     Copyright (C) 2023 metamuffin <metamuffin.org>
     Copyright (C) 2023 tpart
 */
-.page.dir {
+.children {
     padding: 1em;
     padding-left: 3em;
     padding-right: 3em;
-}
-.directorylisting {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
 }
-.directorylisting li {
+.children li {
     display: block;
 }
 
-.page.dir .dirup {
+.dirup {
     width: 100%;
     font-size: large;
     display: block;
@@ -29,7 +27,7 @@
     margin: 0.2em;
     transition: filter 0.2s;
 }
-.page.dir .dirup:hover {
+.dirup:hover {
     filter: brightness(120%);
 }
 
@@ -37,11 +35,17 @@
     padding: 1em;
     height: var(--card-size);
 }
-.card.poster {
-    width: calc(var(--card-size) / var(--item-banner-aspect));
+.card.poster.poster-port {
+    width: calc(var(--card-size) / var(--port-poster-aspect));
+}
+.card.poster.poster-land {
+    width: calc(var(--card-size) / var(--land-poster-aspect));
 }
-.card.poster.wide {
-    width: calc(var(--card-size) / var(--dir-banner-aspect));
+.card.poster.thumb-land {
+    width: calc(var(--card-size) / var(--land-thumb-aspect));
+}
+.card.poster.poster-square {
+    width: calc(var(--card-size));
 }
 
 .card .title {
@@ -56,12 +60,20 @@
     grid-area: 1 / 1;
 }
 
-.card.poster .banner img {
-    width: calc(var(--card-size) / var(--item-banner-aspect));
+.card.poster.poster-port .banner img {
+    width: calc(var(--card-size) / var(--port-poster-aspect));
+    height: var(--card-size);
+}
+.card.poster.poster-land .banner img {
+    width: calc(var(--card-size) / var(--land-poster-aspect));
+    height: var(--card-size);
+}
+.card.poster.thumb-land .banner img {
+    width: calc(var(--card-size) / var(--land-thumb-aspect));
     height: var(--card-size);
 }
-.card.poster.wide .banner img {
-    width: calc(var(--card-size) / var(--dir-banner-aspect));
+.card.poster.poster-square .banner img {
+    width: calc(var(--card-size));
     height: var(--card-size);
 }
 .card .banner a img {
diff --git a/server/src/routes/ui/style/itempage.css b/server/src/routes/ui/style/nodepage.css
index 2913ff7..2913ff7 100644
--- a/server/src/routes/ui/style/itempage.css
+++ b/server/src/routes/ui/style/nodepage.css