aboutsummaryrefslogtreecommitdiff
path: root/server/src/routes/ui
diff options
context:
space:
mode:
Diffstat (limited to 'server/src/routes/ui')
-rw-r--r--server/src/routes/ui/browser.rs10
-rw-r--r--server/src/routes/ui/node.rs77
-rw-r--r--server/src/routes/ui/style/layout.css5
-rw-r--r--server/src/routes/ui/style/mod.rs4
-rw-r--r--server/src/routes/ui/style/nodecard.css (renamed from server/src/routes/ui/style/directorypage.css)40
-rw-r--r--server/src/routes/ui/style/nodepage.css (renamed from server/src/routes/ui/style/itempage.css)0
6 files changed, 55 insertions, 81 deletions
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
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-10-08 21:26:09 +0000