pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/renderer/app.tsx
View file

@ -100,7 +100,8 @@ export const App = () => {
if (!isRunning) {
const extraParameters = useSettingsStore.getState().playback.mpvExtraParameters;
const properties = {
const properties: Record<string, any> = {
speed: usePlayerStore.getState().current.speed,
...getMpvProperties(useSettingsStore.getState().playback.mpvProperties),
};

4
src/renderer/components/audio-player/index.tsx
View file

@ -10,6 +10,7 @@ import {
import { useSettingsStore } from '/@/renderer/store/settings.store';
import type { CrossfadeStyle } from '/@/renderer/types';
import { PlaybackStyle, PlayerStatus } from '/@/renderer/types';
import { useSpeed } from '/@/renderer/store';
interface AudioPlayerProps extends ReactPlayerProps {
crossfadeDuration: number;
@ -59,6 +60,7 @@ export const AudioPlayer = forwardRef(
const [isTransitioning, setIsTransitioning] = useState(false);
const audioDeviceId = useSettingsStore((state) => state.playback.audioDeviceId);
const playback = useSettingsStore((state) => state.playback.mpvProperties);
const playbackSpeed = useSpeed();
const [webAudio, setWebAudio] = useState<WebAudio | null>(null);
const [player1Source, setPlayer1Source] = useState<MediaElementAudioSourceNode | null>(
@ -307,6 +309,7 @@ export const AudioPlayer = forwardRef(
}}
height={0}
muted={muted}
playbackRate={playbackSpeed}
playing={currentPlayer === 1 && status === PlayerStatus.PLAYING}
progressInterval={isTransitioning ? 10 : 250}
url={player1?.streamUrl}
@ -325,6 +328,7 @@ export const AudioPlayer = forwardRef(
}}
height={0}
muted={muted}
playbackRate={playbackSpeed}
playing={currentPlayer === 2 && status === PlayerStatus.PLAYING}
progressInterval={isTransitioning ? 10 : 250}
url={player2?.streamUrl}

1
src/renderer/features/player/components/player-button.tsx
View file

@ -103,6 +103,7 @@ const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
}
&:hover {
color: var(--playerbar-btn-fg-hover);
background: var(--playerbar-btn-bg-hover);
svg {

41
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}
/>
{!isMinWidth ? (
<PlayerButton
icon={<HiOutlineQueueList size="1.1rem" />}
tooltip={{ label: 'View queue', openDelay: 500 }}
variant="secondary"
onClick={handleToggleQueue}
/>
) : null}
<Group
noWrap
spacing="xs"

22
src/renderer/features/player/hooks/use-right-controls.ts
View file

@ -1,6 +1,12 @@
import { useCallback, useEffect, WheelEvent } from 'react';
import isElectron from 'is-electron';
import { useMuted, usePlayerControls, useVolume } from '/@/renderer/store';
import {
useMuted,
usePlayerControls,
useSetCurrentSpeed,
useSpeed,
useVolume,
} from '/@/renderer/store';
import { useGeneralSettings } from '/@/renderer/store/settings.store';
const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
@ -37,6 +43,8 @@ export const useRightControls = () => {
const volume = useVolume();
const muted = useMuted();
const { volumeWheelStep } = useGeneralSettings();
const speed = useSpeed();
const setCurrentSpeed = useSetCurrentSpeed();
// Ensure that the mpv player volume is set on startup
useEffect(() => {
@ -44,6 +52,7 @@ export const useRightControls = () => {
if (mpvPlayer) {
mpvPlayer.volume(volume);
mpvPlayer.setProperties({ speed });
if (muted) {
mpvPlayer.mute(muted);
@ -53,6 +62,16 @@ export const useRightControls = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleSpeed = useCallback(
(e: number) => {
setCurrentSpeed(e);
if (mpvPlayer) {
mpvPlayer?.setProperties({ speed: e });
}
},
[setCurrentSpeed],
);
const handleVolumeSlider = (e: number) => {
mpvPlayer?.volume(e);
remote?.updateVolume(e);
@ -123,6 +142,7 @@ export const useRightControls = () => {
return {
handleMute,
handleSpeed,
handleVolumeDown,
handleVolumeSlider,
handleVolumeSliderState,

12
src/renderer/store/player.store.ts
View file

@ -18,6 +18,7 @@ export interface PlayerState {
seek: boolean;
shuffledIndex: number;
song?: QueueSong;
speed: number;
status: PlayerStatus;
time: number;
};
@ -81,6 +82,7 @@ export interface PlayerSlice extends PlayerState {
reorderQueue: (rowUniqueIds: string[], afterUniqueId?: string) => PlayerData;
restoreQueue: (data: Partial<PlayerState>) => PlayerData;
setCurrentIndex: (index: number) => PlayerData;
setCurrentSpeed: (speed: number) => void;
setCurrentTime: (time: number, seek?: boolean) => void;
setCurrentTrack: (uniqueId: string) => PlayerData;
setFavorite: (ids: string[], favorite: boolean) => string[];
@ -750,6 +752,11 @@ export const usePlayerStore = create<PlayerSlice>()(
return get().actions.getPlayerData();
},
setCurrentSpeed: (speed) => {
set((state) => {
state.current.speed = speed;
});
},
setCurrentTime: (time, seek = false) => {
set((state) => {
state.current.seek = seek;
@ -924,6 +931,7 @@ export const usePlayerStore = create<PlayerSlice>()(
seek: false,
shuffledIndex: 0,
song: {} as QueueSong,
speed: 1.0,
status: PlayerStatus.PAUSED,
time: 0,
},
@ -1038,6 +1046,10 @@ export const useVolume = () => usePlayerStore((state) => state.volume);
export const useMuted = () => usePlayerStore((state) => state.muted);
export const useSpeed = () => usePlayerStore((state) => state.current.speed);
export const useSetCurrentSpeed = () => usePlayerStore((state) => state.actions.setCurrentSpeed);
export const useSetQueueFavorite = () => usePlayerStore((state) => state.actions.setFavorite);
export const useSetQueueRating = () => usePlayerStore((state) => state.actions.setRating);

2
src/renderer/themes/default.scss
View file

@ -70,7 +70,7 @@
--input-placeholder-fg: rgb(107, 108, 109);
--input-active-fg: rgb(193, 193, 193);
--input-active-bg: rgba(255, 255, 255, 10%);
--dropdown-menu-bg: rgb(32, 32, 32);
--dropdown-menu-bg: rgba(32, 32, 32, 95%);
--dropdown-menu-fg: rgb(235, 235, 235);
--dropdown-menu-item-padding: 0.8rem;
--dropdown-menu-item-font-size: 1rem;