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

3 files changed, 46 insertions, 2 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>
diff --git a/src/plugins/spotifyControls/SpotifyStore.ts b/src/plugins/spotifyControls/SpotifyStore.ts
index ceac577..723bc4c 100644
--- a/src/plugins/spotifyControls/SpotifyStore.ts
+++ b/src/plugins/spotifyControls/SpotifyStore.ts
@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Settings } from "@api/settings";
 import IpcEvents from "@utils/IpcEvents";
 import { proxyLazy } from "@utils/proxyLazy";
 import { findByPropsLazy } from "@webpack";
@@ -89,7 +90,11 @@ export const SpotifyStore = proxyLazy(() => {
         public isSettingPosition = false;
 
         public openExternal(path: string) {
-            VencordNative.ipc.invoke(IpcEvents.OPEN_EXTERNAL, "https://open.spotify.com" + path);
+            const url = Settings.plugins.SpotifyControls.useSpotifyUris
+                ? "spotify:" + path.replaceAll("/", (_, idx) => idx === 0 ? "" : ":")
+                : "https://open.spotify.com" + path;
+
+            VencordNative.ipc.invoke(IpcEvents.OPEN_EXTERNAL, url);
         }
 
         // Need to keep track of this manually
diff --git a/src/plugins/spotifyControls/index.tsx b/src/plugins/spotifyControls/index.tsx
index 5d82998..ce1bf67 100644
--- a/src/plugins/spotifyControls/index.tsx
+++ b/src/plugins/spotifyControls/index.tsx
@@ -47,6 +47,11 @@ export default definePlugin({
             default: false,
             onChange: v => toggleHoverControls(v)
         },
+        useSpotifyUris: {
+            type: OptionType.BOOLEAN,
+            description: "Open Spotify URIs instead of Spotify URLs. Will only work if you have Spotify installed and might not work on all platforms",
+            default: false
+        }
     },
     patches: [
         {