diff options
| -rw-r--r-- | src/components/Link.tsx | 7 | ||||
| -rw-r--r-- | src/plugins/spotifyControls/PlayerComponent.tsx | 46 | ||||
| -rw-r--r-- | src/plugins/spotifyControls/styles.css | 2 |
3 files changed, 30 insertions, 25 deletions
diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 0965b64..2400ea6 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -18,19 +18,18 @@ import { React } from "../webpack/common"; -interface Props { - href: string; +interface Props extends React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> { 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> ); diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx index b5cc26a..16fa250 100644 --- a/src/plugins/spotifyControls/PlayerComponent.tsx +++ b/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")}> - by - {track.artists.map((a, i) => ( - <React.Fragment key={a.id}> - <a - className={cl("artist")} - href={`https://open.spotify.com/artist/${a.id}`} - target="_blank" - style={{ fontSize: "inherit" }} - title={a.name} - > - {a.name} - </a> - {i !== track.artists.length - 1 && <span className={cl("comma")}>{", "}</span>} - </React.Fragment> - ))} - </Forms.FormText> + {track.artists.some(a => a.name) && ( + <Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}> + by + {track.artists.map((a, i) => ( + <React.Fragment key={a.name}> + <Link + className={cl("artist")} + disabled={!a.id} + href={`https://open.spotify.com/artist/${a.id}`} + style={{ fontSize: "inherit" }} + title={a.name} + > + {a.name} + </Link> + {i !== track.artists.length - 1 && <span className={cl("comma")}>{", "}</span>} + </React.Fragment> + ))} + </Forms.FormText> + )} {track.album.name && ( <Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}> - on + on <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( diff --git a/src/plugins/spotifyControls/styles.css b/src/plugins/spotifyControls/styles.css index a612219..9c7b1c0 100644 --- a/src/plugins/spotifyControls/styles.css +++ b/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; } |