node highlight card + css cleanup

4 files changed, 62 insertions, 28 deletions

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) }}
                     _ => {}
                 }
             }