add setting for lyrics container padding

This commit is contained in:
jeffvli
2026-07-09 01:20:11 -07:00
parent fefbf7e3e6
commit bdcc88cbfe
14 changed files with 343 additions and 140 deletions
@@ -51,7 +51,14 @@ export const MobileFullscreenPlayerHeader = memo(
const lyricConfig = { ...lyricsSettings, ...displaySettings };
const handleLyricsSettings = (property: string, value: any) => {
const displayProperties = ['fontSize', 'fontSizeUnsync', 'gap', 'gapUnsync'];
const displayProperties = [
'fontSize',
'fontSizeUnsync',
'gap',
'gapUnsync',
'paddingLeft',
'paddingRight',
];
if (displayProperties.includes(property)) {
const currentDisplay = useSettingsStore.getState().lyricsDisplay;
setSettings({
@@ -284,6 +291,42 @@ export const MobileFullscreenPlayerHeader = memo(
</Group>
</Option.Control>
</Option>
<Option>
<Option.Label>
{t('page.fullscreenPlayer.config.lyricPaddingLeft')}
</Option.Label>
<Option.Control>
<Slider
defaultValue={lyricConfig.paddingLeft ?? 0}
label={(value) => `${value}%`}
max={20}
min={0}
onChangeEnd={(value) =>
handleLyricsSettings('paddingLeft', value)
}
step={1}
w="100%"
/>
</Option.Control>
</Option>
<Option>
<Option.Label>
{t('page.fullscreenPlayer.config.lyricPaddingRight')}
</Option.Label>
<Option.Control>
<Slider
defaultValue={lyricConfig.paddingRight ?? 0}
label={(value) => `${value}%`}
max={20}
min={0}
onChangeEnd={(value) =>
handleLyricsSettings('paddingRight', value)
}
step={1}
w="100%"
/>
</Option.Control>
</Option>
<Option>
<Option.Label>
{t('page.fullscreenPlayer.config.lyricAlignment')}