SpotifyControls: Add right click menus to title/album/artists

1 files changed, 35 insertions, 1 deletions

diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx
index 439ecc2..3276be1 100644
--- a/src/plugins/spotifyControls/PlayerComponent.tsx
+++ b/src/plugins/spotifyControls/PlayerComponent.tsx
@@ -22,7 +22,7 @@ import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
 import { Link } from "@components/Link";
 import { debounce } from "@utils/debounce";
-import { classes, LazyComponent } from "@utils/misc";
+import { classes, copyWithToast, LazyComponent } from "@utils/misc";
 import { filters, find } from "@webpack";
 import { ContextMenu, FluxDispatcher, Forms, Menu, React, useEffect, useState, useStateFromStores } from "@webpack/common";
 
@@ -74,6 +74,37 @@ function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
     );
 }
 
+function CopyContextMenu({ name, path }: { name: string; path: string; }) {
+    const copyId = `spotify-copy-${name}`;
+    const openId = `spotify-open-${name}`;
+
+    return (
+        <Menu.ContextMenu
+            navId={`spotify-${name}-menu`}
+            onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
+            aria-label={`Spotify ${name} Menu`}
+        >
+            <Menu.MenuItem
+                key={copyId}
+                id={copyId}
+                label={`Copy ${name} Link`}
+                action={() => copyWithToast("https://open.spotify.com" + path)}
+            />
+            <Menu.MenuItem
+                key={openId}
+                id={openId}
+                label={`Open ${name} in Spotify`}
+                action={() => SpotifyStore.openExternal(path)}
+            />
+        </Menu.ContextMenu>
+    );
+}
+
+function makeContextMenu(name: string, path: string) {
+    return (e: React.MouseEvent<HTMLElement, MouseEvent>) =>
+        ContextMenu.open(e, () => <CopyContextMenu name={name} path={path} />);
+}
+
 function Controls() {
     const [isPlaying, shuffle, repeat] = useStateFromStores(
         [SpotifyStore],
@@ -263,6 +294,7 @@ function Info({ track }: { track: Track; }) {
                     onClick={track.id ? () => {
                         SpotifyStore.openExternal(`/track/${track.id}`);
                     } : void 0}
+                    onContextMenu={track.id ? makeContextMenu("Song", `/track/${track.id}`) : void 0}
                 >
                     {track.name}
                 </Forms.FormText>
@@ -277,6 +309,7 @@ function Info({ track }: { track: Track; }) {
                                     href={`https://open.spotify.com/artist/${a.id}`}
                                     style={{ fontSize: "inherit" }}
                                     title={a.name}
+                                    onContextMenu={makeContextMenu("Artist", `/artist/${a.id}`)}
                                 >
                                     {a.name}
                                 </Link>
@@ -295,6 +328,7 @@ function Info({ track }: { track: Track; }) {
                             disabled={!track.album.id}
                             style={{ fontSize: "inherit" }}
                             title={track.album.name}
+                            onContextMenu={makeContextMenu("Album", `/album/${track.album.id}`)}
                         >
                             {track.album.name}
                         </Link>