SpotifyControls: Add right click menus to title/album/artists
This commit is contained in:
parent
420b068094
commit
12cbd73e7f
@ -22,7 +22,7 @@ import ErrorBoundary from "@components/ErrorBoundary";
|
|||||||
import { Flex } from "@components/Flex";
|
import { Flex } from "@components/Flex";
|
||||||
import { Link } from "@components/Link";
|
import { Link } from "@components/Link";
|
||||||
import { debounce } from "@utils/debounce";
|
import { debounce } from "@utils/debounce";
|
||||||
import { classes, LazyComponent } from "@utils/misc";
|
import { classes, copyWithToast, LazyComponent } from "@utils/misc";
|
||||||
import { filters, find } from "@webpack";
|
import { filters, find } from "@webpack";
|
||||||
import { ContextMenu, FluxDispatcher, Forms, Menu, React, useEffect, useState, useStateFromStores } from "@webpack/common";
|
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() {
|
function Controls() {
|
||||||
const [isPlaying, shuffle, repeat] = useStateFromStores(
|
const [isPlaying, shuffle, repeat] = useStateFromStores(
|
||||||
[SpotifyStore],
|
[SpotifyStore],
|
||||||
@ -263,6 +294,7 @@ function Info({ track }: { track: Track; }) {
|
|||||||
onClick={track.id ? () => {
|
onClick={track.id ? () => {
|
||||||
SpotifyStore.openExternal(`/track/${track.id}`);
|
SpotifyStore.openExternal(`/track/${track.id}`);
|
||||||
} : void 0}
|
} : void 0}
|
||||||
|
onContextMenu={track.id ? makeContextMenu("Song", `/track/${track.id}`) : void 0}
|
||||||
>
|
>
|
||||||
{track.name}
|
{track.name}
|
||||||
</Forms.FormText>
|
</Forms.FormText>
|
||||||
@ -277,6 +309,7 @@ function Info({ track }: { track: Track; }) {
|
|||||||
href={`https://open.spotify.com/artist/${a.id}`}
|
href={`https://open.spotify.com/artist/${a.id}`}
|
||||||
style={{ fontSize: "inherit" }}
|
style={{ fontSize: "inherit" }}
|
||||||
title={a.name}
|
title={a.name}
|
||||||
|
onContextMenu={makeContextMenu("Artist", `/artist/${a.id}`)}
|
||||||
>
|
>
|
||||||
{a.name}
|
{a.name}
|
||||||
</Link>
|
</Link>
|
||||||
@ -295,6 +328,7 @@ function Info({ track }: { track: Track; }) {
|
|||||||
disabled={!track.album.id}
|
disabled={!track.album.id}
|
||||||
style={{ fontSize: "inherit" }}
|
style={{ fontSize: "inherit" }}
|
||||||
title={track.album.name}
|
title={track.album.name}
|
||||||
|
onContextMenu={makeContextMenu("Album", `/album/${track.album.id}`)}
|
||||||
>
|
>
|
||||||
{track.album.name}
|
{track.album.name}
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -16,6 +16,7 @@
|
|||||||
* 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 { Settings } from "@api/settings";
|
||||||
import IpcEvents from "@utils/IpcEvents";
|
import IpcEvents from "@utils/IpcEvents";
|
||||||
import { proxyLazy } from "@utils/proxyLazy";
|
import { proxyLazy } from "@utils/proxyLazy";
|
||||||
import { findByPropsLazy } from "@webpack";
|
import { findByPropsLazy } from "@webpack";
|
||||||
@ -89,7 +90,11 @@ export const SpotifyStore = proxyLazy(() => {
|
|||||||
public isSettingPosition = false;
|
public isSettingPosition = false;
|
||||||
|
|
||||||
public openExternal(path: string) {
|
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
|
// Need to keep track of this manually
|
||||||
|
@ -47,6 +47,11 @@ export default definePlugin({
|
|||||||
default: false,
|
default: false,
|
||||||
onChange: v => toggleHoverControls(v)
|
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: [
|
patches: [
|
||||||
{
|
{
|
||||||
|
Loading…
Reference in New Issue
Block a user