♻️ entirely fixed track/tracklist OVER REQUESTING

components/AlbumLink/index.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+
+import { Track } from "@/types";
+
+import { cn } from "@/lib/utils";
+
+interface AlbumLinkProps {
+  albumId: string;
+  children: React.ReactNode;
+  className?: string;
+  isActive?: boolean;
+  onClick?: () => void;
+}
+
+const AlbumLink: React.FC<AlbumLinkProps> = ({
+  albumId,
+  children,
+  className,
+  isActive,
+  onClick,
+}) => {
+  return (
+    <div className="box-border min-w-0">
+      <Link
+        className={cn(
+          "block truncate text-left text-sm text-foreground hover:underline",
+          isActive && "text-green-primary",
+          className
+        )}
+        href={`/album/${albumId}`}
+        onClick={onClick}
+      >
+        {children}
+      </Link>
+    </div>
+  );
+};
+
+export default AlbumLink;

components/Player/CurrentTrack.tsx

@@ -2,10 +2,10 @@ import { usePlayerStore } from "@/store/usePlayerStore";
 
 import useTrack from "@/hooks/useTrack";
 
+import AlbumLink from "@/components/AlbumLink";
 import ArtistLink from "@/components/ArtistLink";
 import Cover from "@/components/Cover";
 import Draggable from "@/components/Draggable";
-import TrackLink from "@/components/TrackLink";
 
 function CurrentTrack() {
   const currentPlaybackState = usePlayerStore((s) => s.currentPlaybackState);
@@ -27,7 +27,7 @@ function CurrentTrack() {
 
           <div className="display-arrowicon max-w-[50vw] md:max-w-[30vw]">
             <div className="font-bold flex gap-3 transition-all hover:scale-105 sm:font-normal">
-              <TrackLink track={track} />
+              <AlbumLink albumId={track.album.id}>{track.name}</AlbumLink>
             </div>
             <div className="transition-all hover:scale-105 text-xs">
               <ArtistLink artists={track.artists} />

components/Player/OpenedPlayer.tsx

@@ -2,10 +2,10 @@ import { usePlayerStore } from "@/store/usePlayerStore";
 
 import useTrack from "@/hooks/useTrack";
 
+import AlbumLink from "@/components/AlbumLink";
 import ArtistLink from "@/components/ArtistLink";
 import Cover from "@/components/Cover";
 import LikeButton from "@/components/LikeButton";
-import TrackLink from "@/components/TrackLink";
 
 import { DrawerClose } from "@/components/ui/drawer";
 
@@ -34,7 +34,9 @@ function OpenedPlayer() {
           <div className="flex justify-between items-center w-full">
             <div>
               <DrawerClose asChild>
-                <TrackLink className="text-3xl" track={track} />
+                <AlbumLink className="text-3xl" albumId={track.album.id}>
+                  {track.name}
+                </AlbumLink>
               </DrawerClose>
 
               <DrawerClose asChild>

components/Track/TrackAlbumName.tsx

@@ -1,17 +1,19 @@
+import AlbumLink from "@/components/AlbumLink";
+
 import { useTrackContext } from "./context";
-import Link from "next/link";
 
-// TODO create <AlbumLink /> component
 const TrackAlbumName = () => {
   const { track } = useTrackContext();
 
+  if (!("album" in track)) return null;
+
   return (
-    <Link
-      href={`/album/${track.album.id}`}
-      className="truncate text-sm hover:underline"
+    <AlbumLink
+      albumId={track.album.id}
+      className="truncate text-sm w-fit hover:underline"
     >
       {track.album.name}
-    </Link>
+    </AlbumLink>
   );
 };
 

components/Track/TrackCover.tsx

@@ -5,6 +5,8 @@ import { useTrackContext } from "./context";
 function TrackCover() {
   const { track } = useTrackContext();
 
+  if (!("album" in track)) return null;
+
   return <Cover alt="Cover" size="small" src={track.album.images[0].url} />;
 }
 

components/Track/TrackDetails.tsx

@@ -1,7 +1,9 @@
 import { usePlayerStore } from "@/store/usePlayerStore";
 
+import { cn } from "@/lib/utils";
+
+import AlbumLink from "@/components/AlbumLink";
 import ArtistLink from "@/components/ArtistLink";
-import TrackLink from "@/components/TrackLink";
 import Visualizer from "@/components/Visualizer";
 
 import { useTrackContext } from "./context";
@@ -19,12 +21,27 @@ const TrackDetails: React.FC<TrackDetailsProps> = ({
   const isTrackActive = track.id === currentTrackId;
   const isPlaying = currentPlaybackState?.is_playing;
 
+  const isFullTrack = "album" in track;
+
   return (
     <div className="flex flex-col max-w-[45vw] md:max-w-80">
       <div className="flex items-baseline gap-2">
         {showVisualizer && isTrackActive && isPlaying && <Visualizer />}
 
-        <TrackLink isActive={isTrackActive} track={track} />
+        {isFullTrack ? (
+          <AlbumLink isActive={isTrackActive} albumId={track.album.id}>
+            {track.name}
+          </AlbumLink>
+        ) : (
+          <h2
+            className={cn(
+              "block truncate text-left text-sm text-foreground",
+              isTrackActive && "text-green-primary"
+            )}
+          >
+            {track.name}
+          </h2>
+        )}
       </div>
 
       <span className="flex gap-1 items-center font-light">

components/Track/index.tsx

@@ -1,3 +1,5 @@
+import { Track as TrackType } from "@/types";
+
 import usePlaybackControls from "@/hooks/usePlaybackControls";
 
 import { Button } from "@/components/ui/button";
@@ -14,7 +16,7 @@ import { TrackContext } from "./context";
 
 export interface TrackProps {
   children: React.ReactNode;
-  track: SpotifyApi.TrackObjectFull | null;
+  track: TrackType | null;
 }
 
 export interface TrackComposition {

components/TrackList/index.tsx

@@ -16,7 +16,9 @@ type TrackListOptions = {
 interface TrackListProps {
   options: TrackListOptions;
   title?: string;
-  tracks: (SpotifyApi.TrackObjectFull | null)[];
+  tracks:
+    | (SpotifyApi.TrackObjectFull | null)[]
+    | (SpotifyApi.TrackObjectSimplified | null)[];
 }
 
 const TrackList: React.FC<TrackListProps> = ({ options, title, tracks }) => {

components/Vinyl/index.tsx

@@ -14,8 +14,8 @@ import useTrack from "@/hooks/useTrack";
 import generateRGBString from "@/lib/generateRGBString";
 import { cn } from "@/lib/utils";
 
+import AlbumLink from "@/components/AlbumLink";
 import ArtistLink from "@/components/ArtistLink";
-import TrackLink from "@/components/TrackLink";
 import Timer from "@/components/Player/Timer";
 import { Button } from "@/components/ui/button";
 
@@ -143,7 +143,9 @@ const Vinyl = () => {
             />
             {track && (
               <div className="absolute bottom-[-100px] left-0">
-                <TrackLink className="text-4xl" track={track} />
+                <AlbumLink className="text-4xl" albumId={track.album.id}>
+                  {track.name}
+                </AlbumLink>
                 <ArtistLink className="text-3xl" artists={track.artists} />
               </div>
             )}

hooks/usePlaybackControls.ts

@@ -1,3 +1,5 @@
+import { Track } from "@/types";
+
 import { usePlayerStore } from "@/store/usePlayerStore";
 import { useTimerStore } from "@/store/useTimerStore";
 
@@ -8,8 +10,8 @@ const usePlaybackControls = () => {
   const { currentPlaybackState, setCurrentPlaybackState } = usePlayerStore();
   const setProgressMs = useTimerStore((s) => s.setProgressMs);
 
-  const playSong = async (track: SpotifyApi.TrackObjectFull) => {
-    if (!track) return;
+  const playSong = async (track: Track) => {
+    if (!("album" in track) || !track) return;
 
     const currentTrackId = currentPlaybackState?.item?.id;
 

types/index.d.ts

@@ -5,4 +5,6 @@ export type Queue = {
   queue: SpotifyApi.TrackObjectFull[];
 };
 
-export type Track = SpotifyApi.TrackObjectFull;
+export type Track =
+  | SpotifyApi.TrackObjectFull
+  | SpotifyApi.TrackObjectSimplified;