images fixes

MarcoMadera · Dec 17, 2023 · 5d379e4 · 5d379e4
1 parent a6f9f14
commit 5d379e4
Show file tree

Hide file tree

Showing 30 changed files with 425 additions and 165 deletions.
diff --git a/components/BrowseCategories/BrowseCategories.tsx b/components/BrowseCategories/BrowseCategories.tsx
@@ -3,7 +3,7 @@ import { ReactElement } from "react";
 import Link from "next/link";
 
 import { Grid, Heading } from "components";
-import { colors } from "utils";
+import { chooseImage, colors } from "utils";
 
 interface IBrowseCategoriesProps {
   categories: SpotifyApi.PagingObject<SpotifyApi.CategoryObject> | null;
@@ -23,7 +23,7 @@ export default function BrowseCategories({
             className="BrowseCategories-category"
           >
             {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={icons[0].url} alt={name} />
+            <img src={chooseImage(icons, 100).url} alt={name} />
             <Heading number={3} as="h2">
               {name}
             </Heading>

diff --git a/components/CardContent/CardContent.tsx b/components/CardContent/CardContent.tsx
@@ -4,8 +4,7 @@ import { decode } from "html-entities";
 import { useRouter } from "next/router";
 
 import { useContextMenu, useOnScreen } from "hooks";
-import { handleAsyncError } from "utils";
-import { getSiteUrl } from "utils/environment";
+import { chooseImage, handleAsyncError } from "utils";
 
 export enum CardType {
   SIMPLE = "simple",
@@ -96,14 +95,7 @@ export default function CardContent({
       ></div>
       {images && (
         // eslint-disable-next-line @next/next/no-img-element
-        <img
-          loading="lazy"
-          src={
-            images[0]?.url ??
-            (images[1]?.url || `${getSiteUrl()}/defaultSongCover.jpeg`)
-          }
-          alt={title}
-        />
+        <img loading="lazy" src={chooseImage(images, 300).url} alt={title} />
       )}
       <div>
         <strong>{title}</strong>

diff --git a/components/CardTrack/CardTrack.tsx b/components/CardTrack/CardTrack.tsx
@@ -24,6 +24,7 @@ import {
 import { ITrack } from "types/spotify";
 import {
   ContentType,
+  getIdFromUri,
   handlePlayCurrentTrackError,
   playCurrentTrack,
   templateReplace,
@@ -165,10 +166,17 @@ function CardTrack({
 
       const source = pageDetails?.uri;
       const isCollection = source?.split(":")?.[3];
-      setPlaylistPlayingId(isSingleTrack ? undefined : pageDetails?.id);
+      setPlaylistPlayingId(
+        isSingleTrack ? undefined : getIdFromUri(pageDetails?.uri, "id")
+      );
       setPlayedSource(
-        isCollection && pageDetails?.type && pageDetails?.id
-          ? `spotify:${pageDetails.type}:${pageDetails.id}`
+        isCollection &&
+          pageDetails?.type &&
+          getIdFromUri(pageDetails?.uri, "id")
+          ? `spotify:${pageDetails.type}:${getIdFromUri(
+              pageDetails?.uri,
+              "id"
+            )}`
           : source ?? track?.uri
       );
     } catch (error) {
@@ -216,7 +224,7 @@ function CardTrack({
         if (isPlaying && isTheSameAsCurrentlyPlaying) {
           player?.pause();
           setIsPlaying(false);
-          setPlaylistPlayingId(pageDetails?.id);
+          setPlaylistPlayingId(getIdFromUri(pageDetails?.uri, "id"));
         } else if (isPlayable) {
           if (isPremium) {
             (player as Spotify.Player)?.activateElement();

diff --git a/components/CardTrack/TrackDetails.tsx b/components/CardTrack/TrackDetails.tsx
@@ -7,7 +7,7 @@ import { CardType } from "./CardTrack";
 import { ArtistList, ExplicitSign } from "components";
 import { useOnScreen } from "hooks";
 import { ITrack } from "types/spotify";
-import { getTimeAgo, spanishCountries } from "utils";
+import { chooseImage, getTimeAgo, spanishCountries } from "utils";
 
 interface ITrackDetails {
   track: ITrack;
@@ -35,7 +35,7 @@ export function TrackDetails({
             //  eslint-disable-next-line @next/next/no-img-element
             <img
               loading="lazy"
-              src={track.album?.images[2]?.url ?? track.album?.images[1]?.url}
+              src={chooseImage(track.album?.images, 48).url}
               alt=""
               className="img"
               width="48"

diff --git a/components/CardTrack/TrackImage.tsx b/components/CardTrack/TrackImage.tsx
@@ -10,7 +10,7 @@ import {
   useTranslations,
 } from "hooks";
 import { ITrack } from "types/spotify";
-import { ContentType, getSiteUrl, templateReplace, ToastMessage } from "utils";
+import { chooseImage, ContentType, templateReplace, ToastMessage } from "utils";
 
 interface ITrackImage {
   mouseEnter: boolean;
@@ -97,11 +97,7 @@ export function TrackImage({
       <style jsx>{`
         button.playButton {
           background-image: ${type === "presentation"
-            ? `url(${
-                track.album?.images?.[2]?.url ??
-                track.album?.images?.[1]?.url ??
-                `${getSiteUrl()}/defaultSongCover.jpeg`
-              })`
+            ? `url(${chooseImage(track.album?.images, 50).url})`
             : "unset"};
         }
         button.playButton {

diff --git a/components/EditPlaylistDetails/EditPlaylistDetails.tsx b/components/EditPlaylistDetails/EditPlaylistDetails.tsx
@@ -147,7 +147,7 @@ export default function EditPlaylistDetails({
             aria-hidden="false"
             draggable="false"
             loading="eager"
-            src={imgUrl || "/images/playlist-default.png"}
+            src={imgUrl || "/defaultSongCover.jpeg"}
             alt="Playlist cover"
             id="edit-cover-image"
             sizes="(min-width: 1280px) 232px, 192px"

diff --git a/components/EpisodeCard/EpisodeCard.tsx b/components/EpisodeCard/EpisodeCard.tsx
@@ -13,8 +13,10 @@ import {
 } from "hooks";
 import { AsType } from "types/heading";
 import {
+  chooseImage,
   ContentType,
   formatTime,
+  getIdFromUri,
   getSiteUrl,
   getTimeAgo,
   handlePlayCurrentTrackError,
@@ -99,9 +101,10 @@ export default function EpisodeCard({
       const source = pageDetails?.uri;
       const isCollection = source?.split(":")?.[3];
       setPlaylistPlayingId(undefined);
+      const id = getIdFromUri(pageDetails?.uri, "id");
       setPlayedSource(
-        isCollection && pageDetails?.type && pageDetails?.id
-          ? `spotify:${pageDetails.type}:${pageDetails.id}`
+        isCollection && pageDetails?.type && id
+          ? `spotify:${pageDetails.type}:${id}`
           : source ?? item.uri
       );
     } catch (error) {
@@ -132,7 +135,7 @@ export default function EpisodeCard({
         <div className="coverImage">
           <div>
             {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={item.images?.[1]?.url} alt={item.name} />
+            <img src={chooseImage(item.images, 112).url} alt={item.name} />
           </div>
         </div>
         <div className="header">

diff --git a/components/FirstTrackContainer/FirstTrackContainer.tsx b/components/FirstTrackContainer/FirstTrackContainer.tsx
@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 import { ArtistList, Heading, PlayButton } from "components";
 import { useAuth, useContextMenu, useOnScreen } from "hooks";
 import { ITrack } from "types/spotify";
-import { getMainColorFromImage } from "utils";
+import { chooseImage, getMainColorFromImage } from "utils";
 
 interface FirstTrackContainerProps {
   preview?: string | null;
@@ -68,7 +68,7 @@ export default function FirstTrackContainer({
         >
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
-            src={track.album?.images[1].url}
+            src={chooseImage(track.album?.images, 100).url}
             width={100}
             height={100}
             alt=""
@@ -88,7 +88,7 @@ export default function FirstTrackContainer({
         <>
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
-            src={track.album?.images[1].url}
+            src={chooseImage(track.album?.images, 100).url}
             width={100}
             height={100}
             alt=""

diff --git a/components/NowPlaying/NowPlaying.tsx b/components/NowPlaying/NowPlaying.tsx
@@ -11,7 +11,7 @@ import {
   useToast,
   useTranslations,
 } from "hooks";
-import { ContentType, templateReplace, ToastMessage } from "utils";
+import { chooseImage, ContentType, templateReplace, ToastMessage } from "utils";
 import {
   checkEpisodesInLibrary,
   checkTracksInLibrary,
@@ -71,10 +71,7 @@ export default function NowPlaying(): ReactElement | null {
           <Link href={`/${type}/${id}`}>
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
-              src={
-                currentlyPlaying.album?.images[2]?.url ??
-                currentlyPlaying.album?.images[1]?.url
-              }
+              src={chooseImage(currentlyPlaying.album?.images, 64).url}
               alt={currentlyPlaying.album?.name}
               width={64}
               height={64}
@@ -84,10 +81,7 @@ export default function NowPlaying(): ReactElement | null {
           <>
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
-              src={
-                currentlyPlaying.album?.images[2]?.url ??
-                currentlyPlaying.album?.images[1]?.url
-              }
+              src={chooseImage(currentlyPlaying.album?.images, 64).url}
               alt={currentlyPlaying.album?.name}
               width={64}
               height={64}

diff --git a/components/PageHeader/PageHeader.tsx b/components/PageHeader/PageHeader.tsx
@@ -25,6 +25,7 @@ import { HeaderProps, HeaderType } from "types/pageHeader";
 import {
   formatNumber,
   formatTime,
+  getIdFromUri,
   getMainColorFromImage,
   getYear,
 } from "utils";
@@ -57,7 +58,7 @@ export default function PageHeader({
   const isPlaylist = type === HeaderType.Playlist;
   const isOwner = user?.id === pageDetails?.owner?.id;
   const enableEditPlaylist =
-    !!(pageDetails?.id && isPlaylist && isOwner) &&
+    !!(pageDetails?.uri && isPlaylist && isOwner) &&
     router.asPath.includes("/playlist/");
   const [pageHeaderImg, setPageHeaderImg] = useState(coverImg);
   const [pageHeaderTitle, setPageHeaderTitle] = useState(title);
@@ -134,7 +135,7 @@ export default function PageHeader({
                       title: "Edit Details",
                       modalElement: (
                         <EditPlaylistDetails
-                          id={pageDetails?.id}
+                          id={getIdFromUri(pageDetails.uri, "id")}
                           name={pageHeaderTitle}
                           description={pageHeaderDescription}
                           coverImg={pageHeaderImg}

diff --git a/components/RemoveTracksModal/RemoveTracksModal.tsx b/components/RemoveTracksModal/RemoveTracksModal.tsx
@@ -11,6 +11,7 @@ import {
   analyzePlaylist,
   ContentType,
   divideArray,
+  getIdFromUri,
   templateReplace,
   ToastMessage,
 } from "utils";
@@ -66,7 +67,7 @@ export default function RemoveTracksModal({
     setIsLoadingComplete(false);
 
     analyzePlaylist(
-      pageDetails.id,
+      getIdFromUri(pageDetails?.uri, "id"),
       pageDetails.tracks?.total,
       isLibrary,
       accessToken,
@@ -125,7 +126,11 @@ export default function RemoveTracksModal({
   async function handleRemoveTracksFromPlaylist() {
     const indexes = [...new Set([...corruptedSongsIdx, ...duplicateTracksIdx])];
     try {
-      await removeTracks(pageDetails?.id, indexes, pageDetails?.snapshot_id);
+      await removeTracks(
+        getIdFromUri(pageDetails?.uri, "id"),
+        indexes,
+        pageDetails?.snapshot_id
+      );
       setAllTracks((tracks) => {
         return tracks.filter((_, i) => {
           if (indexes.includes(i)) {

diff --git a/components/SideBar/SideBar.tsx b/components/SideBar/SideBar.tsx
@@ -13,6 +13,7 @@ import {
   useTranslations,
 } from "hooks";
 import {
+  chooseImage,
   ContentType,
   getAllMyPlaylists,
   templateReplace,
@@ -168,21 +169,15 @@ export default function SideBar(): ReactElement {
                 <Link href={`/${type}/${id}`}>
                   {/* eslint-disable-next-line @next/next/no-img-element */}
                   <img
-                    src={
-                      currentlyPlaying.album?.images[0]?.url ??
-                      currentlyPlaying.album?.images[1]?.url
-                    }
+                    src={chooseImage(currentlyPlaying.album?.images, 400).url}
                     alt={currentlyPlaying.album?.name}
                   />
                 </Link>
               ) : (
                 <>
                   {/* eslint-disable-next-line @next/next/no-img-element */}
                   <img
-                    src={
-                      currentlyPlaying.album?.images[0]?.url ??
-                      currentlyPlaying.album?.images[1]?.url
-                    }
+                    src={chooseImage(currentlyPlaying.album?.images, 400).url}
                     alt={currentlyPlaying.album?.name}
                   />
                 </>

diff --git a/components/SingleTrackCard/SingleTrackCard.tsx b/components/SingleTrackCard/SingleTrackCard.tsx
@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 import { PlayButton } from "components";
 import { useContextMenu, useHeader, useSpotify } from "hooks";
 import { ITrack } from "types/spotify";
-import { getMainColorFromImage } from "utils";
+import { chooseImage, getMainColorFromImage } from "utils";
 
 interface ISingleTrackCard {
   track: ITrack;
@@ -47,7 +47,7 @@ export default function SingleTrackCard({
     >
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
-        src={track.album?.images[0].url}
+        src={chooseImage(track.album?.images, 80).url}
         alt={track.name}
         id={`cover-image-${track.id ?? ""}`}
       />

diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx
@@ -9,6 +9,7 @@ import { DisplayInFullScreen } from "types/spotify";
 import {
   calculateBannerOpacity,
   calculateHeaderOpacity,
+  chooseImage,
   isFullScreen,
   isServer,
   setOpacityStyles,
@@ -133,7 +134,10 @@ export default function TopBar({ appRef }: TopBarProps): ReactElement {
             </a>
           ) : null}
           {user ? (
-            <UserWidget name={user.display_name} img={user.images?.[0]?.url} />
+            <UserWidget
+              name={user.display_name}
+              img={chooseImage(user.images, 40).url}
+            />
           ) : (
             <div className="userWidget"></div>
           )}

diff --git a/components/VirtualizedList/VirtualizedList.tsx b/components/VirtualizedList/VirtualizedList.tsx
@@ -12,7 +12,12 @@ import { CardTrack } from "components";
 import { CardType } from "components/CardTrack/CardTrack";
 import { useAuth, useSpotify } from "hooks";
 import { ITrack } from "types/spotify";
-import { getTracksFromLibrary, isServer, mapPlaylistItems } from "utils";
+import {
+  getIdFromUri,
+  getTracksFromLibrary,
+  isServer,
+  mapPlaylistItems,
+} from "utils";
 import {
   checkTracksInLibrary,
   getTracksFromPlaylist,
@@ -72,7 +77,7 @@ export default function VirtualizedList({
       const data = isLibrary
         ? await getTracksFromLibrary(startIndex, accessToken)
         : await getTracksFromPlaylist(
-            pageDetails?.id ?? "",
+            getIdFromUri(pageDetails?.uri, "id") ?? "",
             startIndex,
             accessToken
           );
@@ -91,7 +96,7 @@ export default function VirtualizedList({
       addTracksToPlaylists,
       isGeneratedPlaylist,
       isLibrary,
-      pageDetails?.id,
+      pageDetails?.uri,
     ]
   );