From 2567b2a0ab3d039b214e383dc43d3f1a23262f01 Mon Sep 17 00:00:00 2001 From: JMARyA Date: Tue, 21 Jan 2025 14:12:43 +0100 Subject: [PATCH] update --- Cargo.lock | 18 +++---- src/pages/components.rs | 104 ++++++++++++++++++++++++---------------- src/pages/index.rs | 7 ++- src/pages/watch.rs | 12 ++--- 4 files changed, 80 insertions(+), 61 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index b5b08b7..4df7fb9 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -146,7 +146,7 @@ checksum = "8c3c1a368f70d6cf7302d78f8f7093da241fb8e8807c05cc9e51a125895a6d5b" [[package]] name = "based" version = "0.1.0" -source = "git+https://git.hydrar.de/jmarya/based?branch=ui#79f08fd202abcfbc52cbab09be7dccc02f4c7c01" +source = "git+https://git.hydrar.de/jmarya/based?branch=ui#e02def6bc16dfe61937816d669514c9d4300ae1a" dependencies = [ "bcrypt", "chrono", @@ -1131,9 +1131,9 @@ dependencies = [ [[package]] name = "indexmap" -version = "2.7.0" +version = "2.7.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "62f822373a4fe84d4bb149bf54e584a7f4abec90e072ed49cda0edea5b95471f" +checksum = "8c9c992b02b5b4c94ea26e32fe5bccb7aa7d9f390ab5c1221ff895bc7ea8b652" dependencies = [ "equivalent", "hashbrown 0.15.2", @@ -1157,9 +1157,9 @@ dependencies = [ [[package]] name = "ipnet" -version = "2.10.1" +version = "2.11.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "ddc24109865250148c2e0f3d25d4f0f479571723792d3802153c60922a4fb708" +checksum = "469fb0b9cefa57e3ef31275ee7cacb78f2fdca44e4765491884a2b119d4eb130" [[package]] name = "is-terminal" @@ -2096,9 +2096,9 @@ dependencies = [ [[package]] name = "serde_json" -version = "1.0.135" +version = "1.0.137" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "2b0d7ba2887406110130a978386c4e1befb98c674b4fba677954e4db976630d9" +checksum = "930cfb6e6abf99298aaad7d29abbef7a9999a9a8806a40088f55f0dcec03146b" dependencies = [ "itoa", "memchr", @@ -2907,9 +2907,9 @@ checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be" [[package]] name = "uuid" -version = "1.12.0" +version = "1.12.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "744018581f9a3454a9e15beb8a33b017183f1e7c0cd170232a2d1453b23a51c4" +checksum = "b3758f5e68192bb96cc8f9b7e2c2cfdabb435499a28499a42f8f984092adad4b" dependencies = [ "getrandom", "serde", diff --git a/src/pages/components.rs b/src/pages/components.rs index 1081b22..8cdc54e 100644 --- a/src/pages/components.rs +++ b/src/pages/components.rs @@ -1,6 +1,7 @@ use crate::library::Video; use based::ui::components::AppBar; -use based::ui::prelude::*; +use based::ui::wrapper::HoverWrapper; +use based::ui::{prelude::*, UIWidget}; use based::{ auth::User, format::{format_date, format_number, format_seconds_to_hhmmss}, @@ -34,33 +35,40 @@ pub async fn render_page( .await } +#[allow(non_snake_case)] +pub fn HoverScaleAnimation(inner: T) -> HoverWrapper { + Hover(Animated(ZIndex::five(Scale(1.02, Nothing()))).scope(Scope::All)).on(inner) +} + pub async fn video_element_wide(video: &Video) -> PreEscaped { html!( a href=(format!("/watch?v={}", video.id)) class="flex items-center w-full my-4 bg-gray-900 hover:bg-gray-800 shadow-lg rounded-lg overflow-hidden" { div class="flex-shrink-0 relative" { - img width="480" src=(format!("/video/thumbnail?v={}", video.id)) class="aspect-video w-32 w-48 rounded-md object-cover"; + img width="480" src=(format!("/video/thumbnail?v={}", video.id)) class="aspect-video h-32 w-48 rounded-l-md object-cover"; span class="absolute bottom-2 right-2 bg-black text-white text-xs px-2 py-1 rounded-sm opacity-90" { (( format_seconds_to_hhmmss(video.duration) )) }; }; - div class="flex flex-col flex-grow ml-2" { + div class="flex flex-col flex-grow ml-2 max-h-32" { (Margin(Text(&video.title).large().semibold().max_lines(LineClamp::_3).title(&video.title).align(TextAlignment::Start) ).bottom(ScreenValue::_1) ) + div class="flex flex-col flex-grow ml-2 py-1" { @if let Some(meta) = video.youtube_meta().await { - div class="text-sm text-gray-400 mb-2" { + div class="text-sm text-gray-400 mb-2 text-start" { (Span(&meta.uploader_name).medium()) (Span(" - ")) (Span(&format_date(&meta.upload_date))) }; - div class="text-sm text-gray-400" { + div class="text-sm text-gray-400 text-start" { (Span(&format_number(meta.views))) (Span(" views")) }; }; + } }; }; ) @@ -69,7 +77,17 @@ pub async fn video_element_wide(video: &Video) -> PreEscaped { pub fn video_thumbnail_with_time(video: &Video) -> PreEscaped { html! { div class="relative" { - img width="480" src=(format!("/video/thumbnail?v={}", video.id)) class="w-full h-auto object-cover aspect-video"; + ( + Width(ScreenValue::full, + Height(ScreenValue::auto, + Aspect::video( + Rounded( + Image(&format!("/video/thumbnail?v={}", video.id)) + ).size(Size::Large).side(Side::Top) + ) + ) + ) + ) span class="absolute bottom-2 right-2 bg-black text-white text-xs px-2 py-1 rounded-sm opacity-90" { (( format_seconds_to_hhmmss(video.duration) )) }; @@ -78,41 +96,43 @@ pub fn video_thumbnail_with_time(video: &Video) -> PreEscaped { } pub async fn video_element(video: &mut Video) -> PreEscaped { - Margin(Context(MaxWidth( - ScreenValue::_90, - MaxHeight( - ScreenValue::_60, - Aspect::video(Link( - &format!("/watch?v={}", video.id), - Context( - Hover(Background(Gray::_800, Nothing())).on(Background( - Gray::_900, - Shadow::large( - Rounded( - Div().push(video_thumbnail_with_time(&video)).push(Context( - Rounded(Shadow::large( - Padding( - Text(&video.title) - .base_size() - .semibold() - .align(TextAlignment::Start) - .title(&video.title) - .max_lines(LineClamp::_1) - .overflow(TextOverflow::Truncate), - ) - .y(ScreenValue::_4) - .x(ScreenValue::_2), - )) - .size(Size::Large), - )), - ) - .size(Size::Large), - ), - )), - ), - )), - ), - ))) - .y(ScreenValue::_6) + HoverScaleAnimation( + Margin(Context(MaxWidth( + ScreenValue::_90, + MaxHeight( + ScreenValue::_60, + Aspect::video(Link( + &format!("/watch?v={}", video.id), + Context( + Hover(Background(Nothing()).color(Gray::_800)).on(Background( + Shadow::large( + Rounded( + Div().push(video_thumbnail_with_time(&video)).push(Context( + Rounded(Shadow::large( + Padding( + Text(&video.title) + .base_size() + .semibold() + .align(TextAlignment::Start) + .title(&video.title) + .max_lines(LineClamp::_1) + .overflow(TextOverflow::Truncate), + ) + .y(ScreenValue::_4) + .x(ScreenValue::_2), + )) + .size(Size::Large), + )), + ) + .size(Size::Large), + ), + ) + .color(Gray::_900)), + ), + )), + ), + ))) + .y(ScreenValue::_6), + ) .render() } diff --git a/src/pages/index.rs b/src/pages/index.rs index 28aaf7e..6cbcd20 100644 --- a/src/pages/index.rs +++ b/src/pages/index.rs @@ -117,16 +117,15 @@ pub async fn index_page( (Margin( Padding( - Hover(Background(Purple::_600, Nothing())).on( - Background(Purple::_500, + Hover(Background(Cursor::Pointer.on(Nothing())).color(Purple::_600)).on( + Background( Rounded( - // TODO : Implement cursor-pointer Link( &format!("/d/{dir}"), Text(&dir).white() ).use_htmx() ).size(Size::Full) - )) + ).color(Purple::_500)) ).x(ScreenValue::_3).y(ScreenValue::_2)).all(ScreenValue::_2)) br; }; diff --git a/src/pages/watch.rs b/src/pages/watch.rs index 74f163c..c6358e3 100644 --- a/src/pages/watch.rs +++ b/src/pages/watch.rs @@ -48,24 +48,24 @@ pub async fn watch_page( Screen::large(Width(Fraction::_10on12, Nothing())).on( Div().push( Context(Aspect::video( - Background(Colors::Black, + Background( Rounded( html! { video controls autoplay - class="w-full h-full" { + class="w-full h-full rounded-lg" { source src=(format!("/video/raw?v={}", video.id)) type="video/mp4" { "Your browser does not support the video" }; }; } ).size(Size::Large) - ) + ).color(Colors::Black) )) ).push( Context(Margin(Padding( - Background(Stone::_900, + Background( Rounded( Shadow::large( Div() @@ -73,7 +73,7 @@ pub async fn watch_page( Text(&video.title)._2xl().semibold() ) .push_some(youtube_meta.as_ref(), |meta: &_| { - Div().vanish() + Div() .push( Margin(Flex( Div().vanish().push( @@ -93,7 +93,7 @@ pub async fn watch_page( } ) )).size(Size::Large) - ) + ).color(Stone::_900) ).all(ScreenValue::_4)).top(ScreenValue::_8)) ) )