Add hotkey controls to relevant pages

This commit is contained in:
jeffvli 2023-05-13 00:59:19 -07:00 committed by Jeff
parent d7f24262fd
commit 4c98afb613
6 changed files with 155 additions and 37 deletions

View file

@ -1,5 +1,6 @@
import { MouseEvent } from 'react';
import { Flex, Group } from '@mantine/core';
import { useHotkeys } from '@mantine/hooks';
import { HiOutlineQueueList } from 'react-icons/hi2';
import {
RiVolumeUpFill,
@ -12,6 +13,7 @@ import {
useAppStoreActions,
useCurrentServer,
useCurrentSong,
useHotkeySettings,
useMuted,
useSidebarStore,
useVolume,
@ -30,7 +32,9 @@ export const RightControls = () => {
const currentSong = useCurrentSong();
const { setSideBar } = useAppStoreActions();
const { rightExpanded: isQueueExpanded } = useSidebarStore();
const { handleVolumeSlider, handleVolumeWheel, handleMute } = useRightControls();
const { bindings } = useHotkeySettings();
const { handleVolumeSlider, handleVolumeWheel, handleMute, handleVolumeDown, handleVolumeUp } =
useRightControls();
const updateRatingMutation = useSetRating({});
const addToFavoritesMutation = useCreateFavorite({});
@ -94,9 +98,20 @@ export const RightControls = () => {
}
};
const handleToggleQueue = () => {
setSideBar({ rightExpanded: !isQueueExpanded });
};
const isSongDefined = Boolean(currentSong?.id);
const showRating = isSongDefined && server?.type === ServerType.NAVIDROME;
useHotkeys([
[bindings.volumeDown.isGlobal ? '' : bindings.volumeDown.hotkey, handleVolumeDown],
[bindings.volumeUp.isGlobal ? '' : bindings.volumeUp.hotkey, handleVolumeUp],
[bindings.volumeMute.isGlobal ? '' : bindings.volumeMute.hotkey, handleMute],
[bindings.toggleQueue.isGlobal ? '' : bindings.toggleQueue.hotkey, handleToggleQueue],
]);
return (
<Flex
align="flex-end"
@ -147,7 +162,7 @@ export const RightControls = () => {
icon={<HiOutlineQueueList size="1.1rem" />}
tooltip={{ label: 'View queue', openDelay: 500 }}
variant="secondary"
onClick={() => setSideBar({ rightExpanded: !isQueueExpanded })}
onClick={handleToggleQueue}
/>
<Group
noWrap