Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-14 10:35:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #605 from vijaysingh2219/dev

Browse Source 
Enhance Clarity, Consistency, and Formatting in Captioning and Subtitling Options
This commit is contained in:
William Oldham 2023-12-28 16:34:35 +00:00 committed by GitHub
commit 8fa90689f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/assets/locales/en.json
View File

@ -143,8 +143,8 @@
"settings": { "settings": {
"videoSection": "Video settings", "videoSection": "Video settings",
"experienceSection": "Viewing experience", "experienceSection": "Viewing experience",
"enableCaptions": "Enable captions", "enableSubtitles": "Enable Subtitles",
"captionItem": "Caption settings", "subtitleItem": "Subtitle settings",
"sourceItem": "Video sources", "sourceItem": "Video sources",
"playbackItem": "Playback settings", "playbackItem": "Playback settings",
"downloadItem": "Download", "downloadItem": "Download",
@ -174,10 +174,11 @@
"text": "There was an error while trying to find any videos, please try a different source." "text": "There was an error while trying to find any videos, please try a different source."
} }
}, },
"captions": { "subtitles": {
"title": "Captions", "title": "Subtitles",
"customizeLabel": "Customize", "customizeLabel": "Customize",
"settings": { "settings": {
"backlink": "Custom Subtitles",
"fixCapitals": "Fix capitalization", "fixCapitals": "Fix capitalization",
"delay": "Caption delay" "delay": "Caption delay"
}, },
@ -363,8 +364,8 @@
"language": "Application language", "language": "Application language",
"languageDescription": "Language applied to the entire application." "languageDescription": "Language applied to the entire application."
}, },
"captions": { "subtitles": {
"title": "Captions", "title": "Subtitles",
"previewQuote": "I must not fear. Fear is the mind-killer.", "previewQuote": "I must not fear. Fear is the mind-killer.",
"backgroundLabel": "Background opacity", "backgroundLabel": "Background opacity",
"textSizeLabel": "Text size", "textSizeLabel": "Text size",

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

@ -229,11 +229,11 @@ export function CaptionSettingsView({ id }: { id: string }) {
return ( return (
<> <>
<Menu.BackLink onClick={() => router.navigate("/captions")}> <Menu.BackLink onClick={() => router.navigate("/captions")}>
Custom captions {t("player.menus.subtitles.settings.backlink")}
</Menu.BackLink> </Menu.BackLink>
<Menu.Section className="space-y-6"> <Menu.Section className="space-y-6">
<CaptionSetting <CaptionSetting
label={t("player.menus.captions.settings.delay")} label={t("player.menus.subtitles.settings.delay")}
max={10} max={10}
min={-10} min={-10}
onChange={(v) => setDelay(v)} onChange={(v) => setDelay(v)}
@ -244,7 +244,7 @@ export function CaptionSettingsView({ id }: { id: string }) {
/> />
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<Menu.FieldTitle> <Menu.FieldTitle>
{t("player.menus.captions.settings.fixCapitals")} {t("player.menus.subtitles.settings.fixCapitals")}
</Menu.FieldTitle> </Menu.FieldTitle>
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
<Toggle <Toggle
@ -255,7 +255,7 @@ export function CaptionSettingsView({ id }: { id: string }) {
</div> </div>
<Menu.Divider /> <Menu.Divider />
<CaptionSetting <CaptionSetting
label={t("settings.captions.backgroundLabel")} label={t("settings.subtitles.backgroundLabel")}
max={100} max={100}
min={0} min={0}
onChange={(v) => updateStyling({ backgroundOpacity: v / 100 })} onChange={(v) => updateStyling({ backgroundOpacity: v / 100 })}
@ -263,7 +263,7 @@ export function CaptionSettingsView({ id }: { id: string }) {
textTransformer={(s) => `${s}%`} textTransformer={(s) => `${s}%`}
/> />
<CaptionSetting <CaptionSetting
label={t("settings.captions.textSizeLabel")} label={t("settings.subtitles.textSizeLabel")}
max={200} max={200}
min={1} min={1}
textTransformer={(s) => `${s}%`} textTransformer={(s) => `${s}%`}
@ -271,7 +271,9 @@ export function CaptionSettingsView({ id }: { id: string }) {
value={styling.size * 100} value={styling.size * 100}
/> />
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<Menu.FieldTitle>{t("settings.captions.colorLabel")}</Menu.FieldTitle> <Menu.FieldTitle>
{t("settings.subtitles.colorLabel")}
</Menu.FieldTitle>
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
{colors.map((v) => ( {colors.map((v) => (
<ColorOption <ColorOption

10
src/components/player/atoms/settings/CaptionsView.tsx
View File

@ -57,7 +57,7 @@ function CustomCaptionOption() {
selected={lang === "custom"} selected={lang === "custom"}
onClick={() => fileInput.current?.click()} onClick={() => fileInput.current?.click()}
> >
{t("player.menus.captions.customChoice")} {t("player.menus.subtitles.customChoice")}
<input <input
className="hidden" className="hidden"
ref={fileInput} ref={fileInput}
@ -85,7 +85,7 @@ function CustomCaptionOption() {
function useSubtitleList(subs: CaptionListItem[], searchQuery: string) { function useSubtitleList(subs: CaptionListItem[], searchQuery: string) {
const { t: translate } = useTranslation(); const { t: translate } = useTranslation();
const unknownChoice = translate("player.menus.captions.unknownLanguage"); const unknownChoice = translate("player.menus.subtitles.unknownLanguage");
return useMemo(() => { return useMemo(() => {
const input = subs.map((t) => ({ const input = subs.map((t) => ({
...t, ...t,
@ -162,11 +162,11 @@ export function CaptionsView({ id }: { id: string }) {
onClick={() => router.navigate("/captions/settings")} onClick={() => router.navigate("/captions/settings")}
className="py-1 -my-1 px-3 -mx-3 rounded tabbable" className="py-1 -my-1 px-3 -mx-3 rounded tabbable"
> >
{t("player.menus.captions.customizeLabel")} {t("player.menus.subtitles.customizeLabel")}
</button> </button>
} }
> >
{t("player.menus.captions.title")} {t("player.menus.subtitles.title")}
</Menu.BackLink> </Menu.BackLink>
<div className="mt-3"> <div className="mt-3">
<Input value={searchQuery} onInput={setSearchQuery} /> <Input value={searchQuery} onInput={setSearchQuery} />
@ -174,7 +174,7 @@ export function CaptionsView({ id }: { id: string }) {
</div> </div>
<Menu.ScrollToActiveSection className="!pt-1 mt-2 pb-3"> <Menu.ScrollToActiveSection className="!pt-1 mt-2 pb-3">
<CaptionOption onClick={() => disable()} selected={!lang}> <CaptionOption onClick={() => disable()} selected={!lang}>
{t("player.menus.captions.offChoice")} {t("player.menus.subtitles.offChoice")}
</CaptionOption> </CaptionOption>
<CustomCaptionOption /> <CustomCaptionOption />
{content} {content}

6
src/components/player/atoms/settings/SettingsMenu.tsx
View File

@ -32,7 +32,7 @@ export function SettingsMenu({ id }: { id: string }) {
const selectedLanguagePretty = selectedCaptionLanguage const selectedLanguagePretty = selectedCaptionLanguage
? getLanguageFromIETF(selectedCaptionLanguage) ?? ? getLanguageFromIETF(selectedCaptionLanguage) ??
t("player.menus.captions.unknownLanguage") t("player.menus.subtitles.unknownLanguage")
: undefined; : undefined;
const source = usePlayerStore((s) => s.source); const source = usePlayerStore((s) => s.source);
@ -81,13 +81,13 @@ export function SettingsMenu({ id }: { id: string }) {
/> />
} }
> >
{t("player.menus.settings.enableCaptions")} {t("player.menus.settings.enableSubtitles")}
</Menu.Link> </Menu.Link>
<Menu.ChevronLink <Menu.ChevronLink
onClick={() => router.navigate("/captions")} onClick={() => router.navigate("/captions")}
rightText={selectedLanguagePretty ?? undefined} rightText={selectedLanguagePretty ?? undefined}
> >
{t("player.menus.settings.captionItem")} {t("player.menus.settings.subtitleItem")}
</Menu.ChevronLink> </Menu.ChevronLink>
<Menu.ChevronLink onClick={() => router.navigate("/playback")}> <Menu.ChevronLink onClick={() => router.navigate("/playback")}>
{t("player.menus.settings.playbackItem")} {t("player.menus.settings.playbackItem")}

10
src/pages/parts/settings/CaptionsPart.tsx
View File

@ -58,7 +58,7 @@ export function CaptionPreview(props: {
} }
> >
<CaptionCue <CaptionCue
text={t("settings.captions.previewQuote") ?? undefined} text={t("settings.subtitles.previewQuote") ?? undefined}
styling={props.styling} styling={props.styling}
overrideCasing={false} overrideCasing={false}
/> />
@ -79,11 +79,11 @@ export function CaptionsPart(props: {
return ( return (
<div> <div>
<Heading1 border>{t("settings.captions.title")}</Heading1> <Heading1 border>{t("settings.subtitles.title")}</Heading1>
<div className="grid md:grid-cols-[1fr,356px] gap-8"> <div className="grid md:grid-cols-[1fr,356px] gap-8">
<div className="space-y-6"> <div className="space-y-6">
<CaptionSetting <CaptionSetting
label={t("settings.captions.backgroundLabel")} label={t("settings.subtitles.backgroundLabel")}
max={100} max={100}
min={0} min={0}
onChange={(v) => onChange={(v) =>
@ -93,7 +93,7 @@ export function CaptionsPart(props: {
textTransformer={(s) => `${s}%`} textTransformer={(s) => `${s}%`}
/> />
<CaptionSetting <CaptionSetting
label={t("settings.captions.textSizeLabel")} label={t("settings.subtitles.textSizeLabel")}
max={200} max={200}
min={1} min={1}
textTransformer={(s) => `${s}%`} textTransformer={(s) => `${s}%`}
@ -104,7 +104,7 @@ export function CaptionsPart(props: {
/> />
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<Menu.FieldTitle> <Menu.FieldTitle>
{t("settings.captions.colorLabel")} {t("settings.subtitles.colorLabel")}
</Menu.FieldTitle> </Menu.FieldTitle>
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
{colors.map((v) => ( {colors.map((v) => (

2
src/pages/parts/settings/SidebarPart.tsx
View File

@ -54,7 +54,7 @@ export function SidebarPart() {
icon: Icons.BRUSH, icon: Icons.BRUSH,
}, },
{ {
textKey: "settings.captions.title", textKey: "settings.subtitles.title",
id: "settings-captions", id: "settings-captions",
icon: Icons.CAPTIONS, icon: Icons.CAPTIONS,
}, },