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.
2024-12-30 16:17:41 +01:00 · 2023-12-28 21:16:55 +05:30 · 2023-12-28 21:16:55 +05:30 · c347fe7ef5
commit c347fe7ef5
parent 505afab189
6 changed files with 28 additions and 26 deletions
--- 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",
--- 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
--- 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}
--- 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")}
--- 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) => (
--- 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,
    },