SpotifyControls: improve open in app capabilities & styles

This commit is contained in:
V 2023-07-04 17:53:17 +02:00
parent 994c3b3c92
commit 93482ac2a5
No known key found for this signature in database
GPG Key ID: A1DC0CFB5615D905
2 changed files with 20 additions and 19 deletions

@ -21,7 +21,6 @@ import "./spotifyStyles.css";
import ErrorBoundary from "@components/ErrorBoundary"; import ErrorBoundary from "@components/ErrorBoundary";
import { Flex } from "@components/Flex"; import { Flex } from "@components/Flex";
import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons"; import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
import { Link } from "@components/Link";
import { debounce } from "@utils/debounce"; import { debounce } from "@utils/debounce";
import { openImageModal } from "@utils/discord"; import { openImageModal } from "@utils/discord";
import { classes, copyWithToast } from "@utils/misc"; import { classes, copyWithToast } from "@utils/misc";
@ -254,6 +253,16 @@ function AlbumContextMenu({ track }: { track: Track; }) {
); );
} }
function makeLinkProps(name: string, condition: unknown, path: string) {
if (!condition) return {};
return {
role: "link",
onClick: () => SpotifyStore.openExternal(path),
onContextMenu: makeContextMenu(name, path)
} satisfies React.HTMLAttributes<HTMLElement>;
}
function Info({ track }: { track: Track; }) { function Info({ track }: { track: Track; }) {
const img = track?.album?.image; const img = track?.album?.image;
@ -289,12 +298,8 @@ 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={track.id ? () => { {...makeLinkProps("Song", track.id, `/track/${track.id}`)}
SpotifyStore.openExternal(`/track/${track.id}`);
} : void 0}
onContextMenu={track.id ? makeContextMenu("Song", `/track/${track.id}`) : void 0}
> >
{track.name} {track.name}
</Forms.FormText> </Forms.FormText>
@ -303,16 +308,14 @@ function Info({ track }: { track: Track; }) {
by&nbsp; by&nbsp;
{track.artists.map((a, i) => ( {track.artists.map((a, i) => (
<React.Fragment key={a.name}> <React.Fragment key={a.name}>
<Link <span
className={cl("artist")} className={cl("artist")}
disabled={!a.id}
href={`https://open.spotify.com/artist/${a.id}`}
style={{ fontSize: "inherit" }} style={{ fontSize: "inherit" }}
title={a.name} title={a.name}
onContextMenu={makeContextMenu("Artist", `/artist/${a.id}`)} {...makeLinkProps("Artist", a.id, `/artist/${a.id}`)}
> >
{a.name} {a.name}
</Link> </span>
{i !== track.artists.length - 1 && <span className={cl("comma")}>{", "}</span>} {i !== track.artists.length - 1 && <span className={cl("comma")}>{", "}</span>}
</React.Fragment> </React.Fragment>
))} ))}
@ -321,17 +324,15 @@ function Info({ track }: { track: Track; }) {
{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;
<Link id={cl("album-title")} <span
href={`https://open.spotify.com/album/${track.album.id}`} id={cl("album-title")}
target="_blank"
className={cl("album")} className={cl("album")}
disabled={!track.album.id}
style={{ fontSize: "inherit" }} style={{ fontSize: "inherit" }}
title={track.album.name} title={track.album.name}
onContextMenu={makeContextMenu("Album", `/album/${track.album.id}`)} {...makeLinkProps("Album", track.album.id, `/album/${track.album.id}`)}
> >
{track.album.name} {track.album.name}
</Link> </span>
</Forms.FormText> </Forms.FormText>
)} )}
</div> </div>

@ -131,8 +131,8 @@
color: var(--header-secondary); color: var(--header-secondary);
} }
.vc-spotify-artist:hover, .vc-spotify-artist[role="link"]:hover,
#vc-spotify-album-title:hover, #vc-spotify-album-title[role="link"]:hover,
#vc-spotify-song-title[role="link"]:hover { #vc-spotify-song-title[role="link"]:hover {
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;