refactored: spotify component

Redskull-127 · Jul 9, 2024 · 5f89966 · 5f89966
1 parent 578d79b
commit 5f89966
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 127 deletions.
diff --git a/components/Root-Partials/index.tsx b/components/Root-Partials/index.tsx
@@ -1,22 +1,21 @@
 import Link from 'next/link';
-
 import { SpotifySelfApi, SpotifyType } from '@/lib/server/functions/spotify';
 import { Icons } from '../icons/icons';
 import { Discord, GitHub, Gmail, LinkedIn, X } from '../icons/AnimatedIcons';
-
 import SkillsJson from '@/lib/static/skills.json';
 import SkillModel from './skill/SkillModel';
-
 import { Settings as Controls } from '@/lib/client/functions/settings';
 import { GitHubAPI, GitHubType } from '@/lib/server/functions/github';
 import { ProjectLists } from './project/ProjectLists';
-import SpotifyComponent from './spotify/SpotifyComponent';
+import SpotifyComponent, {
+  SpotifyComponentError,
+} from './spotify/SpotifyComponent';
 import Avatar3D from './3D-avatar';
 import { getTotalVisits } from '@/lib/server/google/apis/search-analytics';
 
 export function HeroCard() {
   return (
-    <div className="max-xl:w-full xl:min-w-[25%] flex flex-col justify-end place-items-center h-80 shadow-lg shadow-[#248F68] rounded-2xl gap-5 bg-[#248F68] text-white">
+    <div className="max-xl:w-full xl:min-w-[25%] flex flex-col justify-end items-center h-80 shadow-lg shadow-[#248F68] rounded-2xl gap-5 bg-[#248F68] text-white">
       <Avatar3D />
       <div className="flex flex-col gap-2 justify-center items-center mb-14">
         <h1 className="max-xl:text-3xl text-4xl font-semibold font-sans">
@@ -32,7 +31,7 @@ export function Introduction() {
   return (
     <div
       id="introduction"
-      className=" flex flex-col w-full h-fit bg-muted text-muted-foreground rounded-2xl p-6 gap-2"
+      className="flex flex-col w-full h-fit bg-muted text-muted-foreground rounded-2xl p-6 gap-2"
     >
       <h1 className="text-2xl font-semibold">Introduction</h1>
       <p className="text-foreground font-medium">
@@ -73,21 +72,17 @@ export function QuickLinks() {
 
 export async function SpotifyCard() {
   const data: SpotifyType | Error | undefined = await SpotifySelfApi();
-  if (data instanceof Error) {
-    console.error(data);
-    return null;
-  }
-
-  if (data) {
-    return <SpotifyComponent {...data} />;
+  if (data instanceof Error || data === undefined || data === null) {
+    return <SpotifyComponentError />;
   }
+  return <SpotifyComponent {...data} />;
 }
 
 export function Skills() {
   return (
     <div
       id="skills"
-      className=" flex flex-col h-fit rounded-2xl bg-ternary-foreground p-6"
+      className="flex flex-col h-fit rounded-2xl bg-ternary-foreground p-6"
     >
       <h1 className="text-3xl font-semibold text-ternary">Skills</h1>
       <div className="inline-flex 2xl:flex-wrap py-[0.6rem] overflow-x-scroll">
@@ -119,73 +114,43 @@ export async function Projects() {
         Projects
       </h1>
       <div className="flex flex-col gap-3 overflow-hidden overflow-y-scroll">
-        {data.map((project, index) => {
-          return <ProjectLists key={index} {...project} />;
-        })}
+        {data.map((project, index) => (
+          <ProjectLists key={index} {...project} />
+        ))}
       </div>
     </div>
   );
 }
 
 export function AllPages() {
-  const Pages = [
-    {
-      name: 'Blogs',
-      href: '/blogs',
-      implemented: true,
-    },
-    {
-      name: 'Chat',
-      href: '/chat',
-      implemented: true,
-      id: 'chat',
-    },
-    {
-      name: 'Events',
-      href: '/events',
-      implemented: true,
-    },
-    {
-      name: 'Experience',
-      href: '/experience',
-      implemented: true,
-    },
-    {
-      name: 'Projects',
-      href: '/projects',
-      implemented: true,
-    },
-    {
-      name: 'Credits',
-      href: '/credits',
-      implemented: true,
-    },
+  const pages = [
+    { name: 'Blogs', href: '/blogs', implemented: true },
+    { name: 'Chat', href: '/chat', implemented: true, id: 'chat' },
+    { name: 'Events', href: '/events', implemented: true },
+    { name: 'Experience', href: '/experience', implemented: true },
+    { name: 'Projects', href: '/projects', implemented: true },
+    { name: 'Credits', href: '/credits', implemented: true },
   ];
+
   return (
     <div
       id="pages"
       className="max-xl:w-full flex flex-col bg-ternary-foreground 2xl:w-[16.7%] xl:w-[16%] h-[21.2rem] rounded-2xl pt-6 px-6 gap-5"
     >
       <h1 className="text-3xl font-semibold text-ternary">Pages</h1>
       <div className="flex flex-col gap-1 overflow-hidden overflow-y-scroll">
-        {Pages.map((page, index) => {
-          return (
-            <div
-              id={page.id}
-              key={index}
-              className="w-full border-b-2 flex p-2"
+        {pages.map((page, index) => (
+          <div id={page.id} key={index} className="w-full border-b-2 flex p-2">
+            <Link
+              href={page.implemented ? page.href : '/'}
+              passHref
+              className="flex text-foreground font-medium hover:text-ternary transition-all duration-300"
             >
-              <Link
-                href={page.implemented === true ? page.href : '/'}
-                passHref={true}
-                className="flex text-foreground font-medium hover:text-ternary transition-all duration-300"
-              >
-                {page.name}
-                <Icons.ArrowUpRight className="h-4" />
-              </Link>
-            </div>
-          );
-        })}
+              {page.name}
+              <Icons.ArrowUpRight className="h-4" />
+            </Link>
+          </div>
+        ))}
       </div>
     </div>
   );

diff --git a/components/Root-Partials/spotify/Audio.tsx b/components/Root-Partials/spotify/Audio.tsx
@@ -2,7 +2,6 @@
 import { useRef, useState, useEffect, useCallback } from 'react';
 import { Icons } from '../../icons/icons';
 import { toast } from 'sonner';
-import Link from 'next/link';
 import { SkipForward, Volume } from 'lucide-react';
 import { Slider } from '@/components/ui/slider';
 import {
@@ -19,12 +18,14 @@ import {
   HoverCardTrigger,
 } from '@/components/ui/hover-card';
 import { useCastContext } from '@/lib/client/providers/CastProvider';
+import clsx from 'clsx';
 
 type AudioButtonType = {
   AudioSRC: string;
   name: string;
   uri: string;
   image: string;
+  disabled?: boolean;
 };
 
 type AudioButtonProps = 'playing' | 'paused' | 'stopped';
@@ -177,6 +178,7 @@ export default function AudioButton(props: AudioButtonType) {
       </DropdownMenu>
 
       <button
+        disabled={props.disabled}
         onClick={() => {
           if (props.AudioSRC === null) {
             toast('Ah snap :(', {
@@ -227,11 +229,18 @@ export default function AudioButton(props: AudioButtonType) {
       </button>
 
       <SkipForward
-        onClick={async () => {
-          setPlaying('paused');
-          return await getNewSong();
-        }}
-        className="cursor-pointer h-5 w-5 "
+        onClick={
+          props.disabled
+            ? () => {}
+            : async () => {
+                setPlaying('paused');
+                return await getNewSong();
+              }
+        }
+        className={clsx(
+          'h-5 w-5',
+          props.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+        )}
       />
       <audio id="spotifyAudio" ref={audioRef} className="hidden"></audio>
     </div>

diff --git a/components/Root-Partials/spotify/SpotifyComponent.tsx b/components/Root-Partials/spotify/SpotifyComponent.tsx
@@ -42,3 +42,37 @@ export default async function SpotifyComponent(props: SpotifyType) {
     </div>
   );
 }
+
+export function SpotifyComponentError() {
+  return (
+    <div
+      id="spotify-card"
+      className=" flex flex-col justify-between h-80 rounded-2xl max-xl:w-full xl:max-w-[24%] 2xl:max-w-[25%] w-full gap-5 bg-ternary-foreground p-6"
+    >
+      <div className="flex justify-between items-center">
+        <Link
+          href={SocialMediaLinks.spotify.playlist}
+          target="_blank"
+          className="flex text-2xl font-semibold text-ternary select-none cursor-pointer transition-all duration-200 hover:text-foreground"
+        >
+          Spotify <Icons.ArrowUpRight />
+        </Link>
+      </div>
+      <div className="w-full flex flex-col justify-center items-center gap-3">
+        <SpotifyImage url="https://i2o.scdn.co/image/ab67706c0000cfa301def0302dc84acc2568170b" />
+        <div className="overflow-x-auto whitespace-nowrap w-full overflow-hidden flex justify-center items-center">
+          <MarqueeText text="No Song Playing" />
+        </div>
+      </div>
+      <div className="w-full flex justify-center items-center">
+        <AudioButton
+          disabled={true}
+          uri={''}
+          AudioSRC={''}
+          name={'No Song Playing'}
+          image="https://i2o.scdn.co/image/ab67706c0000cfa301def0302dc84acc2568170b"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/config.js b/config.js
@@ -0,0 +1,64 @@
+const SocialMediaLinks = require('./default-links').SocialMediaLinks;
+const SourceCodeLinks = require('./default-links').SourceCodeLinks;
+
+const redirects = [
+  {
+    source: '/github',
+    destination: SocialMediaLinks.github,
+    permanent: true,
+    basePath: false,
+  },
+  {
+    source: '/linkedin',
+    destination: SocialMediaLinks.linkedin,
+    permanent: true,
+    basePath: false,
+  },
+  {
+    source: '/twitter',
+    destination: SocialMediaLinks.twitter,
+    permanent: true,
+    basePath: false,
+  },
+  {
+    source: '/spotify',
+    destination: SocialMediaLinks.spotify.user,
+    permanent: true,
+    basePath: false,
+  },
+  {
+    source: '/discord',
+    destination: SocialMediaLinks.discord,
+    permanent: true,
+    basePath: false,
+  },
+  {
+    source: '/source-code',
+    destination: SourceCodeLinks.frontend,
+    permanent: true,
+    basePath: false,
+  },
+];
+
+const remotePatterns = [
+  {
+    protocol: 'https',
+    hostname: 'i.scdn.co',
+    pathname: '/image/**',
+  },
+  {
+    protocol: 'https',
+    hostname: 'i2o.scdn.co',
+    pathname: '/image/**',
+  },
+  {
+    protocol: 'https',
+    hostname: 'lh3.googleusercontent.com',
+    pathname: '/**',
+  },
+];
+
+module.exports = {
+  redirects,
+  remotePatterns,
+};
diff --git a/lib/server/functions/deep-song-scrap.ts b/lib/server/functions/deep-song-scrap.ts
@@ -22,6 +22,7 @@ const MakeRequest = async (song: string) => {
     return song;
   } catch (error) {
     console.error(error);
+    return new Error('Error: Could not find song');
   }
 };
 

diff --git a/lib/server/functions/spotify.ts b/lib/server/functions/spotify.ts
@@ -91,11 +91,16 @@ export async function getNewSong() {
   return revalidateTag('spotifyAPI');
 }
 
+export const getDeepScrapedSong = async (song: string) => {
+  const data = await DeepScarpSong(song);
+  return data;
+};
+
 export const getNowPlaying = async () => {
   const data = await makeRequest(NOW_PLAYING_URL);
   if (data.item) {
     if (data.item.preview_url === null) {
-      const preview = await DeepScarpSong(
+      const preview = await getDeepScrapedSong(
         `${data.item.name} ${data.item.artists[0].name}`,
       );
       return {
@@ -125,7 +130,7 @@ export const getRecentlyPlayed = async () => {
   if (data.items) {
     const random = Math.floor(Math.random() * data.items.length);
     if (data.items[random].track.preview_url === null) {
-      const preview = await DeepScarpSong(
+      const preview = await getDeepScrapedSong(
         `${data.items[random].track.name} ${data.items[random].track.artists[0].name}`,
       );
       return {