From 7cc8bc71725578f176a7e6e1e7606e7443c8a77e Mon Sep 17 00:00:00 2001
From: Gil Barbara <gilbarbara@gmail.com>
Date: Tue, 12 Nov 2024 01:17:03 -0300
Subject: [PATCH] Add the "preloadData" prop

- update tests
- update README
---
 README.md                                     |  22 ++-
 src/components/Devices.tsx                    |   1 -
 src/components/Info.tsx                       |   1 -
 src/constants.ts                              |   9 ++
 src/index.tsx                                 |  80 ++++++-----
 src/modules/getters.ts                        | 135 +++++++++++++++++-
 src/modules/helpers.ts                        |  52 +------
 src/modules/hooks.ts                          |   4 +-
 src/modules/spotify.ts                        |  85 +++++++++--
 src/types/common.ts                           |   6 +-
 test/__snapshots__/constants.spec.ts.snap     |  21 +++
 test/constants.spec.ts                        |  20 ++-
 test/fixtures/data.ts                         | 103 +++++++++++++
 test/index.spec.tsx                           |  32 ++++-
 .../__snapshots__/getters.spec.ts.snap        |  81 ++++++++++-
 test/modules/getters.spec.ts                  |  85 ++++++++++-
 test/modules/helpers.spec.ts                  |   8 +-
 test/modules/spotify.spec.ts                  |  67 ++++++++-
 vitest.config.mts                             |   4 +
 19 files changed, 701 insertions(+), 115 deletions(-)

diff --git a/README.md b/README.md
index 9df2d1d..ddd967a 100644
--- a/README.md
+++ b/README.md
@@ -219,6 +219,9 @@ Save the device selection.
 **play** `boolean`  
 Control the player's status.
 
+**preloadData** `boolean`  
+Preload the track data before playing.
+
 **showSaveIcon** `boolean` ▶︎ false  
 Display a Favorite button. It needs additional scopes in your token.
 
@@ -226,7 +229,7 @@ Display a Favorite button. It needs additional scopes in your token.
 Customize the player's appearance. Check `StylesOptions` in the [types](src/types/common.ts).
 
 **syncExternalDevice** `boolean` ▶︎ false  
-If there are no URIs and an external device is playing, use the external player context.
+Use the external player context if there are no URIs and an external device is playing.
 
 **syncExternalDeviceInterval** `number` ▶︎ 5  
 The time in seconds that the player will sync with external devices.
@@ -252,12 +255,24 @@ import { spotifyApi } from 'react-spotify-web-playback';
 
 **checkTracksStatus(token: string, tracks: string | string[]): Promise\<boolean[]>**
 
+**getAlbumTracks(token: string, id: string): Promise\<SpotifyApi.AlbumTracksResponse>**
+
+**getArtistTopTracks(token: string, id: string): Promise\<SpotifyApi.ArtistsTopTracksResponse>**
+
 **getDevices(token: string): Promise\<SpotifyApi.UserDevicesResponse>**
 
 **getPlaybackState(token: string): Promise\<SpotifyApi.CurrentlyPlayingObject | null>**
 
+**getPlaylistTracks(token: string, id: string): Promise\<SpotifyApi.PlaylistTrackResponse>**
+
 **getQueue(token: string): Promise\<SpotifyApi.UsersQueueResponse>**
 
+**getShow(token: string, id: string): Promise\<SpotifyApi.ShowObjectFull>**
+
+**getShowEpisodes(token: string, id: string, offset = 0): Promise\<SpotifyApi.ShowEpisodesResponse>**
+
+**getTrack(token: string, id: string): Promise\<SpotifyApi.TrackObjectFull>**
+
 **pause(token: string, deviceId?: string): Promise\<void>**
 
 **play(token: string, options: SpotifyPlayOptions): Promise\<void>**
@@ -293,7 +308,7 @@ interface SpotifyPlayOptions {
 
 You can customize the UI with a `styles` prop.  
 If you want a transparent player, you can use `bgColor: 'transparent'`.  
-Check all the available options [here](src/types/common.ts#L188).
+Check all the available options [here](src/types/common.ts#L195).
 
 ```tsx
 <SpotifyWebPlayer
@@ -310,7 +325,8 @@ Check all the available options [here](src/types/common.ts#L188).
 />
 ```
 
-![rswp-styles](https://gilbarbara.com/files/rswp-styles-e4060ddf.png)
+![rswp-styles](https://files.gilbarbara.dev/media/rswp-v2.png)
+
 
 ## Issues
 
diff --git a/src/components/Devices.tsx b/src/components/Devices.tsx
index 8751b8f..0cb8bea 100644
--- a/src/components/Devices.tsx
+++ b/src/components/Devices.tsx
@@ -189,7 +189,6 @@ export default function Devices(props: Props) {
   const handleClickSetDevice = (event: MouseEvent<HTMLElement>) => {
     const { dataset } = event.currentTarget;
 
-    /* istanbul ignore else */
     if (dataset.id) {
       onClickDevice(dataset.id);
 
diff --git a/src/components/Info.tsx b/src/components/Info.tsx
index bfde554..d725085 100644
--- a/src/components/Info.tsx
+++ b/src/components/Info.tsx
@@ -296,7 +296,6 @@ function Info(props: Props) {
   const title = getSpotifyLinkTitle(name, locale.title);
   let favorite;
 
-  /* istanbul ignore else */
   if (showSaveIcon && id) {
     favorite = (
       <button
diff --git a/src/constants.ts b/src/constants.ts
index dca96c2..621d458 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -6,6 +6,14 @@ export const ERROR_TYPE = {
   PLAYER: 'player',
 } as const;
 
+export const SPOTIFY_CONTENT_TYPE = {
+  ALBUM: 'album',
+  ARTIST: 'artist',
+  PLAYLIST: 'playlist',
+  SHOW: 'show',
+  TRACK: 'track',
+};
+
 export const STATUS = {
   ERROR: 'ERROR',
   IDLE: 'IDLE',
@@ -21,6 +29,7 @@ export const TYPE = {
   DEVICE: 'device_update',
   FAVORITE: 'favorite_update',
   PLAYER: 'player_update',
+  PRELOAD: 'preload_update',
   PROGRESS: 'progress_update',
   STATUS: 'status_update',
   TRACK: 'track_update',
diff --git a/src/index.tsx b/src/index.tsx
index c3dc230..51c5063 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,17 +3,17 @@ import { createRef, PureComponent, ReactNode } from 'react';
 import isEqual from '@gilbarbara/deep-equal';
 import memoize from 'memoize-one';
 
-import { getLocale, getMergedStyles, getSpotifyURIType } from '~/modules/getters';
 import {
-  convertTrack,
-  getAlbumImage,
+  getArrayOfStrings,
+  getItemImage,
+  getLocale,
+  getMergedStyles,
+  getPreloadData,
   getRepeatState,
-  getURIs,
-  loadSpotifyPlayer,
-  parseVolume,
-  round,
-  validateURI,
-} from '~/modules/helpers';
+  getSpotifyURIType,
+  getTrackInfo,
+} from '~/modules/getters';
+import { loadSpotifyPlayer, parseVolume, round, validateURI } from '~/modules/helpers';
 import {
   getDevices,
   getPlaybackState,
@@ -112,7 +112,6 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
       uris: undefined,
     };
 
-    /* istanbul ignore else */
     if (ids) {
       if (!ids.every(d => validateURI(d))) {
         return playOptions;
@@ -220,7 +219,7 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
       uris,
     } = this.props;
     const isReady = previousState.status !== STATUS.READY && status === STATUS.READY;
-    const playOptions = this.getPlayOptions(getURIs(uris));
+    const playOptions = this.getPlayOptions(getArrayOfStrings(uris));
 
     const canPlay = !!currentDeviceId && !!(playOptions.context_uri ?? playOptions.uris);
     const shouldPlay = isReady && (autoPlay || playProp);
@@ -228,7 +227,6 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
     if (canPlay && shouldPlay) {
       await this.togglePlay(true);
 
-      /* istanbul ignore else */
       if (!isPlaying) {
         this.updateState({ isPlaying: true });
       }
@@ -267,7 +265,7 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
       await this.updateSeekBar();
     }
 
-    if (previousState.track.id !== track.id && track.id) {
+    if (track.id && previousState.track.id !== track.id) {
       this.handleCallback({
         ...this.state,
         type: TYPE.TRACK,
@@ -303,7 +301,6 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
       if (syncExternalDevice && !uris) {
         const playerState = await getPlaybackState(this.token);
 
-        /* istanbul ignore else */
         if (playerState?.is_playing && playerState.device.id !== deviceId) {
           this.setExternalDevice(playerState.device.id ?? '');
         }
@@ -326,7 +323,6 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
   public async componentWillUnmount() {
     this.isMounted = false;
 
-    /* istanbul ignore else */
     if (this.player) {
       this.player.disconnect();
     }
@@ -409,7 +405,6 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
 
   private handleClickPrevious = async () => {
     try {
-      /* istanbul ignore else */
       if (this.isExternalPlayer) {
         await previous(this.token);
         this.syncTimeout = window.setTimeout(() => {
@@ -426,7 +421,6 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
 
   private handleClickNext = async () => {
     try {
-      /* istanbul ignore else */
       if (this.isExternalPlayer) {
         await next(this.token);
         this.syncTimeout = window.setTimeout(() => {
@@ -450,12 +444,10 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
     try {
       await setDevice(this.token, deviceId);
 
-      /* istanbul ignore else */
       if (persistDeviceSelection) {
         sessionStorage.setItem('rswpDeviceId', deviceId);
       }
 
-      /* istanbul ignore else */
       if (isUnsupported) {
         await this.syncDevice();
 
@@ -476,7 +468,6 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
 
     this.updateState({ isSaved: status });
 
-    /* istanbul ignore else */
     if (isSaved !== status) {
       this.handleCallback({
         ...this.state,
@@ -521,7 +512,6 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
     const { currentURI } = this.state;
 
     try {
-      /* istanbul ignore else */
       if (state) {
         const {
           paused,
@@ -538,10 +528,10 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
         if ((!currentURI || currentURI !== current_track.uri) && current_track) {
           trackState = {
             currentURI: current_track.uri,
-            nextTracks: next_tracks.map(convertTrack),
+            nextTracks: next_tracks.map(getTrackInfo),
             position: 0,
-            previousTracks: previous_tracks.map(convertTrack),
-            track: convertTrack(current_track),
+            previousTracks: previous_tracks.map(getTrackInfo),
+            track: getTrackInfo(current_track),
           };
         }
 
@@ -591,6 +581,10 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
       isInitializing: false,
       status: device_id ? STATUS.READY : STATUS.IDLE,
     });
+
+    if (device_id) {
+      await this.preload();
+    }
   };
 
   private handleResize = () => {
@@ -628,7 +622,6 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
     if (persistDeviceSelection) {
       const savedDeviceId = sessionStorage.getItem('rswpDeviceId');
 
-      /* istanbul ignore else */
       if (!savedDeviceId || !devices.some((d: SpotifyDevice) => d.id === savedDeviceId)) {
         sessionStorage.setItem('rswpDeviceId', currentDeviceId);
       } else {
@@ -698,12 +691,30 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
     return (currentDeviceId && currentDeviceId !== deviceId) || status === STATUS.UNSUPPORTED;
   }
 
+  private preload = async () => {
+    const { offset = 0, preloadData, uris } = this.props;
+
+    if (!preloadData) {
+      return;
+    }
+
+    const track = await getPreloadData(this.token, uris, offset);
+
+    if (track) {
+      this.updateState({ track }, () => {
+        this.handleCallback({
+          ...this.state,
+          type: TYPE.PRELOAD,
+        });
+      });
+    }
+  };
+
   private setExternalDevice = (id: string) => {
     this.updateState({ currentDeviceId: id, isPlaying: true });
   };
 
   private setVolume = async (volume: number) => {
-    /* istanbul ignore else */
     if (this.isExternalPlayer) {
       await setVolume(this.token, Math.round(volume * 100));
       await this.syncDevice();
@@ -729,13 +740,12 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
         throw new Error('No player');
       }
 
-      /* istanbul ignore else */
       if (playerState.item) {
         track = {
           artists: 'artists' in playerState.item ? playerState.item.artists : [],
           durationMs: playerState.item.duration_ms,
           id: playerState.item.id,
-          image: 'album' in playerState.item ? getAlbumImage(playerState.item.album) : '',
+          image: 'album' in playerState.item ? getItemImage(playerState.item.album) : '',
           name: playerState.item.name,
           uri: playerState.item.uri,
         };
@@ -806,9 +816,7 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
   private toggleProgressBar() {
     const { isPlaying } = this.state;
 
-    /* istanbul ignore else */
     if (isPlaying) {
-      /* istanbul ignore else */
       if (!this.playerProgressInterval) {
         this.playerProgressInterval = window.setInterval(
           this.updateSeekBar,
@@ -824,7 +832,7 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
   private toggleOffset = async () => {
     const { currentDeviceId } = this.state;
     const { offset, uris } = this.props;
-    const playOptions = this.getPlayOptions(getURIs(uris));
+    const playOptions = this.getPlayOptions(getArrayOfStrings(uris));
 
     if (typeof offset === 'number') {
       await play(this.token, { deviceId: currentDeviceId, offset, ...playOptions });
@@ -835,10 +843,9 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
     const { currentDeviceId, isPlaying, needsUpdate } = this.state;
     const { offset, uris } = this.props;
     const shouldInitialize = force || needsUpdate;
-    const playOptions = this.getPlayOptions(getURIs(uris));
+    const playOptions = this.getPlayOptions(getArrayOfStrings(uris));
 
     try {
-      /* istanbul ignore else */
       if (this.isExternalPlayer) {
         if (!isPlaying) {
           await play(this.token, {
@@ -890,7 +897,6 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
     const { progressMs, track } = this.state;
 
     try {
-      /* istanbul ignore else */
       if (this.isExternalPlayer) {
         let position = progressMs / track.durationMs;
 
@@ -903,7 +909,6 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
       } else if (this.player) {
         const state = await this.player.getCurrentState();
 
-        /* istanbul ignore else */
         if (state) {
           const progress = state.position;
           const position = Number(
@@ -922,12 +927,12 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
     }
   };
 
-  private updateState: typeof this.setState = state => {
+  private updateState: typeof this.setState = (state, callback) => {
     if (!this.isMounted) {
       return;
     }
 
-    this.setState(state);
+    this.setState(state, callback);
   };
 
   public render() {
@@ -964,7 +969,6 @@ class SpotifyWebPlayer extends PureComponent<Props, State> {
     };
 
     if (isReady) {
-      /* istanbul ignore else */
       if (!output.info) {
         output.info = (
           <Info
diff --git a/src/modules/getters.ts b/src/modules/getters.ts
index e0586aa..3f361a8 100644
--- a/src/modules/getters.ts
+++ b/src/modules/getters.ts
@@ -1,5 +1,22 @@
-import { TRANSPARENT_COLOR } from '~/constants';
-import { Locale, StylesOptions, StylesProps } from '~/types';
+/* eslint-disable camelcase */
+import { validateURI } from '~/modules/helpers';
+import {
+  getAlbumTracks,
+  getArtistTopTracks,
+  getPlaylistTracks,
+  getShow,
+  getShowEpisodes,
+  getTrack,
+} from '~/modules/spotify';
+
+import { SPOTIFY_CONTENT_TYPE, TRANSPARENT_COLOR } from '~/constants';
+import { IDs, Locale, RepeatState, SpotifyTrack, StylesOptions, StylesProps } from '~/types';
+
+export function getItemImage(item: { images: Spotify.Image[] }): string {
+  const maxWidth = Math.max(...item.images.map(d => d.width ?? 0));
+
+  return item.images.find(d => d.width === maxWidth)?.url ?? '';
+}
 
 export function getBgColor(bgColor: string, fallbackColor?: string): string {
   if (fallbackColor) {
@@ -29,7 +46,6 @@ export function getLocale(locale?: Partial<Locale>): Locale {
 export function getMergedStyles(styles?: StylesProps): StylesOptions {
   const mergedStyles = {
     activeColor: '#1cb954',
-    altColor: '#ccc',
     bgColor: '#fff',
     color: '#333',
     errorColor: '#ff0026',
@@ -52,6 +68,98 @@ export function getMergedStyles(styles?: StylesProps): StylesOptions {
   return mergedStyles;
 }
 
+export async function getPreloadData(
+  token: string,
+  uris: IDs,
+  offset: number,
+): Promise<SpotifyTrack | null> {
+  const parsedURIs = getArrayOfStrings(uris);
+  const uri = parsedURIs[offset];
+
+  if (!validateURI(uri)) {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error('PreloadData: Invalid URI', parsedURIs[offset]);
+    }
+
+    return null;
+  }
+
+  const [, type, id] = uri.split(':');
+
+  try {
+    switch (type) {
+      case SPOTIFY_CONTENT_TYPE.ALBUM: {
+        const { items } = await getAlbumTracks(token, id);
+        const track = await getTrack(token, items[offset].id);
+
+        return getTrackInfo(track);
+      }
+      case SPOTIFY_CONTENT_TYPE.ARTIST: {
+        const { tracks } = await getArtistTopTracks(token, id);
+
+        return getTrackInfo(tracks[offset]);
+      }
+      case SPOTIFY_CONTENT_TYPE.PLAYLIST: {
+        const { items } = await getPlaylistTracks(token, id);
+
+        if (items[offset]?.track) {
+          return getTrackInfo(items[offset]?.track);
+        }
+
+        return null;
+      }
+      case SPOTIFY_CONTENT_TYPE.SHOW: {
+        const show = await getShow(token, id);
+        const { items } = await getShowEpisodes(
+          token,
+          id,
+          show.total_episodes ? show.total_episodes - 1 : 0,
+        );
+
+        const episode = items?.[0] ?? {
+          duration_ms: 0,
+          id: show.id,
+          images: show.images,
+          name: show.name,
+          uri: show.uri,
+        };
+
+        return {
+          artists: [{ name: show.name, uri: show.uri }],
+          durationMs: episode.duration_ms,
+          id: episode.id,
+          image: getItemImage(episode),
+          name: episode.name,
+          uri: episode.uri,
+        };
+      }
+      default: {
+        const track = await getTrack(token, id);
+
+        return getTrackInfo(track);
+      }
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('PreloadData:', error);
+
+    return null;
+  }
+}
+
+export function getRepeatState(mode: number): RepeatState {
+  switch (mode) {
+    case 1:
+      return 'context';
+    case 2:
+      return 'track';
+    case 0:
+    default:
+      return 'off';
+  }
+}
+
 export function getSpotifyLink(uri: string): string {
   const [, type = '', id = ''] = uri.split(':');
 
@@ -67,3 +175,24 @@ export function getSpotifyURIType(uri: string): string {
 
   return type;
 }
+
+export function getTrackInfo(track: Spotify.Track | SpotifyApi.TrackObjectFull): SpotifyTrack {
+  const { album, artists, duration_ms, id, name, uri } = track;
+
+  return {
+    artists,
+    durationMs: duration_ms,
+    id: id ?? '',
+    image: getItemImage(album),
+    name,
+    uri,
+  };
+}
+
+export function getArrayOfStrings(ids: IDs): string[] {
+  if (!ids) {
+    return [];
+  }
+
+  return Array.isArray(ids) ? ids : [ids];
+}
diff --git a/src/modules/helpers.ts b/src/modules/helpers.ts
index 335e3c9..85393b3 100644
--- a/src/modules/helpers.ts
+++ b/src/modules/helpers.ts
@@ -1,44 +1,4 @@
-/* eslint-disable camelcase */
-import { RepeatState, SpotifyTrack } from '~/types';
-
-export function convertTrack(track: Spotify.Track): SpotifyTrack {
-  const { album, artists, duration_ms, id, name, uri } = track;
-
-  return {
-    artists,
-    durationMs: duration_ms,
-    id: id ?? '',
-    image: getAlbumImage(album),
-    name,
-    uri,
-  };
-}
-
-export function getAlbumImage(album: Spotify.Album) {
-  const maxWidth = Math.max(...album.images.map(d => d.width || 0));
-
-  return album.images.find(d => d.width === maxWidth)?.url || '';
-}
-
-export function getRepeatState(mode: number): RepeatState {
-  switch (mode) {
-    case 1:
-      return 'context';
-    case 2:
-      return 'track';
-    case 0:
-    default:
-      return 'off';
-  }
-}
-
-export function getURIs(uris: string | string[]): string[] {
-  if (!uris) {
-    return [];
-  }
-
-  return Array.isArray(uris) ? uris : [uris];
-}
+import { SPOTIFY_CONTENT_TYPE } from '~/constants';
 
 export function isNumber(value: unknown): value is number {
   return typeof value === 'number';
@@ -108,14 +68,14 @@ export function round(number: number, digits = 2) {
 }
 
 export function validateURI(input: string): boolean {
-  const validTypes = ['album', 'artist', 'playlist', 'show', 'track'];
-
-  /* istanbul ignore else */
   if (input && input.indexOf(':') > -1) {
     const [key, type, id] = input.split(':');
 
-    /* istanbul ignore else */
-    if (key === 'spotify' && validTypes.indexOf(type) >= 0 && id.length === 22) {
+    if (
+      key === 'spotify' &&
+      Object.values(SPOTIFY_CONTENT_TYPE).includes(type) &&
+      id.length === 22
+    ) {
       return true;
     }
   }
diff --git a/src/modules/hooks.ts b/src/modules/hooks.ts
index 210237a..db2f3b2 100644
--- a/src/modules/hooks.ts
+++ b/src/modules/hooks.ts
@@ -19,18 +19,18 @@ export function useMediaQuery(input: string): boolean {
 
     try {
       matchMedia.addEventListener('change', handleChange);
+      /* c8 ignore next 4 */
     } catch {
       // Safari isn't supporting matchMedia.addEventListener
-      /* istanbul ignore next */
       matchMedia.addListener(handleChange);
     }
 
     return () => {
       try {
         matchMedia.removeEventListener('change', handleChange);
+        /* c8 ignore next 4 */
       } catch {
         // Safari isn't supporting matchMedia.removeEventListener
-        /* istanbul ignore next */
         matchMedia.removeListener(handleChange);
       }
     };
diff --git a/src/modules/spotify.ts b/src/modules/spotify.ts
index 2410c91..85a49ba 100644
--- a/src/modules/spotify.ts
+++ b/src/modules/spotify.ts
@@ -1,10 +1,7 @@
 /* eslint-disable camelcase */
-import { RepeatState, SpotifyPlayOptions } from '~/types';
+import { IDs, RepeatState, SpotifyPlayOptions } from '~/types';
 
-export async function checkTracksStatus(
-  token: string,
-  tracks: string | string[],
-): Promise<boolean[]> {
+export async function checkTracksStatus(token: string, tracks: IDs): Promise<boolean[]> {
   const ids = Array.isArray(tracks) ? tracks : [tracks];
 
   return fetch(`https://api.spotify.com/v1/me/tracks/contains?ids=${ids}`, {
@@ -16,6 +13,32 @@ export async function checkTracksStatus(
   }).then(d => d.json());
 }
 
+export async function getAlbumTracks(
+  token: string,
+  id: string,
+): Promise<SpotifyApi.AlbumTracksResponse> {
+  return fetch(`https://api.spotify.com/v1/albums/${id}/tracks`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    method: 'GET',
+  }).then(d => d.json());
+}
+
+export async function getArtistTopTracks(
+  token: string,
+  id: string,
+): Promise<SpotifyApi.ArtistsTopTracksResponse> {
+  return fetch(`https://api.spotify.com/v1/artists/${id}/top-tracks`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    method: 'GET',
+  }).then(d => d.json());
+}
+
 export async function getDevices(token: string): Promise<SpotifyApi.UserDevicesResponse> {
   return fetch(`https://api.spotify.com/v1/me/player/devices`, {
     headers: {
@@ -44,6 +67,19 @@ export async function getPlaybackState(
   });
 }
 
+export async function getPlaylistTracks(
+  token: string,
+  id: string,
+): Promise<SpotifyApi.PlaylistTrackResponse> {
+  return fetch(`https://api.spotify.com/v1/playlists/${id}/tracks`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    method: 'GET',
+  }).then(d => d.json());
+}
+
 export async function getQueue(token: string): Promise<SpotifyApi.UsersQueueResponse> {
   return fetch(`https://api.spotify.com/v1/me/player/queue`, {
     headers: {
@@ -54,6 +90,40 @@ export async function getQueue(token: string): Promise<SpotifyApi.UsersQueueResp
   }).then(d => d.json());
 }
 
+export async function getShow(token: string, id: string): Promise<SpotifyApi.ShowObjectFull> {
+  return fetch(`https://api.spotify.com/v1/shows/${id}`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    method: 'GET',
+  }).then(d => d.json());
+}
+
+export async function getShowEpisodes(
+  token: string,
+  id: string,
+  offset = 0,
+): Promise<SpotifyApi.ShowEpisodesResponse> {
+  return fetch(`https://api.spotify.com/v1/shows/${id}/episodes?offset=${offset}`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    method: 'GET',
+  }).then(d => d.json());
+}
+
+export async function getTrack(token: string, id: string): Promise<SpotifyApi.TrackObjectFull> {
+  return fetch(`https://api.spotify.com/v1/tracks/${id}`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    method: 'GET',
+  }).then(d => d.json());
+}
+
 export async function next(token: string, deviceId?: string): Promise<void> {
   let query = '';
 
@@ -96,7 +166,6 @@ export async function play(
     const isArtist = context_uri.indexOf('artist') >= 0;
     let position;
 
-    /* istanbul ignore else */
     if (!isArtist) {
       position = { position: offset };
     }
@@ -132,7 +201,7 @@ export async function previous(token: string, deviceId?: string): Promise<void>
   });
 }
 
-export async function removeTracks(token: string, tracks: string | string[]): Promise<void> {
+export async function removeTracks(token: string, tracks: IDs): Promise<void> {
   const ids = Array.isArray(tracks) ? tracks : [tracks];
 
   await fetch(`https://api.spotify.com/v1/me/tracks`, {
@@ -161,7 +230,7 @@ export async function repeat(token: string, state: RepeatState, deviceId?: strin
   });
 }
 
-export async function saveTracks(token: string, tracks: string | string[]): Promise<void> {
+export async function saveTracks(token: string, tracks: IDs): Promise<void> {
   const ids = Array.isArray(tracks) ? tracks : [tracks];
 
   await fetch(`https://api.spotify.com/v1/me/tracks`, {
diff --git a/src/types/common.ts b/src/types/common.ts
index f086e65..53ee293 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -5,6 +5,7 @@ import { ERROR_TYPE, STATUS, TYPE } from '~/constants';
 import { SpotifyDevice, SpotifyTrack } from './spotify';
 
 export type ErrorType = (typeof ERROR_TYPE)[keyof typeof ERROR_TYPE];
+export type IDs = string | string[];
 export type Layout = 'responsive' | 'compact';
 export type RepeatState = 'off' | 'context' | 'track';
 export type Status = (typeof STATUS)[keyof typeof STATUS];
@@ -101,6 +102,10 @@ export interface Props {
    * Control the player's status.
    */
   play?: boolean;
+  /**
+   * Preload the track data before playing.
+   */
+  preloadData?: boolean;
   /**
    * Display a Favorite button. It needs additional scopes in your token.
    * @default false
@@ -188,7 +193,6 @@ export interface PlayOptions {
 
 export interface StylesOptions {
   activeColor: string;
-  altColor: string;
   bgColor: string;
   color: string;
   errorColor: string;
diff --git a/test/__snapshots__/constants.spec.ts.snap b/test/__snapshots__/constants.spec.ts.snap
index d8f8ef0..617bb9e 100644
--- a/test/__snapshots__/constants.spec.ts.snap
+++ b/test/__snapshots__/constants.spec.ts.snap
@@ -1,5 +1,25 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`ERROR_TYPE > should have all options 1`] = `
+{
+  "ACCOUNT": "account",
+  "AUTHENTICATION": "authentication",
+  "INITIALIZATION": "initialization",
+  "PLAYBACK": "playback",
+  "PLAYER": "player",
+}
+`;
+
+exports[`SPOTIFY_CONTENT_TYPE > should have all options 1`] = `
+{
+  "ALBUM": "album",
+  "ARTIST": "artist",
+  "PLAYLIST": "playlist",
+  "SHOW": "show",
+  "TRACK": "track",
+}
+`;
+
 exports[`STATUS > should have all options 1`] = `
 {
   "ERROR": "ERROR",
@@ -16,6 +36,7 @@ exports[`TYPE > should have all options 1`] = `
   "DEVICE": "device_update",
   "FAVORITE": "favorite_update",
   "PLAYER": "player_update",
+  "PRELOAD": "preload_update",
   "PROGRESS": "progress_update",
   "STATUS": "status_update",
   "TRACK": "track_update",
diff --git a/test/constants.spec.ts b/test/constants.spec.ts
index a776a98..2a9d814 100644
--- a/test/constants.spec.ts
+++ b/test/constants.spec.ts
@@ -1,4 +1,16 @@
-import { STATUS, TYPE } from '~/constants';
+import { ERROR_TYPE, SPOTIFY_CONTENT_TYPE, STATUS, TRANSPARENT_COLOR, TYPE } from '~/constants';
+
+describe('ERROR_TYPE', () => {
+  it('should have all options', () => {
+    expect(ERROR_TYPE).toMatchSnapshot();
+  });
+});
+
+describe('SPOTIFY_CONTENT_TYPE', () => {
+  it('should have all options', () => {
+    expect(SPOTIFY_CONTENT_TYPE).toMatchSnapshot();
+  });
+});
 
 describe('STATUS', () => {
   it('should have all options', () => {
@@ -6,6 +18,12 @@ describe('STATUS', () => {
   });
 });
 
+describe('TRANSPARENT_COLOR', () => {
+  it('should have all options', () => {
+    expect(TRANSPARENT_COLOR).toBe('rgba(0, 0, 0, 0)');
+  });
+});
+
 describe('TYPE', () => {
   it('should have all options', () => {
     expect(TYPE).toMatchSnapshot();
diff --git a/test/fixtures/data.ts b/test/fixtures/data.ts
index da8087d..2155d75 100644
--- a/test/fixtures/data.ts
+++ b/test/fixtures/data.ts
@@ -44,6 +44,109 @@ export const playerTrack = {
   uri: 'spotify:track:6KUjwoHktuX3du8laPVfO8',
 };
 
+export const playerArtistTopTracks = {
+  tracks: [playerTrack],
+};
+
+export const playerAlbumTracks = {
+  items: [playerTrack],
+};
+
+export const playerPlaylistTracks = {
+  items: [{ track: playerTrack }],
+};
+
+export const playerShow = {
+  description: 'A Tasty Treat Podcast for Web Developers',
+  html_description: 'A Tasty Treat Podcast for Web Developers',
+  explicit: false,
+  external_urls: {
+    spotify: 'https://open.spotify.com/show/4kYCRYJ3yK5DQbP5tbfZby',
+  },
+  href: 'https://api.spotify.com/v1/shows/4kYCRYJ3yK5DQbP5tbfZby?locale=en-US%2Cen%3Bq%3D0.9%2Cpt-BR%3Bq%3D0.8%2Cpt%3Bq%3D0.7',
+  id: '4kYCRYJ3yK5DQbP5tbfZby',
+  images: [
+    {
+      height: 640,
+      url: 'https://i.scdn.co/image/ab6765630000ba8ada4bfc6d17ba4b7f66e6012a',
+      width: 640,
+    },
+    {
+      height: 300,
+      url: 'https://i.scdn.co/image/ab67656300005f1fda4bfc6d17ba4b7f66e6012a',
+      width: 300,
+    },
+    {
+      height: 64,
+      url: 'https://i.scdn.co/image/ab6765630000f68dda4bfc6d17ba4b7f66e6012a',
+      width: 64,
+    },
+  ],
+  is_externally_hosted: false,
+  languages: ['en'],
+  media_type: 'mixed',
+  name: 'Syntax - Tasty Web Development Treats',
+  publisher: 'Wes Bos and Scott Tolinski',
+  type: 'show',
+  uri: 'spotify:show:4kYCRYJ3yK5DQbP5tbfZby',
+  total_episodes: 847,
+  episodes: {
+    href: 'https://api.spotify.com/v1/shows/4kYCRYJ3yK5DQbP5tbfZby/episodes?offset=0&limit=50&locale=en-US,en;q%3D0.9,pt-BR;q%3D0.8,pt;q%3D0.7',
+    limit: 50,
+    next: 'https://api.spotify.com/v1/shows/4kYCRYJ3yK5DQbP5tbfZby/episodes?offset=50&limit=50&locale=en-US,en;q%3D0.9,pt-BR;q%3D0.8,pt;q%3D0.7',
+    offset: 0,
+    previous: null,
+    total: 847,
+    items: [
+      {
+        audio_preview_url:
+          'https://podz-content.spotifycdn.com/audio/clips/0qbdMJHfDdYKgaV4fnOF8w/clip_2557400_2604150.mp3',
+        description:
+          ' Scott and Wes unpack their experiences as electric car owners, sharing the highs and lows of making the switch. From range anxiety to charging infrastructure and cost savings, they talk about everything from the tech perks to the unexpected challenges of driving electric. Show Notes   00:00 Welcome to Syntax!  02:11 Brought to you by Sentry.io.  03:14 What cars and how long have we had them.   Hyundai IONIQ 5.  Tesla Model Y Long Range.    10:41 Range and dealing with range anxiety.  11:45 The EPA specs.  12:24 Things that affect range.  14:46 Charging.  17:52  Charging levels.   17:56 Level 1 charging.  19:01 Level 2 charging.  19:39 Level 3 charging.  20:10 Charging standards.    21:51 Electric car pricing.  25:56  Regenerative braking.  27:27 General maintenance.  29:04 Pricing and expenses.  31:48 Machine Gun Kelly Effect.  36:46 Would you go completely electric?  38:46 Electric-only tech.  40:57 Buying a new EV.  42:21 Edison Motors website, TikTok.   Hit us up on Socials!  Syntax: X Instagram Tiktok LinkedIn Threads  Wes: X Instagram Tiktok LinkedIn Threads  Scott: X Instagram Tiktok LinkedIn Threads  Randy: X Instagram YouTube Threads',
+        html_description:
+          '<p> Scott and Wes unpack their experiences as electric car owners, sharing the highs and lows of making the switch. From range anxiety to charging infrastructure and cost savings, they talk about everything from the tech perks to the unexpected challenges of driving electric.</p> <h3>Show Notes</h3> <ul><li> <a href="#t&#61;00:00" rel="nofollow">00:00</a> Welcome to Syntax!</li><li> <a href="#t&#61;02:11" rel="nofollow">02:11</a> Brought to you by <a href="https://sentry.io/syntax" rel="nofollow">Sentry.io</a>.</li><li> <a href="#t&#61;03:14" rel="nofollow">03:14</a> What cars and how long have we had them. <ul><li> <a href="https://www.hyundai.com/uk/en/models/new-ioniq5.html" rel="nofollow">Hyundai IONIQ 5</a>.</li><li> <a href="https://ts.la/wes189166" rel="nofollow">Tesla Model Y Long Range</a>.</li></ul> </li><li> <a href="#t&#61;10:41" rel="nofollow">10:41</a> Range and dealing with range anxiety.</li><li> <a href="#t&#61;11:45" rel="nofollow">11:45</a> The <a href="https://www.epa.gov/" rel="nofollow">EPA</a> specs.</li><li> <a href="#t&#61;12:24" rel="nofollow">12:24</a> Things that affect range.</li><li> <a href="#t&#61;14:46" rel="nofollow">14:46</a> Charging.</li><li> <a href="#t&#61;17:52" rel="nofollow">17:52</a> <a href="https://www.transportation.gov/rural/ev/toolkit/ev-basics/charging-speeds" rel="nofollow"> Charging levels</a>. <ul><li> <a href="#t&#61;17:56" rel="nofollow">17:56</a> Level 1 charging.</li><li> <a href="#t&#61;19:01" rel="nofollow">19:01</a> Level 2 charging.</li><li> <a href="#t&#61;19:39" rel="nofollow">19:39</a> Level 3 charging.</li><li> <a href="#t&#61;20:10" rel="nofollow">20:10</a> <a href="https://chargehub.com/en/electric-car-charging-guide.html" rel="nofollow">Charging standards</a>.</li></ul> </li><li> <a href="#t&#61;21:51" rel="nofollow">21:51</a> Electric car pricing.</li><li> <a href="#t&#61;25:56" rel="nofollow">25:56</a> <a href="https://www.sciencedirect.com/science/article/abs/pii/B9780123973146000115" rel="nofollow"> Regenerative braking</a>.</li><li> <a href="#t&#61;27:27" rel="nofollow">27:27</a> General maintenance.</li><li> <a href="#t&#61;29:04" rel="nofollow">29:04</a> Pricing and expenses.</li><li> <a href="#t&#61;31:48" rel="nofollow">31:48</a> Machine Gun Kelly Effect.</li><li> <a href="#t&#61;36:46" rel="nofollow">36:46</a> Would you go completely electric?</li><li> <a href="#t&#61;38:46" rel="nofollow">38:46</a> Electric-only tech.</li><li> <a href="#t&#61;40:57" rel="nofollow">40:57</a> Buying a new EV.</li><li> <a href="#t&#61;42:21" rel="nofollow">42:21</a> Edison Motors <a href="https://www.edisonmotors.ca/" rel="nofollow">website</a>, <a href="https://www.tiktok.com/&#64;_edison.motors?lang&#61;en" rel="nofollow">TikTok</a>.</li></ul> <h3> Hit us up on Socials!</h3> <p> Syntax: <a href="https://twitter.com/syntaxfm" rel="nofollow">X</a> <a href="https://www.instagram.com/syntax_fm/" rel="nofollow">Instagram</a> <a href="https://www.tiktok.com/&#64;syntaxfm" rel="nofollow">Tiktok</a> <a href="https://www.linkedin.com/company/96077407/admin/feed/posts/" rel="nofollow">LinkedIn</a> <a href="https://www.threads.net/&#64;syntax_fm" rel="nofollow">Threads</a></p> <p> Wes: <a href="https://twitter.com/wesbos" rel="nofollow">X</a> <a href="https://www.instagram.com/wesbos/" rel="nofollow">Instagram</a> <a href="https://www.tiktok.com/&#64;wesbos" rel="nofollow">Tiktok</a> <a href="https://www.linkedin.com/in/wesbos/" rel="nofollow">LinkedIn</a> <a href="https://www.threads.net/&#64;wesbos" rel="nofollow">Threads</a></p> <p> Scott: <a href="https://twitter.com/stolinski" rel="nofollow">X</a> <a href="https://www.instagram.com/stolinski/" rel="nofollow">Instagram</a> <a href="https://www.tiktok.com/&#64;stolinski" rel="nofollow">Tiktok</a> <a href="https://www.linkedin.com/in/stolinski/" rel="nofollow">LinkedIn</a> <a href="https://www.threads.net/&#64;stolinski" rel="nofollow">Threads</a></p> <p> Randy: <a href="https://twitter.com/randyrektor" rel="nofollow">X</a> <a href="https://www.instagram.com/randyrektor/" rel="nofollow">Instagram</a> <a href="https://www.youtube.com/&#64;randyrektor" rel="nofollow">YouTube</a> <a href="https://www.threads.net/&#64;randyrektor" rel="nofollow">Threads</a></p>',
+        duration_ms: 2645609,
+        explicit: false,
+        external_urls: {
+          spotify: 'https://open.spotify.com/episode/5cTJgzcfadfcfPzvJAwJk1',
+        },
+        href: 'https://api.spotify.com/v1/episodes/5cTJgzcfadfcfPzvJAwJk1',
+        id: '5cTJgzcfadfcfPzvJAwJk1',
+        images: [
+          {
+            url: 'https://i.scdn.co/image/ab6765630000ba8ada4bfc6d17ba4b7f66e6012a',
+            height: 640,
+            width: 640,
+          },
+          {
+            url: 'https://i.scdn.co/image/ab67656300005f1fda4bfc6d17ba4b7f66e6012a',
+            height: 300,
+            width: 300,
+          },
+          {
+            url: 'https://i.scdn.co/image/ab6765630000f68dda4bfc6d17ba4b7f66e6012a',
+            height: 64,
+            width: 64,
+          },
+        ],
+        is_externally_hosted: false,
+        is_playable: true,
+        language: 'en',
+        languages: ['en'],
+        name: '846: Talking EVs: Range Anxiety, Charging, and Tech',
+        release_date: '2024-11-11',
+        release_date_precision: 'day',
+        resume_point: {
+          fully_played: false,
+          resume_position_ms: 0,
+        },
+        type: 'episode',
+        uri: 'spotify:episode:5cTJgzcfadfcfPzvJAwJk1',
+      },
+    ],
+  },
+};
+
 export const playerState = {
   bitrate: 256000,
   context: {
diff --git a/test/index.spec.tsx b/test/index.spec.tsx
index 790bfad..d2a10cf 100644
--- a/test/index.spec.tsx
+++ b/test/index.spec.tsx
@@ -5,7 +5,7 @@ import {
   fireEvent,
   render,
   screen,
-  waitFor as tlWaitFor,
+  waitFor as testingLibraryWaitFor,
   within,
 } from '@testing-library/react';
 
@@ -13,7 +13,7 @@ import * as helpers from '~/modules/helpers';
 
 import SpotifyWebPlayer, { Props } from '~/index';
 
-import { playbackState, playerState } from './fixtures/data';
+import { playbackState, playerAlbumTracks, playerState, playerTrack } from './fixtures/data';
 import { setBoundingClientRect } from './fixtures/helpers';
 
 vi.spyOn(helpers, 'loadSpotifyPlayer').mockImplementation(() => Promise.resolve());
@@ -26,7 +26,7 @@ let playerStatusResponse = playbackState;
 async function waitFor(fn: () => void) {
   vi.useRealTimers();
 
-  await tlWaitFor(fn);
+  await testingLibraryWaitFor(fn);
 
   vi.useFakeTimers();
 }
@@ -149,6 +149,14 @@ describe('SpotifyWebPlayer', () => {
         return Promise.resolve({
           body: JSON.stringify([false]),
         });
+      } else if (url.match(/album/)) {
+        return Promise.resolve({
+          body: JSON.stringify(playerAlbumTracks),
+        });
+      } else if (url.match(/track/)) {
+        return Promise.resolve({
+          body: JSON.stringify(playerTrack),
+        });
       } else if (url === 'https://api.spotify.com/v1/me/player/devices') {
         return Promise.resolve({
           body: JSON.stringify({
@@ -796,4 +804,22 @@ describe('SpotifyWebPlayer', () => {
       expect(screen.getByTestId('Controls')).toMatchSnapshot();
     });
   });
+
+  describe('With "preloadData" prop', () => {
+    it('should have preloaded the first track of the album', async () => {
+      await setup({ preloadData: true });
+
+      expect(fetchMock).toHaveBeenNthCalledWith(
+        2,
+        'https://api.spotify.com/v1/albums/7KvKuWUxxNPEU80c4i5AQk/tracks',
+        expect.any(Object),
+      );
+
+      expect(fetchMock).toHaveBeenNthCalledWith(
+        3,
+        'https://api.spotify.com/v1/tracks/6KUjwoHktuX3du8laPVfO8',
+        expect.any(Object),
+      );
+    });
+  });
 });
diff --git a/test/modules/__snapshots__/getters.spec.ts.snap b/test/modules/__snapshots__/getters.spec.ts.snap
index c12982a..22a45d5 100644
--- a/test/modules/__snapshots__/getters.spec.ts.snap
+++ b/test/modules/__snapshots__/getters.spec.ts.snap
@@ -19,7 +19,6 @@ exports[`getLocale > should return a merged locale 1`] = `
 exports[`getMergedStyles > should return a merged styles 1`] = `
 {
   "activeColor": "#1cb954",
-  "altColor": "#ccc",
   "bgColor": "rgba(0, 0, 0, 0)",
   "color": "#333",
   "errorColor": "#ff0026",
@@ -36,3 +35,83 @@ exports[`getMergedStyles > should return a merged styles 1`] = `
   "trackNameColor": "#333",
 }
 `;
+
+exports[`getPreloadData > should handle albums 1`] = `
+{
+  "artists": [
+    {
+      "name": "Marvin Gaye",
+      "uri": "spotify:artist:3koiLjNrgRTNbOwViDipeA",
+    },
+  ],
+  "durationMs": 151626,
+  "id": "6KUjwoHktuX3du8laPVfO8",
+  "image": "https://i.scdn.co/image/10b3bd8afaf3dfa1f302b8f58e059e9802144052",
+  "name": "Main Theme From Trouble Man",
+  "uri": "spotify:track:6KUjwoHktuX3du8laPVfO8",
+}
+`;
+
+exports[`getPreloadData > should handle artist 1`] = `
+{
+  "artists": [
+    {
+      "name": "Marvin Gaye",
+      "uri": "spotify:artist:3koiLjNrgRTNbOwViDipeA",
+    },
+  ],
+  "durationMs": 151626,
+  "id": "6KUjwoHktuX3du8laPVfO8",
+  "image": "https://i.scdn.co/image/10b3bd8afaf3dfa1f302b8f58e059e9802144052",
+  "name": "Main Theme From Trouble Man",
+  "uri": "spotify:track:6KUjwoHktuX3du8laPVfO8",
+}
+`;
+
+exports[`getPreloadData > should handle playlist 1`] = `
+{
+  "artists": [
+    {
+      "name": "Marvin Gaye",
+      "uri": "spotify:artist:3koiLjNrgRTNbOwViDipeA",
+    },
+  ],
+  "durationMs": 151626,
+  "id": "6KUjwoHktuX3du8laPVfO8",
+  "image": "https://i.scdn.co/image/10b3bd8afaf3dfa1f302b8f58e059e9802144052",
+  "name": "Main Theme From Trouble Man",
+  "uri": "spotify:track:6KUjwoHktuX3du8laPVfO8",
+}
+`;
+
+exports[`getPreloadData > should handle show 1`] = `
+{
+  "artists": [
+    {
+      "name": "Syntax - Tasty Web Development Treats",
+      "uri": "spotify:show:4kYCRYJ3yK5DQbP5tbfZby",
+    },
+  ],
+  "durationMs": 2645609,
+  "id": "5cTJgzcfadfcfPzvJAwJk1",
+  "image": "https://i.scdn.co/image/ab6765630000ba8ada4bfc6d17ba4b7f66e6012a",
+  "name": "846: Talking EVs: Range Anxiety, Charging, and Tech",
+  "uri": "spotify:episode:5cTJgzcfadfcfPzvJAwJk1",
+}
+`;
+
+exports[`getPreloadData > should handle track 1`] = `
+{
+  "artists": [
+    {
+      "name": "Marvin Gaye",
+      "uri": "spotify:artist:3koiLjNrgRTNbOwViDipeA",
+    },
+  ],
+  "durationMs": 151626,
+  "id": "6KUjwoHktuX3du8laPVfO8",
+  "image": "https://i.scdn.co/image/10b3bd8afaf3dfa1f302b8f58e059e9802144052",
+  "name": "Main Theme From Trouble Man",
+  "uri": "spotify:track:6KUjwoHktuX3du8laPVfO8",
+}
+`;
diff --git a/test/modules/getters.spec.ts b/test/modules/getters.spec.ts
index ae0d53e..93d3d43 100644
--- a/test/modules/getters.spec.ts
+++ b/test/modules/getters.spec.ts
@@ -2,6 +2,7 @@ import {
   getBgColor,
   getLocale,
   getMergedStyles,
+  getPreloadData,
   getSpotifyLink,
   getSpotifyLinkTitle,
   getSpotifyURIType,
@@ -9,6 +10,14 @@ import {
 
 import { TRANSPARENT_COLOR } from '~/constants';
 
+import {
+  playerAlbumTracks,
+  playerArtistTopTracks,
+  playerPlaylistTracks,
+  playerShow,
+  playerTrack,
+} from '../fixtures/data';
+
 describe('getBgColor', () => {
   it('should return the background color', () => {
     expect(getBgColor('#f04')).toBe('#f04');
@@ -31,6 +40,80 @@ describe('getMergedStyles', () => {
   });
 });
 
+describe('getPreloadData', () => {
+  beforeAll(() => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should handle albums', async () => {
+    fetchMock.mockResponseOnce(JSON.stringify(playerAlbumTracks));
+    fetchMock.mockResponseOnce(JSON.stringify(playerTrack));
+
+    await expect(
+      getPreloadData('token', 'spotify:album:7A0awCXkE1FtSU8B0qwOJQ', 0),
+    ).resolves.toMatchSnapshot();
+  });
+
+  it('should handle artist', async () => {
+    fetchMock.mockResponseOnce(JSON.stringify(playerArtistTopTracks));
+
+    await expect(
+      getPreloadData('token', 'spotify:artist:7A0awCXkE1FtSU8B0qwOJQ', 0),
+    ).resolves.toMatchSnapshot();
+  });
+
+  it('should handle playlist', async () => {
+    fetchMock.mockResponseOnce(JSON.stringify(playerPlaylistTracks));
+
+    await expect(
+      getPreloadData('token', 'spotify:playlist:7A0awCXkE1FtSU8B0qwOJQ', 0),
+    ).resolves.toMatchSnapshot();
+  });
+
+  it('should handle show', async () => {
+    fetchMock.mockResponseOnce(JSON.stringify(playerShow));
+    fetchMock.mockResponseOnce(JSON.stringify(playerShow.episodes));
+
+    await expect(
+      getPreloadData('token', 'spotify:show:7A0awCXkE1FtSU8B0qwOJQ', 0),
+    ).resolves.toMatchSnapshot();
+  });
+
+  it('should handle track', async () => {
+    fetchMock.mockResponseOnce(JSON.stringify(playerTrack));
+
+    await expect(
+      getPreloadData('token', 'spotify:track:7A0awCXkE1FtSU8B0qwOJQ', 0),
+    ).resolves.toMatchSnapshot();
+  });
+
+  it('should handle invalid type', async () => {
+    await expect(
+      getPreloadData('token', 'spotify:episode:7A0awCXkE1FtSU8B0qwOJQ', 0),
+    ).resolves.toBeNull();
+
+    expect(console.error).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle API errors', async () => {
+    fetchMock.mockRejectOnce(new Error('API error'));
+
+    await expect(
+      getPreloadData('token', 'spotify:track:7A0awCXkE1FtSU8B0qwOJQ', 0),
+    ).resolves.toBeNull();
+
+    expect(console.error).toHaveBeenCalledTimes(1);
+  });
+});
+
 describe('getSpotifyLink', () => {
   it('should return a Spotify link', () => {
     expect(getSpotifyLink('spotify:track:63DTXKZi7YdJ4tzGti1Dtr')).toBe(
@@ -55,7 +138,7 @@ describe('getSpotifyURIType', () => {
     ['spotify:track:0gkVD2tr14wCfJhqhdE94L', 'track'],
     ['spotify:user:gilbarbara', 'user'],
     ['spotify', ''],
-  ])('%p should return %p', (value, expected) => {
+  ])('%s should return %s', (value, expected) => {
     expect(getSpotifyURIType(value)).toBe(expected);
   });
 });
diff --git a/test/modules/helpers.spec.ts b/test/modules/helpers.spec.ts
index f063021..d0a44c0 100644
--- a/test/modules/helpers.spec.ts
+++ b/test/modules/helpers.spec.ts
@@ -36,7 +36,7 @@ describe('millisecondsToTime', () => {
     [63000, '1:03'],
     [3610000, '01:00:10'],
     [7123490, '01:58:43'],
-  ])('should convert %p to %p', (input, expected) => {
+  ])('should convert %d to %s', (input, expected) => {
     expect(millisecondsToTime(input)).toBe(expected);
   });
 });
@@ -48,7 +48,7 @@ describe('parseVolume', () => {
     ['100', 1],
     [3, 0.03],
     [20, 0.2],
-  ])('should parse %p to %p', (input, expected) => {
+  ])('should parse %d to %d', (input, expected) => {
     expect(parseVolume(input)).toBe(expected);
   });
 });
@@ -58,7 +58,7 @@ describe('round', () => {
     [10.1029, 1, 10.1],
     [34.0293, 2, 34.03],
     [79.0178, 3, 79.018],
-  ])('should convert %p with %p digits to %p', (input, digits, expected) => {
+  ])('should convert %d with %d digits to %d', (input, digits, expected) => {
     expect(round(input, digits)).toEqual(expected);
   });
 });
@@ -72,7 +72,7 @@ describe('validateURI', () => {
     ['spotify:show:5huEzXsf133dhbh57Np2tg', true],
     ['spotify:track:0gkVD2tr14wCfJhqhdE94L', true],
     ['spotify:user:gilbarbara', false],
-  ])('%p should return %p', (value, expected) => {
+  ])('%s should return %s', (value, expected) => {
     expect(validateURI(value)).toBe(expected);
   });
 });
diff --git a/test/modules/spotify.spec.ts b/test/modules/spotify.spec.ts
index c4bb611..af31b52 100644
--- a/test/modules/spotify.spec.ts
+++ b/test/modules/spotify.spec.ts
@@ -1,8 +1,14 @@
 import {
   checkTracksStatus,
+  getAlbumTracks,
+  getArtistTopTracks,
   getDevices,
   getPlaybackState,
+  getPlaylistTracks,
   getQueue,
+  getShow,
+  getShowEpisodes,
+  getTrack,
   next,
   pause,
   play,
@@ -16,12 +22,21 @@ import {
   shuffle,
 } from '~/modules/spotify';
 
-import { playbackState, queue } from '../fixtures/data';
+import {
+  playbackState,
+  playerAlbumTracks,
+  playerArtistTopTracks,
+  playerPlaylistTracks,
+  playerShow,
+  playerTrack,
+  queue,
+} from '../fixtures/data';
 
 const deviceId = 'df17372ghs982js892js';
 const token =
   'BQDoGCFtLXDAVgphhrRSPFHmhG9ZND3BLzSE5WVE-2qoe7_YZzRcVtZ6F7qEhzTih45GyxZLhp9b53A1YAPObAgV0MDvsbcQg-gZzlrIeQwwsWnz3uulVvPMhqssNP5HnE5SX0P0wTOOta1vneq2dL4Hvdko5WqvRivrEKWXCvJTPAFStfa5V5iLdCSglg';
-const trackUri = 'spotify:track:2ViHeieFA3iPmsBya2NDFl';
+const id = '2ViHeieFA3iPmsBya2NDFl';
+const trackUri = `spotify:track:${id}`;
 
 const mockDevices = {
   devices: [
@@ -42,6 +57,30 @@ describe('spotify', () => {
         return Promise.resolve({
           body: JSON.stringify([false]),
         });
+      } else if (url.match(/albums/)) {
+        return Promise.resolve({
+          body: JSON.stringify(playerAlbumTracks),
+        });
+      } else if (url.match(/artists/)) {
+        return Promise.resolve({
+          body: JSON.stringify(playerArtistTopTracks),
+        });
+      } else if (url.match(/playlist/)) {
+        return Promise.resolve({
+          body: JSON.stringify(playerPlaylistTracks),
+        });
+      } else if (url.match(/shows.*0/)) {
+        return Promise.resolve({
+          body: JSON.stringify(playerShow.episodes),
+        });
+      } else if (url.match(/shows.*/)) {
+        return Promise.resolve({
+          body: JSON.stringify(playerShow),
+        });
+      } else if (url.match(/tracks/)) {
+        return Promise.resolve({
+          body: JSON.stringify(playerTrack),
+        });
       }
 
       switch (url) {
@@ -73,6 +112,14 @@ describe('spotify', () => {
     await expect(checkTracksStatus(token, trackUri)).resolves.toEqual([false]);
   });
 
+  it('getAlbumTracks', async () => {
+    await expect(getAlbumTracks(token, id)).resolves.toEqual(playerAlbumTracks);
+  });
+
+  it('getArtistTopTracks', async () => {
+    await expect(getArtistTopTracks(token, id)).resolves.toEqual(playerArtistTopTracks);
+  });
+
   it('getDevices', async () => {
     await expect(getDevices(token)).resolves.toEqual(mockDevices);
   });
@@ -85,6 +132,22 @@ describe('spotify', () => {
     await expect(getQueue(token)).resolves.toEqual(queue);
   });
 
+  it('getPlaylistTracks', async () => {
+    await expect(getPlaylistTracks(token, id)).resolves.toEqual(playerPlaylistTracks);
+  });
+
+  it('getShow', async () => {
+    await expect(getShow(token, id)).resolves.toEqual(playerShow);
+  });
+
+  it('getShowEpisodes', async () => {
+    await expect(getShowEpisodes(token, id)).resolves.toEqual(playerShow.episodes);
+  });
+
+  it('getTrack', async () => {
+    await expect(getTrack(token, id)).resolves.toEqual(playerTrack);
+  });
+
   it('pause', async () => {
     await expect(pause(token)).resolves.toBeUndefined();
   });
diff --git a/vitest.config.mts b/vitest.config.mts
index e78a325..196aefe 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -9,6 +9,10 @@ export default defineConfig({
     coverage: {
       all: true,
       include: ['src/**/*.ts?(x)'],
+      exclude: [
+        'src/components/icons/DevicesMobile.tsx',
+        'src/components/icons/DevicesSpeaker.tsx',
+      ],
       reporter: ['text', 'lcov'],
       thresholds: {
         statements: 90,