ngn/dumb
1
0
Fork 0
Code Issues 1 Pull Requests 3 Actions Packages Activity

feat: improve lyrics page UI

Browse Source
This commit is contained in:
rramiachraf 2024-03-04 17:41:01 +01:00
parent e2d5ef044b
commit a5bc03959e
3 changed files with 51 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
data/lyrics.go
View File

@ -16,8 +16,11 @@ type Song struct {
Lyrics string Lyrics string
Credits map[string]string Credits map[string]string
About [2]string About [2]string
Album string Album struct {
LinkToAlbum string URL string
Name string
Image string
}
} }
type songResponse struct { type songResponse struct {
@ -30,8 +33,9 @@ type songResponse struct {
Plain string Plain string
} }
Album struct { Album struct {
Url string `json:"url"` URL string `json:"url"`
Name string `json:"name"` Name string `json:"name"`
Image string `json:"cover_art_url"`
} }
CustomPerformances []customPerformance `json:"custom_performances"` CustomPerformances []customPerformance `json:"custom_performances"`
} }
@ -83,8 +87,9 @@ func (s *Song) parseSongData(doc *goquery.Document) {
s.About[0] = songData.Description.Plain s.About[0] = songData.Description.Plain
s.About[1] = truncateText(songData.Description.Plain) s.About[1] = truncateText(songData.Description.Plain)
s.Credits = make(map[string]string) s.Credits = make(map[string]string)
s.Album = songData.Album.Name s.Album.Name = songData.Album.Name
s.LinkToAlbum = strings.Replace(songData.Album.Url, "https://genius.com", "", -1) s.Album.URL = strings.Replace(songData.Album.URL, "https://genius.com", "", -1)
s.Album.Image = ExtractImageURL(songData.Album.Image)
for _, perf := range songData.CustomPerformances { for _, perf := range songData.CustomPerformances {
var artists []string var artists []string

28
static/style.css
View File

@ -53,7 +53,6 @@ body {
#lyrics a { #lyrics a {
color: inherit; color: inherit;
cursor: initial;
} }
#lyrics a, .annotation { #lyrics a, .annotation {
@ -84,7 +83,7 @@ a {
#metadata { #metadata {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 2rem;
flex-basis: 0; flex-basis: 0;
} }
@ -99,17 +98,25 @@ a {
font-weight: 500; font-weight: 500;
} }
#metadata-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
#album-artwork { #album-artwork {
width: 20rem; width: 24rem;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 1px #ddd; box-shadow: 0 1px 1px #ddd;
max-width: 200px;
} }
#container { #container {
display: flex; display: grid;
padding: 5rem 10rem; padding: 5rem 0;
gap: 5rem; grid-template-columns: 24rem 1fr 24rem;
max-width: 1024px;
margin: auto;
gap: 4rem;
} }
#credits { #credits {
@ -129,6 +136,12 @@ a {
color: #1e1e1e; color: #1e1e1e;
} }
#lyrics-album-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
#album-tracklist{ #album-tracklist{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -214,6 +227,7 @@ a {
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
#container { #container {
padding: 3rem 2rem; padding: 3rem 2rem;
display: flex;
flex-direction: column; flex-direction: column;
gap: 3rem; gap: 3rem;
} }

13
views/lyrics.templ
View File

@ -9,10 +9,11 @@ templ LyricsPage(s data.Song) {
@layout(fmt.Sprintf("%s - %s lyrics", s.Artist, s.Title)) { @layout(fmt.Sprintf("%s - %s lyrics", s.Artist, s.Title)) {
<div id="container"> <div id="container">
<div id="metadata"> <div id="metadata">
<a href={ templ.URL(s.LinkToAlbum) }><img id="album-artwork" src={ data.ExtractImageURL(s.Image) }/></a> <img id="album-artwork" src={ data.ExtractImageURL(s.Image) }/>
<div id="metadata-info">
<h2>{ s.Artist }</h2> <h2>{ s.Artist }</h2>
<h1>{ s.Title }</h1> <h1>{ s.Title }</h1>
<a href={ templ.URL(s.LinkToAlbum) }><h2>{ s.Album }</h2></a> </div>
</div> </div>
<div id="lyrics"> <div id="lyrics">
@templ.Raw(s.Lyrics) @templ.Raw(s.Lyrics)
@ -32,6 +33,14 @@ templ LyricsPage(s data.Song) {
</details> </details>
} }
</div> </div>
if s.Album.Name != "" {
<div id="lyrics-album-container">
<h1 id="title">{ s.Album.Name }</h1>
<a href={ templ.URL(s.Album.URL) }>
<img title={ "Album: " + s.Album.Name } id="album-artwork" src={ s.Album.Image }/>
</a>
</div>
}
</div> </div>
</div> </div>
} }