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

Co-authored-by: Vendicated <vendicated@riseup.net>
This commit is contained in:
Nico 2022-11-10 14:02:34 +01:00 committed by GitHub
parent 58636a9a82
commit 15f12073cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 25 deletions

View File

@ -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>
);

View File

@ -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&nbsp;
{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&nbsp;
{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&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(

View File

@ -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;
}