Merge pull request #605 from vijaysingh2219/dev

Enhance Clarity, Consistency, and Formatting in Captioning and Subtitling Options

src/assets/locales/en.json

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

src/components/player/atoms/settings/CaptionSettingsView.tsx

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

src/components/player/atoms/settings/CaptionsView.tsx

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

src/components/player/atoms/settings/SettingsMenu.tsx

@@ -32,7 +32,7 @@ export function SettingsMenu({ id }: { id: string }) {
 
   const selectedLanguagePretty = selectedCaptionLanguage
     ? getLanguageFromIETF(selectedCaptionLanguage) ??
-      t("player.menus.captions.unknownLanguage")
+      t("player.menus.subtitles.unknownLanguage")
     : undefined;
 
   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.ChevronLink
           onClick={() => router.navigate("/captions")}
           rightText={selectedLanguagePretty ?? undefined}
         >
-          {t("player.menus.settings.captionItem")}
+          {t("player.menus.settings.subtitleItem")}
         </Menu.ChevronLink>
         <Menu.ChevronLink onClick={() => router.navigate("/playback")}>
           {t("player.menus.settings.playbackItem")}

src/pages/parts/settings/CaptionsPart.tsx

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

src/pages/parts/settings/SidebarPart.tsx

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