jmarya/watchdogs
jmarya/watchdogs
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages 1 Wiki Activity

update

Browse source
This commit is contained in:
JMARyA 2025-01-21 14:12:43 +01:00
parent b38351c821
commit 2567b2a0ab
Signed by: jmarya
GPG key ID: 901B2ADDF27C2263
4 changed files with 80 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/pages/components.rs
View file

@ -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<T: UIWidget + 'static>(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<String> {
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<String> {
pub fn video_thumbnail_with_time(video: &Video) -> PreEscaped<String> {
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<String> {
}
pub async fn video_element(video: &mut Video) -> PreEscaped<String> {
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()
}

7
src/pages/index.rs
View file

@ -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;
};

12
src/pages/watch.rs
View file

@ -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))
)
)