From 3b65384b9438f38f612b92ed1276eb6bb0899f50 Mon Sep 17 00:00:00 2001
From: Nico <nico@d3sox.me>
Date: Wed, 9 Nov 2022 17:36:20 +0100
Subject: [PATCH] fix(spotifyControls): add album/cover null checks (local
 files) (#198)

Co-authored-by: Ven <vendicated@riseup.net>
---
 .../spotifyControls/PlayerComponent.tsx       | 48 +++++++++++--------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx
index 797283520..b5cc26a80 100644
--- a/src/plugins/spotifyControls/PlayerComponent.tsx
+++ b/src/plugins/spotifyControls/PlayerComponent.tsx
@@ -233,18 +233,22 @@ function Info({ track }: { track: Track; }) {
     const [coverExpanded, setCoverExpanded] = React.useState(false);
 
     const i = (
-        <img
-            id={cl("album-image")}
-            src={img?.url}
-            alt="Album Image"
-            onClick={() => setCoverExpanded(!coverExpanded)}
-            onContextMenu={e => {
-                ContextMenu.open(e, () => <AlbumContextMenu track={track} />);
-            }}
-        />
+        <>
+            {img && (
+                <img
+                    id={cl("album-image")}
+                    src={img.url}
+                    alt="Album Image"
+                    onClick={() => setCoverExpanded(!coverExpanded)}
+                    onContextMenu={e => {
+                        ContextMenu.open(e, () => <AlbumContextMenu track={track} />);
+                    }}
+                />
+            )}
+        </>
     );
 
-    if (coverExpanded) return (
+    if (coverExpanded && img) return (
         <div id={cl("album-expanded-wrapper")}>
             {i}
         </div>
@@ -280,18 +284,20 @@ function Info({ track }: { track: Track; }) {
                         </React.Fragment>
                     ))}
                 </Forms.FormText>
-                <Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
+                {track.album.name && (
+                    <Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
                     on&nbsp;
-                    <a id={cl("album-title")}
-                        href={`https://open.spotify.com/album/${track.album.id}`}
-                        target="_blank"
-                        className={cl("album")}
-                        style={{ fontSize: "inherit" }}
-                        title={track.album.name}
-                    >
-                        {track.album.name}
-                    </a>
-                </Forms.FormText>
+                        <a id={cl("album-title")}
+                            href={`https://open.spotify.com/album/${track.album.id}`}
+                            target="_blank"
+                            className={cl("album")}
+                            style={{ fontSize: "inherit" }}
+                            title={track.album.name}
+                        >
+                            {track.album.name}
+                        </a>
+                    </Forms.FormText>
+                )}
             </div>
         </div>
     );