Compare commits
3 Commits
00d4e8d3e0
...
1a478dea8e
| Author | SHA1 | Date | |
|---|---|---|---|
 Connor Johnstone
|
1a478dea8e | ||
|
Connor Johnstone
|
a893a84f16 | ||
|
Connor Johnstone
|
d20989f859 |
@@ -109,37 +109,9 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
let is_watched = d.artist_status == "owned"
|
||||
|| d.artist_status == "partial"
|
||||
|| d.artist_status == "wanted";
|
||||
if is_watched {
|
||||
// Unwatch All
|
||||
let artist_id_num = d.artist.id;
|
||||
let artist_name = d.artist.name.clone();
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
let artist_id = id.clone();
|
||||
html! {
|
||||
<button class="btn btn-sm btn-secondary"
|
||||
onclick={Callback::from(move |_: MouseEvent| {
|
||||
let artist_name = artist_name.clone();
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
let artist_id = artist_id.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::unwatch_artist(artist_id_num).await {
|
||||
Ok(_) => {
|
||||
message.set(Some(format!("Unwatched {artist_name}")));
|
||||
fetch.emit(artist_id);
|
||||
}
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})}>
|
||||
{ "Unwatch All" }
|
||||
</button>
|
||||
}
|
||||
} else {
|
||||
// Watch All — prefer enrichment MBID over DB record (import may not have set it)
|
||||
let is_fully_watched = d.artist_status == "owned";
|
||||
|
||||
let watch_btn = if !is_fully_watched {
|
||||
let artist_name = d.artist.name.clone();
|
||||
let artist_mbid = d
|
||||
.artist_info
|
||||
@@ -175,7 +147,43 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
{ "Watch All" }
|
||||
</button>
|
||||
}
|
||||
} else {
|
||||
html! {}
|
||||
};
|
||||
|
||||
let unwatch_btn = if is_watched {
|
||||
let artist_id_num = d.artist.id;
|
||||
let artist_name = d.artist.name.clone();
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
let artist_id = id.clone();
|
||||
html! {
|
||||
<button class="btn btn-sm btn-secondary"
|
||||
onclick={Callback::from(move |_: MouseEvent| {
|
||||
let artist_name = artist_name.clone();
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
let artist_id = artist_id.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::unwatch_artist(artist_id_num).await {
|
||||
Ok(_) => {
|
||||
message.set(Some(format!("Unwatched {artist_name}")));
|
||||
fetch.emit(artist_id);
|
||||
}
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})}>
|
||||
{ "Unwatch All" }
|
||||
</button>
|
||||
}
|
||||
} else {
|
||||
html! {}
|
||||
};
|
||||
|
||||
html! { <> { watch_btn } { unwatch_btn } </> }
|
||||
};
|
||||
|
||||
let monitor_btn = {
|
||||
@@ -253,10 +261,8 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
|
||||
html! {
|
||||
<div>
|
||||
if let Some(ref banner) = d.artist_banner {
|
||||
<div class="artist-banner" style={format!("background-image: url('{banner}')")}>
|
||||
</div>
|
||||
}
|
||||
<div class={if d.artist_banner.is_some() { "artist-banner-wrap" } else { "" }}
|
||||
style={d.artist_banner.as_ref().map(|b| format!("background-image: url('{b}')")).unwrap_or_default()}>
|
||||
<div class="page-header">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex gap-2 items-center">
|
||||
@@ -329,6 +335,7 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
<p class="text-sm text-muted loading">{ "Loading track counts..." }</p>
|
||||
}
|
||||
</div>
|
||||
</div> // close artist-banner-wrap
|
||||
|
||||
if let Some(ref msg) = *message {
|
||||
<div class="card" style="border-color: var(--success);">
|
||||
@@ -376,8 +383,40 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
|
||||
let tc = album.track_count;
|
||||
|
||||
// Watch/Unwatch toggle for albums
|
||||
let watch_btn = if is_unwatched {
|
||||
// Progress bar styles
|
||||
let owned_pct = if tc > 0 {
|
||||
(album.owned_tracks as f64 / tc as f64 * 100.0) as u32
|
||||
} else {
|
||||
0
|
||||
};
|
||||
let owned_color = if album.owned_tracks >= tc && tc > 0 {
|
||||
"var(--success)"
|
||||
} else if album.owned_tracks > 0 {
|
||||
"var(--warning)"
|
||||
} else {
|
||||
"var(--text-muted)"
|
||||
};
|
||||
let owned_bar_style =
|
||||
format!("width:{owned_pct}%;background:{owned_color};");
|
||||
|
||||
let watched_pct = if tc > 0 {
|
||||
(album.watched_tracks as f64 / tc as f64 * 100.0) as u32
|
||||
} else {
|
||||
0
|
||||
};
|
||||
let watched_color = if album.watched_tracks > 0 {
|
||||
"var(--accent)"
|
||||
} else {
|
||||
"var(--text-muted)"
|
||||
};
|
||||
let watched_bar_style =
|
||||
format!("width:{watched_pct}%;background:{watched_color};");
|
||||
|
||||
// Watch/Unwatch buttons for albums — show both when partially watched
|
||||
let is_fully_owned = album.status == "owned";
|
||||
let is_album_watched = album.status != "unwatched";
|
||||
|
||||
let album_watch_btn = {
|
||||
let artist_name = d.artist.name.clone();
|
||||
let album_title = album.title.clone();
|
||||
let album_mbid = album.mbid.clone();
|
||||
@@ -386,7 +425,8 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
let fetch = fetch.clone();
|
||||
let artist_id = id.clone();
|
||||
html! {
|
||||
<button class="btn btn-sm btn-primary"
|
||||
<button class="btn btn-sm btn-primary btn-fixed"
|
||||
style={if is_fully_owned { "visibility:hidden;" } else { "" }}
|
||||
onclick={Callback::from(move |_: MouseEvent| {
|
||||
let artist_name = artist_name.clone();
|
||||
let album_title = album_title.clone();
|
||||
@@ -411,7 +451,9 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
{ "Watch" }
|
||||
</button>
|
||||
}
|
||||
} else {
|
||||
};
|
||||
|
||||
let album_unwatch_btn = {
|
||||
let album_title = album.title.clone();
|
||||
let album_mbid = album.mbid.clone();
|
||||
let message = message.clone();
|
||||
@@ -419,7 +461,8 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
let fetch = fetch.clone();
|
||||
let artist_id = id.clone();
|
||||
html! {
|
||||
<button class="btn btn-sm btn-secondary"
|
||||
<button class="btn btn-sm btn-secondary btn-fixed"
|
||||
style={if !is_album_watched { "visibility:hidden;" } else { "" }}
|
||||
onclick={Callback::from(move |_: MouseEvent| {
|
||||
let album_title = album_title.clone();
|
||||
let album_mbid = album_mbid.clone();
|
||||
@@ -442,6 +485,8 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
}
|
||||
};
|
||||
|
||||
let watch_btn = html! { <span style="display:inline-flex;gap:0.5rem;">{ album_watch_btn } { album_unwatch_btn }</span> };
|
||||
|
||||
html! {
|
||||
<tr style={row_style}>
|
||||
<td>
|
||||
@@ -457,23 +502,18 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
<td class="text-muted">{ album.date.as_deref().unwrap_or("") }</td>
|
||||
<td>
|
||||
if tc > 0 {
|
||||
<span class="text-sm" style={
|
||||
if album.owned_tracks >= tc { "color: var(--success);" }
|
||||
else if album.owned_tracks > 0 { "color: var(--warning);" }
|
||||
else { "color: var(--text-muted);" }
|
||||
}>
|
||||
{ format!("{}/{}", album.owned_tracks, tc) }
|
||||
</span>
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar-fill" style={owned_bar_style}></div>
|
||||
<span class="progress-bar-text">{ format!("{}/{}", album.owned_tracks, tc) }</span>
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
if tc > 0 {
|
||||
<span class="text-sm" style={
|
||||
if album.watched_tracks > 0 { "color: var(--accent);" }
|
||||
else { "color: var(--text-muted);" }
|
||||
}>
|
||||
{ format!("{}/{}", album.watched_tracks, tc) }
|
||||
</span>
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar-fill" style={watched_bar_style}></div>
|
||||
<span class="progress-bar-text">{ format!("{}/{}", album.watched_tracks, tc) }</span>
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
<td>{ watch_btn }</td>
|
||||
|
||||
+106
-22
@@ -57,16 +57,22 @@ pub fn library_page() -> Html {
|
||||
<th>{ "Monitored" }</th>
|
||||
<th>{ "Owned" }</th>
|
||||
<th>{ "Watched" }</th>
|
||||
<th>{ "Tracks" }</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ for artists.iter().map(|a| {
|
||||
let artist_id = a.id;
|
||||
let artist_name = a.name.clone();
|
||||
let artist_mbid = a.musicbrainz_id.clone();
|
||||
let is_watched = a.total_watched > 0;
|
||||
let is_fully_watched = a.enriched && a.total_watched >= a.total_items && a.total_items > 0;
|
||||
let is_monitored = a.monitored;
|
||||
|
||||
let on_remove = {
|
||||
let error = error.clone();
|
||||
let fetch = fetch_artists.clone();
|
||||
let on_remove = Callback::from(move |_: MouseEvent| {
|
||||
Callback::from(move |_: MouseEvent| {
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
@@ -75,7 +81,81 @@ pub fn library_page() -> Html {
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
let on_watch = {
|
||||
let error = error.clone();
|
||||
let fetch = fetch_artists.clone();
|
||||
let name = artist_name.clone();
|
||||
let mbid = artist_mbid.clone();
|
||||
Callback::from(move |_: MouseEvent| {
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
let name = name.clone();
|
||||
let mbid = mbid.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::add_artist(&name, mbid.as_deref()).await {
|
||||
Ok(_) => fetch.emit(()),
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
let on_unwatch = {
|
||||
let error = error.clone();
|
||||
let fetch = fetch_artists.clone();
|
||||
Callback::from(move |_: MouseEvent| {
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::unwatch_artist(artist_id).await {
|
||||
Ok(_) => fetch.emit(()),
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
let on_monitor_toggle = {
|
||||
let error = error.clone();
|
||||
let fetch = fetch_artists.clone();
|
||||
Callback::from(move |_: MouseEvent| {
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::set_artist_monitored(artist_id, !is_monitored).await {
|
||||
Ok(_) => fetch.emit(()),
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
// Pre-compute progress bar styles
|
||||
let owned_pct = if a.total_watched > 0 {
|
||||
(a.total_owned as f64 / a.total_watched as f64 * 100.0) as u32
|
||||
} else {
|
||||
0
|
||||
};
|
||||
let owned_color = if a.total_owned >= a.total_watched && a.total_watched > 0 {
|
||||
"var(--success)"
|
||||
} else if a.total_owned > 0 {
|
||||
"var(--warning)"
|
||||
} else {
|
||||
"var(--text-muted)"
|
||||
};
|
||||
let owned_bar_style = format!("width:{owned_pct}%;background:{owned_color};");
|
||||
|
||||
let watched_pct = if a.total_items > 0 {
|
||||
(a.total_watched as f64 / a.total_items as f64 * 100.0) as u32
|
||||
} else {
|
||||
0
|
||||
};
|
||||
let watched_color = if a.total_watched > 0 { "var(--accent)" } else { "var(--text-muted)" };
|
||||
let watched_bar_style = format!("width:{watched_pct}%;background:{watched_color};");
|
||||
|
||||
html! {
|
||||
<tr>
|
||||
<td>
|
||||
@@ -90,34 +170,38 @@ pub fn library_page() -> Html {
|
||||
</td>
|
||||
if a.enriched {
|
||||
<td>
|
||||
<span class="text-sm" style={
|
||||
if a.total_owned >= a.total_watched && a.total_watched > 0 { "color: var(--success);" }
|
||||
else if a.total_owned > 0 { "color: var(--warning);" }
|
||||
else { "color: var(--text-muted);" }
|
||||
}>
|
||||
{ format!("{}/{}", a.total_owned, a.total_watched) }
|
||||
</span>
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar-fill" style={owned_bar_style.clone()}></div>
|
||||
<span class="progress-bar-text">{ format!("{}/{}", a.total_owned, a.total_watched) }</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm" style={
|
||||
if a.total_watched > 0 { "color: var(--accent);" }
|
||||
else { "color: var(--text-muted);" }
|
||||
}>
|
||||
{ format!("{}/{}", a.total_watched, a.total_items) }
|
||||
</span>
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar-fill" style={watched_bar_style.clone()}></div>
|
||||
<span class="progress-bar-text">{ format!("{}/{}", a.total_watched, a.total_items) }</span>
|
||||
</div>
|
||||
</td>
|
||||
} else {
|
||||
<td colspan="2" class="text-sm text-muted loading">
|
||||
{ "Awaiting artist enrichment..." }
|
||||
</td>
|
||||
}
|
||||
<td class="text-muted text-sm">
|
||||
if a.enriched && a.total_items > 0 {
|
||||
{ a.total_items }
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-danger" onclick={on_remove}>
|
||||
<td class="actions">
|
||||
<button class="btn btn-sm btn-lib"
|
||||
onclick={on_watch}
|
||||
style={if is_fully_watched { "visibility:hidden;" } else { "" }}>
|
||||
{ "Watch" }
|
||||
</button>
|
||||
<button class="btn btn-sm btn-secondary btn-lib"
|
||||
onclick={on_unwatch}
|
||||
style={if !is_watched { "visibility:hidden;" } else { "" }}>
|
||||
{ "Unwatch" }
|
||||
</button>
|
||||
<button class={if is_monitored { "btn btn-sm btn-success btn-lib" } else { "btn btn-sm btn-secondary btn-lib" }}
|
||||
onclick={on_monitor_toggle}>
|
||||
{ if is_monitored { "Monitored" } else { "Monitor" } }
|
||||
</button>
|
||||
<button class="btn btn-sm btn-danger btn-lib" onclick={on_remove}>
|
||||
{ "Remove" }
|
||||
</button>
|
||||
</td>
|
||||
|
||||
+53
-7
@@ -148,13 +148,27 @@ a:hover { color: var(--accent-hover); }
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.artist-links a:hover { color: var(--accent); }
|
||||
.artist-banner {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
.artist-banner-wrap {
|
||||
background-size: 100% auto;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 1rem;
|
||||
margin: -2rem -2rem 1rem -2rem;
|
||||
padding: 2rem;
|
||||
padding-top: 30%;
|
||||
position: relative;
|
||||
}
|
||||
.artist-banner-wrap::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, rgba(15,23,42,0.4) 0%, rgba(15,23,42,0.85) 60%, rgba(15,23,42,0.95) 100%);
|
||||
border-radius: var(--radius);
|
||||
pointer-events: none;
|
||||
}
|
||||
.artist-banner-wrap > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.artist-photo {
|
||||
width: 120px;
|
||||
@@ -214,7 +228,7 @@ a:hover { color: var(--accent-hover); }
|
||||
/* Tables */
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th, td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--border); }
|
||||
th { color: var(--text-secondary); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; }
|
||||
th { color: var(--text-secondary); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; text-align: center; }
|
||||
tr:hover { background: var(--bg-card); }
|
||||
|
||||
/* Buttons */
|
||||
@@ -234,6 +248,38 @@ tr:hover { background: var(--bg-card); }
|
||||
.btn-danger { background: var(--danger); color: white; }
|
||||
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); }
|
||||
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
|
||||
/* Progress bars for library columns */
|
||||
.progress-bar-wrap {
|
||||
position: relative;
|
||||
background: var(--bg-card);
|
||||
border-radius: 4px;
|
||||
height: 1.4rem;
|
||||
min-width: 4.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-bar-fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
opacity: 0.3;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.progress-bar-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-fixed { min-width: 5.5rem; text-align: center; }
|
||||
.btn-lib { min-width: 4.5rem; text-align: center; padding-left: 0.25rem; padding-right: 0.25rem; }
|
||||
|
||||
/* Forms */
|
||||
input, select {
|
||||
|
||||
+17
-7
@@ -95,9 +95,11 @@ async fn list_artists(
|
||||
auth::require_auth(&session)?;
|
||||
let artists = queries::artists::list(state.db.conn(), query.limit, query.offset).await?;
|
||||
|
||||
let wanted = queries::wanted::list(state.db.conn(), None, None).await?;
|
||||
|
||||
let mut items: Vec<ArtistListItem> = Vec::new();
|
||||
for a in &artists {
|
||||
// Check if we have cached artist-level totals from a prior detail page load
|
||||
// Get total_items from enrichment cache (total available tracks from MB)
|
||||
let cache_key = format!("artist_totals:{}", a.id);
|
||||
let cached_totals: Option<(u32, u32, u32)> =
|
||||
if let Ok(Some(json)) = queries::cache::get(state.db.conn(), &cache_key).await {
|
||||
@@ -107,12 +109,20 @@ async fn list_artists(
|
||||
};
|
||||
|
||||
let enriched = cached_totals.is_some();
|
||||
let (total_watched, total_owned, total_items) =
|
||||
if let Some((avail, watched, owned)) = cached_totals {
|
||||
(watched as usize, owned as usize, avail as usize)
|
||||
} else {
|
||||
(0, 0, 0)
|
||||
};
|
||||
let total_items = cached_totals
|
||||
.map(|(avail, _, _)| avail as usize)
|
||||
.unwrap_or(0);
|
||||
|
||||
// Compute watched/owned live from wanted_items (always current)
|
||||
let artist_wanted: Vec<_> = wanted
|
||||
.iter()
|
||||
.filter(|w| w.artist_id == Some(a.id))
|
||||
.collect();
|
||||
let total_watched = artist_wanted.len();
|
||||
let total_owned = artist_wanted
|
||||
.iter()
|
||||
.filter(|w| w.status == WantedStatus::Owned)
|
||||
.count();
|
||||
|
||||
items.push(ArtistListItem {
|
||||
id: a.id,
|
||||
|
||||
Reference in New Issue
Block a user