Fix SpotifyControls
This commit is contained in:
parent
f092f434fe
commit
a55c758b0e
2 changed files with 13 additions and 17 deletions
|
@ -22,8 +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, copyWithToast, LazyComponent } from "@utils/misc";
|
import { classes, copyWithToast } from "@utils/misc";
|
||||||
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";
|
||||||
|
|
||||||
import { SpotifyStore, Track } from "./SpotifyStore";
|
import { SpotifyStore, Track } from "./SpotifyStore";
|
||||||
|
@ -79,7 +78,7 @@ function CopyContextMenu({ name, path }: { name: string; path: string; }) {
|
||||||
const openId = `spotify-open-${name}`;
|
const openId = `spotify-open-${name}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Menu.ContextMenu
|
<Menu.Menu
|
||||||
navId={`spotify-${name}-menu`}
|
navId={`spotify-${name}-menu`}
|
||||||
onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
|
onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
|
||||||
aria-label={`Spotify ${name} Menu`}
|
aria-label={`Spotify ${name} Menu`}
|
||||||
|
@ -96,7 +95,7 @@ function CopyContextMenu({ name, path }: { name: string; path: string; }) {
|
||||||
label={`Open ${name} in Spotify`}
|
label={`Open ${name} in Spotify`}
|
||||||
action={() => SpotifyStore.openExternal(path)}
|
action={() => SpotifyStore.openExternal(path)}
|
||||||
/>
|
/>
|
||||||
</Menu.ContextMenu>
|
</Menu.Menu>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -154,11 +153,6 @@ const seek = debounce((v: number) => {
|
||||||
SpotifyStore.seek(v);
|
SpotifyStore.seek(v);
|
||||||
});
|
});
|
||||||
|
|
||||||
const Slider = LazyComponent(() => {
|
|
||||||
const filter = filters.byCode("sliderContainer");
|
|
||||||
return find(m => m.render && filter(m.render));
|
|
||||||
});
|
|
||||||
|
|
||||||
function SeekBar() {
|
function SeekBar() {
|
||||||
const { duration } = SpotifyStore.track!;
|
const { duration } = SpotifyStore.track!;
|
||||||
|
|
||||||
|
@ -190,7 +184,7 @@ function SeekBar() {
|
||||||
>
|
>
|
||||||
{msToHuman(position)}
|
{msToHuman(position)}
|
||||||
</Forms.FormText>
|
</Forms.FormText>
|
||||||
<Slider
|
<Menu.MenuSliderControl
|
||||||
minValue={0}
|
minValue={0}
|
||||||
maxValue={duration}
|
maxValue={duration}
|
||||||
value={position}
|
value={position}
|
||||||
|
@ -217,7 +211,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
|
||||||
const volume = useStateFromStores([SpotifyStore], () => SpotifyStore.volume);
|
const volume = useStateFromStores([SpotifyStore], () => SpotifyStore.volume);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Menu.ContextMenu
|
<Menu.Menu
|
||||||
navId="spotify-album-menu"
|
navId="spotify-album-menu"
|
||||||
onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
|
onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
|
||||||
aria-label="Spotify Album Menu"
|
aria-label="Spotify Album Menu"
|
||||||
|
@ -240,7 +234,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
|
||||||
key="spotify-volume"
|
key="spotify-volume"
|
||||||
label="Volume"
|
label="Volume"
|
||||||
control={(props, ref) => (
|
control={(props, ref) => (
|
||||||
<Slider
|
<Menu.MenuSliderControl
|
||||||
{...props}
|
{...props}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
value={volume}
|
value={volume}
|
||||||
|
@ -250,7 +244,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</Menu.ContextMenu>
|
</Menu.Menu>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
10
src/webpack/common/types/menu.d.ts
vendored
10
src/webpack/common/types/menu.d.ts
vendored
|
@ -21,7 +21,7 @@ import type { ComponentType, CSSProperties, PropsWithChildren, UIEvent } from "r
|
||||||
type RC<C> = ComponentType<PropsWithChildren<C & Record<string, any>>>;
|
type RC<C> = ComponentType<PropsWithChildren<C & Record<string, any>>>;
|
||||||
|
|
||||||
export interface Menu {
|
export interface Menu {
|
||||||
ContextMenu: RC<{
|
Menu: RC<{
|
||||||
navId: string;
|
navId: string;
|
||||||
onClose(): void;
|
onClose(): void;
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -49,19 +49,21 @@ export interface Menu {
|
||||||
id: string;
|
id: string;
|
||||||
interactive?: boolean;
|
interactive?: boolean;
|
||||||
}>;
|
}>;
|
||||||
|
// TODO: Type me
|
||||||
|
MenuSliderControl: RC<any>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ContextMenuApi {
|
export interface ContextMenuApi {
|
||||||
close(): void;
|
close(): void;
|
||||||
open(
|
open(
|
||||||
event: UIEvent,
|
event: UIEvent,
|
||||||
render?: Menu["ContextMenu"],
|
render?: Menu["Menu"],
|
||||||
options?: { enableSpellCheck?: boolean; },
|
options?: { enableSpellCheck?: boolean; },
|
||||||
renderLazy?: () => Promise<Menu["ContextMenu"]>
|
renderLazy?: () => Promise<Menu["Menu"]>
|
||||||
): void;
|
): void;
|
||||||
openLazy(
|
openLazy(
|
||||||
event: UIEvent,
|
event: UIEvent,
|
||||||
renderLazy?: () => Promise<Menu["ContextMenu"]>,
|
renderLazy?: () => Promise<Menu["Menu"]>,
|
||||||
options?: { enableSpellCheck?: boolean; }
|
options?: { enableSpellCheck?: boolean; }
|
||||||
): void;
|
): void;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue