New subtitle UI and refactor code

2024-12-20 14:37:43 +01:00 · 2024-07-08 05:55:07 +00:00 · 2024-07-08 05:55:07 +00:00 · 4942a78191
commit 4942a78191
parent 0ce757f1f4
6 changed files with 224 additions and 203 deletions
--- a/src/assets/locales/en.json
+++ b/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": {
--- a/src/components/player/atoms/Settings.tsx
+++ b/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} />
--- a/src/components/player/atoms/settings/CaptionsView.tsx
+++ b/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,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<
-    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;
@ -165,42 +125,10 @@ export function CaptionsView({
    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 (
    <>
@ -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)}
-            chevron
+            rightText={
+              useSubtitleStore((s) => s.isOpenSubtitles)
+                ? selectedLanguagePretty
+                : ""
+            }
          >
            {t("player.menus.subtitles.OpenSubtitlesChoice")}
-          </CaptionOption>
-          {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.ChevronLink>
        </Menu.ScrollToActiveSection>
      </FileDropHandler>
    </>
--- a/src/components/player/atoms/settings/OpensubtitlesCaptionsView.tsx
+++ b/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;
--- a/src/components/player/atoms/settings/SourceCaptionsView.tsx
+++ b/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: {
-  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>
-  );
-}
+import { CaptionOption } from "./CaptionsView";

-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
-      .map((t) => ({
+    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);
@ -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;
--- a/src/components/player/internals/ContextMenu/Links.tsx
+++ b/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">