Updates to lyrics view, showing writers credits

- Fetching writers from Genius (eg. "written by Dave Grohl") - New font PTSerif for lyrics - Playlist in sidebar now expand when dragging tracks over
basharovV · Jan 20, 2024 · a384d59 · a384d59
1 parent fe7a15c
commit a384d59
Show file tree

Hide file tree

Showing 11 changed files with 211 additions and 54 deletions.
diff --git a/public/fonts/PTSerif-Bold.ttf b/public/fonts/PTSerif-Bold.ttf
diff --git a/public/fonts/PTSerif-Regular.ttf b/public/fonts/PTSerif-Regular.ttf
diff --git a/src/App.d.ts b/src/App.d.ts
@@ -264,4 +264,5 @@ interface GetLyricsResponse {
 interface CurrentSongLyrics {
     songId: string;
     lyrics?: string;
+    writers?: string[];
 }
diff --git a/src/App.svelte b/src/App.svelte
@@ -32,7 +32,8 @@
     import MapView from "./lib/views/MapView.svelte";
     import WelcomeView from "./lib/views/WelcomeView.svelte";
     import { startMenuListener } from "./window/EventListener";
-
+    import 'overlayscrollbars/overlayscrollbars.css';
+    
     startMenuListener();
     startImportListener();
 
@@ -146,7 +147,7 @@
         unlistenFolderWatch();
     });
 
-    $: showCursorInfo = $draggedSongs.length > 0;
+    $: showCursorInfo = $draggedSongs.length > 0 && mouseX + mouseY > 0;
 </script>
 
 <!-- <svelte:body on:click={onPageClick} /> -->

diff --git a/src/app.css b/src/app.css
@@ -102,3 +102,19 @@ button:disabled {
     font-family: "Snake";
     src: url("/fonts/Snake.ttf") format("truetype");
 }
+
+@font-face {
+    font-family: "Lyrics";
+    src: url("/fonts/PTSerif-Regular.ttf") format("truetype");
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.hide-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.hide-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
diff --git a/src/data/LyricsGrabber.ts b/src/data/LyricsGrabber.ts
@@ -5,7 +5,12 @@ import type { GetLyricsResponse } from "../App";
 import { fetch } from "@tauri-apps/api/http";
 
 export async function getLyrics(songTitle: string, artist: string) {
+    let result = {
+        lyrics: null,
+        writers: []
+    }
     let geniusPage;
+
     const settings = get(userSettings);
     try {
         if (!settings.geniusApiKey) {
@@ -31,19 +36,33 @@ export async function getLyrics(songTitle: string, artist: string) {
         const hits = geniusResult.data?.response?.hits;
         if (hits?.filter(h => artist.toLowerCase() === h?.result?.artist_names?.toLowerCase()).length) {
             geniusPage = hits[0]?.result?.url;
+           let  songId = hits[0]?.result?.id;
+
+            const songResult = await fetch(
+                `https://api.genius.com/songs/${songId}`,
+                {
+                    method: "GET",
+                    headers: {
+                        "Accept": "application/json",
+                        "Authorization": `Bearer ${settings.geniusApiKey}`
+                    }
+                }
+            );
+            result.writers = songResult.data?.response?.song?.writer_artists?.map(w => w?.name);
+
         }
         console.log("geniusPage", geniusPage);
     } catch (err) {
         console.error("Error fetching from Genius" + err);
         throw new Error("Error: " + err);
     }
     if (geniusPage) {
-        const result = await invoke<GetLyricsResponse>("get_lyrics", {
+        const lyricsResult = await invoke<GetLyricsResponse>("get_lyrics", {
             event: {
                 url: geniusPage
             }
         });
-        return result?.lyrics;
+        result.lyrics = lyricsResult?.lyrics;
     }
-    return null;
+    return result;
 }
diff --git a/src/lib/library/Library.svelte b/src/lib/library/Library.svelte
@@ -1187,10 +1187,6 @@
                 animation-duration: 0.5s;
                 animation-iteration-count: infinite;
                 animation-delay: 0s;
-                -webkit-animation-name: shorteq;
-                -webkit-animation-duration: 0.5s;
-                -webkit-animation-iteration-count: infinite;
-                animation-delay: 0s;
             }
 
             .eq2 {
@@ -1200,10 +1196,6 @@
                 animation-duration: 0.5s;
                 animation-iteration-count: infinite;
                 animation-delay: 0.17s;
-                -webkit-animation-name: talleq;
-                -webkit-animation-duration: 0.5s;
-                -webkit-animation-iteration-count: infinite;
-                animation-delay: 0.17s;
             }
 
             .eq3 {
@@ -1213,10 +1205,6 @@
                 animation-duration: 0.5s;
                 animation-iteration-count: infinite;
                 animation-delay: 0.34s;
-                -webkit-animation-name: shorteq;
-                -webkit-animation-duration: 0.5s;
-                -webkit-animation-iteration-count: infinite;
-                animation-delay: 0.34s;
             }
         }
         p {