antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 02:43:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Support changing playback rate (#275)

Browse source 
* initial idea for playback rate

* Add transparency to dropdown

* Move playback speed component to right controls

* Set mpv speed on startup

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
This commit is contained in:
Kendall Garner 2023-10-23 00:47:44 +00:00 • committed by GitHub
parent 742b13d65e
commit 2664a80851
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 85 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/renderer/features/player/components/right-controls.tsx
View file

@ -17,18 +17,21 @@ import {
useHotkeySettings,
useMuted,
useSidebarStore,
useSpeed,
useVolume,
} from '/@/renderer/store';
import { useRightControls } from '../hooks/use-right-controls';
import { PlayerButton } from './player-button';
import { LibraryItem, ServerType, Song } from '/@/renderer/api/types';
import { useCreateFavorite, useDeleteFavorite, useSetRating } from '/@/renderer/features/shared';
import { Rating } from '/@/renderer/components';
import { DropdownMenu, Rating } from '/@/renderer/components';
import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
const ipc = isElectron() ? window.electron.ipc : null;
const remote = isElectron() ? window.electron.remote : null;
const PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
export const RightControls = () => {
const isMinWidth = useMediaQuery('(max-width: 480px)');
const volume = useVolume();
@ -38,8 +41,16 @@ export const RightControls = () => {
const { setSideBar } = useAppStoreActions();
const { rightExpanded: isQueueExpanded } = useSidebarStore();
const { bindings } = useHotkeySettings();
const { handleVolumeSlider, handleVolumeWheel, handleMute, handleVolumeDown, handleVolumeUp } =
useRightControls();
const {
handleVolumeSlider,
handleVolumeWheel,
handleMute,
handleVolumeDown,
handleVolumeUp,
handleSpeed,
} = useRightControls();
const speed = useSpeed();
const updateRatingMutation = useSetRating({});
const addToFavoritesMutation = useCreateFavorite({});
@ -184,6 +195,28 @@ export const RightControls = () => {
align="center"
spacing="xs"
>
<DropdownMenu>
<DropdownMenu.Target>
<PlayerButton
icon={<>{speed} x</>}
tooltip={{
label: 'Playback speed',
openDelay: 500,
}}
variant="secondary"
/>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{PLAYBACK_SPEEDS.map((speed) => (
<DropdownMenu.Item
key={`speed-select-${speed}`}
onClick={() => handleSpeed(Number(speed))}
>
{speed}
</DropdownMenu.Item>
))}
</DropdownMenu.Dropdown>
</DropdownMenu>
<PlayerButton
icon={
currentSong?.userFavorite ? (
@ -209,12 +242,14 @@ export const RightControls = () => {
variant="secondary"
onClick={handleToggleFavorite}
/>
<PlayerButton
icon={<HiOutlineQueueList size="1.1rem" />}
tooltip={{ label: 'View queue', openDelay: 500 }}
variant="secondary"
onClick={handleToggleQueue}
/>
{!isMinWidth ? (
<PlayerButton
icon={<HiOutlineQueueList size="1.1rem" />}
tooltip={{ label: 'View queue', openDelay: 500 }}
variant="secondary"
onClick={handleToggleQueue}
/>
) : null}
<Group
noWrap
spacing="xs"