From a22a33cc025b93b49ae0e5bff9e16809120b6d51 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 20 May 2024 00:21:38 +0300
Subject: [PATCH 01/13] chore(download): download the first 5 songs in a search
 results

---
 services/youtube/download/download.go | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/services/youtube/download/download.go b/services/youtube/download/download.go
index 1775277..7223c3f 100644
--- a/services/youtube/download/download.go
+++ b/services/youtube/download/download.go
@@ -8,6 +8,7 @@ import (
 	"dankmuzikk/models"
 	"errors"
 	"fmt"
+	"math"
 	"net/http"
 	"os"
 )
@@ -99,5 +100,12 @@ func (d *Service) DownloadYoutubeSongsMetadata(songs []entities.Song) error {
 		}
 	}
 
+	for i := 0; i < int(math.Min(float64(len(newSongs)), 5)); i++ {
+		err := d.DownloadYoutubeSongQueue(newSongs[i].YtId)
+		if err != nil {
+			log.Errorln(err)
+		}
+	}
+
 	return nil
 }

From d451d8002d1eb7037d9c1d718123158cc2d814c2 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 20 May 2024 00:22:15 +0300
Subject: [PATCH 02/13] fix(mobile-view): safe check is mobile

---
 views/components/header/header.templ | 2 +-
 views/components/player/player.templ | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/views/components/header/header.templ b/views/components/header/header.templ
index d0d313c..ec821db 100644
--- a/views/components/header/header.templ
+++ b/views/components/header/header.templ
@@ -82,7 +82,7 @@ templ desktopHeader() {
 templ Header() {
 	<header id="dank-header" class={ "bg-primary", "p-[15px]", "md:p-[10px]" }>
 		// mobiles are usually shitty at rendering, so this prevents mobiles from rendering two blocks and choosing one using CSS.
-		if ctx.Value("is-mobile").(bool) {
+		if isMobile, ok := ctx.Value("is-mobile").(bool); ok && isMobile {
 			@mobileHeader()
 		} else {
 			<div style="display: contents" class={ "hidden", "md:block" }>
diff --git a/views/components/player/player.templ b/views/components/player/player.templ
index 539aa2d..9846def 100644
--- a/views/components/player/player.templ
+++ b/views/components/player/player.templ
@@ -2,7 +2,7 @@ package player
 
 templ PlayerSticky() {
 	<div id="muzikk" class="hidden">
-		if ctx.Value("is-mobile").(bool) {
+		if isMobile, ok := ctx.Value("is-mobile").(bool); ok && isMobile {
 			@mobilePlayer()
 		} else {
 			@desktopPlayer()

From fc76d740ae56e2802f20d984a07bc2a13b100365 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 20 May 2024 00:58:11 +0300
Subject: [PATCH 03/13] chore(playlist): move song's details to options on
 mobile

---
 views/pages/playlist.templ | 55 ++++++++++++++++++++++++++++++--------
 1 file changed, 44 insertions(+), 11 deletions(-)

diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index cc0fecc..3d9f074 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -68,15 +68,21 @@ templ Playlist(pl entities.Playlist) {
 											>
 												<p class={ "text-lg", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Title }</p>
 												<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Artist }</p>
-												<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Added on { song.AddedAt }</p>
-												if song.PlayTimes == 1 {
-													<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played once</p>
-												} else if song.PlayTimes > 1 {
-													<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played { fmt.Sprint( song.PlayTimes) } times</p>
+												if isMobile, ok := ctx.Value("is-mobile").(bool); ok && !isMobile {
+													<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Added on { song.AddedAt }</p>
+													if song.PlayTimes == 1 {
+														<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played once</p>
+													} else if song.PlayTimes > 1 {
+														<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played { fmt.Sprint( song.PlayTimes) } times</p>
+													}
 												}
 											</div>
 											<div>
-												@popover.Popover(song.YtId, "Options", songOptionsToggle(), songOptions(song, pl.PublicId))
+												if isMobile, ok := ctx.Value("is-mobile").(bool); ok && isMobile {
+													@popover.Popover(song.YtId, "Options", songOptionsToggle(), songOptionsMobile(song, pl.PublicId))
+												} else {
+													@popover.Popover(song.YtId, "Options", songOptionsToggle(), songOptions(song, pl.PublicId))
+												}
 											</div>
 										</div>
 									</div>
@@ -98,23 +104,50 @@ templ songOptionsToggle() {
 	</svg>
 }
 
+//if isMobile, ok := ctx.Value("is-mobile").(bool); ok && isMobile {
 templ songOptions(song entities.Song, playlistId string) {
 	<div
 		class={
-			"w-full", "h-full", "bg-accent-trans-20", "p-[10px]", "rounded-[10px]",
-			"flex", "flex-col", "gap-y-2",
+			"w-[250px]", "h-full", "bg-accent-trans-20", "p-[10px]", "rounded-[10px]",
+			"flex", "flex-col", "gap-y-2", "backdrop-blur-lg",
+		}
+	>
+		<h3 class={ "text-lg", "font-medium" }>Options</h3>
+		<button
+			class={
+				"bg-[#DE3333]", "hover:bg-secondary", "text-secondary", "hover:text-[#DE3333]",
+				"rounded-[5px]", "py-[5px]", "px-[10px]", "w-full",
+			}
+			title={ "Remove " + song.Title + "!" }
+			type="button"
+			onClick={ removeSongFromPlaylist(song.YtId, playlistId) }
+		>Remove from playlist</button>
+	</div>
+}
+
+templ songOptionsMobile(song entities.Song, playlistId string) {
+	<div
+		class={
+			"w-[250px]", "h-full", "bg-accent-trans-20", "p-[10px]", "rounded-[10px]",
+			"flex", "flex-col", "gap-y-2", "backdrop-blur-lg",
 		}
 	>
-		<h3>Song's options</h3>
+		<h3 class={ "text-lg", "font-medium" }>Details and options</h3>
+		<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Added on { song.AddedAt }</p>
+		if song.PlayTimes == 1 {
+			<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played once</p>
+		} else if song.PlayTimes > 1 {
+			<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played { fmt.Sprint( song.PlayTimes) } times</p>
+		}
 		<button
 			class={
 				"bg-[#DE3333]", "hover:bg-secondary", "text-secondary", "hover:text-[#DE3333]",
-				"rounded-[5px]", "py-[5px]", "px-[60px]", "w-full",
+				"rounded-[5px]", "py-[10px]", "px-[30px]", "w-full",
 			}
 			title={ "Remove " + song.Title + "!" }
 			type="button"
 			onClick={ removeSongFromPlaylist(song.YtId, playlistId) }
-		>Remove</button>
+		>Remove from playlist</button>
 	</div>
 }
 

From d64ddd848597e8c3f37663ffdc9b297a2729d480 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 20 May 2024 01:06:21 +0300
Subject: [PATCH 04/13] haha lol

---
 services/youtube/download/download.go | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/services/youtube/download/download.go b/services/youtube/download/download.go
index 7223c3f..62b1d44 100644
--- a/services/youtube/download/download.go
+++ b/services/youtube/download/download.go
@@ -100,8 +100,8 @@ func (d *Service) DownloadYoutubeSongsMetadata(songs []entities.Song) error {
 		}
 	}
 
-	for i := 0; i < int(math.Min(float64(len(newSongs)), 5)); i++ {
-		err := d.DownloadYoutubeSongQueue(newSongs[i].YtId)
+	for i := 0; i < int(math.Min(float64(len(songs)), 5)); i++ {
+		err := d.DownloadYoutubeSongQueue(songs[i].YtId)
 		if err != nil {
 			log.Errorln(err)
 		}

From 8e623969e7471590f943d4a30cc6523e249e9b09 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 20 May 2024 02:11:13 +0300
Subject: [PATCH 05/13] chore(playlist): update song's details max width

---
 views/pages/playlist.templ | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index 3d9f074..8d840ca 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -66,14 +66,14 @@ templ Playlist(pl entities.Playlist) {
 												class={ "cursor-pointer", "flex", "flex-col", "lg:gap-2" }
 												onClick={ playSongFromPlaylist(song.YtId, pl) }
 											>
-												<p class={ "text-lg", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Title }</p>
-												<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Artist }</p>
+												<p class={ "text-lg", "max-w-[200px]", "md:max-w-[300px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Title }</p>
+												<p class={ "text-md", "max-w-[200px]", "md:max-w-[300px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Artist }</p>
 												if isMobile, ok := ctx.Value("is-mobile").(bool); ok && !isMobile {
 													<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Added on { song.AddedAt }</p>
 													if song.PlayTimes == 1 {
-														<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played once</p>
+														<p class={ "text-md", "max-w-[200px]", "md:max-w-[300px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played once</p>
 													} else if song.PlayTimes > 1 {
-														<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played { fmt.Sprint( song.PlayTimes) } times</p>
+														<p class={ "text-md", "max-w-[200px]", "md:max-w-[300px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played { fmt.Sprint( song.PlayTimes) } times</p>
 													}
 												}
 											</div>
@@ -135,9 +135,9 @@ templ songOptionsMobile(song entities.Song, playlistId string) {
 		<h3 class={ "text-lg", "font-medium" }>Details and options</h3>
 		<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Added on { song.AddedAt }</p>
 		if song.PlayTimes == 1 {
-			<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played once</p>
+			<p class={ "text-md", "max-w-[200px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played once</p>
 		} else if song.PlayTimes > 1 {
-			<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played { fmt.Sprint( song.PlayTimes) } times</p>
+			<p class={ "text-md", "max-w-[200px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played { fmt.Sprint( song.PlayTimes) } times</p>
 		}
 		<button
 			class={

From 5dafd796106e5e8a4318c1a8687a6e627d7e17f5 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 20 May 2024 02:13:35 +0300
Subject: [PATCH 06/13] chore(ytdl): clear to be downloaded array

---
 ytdl/main.py | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/ytdl/main.py b/ytdl/main.py
index 78ec0e7..09ad170 100644
--- a/ytdl/main.py
+++ b/ytdl/main.py
@@ -166,7 +166,7 @@ def download_songs_in_background(interval=1):
         time.sleep(interval)
 
 
-download_thread = Thread(target=download_songs_in_background, args=(5,))
+download_thread = Thread(target=download_songs_in_background, args=(1,))
 
 ## FastAPI Stuff
 
@@ -186,12 +186,10 @@ def on_startup():
 @app.on_event("shutdown")
 def on_shutdown():
     print("Stopping background download thread...")
-    global background_download_list
     background_download_list.release()
-    global download_thread
+    to_be_downloaded.release()
     download_thread.join()
     print("Closing MariaDB's connection...")
-    global conn
     conn.close()
 
 

From 4f243cb2268cfa05344370d5867081135ee29339 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 20 May 2024 02:50:21 +0300
Subject: [PATCH 07/13] chore(search): download results directly

---
 cmd/server/server.go            |  4 ++--
 handlers/pages/pages.go         |  6 ++++++
 services/playlists/playlists.go | 15 +++++++++------
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/cmd/server/server.go b/cmd/server/server.go
index 3d27a11..27a6511 100644
--- a/cmd/server/server.go
+++ b/cmd/server/server.go
@@ -42,7 +42,7 @@ func StartServer(staticFS embed.FS) error {
 	playlistSongsRepo := db.NewBaseDB[models.PlaylistSong](dbConn)
 
 	downloadService := download.New(songRepo)
-	playlistsService := playlists.New(playlistRepo, playlistOwnersRepo, playlistSongsRepo, downloadService)
+	playlistsService := playlists.New(playlistRepo, playlistOwnersRepo, playlistSongsRepo)
 	songsService := songs.New(playlistSongsRepo, playlistOwnersRepo, songRepo, playlistRepo, downloadService)
 
 	jwtUtil := jwt.NewJWTImpl()
@@ -67,7 +67,7 @@ func StartServer(staticFS embed.FS) error {
 	})
 	pagesHandler.Handle("/music/", http.StripPrefix("/music", http.FileServer(http.Dir(config.Env().YouTube.MusicDir))))
 
-	pagesRouter := pages.NewPagesHandler(profileRepo, playlistsService, jwtUtil, &search.ScraperSearch{})
+	pagesRouter := pages.NewPagesHandler(profileRepo, playlistsService, jwtUtil, &search.ScraperSearch{}, downloadService)
 	pagesHandler.HandleFunc("/", gHandler.OptionalAuthPage(pagesRouter.HandleHomePage))
 	pagesHandler.HandleFunc("/signup", gHandler.AuthPage(pagesRouter.HandleSignupPage))
 	pagesHandler.HandleFunc("/login", gHandler.AuthPage(pagesRouter.HandleLoginPage))
diff --git a/handlers/pages/pages.go b/handlers/pages/pages.go
index a899521..88a65e4 100644
--- a/handlers/pages/pages.go
+++ b/handlers/pages/pages.go
@@ -9,6 +9,7 @@ import (
 	"dankmuzikk/models"
 	"dankmuzikk/services/jwt"
 	"dankmuzikk/services/playlists"
+	"dankmuzikk/services/youtube/download"
 	"dankmuzikk/services/youtube/search"
 	"dankmuzikk/views/layouts"
 	"dankmuzikk/views/pages"
@@ -26,6 +27,7 @@ type pagesHandler struct {
 	playlistsService *playlists.Service
 	jwtUtil          jwt.Manager[jwt.Json]
 	ytSearch         search.Service
+	downloadService  *download.Service
 }
 
 func NewPagesHandler(
@@ -33,6 +35,7 @@ func NewPagesHandler(
 	playlistsService *playlists.Service,
 	jwtUtil jwt.Manager[jwt.Json],
 	ytSearch search.Service,
+	downloadService *download.Service,
 ) *pagesHandler {
 	return &pagesHandler{
 		profileRepo:      profileRepo,
@@ -151,6 +154,9 @@ func (p *pagesHandler) HandleSearchResultsPage(w http.ResponseWriter, r *http.Re
 		return
 	}
 
+	// TODO: move this call out of here
+	_ = p.downloadService.DownloadYoutubeSongsMetadata(results)
+
 	var songsInPlaylists map[string]string
 	var playlists []entities.Playlist
 	profileId, profileIdCorrect := r.Context().Value(handlers.ProfileIdKey).(uint)
diff --git a/services/playlists/playlists.go b/services/playlists/playlists.go
index b15f029..ac5d56e 100644
--- a/services/playlists/playlists.go
+++ b/services/playlists/playlists.go
@@ -4,7 +4,6 @@ import (
 	"dankmuzikk/db"
 	"dankmuzikk/entities"
 	"dankmuzikk/models"
-	"dankmuzikk/services/youtube/download"
 	"fmt"
 	"strings"
 	"time"
@@ -18,7 +17,6 @@ type Service struct {
 	repo               db.UnsafeCRUDRepo[models.Playlist]
 	playlistOwnersRepo db.CRUDRepo[models.PlaylistOwner]
 	playlistSongsRepo  db.UnsafeCRUDRepo[models.PlaylistSong]
-	downloadService    *download.Service
 }
 
 // New accepts a playlist repo, a playlist pwners, and returns a new instance to the playlists service.
@@ -26,9 +24,8 @@ func New(
 	repo db.UnsafeCRUDRepo[models.Playlist],
 	playlistOwnersRepo db.CRUDRepo[models.PlaylistOwner],
 	playlistSongsRepo db.UnsafeCRUDRepo[models.PlaylistSong],
-	downloadService *download.Service,
 ) *Service {
-	return &Service{repo, playlistOwnersRepo, playlistSongsRepo, downloadService}
+	return &Service{repo, playlistOwnersRepo, playlistSongsRepo}
 }
 
 // CreatePlaylist creates a new playlist with with provided details for the given account's profile.
@@ -217,8 +214,6 @@ func (p *Service) GetAll(ownerId uint) ([]entities.Playlist, error) {
 
 // TODO: fix this weird ass 3 return values
 func (p *Service) GetAllMappedForAddPopover(songs []entities.Song, ownerId uint) ([]entities.Playlist, map[string]string, error) {
-	_ = p.downloadService.DownloadYoutubeSongsMetadata(songs)
-
 	var dbPlaylists []models.Playlist
 	err := p.
 		repo.
@@ -238,6 +233,14 @@ func (p *Service) GetAllMappedForAddPopover(songs []entities.Song, ownerId uint)
 		return nil, nil, ErrUnauthorizedToSeePlaylist
 	}
 
+	gigaQuery := `SELECT song.yt_id, ps.song_id
+		FROM
+			playlist_songs ps
+		JOIN
+			songs song ON ps.song_id = song.id
+		WHERE ps.playlist_id = ?;`
+
+	_ = gigaQuery
 	mappedPlaylists := make(map[string]string)
 	usedPlaylists := make(map[string]bool)
 	for _, playlist := range dbPlaylists {

From 8231ff0dffd7eaac8ed29985926fb0276554d248 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 20 May 2024 02:51:33 +0300
Subject: [PATCH 08/13] fix(playlist): htmx target id

---
 views/components/playlist/popover.templ | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/views/components/playlist/popover.templ b/views/components/playlist/popover.templ
index 5486ffa..95249d8 100644
--- a/views/components/playlist/popover.templ
+++ b/views/components/playlist/popover.templ
@@ -32,7 +32,7 @@ templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPla
 							),
 						}
 						hx-swap="innerHTML"
-						hx-target={ fmt.Sprintf("#song-in-playlist-%s", playlist.PublicId) }
+						hx-target={ fmt.Sprintf("#song-in-playlist-%s-%s", playlist.PublicId, songId) }
 						hx-trigger="click"
 						data-loading-target="#loading"
 						data-loading-class-remove="hidden"
@@ -46,7 +46,7 @@ templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPla
 						}
 					>
 						<div
-							id={ fmt.Sprintf("song-in-playlist-%s", playlist.PublicId) }
+							id={ fmt.Sprintf("song-in-playlist-%s-%s", playlist.PublicId, songId) }
 						>
 							<div
 								class={

From 6530126fe8d9e7ca0fcced8984029768f5f4da72 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 20 May 2024 03:40:18 +0300
Subject: [PATCH 09/13] fix(search): song in playlists

---
 handlers/pages/pages.go                 | 12 +++++++-----
 services/playlists/playlists.go         | 26 +++++++++----------------
 views/components/playlist/popover.templ | 10 +++++-----
 views/pages/search_results.templ        |  2 +-
 4 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/handlers/pages/pages.go b/handlers/pages/pages.go
index 88a65e4..9323228 100644
--- a/handlers/pages/pages.go
+++ b/handlers/pages/pages.go
@@ -42,6 +42,7 @@ func NewPagesHandler(
 		playlistsService: playlistsService,
 		jwtUtil:          jwtUtil,
 		ytSearch:         ytSearch,
+		downloadService:  downloadService,
 	}
 }
 
@@ -154,14 +155,15 @@ func (p *pagesHandler) HandleSearchResultsPage(w http.ResponseWriter, r *http.Re
 		return
 	}
 
-	// TODO: move this call out of here
-	_ = p.downloadService.DownloadYoutubeSongsMetadata(results)
-
-	var songsInPlaylists map[string]string
+	if len(results) != 0 {
+		// TODO: move this call out of here
+		log.Info("downloading songs' meta data from search")
+		_ = p.downloadService.DownloadYoutubeSongsMetadata(results)
+	}
+	var songsInPlaylists map[string]bool
 	var playlists []entities.Playlist
 	profileId, profileIdCorrect := r.Context().Value(handlers.ProfileIdKey).(uint)
 	if profileIdCorrect {
-		log.Info("downloading songs' meta data from search")
 		playlists, songsInPlaylists, _ = p.playlistsService.GetAllMappedForAddPopover(results, profileId)
 	}
 
diff --git a/services/playlists/playlists.go b/services/playlists/playlists.go
index ac5d56e..1818aae 100644
--- a/services/playlists/playlists.go
+++ b/services/playlists/playlists.go
@@ -213,7 +213,7 @@ func (p *Service) GetAll(ownerId uint) ([]entities.Playlist, error) {
 }
 
 // TODO: fix this weird ass 3 return values
-func (p *Service) GetAllMappedForAddPopover(songs []entities.Song, ownerId uint) ([]entities.Playlist, map[string]string, error) {
+func (p *Service) GetAllMappedForAddPopover(songs []entities.Song, ownerId uint) ([]entities.Playlist, map[string]bool, error) {
 	var dbPlaylists []models.Playlist
 	err := p.
 		repo.
@@ -233,27 +233,19 @@ func (p *Service) GetAllMappedForAddPopover(songs []entities.Song, ownerId uint)
 		return nil, nil, ErrUnauthorizedToSeePlaylist
 	}
 
-	gigaQuery := `SELECT song.yt_id, ps.song_id
-		FROM
-			playlist_songs ps
-		JOIN
-			songs song ON ps.song_id = song.id
-		WHERE ps.playlist_id = ?;`
-
-	_ = gigaQuery
-	mappedPlaylists := make(map[string]string)
-	usedPlaylists := make(map[string]bool)
+	mappedPlaylists := make(map[string]bool)
 	for _, playlist := range dbPlaylists {
 		for _, song := range playlist.Songs {
-			mappedPlaylists[song.YtId] = playlist.PublicId
-			usedPlaylists[playlist.PublicId] = true
+			mappedPlaylists[song.YtId+"-"+playlist.PublicId] = true
 		}
 	}
-	for i := 0; i < len(dbPlaylists); i++ {
-		if usedPlaylists[dbPlaylists[i].PublicId] {
-			continue
+	for i, playlist := range dbPlaylists {
+		for _, song := range playlist.Songs {
+			if mappedPlaylists[song.YtId+"-"+dbPlaylists[0].PublicId] {
+				continue
+			}
+			mappedPlaylists[fmt.Sprintf("unmapped-%d", i)] = false
 		}
-		mappedPlaylists[fmt.Sprintf("unmapped-%d", i)] = dbPlaylists[i].PublicId
 	}
 
 	playlists := make([]entities.Playlist, len(dbPlaylists))
diff --git a/views/components/playlist/popover.templ b/views/components/playlist/popover.templ
index 95249d8..da9a51b 100644
--- a/views/components/playlist/popover.templ
+++ b/views/components/playlist/popover.templ
@@ -6,11 +6,11 @@ import (
 	"dankmuzikk/views/components/popover"
 )
 
-templ PlaylistsPopover(index int, songId string, playlists []entities.Playlist, songsInPlaylists map[string]string) {
+templ PlaylistsPopover(index int, songId string, playlists []entities.Playlist, songsInPlaylists map[string]bool) {
 	@popover.Popover(fmt.Sprint(index), "Add to playlist", popoverButton(), playlistsSelector(songId, playlists, songsInPlaylists))
 }
 
-templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPlaylists map[string]string) {
+templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPlaylists map[string]bool) {
 	<div class={ "min-w-[250px]", "bg-accent-trans-30", "backdrop-blur-md", "p-3", "rounded-[10px]", "text-secondary" }>
 		<h2 class={ "text-lg" }>Save this song to...</h2>
 		<div class={ "my-2" }></div>
@@ -28,7 +28,7 @@ templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPla
 								"/api/toggle-song-in-playlist?song-id=%s&playlist-id=%s&remove=%v",
 								songId,
 								playlist.PublicId,
-								playlist.PublicId == songsInPlaylists[songId],
+								songsInPlaylists[songId+"-"+playlist.PublicId],
 							),
 						}
 						hx-swap="innerHTML"
@@ -41,7 +41,7 @@ templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPla
 								"/api/toggle-song-in-playlist?song-id=%s&playlist-id=%s&remove=%v",
 								songId,
 								playlist.PublicId,
-								playlist.PublicId == songsInPlaylists[songId],
+								songsInPlaylists[songId+"-"+playlist.PublicId],
 							),
 						}
 					>
@@ -52,7 +52,7 @@ templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPla
 								class={
 									"w-[20px]", "h-[20px]", "rounded-sm", "border", "border-secondary",
 									map[string]bool{
-										"bg-secondary": playlist.PublicId == songsInPlaylists[songId],
+										"bg-secondary": songsInPlaylists[songId+"-"+playlist.PublicId],
 									},
 								}
 							></div>
diff --git a/views/pages/search_results.templ b/views/pages/search_results.templ
index bfd6777..2da46ad 100644
--- a/views/pages/search_results.templ
+++ b/views/pages/search_results.templ
@@ -5,7 +5,7 @@ import (
 	"dankmuzikk/entities"
 )
 
-templ SearchResults(results []entities.Song, playlists []entities.Playlist, songsInPlaylists map[string]string) {
+templ SearchResults(results []entities.Song, playlists []entities.Playlist, songsInPlaylists map[string]bool) {
 	<main class={ "w-full", "h-full", "flex", "justify-center" }>
 		<section
 			class={

From c93fa0cb967d7adaaf0995b87a9ef79e13895620 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 20 May 2024 03:40:46 +0300
Subject: [PATCH 10/13] chore(seeder): update calls

---
 cmd/seeder/seeder.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cmd/seeder/seeder.go b/cmd/seeder/seeder.go
index d933dcd..231d522 100644
--- a/cmd/seeder/seeder.go
+++ b/cmd/seeder/seeder.go
@@ -44,7 +44,7 @@ func SeedDb() error {
 	playlistSongsRepo = db.NewBaseDB[models.PlaylistSong](dbConn)
 	playlistOwnerRepo = db.NewBaseDB[models.PlaylistOwner](dbConn)
 
-	playlistService := playlistspkg.New(playlistRepo, playlistOwnerRepo, nil, nil)
+	playlistService := playlistspkg.New(playlistRepo, playlistOwnerRepo, nil)
 
 	pl, err := playlistService.GetAll(400)
 	if err != nil {

From 17f667a37afdda1a488706f61bc94fa4a7ced322 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 20 May 2024 03:52:22 +0300
Subject: [PATCH 11/13] fix(playlist): toggle song in playlist status

---
 handlers/apis/playlist.go               | 24 ++--------
 services/playlists/songs/songs.go       | 61 +++++++++----------------
 views/components/playlist/popover.templ |  6 +--
 3 files changed, 28 insertions(+), 63 deletions(-)

diff --git a/handlers/apis/playlist.go b/handlers/apis/playlist.go
index 397d6a4..c2dbb3f 100644
--- a/handlers/apis/playlist.go
+++ b/handlers/apis/playlist.go
@@ -69,31 +69,17 @@ func (p *playlistApi) HandleToggleSongInPlaylist(w http.ResponseWriter, r *http.
 		w.WriteHeader(http.StatusBadRequest)
 		return
 	}
-	removeSongFromPlaylist := r.URL.Query().Get("remove")
-	if removeSongFromPlaylist != "true" && removeSongFromPlaylist != "false" {
-		w.WriteHeader(http.StatusBadRequest)
-		return
-	}
-
-	var err error
-	switch removeSongFromPlaylist {
-	case "false":
-		err = p.songService.AddSongToPlaylist(songId, playlistId, profileId)
-	case "true":
-		err = p.songService.RemoveSongFromPlaylist(songId, playlistId, profileId)
-	}
 
+	added, err := p.songService.ToggleSongInPlaylist(songId, playlistId, profileId)
 	if err != nil {
 		w.WriteHeader(http.StatusInternalServerError)
 		log.Errorln(err)
 		return
 	}
 
-	// TODO: idk, this is ugly, but it works lol
-	switch removeSongFromPlaylist {
-	case "false":
-		w.Write([]byte("<div class=\"w-[20px] h-[20px] rounded-sm border border-secondary bg-secondary\"></div>"))
-	case "true":
-		w.Write([]byte("<div class=\"w-[20px] h-[20px] rounded-sm border border-secondary\"></div>"))
+	if added {
+		_, _ = w.Write([]byte("<div class=\"w-[20px] h-[20px] rounded-sm border border-secondary bg-secondary\"></div>"))
+	} else {
+		_, _ = w.Write([]byte("<div class=\"w-[20px] h-[20px] rounded-sm border border-secondary\"></div>"))
 	}
 }
diff --git a/services/playlists/songs/songs.go b/services/playlists/songs/songs.go
index 5ea0ac8..d7eb238 100644
--- a/services/playlists/songs/songs.go
+++ b/services/playlists/songs/songs.go
@@ -4,6 +4,7 @@ import (
 	"dankmuzikk/db"
 	"dankmuzikk/models"
 	"dankmuzikk/services/youtube/download"
+	"errors"
 )
 
 // Service represents songs in platlists management service,
@@ -33,38 +34,41 @@ func New(
 	}
 }
 
-// AddSongToPlaylist adds a given song to the given playlist,
-// checks if the actual song and playlist exist then adds the song to the given playlist,
+// ToggleSongInPlaylist adds/removes a given song to/from the given playlist,
+// checks if the actual song and playlist exist then adds/removes the song to/from the given playlist,
 // and returns an occurring error.
-// TODO: check playlist's owner :)
-func (s *Service) AddSongToPlaylist(songId, playlistPubId string, ownerId uint) error {
+func (s *Service) ToggleSongInPlaylist(songId, playlistPubId string, ownerId uint) (added bool, err error) {
 	playlist, err := s.playlistRepo.GetByConds("public_id = ?", playlistPubId)
 	if err != nil {
-		return err
+		return
 	}
 	_, err = s.playlistOwnerRepo.GetByConds("profile_id = ? AND playlist_id = ?", ownerId, playlist[0].Id)
 	if err != nil {
-		return err
+		return
 	}
 	song, err := s.songRepo.GetByConds("yt_id = ?", songId)
 	if err != nil {
-		return err
+		return
 	}
-
-	err = s.playlistSongRepo.Add(&models.PlaylistSong{
-		PlaylistId: playlist[0].Id,
-		SongId:     song[0].Id,
-	})
-	if err != nil {
-		return err
+	_, err = s.playlistSongRepo.GetByConds("playlist_id = ? AND song_id = ?", playlist[0].Id, song[0].Id)
+	if errors.Is(err, db.ErrRecordNotFound) {
+		err = s.playlistSongRepo.Add(&models.PlaylistSong{
+			PlaylistId: playlist[0].Id,
+			SongId:     song[0].Id,
+		})
+		if err != nil {
+			return
+		}
+		return true, s.downloadService.DownloadYoutubeSongQueue(songId)
+	} else {
+		return false, s.
+			playlistSongRepo.
+			Delete("playlist_id = ? AND song_id = ?", playlist[0].Id, song[0].Id)
 	}
-
-	return s.downloadService.DownloadYoutubeSongQueue(songId)
 }
 
 // IncrementSongPlays increases the song's play times in the given playlist.
 // Checks for the song and playlist first, yada yada...
-// TODO: check playlist's owner :)
 func (s *Service) IncrementSongPlays(songId, playlistPubId string, ownerId uint) error {
 	var playlist models.Playlist
 	err := s.
@@ -118,26 +122,3 @@ func (s *Service) IncrementSongPlays(songId, playlistPubId string, ownerId uint)
 		Update("play_times", ps.PlayTimes+1).
 		Error
 }
-
-// RemoveSongFromPlaylist removes a given song from the given playlist,
-// checks if the actual song and playlist exist then removes the song to the given playlist,
-// and returns an occurring error.
-// TODO: check playlist's owner :)
-func (s *Service) RemoveSongFromPlaylist(songId, playlistPubId string, ownerId uint) error {
-	playlist, err := s.playlistRepo.GetByConds("public_id = ?", playlistPubId)
-	if err != nil {
-		return err
-	}
-	_, err = s.playlistOwnerRepo.GetByConds("profile_id = ? AND playlist_id = ?", ownerId, playlist[0].Id)
-	if err != nil {
-		return err
-	}
-	song, err := s.songRepo.GetByConds("yt_id = ?", songId)
-	if err != nil {
-		return err
-	}
-
-	return s.
-		playlistSongRepo.
-		Delete("playlist_id = ? AND song_id = ?", playlist[0].Id, song[0].Id)
-}
diff --git a/views/components/playlist/popover.templ b/views/components/playlist/popover.templ
index da9a51b..5188e75 100644
--- a/views/components/playlist/popover.templ
+++ b/views/components/playlist/popover.templ
@@ -25,10 +25,9 @@ templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPla
 						class={ "flex", "gap-x-4", "items-center", "cursor-pointer" }
 						hx-put={
 							fmt.Sprintf(
-								"/api/toggle-song-in-playlist?song-id=%s&playlist-id=%s&remove=%v",
+								"/api/toggle-song-in-playlist?song-id=%s&playlist-id=%s",
 								songId,
 								playlist.PublicId,
-								songsInPlaylists[songId+"-"+playlist.PublicId],
 							),
 						}
 						hx-swap="innerHTML"
@@ -38,10 +37,9 @@ templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPla
 						data-loading-class-remove="hidden"
 						data-loading-path={
 							fmt.Sprintf(
-								"/api/toggle-song-in-playlist?song-id=%s&playlist-id=%s&remove=%v",
+								"/api/toggle-song-in-playlist?song-id=%s&playlist-id=%s",
 								songId,
 								playlist.PublicId,
-								songsInPlaylists[songId+"-"+playlist.PublicId],
 							),
 						}
 					>

From 0918eb96b66b6d3647f478a2a0c83214ca2b5781 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 20 May 2024 03:55:27 +0300
Subject: [PATCH 12/13] chore(home): add slow first load notice

---
 views/pages/index.templ | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/pages/index.templ b/views/pages/index.templ
index a68586a..e3466a5 100644
--- a/views/pages/index.templ
+++ b/views/pages/index.templ
@@ -16,7 +16,7 @@ templ Index() {
 			>
 				<h2 class={ "text-xl" }>What should you expect?</h2>
 				<p>
-					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.
+					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).
 					<br/>
 					More details&nbsp;
 					@navlink.NavLink("in about page", "", "/about")

From e3faba755af42cc76e63754a60a353b5fae8a0d5 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 20 May 2024 03:58:13 +0300
Subject: [PATCH 13/13] chore(seo): update beta's link title

---
 views/pages/index.templ | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/pages/index.templ b/views/pages/index.templ
index e3466a5..f25f66a 100644
--- a/views/pages/index.templ
+++ b/views/pages/index.templ
@@ -22,7 +22,7 @@ templ Index() {
 					@navlink.NavLink("in about page", "", "/about")
 					<br/>
 					<br/>
-					And you can check the beta features <a href="https://beta.dankmuzikk.com">here</a>
+					And you can check the beta features here <a href="https://beta.dankmuzikk.com">beta.dankmuzikk.com</a>
 					<br/>
 					<br/>
 					Happy danking 🎉✨