From c347fe7ef54fa96b858e3658ec565fff77206967 Mon Sep 17 00:00:00 2001
From: Vijay <74645268+vijaysingh2219@users.noreply.github.com>
Date: Thu, 28 Dec 2023 21:16:55 +0530
Subject: [PATCH 1/2] Enhance Clarity, Consistency, and Formatting in
 Captioning and Subtitling Options

Refined language for captioning and subtitling options in the codebase:

- Replaced 'captions' with 'subtitles' in player.menus keys.
- Updated occurrences of "settings.captions" to "settings.subtitles" in view components.
- Updated occurrences of  "player.menus.settings.enableCaptions" to "player.menus.settings.enableSubtitles" in SettingsMenu.tsx component.

Ensured consistency in translations by applying these changes to locales for different languages across the repository.
Additionally, performed auto-formatting using ESLint and Prettier for consistent code style.

This commit aims to improve overall clarity, alignment with preferred terminology, and maintain code quality through auto-formatting.
---
 src/assets/locales/en.json                         | 12 ++++++------
 .../player/atoms/settings/CaptionSettingsView.tsx  | 14 ++++++++------
 .../player/atoms/settings/CaptionsView.tsx         | 10 +++++-----
 .../player/atoms/settings/SettingsMenu.tsx         |  6 +++---
 src/pages/parts/settings/CaptionsPart.tsx          | 10 +++++-----
 src/pages/parts/settings/SidebarPart.tsx           |  2 +-
 6 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index f0ef16ea..bc1b154e 100644
--- a/src/assets/locales/en.json
+++ b/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,8 +174,8 @@
           "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": {
           "fixCapitals": "Fix capitalization",
@@ -363,8 +363,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",
diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx
index 000cbd30..fa7a8cc2 100644
--- a/src/components/player/atoms/settings/CaptionSettingsView.tsx
+++ b/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
+        Custom Subtitles
       </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
diff --git a/src/components/player/atoms/settings/CaptionsView.tsx b/src/components/player/atoms/settings/CaptionsView.tsx
index e2eb2d1a..b640f9cd 100644
--- a/src/components/player/atoms/settings/CaptionsView.tsx
+++ b/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}
diff --git a/src/components/player/atoms/settings/SettingsMenu.tsx b/src/components/player/atoms/settings/SettingsMenu.tsx
index 14b3827f..c9ecdf52 100644
--- a/src/components/player/atoms/settings/SettingsMenu.tsx
+++ b/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")}
diff --git a/src/pages/parts/settings/CaptionsPart.tsx b/src/pages/parts/settings/CaptionsPart.tsx
index 8327e343..f40e1d93 100644
--- a/src/pages/parts/settings/CaptionsPart.tsx
+++ b/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) => (
diff --git a/src/pages/parts/settings/SidebarPart.tsx b/src/pages/parts/settings/SidebarPart.tsx
index 66d33028..16c657d3 100644
--- a/src/pages/parts/settings/SidebarPart.tsx
+++ b/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,
     },

From bc32fc3f8a8f2e79997039b02dd881264945d1a8 Mon Sep 17 00:00:00 2001
From: Vijay <74645268+vijaysingh2219@users.noreply.github.com>
Date: Thu, 28 Dec 2023 21:56:28 +0530
Subject: [PATCH 2/2] Create translation string for backlink in subtitles
 settings

---
 src/assets/locales/en.json                                   | 1 +
 src/components/player/atoms/settings/CaptionSettingsView.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index bc1b154e..4b4874de 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -178,6 +178,7 @@
         "title": "Subtitles",
         "customizeLabel": "Customize",
         "settings": {
+          "backlink": "Custom Subtitles",
           "fixCapitals": "Fix capitalization",
           "delay": "Caption delay"
         },
diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx
index fa7a8cc2..a12dea63 100644
--- a/src/components/player/atoms/settings/CaptionSettingsView.tsx
+++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx
@@ -229,7 +229,7 @@ export function CaptionSettingsView({ id }: { id: string }) {
   return (
     <>
       <Menu.BackLink onClick={() => router.navigate("/captions")}>
-        Custom Subtitles
+        {t("player.menus.subtitles.settings.backlink")}
       </Menu.BackLink>
       <Menu.Section className="space-y-6">
         <CaptionSetting