mirror of
https://github.com/jeffvli/feishin.git
synced 2026-08-08 05:12:57 +02:00
normalize playerbar config designs
This commit is contained in:
jeffvli
@@ -110,8 +110,9 @@ export const PlayerConfig = () => {
|
||||
label: t('player.playbackSpeed'),
|
||||
},
|
||||
{
|
||||
component: !preservePitch ? <PitchControls /> : <></>,
|
||||
component: <PitchControls />,
|
||||
id: 'pitchControls',
|
||||
isHidden: preservePitch,
|
||||
label: '',
|
||||
},
|
||||
{
|
||||
@@ -219,7 +220,7 @@ export const PlayerConfig = () => {
|
||||
variant="subtle"
|
||||
/>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown maw={500} miw={320} onClick={(e) => e.stopPropagation()} p="sm">
|
||||
<Popover.Dropdown maw={720} miw={540} onClick={(e) => e.stopPropagation()} p="sm">
|
||||
<Stack gap="sm">
|
||||
<Paper p="md" radius="md">
|
||||
<ListConfigTable options={audioOptions} />
|
||||
@@ -437,12 +438,8 @@ export const PlaybackSpeedSlider = () => {
|
||||
onChange={setSpeed}
|
||||
onDoubleClick={() => setSpeed(1)}
|
||||
step={0.01}
|
||||
styles={{
|
||||
markLabel: {},
|
||||
root: {},
|
||||
}}
|
||||
value={speed}
|
||||
w="240px"
|
||||
w="320px"
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -467,13 +464,13 @@ export const PitchControls = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Group gap={microtonal ? 'xs' : 'md'} my="sm" w="100%" wrap="nowrap">
|
||||
<Group gap={microtonal ? 'xs' : 'md'} my="md" w="100%" wrap="nowrap">
|
||||
<Button
|
||||
aria-label="-1 semitone"
|
||||
fullWidth
|
||||
fw={400}
|
||||
onClick={() => adjustMusicalSpeed(-1)}
|
||||
size="compact-sm"
|
||||
size="compact-xs"
|
||||
>
|
||||
-1st
|
||||
</Button>
|
||||
@@ -483,7 +480,7 @@ export const PitchControls = () => {
|
||||
fullWidth
|
||||
fw={400}
|
||||
onClick={() => adjustMusicalSpeed(-0.1)}
|
||||
size="compact-sm"
|
||||
size="compact-xs"
|
||||
>
|
||||
-10ct
|
||||
</Button>
|
||||
@@ -499,7 +496,7 @@ export const PitchControls = () => {
|
||||
fullWidth
|
||||
fw={400}
|
||||
onClick={() => adjustMusicalSpeed(0.1)}
|
||||
size="compact-sm"
|
||||
size="compact-xs"
|
||||
>
|
||||
+10ct
|
||||
</Button>
|
||||
@@ -509,7 +506,7 @@ export const PitchControls = () => {
|
||||
fullWidth
|
||||
fw={400}
|
||||
onClick={() => adjustMusicalSpeed(1)}
|
||||
size="compact-sm"
|
||||
size="compact-xs"
|
||||
>
|
||||
+1st
|
||||
</Button>
|
||||
|
||||
@@ -8,6 +8,10 @@ import { CustomPlayerbarSlider } from '/@/renderer/features/player/components/pl
|
||||
import { SleepTimerButton } from '/@/renderer/features/player/components/sleep-timer-button';
|
||||
import { usePlayer } from '/@/renderer/features/player/context/player-context';
|
||||
import { useAudioDevices } from '/@/renderer/features/settings/components/playback/audio-settings';
|
||||
import {
|
||||
ListConfigBooleanControl,
|
||||
ListConfigTable,
|
||||
} from '/@/renderer/features/shared/components/list-config-menu';
|
||||
import { useSetRating } from '/@/renderer/features/shared/hooks/use-set-rating';
|
||||
import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
|
||||
import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
|
||||
@@ -48,8 +52,8 @@ import { Popover } from '/@/shared/components/popover/popover';
|
||||
import { Rating } from '/@/shared/components/rating/rating';
|
||||
import { SegmentedControl } from '/@/shared/components/segmented-control/segmented-control';
|
||||
import { Select } from '/@/shared/components/select/select';
|
||||
import { Slider } from '/@/shared/components/slider/slider';
|
||||
import { Stack } from '/@/shared/components/stack/stack';
|
||||
import { Switch } from '/@/shared/components/switch/switch';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
import { useMediaQuery } from '/@/shared/hooks/use-media-query';
|
||||
import { useThrottledCallback } from '/@/shared/hooks/use-throttled-callback';
|
||||
@@ -107,13 +111,6 @@ const AutoDJButton = () => {
|
||||
const settings = useAutoDJSettings();
|
||||
const { setSettings } = useSettingsStoreActions();
|
||||
|
||||
const itemLabels = useMemo(() => {
|
||||
return {
|
||||
description: t('setting.autoDJ_itemCount_description'),
|
||||
title: t('setting.autoDJ_itemCount'),
|
||||
};
|
||||
}, [t]);
|
||||
|
||||
const strategySelectData = useMemo(
|
||||
() => [
|
||||
{
|
||||
@@ -128,22 +125,200 @@ const AutoDJButton = () => {
|
||||
[t],
|
||||
);
|
||||
|
||||
const strategyLabels =
|
||||
const strategyTitle =
|
||||
settings.mode === AUTO_DJ_MODE.ALBUMS
|
||||
? {
|
||||
description: '',
|
||||
title: t('setting.autoDJ_albumStrategy'),
|
||||
}
|
||||
: {
|
||||
description: '',
|
||||
title: t('setting.autoDJ_songStrategy'),
|
||||
};
|
||||
? t('setting.autoDJ_albumStrategy')
|
||||
: t('setting.autoDJ_songStrategy');
|
||||
|
||||
const strategyValue =
|
||||
settings.mode === AUTO_DJ_MODE.ALBUMS
|
||||
? (settings.albumStrategy ?? AUTO_DJ_STRATEGY.SIMILAR)
|
||||
: (settings.songStrategy ?? AUTO_DJ_STRATEGY.SIMILAR);
|
||||
|
||||
const enabledOptions = useMemo(
|
||||
() => [
|
||||
{
|
||||
component: (
|
||||
<ListConfigBooleanControl
|
||||
onChange={(value) => {
|
||||
setSettings({
|
||||
autoDJ: { enabled: value },
|
||||
});
|
||||
}}
|
||||
value={settings.enabled}
|
||||
/>
|
||||
),
|
||||
id: 'enabled',
|
||||
label: t('setting.autoDJ_enabled'),
|
||||
},
|
||||
],
|
||||
[setSettings, settings.enabled, t],
|
||||
);
|
||||
|
||||
const configOptions = useMemo(
|
||||
() => [
|
||||
{
|
||||
component: (
|
||||
<Select
|
||||
comboboxProps={{ withinPortal: false }}
|
||||
data={strategySelectData}
|
||||
onChange={(value) => {
|
||||
if (!value) return;
|
||||
setSettings({
|
||||
autoDJ:
|
||||
settings.mode === AUTO_DJ_MODE.ALBUMS
|
||||
? { albumStrategy: value as AutoDJStrategy }
|
||||
: { songStrategy: value as AutoDJStrategy },
|
||||
});
|
||||
}}
|
||||
size="sm"
|
||||
value={strategyValue}
|
||||
variant="filled"
|
||||
w="160px"
|
||||
/>
|
||||
),
|
||||
id: 'strategy',
|
||||
label: strategyTitle,
|
||||
},
|
||||
{
|
||||
component: (
|
||||
<NumberInput
|
||||
aria-label={t('setting.autoDJ_itemCount')}
|
||||
hideControls={false}
|
||||
max={50}
|
||||
min={1}
|
||||
onChange={(e) =>
|
||||
setSettings({
|
||||
autoDJ: {
|
||||
itemCount: Number(e),
|
||||
},
|
||||
})
|
||||
}
|
||||
size="sm"
|
||||
value={Number(settings.itemCount)}
|
||||
variant="filled"
|
||||
w="96px"
|
||||
/>
|
||||
),
|
||||
id: 'itemCount',
|
||||
label: (
|
||||
<Stack gap="xs">
|
||||
<Text isNoSelect size="sm">
|
||||
{t('setting.autoDJ_itemCount')}
|
||||
</Text>
|
||||
<Text isMuted isNoSelect size="xs">
|
||||
{t('setting.autoDJ_itemCount_description')}
|
||||
</Text>
|
||||
</Stack>
|
||||
),
|
||||
},
|
||||
{
|
||||
component: (
|
||||
<Slider
|
||||
aria-label={t('setting.autoDJ_timing')}
|
||||
marks={[
|
||||
{ label: '1', value: 1 },
|
||||
{ label: '2', value: 2 },
|
||||
{ label: '3', value: 3 },
|
||||
{ label: '4', value: 4 },
|
||||
{ label: '5', value: 5 },
|
||||
]}
|
||||
max={5}
|
||||
min={1}
|
||||
onChange={(e) =>
|
||||
setSettings({
|
||||
autoDJ: {
|
||||
timing: Number(e),
|
||||
},
|
||||
})
|
||||
}
|
||||
size="sm"
|
||||
value={Number(settings.timing)}
|
||||
variant="filled"
|
||||
w="144px"
|
||||
/>
|
||||
),
|
||||
id: 'timing',
|
||||
label: (
|
||||
<Stack gap="xs">
|
||||
<Text isNoSelect size="sm">
|
||||
{t('setting.autoDJ_timing')}
|
||||
</Text>
|
||||
<Text isMuted isNoSelect size="xs">
|
||||
{t('setting.autoDJ_timing_description')}
|
||||
</Text>
|
||||
</Stack>
|
||||
),
|
||||
},
|
||||
],
|
||||
[
|
||||
setSettings,
|
||||
settings.itemCount,
|
||||
settings.mode,
|
||||
settings.timing,
|
||||
strategySelectData,
|
||||
strategyTitle,
|
||||
strategyValue,
|
||||
t,
|
||||
],
|
||||
);
|
||||
|
||||
const toggleOptions = useMemo(
|
||||
() => [
|
||||
{
|
||||
component: (
|
||||
<ListConfigBooleanControl
|
||||
onChange={(value) => {
|
||||
setSettings({
|
||||
autoDJ: {
|
||||
allowDuplicates: value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
value={settings.allowDuplicates}
|
||||
/>
|
||||
),
|
||||
id: 'allowDuplicates',
|
||||
label: (
|
||||
<Stack gap="xs">
|
||||
<Text isNoSelect size="sm">
|
||||
{t('setting.autoDJ_allowDuplicates')}
|
||||
</Text>
|
||||
<Text isMuted isNoSelect size="xs">
|
||||
{t('setting.autoDJ_allowDuplicates_description')}
|
||||
</Text>
|
||||
</Stack>
|
||||
),
|
||||
},
|
||||
{
|
||||
component: (
|
||||
<ListConfigBooleanControl
|
||||
onChange={(value) => {
|
||||
setSettings({
|
||||
autoDJ: {
|
||||
onlySimilar: value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
value={settings.onlySimilar}
|
||||
/>
|
||||
),
|
||||
id: 'onlySimilar',
|
||||
label: (
|
||||
<Stack gap="xs">
|
||||
<Text isNoSelect size="sm">
|
||||
{t('setting.autoDJ_onlySimilar')}
|
||||
</Text>
|
||||
<Text isMuted isNoSelect size="xs">
|
||||
{t('setting.autoDJ_onlySimilar_description')}
|
||||
</Text>
|
||||
</Stack>
|
||||
),
|
||||
},
|
||||
],
|
||||
[setSettings, settings.allowDuplicates, settings.onlySimilar, t],
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover position="top-end" withArrow>
|
||||
<Popover.Target>
|
||||
@@ -159,22 +334,10 @@ const AutoDJButton = () => {
|
||||
{t('setting.autoDJ')}
|
||||
</Button>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown maw={320} miw={260} onClick={(e) => e.stopPropagation()} p="sm">
|
||||
<Popover.Dropdown maw={480} miw={320} onClick={(e) => e.stopPropagation()} p="sm">
|
||||
<Stack gap="sm">
|
||||
<Paper p="md" radius="md">
|
||||
<Group align="center" gap="xs" justify="space-between" wrap="nowrap">
|
||||
<Text fw={600} isNoSelect size="sm">
|
||||
{t('setting.autoDJ_enabled')}
|
||||
</Text>
|
||||
<Switch
|
||||
checked={settings.enabled}
|
||||
onChange={(e) =>
|
||||
setSettings({
|
||||
autoDJ: { enabled: e.currentTarget.checked },
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Group>
|
||||
<ListConfigTable options={enabledOptions} />
|
||||
</Paper>
|
||||
<SegmentedControl
|
||||
data={[
|
||||
@@ -195,109 +358,10 @@ const AutoDJButton = () => {
|
||||
w="100%"
|
||||
/>
|
||||
<Paper p="md" radius="md">
|
||||
<Select
|
||||
comboboxProps={{ withinPortal: false }}
|
||||
data={strategySelectData}
|
||||
description={strategyLabels.description}
|
||||
label={strategyLabels.title}
|
||||
onChange={(value) => {
|
||||
if (!value) return;
|
||||
setSettings({
|
||||
autoDJ:
|
||||
settings.mode === AUTO_DJ_MODE.ALBUMS
|
||||
? { albumStrategy: value as AutoDJStrategy }
|
||||
: { songStrategy: value as AutoDJStrategy },
|
||||
});
|
||||
}}
|
||||
size="sm"
|
||||
value={strategyValue}
|
||||
variant="filled"
|
||||
w="100%"
|
||||
/>
|
||||
<ListConfigTable options={configOptions} />
|
||||
</Paper>
|
||||
<Paper p="md" radius="md">
|
||||
<NumberInput
|
||||
aria-label={itemLabels.title}
|
||||
description={itemLabels.description}
|
||||
hideControls={false}
|
||||
label={itemLabels.title}
|
||||
max={50}
|
||||
min={1}
|
||||
onChange={(e) =>
|
||||
setSettings({
|
||||
autoDJ: {
|
||||
itemCount: Number(e),
|
||||
},
|
||||
})
|
||||
}
|
||||
size="sm"
|
||||
value={Number(settings.itemCount)}
|
||||
variant="filled"
|
||||
/>
|
||||
</Paper>
|
||||
<Paper p="md" radius="md">
|
||||
<NumberInput
|
||||
aria-label={t('setting.autoDJ_timing')}
|
||||
description={t('setting.autoDJ_timing_description')}
|
||||
hideControls={false}
|
||||
label={t('setting.autoDJ_timing')}
|
||||
max={5}
|
||||
min={1}
|
||||
onChange={(e) =>
|
||||
setSettings({
|
||||
autoDJ: {
|
||||
timing: Number(e),
|
||||
},
|
||||
})
|
||||
}
|
||||
size="sm"
|
||||
value={Number(settings.timing)}
|
||||
variant="filled"
|
||||
/>
|
||||
</Paper>
|
||||
<Paper p="md" radius="md">
|
||||
<Group align="center" gap="sm" justify="space-between" wrap="nowrap">
|
||||
<Stack gap="xs" style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text fw={600} isNoSelect size="sm">
|
||||
{t('setting.autoDJ_allowDuplicates')}
|
||||
</Text>
|
||||
<Text isMuted isNoSelect size="xs">
|
||||
{t('setting.autoDJ_allowDuplicates_description')}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Switch
|
||||
checked={settings.allowDuplicates}
|
||||
onChange={(e) =>
|
||||
setSettings({
|
||||
autoDJ: {
|
||||
allowDuplicates: e.currentTarget.checked,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Group>
|
||||
</Paper>
|
||||
<Paper p="md" radius="md">
|
||||
<Group align="center" gap="sm" justify="space-between" wrap="nowrap">
|
||||
<Stack gap="xs" style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text fw={600} isNoSelect size="sm">
|
||||
{t('setting.autoDJ_onlySimilar')}
|
||||
</Text>
|
||||
<Text isMuted isNoSelect size="xs">
|
||||
{t('setting.autoDJ_onlySimilar_description')}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Switch
|
||||
checked={settings.onlySimilar}
|
||||
onChange={(e) =>
|
||||
setSettings({
|
||||
autoDJ: {
|
||||
onlySimilar: e.currentTarget.checked,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Group>
|
||||
<ListConfigTable options={toggleOptions} />
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
.active-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--theme-spacing-xs);
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import styles from './sleep-timer-button.module.css';
|
||||
|
||||
import { usePlayerEvents } from '/@/renderer/features/player/audio-player/hooks/use-player-events';
|
||||
import { usePlayer } from '/@/renderer/features/player/context/player-context';
|
||||
import {
|
||||
@@ -17,13 +19,13 @@ import {
|
||||
} from '/@/renderer/store/sleep-timer.store';
|
||||
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
|
||||
import { Button } from '/@/shared/components/button/button';
|
||||
import { Divider } from '/@/shared/components/divider/divider';
|
||||
import { Flex } from '/@/shared/components/flex/flex';
|
||||
import { Grid } from '/@/shared/components/grid/grid';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { NumberInput } from '/@/shared/components/number-input/number-input';
|
||||
import { Paper } from '/@/shared/components/paper/paper';
|
||||
import { Popover } from '/@/shared/components/popover/popover';
|
||||
import { Stack } from '/@/shared/components/stack/stack';
|
||||
import { TextTitle } from '/@/shared/components/text-title/text-title';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
import { PlayerShuffle, PlayerStatus } from '/@/shared/types/types';
|
||||
|
||||
@@ -196,7 +198,6 @@ export const SleepTimerButton = () => {
|
||||
const remaining = useSleepTimerRemaining();
|
||||
const { cancelTimer, startEndOfAlbumTimer, startEndOfSongTimer, startTimedTimer } =
|
||||
useSleepTimerActions();
|
||||
const { mediaPause } = usePlayer();
|
||||
const shuffle = usePlayerShuffle();
|
||||
// Track level shuffle scatters and album across a play queue making 'end-of-album'
|
||||
// meaningless. Album shuffle keeps each album intact, so keep 'end-of-'album
|
||||
@@ -209,9 +210,6 @@ export const SleepTimerButton = () => {
|
||||
const [customSeconds, setCustomSeconds] = useState<number>(0);
|
||||
const [opened, setOpened] = useState(false);
|
||||
|
||||
const mediaPauseRef = useRef(mediaPause);
|
||||
mediaPauseRef.current = mediaPause;
|
||||
|
||||
const handlePreset = useCallback(
|
||||
(option: (typeof PRESET_OPTIONS)[number]) => {
|
||||
if (option.mode === 'endOfSong') {
|
||||
@@ -248,18 +246,12 @@ export const SleepTimerButton = () => {
|
||||
if (option.mode === 'endOfAlbum') {
|
||||
return t('player.sleepTimer_endOfAlbum');
|
||||
}
|
||||
if (option.minutes >= 60) {
|
||||
return t('player.sleepTimer_hours', {
|
||||
count: option.minutes / 60,
|
||||
});
|
||||
}
|
||||
return t('player.sleepTimer_minutes', {
|
||||
count: option.minutes,
|
||||
});
|
||||
|
||||
return `${option.minutes}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover onChange={setOpened} opened={opened} position="top" width={260}>
|
||||
<Popover onChange={setOpened} opened={opened} position="top" withArrow>
|
||||
<Popover.Target>
|
||||
<ActionIcon
|
||||
icon={active ? 'sleepTimer' : 'sleepTimerOff'}
|
||||
@@ -279,36 +271,27 @@ export const SleepTimerButton = () => {
|
||||
variant="subtle"
|
||||
/>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<Stack gap="xs" p="xs">
|
||||
<Text fw="600" pb="md" size="sm" ta="center">
|
||||
<Popover.Dropdown maw={480} miw={320} onClick={(e) => e.stopPropagation()} p="sm">
|
||||
<Stack gap="sm">
|
||||
<Paper className={styles.activeStatus} p="md" radius="md">
|
||||
<Text fw={600} size="sm" ta="center">
|
||||
{t('player.sleepTimer')}
|
||||
</Text>
|
||||
|
||||
{active && (
|
||||
<Flex
|
||||
align="center"
|
||||
direction="column"
|
||||
gap={4}
|
||||
mb="xs"
|
||||
style={{
|
||||
background: 'var(--theme-colors-surface)',
|
||||
borderRadius: 'var(--theme-radius-md)',
|
||||
padding: 'var(--theme-spacing-sm) var(--theme-spacing-md)',
|
||||
}}
|
||||
>
|
||||
<>
|
||||
{mode === 'endOfSong' ? (
|
||||
<Text c="primary" size="sm">
|
||||
<Text c="primary" size="xl">
|
||||
{t('player.sleepTimer_endOfSong')}
|
||||
</Text>
|
||||
) : mode === 'endOfAlbum' ? (
|
||||
<Text c="primary" size="sm">
|
||||
<Text c="primary" size="xl">
|
||||
{t('player.sleepTimer_endOfAlbum')}
|
||||
</Text>
|
||||
) : (
|
||||
<Text c="primary" fw="600" size="lg">
|
||||
<TextTitle c="primary" order={3}>
|
||||
{formatRemaining(remaining)}
|
||||
</Text>
|
||||
</TextTitle>
|
||||
)}
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
@@ -320,11 +303,15 @@ export const SleepTimerButton = () => {
|
||||
>
|
||||
{t('player.sleepTimer_cancel')}
|
||||
</Button>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
<Paper p="md" radius="md">
|
||||
<Stack gap="xs">
|
||||
{PRESET_OPTIONS.filter(
|
||||
(option) => option.mode === 'endOfSong' || option.mode === 'endOfAlbum',
|
||||
(option) =>
|
||||
option.mode === 'endOfSong' || option.mode === 'endOfAlbum',
|
||||
).map((option) => {
|
||||
const disabled = option.mode === 'endOfAlbum' && isTrackShuffle;
|
||||
|
||||
@@ -332,35 +319,34 @@ export const SleepTimerButton = () => {
|
||||
<Button
|
||||
disabled={disabled}
|
||||
fullWidth
|
||||
justify="flex-start"
|
||||
justify="center"
|
||||
key={option.mode}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handlePreset(option);
|
||||
}}
|
||||
size="xs"
|
||||
variant="outline"
|
||||
>
|
||||
{getPresetLabel(option)}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Divider my="md" />
|
||||
|
||||
<Paper p="md" radius="md">
|
||||
<Grid gap="xs">
|
||||
{PRESET_OPTIONS.filter((option) => option.mode === 'timed').map(
|
||||
(option, index) => (
|
||||
<Grid.Col key={index} span={4}>
|
||||
<Button
|
||||
fullWidth
|
||||
justify="flex-start"
|
||||
key={index}
|
||||
justify="center"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handlePreset(option);
|
||||
}}
|
||||
size="xs"
|
||||
size="md"
|
||||
variant="outline"
|
||||
>
|
||||
{getPresetLabel(option)}
|
||||
@@ -369,51 +355,65 @@ export const SleepTimerButton = () => {
|
||||
),
|
||||
)}
|
||||
</Grid>
|
||||
</Paper>
|
||||
|
||||
<Divider my="md" />
|
||||
|
||||
<Paper p="md" radius="md">
|
||||
{!showCustom ? (
|
||||
<Button
|
||||
fullWidth
|
||||
justify="flex-start"
|
||||
justify="center"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setShowCustom(true);
|
||||
}}
|
||||
size="xs"
|
||||
ta="center"
|
||||
variant="outline"
|
||||
>
|
||||
{t('player.sleepTimer_custom')}
|
||||
</Button>
|
||||
) : (
|
||||
<Stack gap="xs">
|
||||
<Stack gap="sm">
|
||||
<Group gap={4} wrap="nowrap">
|
||||
<NumberInput
|
||||
max={23}
|
||||
min={0}
|
||||
onChange={(val) => setCustomHours(Number(val) || 0)}
|
||||
placeholder="hr"
|
||||
size="xs"
|
||||
rightSection={
|
||||
<Text pr="md" size="xs">
|
||||
hr
|
||||
</Text>
|
||||
}
|
||||
size="sm"
|
||||
value={customHours}
|
||||
variant="filled"
|
||||
/>
|
||||
<Text>:</Text>
|
||||
<NumberInput
|
||||
max={59}
|
||||
min={0}
|
||||
onChange={(val) => setCustomMinutes(Number(val) || 0)}
|
||||
placeholder="min"
|
||||
size="xs"
|
||||
rightSection={
|
||||
<Text pr="md" size="xs">
|
||||
min
|
||||
</Text>
|
||||
}
|
||||
size="sm"
|
||||
value={customMinutes}
|
||||
variant="filled"
|
||||
/>
|
||||
<Text>:</Text>
|
||||
<NumberInput
|
||||
max={59}
|
||||
min={0}
|
||||
onChange={(val) => setCustomSeconds(Number(val) || 0)}
|
||||
placeholder="sec"
|
||||
size="xs"
|
||||
rightSection={
|
||||
<Text pr="md" size="xs">
|
||||
sec
|
||||
</Text>
|
||||
}
|
||||
size="sm"
|
||||
value={customSeconds}
|
||||
variant="filled"
|
||||
/>
|
||||
</Group>
|
||||
<Group gap="xs" grow>
|
||||
@@ -440,6 +440,7 @@ export const SleepTimerButton = () => {
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
|
||||
@@ -5,11 +5,21 @@
|
||||
.th {
|
||||
width: 50%;
|
||||
padding: var(--theme-spacing-md) var(--theme-spacing-md) var(--theme-spacing-md) 0;
|
||||
font-weight: 500;
|
||||
vertical-align: middle;
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.divider-cell {
|
||||
|
||||
@@ -266,10 +266,13 @@ export const ListConfigTable = ({
|
||||
</Table.Tr>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Table.Tr key={option.id}>
|
||||
<Table.Th>{option.label}</Table.Th>
|
||||
<Table.Td>{option.component}</Table.Td>
|
||||
<Table.Td>
|
||||
<div className={styles.control}>{option.component}</div>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user