mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
Handle web player
This commit is contained in:
jeffvli
@@ -32,7 +32,7 @@ mpv.on('status', (status: any) => {
|
||||
});
|
||||
|
||||
// Automatically updates the play button when the player is playing
|
||||
mpv.on('started', () => {
|
||||
mpv.on('resumed', () => {
|
||||
getMainWindow()?.webContents.send('renderer-player-play');
|
||||
});
|
||||
|
||||
|
||||
@@ -87,6 +87,9 @@ contextBridge.exposeInMainWorld('electron', {
|
||||
SETTINGS_SET(data: { property: string; value: any }) {
|
||||
ipcRenderer.send('settings-set', data);
|
||||
},
|
||||
removeAllListeners(value: string) {
|
||||
ipcRenderer.removeAllListeners(value);
|
||||
},
|
||||
windowClose() {
|
||||
ipcRenderer.send('window-close');
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* eslint-disable no-nested-ternary */
|
||||
import { Dispatch } from 'react';
|
||||
import { CrossfadeStyle } from '../../../../types';
|
||||
import { CrossfadeStyle } from '@/renderer/types';
|
||||
|
||||
export const gaplessHandler = (args: {
|
||||
currentTime: number;
|
||||
|
||||
@@ -5,13 +5,16 @@ import { IoIosPause } from 'react-icons/io';
|
||||
import {
|
||||
RiPlayFill,
|
||||
RiRepeat2Fill,
|
||||
RiRewindFill,
|
||||
RiShuffleFill,
|
||||
RiSkipBackFill,
|
||||
RiSkipForwardFill,
|
||||
RiSpeedFill,
|
||||
} from 'react-icons/ri';
|
||||
import styled from 'styled-components';
|
||||
import { Text } from '@/renderer/components';
|
||||
import { usePlayerStore } from '@/renderer/store';
|
||||
import { useSettingsStore } from '@/renderer/store/settings.store';
|
||||
import { Font } from '@/renderer/styles';
|
||||
import { PlaybackType, PlayerStatus } from '@/renderer/types';
|
||||
import { useCenterControls } from '../hooks/use-center-controls';
|
||||
@@ -56,10 +59,11 @@ const SliderWrapper = styled.div`
|
||||
export const CenterControls = ({ playersRef }: CenterControlsProps) => {
|
||||
const [isSeeking, setIsSeeking] = useState(false);
|
||||
const playerData = usePlayerStore((state) => state.getPlayerData());
|
||||
const skip = useSettingsStore((state) => state.player.skipButtons);
|
||||
const playerType = useSettingsStore((state) => state.player.type);
|
||||
const player1 = playersRef?.current?.player1?.player;
|
||||
const player2 = playersRef?.current?.player2?.player;
|
||||
const { status, player } = usePlayerStore((state) => state.current);
|
||||
const settings = usePlayerStore((state) => state.settings);
|
||||
const setCurrentTime = usePlayerStore((state) => state.setCurrentTime);
|
||||
|
||||
const {
|
||||
@@ -67,6 +71,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
|
||||
handlePlayPause,
|
||||
handlePrevTrack,
|
||||
handleSeekSlider,
|
||||
handleSkipBackward,
|
||||
handleSkipForward,
|
||||
} = useCenterControls({ playersRef });
|
||||
|
||||
const currentTime = usePlayerStore((state) => state.current.time);
|
||||
@@ -78,7 +84,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
|
||||
let interval: any;
|
||||
|
||||
if (status === PlayerStatus.PLAYING && !isSeeking) {
|
||||
if (!isElectron() || settings.type === PlaybackType.WEB) {
|
||||
if (!isElectron() || playerType === PlaybackType.WEB) {
|
||||
interval = setInterval(() => {
|
||||
setCurrentTime(currentPlayerRef.getCurrentTime());
|
||||
}, 1000);
|
||||
@@ -88,7 +94,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
|
||||
}
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [currentPlayerRef, isSeeking, setCurrentTime, settings.type, status]);
|
||||
}, [currentPlayerRef, isSeeking, setCurrentTime, playerType, status]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -106,6 +112,17 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
|
||||
variant="secondary"
|
||||
onClick={handlePrevTrack}
|
||||
/>
|
||||
{skip?.enabled && (
|
||||
<PlayerButton
|
||||
icon={<RiRewindFill size={15} />}
|
||||
tooltip={{
|
||||
label: `Skip backwards ${skip?.skipBackwardSeconds} seconds`,
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="secondary"
|
||||
onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
|
||||
/>
|
||||
)}
|
||||
<PlayerButton
|
||||
icon={
|
||||
status === PlayerStatus.PAUSED ? (
|
||||
@@ -121,6 +138,17 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
|
||||
variant="main"
|
||||
onClick={handlePlayPause}
|
||||
/>
|
||||
{skip?.enabled && (
|
||||
<PlayerButton
|
||||
icon={<RiSpeedFill size={15} />}
|
||||
tooltip={{
|
||||
label: `Skip forwards ${skip?.skipBackwardSeconds} seconds`,
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="secondary"
|
||||
onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
|
||||
/>
|
||||
)}
|
||||
<PlayerButton
|
||||
icon={<RiSkipForwardFill size={15} />}
|
||||
tooltip={{ label: 'Next track', openDelay: 500 }}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useRef } from 'react';
|
||||
import isElectron from 'is-electron';
|
||||
import styled from 'styled-components';
|
||||
import { useSettingsStore } from '@/renderer/store/settings.store';
|
||||
import { PlaybackType } from '@/renderer/types';
|
||||
import { AudioPlayer } from '../../../components';
|
||||
import { usePlayerStore } from '../../../store';
|
||||
@@ -45,8 +45,8 @@ const CenterGridItem = styled.div`
|
||||
|
||||
export const Playerbar = () => {
|
||||
const playersRef = useRef<any>();
|
||||
const settings = usePlayerStore((state) => state.settings);
|
||||
const volume = usePlayerStore((state) => state.settings.volume);
|
||||
const settings = useSettingsStore((state) => state.player);
|
||||
const volume = usePlayerStore((state) => state.volume);
|
||||
const player1 = usePlayerStore((state) => state.player1());
|
||||
const player2 = usePlayerStore((state) => state.player2());
|
||||
const status = usePlayerStore((state) => state.current.status);
|
||||
@@ -66,7 +66,7 @@ export const Playerbar = () => {
|
||||
<RightControls />
|
||||
</RightGridItem>
|
||||
</PlayerbarControlsGrid>
|
||||
{(!isElectron() || settings.type === PlaybackType.WEB) && (
|
||||
{settings.type === PlaybackType.WEB && (
|
||||
<AudioPlayer
|
||||
ref={playersRef}
|
||||
autoNext={autoNext}
|
||||
@@ -74,6 +74,7 @@ export const Playerbar = () => {
|
||||
crossfadeStyle={settings.crossfadeStyle}
|
||||
currentPlayer={player}
|
||||
muted={settings.muted}
|
||||
playbackStyle={settings.style}
|
||||
player1={player1}
|
||||
player2={player2}
|
||||
status={status}
|
||||
|
||||
@@ -36,8 +36,8 @@ const MetadataStack = styled.div`
|
||||
`;
|
||||
|
||||
export const RightControls = () => {
|
||||
const volume = usePlayerStore((state) => state.settings.volume);
|
||||
const muted = usePlayerStore((state) => state.settings.muted);
|
||||
const volume = usePlayerStore((state) => state.volume);
|
||||
const muted = usePlayerStore((state) => state.muted);
|
||||
const setSidebar = useAppStore((state) => state.setSidebar);
|
||||
const isQueueExpanded = useAppStore((state) => state.sidebar.rightExpanded);
|
||||
const { handleVolumeSlider, handleVolumeSliderState, handleMute } =
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import isElectron from 'is-electron';
|
||||
import { PlaybackType, PlayerStatus } from '@/renderer/types';
|
||||
import { usePlayerStore } from '../../../store';
|
||||
import { mpvPlayer } from '../utils/mpvPlayer';
|
||||
import { useSettingsStore } from '../../../store/settings.store';
|
||||
import { mpvPlayer } from '../utils/mpv-player';
|
||||
|
||||
const ipc = isElectron() ? window.electron.ipcRenderer : null;
|
||||
|
||||
export const useCenterControls = (args: { playersRef: any }) => {
|
||||
const { playersRef } = args;
|
||||
|
||||
const settings = usePlayerStore((state) => state.settings);
|
||||
const settings = useSettingsStore((state) => state.player);
|
||||
const play = usePlayerStore((state) => state.play);
|
||||
const pause = usePlayerStore((state) => state.pause);
|
||||
const prev = usePlayerStore((state) => state.prev);
|
||||
@@ -41,26 +45,28 @@ export const useCenterControls = (args: { playersRef: any }) => {
|
||||
resetPlayers();
|
||||
};
|
||||
|
||||
const isMpvPlayer = isElectron() && settings.type === PlaybackType.LOCAL;
|
||||
|
||||
const handlePlay = useCallback(() => {
|
||||
if (settings.type === PlaybackType.LOCAL) {
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.play();
|
||||
} else {
|
||||
currentPlayerRef.getInternalPlayer().play();
|
||||
}
|
||||
|
||||
play();
|
||||
}, [currentPlayerRef, play, settings]);
|
||||
}, [currentPlayerRef, isMpvPlayer, play]);
|
||||
|
||||
const handlePause = useCallback(() => {
|
||||
if (settings.type === PlaybackType.LOCAL) {
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.pause();
|
||||
}
|
||||
|
||||
pause();
|
||||
}, [pause, settings]);
|
||||
}, [isMpvPlayer, pause]);
|
||||
|
||||
const handleStop = () => {
|
||||
if (settings.type === PlaybackType.LOCAL) {
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.stop();
|
||||
} else {
|
||||
stopPlayback();
|
||||
@@ -73,7 +79,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
|
||||
const handleNextTrack = useCallback(() => {
|
||||
const playerData = next();
|
||||
|
||||
if (settings.type === PlaybackType.LOCAL) {
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.next();
|
||||
} else {
|
||||
@@ -81,12 +87,12 @@ export const useCenterControls = (args: { playersRef: any }) => {
|
||||
}
|
||||
|
||||
setCurrentTime(0);
|
||||
}, [next, resetPlayers, setCurrentTime, settings]);
|
||||
}, [isMpvPlayer, next, resetPlayers, setCurrentTime]);
|
||||
|
||||
const handlePrevTrack = useCallback(() => {
|
||||
const playerData = prev();
|
||||
|
||||
if (settings.type === PlaybackType.LOCAL) {
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.previous();
|
||||
} else {
|
||||
@@ -94,7 +100,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
|
||||
}
|
||||
|
||||
setCurrentTime(0);
|
||||
}, [prev, resetPlayers, setCurrentTime, settings]);
|
||||
}, [isMpvPlayer, prev, resetPlayers, setCurrentTime]);
|
||||
|
||||
const handlePlayPause = useCallback(() => {
|
||||
if (queue) {
|
||||
@@ -108,30 +114,26 @@ export const useCenterControls = (args: { playersRef: any }) => {
|
||||
return null;
|
||||
}, [handlePause, handlePlay, playerStatus, queue]);
|
||||
|
||||
const handleSkipBackward = () => {
|
||||
const skipBackwardSec = 5;
|
||||
|
||||
if (settings.type === PlaybackType.LOCAL) {
|
||||
const newTime = currentTime - skipBackwardSec;
|
||||
mpvPlayer.seek(-skipBackwardSec);
|
||||
const handleSkipBackward = (seconds: number) => {
|
||||
if (isMpvPlayer) {
|
||||
const newTime = currentTime - seconds;
|
||||
mpvPlayer.seek(-seconds);
|
||||
setCurrentTime(newTime < 0 ? 0 : newTime);
|
||||
} else {
|
||||
const newTime = currentPlayerRef.getCurrentTime() - skipBackwardSec;
|
||||
const newTime = currentPlayerRef?.getCurrentTime() - seconds;
|
||||
resetNextPlayer();
|
||||
setCurrentTime(newTime);
|
||||
currentPlayerRef.seekTo(newTime);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSkipForward = () => {
|
||||
const skipForwardSec = 5;
|
||||
|
||||
if (settings.type === PlaybackType.LOCAL) {
|
||||
const newTime = currentTime + skipForwardSec;
|
||||
mpvPlayer.seek(skipForwardSec);
|
||||
const handleSkipForward = (seconds: number) => {
|
||||
if (isMpvPlayer) {
|
||||
const newTime = currentTime + seconds;
|
||||
mpvPlayer.seek(seconds);
|
||||
setCurrentTime(newTime);
|
||||
} else {
|
||||
const checkNewTime = currentPlayerRef.getCurrentTime() + skipForwardSec;
|
||||
const checkNewTime = currentPlayerRef?.getCurrentTime() + seconds;
|
||||
const songDuration = currentPlayerRef.player.player.duration;
|
||||
|
||||
const newTime =
|
||||
@@ -147,26 +149,67 @@ export const useCenterControls = (args: { playersRef: any }) => {
|
||||
(e: number | any) => {
|
||||
setCurrentTime(e);
|
||||
|
||||
if (settings.type === PlaybackType.LOCAL) {
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.seekTo(e);
|
||||
} else {
|
||||
currentPlayerRef.seekTo(e);
|
||||
}
|
||||
},
|
||||
[currentPlayerRef, setCurrentTime, settings]
|
||||
[currentPlayerRef, isMpvPlayer, setCurrentTime]
|
||||
);
|
||||
|
||||
// const handleVolumeSlider = useCallback(
|
||||
// (e: number | any) => {
|
||||
// // dispatch(setVolume(e));
|
||||
// if (settings.type === PlaybackType.Local) {
|
||||
// // playerApi.volume(currentTime, e);
|
||||
// }
|
||||
useEffect(() => {
|
||||
ipc?.RENDERER_PLAYER_PLAY_PAUSE(() => {
|
||||
const { status } = usePlayerStore.getState().current;
|
||||
if (status === PlayerStatus.PAUSED) {
|
||||
play();
|
||||
|
||||
// setSettings({ volume: (e / 100) ** 2 });
|
||||
// },
|
||||
// [currentTime, setSettings, settings]
|
||||
// );
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.play();
|
||||
}
|
||||
} else {
|
||||
pause();
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.pause();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
ipc?.RENDERER_PLAYER_NEXT(() => {
|
||||
const playerData = next();
|
||||
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.next();
|
||||
}
|
||||
});
|
||||
|
||||
ipc?.RENDERER_PLAYER_PREVIOUS(() => {
|
||||
const playerData = prev();
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.previous();
|
||||
}
|
||||
});
|
||||
|
||||
ipc?.RENDERER_PLAYER_PLAY(() => play());
|
||||
|
||||
ipc?.RENDERER_PLAYER_PAUSE(() => pause());
|
||||
|
||||
ipc?.RENDERER_PLAYER_STOP(() => pause());
|
||||
|
||||
ipc?.RENDERER_PLAYER_CURRENT_TIME((_event, time) => setCurrentTime(time));
|
||||
|
||||
return () => {
|
||||
ipc?.removeAllListeners('renderer-player-play-pause');
|
||||
ipc?.removeAllListeners('renderer-player-next');
|
||||
ipc?.removeAllListeners('renderer-player-previous');
|
||||
ipc?.removeAllListeners('renderer-player-play');
|
||||
ipc?.removeAllListeners('renderer-player-pause');
|
||||
ipc?.removeAllListeners('renderer-player-stop');
|
||||
ipc?.removeAllListeners('renderer-player-current-time');
|
||||
};
|
||||
}, [isMpvPlayer, next, pause, play, prev, setCurrentTime]);
|
||||
|
||||
return {
|
||||
handleNextTrack,
|
||||
|
||||
@@ -3,14 +3,22 @@ import { api } from '@/renderer/api';
|
||||
import { queryKeys } from '@/renderer/api/query-keys';
|
||||
import { useServerCredential } from '@/renderer/features/shared';
|
||||
import { useAuthStore, usePlayerStore } from '@/renderer/store';
|
||||
import { LibraryItem, Play, PlayQueueAddOptions } from '@/renderer/types';
|
||||
import { useSettingsStore } from '@/renderer/store/settings.store';
|
||||
import {
|
||||
LibraryItem,
|
||||
Play,
|
||||
PlaybackType,
|
||||
PlayQueueAddOptions,
|
||||
} from '@/renderer/types';
|
||||
import { mpvPlayer } from '../utils/mpv-player';
|
||||
|
||||
export const usePlayQueueHandler = () => {
|
||||
const queryClient = useQueryClient();
|
||||
const serverId = useAuthStore((state) => state.currentServer?.id) || '';
|
||||
const { serverToken, isImageTokenRequired } = useServerCredential();
|
||||
const play = usePlayerStore((state) => state.play);
|
||||
const addToQueue = usePlayerStore((state) => state.addToQueue);
|
||||
const playerType = useSettingsStore((state) => state.player.type);
|
||||
|
||||
const handlePlayQueueAdd = async (options: PlayQueueAddOptions) => {
|
||||
if (options.byData) {
|
||||
@@ -55,10 +63,18 @@ export const usePlayQueueHandler = () => {
|
||||
const playerData = addToQueue(songs, options.play);
|
||||
|
||||
if (options.play === Play.NEXT || options.play === Play.LAST) {
|
||||
mpvPlayer.setQueueNext(playerData);
|
||||
} else {
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.play();
|
||||
if (playerType === PlaybackType.LOCAL) {
|
||||
mpvPlayer.setQueueNext(playerData);
|
||||
}
|
||||
}
|
||||
|
||||
if (options.play === Play.NOW) {
|
||||
if (playerType === PlaybackType.LOCAL) {
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.play();
|
||||
}
|
||||
|
||||
play();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { useEffect } from 'react';
|
||||
import { usePlayerStore } from '../../../store';
|
||||
import { mpvPlayer } from '../utils/mpvPlayer';
|
||||
import { mpvPlayer } from '../utils/mpv-player';
|
||||
|
||||
export const useRightControls = () => {
|
||||
const setSettings = usePlayerStore((state) => state.setSettings);
|
||||
const volume = usePlayerStore((state) => state.settings.volume);
|
||||
const muted = usePlayerStore((state) => state.settings.muted);
|
||||
const setVolume = usePlayerStore((state) => state.setVolume);
|
||||
const volume = usePlayerStore((state) => state.volume);
|
||||
const muted = usePlayerStore((state) => state.muted);
|
||||
const setMuted = usePlayerStore((state) => state.setMuted);
|
||||
|
||||
// Ensure that the mpv player volume is set on startup
|
||||
useEffect(() => {
|
||||
@@ -19,14 +20,15 @@ export const useRightControls = () => {
|
||||
|
||||
const handleVolumeSlider = (e: number) => {
|
||||
mpvPlayer.volume(e);
|
||||
setVolume(e);
|
||||
};
|
||||
|
||||
const handleVolumeSliderState = (e: number) => {
|
||||
setSettings({ volume: e });
|
||||
setVolume(e);
|
||||
};
|
||||
|
||||
const handleMute = () => {
|
||||
setSettings({ muted: !muted });
|
||||
setMuted(!muted);
|
||||
mpvPlayer.mute();
|
||||
};
|
||||
|
||||
|
||||
+1
-14
@@ -34,20 +34,7 @@ const volume = (value: number) => ipc?.PLAYER_VOLUME(value);
|
||||
|
||||
const mute = () => ipc?.PLAYER_MUTE();
|
||||
|
||||
const {
|
||||
setCurrentTime,
|
||||
play: setPlay,
|
||||
pause: setPause,
|
||||
autoNext,
|
||||
} = usePlayerStore.getState();
|
||||
|
||||
ipc?.RENDERER_PLAYER_PLAY(() => setPlay());
|
||||
|
||||
ipc?.RENDERER_PLAYER_PAUSE(() => setPause());
|
||||
|
||||
ipc?.RENDERER_PLAYER_STOP(() => setPause());
|
||||
|
||||
ipc?.RENDERER_PLAYER_CURRENT_TIME((_event, time) => setCurrentTime(time));
|
||||
const { autoNext } = usePlayerStore.getState();
|
||||
|
||||
ipc?.RENDERER_PLAYER_AUTO_NEXT(() => {
|
||||
const playerData = autoNext();
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Select, Stack } from '@mantine/core';
|
||||
import { SettingsOptions } from '@/renderer/features/settings/components/settings-option';
|
||||
|
||||
export const GeneralTab = () => {
|
||||
const options = [
|
||||
{
|
||||
control: <Select disabled data={[]} />,
|
||||
description: 'Primary application language ',
|
||||
title: 'Language',
|
||||
},
|
||||
{
|
||||
control: <Select disabled data={[]} />,
|
||||
description: 'Theme for the application',
|
||||
title: 'Theme',
|
||||
},
|
||||
{
|
||||
control: <Select disabled data={[]} />,
|
||||
description: 'Font for the application',
|
||||
title: 'Font',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select disabled data={['Windows', 'macOS']} defaultValue="Windows" />
|
||||
),
|
||||
description: 'Font for the application',
|
||||
title: 'Titlebar style',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Stack mt="1rem" spacing="xl">
|
||||
{options.map((option) => (
|
||||
<SettingsOptions key={`general-${option.title}`} {...option} />
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,284 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Divider, Group, SelectItem, Stack } from '@mantine/core';
|
||||
import isElectron from 'is-electron';
|
||||
import {
|
||||
NumberInput,
|
||||
SegmentedControl,
|
||||
Select,
|
||||
Slider,
|
||||
Switch,
|
||||
toast,
|
||||
Tooltip,
|
||||
} from '@/renderer/components';
|
||||
import { mpvPlayer } from '@/renderer/features/player/utils/mpv-player';
|
||||
import { SettingsOptions } from '@/renderer/features/settings/components/settings-option';
|
||||
import { usePlayerStore } from '@/renderer/store';
|
||||
import { useSettingsStore } from '@/renderer/store/settings.store';
|
||||
import {
|
||||
Play,
|
||||
PlaybackStyle,
|
||||
PlaybackType,
|
||||
PlayerStatus,
|
||||
} from '@/renderer/types';
|
||||
|
||||
const getAudioDevice = async () => {
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
return (devices || []).filter(
|
||||
(dev: MediaDeviceInfo) => dev.kind === 'audiooutput'
|
||||
);
|
||||
};
|
||||
|
||||
const ipc = isElectron() ? window.electron.ipcRenderer : null;
|
||||
|
||||
const set = (property: string, value: any) => {
|
||||
ipc?.SETTINGS_SET({ property, value });
|
||||
};
|
||||
|
||||
export const PlaybackTab = () => {
|
||||
const settings = useSettingsStore((state) => state.player);
|
||||
const update = useSettingsStore((state) => state.setSettings);
|
||||
const status = usePlayerStore((state) => state.current.status);
|
||||
const [audioDevices, setAudioDevices] = useState<SelectItem[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const getAudioDevices = () => {
|
||||
getAudioDevice()
|
||||
.then((dev) =>
|
||||
setAudioDevices(
|
||||
dev.map((d) => ({ label: d.label, value: d.deviceId }))
|
||||
)
|
||||
)
|
||||
.catch(() => toast.error({ message: 'Error fetching audio devices' }));
|
||||
};
|
||||
|
||||
getAudioDevices();
|
||||
}, []);
|
||||
|
||||
const playerOptions = [
|
||||
{
|
||||
control: (
|
||||
<SegmentedControl
|
||||
data={[
|
||||
{
|
||||
disabled: !isElectron(),
|
||||
label: 'MPV',
|
||||
value: PlaybackType.LOCAL,
|
||||
},
|
||||
{ label: 'Web', value: PlaybackType.WEB },
|
||||
]}
|
||||
defaultValue={settings.type}
|
||||
disabled={status === PlayerStatus.PLAYING}
|
||||
onChange={(e) => {
|
||||
update({ player: { ...settings, type: e as PlaybackType } });
|
||||
if (isElectron() && e === PlaybackType.LOCAL) {
|
||||
const queueData = usePlayerStore.getState().getPlayerData();
|
||||
mpvPlayer.setQueue(queueData);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'The audio player to use for playback (desktop only)',
|
||||
isHidden: !isElectron(),
|
||||
note:
|
||||
status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
|
||||
title: 'Audio player',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
clearable
|
||||
data={audioDevices}
|
||||
defaultValue={settings.audioDeviceId}
|
||||
disabled={settings.type !== PlaybackType.WEB}
|
||||
onChange={(e) =>
|
||||
update({ player: { ...settings, audioDeviceId: e } })
|
||||
}
|
||||
/>
|
||||
),
|
||||
description: 'The audio device to use for playback (web player only)',
|
||||
isHidden: !isElectron(),
|
||||
title: 'Audio device',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<SegmentedControl
|
||||
data={[
|
||||
{ label: 'Normal', value: PlaybackStyle.GAPLESS },
|
||||
{ label: 'Crossfade', value: PlaybackStyle.CROSSFADE },
|
||||
]}
|
||||
defaultValue={settings.style}
|
||||
disabled={
|
||||
settings.type !== PlaybackType.WEB ||
|
||||
status === PlayerStatus.PLAYING
|
||||
}
|
||||
onChange={(e) =>
|
||||
update({ player: { ...settings, style: e as PlaybackStyle } })
|
||||
}
|
||||
/>
|
||||
),
|
||||
description: 'Adjust the playback style (web player only)',
|
||||
isHidden: false,
|
||||
note:
|
||||
status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
|
||||
title: 'Playback style',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Slider
|
||||
defaultValue={settings.crossfadeDuration}
|
||||
disabled={
|
||||
settings.type !== PlaybackType.WEB ||
|
||||
settings.style !== PlaybackStyle.CROSSFADE ||
|
||||
status === PlayerStatus.PLAYING
|
||||
}
|
||||
max={15}
|
||||
min={0}
|
||||
w={100}
|
||||
onChangeEnd={(e) =>
|
||||
update({ player: { ...settings, crossfadeDuration: e } })
|
||||
}
|
||||
/>
|
||||
),
|
||||
description: 'Adjust the crossfade duration (web player only)',
|
||||
isHidden: false,
|
||||
note:
|
||||
status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
|
||||
title: 'Crossfade Duration',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Switch
|
||||
defaultChecked={settings.globalMediaHotkeys}
|
||||
disabled={!isElectron()}
|
||||
onChange={(e) => {
|
||||
update({
|
||||
player: {
|
||||
...settings,
|
||||
globalMediaHotkeys: e.currentTarget.checked,
|
||||
},
|
||||
});
|
||||
set('global_media_hotkeys', e.currentTarget.checked);
|
||||
|
||||
if (e.currentTarget.checked) {
|
||||
ipc?.PLAYER_MEDIA_KEYS_ENABLE();
|
||||
} else {
|
||||
ipc?.PLAYER_MEDIA_KEYS_DISABLE();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description:
|
||||
'Enable or disable the usage of your system media hotkeys to control the audio player (desktop only)',
|
||||
isHidden: false,
|
||||
title: 'Global media hotkeys',
|
||||
},
|
||||
];
|
||||
|
||||
const otherOptions = [
|
||||
{
|
||||
control: (
|
||||
<SegmentedControl
|
||||
data={[
|
||||
{ label: 'Now', value: Play.NOW },
|
||||
{ label: 'Next', value: Play.NEXT },
|
||||
{ label: 'Last', value: Play.LAST },
|
||||
]}
|
||||
defaultValue={settings.playButtonBehavior}
|
||||
onChange={(e) =>
|
||||
update({
|
||||
player: {
|
||||
...settings,
|
||||
playButtonBehavior: e as Play,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
),
|
||||
description:
|
||||
'The default behavior of the play button when adding songs to the queue',
|
||||
isHidden: false,
|
||||
title: 'Play button behavior',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Switch
|
||||
defaultChecked={settings.skipButtons?.enabled}
|
||||
onChange={(e) =>
|
||||
update({
|
||||
player: {
|
||||
...settings,
|
||||
skipButtons: {
|
||||
...settings.skipButtons,
|
||||
enabled: e.currentTarget.checked,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
),
|
||||
description: 'Show or hide the skip buttons on the playerbar',
|
||||
isHidden: false,
|
||||
title: 'Show skip buttons',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Group>
|
||||
<Tooltip label="Backward">
|
||||
<NumberInput
|
||||
defaultValue={settings.skipButtons.skipBackwardSeconds}
|
||||
width={75}
|
||||
onBlur={(e) =>
|
||||
update({
|
||||
player: {
|
||||
...settings,
|
||||
skipButtons: {
|
||||
...settings.skipButtons,
|
||||
skipBackwardSeconds: Number(e.currentTarget.value),
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip label="Forward">
|
||||
<NumberInput
|
||||
defaultValue={settings.skipButtons.skipForwardSeconds}
|
||||
width={75}
|
||||
onBlur={(e) =>
|
||||
update({
|
||||
player: {
|
||||
...settings,
|
||||
skipButtons: {
|
||||
...settings.skipButtons,
|
||||
skipForwardSeconds: Number(e.currentTarget.value),
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
),
|
||||
description:
|
||||
'The number (in seconds) to skip forward or backward when using the skip buttons',
|
||||
isHidden: false,
|
||||
title: 'Skip duration',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Stack my={10} spacing="xl">
|
||||
{playerOptions
|
||||
.filter((o) => !o.isHidden)
|
||||
.map((option) => (
|
||||
<SettingsOptions key={`playback-${option.title}`} {...option} />
|
||||
))}
|
||||
<Divider />
|
||||
{otherOptions
|
||||
.filter((o) => !o.isHidden)
|
||||
.map((option) => (
|
||||
<SettingsOptions key={`playerbar-${option.title}`} {...option} />
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import { Group, Stack } from '@mantine/core';
|
||||
import { RiInformationLine } from 'react-icons/ri';
|
||||
import { Text, Tooltip } from '@/renderer/components';
|
||||
|
||||
interface SettingsOptionProps {
|
||||
control: React.ReactNode;
|
||||
description?: React.ReactNode | string;
|
||||
note?: string;
|
||||
title: React.ReactNode | string;
|
||||
}
|
||||
|
||||
export const SettingsOptions = ({
|
||||
title,
|
||||
description,
|
||||
control,
|
||||
note,
|
||||
}: SettingsOptionProps) => {
|
||||
return (
|
||||
<>
|
||||
<Group noWrap position="apart">
|
||||
<Stack spacing="xs" sx={{ maxWidth: '50%' }}>
|
||||
<Group>
|
||||
<Text $noSelect size="sm">
|
||||
{title}
|
||||
</Text>
|
||||
{note && (
|
||||
<Tooltip label={note} openDelay={0}>
|
||||
<Group>
|
||||
<RiInformationLine size={15} />
|
||||
</Group>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Group>
|
||||
{React.isValidElement(description) ? (
|
||||
description
|
||||
) : (
|
||||
<Text $noSelect $secondary size="sm">
|
||||
{description}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
<Group position="right">{control}</Group>
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
SettingsOptions.defaultProps = {
|
||||
description: undefined,
|
||||
note: undefined,
|
||||
};
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Box } from '@mantine/core';
|
||||
import { Tabs } from '@/renderer/components';
|
||||
import { GeneralTab } from '@/renderer/features/settings/components/general-tab';
|
||||
import { PlaybackTab } from '@/renderer/features/settings/components/playback-tab';
|
||||
import { useSettingsStore } from '@/renderer/store/settings.store';
|
||||
|
||||
export const Settings = () => {
|
||||
const currentTab = useSettingsStore((state) => state.tab);
|
||||
const update = useSettingsStore((state) => state.setSettings);
|
||||
return (
|
||||
<Box px="1rem" sx={{ height: '800px', maxHeight: '50vh' }}>
|
||||
<Tabs
|
||||
orientation="horizontal"
|
||||
styles={{
|
||||
tab: {
|
||||
fontSize: '1.1rem',
|
||||
padding: '0.5rem 1rem',
|
||||
},
|
||||
}}
|
||||
value={currentTab}
|
||||
variant="default"
|
||||
onChange={(e) => console.log(e)}
|
||||
onTabChange={(e) => e && update({ tab: e })}
|
||||
>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="general">General</Tabs.Tab>
|
||||
<Tabs.Tab value="playback">Playback</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="general">
|
||||
<GeneralTab />
|
||||
</Tabs.Panel>
|
||||
<Tabs.Panel value="playback">
|
||||
<PlaybackTab />
|
||||
</Tabs.Panel>
|
||||
</Tabs>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -1,5 +1,6 @@
|
||||
import isElectron from 'is-electron';
|
||||
|
||||
export * from './components/settings';
|
||||
export * from './hooks/use-default-settings';
|
||||
|
||||
const ipc = isElectron() ? window.electron.ipcRenderer : null;
|
||||
@@ -14,7 +15,7 @@ const restart = () => {
|
||||
ipc?.APP_RESTART();
|
||||
};
|
||||
|
||||
export const settings = {
|
||||
export const localSettings = {
|
||||
get,
|
||||
restart,
|
||||
set,
|
||||
|
||||
+182
-201
@@ -6,15 +6,7 @@ import { nanoid } from 'nanoid/non-secure';
|
||||
import create from 'zustand';
|
||||
import { devtools, persist } from 'zustand/middleware';
|
||||
import { Song } from '@/renderer/api/types';
|
||||
import {
|
||||
Play,
|
||||
CrossfadeStyle,
|
||||
PlaybackStyle,
|
||||
PlaybackType,
|
||||
PlayerRepeat,
|
||||
PlayerStatus,
|
||||
UniqueId,
|
||||
} from '@/renderer/types';
|
||||
import { Play, PlayerStatus, UniqueId } from '@/renderer/types';
|
||||
|
||||
type QueueSong = Song & UniqueId;
|
||||
|
||||
@@ -26,22 +18,14 @@ export interface PlayerState {
|
||||
status: PlayerStatus;
|
||||
time: number;
|
||||
};
|
||||
muted: boolean;
|
||||
queue: {
|
||||
default: QueueSong[];
|
||||
previousNode: QueueSong;
|
||||
shuffled: QueueSong[];
|
||||
sorted: QueueSong[];
|
||||
};
|
||||
settings: {
|
||||
crossfadeDuration: number;
|
||||
crossfadeStyle: CrossfadeStyle;
|
||||
muted: boolean;
|
||||
repeat: PlayerRepeat;
|
||||
shuffle: boolean;
|
||||
style: PlaybackStyle;
|
||||
type: PlaybackType;
|
||||
volume: number;
|
||||
};
|
||||
volume: number;
|
||||
}
|
||||
|
||||
export interface PlayerData {
|
||||
@@ -75,206 +59,203 @@ export interface PlayerSlice extends PlayerState {
|
||||
prev: () => PlayerData;
|
||||
setCurrentIndex: (index: number) => PlayerData;
|
||||
setCurrentTime: (time: number) => void;
|
||||
setSettings: (settings: Partial<PlayerState['settings']>) => void;
|
||||
setMuted: (muted: boolean) => void;
|
||||
setVolume: (volume: number) => void;
|
||||
}
|
||||
|
||||
export const usePlayerStore = create<PlayerSlice>()(
|
||||
persist(
|
||||
devtools((set, get) => ({
|
||||
addToQueue: (songs, type) => {
|
||||
const queueSongs = map(songs, (song) => ({
|
||||
...song,
|
||||
uniqueId: nanoid(),
|
||||
}));
|
||||
devtools(
|
||||
(set, get) => ({
|
||||
addToQueue: (songs, type) => {
|
||||
const queueSongs = map(songs, (song) => ({
|
||||
...song,
|
||||
uniqueId: nanoid(),
|
||||
}));
|
||||
|
||||
if (type === Play.NOW) {
|
||||
if (type === Play.NOW) {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.queue.default = queueSongs;
|
||||
state.current.time = 0;
|
||||
state.current.player = 1;
|
||||
state.current.index = 0;
|
||||
state.current.song = queueSongs[0];
|
||||
})
|
||||
);
|
||||
} else if (type === Play.LAST) {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.queue.default = [...get().queue.default, ...queueSongs];
|
||||
})
|
||||
);
|
||||
} else if (type === Play.NEXT) {
|
||||
const queue = get().queue.default;
|
||||
const currentIndex = get().current.index;
|
||||
|
||||
set(
|
||||
produce((state) => {
|
||||
state.queue.default = [
|
||||
...queue.slice(0, currentIndex + 1),
|
||||
...queueSongs,
|
||||
...queue.slice(currentIndex + 1),
|
||||
];
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return get().getPlayerData();
|
||||
},
|
||||
autoNext: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.queue.default = queueSongs;
|
||||
state.current.time = 0;
|
||||
state.current.player = 1;
|
||||
state.current.index = 0;
|
||||
state.current.song = queueSongs[0];
|
||||
state.current.index += 1;
|
||||
state.current.player = state.current.player === 1 ? 2 : 1;
|
||||
state.current.song = state.queue.default[state.current.index];
|
||||
state.queue.previousNode = get().current.song;
|
||||
})
|
||||
);
|
||||
} else if (type === Play.LAST) {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.queue.default = [...get().queue.default, ...queueSongs];
|
||||
})
|
||||
);
|
||||
} else if (type === Play.NEXT) {
|
||||
|
||||
return get().getPlayerData();
|
||||
},
|
||||
current: {
|
||||
index: 0,
|
||||
player: 1,
|
||||
song: {} as QueueSong,
|
||||
status: PlayerStatus.PAUSED,
|
||||
time: 0,
|
||||
},
|
||||
getPlayerData: () => {
|
||||
const queue = get().queue.default;
|
||||
const currentIndex = get().current.index;
|
||||
const currentPlayer = get().current.player;
|
||||
|
||||
set(
|
||||
produce((state) => {
|
||||
state.queue.default = [
|
||||
...queue.slice(0, currentIndex + 1),
|
||||
...queueSongs,
|
||||
...queue.slice(currentIndex + 1),
|
||||
];
|
||||
})
|
||||
);
|
||||
}
|
||||
const player1 =
|
||||
currentPlayer === 1
|
||||
? queue[get().current.index]
|
||||
: queue[get().current.index + 1];
|
||||
|
||||
return get().getPlayerData();
|
||||
},
|
||||
autoNext: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.current.time = 0;
|
||||
state.current.index += 1;
|
||||
state.current.player = state.current.player === 1 ? 2 : 1;
|
||||
state.current.song = state.queue.default[state.current.index];
|
||||
state.queue.previousNode = get().current.song;
|
||||
})
|
||||
);
|
||||
const player2 =
|
||||
currentPlayer === 1
|
||||
? queue[get().current.index + 1]
|
||||
: queue[get().current.index];
|
||||
|
||||
return get().getPlayerData();
|
||||
},
|
||||
current: {
|
||||
index: 0,
|
||||
player: 1,
|
||||
song: {} as QueueSong,
|
||||
status: PlayerStatus.PAUSED,
|
||||
time: 0,
|
||||
},
|
||||
getPlayerData: () => {
|
||||
const queue = get().queue.default;
|
||||
const currentPlayer = get().current.player;
|
||||
|
||||
const player1 =
|
||||
currentPlayer === 1
|
||||
? queue[get().current.index]
|
||||
: queue[get().current.index + 1];
|
||||
|
||||
const player2 =
|
||||
currentPlayer === 1
|
||||
? queue[get().current.index + 1]
|
||||
: queue[get().current.index];
|
||||
|
||||
return {
|
||||
current: {
|
||||
index: get().current.index,
|
||||
player: get().current.player,
|
||||
song: get().current.song,
|
||||
status: get().current.status,
|
||||
},
|
||||
player1,
|
||||
player2,
|
||||
queue: {
|
||||
return {
|
||||
current: {
|
||||
index: get().current.index,
|
||||
player: get().current.player,
|
||||
song: get().current.song,
|
||||
status: get().current.status,
|
||||
},
|
||||
player1,
|
||||
player2,
|
||||
queue: {
|
||||
current: queue[get().current.index],
|
||||
next: queue[get().current.index + 1],
|
||||
previous: queue[get().current.index - 1],
|
||||
},
|
||||
};
|
||||
},
|
||||
getQueueData: () => {
|
||||
const queue = get().queue.default;
|
||||
return {
|
||||
current: queue[get().current.index],
|
||||
next: queue[get().current.index + 1],
|
||||
previous: queue[get().current.index - 1],
|
||||
},
|
||||
};
|
||||
},
|
||||
getQueueData: () => {
|
||||
const queue = get().queue.default;
|
||||
return {
|
||||
current: queue[get().current.index],
|
||||
next: queue[get().current.index + 1],
|
||||
previous: queue[get().current.index - 1],
|
||||
};
|
||||
},
|
||||
next: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.current.time = 0;
|
||||
state.current.index += 1;
|
||||
state.current.player = 1;
|
||||
state.current.song = state.queue.default[state.current.index];
|
||||
state.queue.previousNode = get().current.song;
|
||||
})
|
||||
);
|
||||
|
||||
return get().getPlayerData();
|
||||
},
|
||||
pause: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.current.status = PlayerStatus.PAUSED;
|
||||
})
|
||||
);
|
||||
},
|
||||
play: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.current.status = PlayerStatus.PLAYING;
|
||||
})
|
||||
);
|
||||
},
|
||||
player1: () => {
|
||||
return get().getPlayerData().player1;
|
||||
},
|
||||
player2: () => {
|
||||
return get().getPlayerData().player2;
|
||||
},
|
||||
prev: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.current.time = 0;
|
||||
state.current.index =
|
||||
state.current.index - 1 < 0 ? 0 : state.current.index - 1;
|
||||
state.current.player = 1;
|
||||
state.current.song = state.queue.default[state.current.index];
|
||||
state.queue.previousNode = get().current.song;
|
||||
})
|
||||
);
|
||||
|
||||
return get().getPlayerData();
|
||||
},
|
||||
queue: {
|
||||
default: [],
|
||||
previousNode: {} as QueueSong,
|
||||
shuffled: [],
|
||||
sorted: [],
|
||||
},
|
||||
setCurrentIndex: (index) => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.current.time = 0;
|
||||
state.current.index = index;
|
||||
state.current.player = 1;
|
||||
state.current.song = state.queue.default[index];
|
||||
state.queue.previousNode = get().current.song;
|
||||
})
|
||||
);
|
||||
|
||||
return get().getPlayerData();
|
||||
},
|
||||
setCurrentTime: (time) => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.current.time = time;
|
||||
})
|
||||
);
|
||||
},
|
||||
setSettings: (settings) => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.settings = { ...get().settings, ...settings };
|
||||
})
|
||||
);
|
||||
|
||||
// try {
|
||||
// setLocalStorageSettings('player', get().settings);
|
||||
// } catch (err) {
|
||||
// console.log('none');
|
||||
// }
|
||||
},
|
||||
settings: {
|
||||
crossfadeDuration: 5,
|
||||
crossfadeStyle: CrossfadeStyle.EQUALPOWER,
|
||||
};
|
||||
},
|
||||
muted: false,
|
||||
repeat: PlayerRepeat.NONE,
|
||||
shuffle: false,
|
||||
style: PlaybackStyle.GAPLESS,
|
||||
type: PlaybackType.LOCAL,
|
||||
next: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.current.time = 0;
|
||||
state.current.index += 1;
|
||||
state.current.player = 1;
|
||||
state.current.song = state.queue.default[state.current.index];
|
||||
state.queue.previousNode = get().current.song;
|
||||
})
|
||||
);
|
||||
|
||||
return get().getPlayerData();
|
||||
},
|
||||
pause: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.current.status = PlayerStatus.PAUSED;
|
||||
})
|
||||
);
|
||||
},
|
||||
play: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.current.status = PlayerStatus.PLAYING;
|
||||
})
|
||||
);
|
||||
},
|
||||
player1: () => {
|
||||
return get().getPlayerData().player1;
|
||||
},
|
||||
player2: () => {
|
||||
return get().getPlayerData().player2;
|
||||
},
|
||||
prev: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.current.time = 0;
|
||||
state.current.index =
|
||||
state.current.index - 1 < 0 ? 0 : state.current.index - 1;
|
||||
state.current.player = 1;
|
||||
state.current.song = state.queue.default[state.current.index];
|
||||
state.queue.previousNode = get().current.song;
|
||||
})
|
||||
);
|
||||
|
||||
return get().getPlayerData();
|
||||
},
|
||||
queue: {
|
||||
default: [],
|
||||
previousNode: {} as QueueSong,
|
||||
shuffled: [],
|
||||
sorted: [],
|
||||
},
|
||||
setCurrentIndex: (index) => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.current.time = 0;
|
||||
state.current.index = index;
|
||||
state.current.player = 1;
|
||||
state.current.song = state.queue.default[index];
|
||||
state.queue.previousNode = get().current.song;
|
||||
})
|
||||
);
|
||||
|
||||
return get().getPlayerData();
|
||||
},
|
||||
setCurrentTime: (time) => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.current.time = time;
|
||||
})
|
||||
);
|
||||
},
|
||||
setMuted: (muted: boolean) => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.muted = muted;
|
||||
})
|
||||
);
|
||||
},
|
||||
setVolume: (volume: number) => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.volume = volume;
|
||||
})
|
||||
);
|
||||
},
|
||||
volume: 50,
|
||||
},
|
||||
})),
|
||||
{ name: 'player' }
|
||||
}),
|
||||
{ name: 'store_player' }
|
||||
),
|
||||
{ name: 'store_player' }
|
||||
)
|
||||
);
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
/* eslint-disable prefer-destructuring */
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import merge from 'lodash/merge';
|
||||
import create from 'zustand';
|
||||
import { devtools, persist } from 'zustand/middleware';
|
||||
import { immer } from 'zustand/middleware/immer';
|
||||
import {
|
||||
CrossfadeStyle,
|
||||
Play,
|
||||
PlaybackStyle,
|
||||
PlaybackType,
|
||||
PlayerRepeat,
|
||||
} from '@/renderer/types';
|
||||
|
||||
export interface SettingsState {
|
||||
player: {
|
||||
audioDeviceId?: string | null;
|
||||
crossfadeDuration: number;
|
||||
crossfadeStyle: CrossfadeStyle;
|
||||
globalMediaHotkeys: boolean;
|
||||
muted: boolean;
|
||||
playButtonBehavior: Play;
|
||||
repeat: PlayerRepeat;
|
||||
scrobble: {
|
||||
enabled: boolean;
|
||||
scrobbleAtPercentage: number;
|
||||
};
|
||||
shuffle: boolean;
|
||||
skipButtons: {
|
||||
enabled: boolean;
|
||||
skipBackwardSeconds: number;
|
||||
skipForwardSeconds: number;
|
||||
};
|
||||
style: PlaybackStyle;
|
||||
type: PlaybackType;
|
||||
volume: number;
|
||||
};
|
||||
tab: 'general' | 'playback' | 'view' | string;
|
||||
}
|
||||
|
||||
export interface SettingsSlice extends SettingsState {
|
||||
setSettings: (data: Partial<SettingsState>) => void;
|
||||
}
|
||||
|
||||
export const useSettingsStore = create<SettingsSlice>()(
|
||||
persist(
|
||||
devtools(
|
||||
immer((set, get) => ({
|
||||
player: {
|
||||
audioDeviceId: undefined,
|
||||
crossfadeDuration: 5,
|
||||
crossfadeStyle: CrossfadeStyle.EQUALPOWER,
|
||||
globalMediaHotkeys: true,
|
||||
muted: false,
|
||||
playButtonBehavior: Play.NOW,
|
||||
repeat: PlayerRepeat.NONE,
|
||||
scrobble: {
|
||||
enabled: false,
|
||||
scrobbleAtPercentage: 75,
|
||||
},
|
||||
shuffle: false,
|
||||
skipButtons: {
|
||||
enabled: true,
|
||||
skipBackwardSeconds: 10,
|
||||
skipForwardSeconds: 30,
|
||||
},
|
||||
style: PlaybackStyle.GAPLESS,
|
||||
type: PlaybackType.LOCAL,
|
||||
volume: 50,
|
||||
},
|
||||
setSettings: (data) => {
|
||||
set({ ...get(), ...data });
|
||||
},
|
||||
tab: 'general',
|
||||
})),
|
||||
{ name: 'store_settings' }
|
||||
),
|
||||
{
|
||||
merge: (persistedState, currentState) => {
|
||||
return merge(persistedState, currentState);
|
||||
},
|
||||
name: 'store_settings',
|
||||
version: 1,
|
||||
}
|
||||
)
|
||||
);
|
||||
Reference in New Issue
Block a user