fix/stop audio on route change (#26)

* fix: stop audio on route change * fix: return original color on back to home * refactor: remove gradient mobile * chore: renamed events endpoint * chore: updated metadata
sirLisko · Sep 22, 2024 · 7421008 · 7421008
1 parent a156fa8
commit 7421008
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Check out a live demo: [https://gigplaylist.sirlisko.com/the%20strokes](http://g
 
 ## Overview
 
-GigPlayList is a web app that curates playlists for upcoming gigs based on setlists and artist data. Powered by [Next.js](https://nextjs.org/) and hosted on [Vercel](https://vercel.com/), it integrates with external APIs like SetListFM, Songkick, and Spotify to create tailored music experiences.
+GigPlayList is a web app that curates playlists for upcoming gigs based on setlists and artist data. Powered by [Next.js](https://nextjs.org/) and hosted on [Vercel](https://vercel.com/), it integrates with external APIs like MusicBrainz, SetListFM, Songkick, and Spotify to create tailored music experiences.
 
 ## Getting Started
 

diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css
@@ -28,16 +28,22 @@ body {
   display: block;
   position: absolute;
   background-image: url(../concert.webp);
+  background-size: cover;
+  background-position: center;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background-size: cover;
   z-index: 0;
   opacity: 0.03;
   filter: blur(3px);
   pointer-events: none;
 }
+@media screen and (max-width: 768px) {
+  .main-c::after {
+    display: none;
+  }
+}
 
 .sr-only {
   position: absolute !important;

diff --git a/components/Head/Head.tsx b/components/Head/Head.tsx
@@ -6,7 +6,7 @@ import Favicons from "./Favicons";
 const HeadSection = () => (
   <>
     <Head>
-      <title>GigPlayList - Prepare the playlist for your next gig!</title>
+      <title>GigPlayList - prepare the playlist for your next gig!</title>
       <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
       <meta name="author" content="Luca Lischetti" />
       <link
@@ -18,19 +18,22 @@ const HeadSection = () => (
         name="viewport"
         content="width=device-width, initial-scale=1, shrink-to-fit=no"
       />
-      <meta name="keywords" content="gigplaylist, music, gig" />
+      <meta
+        name="keywords"
+        content="gigplaylist, music, gig, setlists, playlist, concerts, spotify"
+      />
       <meta
         name="description"
-        content="GigPlayList set up you ready for your next Gig.It gives you the list of your favourite artists' most played tracks..."
+        content="GigPlayList curates playlists for upcoming gigs based on setlists and artist data."
       />
       <meta property="og:url" content="https://gigplaylist.sirlisko.com" />
       <meta
         property="og:description"
-        content="GigPlayList set up you ready for your next Gig. It gives you the list of your favourite artists' most played tracks."
+        content="GigPlayList curates playlists for upcoming gigs based on setlists and artist data."
       />
       <meta
         property="og:title"
-        content="GigPlayList - Prepare the playlist for your next gig!"
+        content="GigPlayList - prepare the playlist for your next gig!"
       />
       <script
         defer

diff --git a/components/Result/Result.tsx b/components/Result/Result.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 import Events from "components/Events/Events";
 import Tracks from "components/Tracks/Tracks";
@@ -16,6 +16,7 @@ interface Props {
 }
 
 const Result = ({ artist }: Props) => {
+  const [initialBaground] = useState<string>(document.body.style.background);
   const { artistData, isLoading: isLoadingArtist } = useArtistData(artist[0]);
   const { tracks, isLoading: isLoadingTracks } = useTracks(
     artist[0],
@@ -25,6 +26,12 @@ const Result = ({ artist }: Props) => {
 
   const from = `rgba(${artistData?.palette?.DarkVibrant.rgb.join(",")},100)`;
 
+  useEffect(() => {
+    return () => {
+      document.body.style.background = initialBaground;
+    };
+  }, []);
+
   useEffect(() => {
     document.body.style.background = from;
   }, [from]);

diff --git a/components/Tracks/Tracks.tsx b/components/Tracks/Tracks.tsx
@@ -46,17 +46,11 @@ const Tracks = ({ tracks, links, palette }: TracksProps) => {
         setCurrentTrack(null);
       }
     };
-
     router.events.on("routeChangeStart", handleRouteChange);
-
     return () => {
-      if (audio) {
-        audio.pause();
-        setAudio(null);
-      }
       router.events.off("routeChangeStart", handleRouteChange);
     };
-  }, [router.events]);
+  }, [router.events, audio]);
 
   useEffect(() => {
     setTimeout(() => setLoaded(true), 1);

diff --git a/pages/api/artists/[artistName]/events.ts → pages/api/artists/[artistName]/concerts.ts b/pages/api/artists/[artistName]/events.ts → pages/api/artists/[artistName]/concerts.ts
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -7,7 +7,7 @@ import Footer from "components/Footer/Footer";
 
 const Home = () => {
   return (
-    <main className="main-c min-h-screen bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 flex flex-col items-center justify-center p-6 text-white">
+    <main className="main-c min-h-screen sm:bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 flex flex-col items-center justify-center p-6 text-white">
       <Head />
       <h1 className="text-4xl font-bold mb-8 text-center">
         Prepare the playlist for your next gig!

diff --git a/public/humans.txt b/public/humans.txt
@@ -1,7 +1,6 @@
 /* AUTHOR */
   Author: Luca Lischetti
   Site: https://sirLisko.com
-  Mail: [email protected]
-  Twitter: @sirLisko
+  Mail: [email protected]
   Location: London, UK
-  From: Milan, I
+  From: Lake Maggiore, IT
diff --git a/services/events.ts b/services/events.ts
@@ -4,7 +4,7 @@ import { fetcher } from "utils/api";
 
 export const useEvents = (artist: string) => {
   const { data, error, isLoading } = useSWR(
-    `/api/artists/${artist}/events`,
+    `/api/artists/${artist}/concerts`,
     fetcher<Event[]>,
     { revalidateOnFocus: false, revalidateOnReconnect: false },
   );