diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/plugins/spotifyControls/PlayerComponent.tsx | 48 |
1 files changed, 27 insertions, 21 deletions
diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx index 7972835..b5cc26a 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 - <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> ); |