Updated the nowplaying song setup

Author: navneetsharmaui

.env.example

@@ -5,6 +5,7 @@ VITE_CHUCK_NORRIS_API_LANG=en-US
 
 VITE_GITHUB_API_URL=https://api.chucknorris.io/jokes
 
+VITE_SPOTIFY_CLIENT_BASIC=
 VITE_SPOTIFY_CLIENT_ID=
 VITE_SPOTIFY_CLIENT_SECRET=
 VITE_SPOTIFY_REFRESH_TOKEN=

src/environments/environment.dev.ts

@@ -31,6 +31,7 @@ export const environment: ISveltekitStarterEnvironmentConfig<SVELTEKIT_STARTER_E
 		SESSION_KEY: import.meta.env.VITE_SESSION_KEY,
 	},
 	spotifyConfig: {
+		SPOTIFY_CLIENT_BASIC: import.meta.env.VITE_SPOTIFY_CLIENT_BASIC,
 		SPOTIFY_CLIENT_ID: import.meta.env.VITE_SPOTIFY_CLIENT_ID,
 		SPOTIFY_CLIENT_SECRET: import.meta.env.VITE_SPOTIFY_CLIENT_SECRET,
 		SPOTIFY_REFRESH_TOKEN: import.meta.env.VITE_SPOTIFY_REFRESH_TOKEN,

src/environments/environment.local.ts

@@ -28,6 +28,7 @@ export const environment: ISveltekitStarterEnvironmentConfig<SVELTEKIT_STARTER_E
 		SESSION_KEY: import.meta.env.VITE_SESSION_KEY,
 	},
 	spotifyConfig: {
+		SPOTIFY_CLIENT_BASIC: import.meta.env.VITE_SPOTIFY_CLIENT_BASIC,
 		SPOTIFY_CLIENT_ID: import.meta.env.VITE_SPOTIFY_CLIENT_ID,
 		SPOTIFY_CLIENT_SECRET: import.meta.env.VITE_SPOTIFY_CLIENT_SECRET,
 		SPOTIFY_REFRESH_TOKEN: import.meta.env.VITE_SPOTIFY_REFRESH_TOKEN,

src/environments/environment.prod.ts

@@ -28,6 +28,7 @@ export const environment: ISveltekitStarterEnvironmentConfig<SVELTEKIT_STARTER_E
 		SESSION_KEY: import.meta.env.VITE_SESSION_KEY,
 	},
 	spotifyConfig: {
+		SPOTIFY_CLIENT_BASIC: import.meta.env.VITE_SPOTIFY_CLIENT_BASIC,
 		SPOTIFY_CLIENT_ID: import.meta.env.VITE_SPOTIFY_CLIENT_ID,
 		SPOTIFY_CLIENT_SECRET: import.meta.env.VITE_SPOTIFY_CLIENT_SECRET,
 		SPOTIFY_REFRESH_TOKEN: import.meta.env.VITE_SPOTIFY_REFRESH_TOKEN,

src/environments/environment.qa.ts

@@ -29,6 +29,7 @@ export const environment: ISveltekitStarterEnvironmentConfig<SVELTEKIT_STARTER_E
 		SESSION_KEY: import.meta.env.VITE_SESSION_KEY,
 	},
 	spotifyConfig: {
+		SPOTIFY_CLIENT_BASIC: import.meta.env.VITE_SPOTIFY_CLIENT_BASIC,
 		SPOTIFY_CLIENT_ID: import.meta.env.VITE_SPOTIFY_CLIENT_ID,
 		SPOTIFY_CLIENT_SECRET: import.meta.env.VITE_SPOTIFY_CLIENT_SECRET,
 		SPOTIFY_REFRESH_TOKEN: import.meta.env.VITE_SPOTIFY_REFRESH_TOKEN,

src/environments/environment.ts

@@ -28,6 +28,7 @@ export const environment: ISveltekitStarterEnvironmentConfig<SVELTEKIT_STARTER_E
 		SESSION_KEY: import.meta.env.VITE_SESSION_KEY,
 	},
 	spotifyConfig: {
+		SPOTIFY_CLIENT_BASIC: import.meta.env.VITE_SPOTIFY_CLIENT_BASIC,
 		SPOTIFY_CLIENT_ID: import.meta.env.VITE_SPOTIFY_CLIENT_ID,
 		SPOTIFY_CLIENT_SECRET: import.meta.env.VITE_SPOTIFY_CLIENT_SECRET,
 		SPOTIFY_REFRESH_TOKEN: import.meta.env.VITE_SPOTIFY_REFRESH_TOKEN,

src/global.d.ts

@@ -76,6 +76,7 @@ interface ImportMetaEnv {
 	VITE_CHUCK_NORRIS_API_URL: string;
 	VITE_CHUCK_NORRIS_API_LANG: string;
 	VITE_GITHUB_API_URL: string;
+	VITE_SPOTIFY_CLIENT_BASIC: string;
 	VITE_SPOTIFY_CLIENT_ID: string;
 	VITE_SPOTIFY_CLIENT_SECRET: string;
 	VITE_SPOTIFY_REFRESH_TOKEN: string;

src/lib/models/interfaces/ispotify-config.interface.ts

@@ -1,4 +1,5 @@
 export interface ISpotifyConfig {
+	SPOTIFY_CLIENT_BASIC: string;
 	SPOTIFY_CLIENT_ID: string;
 	SPOTIFY_CLIENT_SECRET: string;
 	SPOTIFY_REFRESH_TOKEN: string;

src/lib/shared/components/now-playing/NowPlaying.svelte

@@ -55,6 +55,23 @@
 <script lang="ts">
 	import { nowPlayingSong } from '$stores';
 	import ExternalLink from '$ui/components/external-link/ExternalLink.svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import { getNowPlayingSong } from './_now-playing';
+
+	let clearSetTimeout: any;
+
+	const getCurrentlyPlayingSong = (): void => {
+		getNowPlayingSong().then((response) => nowPlayingSong.set(response));
+
+		clearSetTimeout = setTimeout(getCurrentlyPlayingSong, 120000);
+	};
+	onMount(async () => {
+		getCurrentlyPlayingSong();
+	});
+
+	onDestroy(() => {
+		clearTimeout(clearSetTimeout);
+	});
 </script>
 
 <div class="flex flex-row-reverse sm:flex-row mb-8 space-x-0 sm:space-x-2 w-full">

src/lib/shared/components/now-playing/_now-playing.ts

@@ -0,0 +1,35 @@
+import { getNowPlaying } from '$utils/spotify';
+
+export const getNowPlayingSong = async () => {
+	const response = await getNowPlaying();
+
+	if (response.status === 204 || response.status > 400) {
+		return {
+			isPlaying: false,
+		};
+	}
+
+	const song = await response.json();
+
+	if (song.item === null) {
+		return {
+			isPlaying: false,
+		};
+	}
+
+	const isPlaying = song.is_playing;
+	const title = song.item.name;
+	const artist = song.item.artists.map((_artist) => _artist.name).join(', ');
+	const album = song.item.album.name;
+	const albumImageUrl = song.item.album.images[0].url;
+	const songUrl = song.item.external_urls.spotify;
+
+	return {
+		album,
+		albumImageUrl,
+		artist,
+		isPlaying,
+		songUrl,
+		title,
+	};
+};