Skip to content

Commit d07385f

Browse files
mbaraambaraa
authored
Merge pull request #48 from mbaraa/feat/componentize-song-tile
Refactor: componentize shared song tile
2 parents e93730e + 851def1 commit d07385f

File tree

7 files changed

+190
-243
lines changed

7 files changed

+190
-243
lines changed

‎views/components/playlist/popup.templ

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ templ PlaylistsPopup(index int, songId string, playlists []entities.Playlist, so
1313
templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPlaylists map[string]bool) {
1414
<div
1515
class={
16-
"min-w-[350px]", "bg-accent-trans-30", "backdrop-blur-md", "p-3", "text-secondary",
16+
"min-w-[350px]", "bg-accent-trans-30", "backdrop-blur-xl", "p-3", "text-secondary",
1717
"rounded-b-[10px]", "rounded-l-[10px]",
1818
}
1919
>
@@ -72,4 +72,5 @@ templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPla
7272

7373
templ popoverButton() {
7474
<img class={ "max-w-[30px]", "h-[20px]", "md:h-[30px]" } src="/static/icons/add-to-playlist.svg" alt="Add to playlist"/>
75+
<span>Save to a playlist</span>
7576
}

‎views/components/popover/popover.templ

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ templ Popover(id, title string, button, child templ.Component) {
99
<button
1010
class={
1111
"popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",
12-
"flex", "justify-center", "items-center",
12+
"flex", "justify-center", "items-center", "gap-x-2",
1313
}
1414
title={ title }
1515
type="button"

‎views/components/popup/popup.templ

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ templ Popup(id, title string, button, child templ.Component) {
66
<button
77
class={
88
"popup-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",
9-
"flex", "justify-center", "items-center",
9+
"flex", "items-center", "gap-x-2", "w-full",
1010
}
1111
title={ title }
1212
type="button"

‎views/components/song/song.templ

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
package song
2+
3+
import (
4+
"dankmuzikk/entities"
5+
"dankmuzikk/views/components/popover"
6+
"dankmuzikk/views/icons"
7+
"fmt"
8+
)
9+
10+
templ Song(s entities.Song, additionalData []string, additionalOptions []templ.Component, onClick templ.ComponentScript, hideId ...bool) {
11+
<div
12+
if hideId != nil && len(hideId) == 1 && !hideId[0] {
13+
id={ "song-" + s.YtId }
14+
}
15+
class={
16+
"!font-Ubuntu", "w-full", "bg-[#ffffff00]", "flex", "justify-between",
17+
"rounded-xl", "gap-x-2", "md:gap-x-5", "xl:gap-x-10", "p-2",
18+
}
19+
>
20+
<div class={ "w-full", "flex", "gap-x-4", "md:gap-x-6" }>
21+
<!-- thumbnail and duration -->
22+
<div
23+
class={ "w-[80px]", "h-[80px]", "md:w-[120px]", "md:h-[120px]", "relative", "cursor-pointer" }
24+
onClick={ onClick }
25+
>
26+
<div
27+
class={
28+
"w-[80px]", "h-[80px]", "md:w-[120px]", "md:h-[120px]", "rounded-md", "bg-primary",
29+
"bg-repeat", "bg-cover", "bg-center", songThumb(fmt.Sprintf("url(\"%s\")", s.ThumbnailUrl)),
30+
}
31+
></div>
32+
<div class={ "absolute", "right-0", "bottom-0", "text-secondary", "text-sm", "md:text-md", "font-light", "m-2", "p-[6px]", "bg-accent-trans-30", "rounded-sm" }>
33+
<p class={ "leading-3", "font-Ubuntu" }>
34+
{ s.Duration }
35+
</p>
36+
</div>
37+
</div>
38+
<!-- title, channel title, and description -->
39+
<div class={ "w-[150px]", "md:w-[330px]", "lg:min-w-[450px]", "xl:min-w-[650px]" }>
40+
<div class={ "w-full", "h-full", "flex", "gap-y-3", "items-center", "flex-col", "font-Ubuntu", "text-secondary" }>
41+
<h3
42+
class={ "w-full", "text-md", "md:text-lg", "font-bold", "cursor-pointer", "overflow-hidden", "text-nowrap", "text-ellipsis" }
43+
title={ s.Title }
44+
onClick={ onClick }
45+
>
46+
{ s.Title }
47+
</h3>
48+
<p class={ "w-full", "text-sm", "font-normal" }>{ s.Artist }</p>
49+
for _, info := range additionalData {
50+
<p class={ "w-full", "text-sm", "font-normal" }>{ info }</p>
51+
}
52+
</div>
53+
</div>
54+
</div>
55+
<!-- actions -->
56+
<div class={ "w-[30px]", "h-auto", "relative" }>
57+
@popover.Popover(s.YtId, "Song options", icons.Options(), options(s, additionalOptions))
58+
</div>
59+
</div>
60+
}
61+
62+
templ options(song entities.Song, additionalOptions []templ.Component) {
63+
<div
64+
class={
65+
"flex", "flex-col", "gap-y-1", "p-2", "rounded-md",
66+
"bg-accent-trans-30", "backdrop-blur-xl", "min-w-[250px]", "text-secondary",
67+
}
68+
>
69+
for _, option := range additionalOptions {
70+
@option
71+
}
72+
<button
73+
class={
74+
"popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",
75+
"flex", "items-center", "gap-x-2", "w-full",
76+
}
77+
title="Add song to queue"
78+
type="button"
79+
onClick={ addSongToQueue(song) }
80+
>
81+
<img class={ "max-w-[30px]", "h-[25px]", "md:h-[30px]" } src="/static/icons/add-to-queue.svg" alt="Add song to queue"/>
82+
<span>Add to queue</span>
83+
</button>
84+
<button
85+
class={
86+
"popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",
87+
"flex", "items-center", "gap-x-2", "w-full",
88+
}
89+
title="Download song"
90+
type="button"
91+
onClick={ downloadSong(song.YtId, song.Title) }
92+
>
93+
<img class={ "max-w-[30px]", "h-[25px]", "md:h-[30px]" } src="/static/icons/download-icon.svg" alt="Download song"/>
94+
<span>Download to device</span>
95+
</button>
96+
</div>
97+
}
98+
99+
css songThumb(url string) {
100+
background-image: { url };
101+
}
102+
103+
script downloadSong(songYtId, songTitle string) {
104+
Player.downloadSongToDevice(songYtId, songTitle)
105+
}
106+
107+
script addSongToQueue(song entities.Song) {
108+
window.Player.addSongToQueue(song);
109+
}

‎views/pages/index.templ

Lines changed: 36 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -3,83 +3,45 @@ package pages
33
import (
44
"dankmuzikk/views/components/navlink"
55
"dankmuzikk/entities"
6-
"fmt"
6+
"dankmuzikk/views/components/song"
77
)
88

99
templ Index(recentPlays []entities.Song) {
1010
<main class={ "w-full", "h-full", "flex", "flex-col", "justify-center", "items-center" }>
11-
<div class={ "flex", "justify-center" }>
12-
<section
13-
class={
14-
"w-full", "md:w-auto", "bg-accent-trans-20", "backdrop-blur-lg", "rounded-xl",
15-
"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
16-
"text-secondary", "mb-[170px]", "lg:mb-0",
17-
}
18-
>
19-
if recentPlays != nil && len(recentPlays) != 0 {
20-
<h1 class={ "text-secondary", "text-3xl", "lg:text-4xl" }>Recent plays</h1>
21-
<div
22-
class={
23-
"w-full", "overflow-y-scroll", "min-h-[40vh]", "max-h-[50vh]", "md:max-h-[65vh]",
24-
"flex", "flex-col", "gap-5", "lg:my-10",
25-
}
26-
>
27-
for _, song := range recentPlays {
28-
<div
29-
class={
30-
"bg-secondary-trans-20", "rounded-[10px]", "p-2", "lg:p-5",
31-
"flex", "flex-row", "items-center", "gap-5", "justify-between",
32-
}
33-
>
34-
<div
35-
class={
36-
"w-[80px]", "h-[80px]", "lg:w-[125px]", "lg:h-[125px]", "rounded-md", "bg-accent", "cursor-pointer",
37-
songThumb(fmt.Sprintf("url(\"%s\")", song.ThumbnailUrl)), "bg-repeat", "bg-cover", "bg-center",
38-
}
39-
onClick={ playSong(song) }
40-
></div>
41-
<div class={ "w-11/12", "flex", "justify-between", "items-center" }>
42-
<div
43-
class={ "cursor-pointer", "flex", "flex-col", "lg:gap-2" }
44-
onClick={ playSong(song) }
45-
>
46-
<p class={ "text-lg", "max-w-[200px]", "md:max-w-[300px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Title }</p>
47-
<p class={ "text-md", "max-w-[200px]", "md:max-w-[300px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Artist }</p>
48-
<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Last played { song.AddedAt }</p>
49-
</div>
50-
<div class={ "w-[30px]", "h-auto", "relative" }>
51-
<button
52-
class={
53-
"popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",
54-
"flex", "justify-center", "items-center",
55-
}
56-
title="Download song"
57-
type="button"
58-
onClick={ downloadSong(song.YtId, song.Title) }
59-
>
60-
<img class={ "max-w-[30px]", "h-[25px]", "md:h-[30px]" } src="/static/icons/download-icon.svg" alt="Download song"/>
61-
</button>
62-
</div>
63-
</div>
64-
</div>
65-
}
66-
</div>
67-
} else {
68-
<h2 class={ "text-xl" }>What should you expect?</h2>
69-
<p>
70-
DankMuzikk is music player that plays music from YouTube but without actually using YouTube, start by typing a song's name into the search bar (song's first load time is slow ~10s).
71-
<br/>
72-
More details&nbsp;
73-
@navlink.NavLink("in about page", "", "/about")
74-
<br/>
75-
<br/>
76-
And you can check the beta features here <a href="https://beta.dankmuzikk.com">beta.dankmuzikk.com</a>
77-
<br/>
78-
<br/>
79-
Happy danking 🎉✨
80-
</p>
81-
}
82-
</section>
83-
</div>
11+
<section
12+
class={
13+
"w-full", "md:w-3/4", "bg-accent-trans-20", "backdrop-blur-lg", "rounded-xl",
14+
"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "flex", "flex-col", "gap-y-6",
15+
"text-secondary", "mb-[170px]", "lg:mb-0",
16+
}
17+
>
18+
if recentPlays != nil && len(recentPlays) != 0 {
19+
<h1 class={ "text-secondary", "text-3xl", "lg:text-4xl" }>Recent plays</h1>
20+
<div
21+
class={
22+
"w-full", "overflow-y-scroll", "min-h-[40vh]", "max-h-[50vh]", "md:max-h-[65vh]",
23+
"flex", "flex-col", "gap-5", "lg:mb-5",
24+
}
25+
>
26+
for _, s := range recentPlays {
27+
@song.Song(s, nil, nil, playSong(s), true)
28+
}
29+
</div>
30+
} else {
31+
<h2 class={ "text-xl" }>What should you expect?</h2>
32+
<p>
33+
DankMuzikk is music player that plays music from YouTube but without actually using YouTube, start by typing a song's name into the search bar (song's first load time is slow ~10s).
34+
<br/>
35+
More details&nbsp;
36+
@navlink.NavLink("in about page", "", "/about")
37+
<br/>
38+
<br/>
39+
And you can check the beta features here <a href="https://beta.dankmuzikk.com">beta.dankmuzikk.com</a>
40+
<br/>
41+
<br/>
42+
Happy danking 🎉✨
43+
</p>
44+
}
45+
</section>
8446
</main>
8547
}

0 commit comments

Comments
 (0)