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

fix
Some checks failed
ci/woodpecker/push/build Pipeline failed
Details

Browse source
This commit is contained in:
JMARyA 2024-12-15 20:53:15 +01:00
parent 086feff1cb
commit 87ff7b5027
Signed by: jmarya
GPG key ID: 901B2ADDF27C2263
1 changed files with 39 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/pages/components.rs
View file

@ -64,10 +64,10 @@ pub fn shell(content: PreEscaped<String>, title: &str) -> PreEscaped<String> {
div class="flex justify-start px-6" { div class="flex justify-start px-6" {
(htmx_link("/", "flex items-center space-x-2", "stopAllVideos()", html!( a href="/" class="flex items-center space-x-2" {
img src="/favicon" alt="Logo" class="w-10 h-10 rounded-md"; img src="/favicon" alt="Logo" class="w-10 h-10 rounded-md";
span class="font-semibold text-xl" { "WatchDogs" }; span class="font-semibold text-xl" { "WatchDogs" };
))) };
}; };
@ -140,63 +140,57 @@ pub fn format_number(num: i32) -> String {
} }
pub async fn video_element_wide(video: &mut Video) -> PreEscaped<String> { pub async fn video_element_wide(video: &mut Video) -> PreEscaped<String> {
htmx_link( html!(
&format!("/watch?v={}", video.id), a href=(format!("/watch?v={}", video.id)) class="flex items-center w-full p-4 bg-gray-900 shadow-lg rounded-lg overflow-hidden mb-2 mt-2" {
"flex items-center w-full p-4 bg-gray-900 shadow-lg rounded-lg overflow-hidden mb-2 mt-2", div class="flex-shrink-0" {
"stopAllVideos()", img width="480" src=(format!("/video/thumbnail?v={}", video.id)) alt="Video Thumbnail" class="w-48 h-32 object-cover rounded-md";
html!( };
div class="flex-shrink-0" {
img width="480" src=(format!("/video/thumbnail?v={}", video.id)) alt="Video Thumbnail" class="w-48 h-32 object-cover rounded-md"; div class="flex flex-col flex-grow ml-4" {
h3 class="text-lg font-semibold truncate mb-1" {
( video.title )
}; };
div class="flex flex-col flex-grow ml-4" { @if let Some(meta) = video.youtube_meta().await {
h3 class="text-lg font-semibold truncate mb-1" { div class="text-sm text-gray-400 mb-2" {
( video.title ) span class="font-medium" { ( meta.uploader_name ) }
}; span { " - " }
span { ( format_date(&meta.upload_date) ) }
};
@if let Some(meta) = video.youtube_meta().await { div class="text-sm text-gray-400" {
div class="text-sm text-gray-400 mb-2" { span { ( format_number(meta.views) ) }
span class="font-medium" { ( meta.uploader_name ) } span { " views" }
span { " - " } span { " - " }
span { ( format_date(&meta.upload_date) ) } span class="ml-2 bg-black text-white text-xs px-2 py-1 rounded-sm opacity-90" {
}; (( format_seconds_to_hhmmss(video.duration) ))
div class="text-sm text-gray-400" {
span { ( format_number(meta.views) ) }
span { " views" }
span { " - " }
span class="ml-2 bg-black text-white text-xs px-2 py-1 rounded-sm opacity-90" {
(( format_seconds_to_hhmmss(video.duration) ))
};
}; };
}; };
}; };
), };
};
) )
} }
pub async fn video_element(video: &mut Video) -> PreEscaped<String> { pub async fn video_element(video: &mut Video) -> PreEscaped<String> {
htmx_link( html!(
&format!("/watch?v={}", video.id), a href=(format!("/watch?v={}", video.id)) class="max-w-sm mx-auto p-4 max-h-60 aspect-video" {
"max-w-sm mx-auto p-4 max-h-60 aspect-video", div class="bg-gray-900 shadow-lg rounded-lg overflow-hidden" {
"stopAllVideos()", div class="relative" {
html!( img width="480" src=(format!("/video/thumbnail?v={}", video.id)) alt="Video Thumbnail" class="w-full h-auto object-cover aspect-video";
div class="bg-gray-900 shadow-lg rounded-lg overflow-hidden" { span class="absolute bottom-2 right-2 bg-black text-white text-xs px-2 py-1 rounded-sm opacity-90" {
div class="relative" { (( format_seconds_to_hhmmss(video.duration) ))
img width="480" src=(format!("/video/thumbnail?v={}", video.id)) alt="Video Thumbnail" class="w-full h-auto object-cover aspect-video";
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="bg-gray-900 shadow-lg rounded-lg overflow-hidden" { div class="bg-gray-900 shadow-lg rounded-lg overflow-hidden" {
div class="p-4" { div class="p-4" {
h3 class="text-lg font-semibold truncate" { h3 class="text-lg font-semibold truncate" {
( video.title ) ( video.title )
};
}; };
}; };
}; };
), };
};
) )
} }