Merge pull request #24 from mbaraa/fix/songs-meta-from-search

Fix: Download meta data in search

README.md

@@ -21,7 +21,7 @@ _Note: this is a fling side-project that will die in a while so don't get your h
 
 IDK, it would be really nice of you to contribute, check the poorly written [CONTRIBUTING.md](/CONTRIBUTING.md) for more info.
 
-### Roadmap
+## Roadmap
 
 - [x] Search YouTube for music
 - [x] Web UI
@@ -33,6 +33,17 @@ IDK, it would be really nice of you to contribute, check the poorly written [CON
 - [ ] Write a better YouTube scraper (or try to fix the quota thing)
 - [ ] Refactor the code (never gonna happen)
 
+## Technologies used
+
+- **[Go](https://golang.org)**: Main programming language.
+- **[templ](https://templ.guide)**: The better [html/template](https://pkg.go.dev/html/template).
+- **[htmx](https://htmx.org)**: The front-end library of peace.
+- **[GORM](https://gorm.io)**: The fantastic ORM library for Golang.
+- **[MariaDB](https://mariadb.org)**: Relational database.
+- **[Python](https://python.org)**: Used for the YouTube download service.
+- **[yt-dlp](https://github.com/yt-dlp/yt-dlp)**: YouTube download helper.
+- **[minify](https://github.com/tdewolff/minify)**: Minify static text files.
+
 ## Run locally
 
 1. Clone the repo.
@@ -58,9 +69,12 @@ docker compose up
 
 ## Acknowledgements
 
-- The background was taken from dankpods.net
-- Frank’s original image was taken from dankpods.biz
+- **This project is not affiliated with YouTube or Google, or anyone to that matter in any sort of ways.**
+- The background was taken from [dankpods.net](https://dankpods.net)
+- Frank’s original image was taken from [dingusland.biz](https://dingusland.biz)
 - Colorscheme is inspired from [Dankpods](https://www.youtube.com/@DankPods)
-- templ was used to make this project’s views: MIT licensed by [Adrian Hesketh](https://github.com/a-h)
-- htmx was used to make this project’s client more dynamic: No licence but just wanted to say that I used htmx BTW
 - youtube-scrape was used to search videos without using the actual YouTube API (small quota): MIT licenses by [Herman Fassett](https://github.com/HermanFassett)
+
+---
+
+Made with 🧉 by [Baraa Al-Masri](https://mbaraa.com)

cmd/server/server.go

@@ -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)
+	pagesRouter := pages.NewPagesHandler(profileRepo, playlistsService, jwtUtil, &search.ScraperSearch{})
 	pagesHandler.HandleFunc("/", gHandler.OptionalAuthPage(pagesRouter.HandleHomePage))
 	pagesHandler.HandleFunc("/signup", gHandler.AuthPage(pagesRouter.HandleSignupPage))
 	pagesHandler.HandleFunc("/login", gHandler.AuthPage(pagesRouter.HandleLoginPage))
@@ -76,7 +76,7 @@ func StartServer(staticFS embed.FS) error {
 	pagesHandler.HandleFunc("/playlists", gHandler.AuthPage(pagesRouter.HandlePlaylistsPage))
 	pagesHandler.HandleFunc("/playlist/{playlist_id}", gHandler.AuthPage(pagesRouter.HandleSinglePlaylistPage))
 	pagesHandler.HandleFunc("/privacy", gHandler.NoAuthPage(pagesRouter.HandlePrivacyPage))
-	pagesHandler.HandleFunc("/search", gHandler.OptionalAuthPage(pagesRouter.HandleSearchResultsPage(&search.ScraperSearch{})))
+	pagesHandler.HandleFunc("/search", gHandler.OptionalAuthPage(pagesRouter.HandleSearchResultsPage))
 
 	///////////// APIs /////////////
 

handlers/pages/pages.go

@@ -25,14 +25,21 @@ type pagesHandler struct {
 	profileRepo      db.GetterRepo[models.Profile]
 	playlistsService *playlists.Service
 	jwtUtil          jwt.Manager[any]
+	ytSearch         search.Service
 }
 
 func NewPagesHandler(
 	profileRepo db.GetterRepo[models.Profile],
 	playlistsService *playlists.Service,
 	jwtUtil jwt.Manager[any],
+	ytSearch search.Service,
 ) *pagesHandler {
-	return &pagesHandler{profileRepo, playlistsService, jwtUtil}
+	return &pagesHandler{
+		profileRepo:      profileRepo,
+		playlistsService: playlistsService,
+		jwtUtil:          jwtUtil,
+		ytSearch:         ytSearch,
+	}
 }
 
 func (p *pagesHandler) HandleHomePage(w http.ResponseWriter, r *http.Request) {
@@ -134,31 +141,29 @@ func (p *pagesHandler) HandleProfilePage(w http.ResponseWriter, r *http.Request)
 	layouts.Default(pages.Profile(profile)).Render(r.Context(), w)
 }
 
-func (p *pagesHandler) HandleSearchResultsPage(ytSearch search.Service) http.HandlerFunc {
-	return func(w http.ResponseWriter, r *http.Request) {
-		query := r.URL.Query().Get("query")
-		results, err := ytSearch.Search(query)
-		if err != nil {
-			w.WriteHeader(http.StatusNotFound)
-			w.Write([]byte("not found"))
-			log.Errorln(err)
-			return
-		}
+func (p *pagesHandler) HandleSearchResultsPage(w http.ResponseWriter, r *http.Request) {
+	query := r.URL.Query().Get("query")
+	results, err := p.ytSearch.Search(query)
+	if err != nil {
+		w.WriteHeader(http.StatusNotFound)
+		w.Write([]byte("not found"))
+		log.Errorln(err)
+		return
+	}
 
-		var songsInPlaylists map[string]string
-		var playlists []entities.Playlist
-		profileId, profileIdCorrect := r.Context().Value(handlers.ProfileIdKey).(uint)
-		if profileIdCorrect {
-			log.Info("downloading songs from search")
-			playlists, songsInPlaylists, _ = p.playlistsService.GetAllMappedForAddPopover(results, profileId)
-		}
+	var songsInPlaylists map[string]string
+	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)
+	}
 
-		if handlers.IsNoLayoutPage(r) {
-			pages.SearchResults(results, playlists, songsInPlaylists).Render(r.Context(), w)
-			return
-		}
-		layouts.Default(pages.SearchResults(results, playlists, songsInPlaylists)).Render(r.Context(), w)
+	if handlers.IsNoLayoutPage(r) {
+		pages.SearchResults(results, playlists, songsInPlaylists).Render(r.Context(), w)
+		return
 	}
+	layouts.Default(pages.SearchResults(results, playlists, songsInPlaylists)).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleSignupPage(w http.ResponseWriter, r *http.Request) {

services/playlists/playlists.go

@@ -231,6 +231,8 @@ 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.
@@ -273,10 +275,5 @@ func (p *Service) GetAllMappedForAddPopover(songs []entities.Song, ownerId uint)
 		}
 	}
 
-	err = p.downloadService.DownloadYoutubeSongsMetadata(songs)
-	if err != nil {
-		return nil, nil, err
-	}
-
 	return playlists, mappedPlaylists, nil
 }

services/youtube/download/download.go

@@ -35,9 +35,6 @@ func (d *Service) DownloadYoutubeSong(req entities.Song) error {
 		log.Infof("The song with id %s is already downloaded\n", req.YtId)
 		return nil
 	}
-	if err != nil {
-		return err
-	}
 
 	resp, err := http.Get(fmt.Sprintf("%s/download/%s", config.Env().YouTube.DownloaderUrl, req.YtId))
 	if err != nil {

static/css/style.css

@@ -45,9 +45,6 @@
   }
 }
 
-.btn {
-}
-
 span,
 p,
 h1,
@@ -58,3 +55,11 @@ h5,
 h6 {
   font-family: "Ubuntu";
 }
+
+a {
+  text-decoration: underline;
+}
+
+a:hover {
+  text-decoration: none;
+}

views/components/header/header.templ

@@ -8,7 +8,7 @@ import (
 )
 
 templ homeLinkContainer() {
-	<div class={ "flex", "justify-center", "items-center", "flex-col", "md:flex-row", "gap-3", "h-min" }>
+	<div class={ "flex", "justify-center", "items-center", "flex-col", "md:flex-row", "gap-1", "h-min" }>
 		<img
 			width="55"
 			height="55"
@@ -21,27 +21,29 @@ templ homeLinkContainer() {
 }
 
 templ mobileHeader() {
-	<div class={ "md:hidden", "h-[250px]", "flex", "flex-col", "justify-between" }>
-		@navlink.LinkContainer("/about", "About", icons.About())
-		<div class={ "absolute", "top-[15px]", "right-[15px]" }>
+	<div class={ "md:hidden" }>
+		<div class={ "w-full", "flex", "justify-between", "items-center" }>
+			@navlink.LinkContainer("/about", "About", icons.About())
 			@themeswitch.ThemeSwitch()
 		</div>
-		<div class={ "font-Ubuntu", "text-secondary" }>
-			@navlink.LinkContainer("/", "Home", homeLinkContainer())
-		</div>
-		<div class={  }>
-			<p class={ "text-secondary", "font-Ubuntu", "text-xl" }>
-				if fullName, ok := ctx.Value("full-name").(string); ok {
-					Hi { fullName } 👋
-				} else {
-					Hiyo 👋
-				}
-				<br/>
-				Wanna play something?
-			</p>
-		</div>
-		<div class={  }>
-			@search.Search()
+		<div class={ "flex", "flex-col", "justify-between", "gap-y-3" }>
+			<div class={ "font-Ubuntu", "text-secondary" }>
+				@navlink.LinkContainer("/", "Home", homeLinkContainer())
+			</div>
+			<div>
+				<p class={ "text-secondary", "font-Ubuntu", "text-xl" }>
+					if fullName, ok := ctx.Value("full-name").(string); ok {
+						Hi { fullName } 👋
+					} else {
+						Hiyo 👋
+					}
+					<br/>
+					Wanna play something?
+				</p>
+			</div>
+			<div>
+				@search.Search()
+			</div>
 		</div>
 	</div>
 }
@@ -78,7 +80,7 @@ templ desktopHeader() {
 }
 
 templ Header() {
-	<header id="dank-header" class={ "bg-primary", "p-[20px]", "md:p-[10px]" }>
+	<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) {
 			@mobileHeader()

views/components/navlink/navlink.templ

@@ -4,7 +4,7 @@ templ NavLink(title, imageUrl, path string, showTilte ...bool) {
 	<a
 		href={ templ.SafeURL(path) }
 		title={ title }
-		class={ "cursor-pointer", "underline", "hover:no-underline" , "inline-block" }
+		class={ "inline-block" }
 		hx-get={ path + "?no_layout=true" }
 		hx-target="#main-contents"
 		hx-swap="innerHTML"
@@ -33,7 +33,6 @@ templ LinkContainer(path, title string, child templ.Component) {
 	<a
 		href={ templ.SafeURL(path) }
 		title={ title }
-		class={ "cursor-pointer" }
 		hx-get={ path + "?no_layout=true" }
 		hx-target="#main-contents"
 		hx-swap="innerHTML"

views/components/search/search.templ

@@ -1,7 +1,7 @@
 package search
 
 templ Search() {
-	<div class={ "!text-primary", "!font-Ubuntu", "w-[92vw]", "md:w-[300px]", "xl:w-[500px]" }>
+	<div class={ "!text-primary", "!font-Ubuntu", "w-full", "md:w-[300px]", "xl:w-[500px]" }>
 		<form
 			id="search-form"
 			class={ "w-full" }

views/pages/about.templ

@@ -20,7 +20,7 @@ templ About() {
 							width="200"
 							height="200"
 							class={ "w-[200px]", "h-[200px]", "rounded-[100px]" }
-							src="/static/images/logo.webp"
+							src="/static/images/logo-big.webp"
 							alt="DrankMuzikk Logo"
 						/>
 						<h2 class={ "text-3xl" }>DankMuzikk</h2>
@@ -37,29 +37,40 @@ templ About() {
 					<p>
 						This application is licensed under the GNU General Public License version 3 (GPLv3), that is, this application is free to use for any purpose, it’s source-code is available on GitHub here for any purpose needed to look at the code, any redestribution of the application has to be under GPLv3 including license and copyright notices.
 						<br/>
-						Full license is available <a class={ "underline" } href="https://github.com/mbaraa/dankmuzikk/blob/main/LICENSE" target="_blank">here</a>.
+						Full license is available <a href="https://github.com/mbaraa/dankmuzikk/blob/main/LICENSE" target="_blank">here</a>.
 					</p>
 				</section>
 				<section id="privacy" class={ "flex", "flex-col", "gap-y-1" }>
 					<h2 class={ "text-xl" }>Privacy</h2>
 					<p>
-						You can find details about privacy <a class={ "underline" } href="/privacy">here</a>.
+						You can find details about privacy <a href="/privacy">here</a>.
 						<br/>
-						TLDR; I don’t collect any data, not sure install uBlock and check trackers yourself or check the code on <a class={ "underline" } href="https://github.com/mbaraa/dankmuzikk" target="_blank">GitHub</a>.
+						TLDR; I don’t collect any data, not sure install uBlock and check trackers yourself or check the code on <a href="https://github.com/mbaraa/dankmuzikk" target="_blank">GitHub</a>.
 					</p>
 				</section>
+				<section id="technologies" class={ "flex", "flex-col", "gap-y-1" }>
+					<h2 class={ "text-xl" }>Technologies used</h2>
+					<ul class={ "list-disc", "ms-5" }>
+						<li><a target="_blank" href="https://golang.org">Go</a>: Main programming language.</li>
+						<li><a harget="_blank" href="https://templ.guide">templ</a>:  The better <a harget="_blank" href="https://pkg.go.dev/html/template">html/template</a>.</li>
+						<li><a harget="_blank" href="https://htmx.org">htmx</a>: The front-end library of peace.</li>
+						<li><a harget="_blank" href="https://gorm.io">GORM</a>: The fantastic ORM library for Golang.</li>
+						<li><a harget="_blank" href="https://mariadb.org">MariaDB</a>: Relational database.</li>
+						<li><a harget="_blank" href="https://python.org">Python</a>: Used for the YouTube download service.</li>
+						<li><a harget="_blank" href="https://github.com/yt-dlp/yt-dlp">yt-dlp]</a>: YouTube download helper.</li>
+						<li><a harget="_blank" href="https://github.com/tdewolff/minify">minify</a>: Minify static text files.</li>
+					</ul>
+				</section>
 				<section id="acknoledgements" class={ "flex", "flex-col", "gap-y-1" }>
 					<h2 class={ "text-xl" }>Acknoledgements</h2>
 					<ul class={ "list-disc", "ms-5" }>
 						<li>
-							<p class={ "font-bold" }>This product is not affiliated with YouTube or Google, or anyone to that matter in any sort of ways.</p>
+							<p class={ "font-bold" }>This project is not affiliated with YouTube or Google, or anyone to that matter in any sort of ways.</p>
 						</li>
-						<li>The background was taken from  <a class={ "underline" } href="https://dankpods.net" target="_blank">dankpods.net</a></li>
-						<li>Frank’s original image was taken from <a class={ "underline" } href="https://dingusland.biz" target="_blank">dingusland.biz</a></li>
-						<li>Colorscheme is inspired from  <a class={ "underline" } href="https://youtube.com/@Dankpods" target="_blank">&commat;Dankpods</a> </li>
-						<li>templ was used to make this project’s views: MIT licensed by  <a class={ "underline" } href="https://github.com/a-h" target="_blank">Adrian Hesketh</a>.</li>
-						<li>htmx was used to make this project’s client more dynamic: No licence but just wanted to say that I used <a class={ "underline" } href="https://htmx.org" target="_blank">htmx</a> BTW.</li>
-						<li>youtube-scrape was used to search videos without using the actual YouTube API (small quota): MIT licenses by <a class={ "underline" } href="https://github.com/HermanFassett" target="_blank">Herman Fassett</a>.</li>
+						<li>The background was taken from  <a href="https://dankpods.net" target="_blank">dankpods.net</a></li>
+						<li>Frank’s original image was taken from <a href="https://dingusland.biz" target="_blank">dingusland.biz</a></li>
+						<li>Colorscheme is inspired from  <a href="https://youtube.com/@Dankpods" target="_blank">&commat;Dankpods</a> </li>
+						<li>youtube-scrape was used to search videos without using the actual YouTube API (small quota): MIT licenses by <a href="https://github.com/HermanFassett" target="_blank">Herman Fassett</a>.</li>
 					</ul>
 				</section>
 			</section>

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 class={ "cursor-pointer", "underline", "hover:no-underline" } href="https://beta.dankmuzikk.com">here</a>
+					And you can check the beta features <a href="https://beta.dankmuzikk.com">here</a>
 					<br/>
 					<br/>
 					Happy danking 🎉✨

views/pages/privacy.templ

@@ -52,7 +52,7 @@ templ Privacy() {
 			</ul>
 			<p>Contact Us</p>
 			<p>
-				If you have any questions about this Privacy Policy, please contact me at: <a class={ "underline" } href="mailto:[email protected]">[email protected]</a>
+				If you have any questions about this Privacy Policy, please contact me at: <a href="mailto:[email protected]">[email protected]</a>
 			</p>
 		</section>
 	</main>

ytdl/main.py

@@ -116,21 +116,19 @@ def download_song(id: str) -> int:
 
         ## wait list
         while to_be_downloaded.exists(id):
-            print(f"the song with the yt id {id} is being downloaded in the background...")
             time.sleep(1)
             pass
 
-
-        print("preparing to download")
-
         ## download the stuff
         if song_exists(id):
             to_be_downloaded.remove(id)
             return 0
+
         to_be_downloaded.append(id)
         ytdl.download(f"https://www.youtube.com/watch?v={id}")
-        update_song_status(id)
         to_be_downloaded.remove(id)
+        update_song_status(id)
+
         return 0
     except DownloadError:
         return 1