Merge pull request #69 from ztpn/subs-icon

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">

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

@@ -1,8 +1,6 @@
 import classNames from "classnames";
-import Fuse from "fuse.js";
-import { type DragEvent, useMemo, useRef, useState } from "react";
+import { type DragEvent, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useAsyncFn } from "react-use";
 import { convert } from "subsrt-ts";
 
 import { subtitleTypeList } from "@/backend/helpers/subs";
@@ -11,16 +9,11 @@ import { FlagIcon } from "@/components/FlagIcon";
 import { Icon, Icons } from "@/components/Icon";
 import { useCaptions } from "@/components/player/hooks/useCaptions";
 import { Menu } from "@/components/player/internals/ContextMenu";
-import { Input } from "@/components/player/internals/ContextMenu/Input";
 import { SelectableLink } from "@/components/player/internals/ContextMenu/Links";
 import { useOverlayRouter } from "@/hooks/useOverlayRouter";
-import { CaptionListItem } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
 import { useSubtitleStore } from "@/stores/subtitles";
-import {
-  getPrettyLanguageNameFromLocale,
-  sortLangCodes,
-} from "@/utils/language";
+import { getPrettyLanguageNameFromLocale } from "@/utils/language";
 
 export function CaptionOption(props: {
   countryCode?: string;
@@ -29,7 +22,6 @@ export function CaptionOption(props: {
   loading?: boolean;
   onClick?: () => void;
   error?: React.ReactNode;
-  chevron?: boolean;
 }) {
   return (
     <SelectableLink
@@ -37,7 +29,6 @@ export function CaptionOption(props: {
       loading={props.loading}
       error={props.error}
       onClick={props.onClick}
-      chevron={props.chevron}
     >
       <span
         data-active-link={props.selected ? true : undefined}
@@ -52,7 +43,7 @@ export function CaptionOption(props: {
   );
 }
 
-function CustomCaptionOption() {
+export function CustomCaptionOption() {
   const { t } = useTranslation();
   const lang = usePlayerStore((s) => s.caption.selected?.language);
   const setCaption = usePlayerStore((s) => s.setCaption);
@@ -91,47 +82,22 @@ function CustomCaptionOption() {
   );
 }
 
-function useSubtitleList(subs: CaptionListItem[], searchQuery: string) {
-  const { t: translate } = useTranslation();
-  const unknownChoice = translate("player.menus.subtitles.unknownLanguage");
-  return useMemo(() => {
-    const input = subs
-      .map((t) => ({
-        ...t,
-        languageName:
-          getPrettyLanguageNameFromLocale(t.language) ?? unknownChoice,
-      }))
-      .filter((x) => !x.opensubtitles);
-    const sorted = sortLangCodes(input.map((t) => t.language));
-    let results = input.sort((a, b) => {
-      return sorted.indexOf(a.language) - sorted.indexOf(b.language);
-    });
-
-    if (searchQuery.trim().length > 0) {
-      const fuse = new Fuse(input, {
-        includeScore: true,
-        keys: ["languageName"],
-      });
-
-      results = fuse.search(searchQuery).map((res) => res.item);
-    }
-
-    return results;
-  }, [subs, searchQuery, unknownChoice]);
-}
-
-export function CaptionsView({ id }: { id: string }) {
+export function CaptionsView({
+  id,
+  backLink,
+}: {
+  id: string;
+  backLink?: true;
+}) {
   const { t } = useTranslation();
   const router = useOverlayRouter(id);
   const selectedCaptionId = usePlayerStore((s) => s.caption.selected?.id);
-  const [currentlyDownloading, setCurrentlyDownloading] = useState<
-    string | null
-  >(null);
-  const { selectCaptionById, disable } = useCaptions();
-  const captionList = usePlayerStore((s) => s.captionList);
-  const getHlsCaptionList = usePlayerStore((s) => s.display?.getCaptionList);
+  const { disable } = useCaptions();
   const [dragging, setDragging] = useState(false);
   const setCaption = usePlayerStore((s) => s.setCaption);
+  const selectedCaptionLanguage = usePlayerStore(
+    (s) => s.caption.selected?.language,
+  );
 
   function onDrop(event: DragEvent<HTMLDivElement>) {
     const files = event.dataTransfer.files;
@@ -159,42 +125,10 @@ export function CaptionsView({ id }: { id: string }) {
     reader.readAsText(firstFile);
   }
 
-  const captions = useMemo(
-    () =>
-      captionList.length !== 0 ? captionList : getHlsCaptionList?.() ?? [],
-    [captionList, getHlsCaptionList],
-  );
-
-  const [searchQuery, setSearchQuery] = useState("");
-  const subtitleList = useSubtitleList(captions, searchQuery);
-
-  const [downloadReq, startDownload] = useAsyncFn(
-    async (captionId: string) => {
-      setCurrentlyDownloading(captionId);
-      return selectCaptionById(captionId);
-    },
-    [selectCaptionById, setCurrentlyDownloading],
-  );
-
-  const content = subtitleList.map((v) => {
-    return (
-      <CaptionOption
-        // key must use index to prevent url collisions
-        key={v.id}
-        countryCode={v.language}
-        selected={v.id === selectedCaptionId}
-        loading={v.id === currentlyDownloading && downloadReq.loading}
-        error={
-          v.id === currentlyDownloading && downloadReq.error
-            ? downloadReq.error.toString()
-            : undefined
-        }
-        onClick={() => startDownload(v.id)}
-      >
-        {v.languageName}
-      </CaptionOption>
-    );
-  });
+  const selectedLanguagePretty = selectedCaptionLanguage
+    ? getPrettyLanguageNameFromLocale(selectedCaptionLanguage) ??
+      t("player.menus.subtitles.unknownLanguage")
+    : undefined;
 
   return (
     <>
@@ -213,6 +147,7 @@ export function CaptionsView({ id }: { id: string }) {
           </div>
         </div>
 
+        {backLink ? (
           <Menu.BackLink
             onClick={() => router.navigate("/")}
             rightSide={
@@ -227,6 +162,21 @@ export function CaptionsView({ id }: { id: string }) {
           >
             {t("player.menus.subtitles.title")}
           </Menu.BackLink>
+        ) : (
+          <Menu.Title
+            rightSide={
+              <button
+                type="button"
+                onClick={() => router.navigate("/captions/settingsOverlay")}
+                className="-mr-2 -my-1 px-2 p-[0.4em] rounded tabbable hover:bg-video-context-light hover:bg-opacity-10"
+              >
+                {t("player.menus.subtitles.customizeLabel")}
+              </button>
+            }
+          >
+            {t("player.menus.subtitles.title")}
+          </Menu.Title>
+        )}
       </div>
       <FileDropHandler
         className={`transition duration-300 ${dragging ? "opacity-20" : ""}`}
@@ -235,16 +185,6 @@ export function CaptionsView({ id }: { id: string }) {
         }}
         onDrop={(event) => onDrop(event)}
       >
-        <div className="mt-3 flex flex-row gap-2">
-          <Input value={searchQuery} onInput={setSearchQuery} />
-          <button
-            type="button"
-            onClick={() => router.navigate("/captions/opensubtitles")}
-            className="p-[0.5em] rounded tabbable hover:bg-video-context-hoverColor hover:bg-opacity-50"
-          >
-            <Icon icon={Icons.WEB} />
-          </button>
-        </div>
         <Menu.ScrollToActiveSection className="!pt-1 mt-2 pb-3">
           <CaptionOption
             onClick={() => disable()}
@@ -253,22 +193,36 @@ export function CaptionsView({ id }: { id: string }) {
             {t("player.menus.subtitles.offChoice")}
           </CaptionOption>
           <CustomCaptionOption />
-          {content.length === 0 ? (
-            <div className="p-4 rounded-xl bg-video-context-light bg-opacity-10 font-medium text-center">
-              <div className="flex flex-col items-center justify-center gap-3">
-                {t("player.menus.subtitles.empty")}
-                <button
-                  type="button"
-                  onClick={() => router.navigate("/captions/opensubtitles")}
-                  className="p-1 w-3/4 rounded tabbable duration-200 bg-opacity-10 bg-video-context-light hover:bg-opacity-20"
+          <Menu.ChevronLink
+            onClick={() =>
+              router.navigate(
+                backLink ? "/captions/source" : "/captions/sourceOverlay",
+              )
+            }
+            rightText={
+              useSubtitleStore((s) => s.isOpenSubtitles)
+                ? ""
+                : selectedLanguagePretty
+            }
           >
-                  {t("player.menus.subtitles.scrapeButton")}
-                </button>
-              </div>
-            </div>
-          ) : (
-            content
-          )}
+            {t("player.menus.subtitles.SourceChoice")}
+          </Menu.ChevronLink>
+          <Menu.ChevronLink
+            onClick={() =>
+              router.navigate(
+                backLink
+                  ? "/captions/opensubtitles"
+                  : "/captions/opensubtitlesOverlay",
+              )
+            }
+            rightText={
+              useSubtitleStore((s) => s.isOpenSubtitles)
+                ? selectedLanguagePretty
+                : ""
+            }
+          >
+            {t("player.menus.subtitles.OpenSubtitlesChoice")}
+          </Menu.ChevronLink>
         </Menu.ScrollToActiveSection>
       </FileDropHandler>
     </>

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

@@ -1,141 +0,0 @@
-import Fuse from "fuse.js";
-import { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useAsyncFn } from "react-use";
-
-import { FlagIcon } from "@/components/FlagIcon";
-import { useCaptions } from "@/components/player/hooks/useCaptions";
-import { Menu } from "@/components/player/internals/ContextMenu";
-import { Input } from "@/components/player/internals/ContextMenu/Input";
-import { SelectableLink } from "@/components/player/internals/ContextMenu/Links";
-import { useOverlayRouter } from "@/hooks/useOverlayRouter";
-import { CaptionListItem } from "@/stores/player/slices/source";
-import { usePlayerStore } from "@/stores/player/store";
-import {
-  getPrettyLanguageNameFromLocale,
-  sortLangCodes,
-} from "@/utils/language";
-
-export function CaptionOption(props: {
-  countryCode?: string;
-  children: React.ReactNode;
-  selected?: boolean;
-  loading?: boolean;
-  onClick?: () => void;
-  error?: React.ReactNode;
-}) {
-  return (
-    <SelectableLink
-      selected={props.selected}
-      loading={props.loading}
-      error={props.error}
-      onClick={props.onClick}
-    >
-      <span
-        data-active-link={props.selected ? true : undefined}
-        className="flex items-center"
-      >
-        <span data-code={props.countryCode} className="mr-3 inline-flex">
-          <FlagIcon langCode={props.countryCode} />
-        </span>
-        <span>{props.children}</span>
-      </span>
-    </SelectableLink>
-  );
-}
-
-function useSubtitleList(subs: CaptionListItem[], searchQuery: string) {
-  const { t: translate } = useTranslation();
-  const unknownChoice = translate("player.menus.subtitles.unknownLanguage");
-  return useMemo(() => {
-    const input = subs
-      .map((t) => ({
-        ...t,
-        languageName:
-          getPrettyLanguageNameFromLocale(t.language) ?? unknownChoice,
-      }))
-      .filter((x) => x.opensubtitles);
-    const sorted = sortLangCodes(input.map((t) => t.language));
-    let results = input.sort((a, b) => {
-      return sorted.indexOf(a.language) - sorted.indexOf(b.language);
-    });
-
-    if (searchQuery.trim().length > 0) {
-      const fuse = new Fuse(input, {
-        includeScore: true,
-        keys: ["languageName"],
-      });
-
-      results = fuse.search(searchQuery).map((res) => res.item);
-    }
-
-    return results;
-  }, [subs, searchQuery, unknownChoice]);
-}
-
-export function OpenSubtitlesCaptionView({ id }: { id: string }) {
-  const { t } = useTranslation();
-  const router = useOverlayRouter(id);
-  const selectedCaptionId = usePlayerStore((s) => s.caption.selected?.id);
-  const [currentlyDownloading, setCurrentlyDownloading] = useState<
-    string | null
-  >(null);
-  const { selectCaptionById } = useCaptions();
-  const captionList = usePlayerStore((s) => s.captionList);
-  const getHlsCaptionList = usePlayerStore((s) => s.display?.getCaptionList);
-
-  const captions = useMemo(
-    () =>
-      captionList.length !== 0 ? captionList : getHlsCaptionList?.() ?? [],
-    [captionList, getHlsCaptionList],
-  );
-
-  const [searchQuery, setSearchQuery] = useState("");
-  const subtitleList = useSubtitleList(captions, searchQuery);
-
-  const [downloadReq, startDownload] = useAsyncFn(
-    async (captionId: string) => {
-      setCurrentlyDownloading(captionId);
-      return selectCaptionById(captionId);
-    },
-    [selectCaptionById, setCurrentlyDownloading],
-  );
-
-  const content = subtitleList.map((v) => {
-    return (
-      <CaptionOption
-        // key must use index to prevent url collisions
-        key={v.id}
-        countryCode={v.language}
-        selected={v.id === selectedCaptionId}
-        loading={v.id === currentlyDownloading && downloadReq.loading}
-        error={
-          v.id === currentlyDownloading && downloadReq.error
-            ? downloadReq.error.toString()
-            : undefined
-        }
-        onClick={() => startDownload(v.id)}
-      >
-        {v.languageName}
-      </CaptionOption>
-    );
-  });
-
-  return (
-    <>
-      <div>
-        <Menu.BackLink onClick={() => router.navigate("/captions")}>
-          {t("player.menus.subtitles.OpenSubtitlesChoice")}
-        </Menu.BackLink>
-      </div>
-      <div className="mt-3">
-        <Input value={searchQuery} onInput={setSearchQuery} />
-      </div>
-      <Menu.ScrollToActiveSection className="!pt-1 mt-2 pb-3">
-        {content}
-      </Menu.ScrollToActiveSection>
-    </>
-  );
-}
-
-export default OpenSubtitlesCaptionView;

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

@@ -0,0 +1,104 @@
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAsyncFn } from "react-use";
+
+import { useCaptions } from "@/components/player/hooks/useCaptions";
+import { Menu } from "@/components/player/internals/ContextMenu";
+import { Input } from "@/components/player/internals/ContextMenu/Input";
+import { useOverlayRouter } from "@/hooks/useOverlayRouter";
+import { usePlayerStore } from "@/stores/player/store";
+
+import { CaptionOption } from "./CaptionsView";
+import { useSubtitleList } from "./SourceCaptionsView";
+
+export function OpenSubtitlesCaptionView({
+  id,
+  overlayBackLink,
+}: {
+  id: string;
+  overlayBackLink?: true;
+}) {
+  const { t } = useTranslation();
+  const router = useOverlayRouter(id);
+  const selectedCaptionId = usePlayerStore((s) => s.caption.selected?.id);
+  const [currentlyDownloading, setCurrentlyDownloading] = useState<
+    string | null
+  >(null);
+  const { selectCaptionById } = useCaptions();
+  const captionList = usePlayerStore((s) => s.captionList);
+  const getHlsCaptionList = usePlayerStore((s) => s.display?.getCaptionList);
+
+  const captions = useMemo(
+    () =>
+      captionList.length !== 0 ? captionList : getHlsCaptionList?.() ?? [],
+    [captionList, getHlsCaptionList],
+  );
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const subtitleList = useSubtitleList(
+    captions.filter((x) => x.opensubtitles),
+    searchQuery,
+  );
+
+  const [downloadReq, startDownload] = useAsyncFn(
+    async (captionId: string) => {
+      setCurrentlyDownloading(captionId);
+      return selectCaptionById(captionId);
+    },
+    [selectCaptionById, setCurrentlyDownloading],
+  );
+
+  const content = subtitleList.length
+    ? subtitleList.map((v) => {
+        return (
+          <CaptionOption
+            // key must use index to prevent url collisions
+            key={v.id}
+            countryCode={v.language}
+            selected={v.id === selectedCaptionId}
+            loading={v.id === currentlyDownloading && downloadReq.loading}
+            error={
+              v.id === currentlyDownloading && downloadReq.error
+                ? downloadReq.error.toString()
+                : undefined
+            }
+            onClick={() => startDownload(v.id)}
+          >
+            {v.languageName}
+          </CaptionOption>
+        );
+      })
+    : t("player.menus.subtitles.notFound");
+
+  return (
+    <>
+      <div>
+        <Menu.BackLink
+          onClick={() =>
+            router.navigate(overlayBackLink ? "/captionsOverlay" : "/captions")
+          }
+        >
+          {t("player.menus.subtitles.OpenSubtitlesChoice")}
+        </Menu.BackLink>
+      </div>
+      {captionList.filter((x) => x.opensubtitles).length ? (
+        <div className="mt-3">
+          <Input value={searchQuery} onInput={setSearchQuery} />
+        </div>
+      ) : null}
+      <Menu.ScrollToActiveSection className="!pt-1 mt-2 pb-3">
+        {!captionList.filter((x) => x.opensubtitles).length ? (
+          <div className="p-4 rounded-xl bg-video-context-light bg-opacity-10 font-medium text-center">
+            <div className="flex flex-col items-center justify-center gap-3">
+              {t("player.menus.subtitles.empty")}
+            </div>
+          </div>
+        ) : (
+          <div className="text-center">{content}</div>
+        )}
+      </Menu.ScrollToActiveSection>
+    </>
+  );
+}
+
+export default OpenSubtitlesCaptionView;

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

@@ -0,0 +1,149 @@
+import Fuse from "fuse.js";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAsyncFn } from "react-use";
+
+import { useCaptions } from "@/components/player/hooks/useCaptions";
+import { Menu } from "@/components/player/internals/ContextMenu";
+import { Input } from "@/components/player/internals/ContextMenu/Input";
+import { useOverlayRouter } from "@/hooks/useOverlayRouter";
+import { CaptionListItem } from "@/stores/player/slices/source";
+import { usePlayerStore } from "@/stores/player/store";
+import {
+  getPrettyLanguageNameFromLocale,
+  sortLangCodes,
+} from "@/utils/language";
+
+import { CaptionOption } from "./CaptionsView";
+
+export function useSubtitleList(subs: CaptionListItem[], searchQuery: string) {
+  const { t: translate } = useTranslation();
+  const unknownChoice = translate("player.menus.subtitles.unknownLanguage");
+  return useMemo(() => {
+    const input = subs.map((t) => ({
+      ...t,
+      languageName:
+        getPrettyLanguageNameFromLocale(t.language) ?? unknownChoice,
+    }));
+    const sorted = sortLangCodes(input.map((t) => t.language));
+    let results = input.sort((a, b) => {
+      return sorted.indexOf(a.language) - sorted.indexOf(b.language);
+    });
+
+    if (searchQuery.trim().length > 0) {
+      const fuse = new Fuse(input, {
+        includeScore: true,
+        keys: ["languageName"],
+      });
+
+      results = fuse.search(searchQuery).map((res) => res.item);
+    }
+
+    return results;
+  }, [subs, searchQuery, unknownChoice]);
+}
+
+export function SourceCaptionsView({
+  id,
+  overlayBackLink,
+}: {
+  id: string;
+  overlayBackLink?: true;
+}) {
+  const { t } = useTranslation();
+  const router = useOverlayRouter(id);
+  const selectedCaptionId = usePlayerStore((s) => s.caption.selected?.id);
+  const [currentlyDownloading, setCurrentlyDownloading] = useState<
+    string | null
+  >(null);
+  const { selectCaptionById } = useCaptions();
+  const captionList = usePlayerStore((s) => s.captionList);
+  const getHlsCaptionList = usePlayerStore((s) => s.display?.getCaptionList);
+
+  const captions = useMemo(
+    () =>
+      captionList.length !== 0 ? captionList : getHlsCaptionList?.() ?? [],
+    [captionList, getHlsCaptionList],
+  );
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const subtitleList = useSubtitleList(
+    captions.filter((x) => !x.opensubtitles),
+    searchQuery,
+  );
+
+  const [downloadReq, startDownload] = useAsyncFn(
+    async (captionId: string) => {
+      setCurrentlyDownloading(captionId);
+      return selectCaptionById(captionId);
+    },
+    [selectCaptionById, setCurrentlyDownloading],
+  );
+
+  const content = subtitleList.length
+    ? subtitleList.map((v) => {
+        return (
+          <CaptionOption
+            // key must use index to prevent url collisions
+            key={v.id}
+            countryCode={v.language}
+            selected={v.id === selectedCaptionId}
+            loading={v.id === currentlyDownloading && downloadReq.loading}
+            error={
+              v.id === currentlyDownloading && downloadReq.error
+                ? downloadReq.error.toString()
+                : undefined
+            }
+            onClick={() => startDownload(v.id)}
+          >
+            {v.languageName}
+          </CaptionOption>
+        );
+      })
+    : t("player.menus.subtitles.notFound");
+
+  return (
+    <>
+      <div>
+        <Menu.BackLink
+          onClick={() =>
+            router.navigate(overlayBackLink ? "/captionsOverlay" : "/captions")
+          }
+        >
+          {t("player.menus.subtitles.SourceChoice")}
+        </Menu.BackLink>
+      </div>
+      {captionList.filter((x) => !x.opensubtitles).length ? (
+        <div className="mt-3">
+          <Input value={searchQuery} onInput={setSearchQuery} />
+        </div>
+      ) : null}
+      <Menu.ScrollToActiveSection className="!pt-1 mt-2 pb-3">
+        {!captionList.filter((x) => !x.opensubtitles).length ? (
+          <div className="p-4 rounded-xl bg-video-context-light bg-opacity-10 font-medium text-center">
+            <div className="flex flex-col items-center justify-center gap-3">
+              {t("player.menus.subtitles.empty")}
+              <button
+                type="button"
+                onClick={() =>
+                  router.navigate(
+                    overlayBackLink
+                      ? "/captions/opensubtitlesOverlay"
+                      : "/captions/opensubtitles",
+                  )
+                }
+                className="p-1 w-3/4 rounded tabbable duration-200 bg-opacity-10 bg-video-context-light hover:bg-opacity-20"
+              >
+                {t("player.menus.subtitles.scrapeButton")}
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="text-center">{content}</div>
+        )}
+      </Menu.ScrollToActiveSection>
+    </>
+  );
+}
+
+export default SourceCaptionsView;

src/components/player/internals/ContextMenu/Links.tsx

@@ -123,24 +123,9 @@ export function SelectableLink(props: {
   children?: ReactNode;
   disabled?: boolean;
   error?: ReactNode;
-  chevron?: boolean;
 }) {
   let rightContent;
   if (props.selected) {
-    if (props.chevron) {
-      rightContent = (
-        <span className="flex items-center">
-          <Icon
-            icon={Icons.CIRCLE_CHECK}
-            className="text-xl text-video-context-type-accent"
-          />
-          <Icon
-            className="text-white text-xl ml-1 -mr-1.5"
-            icon={Icons.CHEVRON_RIGHT}
-          />
-        </span>
-      );
-    } else {
     rightContent = (
       <Icon
         icon={Icons.CIRCLE_CHECK}
@@ -148,11 +133,6 @@ export function SelectableLink(props: {
       />
     );
   }
-  } else if (props.chevron) {
-    rightContent = (
-      <Icon className="text-xl ml-1 -mr-1.5" icon={Icons.CHEVRON_RIGHT} />
-    );
-  }
   if (props.error)
     rightContent = (
       <span className="flex items-center text-video-context-error">

src/pages/parts/player/PlayerPart.tsx

@@ -111,7 +111,10 @@ export function PlayerPart(props: PlayerPartProps) {
             ) : null}
             {status === playerStatus.PLAYBACK_ERROR ||
             status === playerStatus.PLAYING ? (
+              <>
+                <Player.Captions />
                 <Player.Settings />
+              </>
             ) : null}
             <Player.Fullscreen />
           </div>
@@ -121,7 +124,12 @@ export function PlayerPart(props: PlayerPartProps) {
           <div className="flex justify-center space-x-3">
             {status === playerStatus.PLAYING ? <Player.Pip /> : null}
             <Player.Episodes />
-            {status === playerStatus.PLAYING ? <Player.Settings /> : null}
+            {status === playerStatus.PLAYING ? (
+              <>
+                <Player.Captions />
+                <Player.Settings />
+              </>
+            ) : null}
           </div>
           <div>
             <Player.Fullscreen />