antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 18:13:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Lint all files

Browse source
This commit is contained in:
jeffvli 2023-07-01 19:10:05 -07:00
parent 22af76b4d6
commit 30e52ebb54
334 changed files with 76519 additions and 75932 deletions
Download patch file Download diff file Expand all files Collapse all files

278
src/renderer/features/settings/components/playback/audio-settings.tsx
View file

@ -3,8 +3,8 @@ import { SelectItem } from '@mantine/core';
import isElectron from 'is-electron';
import { Select, Slider, toast } from '/@/renderer/components';
import {
SettingsSection,
SettingOption,
SettingsSection,
SettingOption,
} from '/@/renderer/features/settings/components/settings-section';
import { useCurrentStatus, usePlayerStore } from '/@/renderer/store';
import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
@ -13,146 +13,152 @@ import { PlaybackType, PlayerStatus, PlaybackStyle, CrossfadeStyle } from '/@/re
const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
const getAudioDevice = async () => {
const devices = await navigator.mediaDevices.enumerateDevices();
return (devices || []).filter((dev: MediaDeviceInfo) => dev.kind === 'audiooutput');
const devices = await navigator.mediaDevices.enumerateDevices();
return (devices || []).filter((dev: MediaDeviceInfo) => dev.kind === 'audiooutput');
};
export const AudioSettings = () => {
const settings = usePlaybackSettings();
const { setSettings } = useSettingsStoreActions();
const status = useCurrentStatus();
const settings = usePlaybackSettings();
const { setSettings } = useSettingsStoreActions();
const status = useCurrentStatus();
const [audioDevices, setAudioDevices] = useState<SelectItem[]>([]);
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' }));
};
useEffect(() => {
const getAudioDevices = () => {
getAudioDevice()
.then((dev) =>
setAudioDevices(dev.map((d) => ({ label: d.label, value: d.deviceId }))),
)
.catch(() => toast.error({ message: 'Error fetching audio devices' }));
};
if (settings.type === PlaybackType.WEB) {
getAudioDevices();
}
}, [settings.type]);
if (settings.type === PlaybackType.WEB) {
getAudioDevices();
}
}, [settings.type]);
const audioOptions: SettingOption[] = [
{
control: (
<Select
data={[
{
disabled: !isElectron(),
label: 'MPV',
value: PlaybackType.LOCAL,
},
{ label: 'Web', value: PlaybackType.WEB },
]}
defaultValue={settings.type}
disabled={status === PlayerStatus.PLAYING}
onChange={(e) => {
setSettings({ playback: { ...settings, type: e as PlaybackType } });
if (isElectron() && e === PlaybackType.LOCAL) {
const queueData = usePlayerStore.getState().actions.getPlayerData();
mpvPlayer.setQueue(queueData);
}
}}
/>
),
description: 'The audio player to use for playback',
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) => setSettings({ playback: { ...settings, audioDeviceId: e } })}
/>
),
description: 'The audio device to use for playback (web player only)',
isHidden: !isElectron() || settings.type !== PlaybackType.WEB,
title: 'Audio device',
},
{
control: (
<Select
data={[
{ label: 'Normal', value: PlaybackStyle.GAPLESS },
{ label: 'Crossfade', value: PlaybackStyle.CROSSFADE },
]}
defaultValue={settings.style}
disabled={settings.type !== PlaybackType.WEB || status === PlayerStatus.PLAYING}
onChange={(e) => setSettings({ playback: { ...settings, style: e as PlaybackStyle } })}
/>
),
description: 'Adjust the playback style (web player only)',
isHidden: settings.type !== PlaybackType.WEB,
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) => setSettings({ playback: { ...settings, crossfadeDuration: e } })}
/>
),
description: 'Adjust the crossfade duration (web player only)',
isHidden: settings.type !== PlaybackType.WEB,
note: status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
title: 'Crossfade Duration',
},
{
control: (
<Select
data={[
{ label: 'Linear', value: CrossfadeStyle.LINEAR },
{ label: 'Constant Power', value: CrossfadeStyle.CONSTANT_POWER },
{
label: 'Constant Power (Slow cut)',
value: CrossfadeStyle.CONSTANT_POWER_SLOW_CUT,
},
{
label: 'Constant Power (Slow fade)',
value: CrossfadeStyle.CONSTANT_POWER_SLOW_FADE,
},
{ label: 'Dipped', value: CrossfadeStyle.DIPPED },
{ label: 'Equal Power', value: CrossfadeStyle.EQUALPOWER },
]}
defaultValue={settings.crossfadeStyle}
disabled={
settings.type !== PlaybackType.WEB ||
settings.style !== PlaybackStyle.CROSSFADE ||
status === PlayerStatus.PLAYING
}
width={200}
onChange={(e) => {
if (!e) return;
setSettings({
playback: { ...settings, crossfadeStyle: e as CrossfadeStyle },
});
}}
/>
),
description: 'Change the crossfade algorithm (web player only)',
isHidden: settings.type !== PlaybackType.WEB,
note: status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
title: 'Crossfade Style',
},
];
const audioOptions: SettingOption[] = [
{
control: (
<Select
data={[
{
disabled: !isElectron(),
label: 'MPV',
value: PlaybackType.LOCAL,
},
{ label: 'Web', value: PlaybackType.WEB },
]}
defaultValue={settings.type}
disabled={status === PlayerStatus.PLAYING}
onChange={(e) => {
setSettings({ playback: { ...settings, type: e as PlaybackType } });
if (isElectron() && e === PlaybackType.LOCAL) {
const queueData = usePlayerStore.getState().actions.getPlayerData();
mpvPlayer.setQueue(queueData);
}
}}
/>
),
description: 'The audio player to use for playback',
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) => setSettings({ playback: { ...settings, audioDeviceId: e } })}
/>
),
description: 'The audio device to use for playback (web player only)',
isHidden: !isElectron() || settings.type !== PlaybackType.WEB,
title: 'Audio device',
},
{
control: (
<Select
data={[
{ label: 'Normal', value: PlaybackStyle.GAPLESS },
{ label: 'Crossfade', value: PlaybackStyle.CROSSFADE },
]}
defaultValue={settings.style}
disabled={settings.type !== PlaybackType.WEB || status === PlayerStatus.PLAYING}
onChange={(e) =>
setSettings({ playback: { ...settings, style: e as PlaybackStyle } })
}
/>
),
description: 'Adjust the playback style (web player only)',
isHidden: settings.type !== PlaybackType.WEB,
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) =>
setSettings({ playback: { ...settings, crossfadeDuration: e } })
}
/>
),
description: 'Adjust the crossfade duration (web player only)',
isHidden: settings.type !== PlaybackType.WEB,
note: status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
title: 'Crossfade Duration',
},
{
control: (
<Select
data={[
{ label: 'Linear', value: CrossfadeStyle.LINEAR },
{ label: 'Constant Power', value: CrossfadeStyle.CONSTANT_POWER },
{
label: 'Constant Power (Slow cut)',
value: CrossfadeStyle.CONSTANT_POWER_SLOW_CUT,
},
{
label: 'Constant Power (Slow fade)',
value: CrossfadeStyle.CONSTANT_POWER_SLOW_FADE,
},
{ label: 'Dipped', value: CrossfadeStyle.DIPPED },
{ label: 'Equal Power', value: CrossfadeStyle.EQUALPOWER },
]}
defaultValue={settings.crossfadeStyle}
disabled={
settings.type !== PlaybackType.WEB ||
settings.style !== PlaybackStyle.CROSSFADE ||
status === PlayerStatus.PLAYING
}
width={200}
onChange={(e) => {
if (!e) return;
setSettings({
playback: { ...settings, crossfadeStyle: e as CrossfadeStyle },
});
}}
/>
),
description: 'Change the crossfade algorithm (web player only)',
isHidden: settings.type !== PlaybackType.WEB,
note: status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
title: 'Crossfade Style',
},
];
return <SettingsSection options={audioOptions} />;
return <SettingsSection options={audioOptions} />;
};

184
src/renderer/features/settings/components/playback/lyric-settings.tsx
View file

@ -1,6 +1,6 @@
import {
SettingOption,
SettingsSection,
SettingOption,
SettingsSection,
} from '/@/renderer/features/settings/components/settings-section';
import { useLyricsSettings, useSettingsStoreActions } from '/@/renderer/store';
import { MultiSelect, MultiSelectProps, NumberInput, Switch } from '/@/renderer/components';
@ -11,99 +11,99 @@ import { LyricSource } from '/@/renderer/api/types';
const localSettings = isElectron() ? window.electron.localSettings : null;
const WorkingButtonSelect = styled(MultiSelect)<MultiSelectProps>`
& button {
padding: 0;
}
& button {
padding: 0;
}
`;
export const LyricSettings = () => {
const settings = useLyricsSettings();
const { setSettings } = useSettingsStoreActions();
const settings = useLyricsSettings();
const { setSettings } = useSettingsStoreActions();
const lyricOptions: SettingOption[] = [
{
control: (
<Switch
aria-label="Follow lyrics"
defaultChecked={settings.follow}
onChange={(e) => {
setSettings({
lyrics: {
...settings,
follow: e.currentTarget.checked,
},
});
}}
/>
),
description: 'Enable or disable following of current lyric',
title: 'Follow current lyric',
},
{
control: (
<Switch
aria-label="Enable fetching lyrics"
defaultChecked={settings.fetch}
onChange={(e) => {
setSettings({
lyrics: {
...settings,
fetch: e.currentTarget.checked,
},
});
}}
/>
),
description: 'Enable or disable fetching lyrics for the current song',
isHidden: !isElectron(),
title: 'Fetch lyrics from the internet',
},
{
control: (
<WorkingButtonSelect
clearable
aria-label="Lyric providers"
data={Object.values(LyricSource)}
defaultValue={settings.sources}
width={300}
onChange={(e: LyricSource[]) => {
localSettings?.set('lyrics', e);
setSettings({
lyrics: {
...settings,
sources: e,
},
});
}}
/>
),
description: 'List of lyric fetchers (in order of preference)',
isHidden: !isElectron(),
title: 'Providers to fetch music',
},
{
control: (
<NumberInput
defaultValue={settings.delayMs}
step={10}
width={100}
onBlur={(e) => {
const value = Number(e.currentTarget.value);
setSettings({
lyrics: {
...settings,
delayMs: value,
},
});
}}
/>
),
description:
'Lyric offset (in milliseconds). Positive values mean that lyrics are shown later, and negative mean that lyrics are shown earlier',
isHidden: !isElectron(),
title: 'Lyric offset',
},
];
const lyricOptions: SettingOption[] = [
{
control: (
<Switch
aria-label="Follow lyrics"
defaultChecked={settings.follow}
onChange={(e) => {
setSettings({
lyrics: {
...settings,
follow: e.currentTarget.checked,
},
});
}}
/>
),
description: 'Enable or disable following of current lyric',
title: 'Follow current lyric',
},
{
control: (
<Switch
aria-label="Enable fetching lyrics"
defaultChecked={settings.fetch}
onChange={(e) => {
setSettings({
lyrics: {
...settings,
fetch: e.currentTarget.checked,
},
});
}}
/>
),
description: 'Enable or disable fetching lyrics for the current song',
isHidden: !isElectron(),
title: 'Fetch lyrics from the internet',
},
{
control: (
<WorkingButtonSelect
clearable
aria-label="Lyric providers"
data={Object.values(LyricSource)}
defaultValue={settings.sources}
width={300}
onChange={(e: LyricSource[]) => {
localSettings?.set('lyrics', e);
setSettings({
lyrics: {
...settings,
sources: e,
},
});
}}
/>
),
description: 'List of lyric fetchers (in order of preference)',
isHidden: !isElectron(),
title: 'Providers to fetch music',
},
{
control: (
<NumberInput
defaultValue={settings.delayMs}
step={10}
width={100}
onBlur={(e) => {
const value = Number(e.currentTarget.value);
setSettings({
lyrics: {
...settings,
delayMs: value,
},
});
}}
/>
),
description:
'Lyric offset (in milliseconds). Positive values mean that lyrics are shown later, and negative mean that lyrics are shown earlier',
isHidden: !isElectron(),
title: 'Lyric offset',
},
];
return <SettingsSection options={lyricOptions} />;
return <SettingsSection options={lyricOptions} />;
};

506
src/renderer/features/settings/components/playback/mpv-settings.tsx
View file

@ -3,13 +3,13 @@ import { Divider, Stack } from '@mantine/core';
import isElectron from 'is-electron';
import { FileInput, Textarea, Text, Select, NumberInput, Switch } from '/@/renderer/components';
import {
SettingsSection,
SettingOption,
SettingsSection,
SettingOption,
} from '/@/renderer/features/settings/components/settings-section';
import {
SettingsState,
usePlaybackSettings,
useSettingsStoreActions,
SettingsState,
usePlaybackSettings,
useSettingsStoreActions,
} from '/@/renderer/store/settings.store';
import { PlaybackType } from '/@/renderer/types';
@ -17,267 +17,275 @@ const localSettings = isElectron() ? window.electron.localSettings : null;
const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
export const getMpvSetting = (
key: keyof SettingsState['playback']['mpvProperties'],
value: any,
key: keyof SettingsState['playback']['mpvProperties'],
value: any,
) => {
switch (key) {
case 'audioExclusiveMode':
return { 'audio-exclusive': value || 'no' };
case 'audioSampleRateHz':
return { 'audio-samplerate': value };
case 'gaplessAudio':
return { 'gapless-audio': value || 'weak' };
case 'replayGainMode':
return { replaygain: value || 'no' };
case 'replayGainClip':
return { 'replaygain-clip': value || 'no' };
case 'replayGainFallbackDB':
return { 'replaygain-fallback': value };
case 'replayGainPreampDB':
return { 'replaygain-preamp': value || 0 };
default:
return key;
}
switch (key) {
case 'audioExclusiveMode':
return { 'audio-exclusive': value || 'no' };
case 'audioSampleRateHz':
return { 'audio-samplerate': value };
case 'gaplessAudio':
return { 'gapless-audio': value || 'weak' };
case 'replayGainMode':
return { replaygain: value || 'no' };
case 'replayGainClip':
return { 'replaygain-clip': value || 'no' };
case 'replayGainFallbackDB':
return { 'replaygain-fallback': value };
case 'replayGainPreampDB':
return { 'replaygain-preamp': value || 0 };
default:
return key;
}
};
export const getMpvProperties = (settings: SettingsState['playback']['mpvProperties']) => {
const properties: Record<string, any> = {
'audio-exclusive': settings.audioExclusiveMode || 'no',
'audio-samplerate': settings.audioSampleRateHz === 0 ? undefined : settings.audioSampleRateHz,
'gapless-audio': settings.gaplessAudio || 'weak',
replaygain: settings.replayGainMode || 'no',
'replaygain-clip': settings.replayGainClip || 'no',
'replaygain-fallback': settings.replayGainFallbackDB,
'replaygain-preamp': settings.replayGainPreampDB || 0,
};
const properties: Record<string, any> = {
'audio-exclusive': settings.audioExclusiveMode || 'no',
'audio-samplerate':
settings.audioSampleRateHz === 0 ? undefined : settings.audioSampleRateHz,
'gapless-audio': settings.gaplessAudio || 'weak',
replaygain: settings.replayGainMode || 'no',
'replaygain-clip': settings.replayGainClip || 'no',
'replaygain-fallback': settings.replayGainFallbackDB,
'replaygain-preamp': settings.replayGainPreampDB || 0,
};
Object.keys(properties).forEach((key) =>
properties[key] === undefined ? delete properties[key] : {},
);
Object.keys(properties).forEach((key) =>
properties[key] === undefined ? delete properties[key] : {},
);
return properties;
return properties;
};
export const MpvSettings = () => {
const settings = usePlaybackSettings();
const { setSettings } = useSettingsStoreActions();
const settings = usePlaybackSettings();
const { setSettings } = useSettingsStoreActions();
const [mpvPath, setMpvPath] = useState('');
const [mpvPath, setMpvPath] = useState('');
const handleSetMpvPath = (e: File) => {
localSettings.set('mpv_path', e.path);
};
useEffect(() => {
const getMpvPath = async () => {
if (!isElectron()) return setMpvPath('');
const mpvPath = (await localSettings.get('mpv_path')) as string;
return setMpvPath(mpvPath);
const handleSetMpvPath = (e: File) => {
localSettings.set('mpv_path', e.path);
};
getMpvPath();
}, []);
useEffect(() => {
const getMpvPath = async () => {
if (!isElectron()) return setMpvPath('');
const mpvPath = (await localSettings.get('mpv_path')) as string;
return setMpvPath(mpvPath);
};
const handleSetMpvProperty = (
setting: keyof SettingsState['playback']['mpvProperties'],
value: any,
) => {
setSettings({
playback: {
...settings,
mpvProperties: {
...settings.mpvProperties,
[setting]: value,
getMpvPath();
}, []);
const handleSetMpvProperty = (
setting: keyof SettingsState['playback']['mpvProperties'],
value: any,
) => {
setSettings({
playback: {
...settings,
mpvProperties: {
...settings.mpvProperties,
[setting]: value,
},
},
});
const mpvSetting = getMpvSetting(setting, value);
mpvPlayer?.setProperties(mpvSetting);
};
const handleSetExtraParameters = (data: string[]) => {
setSettings({
playback: {
...settings,
mpvExtraParameters: data,
},
});
};
const options: SettingOption[] = [
{
control: (
<FileInput
placeholder={mpvPath}
width={225}
onChange={handleSetMpvPath}
/>
),
description: 'The location of your mpv executable',
isHidden: settings.type !== PlaybackType.LOCAL,
note: 'Restart required',
title: 'MPV executable path',
},
},
});
{
control: (
<Stack spacing="xs">
<Textarea
autosize
defaultValue={settings.mpvExtraParameters.join('\n')}
minRows={4}
placeholder={
'(Add one per line):\n--gapless-audio=weak\n--prefetch-playlist=yes'
}
width={225}
onBlur={(e) => {
handleSetExtraParameters(e.currentTarget.value.split('\n'));
}}
/>
</Stack>
),
description: (
<Stack spacing={0}>
<Text
$noSelect
$secondary
size="sm"
>
Options to pass to the player
</Text>
<Text size="sm">
<a
href="https://mpv.io/manual/stable/#audio"
rel="noreferrer"
target="_blank"
>
https://mpv.io/manual/stable/#audio
</a>
</Text>
</Stack>
),
isHidden: settings.type !== PlaybackType.LOCAL,
note: 'Restart required',
title: 'MPV parameters',
},
];
const mpvSetting = getMpvSetting(setting, value);
const generalOptions: SettingOption[] = [
{
control: (
<Select
data={[
{ label: 'No', value: 'no' },
{ label: 'Yes', value: 'yes' },
{ label: 'Weak (recommended)', value: 'weak' },
]}
defaultValue={settings.mpvProperties.gaplessAudio}
onChange={(e) => handleSetMpvProperty('gaplessAudio', e)}
/>
),
description:
'Try to play consecutive audio files with no silence or disruption at the point of file change (--gapless-audio)',
isHidden: settings.type !== PlaybackType.LOCAL,
title: 'Gapless audio',
},
{
control: (
<NumberInput
defaultValue={settings.mpvProperties.audioSampleRateHz}
width={100}
onBlur={(e) => {
const value = Number(e.currentTarget.value);
handleSetMpvProperty('audioSampleRateHz', value > 0 ? value : undefined);
}}
/>
),
description:
'Select the output sample rate to be used if the sample frequency selected is different from that of the current media',
isHidden: settings.type !== PlaybackType.LOCAL,
title: 'Sample rate',
},
{
control: (
<Switch
defaultChecked={settings.mpvProperties.audioExclusiveMode === 'yes'}
onChange={(e) =>
handleSetMpvProperty(
'audioExclusiveMode',
e.currentTarget.checked ? 'yes' : 'no',
)
}
/>
),
mpvPlayer?.setProperties(mpvSetting);
};
description:
'Enable exclusive output mode. In this mode, the system is usually locked out, and only mpv will be able to output audio (--audio-exclusive)',
isHidden: settings.type !== PlaybackType.LOCAL,
title: 'Audio exclusive mode',
},
];
const handleSetExtraParameters = (data: string[]) => {
setSettings({
playback: {
...settings,
mpvExtraParameters: data,
},
});
};
const replayGainOptions: SettingOption[] = [
{
control: (
<Select
data={[
{ label: 'None', value: 'no' },
{ label: 'Track', value: 'track' },
{ label: 'Album', value: 'album' },
]}
defaultValue={settings.mpvProperties.replayGainMode}
onChange={(e) => handleSetMpvProperty('replayGainMode', e)}
/>
),
description:
'Adjust volume gain according to replaygain values stored in the file metadata (--replaygain)',
isHidden: settings.type !== PlaybackType.LOCAL,
note: 'Restart required',
title: 'ReplayGain mode',
},
{
control: (
<NumberInput
defaultValue={settings.mpvProperties.replayGainPreampDB}
width={75}
onChange={(e) => handleSetMpvProperty('replayGainPreampDB', e)}
/>
),
description:
'Pre-amplification gain in dB to apply to the selected replaygain gain (--replaygain-preamp)',
isHidden: settings.type !== PlaybackType.LOCAL,
title: 'ReplayGain preamp (dB)',
},
{
control: (
<Switch
defaultChecked={settings.mpvProperties.replayGainClip}
onChange={(e) =>
handleSetMpvProperty('replayGainClip', e.currentTarget.checked)
}
/>
),
description:
'Prevent clipping caused by replaygain by automatically lowering the gain (--replaygain-clip)',
isHidden: settings.type !== PlaybackType.LOCAL,
title: 'ReplayGain clipping',
},
{
control: (
<NumberInput
defaultValue={settings.mpvProperties.replayGainFallbackDB}
width={75}
onBlur={(e) => handleSetMpvProperty('replayGainFallbackDB', e)}
/>
),
description:
'Gain in dB to apply if the file has no replay gain tags. This option is always applied if the replaygain logic is somehow inactive. If this is applied, no other replaygain options are applied',
isHidden: settings.type !== PlaybackType.LOCAL,
title: 'ReplayGain fallback (dB)',
},
];
const options: SettingOption[] = [
{
control: (
<FileInput
placeholder={mpvPath}
width={225}
onChange={handleSetMpvPath}
/>
),
description: 'The location of your mpv executable',
isHidden: settings.type !== PlaybackType.LOCAL,
note: 'Restart required',
title: 'MPV executable path',
},
{
control: (
<Stack spacing="xs">
<Textarea
autosize
defaultValue={settings.mpvExtraParameters.join('\n')}
minRows={4}
placeholder={'(Add one per line):\n--gapless-audio=weak\n--prefetch-playlist=yes'}
width={225}
onBlur={(e) => {
handleSetExtraParameters(e.currentTarget.value.split('\n'));
}}
/>
</Stack>
),
description: (
<Stack spacing={0}>
<Text
$noSelect
$secondary
size="sm"
>
Options to pass to the player
</Text>
<Text size="sm">
<a
href="https://mpv.io/manual/stable/#audio"
rel="noreferrer"
target="_blank"
>
https://mpv.io/manual/stable/#audio
</a>
</Text>
</Stack>
),
isHidden: settings.type !== PlaybackType.LOCAL,
note: 'Restart required',
title: 'MPV parameters',
},
];
const generalOptions: SettingOption[] = [
{
control: (
<Select
data={[
{ label: 'No', value: 'no' },
{ label: 'Yes', value: 'yes' },
{ label: 'Weak (recommended)', value: 'weak' },
]}
defaultValue={settings.mpvProperties.gaplessAudio}
onChange={(e) => handleSetMpvProperty('gaplessAudio', e)}
/>
),
description:
'Try to play consecutive audio files with no silence or disruption at the point of file change (--gapless-audio)',
isHidden: settings.type !== PlaybackType.LOCAL,
title: 'Gapless audio',
},
{
control: (
<NumberInput
defaultValue={settings.mpvProperties.audioSampleRateHz}
width={100}
onBlur={(e) => {
const value = Number(e.currentTarget.value);
handleSetMpvProperty('audioSampleRateHz', value > 0 ? value : undefined);
}}
/>
),
description:
'Select the output sample rate to be used if the sample frequency selected is different from that of the current media',
isHidden: settings.type !== PlaybackType.LOCAL,
title: 'Sample rate',
},
{
control: (
<Switch
defaultChecked={settings.mpvProperties.audioExclusiveMode === 'yes'}
onChange={(e) =>
handleSetMpvProperty('audioExclusiveMode', e.currentTarget.checked ? 'yes' : 'no')
}
/>
),
description:
'Enable exclusive output mode. In this mode, the system is usually locked out, and only mpv will be able to output audio (--audio-exclusive)',
isHidden: settings.type !== PlaybackType.LOCAL,
title: 'Audio exclusive mode',
},
];
const replayGainOptions: SettingOption[] = [
{
control: (
<Select
data={[
{ label: 'None', value: 'no' },
{ label: 'Track', value: 'track' },
{ label: 'Album', value: 'album' },
]}
defaultValue={settings.mpvProperties.replayGainMode}
onChange={(e) => handleSetMpvProperty('replayGainMode', e)}
/>
),
description:
'Adjust volume gain according to replaygain values stored in the file metadata (--replaygain)',
isHidden: settings.type !== PlaybackType.LOCAL,
note: 'Restart required',
title: 'ReplayGain mode',
},
{
control: (
<NumberInput
defaultValue={settings.mpvProperties.replayGainPreampDB}
width={75}
onChange={(e) => handleSetMpvProperty('replayGainPreampDB', e)}
/>
),
description:
'Pre-amplification gain in dB to apply to the selected replaygain gain (--replaygain-preamp)',
isHidden: settings.type !== PlaybackType.LOCAL,
title: 'ReplayGain preamp (dB)',
},
{
control: (
<Switch
defaultChecked={settings.mpvProperties.replayGainClip}
onChange={(e) => handleSetMpvProperty('replayGainClip', e.currentTarget.checked)}
/>
),
description:
'Prevent clipping caused by replaygain by automatically lowering the gain (--replaygain-clip)',
isHidden: settings.type !== PlaybackType.LOCAL,
title: 'ReplayGain clipping',
},
{
control: (
<NumberInput
defaultValue={settings.mpvProperties.replayGainFallbackDB}
width={75}
onBlur={(e) => handleSetMpvProperty('replayGainFallbackDB', e)}
/>
),
description:
'Gain in dB to apply if the file has no replay gain tags. This option is always applied if the replaygain logic is somehow inactive. If this is applied, no other replaygain options are applied',
isHidden: settings.type !== PlaybackType.LOCAL,
title: 'ReplayGain fallback (dB)',
},
];
return (
<>
<SettingsSection options={options} />
<Divider />
<SettingsSection options={generalOptions} />
<Divider />
<SettingsSection options={replayGainOptions} />
</>
);
return (
<>
<SettingsSection options={options} />
<Divider />
<SettingsSection options={generalOptions} />
<Divider />
<SettingsSection options={replayGainOptions} />
</>
);
};

26
src/renderer/features/settings/components/playback/playback-tab.tsx
View file

@ -6,20 +6,20 @@ import isElectron from 'is-electron';
import { LyricSettings } from '/@/renderer/features/settings/components/playback/lyric-settings';
const MpvSettings = lazy(() =>
import('/@/renderer/features/settings/components/playback/mpv-settings').then((module) => {
return { default: module.MpvSettings };
}),
import('/@/renderer/features/settings/components/playback/mpv-settings').then((module) => {
return { default: module.MpvSettings };
}),
);
export const PlaybackTab = () => {
return (
<Stack spacing="md">
<AudioSettings />
<Suspense fallback={<></>}>{isElectron() && <MpvSettings />}</Suspense>
<Divider />
<ScrobbleSettings />
<Divider />
<LyricSettings />
</Stack>
);
return (
<Stack spacing="md">
<AudioSettings />
<Suspense fallback={<></>}>{isElectron() && <MpvSettings />}</Suspense>
<Divider />
<ScrobbleSettings />
<Divider />
<LyricSettings />
</Stack>
);
};

181
src/renderer/features/settings/components/playback/scrobble-settings.tsx
View file

@ -4,96 +4,97 @@ import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store/
import { SettingOption, SettingsSection } from '../settings-section';
export const ScrobbleSettings = () => {
const settings = usePlaybackSettings();
const { setSettings } = useSettingsStoreActions();
const settings = usePlaybackSettings();
const { setSettings } = useSettingsStoreActions();
const scrobbleOptions: SettingOption[] = [
{
control: (
<Switch
aria-label="Toggle scrobble"
defaultChecked={settings.scrobble.enabled}
onChange={(e) => {
setSettings({
playback: {
...settings,
scrobble: {
...settings.scrobble,
enabled: e.currentTarget.checked,
},
},
});
}}
/>
),
description: 'Enable or disable scrobbling to your media server',
isHidden: !isElectron(),
title: 'Scrobble',
},
{
control: (
<Slider
aria-label="Scrobble percentage"
defaultValue={settings.scrobble.scrobbleAtPercentage}
label={`${settings.scrobble.scrobbleAtPercentage}%`}
max={90}
min={25}
w={100}
onChange={(e) => {
setSettings({
playback: {
...settings,
scrobble: {
...settings.scrobble,
scrobbleAtPercentage: e,
},
},
});
}}
/>
),
description: 'The percentage of the song that must be played before submitting a scrobble',
isHidden: !isElectron(),
title: 'Minimum scrobble percentage*',
},
{
control: (
<NumberInput
aria-label="Scrobble duration in seconds"
defaultValue={settings.scrobble.scrobbleAtDuration}
max={1200}
min={0}
width={75}
onChange={(e) => {
if (e === '') return;
setSettings({
playback: {
...settings,
scrobble: {
...settings.scrobble,
scrobbleAtDuration: e,
},
},
});
}}
/>
),
description:
'The duration in seconds of a song that must be played before submitting a scrobble',
isHidden: !isElectron(),
title: 'Minimum scrobble duration (seconds)*',
},
];
const scrobbleOptions: SettingOption[] = [
{
control: (
<Switch
aria-label="Toggle scrobble"
defaultChecked={settings.scrobble.enabled}
onChange={(e) => {
setSettings({
playback: {
...settings,
scrobble: {
...settings.scrobble,
enabled: e.currentTarget.checked,
},
},
});
}}
/>
),
description: 'Enable or disable scrobbling to your media server',
isHidden: !isElectron(),
title: 'Scrobble',
},
{
control: (
<Slider
aria-label="Scrobble percentage"
defaultValue={settings.scrobble.scrobbleAtPercentage}
label={`${settings.scrobble.scrobbleAtPercentage}%`}
max={90}
min={25}
w={100}
onChange={(e) => {
setSettings({
playback: {
...settings,
scrobble: {
...settings.scrobble,
scrobbleAtPercentage: e,
},
},
});
}}
/>
),
description:
'The percentage of the song that must be played before submitting a scrobble',
isHidden: !isElectron(),
title: 'Minimum scrobble percentage*',
},
{
control: (
<NumberInput
aria-label="Scrobble duration in seconds"
defaultValue={settings.scrobble.scrobbleAtDuration}
max={1200}
min={0}
width={75}
onChange={(e) => {
if (e === '') return;
setSettings({
playback: {
...settings,
scrobble: {
...settings.scrobble,
scrobbleAtDuration: e,
},
},
});
}}
/>
),
description:
'The duration in seconds of a song that must be played before submitting a scrobble',
isHidden: !isElectron(),
title: 'Minimum scrobble duration (seconds)*',
},
];
return (
<>
<SettingsSection options={scrobbleOptions} />
<Text
$secondary
size="sm"
>
*The scrobble will be submitted if one or more of the above conditions is met
</Text>
</>
);
return (
<>
<SettingsSection options={scrobbleOptions} />
<Text
$secondary
size="sm"
>
*The scrobble will be submitted if one or more of the above conditions is met
</Text>
</>
);
};