spotifyControls: make title/artists of local tracks unclickable (#201)

Co-authored-by: Vendicated <vendicated@riseup.net>

src/components/Link.tsx

@@ -18,19 +18,18 @@
 
 import { React } from "../webpack/common";
 
-interface Props {
+interface Props extends React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
-    href: string;
     disabled?: boolean;
-    style?: React.CSSProperties;
 }
 
 export function Link(props: React.PropsWithChildren<Props>) {
     if (props.disabled) {
         props.style ??= {};
         props.style.pointerEvents = "none";
+        props["aria-disabled"] = true;
     }
     return (
-        <a href={props.href} target="_blank" style={props.style}>
+        <a role="link" target="_blank" {...props}>
             {props.children}
         </a>
     );

src/plugins/spotifyControls/PlayerComponent.tsx

@@ -18,6 +18,7 @@
 
 import ErrorBoundary from "../../components/ErrorBoundary";
 import { Flex } from "../../components/Flex";
+import { Link } from "../../components/Link";
 import { debounce } from "../../utils/debounce";
 import { classes, LazyComponent, lazyWebpack } from "../../utils/misc";
 import { ContextMenu, FluxDispatcher, Forms, Menu, React } from "../../webpack/common";
@@ -262,31 +263,36 @@ function Info({ track }: { track: Track; }) {
                     variant="text-sm/semibold"
                     id={cl("song-title")}
                     className={cl("ellipoverflow")}
+                    role={track.id ? "link" : undefined}
                     title={track.name}
-                    onClick={() => SpotifyStore.openExternal(`/track/${track.id}`)}
+                    onClick={track.id ? () => {
+                        SpotifyStore.openExternal(`/track/${track.id}`);
+                    } : void 0}
                 >
                     {track.name}
                 </Forms.FormText>
-                <Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
+                {track.artists.some(a => a.name) && (
-                    by&nbsp;
+                    <Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
-                    {track.artists.map((a, i) => (
+                        by&nbsp;
-                        <React.Fragment key={a.id}>
+                        {track.artists.map((a, i) => (
-                            <a
+                            <React.Fragment key={a.name}>
-                                className={cl("artist")}
+                                <Link
-                                href={`https://open.spotify.com/artist/${a.id}`}
+                                    className={cl("artist")}
-                                target="_blank"
+                                    disabled={!a.id}
-                                style={{ fontSize: "inherit" }}
+                                    href={`https://open.spotify.com/artist/${a.id}`}
-                                title={a.name}
+                                    style={{ fontSize: "inherit" }}
-                            >
+                                    title={a.name}
-                                {a.name}
+                                >
-                            </a>
+                                    {a.name}
-                            {i !== track.artists.length - 1 && <span className={cl("comma")}>{", "}</span>}
+                                </Link>
-                        </React.Fragment>
+                                {i !== track.artists.length - 1 && <span className={cl("comma")}>{", "}</span>}
-                    ))}
+                            </React.Fragment>
-                </Forms.FormText>
+                        ))}
+                    </Forms.FormText>
+                )}
                 {track.album.name && (
                     <Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
-                    on&nbsp;
+                        on&nbsp;
                         <a id={cl("album-title")}
                             href={`https://open.spotify.com/album/${track.album.id}`}
                             target="_blank"
@@ -308,7 +314,7 @@ export function Player() {
         [SpotifyStore],
         () => SpotifyStore.track,
         null,
-        (prev, next) => prev?.id === next?.id
+        (prev, next) => prev?.id ? (prev.id === next?.id) : prev?.name === next?.name
     );
 
     const device = useStateFromStores(

src/plugins/spotifyControls/styles.css

@@ -121,7 +121,7 @@
 
 .vc-spotify-artist:hover,
 #vc-spotify-album-title:hover,
-#vc-spotify-song-title:hover {
+#vc-spotify-song-title[role="link"]:hover {
     text-decoration: underline;
     cursor: pointer;
 }