SpotifyControls: Add context menu icons

This commit is contained in:
V 2023-05-13 23:47:13 +02:00
parent f2ef96a420
commit c062f9bdeb
No known key found for this signature in database
GPG Key ID: A1DC0CFB5615D905
3 changed files with 41 additions and 0 deletions

@ -16,6 +16,8 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import "./iconStyles.css";
import { classes } from "@utils/misc"; import { classes } from "@utils/misc";
import type { PropsWithChildren } from "react"; import type { PropsWithChildren } from "react";
@ -81,3 +83,34 @@ export function CopyIcon(props: IconProps) {
</Icon> </Icon>
); );
} }
/**
* Discord's open external icon, as seen in the user profile connections
*/
export function OpenExternalIcon(props: IconProps) {
return (
<Icon
{...props}
className={classes(props.className, "vc-open-external-icon")}
viewBox="0 0 24 24"
>
<polygon
fill="currentColor"
fill-rule="nonzero"
points="13 20 11 20 11 8 5.5 13.5 4.08 12.08 12 4.16 19.92 12.08 18.5 13.5 13 8"
/>
</Icon>
);
}
export function ImageIcon(props: IconProps) {
return (
<Icon
{...props}
className={classes(props.className, "vc-image-icon")}
viewBox="0 0 24 24"
>
<path fill="currentColor" d="M21,19V5c0,-1.1 -0.9,-2 -2,-2H5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2zM8.5,13.5l2.5,3.01L14.5,12l4.5,6H5l3.5,-4.5z" />
</Icon>
);
}

@ -0,0 +1,3 @@
.vc-open-external-icon {
transform: rotate(45deg);
}

@ -20,6 +20,7 @@ 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 { Link } from "@components/Link"; import { Link } from "@components/Link";
import { debounce } from "@utils/debounce"; import { debounce } from "@utils/debounce";
import { classes, copyWithToast } from "@utils/misc"; import { classes, copyWithToast } from "@utils/misc";
@ -88,12 +89,14 @@ function CopyContextMenu({ name, path }: { name: string; path: string; }) {
id={copyId} id={copyId}
label={`Copy ${name} Link`} label={`Copy ${name} Link`}
action={() => copyWithToast("https://open.spotify.com" + path)} action={() => copyWithToast("https://open.spotify.com" + path)}
icon={LinkIcon}
/> />
<Menu.MenuItem <Menu.MenuItem
key={openId} key={openId}
id={openId} id={openId}
label={`Open ${name} in Spotify`} label={`Open ${name} in Spotify`}
action={() => SpotifyStore.openExternal(path)} action={() => SpotifyStore.openExternal(path)}
icon={OpenExternalIcon}
/> />
</Menu.Menu> </Menu.Menu>
); );
@ -221,6 +224,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
id="open-album" id="open-album"
label="Open Album" label="Open Album"
action={() => SpotifyStore.openExternal(`/album/${track.album.id}`)} action={() => SpotifyStore.openExternal(`/album/${track.album.id}`)}
icon={OpenExternalIcon}
/> />
<Menu.MenuItem <Menu.MenuItem
key="view-cover" key="view-cover"
@ -228,6 +232,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
label="View Album Cover" label="View Album Cover"
// trolley // trolley
action={() => (Vencord.Plugins.plugins.ViewIcons as any).openImage(track.album.image.url)} action={() => (Vencord.Plugins.plugins.ViewIcons as any).openImage(track.album.image.url)}
icon={ImageIcon}
/> />
<Menu.MenuControlItem <Menu.MenuControlItem
id="spotify-volume" id="spotify-volume"