SpotifyControls: add copy song/artist/album name options
This commit is contained in:
parent
efecbae75b
commit
b225f2ec6c
1 changed files with 21 additions and 24 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue