mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-08 13:00:13 +02:00
jeffvli
390 lines
18 KiB
TypeScript
390 lines
18 KiB
TypeScript
import { memo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import styles from './mobile-fullscreen-player.module.css';
|
|
|
|
import { SONG_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
|
|
import {
|
|
ListConfigMenu,
|
|
SONG_DISPLAY_TYPES,
|
|
} from '/@/renderer/features/shared/components/list-config-menu';
|
|
import {
|
|
useFullScreenPlayerStore,
|
|
useFullScreenPlayerStoreActions,
|
|
useLyricsDisplaySettings,
|
|
useLyricsSettings,
|
|
useSettingsStore,
|
|
useSettingsStoreActions,
|
|
} from '/@/renderer/store';
|
|
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
|
|
import { Divider } from '/@/shared/components/divider/divider';
|
|
import { Group } from '/@/shared/components/group/group';
|
|
import { NumberInput } from '/@/shared/components/number-input/number-input';
|
|
import { Option } from '/@/shared/components/option/option';
|
|
import { Popover } from '/@/shared/components/popover/popover';
|
|
import { SegmentedControl } from '/@/shared/components/segmented-control/segmented-control';
|
|
import { Slider } from '/@/shared/components/slider/slider';
|
|
import { Switch } from '/@/shared/components/switch/switch';
|
|
import { QueueSong } from '/@/shared/types/domain-types';
|
|
import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
|
|
|
|
interface MobileFullscreenPlayerHeaderProps {
|
|
currentSong?: QueueSong;
|
|
isPageHovered: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export const MobileFullscreenPlayerHeader = memo(
|
|
({ isPageHovered, onClose }: MobileFullscreenPlayerHeaderProps) => {
|
|
const { t } = useTranslation();
|
|
const {
|
|
dynamicBackground,
|
|
dynamicImageBlur,
|
|
dynamicIsImage,
|
|
opacity,
|
|
useImageAspectRatio,
|
|
} = useFullScreenPlayerStore();
|
|
const { setStore } = useFullScreenPlayerStoreActions();
|
|
const { setSettings } = useSettingsStoreActions();
|
|
const lyricsSettings = useLyricsSettings();
|
|
const displaySettings = useLyricsDisplaySettings('default');
|
|
const lyricConfig = { ...lyricsSettings, ...displaySettings };
|
|
|
|
const handleLyricsSettings = (property: string, value: any) => {
|
|
const displayProperties = ['fontSize', 'fontSizeUnsync', 'gap', 'gapUnsync'];
|
|
if (displayProperties.includes(property)) {
|
|
const currentDisplay = useSettingsStore.getState().lyricsDisplay;
|
|
setSettings({
|
|
lyricsDisplay: {
|
|
...currentDisplay,
|
|
default: {
|
|
...currentDisplay.default,
|
|
[property]: value,
|
|
},
|
|
},
|
|
});
|
|
} else {
|
|
setSettings({
|
|
lyrics: {
|
|
...useSettingsStore.getState().lyrics,
|
|
[property]: value,
|
|
},
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={styles.header}
|
|
style={{
|
|
background: `rgb(var(--theme-colors-background-transparent), ${opacity}%)`,
|
|
}}
|
|
>
|
|
<ActionIcon
|
|
icon="arrowDownS"
|
|
iconProps={{ size: 'lg' }}
|
|
onClick={onClose}
|
|
tooltip={{ label: t('common.minimize', { postProcess: 'titleCase' }) }}
|
|
variant={isPageHovered ? 'default' : 'subtle'}
|
|
/>
|
|
<Popover position="bottom-end">
|
|
<Popover.Target>
|
|
<ActionIcon
|
|
icon="settings2"
|
|
iconProps={{ size: 'lg' }}
|
|
tooltip={{ label: t('common.configure', { postProcess: 'titleCase' }) }}
|
|
variant={isPageHovered ? 'default' : 'subtle'}
|
|
/>
|
|
</Popover.Target>
|
|
<Popover.Dropdown>
|
|
<Option>
|
|
<Option.Label>
|
|
{t('page.fullscreenPlayer.config.dynamicBackground', {
|
|
postProcess: 'sentenceCase',
|
|
})}
|
|
</Option.Label>
|
|
<Option.Control>
|
|
<Switch
|
|
defaultChecked={dynamicBackground}
|
|
onChange={(e) =>
|
|
setStore({
|
|
dynamicBackground: e.target.checked,
|
|
})
|
|
}
|
|
/>
|
|
</Option.Control>
|
|
</Option>
|
|
{dynamicBackground && (
|
|
<Option>
|
|
<Option.Label>
|
|
{t('page.fullscreenPlayer.config.dynamicIsImage', {
|
|
postProcess: 'sentenceCase',
|
|
})}
|
|
</Option.Label>
|
|
<Option.Control>
|
|
<Switch
|
|
defaultChecked={dynamicIsImage}
|
|
onChange={(e) =>
|
|
setStore({
|
|
dynamicIsImage: e.target.checked,
|
|
})
|
|
}
|
|
/>
|
|
</Option.Control>
|
|
</Option>
|
|
)}
|
|
{dynamicBackground && dynamicIsImage && (
|
|
<Option>
|
|
<Option.Label>
|
|
{t('page.fullscreenPlayer.config.dynamicImageBlur', {
|
|
postProcess: 'sentenceCase',
|
|
})}
|
|
</Option.Label>
|
|
<Option.Control>
|
|
<Slider
|
|
defaultValue={dynamicImageBlur}
|
|
label={(e) => `${e} rem`}
|
|
max={6}
|
|
min={0}
|
|
onChangeEnd={(e) =>
|
|
setStore({ dynamicImageBlur: Number(e) })
|
|
}
|
|
step={0.5}
|
|
w="100%"
|
|
/>
|
|
</Option.Control>
|
|
</Option>
|
|
)}
|
|
{dynamicBackground && (
|
|
<Option>
|
|
<Option.Label>
|
|
{t('page.fullscreenPlayer.config.opacity', {
|
|
postProcess: 'sentenceCase',
|
|
})}
|
|
</Option.Label>
|
|
<Option.Control>
|
|
<Slider
|
|
defaultValue={opacity}
|
|
label={(e) => `${e} %`}
|
|
max={100}
|
|
min={0}
|
|
onChangeEnd={(e) => setStore({ opacity: Number(e) })}
|
|
w="100%"
|
|
/>
|
|
</Option.Control>
|
|
</Option>
|
|
)}
|
|
<Option>
|
|
<Option.Label>
|
|
{t('page.fullscreenPlayer.config.useImageAspectRatio', {
|
|
postProcess: 'sentenceCase',
|
|
})}
|
|
</Option.Label>
|
|
<Option.Control>
|
|
<Switch
|
|
checked={useImageAspectRatio}
|
|
onChange={(e) =>
|
|
setStore({
|
|
useImageAspectRatio: e.target.checked,
|
|
})
|
|
}
|
|
/>
|
|
</Option.Control>
|
|
</Option>
|
|
<Divider my="sm" />
|
|
<Option>
|
|
<Option.Label>
|
|
{t('page.fullscreenPlayer.config.followCurrentLyric', {
|
|
postProcess: 'sentenceCase',
|
|
})}
|
|
</Option.Label>
|
|
<Option.Control>
|
|
<Switch
|
|
checked={lyricConfig.follow}
|
|
onChange={(e) =>
|
|
handleLyricsSettings('follow', e.currentTarget.checked)
|
|
}
|
|
/>
|
|
</Option.Control>
|
|
</Option>
|
|
<Option>
|
|
<Option.Label>
|
|
{t('page.fullscreenPlayer.config.showLyricProvider', {
|
|
postProcess: 'sentenceCase',
|
|
})}
|
|
</Option.Label>
|
|
<Option.Control>
|
|
<Switch
|
|
checked={lyricConfig.showProvider}
|
|
onChange={(e) =>
|
|
handleLyricsSettings(
|
|
'showProvider',
|
|
e.currentTarget.checked,
|
|
)
|
|
}
|
|
/>
|
|
</Option.Control>
|
|
</Option>
|
|
<Option>
|
|
<Option.Label>
|
|
{t('page.fullscreenPlayer.config.showLyricMatch', {
|
|
postProcess: 'sentenceCase',
|
|
})}
|
|
</Option.Label>
|
|
<Option.Control>
|
|
<Switch
|
|
checked={lyricConfig.showMatch}
|
|
onChange={(e) =>
|
|
handleLyricsSettings('showMatch', e.currentTarget.checked)
|
|
}
|
|
/>
|
|
</Option.Control>
|
|
</Option>
|
|
<Option>
|
|
<Option.Label>
|
|
{t('page.fullscreenPlayer.config.lyricSize', {
|
|
postProcess: 'sentenceCase',
|
|
})}
|
|
</Option.Label>
|
|
<Option.Control>
|
|
<Group w="100%" wrap="nowrap">
|
|
<Slider
|
|
defaultValue={lyricConfig.fontSize}
|
|
label={(e) =>
|
|
`${t('page.fullscreenPlayer.config.synchronized', {
|
|
postProcess: 'titleCase',
|
|
})}: ${e}px`
|
|
}
|
|
max={72}
|
|
min={8}
|
|
onChangeEnd={(e) =>
|
|
handleLyricsSettings('fontSize', Number(e))
|
|
}
|
|
w="100%"
|
|
/>
|
|
<Slider
|
|
defaultValue={lyricConfig.fontSizeUnsync}
|
|
label={(e) =>
|
|
`${t('page.fullscreenPlayer.config.unsynchronized', {
|
|
postProcess: 'sentenceCase',
|
|
})}: ${e}px`
|
|
}
|
|
max={72}
|
|
min={8}
|
|
onChangeEnd={(e) =>
|
|
handleLyricsSettings('fontSizeUnsync', Number(e))
|
|
}
|
|
w="100%"
|
|
/>
|
|
</Group>
|
|
</Option.Control>
|
|
</Option>
|
|
<Option>
|
|
<Option.Label>
|
|
{t('page.fullscreenPlayer.config.lyricGap', {
|
|
postProcess: 'sentenceCase',
|
|
})}
|
|
</Option.Label>
|
|
<Option.Control>
|
|
<Group w="100%" wrap="nowrap">
|
|
<Slider
|
|
defaultValue={lyricConfig.gap}
|
|
label={(e) => `Synchronized: ${e}px`}
|
|
max={50}
|
|
min={0}
|
|
onChangeEnd={(e) => handleLyricsSettings('gap', Number(e))}
|
|
w="100%"
|
|
/>
|
|
<Slider
|
|
defaultValue={lyricConfig.gapUnsync}
|
|
label={(e) => `Unsynchronized: ${e}px`}
|
|
max={50}
|
|
min={0}
|
|
onChangeEnd={(e) =>
|
|
handleLyricsSettings('gapUnsync', Number(e))
|
|
}
|
|
w="100%"
|
|
/>
|
|
</Group>
|
|
</Option.Control>
|
|
</Option>
|
|
<Option>
|
|
<Option.Label>
|
|
{t('page.fullscreenPlayer.config.lyricAlignment', {
|
|
postProcess: 'sentenceCase',
|
|
})}
|
|
</Option.Label>
|
|
<Option.Control>
|
|
<SegmentedControl
|
|
data={[
|
|
{
|
|
label: t('common.left', {
|
|
postProcess: 'titleCase',
|
|
}),
|
|
value: 'left',
|
|
},
|
|
{
|
|
label: t('common.center', {
|
|
postProcess: 'titleCase',
|
|
}),
|
|
value: 'center',
|
|
},
|
|
{
|
|
label: t('common.right', {
|
|
postProcess: 'titleCase',
|
|
}),
|
|
value: 'right',
|
|
},
|
|
]}
|
|
onChange={(e) => handleLyricsSettings('alignment', e)}
|
|
value={lyricConfig.alignment}
|
|
/>
|
|
</Option.Control>
|
|
</Option>
|
|
<Option>
|
|
<Option.Label>
|
|
{t('page.fullscreenPlayer.config.lyricOffset', {
|
|
postProcess: 'sentenceCase',
|
|
})}
|
|
</Option.Label>
|
|
<Option.Control>
|
|
<NumberInput
|
|
defaultValue={lyricConfig.delayMs}
|
|
hideControls={false}
|
|
onBlur={(e) =>
|
|
handleLyricsSettings(
|
|
'delayMs',
|
|
Number(e.currentTarget.value),
|
|
)
|
|
}
|
|
step={10}
|
|
/>
|
|
</Option.Control>
|
|
</Option>
|
|
<Divider my="sm" />
|
|
</Popover.Dropdown>
|
|
</Popover>
|
|
<ListConfigMenu
|
|
buttonProps={{
|
|
variant: isPageHovered ? 'default' : 'subtle',
|
|
}}
|
|
displayTypes={[
|
|
{ hidden: true, value: ListDisplayType.GRID },
|
|
...SONG_DISPLAY_TYPES,
|
|
]}
|
|
listKey={ItemListKey.FULL_SCREEN}
|
|
optionsConfig={{
|
|
table: {
|
|
itemsPerPage: { hidden: true },
|
|
pagination: { hidden: true },
|
|
},
|
|
}}
|
|
tableColumnsData={SONG_TABLE_COLUMNS}
|
|
/>
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
MobileFullscreenPlayerHeader.displayName = 'MobileFullscreenPlayerHeader';
|