Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-26 21:41:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

caption settings reorganize

Browse Source 
Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
This commit is contained in:
mrjvs 2023-10-23 21:06:31 +02:00
parent a2968d3bf8
commit 109d9054d6
2 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/player/atoms/Settings.tsx
View File

@ -51,7 +51,7 @@ function SettingsOverlay({ id }: { id: string }) {
<CaptionsView id={id} /> <CaptionsView id={id} />
</Menu.CardWithScrollable> </Menu.CardWithScrollable>
</OverlayPage> </OverlayPage>
<OverlayPage id={id} path="/captions/settings" width={343} height={430}> <OverlayPage id={id} path="/captions/settings" width={343} height={450}>
<Menu.Card> <Menu.Card>
<CaptionSettingsView id={id} /> <CaptionSettingsView id={id} />
</Menu.Card> </Menu.Card>

33
src/components/player/atoms/settings/CaptionSettingsView.tsx
View File

@ -236,14 +236,16 @@ export function CaptionSettingsView({ id }: { id: string }) {
decimalsAllowed={1} decimalsAllowed={1}
controlButtons controlButtons
/> />
<CaptionSetting <div className="flex justify-between items-center">
label="Text size" <Menu.FieldTitle>Fix capitalization</Menu.FieldTitle>
max={200} <div className="flex justify-center items-center">
min={1} <Toggle
textTransformer={(s) => `${s}%`} enabled={overrideCasing}
onChange={(v) => updateStyling({ size: v / 100 })} onClick={() => setOverrideCasing(!overrideCasing)}
value={styling.size * 100}
/> />
</div>
</div>
<Menu.Divider />
<CaptionSetting <CaptionSetting
label="Background opacity" label="Background opacity"
max={100} max={100}
@ -252,6 +254,14 @@ export function CaptionSettingsView({ id }: { id: string }) {
value={styling.backgroundOpacity * 100} value={styling.backgroundOpacity * 100}
textTransformer={(s) => `${s}%`} textTransformer={(s) => `${s}%`}
/> />
<CaptionSetting
label="Text size"
max={200}
min={1}
textTransformer={(s) => `${s}%`}
onChange={(v) => updateStyling({ size: v / 100 })}
value={styling.size * 100}
/>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<Menu.FieldTitle>Color</Menu.FieldTitle> <Menu.FieldTitle>Color</Menu.FieldTitle>
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
@ -264,15 +274,6 @@ export function CaptionSettingsView({ id }: { id: string }) {
))} ))}
</div> </div>
</div> </div>
<div className="flex justify-between items-center">
<Menu.FieldTitle>Fix capitalization</Menu.FieldTitle>
<div className="flex justify-center items-center">
<Toggle
enabled={overrideCasing}
onClick={() => setOverrideCasing(!overrideCasing)}
/>
</div>
</div>
</Menu.Section> </Menu.Section>
</> </>
); );