SpotifyControls: add copy song/artist/album name options

This commit is contained in:
Vendicated 2025-09-08 02:51:04 +02:00
parent efecbae75b
commit b225f2ec6c
No known key found for this signature in database
GPG key ID: 315C51BB0D6C5434

View file

@ -21,7 +21,7 @@ import "./spotifyStyles.css";
import { Settings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import { Flex } from "@components/Flex";
import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
import { CopyIcon, ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
import { debounce } from "@shared/debounce";
import { openImageModal } from "@utils/discord";
import { classes, copyWithToast } from "@utils/misc";
@ -76,27 +76,28 @@ function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
);
}
function CopyContextMenu({ name, path }: { name: string; path: string; }) {
const copyId = `spotify-copy-${name}`;
const openId = `spotify-open-${name}`;
function CopyContextMenu({ name, type, path }: { type: string; name: string; path: string; }) {
return (
<Menu.Menu
navId={`spotify-${name}-menu`}
onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
aria-label={`Spotify ${name} Menu`}
navId="vc-spotify-menu"
onClose={ContextMenuApi.closeContextMenu}
aria-label={`Spotify ${type} Menu`}
>
<Menu.MenuItem
key={copyId}
id={copyId}
label={`Copy ${name} Link`}
id="vc-spotify-copy-name"
label={`Copy ${type} Name`}
action={() => copyWithToast(name)}
icon={CopyIcon}
/>
<Menu.MenuItem
id="vc-spotify-copy-link"
label={`Copy ${type} Link`}
action={() => copyWithToast("https://open.spotify.com" + path)}
icon={LinkIcon}
/>
<Menu.MenuItem
key={openId}
id={openId}
label={`Open ${name} in Spotify`}
id="vc-spotify-open"
label={`Open ${type} in Spotify`}
action={() => SpotifyStore.openExternal(path)}
icon={OpenExternalIcon}
/>
@ -104,11 +105,6 @@ function CopyContextMenu({ name, path }: { name: string; path: string; }) {
);
}
function makeContextMenu(name: string, path: string) {
return (e: React.MouseEvent<HTMLElement, MouseEvent>) =>
ContextMenuApi.openContextMenu(e, () => <CopyContextMenu name={name} path={path} />);
}
function Controls() {
const [isPlaying, shuffle, repeat] = useStateFromStores(
[SpotifyStore],
@ -259,13 +255,14 @@ function AlbumContextMenu({ track }: { track: Track; }) {
);
}
function makeLinkProps(name: string, condition: unknown, path: string) {
function makeLinkProps(type: "Song" | "Artist" | "Album", condition: unknown, name: string, path: string) {
if (!condition) return {};
return {
role: "link",
onClick: () => SpotifyStore.openExternal(path),
onContextMenu: makeContextMenu(name, path)
onContextMenu: e =>
ContextMenuApi.openContextMenu(e, () => <CopyContextMenu type={type} name={name} path={path} />)
} satisfies React.HTMLAttributes<HTMLElement>;
}
@ -306,7 +303,7 @@ function Info({ track }: { track: Track; }) {
id={cl("song-title")}
className={cl("ellipoverflow")}
title={track.name}
{...makeLinkProps("Song", track.id, `/track/${track.id}`)}
{...makeLinkProps("Song", track.id, track.name, `/track/${track.id}`)}
>
{track.name}
</Forms.FormText>
@ -319,7 +316,7 @@ function Info({ track }: { track: Track; }) {
className={cl("artist")}
style={{ fontSize: "inherit" }}
title={a.name}
{...makeLinkProps("Artist", a.id, `/artist/${a.id}`)}
{...makeLinkProps("Artist", a.id, a.name, `/artist/${a.id}`)}
>
{a.name}
</span>
@ -336,7 +333,7 @@ function Info({ track }: { track: Track; }) {
className={cl("album")}
style={{ fontSize: "inherit" }}
title={track.album.name}
{...makeLinkProps("Album", track.album.id, `/album/${track.album.id}`)}
{...makeLinkProps("Album", track.album.id, track.album.name, `/album/${track.album.id}`)}
>
{track.album.name}
</span>