Add a shortcut to subtitle settings in the bottomControls and update ui

src/assets/locales/en.json

@@ -372,6 +372,7 @@
         "customChoice": "Drop or upload file",
         "customizeLabel": "Customize",
         "offChoice": "Off",
+        "SourceChoice": "Source Captions",
         "OpenSubtitlesChoice": "OpenSubtitles",
         "settings": {
           "backlink": "Custom subtitles",
@@ -382,7 +383,8 @@
         "unknownLanguage": "Unknown",
         "dropSubtitleFile": "Drop subtitle file here! >_<",
         "scrapeButton": "Scrape subtitles",
-        "empty": "There are no provided subtitles for this."
+        "empty": "There are no provided subtitles for this.",
+        "notFound": "None of the available options match your query"
       }
     },
     "metadata": {

src/components/player/atoms/Captions.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+
+import { Icons } from "@/components/Icon";
+import { OverlayAnchor } from "@/components/overlays/OverlayAnchor";
+import { VideoPlayerButton } from "@/components/player/internals/Button";
+import { useOverlayRouter } from "@/hooks/useOverlayRouter";
+import { usePlayerStore } from "@/stores/player/store";
+
+export function Captions() {
+  const router = useOverlayRouter("settings");
+  const setHasOpenOverlay = usePlayerStore((s) => s.setHasOpenOverlay);
+
+  useEffect(() => {
+    setHasOpenOverlay(router.isRouterActive);
+  }, [setHasOpenOverlay, router.isRouterActive]);
+
+  return (
+    <OverlayAnchor id={router.id}>
+      <VideoPlayerButton
+        onClick={() => {
+          router.open();
+          router.navigate("/captionsOverlay");
+        }}
+        icon={Icons.CAPTIONS}
+      />
+    </OverlayAnchor>
+  );
+}

src/components/player/atoms/Settings.tsx

@@ -18,10 +18,11 @@ import { AudioView } from "./settings/AudioView";
 import { CaptionSettingsView } from "./settings/CaptionSettingsView";
 import { CaptionsView } from "./settings/CaptionsView";
 import { DownloadRoutes } from "./settings/Downloads";
-import { OpenSubtitlesCaptionView } from "./settings/Opensubtitles";
+import { OpenSubtitlesCaptionView } from "./settings/OpensubtitlesCaptionsView";
 import { PlaybackSettingsView } from "./settings/PlaybackSettingsView";
 import { QualityView } from "./settings/QualityView";
 import { SettingsMenu } from "./settings/SettingsMenu";
+import SourceCaptionsView from "./settings/SourceCaptionsView";
 
 function SettingsOverlay({ id }: { id: string }) {
   const [chosenSourceId, setChosenSourceId] = useState<string | null>(null);
@@ -54,6 +55,12 @@ function SettingsOverlay({ id }: { id: string }) {
           </Menu.Card>
         </OverlayPage>
         <OverlayPage id={id} path="/captions" width={343} height={431}>
+          <Menu.CardWithScrollable>
+            <CaptionsView id={id} backLink />
+          </Menu.CardWithScrollable>
+        </OverlayPage>
+        {/* This is used by the captions shortcut in bottomControls of player */}
+        <OverlayPage id={id} path="/captionsOverlay" width={343} height={431}>
           <Menu.CardWithScrollable>
             <CaptionsView id={id} />
           </Menu.CardWithScrollable>
@@ -68,11 +75,49 @@ function SettingsOverlay({ id }: { id: string }) {
             <OpenSubtitlesCaptionView id={id} />
           </Menu.Card>
         </OverlayPage>
+        {/* This is used by the captions shortcut in bottomControls of player */}
+        <OverlayPage
+          id={id}
+          path="/captions/opensubtitlesOverlay"
+          width={343}
+          height={431}
+        >
+          <Menu.Card>
+            <OpenSubtitlesCaptionView id={id} overlayBackLink />
+          </Menu.Card>
+        </OverlayPage>
+        <OverlayPage id={id} path="/captions/source" width={343} height={431}>
+          <Menu.Card>
+            <SourceCaptionsView id={id} />
+          </Menu.Card>
+        </OverlayPage>
+        {/* This is used by the captions shortcut in bottomControls of player */}
+        <OverlayPage
+          id={id}
+          path="/captions/sourceOverlay"
+          width={343}
+          height={431}
+        >
+          <Menu.Card>
+            <SourceCaptionsView id={id} overlayBackLink />
+          </Menu.Card>
+        </OverlayPage>
         <OverlayPage id={id} path="/captions/settings" width={343} height={450}>
           <Menu.Card>
             <CaptionSettingsView id={id} />
           </Menu.Card>
         </OverlayPage>
+        {/* This is used by the captions shortcut in bottomControls of player */}
+        <OverlayPage
+          id={id}
+          path="/captions/settingsOverlay"
+          width={343}
+          height={450}
+        >
+          <Menu.Card>
+            <CaptionSettingsView id={id} overlayBackLink />
+          </Menu.Card>
+        </OverlayPage>
         <OverlayPage id={id} path="/source" width={343} height={431}>
           <Menu.CardWithScrollable>
             <SourceSelectionView id={id} onChoose={setChosenSourceId} />

src/components/player/atoms/index.ts

@@ -16,3 +16,4 @@ export * from "./VolumeChangedPopout";
 export * from "./NextEpisodeButton";
 export * from "./Chromecast";
 export * from "./CastingNotification";
+export * from "./Captions";

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

@@ -216,7 +216,13 @@ export function CaptionSetting(props: {
 
 export const colors = ["#ffffff", "#b0b0b0", "#80b1fa", "#e2e535"];
 
-export function CaptionSettingsView({ id }: { id: string }) {
+export function CaptionSettingsView({
+  id,
+  overlayBackLink,
+}: {
+  id: string;
+  overlayBackLink?: boolean;
+}) {
   const { t } = useTranslation();
   const router = useOverlayRouter(id);
   const styling = useSubtitleStore((s) => s.styling);
@@ -228,7 +234,11 @@ export function CaptionSettingsView({ id }: { id: string }) {
 
   return (
     <>
-      <Menu.BackLink onClick={() => router.navigate("/captions")}>
+      <Menu.BackLink
+        onClick={() =>
+          router.navigate(overlayBackLink ? "/captionsOverlay" : "/captions")
+        }
+      >
         {t("player.menus.subtitles.settings.backlink")}
       </Menu.BackLink>
       <Menu.Section className="space-y-6 pb-5">