New subtitle UI and refactor code

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/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);
@@ -85,6 +86,22 @@ function SettingsOverlay({ id }: { id: string }) {
             <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} />

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

@@ -1,8 +1,6 @@
 import classNames from "classnames";
-import Fuse from "fuse.js";
+import { type DragEvent, useRef, useState } from "react";
-import { type DragEvent, useMemo, 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 {
+import { getPrettyLanguageNameFromLocale } from "@/utils/language";
-  getPrettyLanguageNameFromLocale,
-  sortLangCodes,
-} 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,35 +82,6 @@ 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,
   backLink,
@@ -130,14 +92,12 @@ export function CaptionsView({
   const { t } = useTranslation();
   const router = useOverlayRouter(id);
   const selectedCaptionId = usePlayerStore((s) => s.caption.selected?.id);
-  const [currentlyDownloading, setCurrentlyDownloading] = useState<
+  const { disable } = useCaptions();
-    string | null
-  >(null);
-  const { selectCaptionById, disable } = useCaptions();
-  const captionList = usePlayerStore((s) => s.captionList);
-  const getHlsCaptionList = usePlayerStore((s) => s.display?.getCaptionList);
   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;
@@ -165,42 +125,10 @@ export function CaptionsView({
     reader.readAsText(firstFile);
   }
 
-  const captions = useMemo(
+  const selectedLanguagePretty = selectedCaptionLanguage
-    () =>
+    ? getPrettyLanguageNameFromLocale(selectedCaptionLanguage) ??
-      captionList.length !== 0 ? captionList : getHlsCaptionList?.() ?? [],
+      t("player.menus.subtitles.unknownLanguage")
-    [captionList, getHlsCaptionList],
+    : undefined;
-  );
-
-  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 (
     <>
@@ -257,9 +185,6 @@ export function CaptionsView({
         }}
         onDrop={(event) => onDrop(event)}
       >
-        <div className="mt-3">
-          <Input value={searchQuery} onInput={setSearchQuery} />
-        </div>
         <Menu.ScrollToActiveSection className="!pt-1 mt-2 pb-3">
           <CaptionOption
             onClick={() => disable()}
@@ -268,7 +193,21 @@ export function CaptionsView({
             {t("player.menus.subtitles.offChoice")}
           </CaptionOption>
           <CustomCaptionOption />
-          <CaptionOption
+          <Menu.ChevronLink
+            onClick={() =>
+              router.navigate(
+                backLink ? "/captions/source" : "/captions/sourceOverlay",
+              )
+            }
+            rightText={
+              useSubtitleStore((s) => s.isOpenSubtitles)
+                ? ""
+                : selectedLanguagePretty
+            }
+          >
+            {t("player.menus.subtitles.SourceChoice")}
+          </Menu.ChevronLink>
+          <Menu.ChevronLink
             onClick={() =>
               router.navigate(
                 backLink
@@ -276,33 +215,14 @@ export function CaptionsView({
                   : "/captions/opensubtitlesOverlay",
               )
             }
-            selected={useSubtitleStore((s) => s.isOpenSubtitles)}
+            rightText={
-            chevron
+              useSubtitleStore((s) => s.isOpenSubtitles)
+                ? selectedLanguagePretty
+                : ""
+            }
           >
             {t("player.menus.subtitles.OpenSubtitlesChoice")}
-          </CaptionOption>
+          </Menu.ChevronLink>
-          {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(
-                      backLink
-                        ? "/captions/opensubtitles"
-                        : "/captions/opensubtitlesOverlay",
-                    )
-                  }
-                  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>
-          ) : (
-            content
-          )}
         </Menu.ScrollToActiveSection>
       </FileDropHandler>
     </>

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

@@ -3,11 +3,9 @@ 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";
@@ -16,45 +14,17 @@ import {
   sortLangCodes,
 } from "@/utils/language";
 
-export function CaptionOption(props: {
+import { CaptionOption } from "./CaptionsView";
-  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) {
+export function useSubtitleList(subs: CaptionListItem[], searchQuery: string) {
   const { t: translate } = useTranslation();
   const unknownChoice = translate("player.menus.subtitles.unknownLanguage");
   return useMemo(() => {
-    const input = subs
+    const input = subs.map((t) => ({
-      .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);
@@ -73,12 +43,12 @@ function useSubtitleList(subs: CaptionListItem[], searchQuery: string) {
   }, [subs, searchQuery, unknownChoice]);
 }
 
-export function OpenSubtitlesCaptionView({
+export function SourceCaptionsView({
   id,
   overlayBackLink,
 }: {
   id: string;
-  overlayBackLink?: boolean;
+  overlayBackLink?: true;
 }) {
   const { t } = useTranslation();
   const router = useOverlayRouter(id);
@@ -97,7 +67,10 @@ export function OpenSubtitlesCaptionView({
   );
 
   const [searchQuery, setSearchQuery] = useState("");
-  const subtitleList = useSubtitleList(captions, searchQuery);
+  const subtitleList = useSubtitleList(
+    captions.filter((x) => !x.opensubtitles),
+    searchQuery,
+  );
 
   const [downloadReq, startDownload] = useAsyncFn(
     async (captionId: string) => {
@@ -107,7 +80,8 @@ export function OpenSubtitlesCaptionView({
     [selectCaptionById, setCurrentlyDownloading],
   );
 
-  const content = subtitleList.map((v) => {
+  const content = subtitleList.length
+    ? subtitleList.map((v) => {
         return (
           <CaptionOption
             // key must use index to prevent url collisions
@@ -125,7 +99,8 @@ export function OpenSubtitlesCaptionView({
             {v.languageName}
           </CaptionOption>
         );
-  });
+      })
+    : t("player.menus.subtitles.notFound");
 
   return (
     <>
@@ -135,17 +110,40 @@ export function OpenSubtitlesCaptionView({
             router.navigate(overlayBackLink ? "/captionsOverlay" : "/captions")
           }
         >
-          {t("player.menus.subtitles.OpenSubtitlesChoice")}
+          {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">
-        {content}
+        {!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 OpenSubtitlesCaptionView;
+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">