From aa13fade6fcabf9122babac7ac812a433a81b627 Mon Sep 17 00:00:00 2001 From: metamuffin Date: Sun, 22 Feb 2026 03:22:39 +0100 Subject: node highlight card + css cleanup --- ui/src/components/node_card.rs | 35 ++++++++++++++++++++++++++++++----- ui/src/components/node_list.rs | 38 +++++++++++++++++++++++--------------- ui/src/components/node_page.rs | 11 ++++++----- ui/src/components/props.rs | 6 +++--- 4 files changed, 62 insertions(+), 28 deletions(-) (limited to 'ui/src/components') diff --git a/ui/src/components/node_card.rs b/ui/src/components/node_card.rs index eb00ccc..d93825b 100644 --- a/ui/src/components/node_card.rs +++ b/ui/src/components/node_card.rs @@ -18,13 +18,12 @@ markup::define! { NodeCard<'a>(ri: &'a RenderInfo<'a>, nku: Object<'a>) { @let node = nku.get(NKU_NODE).unwrap_or_default(); @let slug = node.get(NO_SLUG).unwrap_or_default(); - @let cls = format!("node card poster {}", aspect_class(node)); - div[class=cls] { + div[class=&format!("card {}", aspect_class(node))] { .poster { a[href=u_node_slug(&slug)] { img[src=cover_image(&node, 512), loading="lazy"]; } - .cardhover.item { + .overlay { @if node.has(NO_TRACK.0) { a.play.icon[href=u_node_slug_player(&slug)] { "play_arrow" } } @@ -43,15 +42,16 @@ markup::define! { } } } + NodeCardWide<'a>(ri: &'a RenderInfo<'a>, nku: Object<'a>) { @let node = nku.get(NKU_NODE).unwrap_or_default(); @let slug = node.get(NO_SLUG).unwrap_or_default(); - div[class="node card widecard poster"] { + div[class="card wide"] { div[class=&format!("poster {}", aspect_class(node))] { a[href=u_node_slug(&slug)] { img[src=cover_image(&node, 512), loading="lazy"]; } - .cardhover.item { + .overlay { @if node.has(NO_TRACK.0) { a.play.icon[href=u_node_slug_player(&slug)] { "play_arrow" } } @@ -64,6 +64,31 @@ markup::define! { } } } + + NodeCardHightlight<'a>(ri: &'a RenderInfo<'a>, nku: Object<'a>) { + @let node = nku.get(NKU_NODE).unwrap_or_default(); + @let slug = node.get(NO_SLUG).unwrap_or_default(); + @let backdrop = u_image(node.get(NO_PICTURES).unwrap_or_default().get(PICT_BACKDROP).unwrap_or_default(), 2048); + div[class="card highlight", style=format!("background-image: url(\"{backdrop}\")")] { + .inner { + div.overview { + h2 { a[href=u_node_slug(slug)] { @node.get(NO_TITLE) } } + @Props { ri, nku: *nku, full: false } + p { b { @node.get(NO_TAGLINE) } " " @node.get(NO_DESCRIPTION) } + } + div[class=&format!("poster {}", aspect_class(node))] { + a[href=u_node_slug(&slug)] { + img[src=cover_image(&node, 512), loading="lazy"]; + } + .overlay { + @if node.has(NO_TRACK.0) { + a.play.icon[href=u_node_slug_player(&slug)] { "play_arrow" } + } + } + } + } + } + } } fn cover_image(node: &Object, size: usize) -> String { diff --git a/ui/src/components/node_list.rs b/ui/src/components/node_list.rs index d1d16fb..679a11d 100644 --- a/ui/src/components/node_list.rs +++ b/ui/src/components/node_list.rs @@ -6,7 +6,7 @@ use crate::{ RenderInfo, - components::node_card::{NodeCard, NodeCardWide}, + components::node_card::{NodeCard, NodeCardHightlight, NodeCardWide}, }; use jellycommon::{jellyobject::Object, *}; use jellyui_locale::tr; @@ -17,20 +17,28 @@ markup::define! { @if let Some(title) = nl.get(NODELIST_TITLE) { h2 { @tr(ri.lang, title) } } - @if ds == NLSTYLE_GRID { - ul.nl.grid { @for nku in nl.iter(NODELIST_ITEM) { - li { @NodeCard { ri, nku } } - }} - } - @if ds == NLSTYLE_INLINE { - ul.nl.inline { @for nku in nl.iter(NODELIST_ITEM) { - li { @NodeCard { ri, nku } } - }} - } - @if ds == NLSTYLE_LIST { - ol.nl.list { @for nku in nl.iter(NODELIST_ITEM) { - li { @NodeCardWide { ri, nku } } - }} + @match ds { + NLSTYLE_GRID => { + ul.nl.grid { @for nku in nl.iter(NODELIST_ITEM) { + li { @NodeCard { ri, nku } } + }} + } + NLSTYLE_INLINE => { + ul.nl.inline { @for nku in nl.iter(NODELIST_ITEM) { + li { @NodeCard { ri, nku } } + }} + } + NLSTYLE_LIST => { + ol.nl.list { @for nku in nl.iter(NODELIST_ITEM) { + li { @NodeCardWide { ri, nku } } + }} + } + NLSTYLE_HIGHLIGHT => { + @if let Some(nku) = nl.get(NODELIST_ITEM) { + @NodeCardHightlight { ri, nku } + } + } + _ => {} } } } diff --git a/ui/src/components/node_page.rs b/ui/src/components/node_page.rs index 7deaf61..5823933 100644 --- a/ui/src/components/node_page.rs +++ b/ui/src/components/node_page.rs @@ -181,6 +181,7 @@ markup::define! { } Player<'a>(ri: &'a RenderInfo<'a>, nku: Object<'a>) { + @let _ = ri; @let node = nku.get(NKU_NODE).unwrap_or_default(); @let pics = node.get(NO_PICTURES).unwrap_or_default(); video[id="player", poster=pics.get(PICT_COVER).map(|p| u_image(p, 2048))] {} @@ -188,11 +189,11 @@ markup::define! { } -fn chapter_key_time(c: Object, dur: f64) -> f64 { - let start = c.get(CH_START).unwrap_or(0.); - let end = c.get(CH_END).unwrap_or(dur); - start * 0.8 + end * 0.2 -} +// fn chapter_key_time(c: Object, dur: f64) -> f64 { +// let start = c.get(CH_START).unwrap_or(0.); +// let end = c.get(CH_END).unwrap_or(dur); +// start * 0.8 + end * 0.2 +// } pub fn aspect_class(node: Object<'_>) -> &'static str { let kind = node.get(NO_KIND).unwrap_or(KIND_COLLECTION); diff --git a/ui/src/components/props.rs b/ui/src/components/props.rs index c11dca6..5fa9d3e 100644 --- a/ui/src/components/props.rs +++ b/ui/src/components/props.rs @@ -47,11 +47,11 @@ markup::define! { RTYP_YOUTUBE_LIKES => {p.likes{ @format_count(value as usize) " Likes" }} RTYP_YOUTUBE_VIEWS => {p{ @format_count(value as usize) " Views" }} RTYP_YOUTUBE_SUBSCRIBERS => {p{ @format_count(value as usize) " Subscribers" }} - RTYP_ROTTEN_TOMATOES => {p.rating{ "Rotten Tomatoes: " @value "%" }} + RTYP_ROTTEN_TOMATOES if *full => {p.rating{ "Rotten Tomatoes: " @value "%" }} RTYP_METACRITIC if *full => {p.rating{ "Metacritic: " @value "/100" }} RTYP_IMDB => {p.rating{ "IMDb " @value }} - RTYP_TMDB => {p.rating{ "TMDB " @format!("{:.01}", value) }} - RTYP_TRAKT => {p.rating{ "Trakt " @format!("{:.01}", value) }} + RTYP_TMDB if *full => {p.rating{ "TMDB " @format!("{:.01}", value) }} + RTYP_TRAKT if *full => {p.rating{ "Trakt " @format!("{:.01}", value) }} _ => {} } } -- cgit v1.3