Amatsugu/AobaV2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

async solve, now to fix list updating

Browse Source
This commit is contained in:
Amatsugu
2026-03-29 20:16:09 -04:00
parent b1ab165665
commit 44959589f8
8 changed files with 264 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AobaClient/assets/style/dx-components.scss
+1
View File
@@ -7,4 +7,5 @@ div[role="menu"] {
width: auto;
outline: none;
width: max-content;
z-index: 10;
}
AobaClient/assets/style/main.scss
+2 -2
View File
@@ -113,11 +113,11 @@ $mediaItemSize: 300px;
&.placeholder {
}
&.nsfw img {
&.blur img {
filter: blur(20px);
transition: filter 0.25s ease-out;
}
&.nsfw:hover img {
&.blur:hover img {
filter: blur(0px);
}
}
AobaClient/src/components/media_grid.rs
+54 -51
View File
@@ -1,90 +1,93 @@
use dioxus::prelude::*;
use tonic::IntoRequest;
use crate::{
components::MediaItem,
rpc::{aoba::PageFilter, get_rpc_client},
components::{MediaItem, MediaItemPlaceHolder},
rpc::{
aoba::{MediaModel, PageFilter},
get_rpc_client,
},
};
#[derive(PartialEq, Clone, Props)]
pub struct MediaGridProps {
pub query: Option<String>,
pub struct MediaGridProps
{
pub query: Signal<String>,
pub max_page: Signal<i32>,
pub total_items: Signal<i32>,
#[props(default = Some(1))]
pub page: Option<i32>,
#[props(default = Some(100))]
pub page_size: Option<i32>,
}
impl IntoRequest<PageFilter> for MediaGridProps {
fn into_request(self) -> tonic::Request<PageFilter> {
let f: PageFilter = self.into();
f.into_request()
}
}
impl Into<PageFilter> for MediaGridProps {
fn into(self) -> PageFilter {
PageFilter {
page: self.page,
page_size: self.page_size,
query: self.query,
}
}
pub page: Signal<i32>,
pub page_size: Signal<i32>,
}
#[component]
pub fn MediaGrid(mut props: MediaGridProps) -> Element {
pub fn MediaGrid(mut props: MediaGridProps) -> Element
{
let media_result = use_resource(use_reactive!(|(props)| async move {
let mut client = get_rpc_client();
let result = client.list_media(props.into_request()).await;
if let Ok(items) = result {
let request = PageFilter {
page_size: Some(props.page_size.cloned()),
page: Some(props.page.cloned()),
query: Some(props.query.cloned()),
};
let result = client.list_media(request).await;
if let Ok(items) = result
{
let res = items.into_inner();
return Ok(res);
} else {
}
else
{
let err = result.err().unwrap();
let message = err.message();
return Err(format!("Failed to load results: {message}"));
}
}));
match media_result.cloned() {
Some(value) => match value {
Ok(result) => {
let pagination = result.pagination.unwrap();
let mut media_grid_display = use_signal(|| {
rsx! {
div{
class: "mediaGrid",
{(0..50).map(|_| rsx!{
MediaItemPlaceHolder { }
})}
}
}
});
use_memo(move || match media_result()
{
Some(value) => match value
{
Ok(result) =>
{
if let Some(pagination) = result.pagination
{
let total_pages = pagination.total_pages;
let total_items = pagination.total_items;
props.max_page.set(total_pages.max(1));
props.total_items.set(total_items.max(1));
return rsx! {
div {
class: "mediaGrid",
// oncontextmenu: oncontext,
}
media_grid_display.set(rsx! {
{result.items.iter().map(|itm| rsx!{
MediaItem {
item: itm.clone()
}
})},
});
}
};
}
Err(msg) => rsx! {
div {
class: "mediaGrid",
Err(msg) => media_grid_display.set(rsx! {
div{
"Failed to load results: {msg}"
}
}
}),
},
},
None => rsx! {
_ => (),
});
rsx! {
div {
class: "mediaGrid",
{(0..50).map(|_| rsx!{
MediaItem { }
})}
}
},
{media_grid_display}
}
}
}
AobaClient/src/components/media_item.rs
+44 -35
View File
@@ -5,9 +5,8 @@ use web_sys::window;
use crate::{
HOST,
route::Route,
rpc::{
aoba::{Id, MediaClass, MediaModel, SetMediaClassRequest},
aoba::{Id, MediaModel, SetMediaClassRequest},
get_rpc_client,
},
};
@@ -15,30 +14,33 @@ use crate::{
#[derive(PartialEq, Clone, Props)]
pub struct MediaItemProps
{
pub item: Option<MediaModel>,
// pub oncontextmenu: Option<EventHandler<Event<MouseData>>>,
pub item: MediaModel,
}
#[component]
pub fn MediaItem(props: MediaItemProps) -> Element
{
let mut class_signal = use_signal(|| "");
if let Some(item) = props.item
{
let item = props.item;
let mtype = item.media_type().as_str_name();
let filename = item.file_name;
let id = item.id.unwrap().value;
let thumb = item.thumb_url;
let class = item.class;
let mut class_signal = use_signal(|| match class
{
1 => "blur",
2 => "secret",
_ => "",
});
let url = item.media_url;
let download = format!("{HOST}{url}");
match class
{
1 => class_signal.set("nsfw"),
2 => class_signal.set("secret"),
_ => class_signal.set(""),
};
// class_signal.set(match class
// {
// 1 => "blur",
// 2 => "secret",
// _ => "",
// });
return rsx! {
ContextMenu{
@@ -71,7 +73,7 @@ pub fn MediaItem(props: MediaItemProps) -> Element
class: "contextItem",
div{
class: "label",
"Details"
"Details {class_signal()}"
}
}
},
@@ -90,12 +92,16 @@ pub fn MediaItem(props: MediaItemProps) -> Element
}
},
{
if class != 0 {
if class_signal() != "" {
rsx!{ContextMenuItem {
index: 2 as usize,
value: "{id}",
on_select: async |id: String|{
_ = set_class(id, 0).await;
on_select: move |id: String|{
spawn(async move {
if let Ok(_) = set_class(id, 0).await{
class_signal.set("");
}
});
},
div{
class: "contextItem",
@@ -105,37 +111,41 @@ pub fn MediaItem(props: MediaItemProps) -> Element
}
}
}}
}else{
rsx!{}
}
}else{rsx!{}}
}
{
if class != 1 {
if class_signal() != "blur" {
rsx!{ContextMenuItem {
index: 2 as usize,
value: "{id}",
on_select: async |id: String|{
_ = set_class(id, 1).await;
on_select: move |id: String|{
spawn(async move {
if let Ok(_) = set_class(id, 1).await{
class_signal.set("blur");
}
});
},
div{
class: "contextItem",
div{
class: "label",
"Mark NSFW"
"Mark blur"
}
}
}}
}else{
rsx!{}
}
}else{rsx!{}}
}
{
if class != 1 {
if class_signal() != "secret" {
rsx!{ContextMenuItem {
index: 2 as usize,
value: "{id}",
on_select: async |id: String|{
_ = set_class(id, 2).await;
on_select: move |id: String|{
spawn(async move {
if let Ok(_) = set_class(id, 2).await{
class_signal.set("secret");
}
});
},
div{
class: "contextItem",
@@ -145,9 +155,7 @@ pub fn MediaItem(props: MediaItemProps) -> Element
}
}
}}
}else{
rsx!{}
}
}else{rsx!{}}
}
ContextMenuItem {
index: 2 as usize,
@@ -164,7 +172,9 @@ pub fn MediaItem(props: MediaItemProps) -> Element
}
};
}
else
#[component]
pub fn MediaItemPlaceHolder() -> Element
{
return rsx! {
div { class: "mediaItem placeholder",
@@ -179,7 +189,6 @@ pub fn MediaItem(props: MediaItemProps) -> Element
}
};
}
}
async fn set_class(id: String, class: i32) -> Result<Response<()>, Status>
{
AobaClient/src/components/navbar.rs
+11 -6
View File
@@ -6,7 +6,8 @@ const NAV_CSS: Asset = asset!("/assets/style/nav.scss");
const NAV_ICON: Asset = asset!("/assets/favicon.ico");
#[component]
pub fn Navbar() -> Element {
pub fn Navbar() -> Element
{
rsx! {
document::Link { rel: "stylesheet", href: NAV_CSS }
nav {
@@ -19,17 +20,19 @@ pub fn Navbar() -> Element {
}
#[component]
pub fn MainNaviagation() -> Element {
pub fn MainNaviagation() -> Element
{
rsx! {
div { class: "mainNav",
Link { class: "navItem", to: Route::Home { }, "Home" }
Link { class: "navItem", to: Route::Home { page: None, q: None }, "Home" }
Link { class: "navItem", to: Route::Settings {}, "Settings" }
}
}
}
#[component]
pub fn Branding() -> Element {
pub fn Branding() -> Element
{
rsx! {
div { class: "branding",
img { src: NAV_ICON, alt: "Aoba" }
@@ -38,14 +41,16 @@ pub fn Branding() -> Element {
}
#[component]
pub fn Widgets() -> Element {
pub fn Widgets() -> Element
{
rsx! {
div { class: "widgets" }
}
}
#[component]
pub fn Utils() -> Element {
pub fn Utils() -> Element
{
let mut auth_context = use_context::<AuthContext>();
let version = APP_VERSION;
rsx! {
AobaClient/src/route.rs
+4 -4
View File
@@ -1,6 +1,6 @@
use crate::{
layouts::MainLayout,
views::{Home, HomePaged, Media, Settings},
views::{Home, Media, Settings},
};
use dioxus::prelude::*;
@@ -9,10 +9,10 @@ use dioxus::prelude::*;
pub enum Route {
#[layout(MainLayout)]
#[route("/")]
Home { },
#[route("/?:page&:q")]
HomePaged { page: i32, q: String },
Home { page: Option<i32>, q: Option<String> },
// #[route("/")]
// Home { },
#[route("/media/:id")]
Media { id: String },
#[route("/settings")]
AobaClient/src/views/home.rs
+21 -20
View File
@@ -1,28 +1,29 @@
use crate::components::{MediaGrid, Pagination, Search};
use dioxus::prelude::*;
#[component]
pub fn Home() -> Element
{
let query = use_signal(|| "".to_string());
let page = use_signal(|| 1 as i32);
let max_page = use_signal(|| 1 as i32);
let item_count = use_signal(|| 0 as i32);
rsx! {
div {
class: "stickyTop",
Search { query, page },
Pagination { page, max_page, item_count },
}
MediaGrid { query: query.cloned(), page: page.cloned(), max_page, total_items: item_count }
}
}
// #[component]
// pub fn Home() -> Element
// {
// let query = use_signal(|| "".to_string());
// let page = use_signal(|| 1 as i32);
// let max_page = use_signal(|| 1 as i32);
// let item_count = use_signal(|| 0 as i32);
// rsx! {
// div {
// class: "stickyTop",
// Search { query, page },
// Pagination { page, max_page, item_count },
// }
// MediaGrid { query: query.cloned(), page: page.cloned(), max_page, total_items: item_count }
// }
// }
#[component]
pub fn HomePaged(page: i32, q: String) -> Element
pub fn Home(page: Option<i32>, q: Option<String>) -> Element
{
let query = use_signal(|| q);
let page = use_signal(|| page);
let query = use_signal(|| q.unwrap_or("".to_string()));
let page = use_signal(|| page.unwrap_or(1));
let page_size = use_signal::<i32>(|| 100);
let max_page = use_signal(|| 1 as i32);
let item_count = use_signal(|| 0 as i32);
rsx! {
@@ -31,6 +32,6 @@ pub fn HomePaged(page: i32, q: String) -> Element
Search { query, page },
Pagination { page, max_page, item_count },
}
MediaGrid { query: query.cloned(), page: page.cloned(), max_page, total_items: item_count }
MediaGrid { query: query, page: page, max_page, total_items: item_count, page_size }
}
}
AobaClient/src/views/media.rs
+3 -3
View File
@@ -39,16 +39,16 @@ fn MediaPage(media: MediaModel) -> Element
{
let url = media.thumb_url;
let id = media.id.expect("Media has no id").value.clone();
let cur_class = match media.class
let cur_class = use_signal(|| match media.class
{
0 => "Standard",
1 => "NSFW",
2 => "Secret",
_ => "Unkown",
};
});
rsx! {
img { src: "{HOST}{url}", }
label { "Media Class: {cur_class}" }
label { "Media Class: {cur_class()}" }
}
}