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

♻️ refactor

Browse source
This commit is contained in:
JMARyA 2025-01-22 19:10:33 +01:00
parent 2567b2a0ab
commit 0301b04ba2
Signed by: jmarya
GPG key ID: 901B2ADDF27C2263
7 changed files with 229 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
Cargo.lock generated
View file

@ -146,7 +146,7 @@ checksum = "8c3c1a368f70d6cf7302d78f8f7093da241fb8e8807c05cc9e51a125895a6d5b"
[[package]]
name = "based"
version = "0.1.0"
source = "git+https://git.hydrar.de/jmarya/based?branch=ui#e02def6bc16dfe61937816d669514c9d4300ae1a"
source = "git+https://git.hydrar.de/jmarya/based?branch=ui#5ef37275ec504dc2e406d8feadca2e388e8d7fc9"
dependencies = [
"bcrypt",
"chrono",
@ -1163,13 +1163,13 @@ checksum = "469fb0b9cefa57e3ef31275ee7cacb78f2fdca44e4765491884a2b119d4eb130"
[[package]]
name = "is-terminal"
version = "0.4.13"
version = "0.4.15"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "261f68e344040fbd0edea105bef17c66edf46f984ddb1115b775ce31be948f4b"
checksum = "e19b23d53f35ce9f56aebc7d1bb4e6ac1e9c0db7ac85c8d1760c04379edced37"
dependencies = [
"hermit-abi 0.4.0",
"libc",
"windows-sys 0.52.0",
"windows-sys 0.59.0",
]
[[package]]
@ -1989,9 +1989,9 @@ checksum = "719b953e2095829ee67db738b3bfa9fa368c94900df327b3f07fe6e794d2fe1f"
[[package]]
name = "rustix"
version = "0.38.43"
version = "0.38.44"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a78891ee6bf2340288408954ac787aa063d8e8817e9f53abb37c695c6d834ef6"
checksum = "fdb5bc1ae2baa591800df16c9ca78619bf65c0488b41b96ccec5d11220d8c154"
dependencies = [
"bitflags 2.8.0",
"errno",

2
Cargo.toml
View file

@ -24,4 +24,4 @@ maud = "0.26.0"
rand = "0.8.5"
data-encoding = "2.6.0"
bcrypt = "0.16.0"
based = { git = "https://git.hydrar.de/jmarya/based", features = ["cache", "htmx"], branch = "ui" }
based = { git = "https://git.hydrar.de/jmarya/based", features = ["cache"], branch = "ui" }

6
src/main.rs
View file

@ -1,4 +1,4 @@
use based::{auth::User, get_pg};
use based::{asset::AssetRoutes, auth::User, get_pg};
use rocket::{http::Method, routes};
use std::path::Path;
mod library;
@ -51,15 +51,15 @@ async fn launch() -> _ {
.expect("error creating CORS options");
rocket::build()
.mount_assets()
.mount(
"/",
routes![
based::htmx::htmx_script_route,
pages::assets::video_file,
pages::assets::video_thumbnail,
pages::assets::fav_icon,
pages::index::search,
pages::index::channel_page,
pages::index::dir_page,
pages::yt::yt_tags,
pages::yt::yt_tag_page,
pages::yt::yt_channel_page,

202
src/pages/components.rs
View file

@ -1,5 +1,5 @@
use crate::library::Video;
use based::ui::components::AppBar;
use based::ui::components::{AppBar, Shell};
use based::ui::wrapper::HoverWrapper;
use based::ui::{prelude::*, UIWidget};
use based::{
@ -15,84 +15,164 @@ pub async fn render_page(
title: &str,
user: Option<User>,
) -> StringResponse {
based::ui::render_page(
content,
title,
ctx,
&based::ui::components::Shell::new(
html! {
script src="https://cdn.tailwindcss.com" {};
script src="/assets/htmx.min.js" {};
meta name="viewport" content="width=device-width, initial-scale=1.0";
},
html! {
(script(include_str!("../scripts/header.js")));
(AppBar("WatchDogs", user))
},
Some(String::from("bg-black text-white")),
),
Shell::new(
Nothing(),
Div()
.vanish()
.push(script(include_str!("../scripts/header.js")))
.push(AppBar("WatchDogs", user)),
Background(Text("").white()).color(Colors::Black),
)
.use_ui()
.render_page(content, title, ctx)
.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)
Hover(Animated(ZIndex::Five(Scale(1.02, Nothing()))).scope(Scope::All)).on(inner)
}
#[allow(non_snake_case)]
pub fn Title<T: UIWidget + 'static>(title: T) -> PreEscaped<String> {
Margin(
Paragraph(title)
.align(TextAlignment::Center)
._4xl()
.extrabold()
.line_height(LineHeight::Tight),
)
.top(ScreenValue::_6)
.bottom(ScreenValue::_2)
.render()
}
#[allow(non_snake_case)]
pub fn VerticalVideoGrid<T: UIWidget + 'static>(inner: T) -> PreEscaped<String> {
Screen::large(Grid(Nothing()).columns(GridAmount::_3).gap(ScreenValue::_6))
.on(Padding(Margin(inner).bottom(ScreenValue::_4)).all(ScreenValue::_6))
.render()
}
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" {
let yt_meta = video.youtube_meta().await;
Flex(Margin(Width(ScreenValue::full,
Hover(Background(Nothing()).color(Gray::_800)).on(
Background(
Rounded(
Shadow::large(
Link(&format!("/watch?v={}", video.id),
Div().vanish().push(
FlexGrow(Strategy::NoShrink,
Position(PositionKind::Relative,
Div().vanish().push(
html! {
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 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 text-start" {
(Span(&meta.uploader_name).medium())
(Span(" - "))
(Span(&format_date(&meta.upload_date)))
};
div class="text-sm text-gray-400 text-start" {
(Span(&format_number(meta.views)))
(Span(" views"))
};
};
}
};
};
).push(
Position(PositionKind::Absolute,
Background(
Rounded(
Opacity(0.90,
Padding(
Span(
&format_seconds_to_hhmmss(video.duration)
).white().xs()
).x(ScreenValue::_2).y(ScreenValue::_1)
)
).size(Size::Small)
).color(Colors::Black)
).bottom(8).right(8)
)
)
)
).push(
Flex(
FlexGrow(Strategy::Grow,
Margin(
MaxHeight(ScreenValue::_32,
Div().vanish().push(
Margin(Text(&video.title).large().semibold().max_lines(LineClamp::_3).title(&video.title).align(TextAlignment::Start)
).bottom(ScreenValue::_1)
).push_some(yt_meta, |meta| {
Flex(
FlexGrow(Strategy::Grow,
Margin(
Padding(
Div().vanish().push(
Paragraph(
Margin(
Div().vanish().push(
Span(&meta.uploader_name).medium()
).push(
Span(" - ")
).push(
Span(&format_date(&meta.upload_date))
)
).bottom(ScreenValue::_2)
).sm().color(&Gray::_400).align(TextAlignment::Start)
).push(
Paragraph(
Div().vanish().push(
Span(&format_number(meta.views))
).push(
Span(" views")
)
).sm().color(&Gray::_400).align(TextAlignment::Start)
)
).y(ScreenValue::_1)
).left(ScreenValue::_2)
)
).direction(Direction::Column)
})
)
).left(ScreenValue::_2)
)
).direction(Direction::Column)
)
))).size(Size::Large)).color(Gray::_900))
)).y(ScreenValue::_4)).items_center().render()
}
pub fn video_thumbnail_with_time(video: &Video) -> PreEscaped<String> {
html! {
div class="relative" {
(
Width(ScreenValue::full,
Height(ScreenValue::auto,
Aspect::video(
Rounded(
Image(&format!("/video/thumbnail?v={}", video.id))
).size(Size::Large).side(Side::Top)
Position(
PositionKind::Relative,
Div()
.push(Context(Width(
ScreenValue::full,
Height(
ScreenValue::auto,
Aspect::Video(
Rounded(Image(&format!("/video/thumbnail?v={}", video.id)))
.size(Size::Large)
.side(Side::Top),
),
),
)))
.push(Context(
Position(
PositionKind::Absolute,
Background(
Padding(
Rounded(Opacity(
0.90,
Span(&format_seconds_to_hhmmss(video.duration)).white().xs(),
))
.size(Size::Small),
)
.x(ScreenValue::_2)
.y(ScreenValue::_1),
)
.color(Colors::Black),
)
.bottom(8)
.right(8),
)),
)
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) ))
};
};
}
.render()
}
pub async fn video_element(video: &mut Video) -> PreEscaped<String> {
@ -101,7 +181,7 @@ pub async fn video_element(video: &mut Video) -> PreEscaped<String> {
ScreenValue::_90,
MaxHeight(
ScreenValue::_60,
Aspect::video(Link(
Aspect::Video(Link(
&format!("/watch?v={}", video.id),
Context(
Hover(Background(Nothing()).color(Gray::_800)).on(Background(

86
src/pages/index.rs
View file

@ -7,10 +7,11 @@ use based::{
RequestContext, StringResponse,
},
};
use maud::html;
use maud::{html, Render};
use rocket::{get, State};
use serde_json::json;
use crate::pages::components::{Title, VerticalVideoGrid};
use crate::{library::Library, pages::components::video_element};
use super::{
@ -48,21 +49,23 @@ pub async fn latest_page(
user: MaybeUser,
) -> StringResponse {
let videos = library.get_newly_added(20).await;
let content = html!(
h1 class="text-center text-4xl font-extrabold leading-tight mt-6 mb-2" { "Recent videos" };
div class="p-6" {
let video_elements = html! {
@for mut vid in videos {
( video_element_wide(&mut vid).await );
};
};
);
let content = Div()
.vanish()
.push(Title("Recent videos"))
.push(Padding(video_elements).all(ScreenValue::_6))
.render();
render_page(ctx, content, "Recent videos", user.into()).await
}
#[get("/d/<dir>")]
pub async fn channel_page(
pub async fn dir_page(
ctx: RequestContext,
dir: &str,
library: &State<Library>,
@ -76,15 +79,17 @@ pub async fn channel_page(
}
let dir_videos = library.get_directory_videos(dir).await;
let content = html!(
h1 class="text-center text-4xl font-extrabold leading-tight mt-4 mb-2" { (dir) };
div class="p-6" {
let video_elements = html! {
@for mut vid in dir_videos {
( video_element_wide(&mut vid).await );
};
};
);
let content = Div()
.vanish()
.push(Title(dir.to_string()))
.push(Padding(video_elements).all(ScreenValue::_6))
.render();
render_page(ctx, content, dir, user.into()).await
}
@ -95,42 +100,49 @@ pub async fn index_page(
library: &State<Library>,
user: MaybeUser,
) -> StringResponse {
let content = html!(
h1 class="text-center text-4xl font-extrabold leading-tight mt-8" { "Random Videos" };
div class="lg:grid grid-cols-3 gap-6 p-6 mb-4" {
let random_video_elements = html! {
@for mut vid in library.get_random_videos(3).await {
( video_element(&mut vid).await );
};
};
h1 class="text-center text-4xl font-extrabold leading-tight mt-16" { a href="/latest" { "Latest Videos" };};
div class="lg:grid grid-cols-3 gap-6 p-6 mb-4" {
let newly_added_elements = html! {
@for mut vid in library.get_newly_added(3).await {
( video_element(&mut vid).await );
};
};
let directories = library.get_directories().await;
h1 class="text-center text-4xl font-extrabold leading-tight mt-8" { "Directories:" };
div class="flex flex-wrap p-10" {
@for dir in library.get_directories().await {
(Margin(
let content = Div()
.vanish()
.push(Title("Random Videos"))
.push(VerticalVideoGrid(random_video_elements))
.push(Title(Link("/latest", "Latest Videos").use_htmx()))
.push(VerticalVideoGrid(newly_added_elements))
.push(Title("Directories:"))
.push(
Padding(
Hover(Background(Cursor::Pointer.on(Nothing())).color(Purple::_600)).on(
Background(
Flex(Div().vanish().push_for_each(&directories, |dir: &_| {
Margin(
Padding(
Hover(Background(Cursor::Pointer.on(Nothing())).color(Purple::_600))
.on(Background(
Rounded(
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;
};
};
);
Link(&format!("/d/{dir}"), Text(&dir).white()).use_htmx(),
)
.size(Size::Full),
)
.color(Purple::_500)),
)
.x(ScreenValue::_3)
.y(ScreenValue::_2),
)
.all(ScreenValue::_2)
}))
.wrap(Wrap::Wrap),
)
.all(ScreenValue::_10),
)
.render();
render_page(ctx, content, "WatchDogs", user.into()).await
}

15
src/pages/user.rs
View file

@ -2,12 +2,12 @@ use based::auth::{Sessions, User};
use based::request::StringResponse;
use based::ui::prelude::*;
use based::{auth::MaybeUser, request::RequestContext};
use maud::html;
use maud::{html, Render};
use rocket::http::CookieJar;
use rocket::{form::Form, get, http::Cookie, post, response::Redirect, FromForm};
use crate::library::history::VideoHistory;
use crate::pages::components::video_element_wide;
use crate::pages::components::{video_element_wide, Title};
use super::components::render_page;
@ -50,14 +50,17 @@ pub async fn login_post(login_form: Form<LoginForm>, cookies: &CookieJar<'_>) ->
#[get("/history")]
pub async fn history_page(ctx: RequestContext, user: User) -> StringResponse {
let content = html! {
h1 class="text-center text-4xl font-extrabold leading-tight mt-4 mb-2" { "History" };
(Padding(html! {
let video_elements = html! {
@for mut vid in user.history_of(10).await {
( video_element_wide(&mut vid).await );
};
}).all(ScreenValue::_6))
};
let content = Div()
.vanish()
.push(Title("History"))
.push(Padding(video_elements).all(ScreenValue::_6))
.render();
render_page(ctx, content, "History", Some(user)).await
}

28
src/pages/watch.rs
View file

@ -9,7 +9,6 @@ use maud::{html, PreEscaped, Render};
use rocket::{get, State};
use crate::library::Video;
use crate::yt_meta::YouTubeMeta;
use crate::{
library::{history::VideoHistory, Library},
pages::components::video_element_wide,
@ -44,22 +43,20 @@ pub async fn watch_page(
Flex(
Div().vanish()
.push(
Margin(
Screen::large(Width(Fraction::_10on12, Nothing())).on(
Div().push(
Context(Aspect::video(
Context(Aspect::Video(
Background(
Rounded(
html! {
video
controls
autoplay
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"
};
};
}
Width(ScreenValue::full,
Height(ScreenValue::full,
Rounded(
Video().controls().autoplay().add_src(
Source(&format!("/video/raw?v={}", video.id), Some("video/mp4".to_string()))
)
).size(Size::Large)
)
)
).size(Size::Large)
).color(Colors::Black)
))
@ -94,15 +91,14 @@ pub async fn watch_page(
)
)).size(Size::Large)
).color(Stone::_900)
).all(ScreenValue::_4)).top(ScreenValue::_8))
).all(ScreenValue::_4)).top(ScreenValue::_4))
)
)
).top(ScreenValue::_10)
).push(
rec
)
).direction(Direction::Column).gap(ScreenValue::_6))
).x(ScreenValue::auto).top(ScreenValue::_6)
).x(ScreenValue::_10).top(ScreenValue::_6)
).render();
render_page(