Added better artist bio/pics/lyrics
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
use std::rc::Rc;
|
||||
use std::cell::Cell;
|
||||
use gloo_timers::callback::Interval;
|
||||
use std::cell::Cell;
|
||||
use std::rc::Rc;
|
||||
use yew::prelude::*;
|
||||
use yew_router::prelude::*;
|
||||
|
||||
@@ -152,9 +152,53 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2>{ &d.artist.name }</h2>
|
||||
<div class="flex gap-2 items-center">
|
||||
if let Some(ref photo) = d.artist_photo {
|
||||
<img class="artist-photo" src={photo.clone()} loading="lazy" />
|
||||
}
|
||||
<div>
|
||||
<h2>{ &d.artist.name }</h2>
|
||||
if let Some(ref info) = d.artist_info {
|
||||
<div class="artist-meta">
|
||||
if let Some(ref country) = info.country {
|
||||
<span class="tag">{ country }</span>
|
||||
}
|
||||
if let Some(ref atype) = info.artist_type {
|
||||
<span class="tag">{ atype }</span>
|
||||
}
|
||||
if let Some(ref year) = info.begin_year {
|
||||
<span class="text-sm text-muted">{ format!("est. {year}") }</span>
|
||||
}
|
||||
if let Some(ref dis) = info.disambiguation {
|
||||
<span class="text-sm text-muted">{ format!("({dis})") }</span>
|
||||
}
|
||||
</div>
|
||||
if !info.urls.is_empty() {
|
||||
<div class="artist-links">
|
||||
{ for info.urls.iter().filter(|u|
|
||||
["wikipedia", "official homepage", "discogs", "wikidata"].contains(&u.link_type.as_str())
|
||||
).map(|u| {
|
||||
let label = match u.link_type.as_str() {
|
||||
"wikipedia" => "Wikipedia",
|
||||
"official homepage" => "Official Site",
|
||||
"discogs" => "Discogs",
|
||||
"wikidata" => "Wikidata",
|
||||
other => other,
|
||||
};
|
||||
html! {
|
||||
<a href={u.url.clone()} target="_blank" rel="noopener">{ label }</a>
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{ watch_all_btn }
|
||||
</div>
|
||||
if let Some(ref bio) = d.artist_bio {
|
||||
<p class="artist-bio text-sm">{ bio }</p>
|
||||
}
|
||||
if d.enriched {
|
||||
<p class="text-sm">
|
||||
<span style="color: var(--accent);">
|
||||
@@ -194,6 +238,7 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 60px;"></th>
|
||||
<th>{ "Title" }</th>
|
||||
<th>{ "Date" }</th>
|
||||
<th>{ "Owned" }</th>
|
||||
@@ -206,6 +251,7 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
let is_unwatched = album.status == "unwatched";
|
||||
let row_style = if is_unwatched { "opacity: 0.6;" } else { "" };
|
||||
|
||||
let cover_url = format!("https://coverartarchive.org/release/{}/front-250", album.mbid);
|
||||
let album_link = html! {
|
||||
<Link<Route> to={Route::Album { mbid: album.mbid.clone() }}>
|
||||
{ &album.title }
|
||||
@@ -255,6 +301,15 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
|
||||
html! {
|
||||
<tr style={row_style}>
|
||||
<td>
|
||||
<img class="album-art" src={cover_url}
|
||||
loading="lazy"
|
||||
onerror={Callback::from(|e: web_sys::Event| {
|
||||
if let Some(el) = e.target_dyn_into::<web_sys::HtmlElement>() {
|
||||
el.set_attribute("style", "display:none").ok();
|
||||
}
|
||||
})} />
|
||||
</td>
|
||||
<td>{ album_link }</td>
|
||||
<td class="text-muted">{ album.date.as_deref().unwrap_or("") }</td>
|
||||
<td>
|
||||
|
||||
Reference in New Issue
Block a user