Fix SpotifyControls

This commit is contained in:
Vendicated 2023-04-04 21:27:44 +02:00
parent f092f434fe
commit a55c758b0e
No known key found for this signature in database
GPG key ID: A1DC0CFB5615D905
2 changed files with 13 additions and 17 deletions

View file

@ -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>
); );
} }

View file

@ -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;
} }