cswimr/Vencord
1
0
Fork 0
forked from CoastalCommitsArchival/github.com-Vendicated-Vencord
Code Pull requests Packages 1 Wiki Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/Link.tsx
View file

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

46
src/plugins/spotifyControls/PlayerComponent.tsx
View file

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

2
src/plugins/spotifyControls/styles.css
View file

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