improve most voted algorithm, remove temporary state

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>

src/backend/helpers/subs.ts

@@ -82,9 +82,14 @@ export async function searchSubtitles(
   });
 
   return Object.values(sortedByLanguage).map((langs) => {
-    const sortedByRating = langs
+    const onlyLegacySubs = langs.filter(
-      .filter((v): v is SubtitleSearchItem => !!v.attributes.legacy_subtitle_id) // must have legacy id
+      (v): v is SubtitleSearchItem => !!v.attributes.legacy_subtitle_id
-      .sort((a, b) => b.attributes.ratings - a.attributes.ratings);
+    );
+    const sortedByRating = onlyLegacySubs.sort(
+      (a, b) =>
+        b.attributes.ratings * (b.attributes.votes ?? 0) -
+        a.attributes.ratings * (a.attributes.votes ?? 0)
+    );
     return sortedByRating[0];
   });
 }
@@ -95,6 +100,7 @@ export function languageIdToName(langId: string): string | null {
 
 export async function downloadSrt(legacySubId: string): Promise<string> {
   // TODO there is cloudflare protection so this may not always work. what to do about that?
+  // TODO also there is ratelimit on the page itself
   // language code is hardcoded here, it does nothing
   const zipFile = await proxiedFetch<ArrayBuffer>(
     `https://dl.opensubtitles.org/en/subtitleserve/sub/${legacySubId}`,

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

@@ -106,10 +106,6 @@ export function CaptionsView({ id }: { id: string }) {
     [download, setCurrentlyDownloading]
   );
 
-  let downloadProgress: ReactNode = null;
-  if (downloadReq.loading) downloadProgress = <p>downloading...</p>;
-  else if (downloadReq.error) downloadProgress = <p>failed to download...</p>;
-
   let content: ReactNode = null;
   if (req.loading) content = <p>loading...</p>;
   else if (req.error) content = <p>errored!</p>;
@@ -153,22 +149,25 @@ export function CaptionsView({ id }: { id: string }) {
 
   return (
     <>
-      <Menu.BackLink
+      <div>
-        onClick={() => router.navigate("/")}
+        <Menu.BackLink
-        rightSide={
+          onClick={() => router.navigate("/")}
-          <button
+          rightSide={
-            type="button"
+            <button
-            onClick={() => router.navigate("/captions/settings")}
+              type="button"
-          >
+              onClick={() => router.navigate("/captions/settings")}
-            Customize
+            >
-          </button>
+              Customize
-        }
+            </button>
-      >
+          }
-        Captions
+        >
-      </Menu.BackLink>
+          Captions
-      <Menu.Section className="pb-6">
+        </Menu.BackLink>
-        <Input value={searchQuery} onInput={setSearchQuery} />
+        <div className="mt-3">
-        {downloadProgress}
+          <Input value={searchQuery} onInput={setSearchQuery} />
+        </div>
+      </div>
+      <Menu.Section className="!pt-1 mt-2 pb-3">
         <CaptionOption onClick={() => disable()} selected={!lang}>
           Off
         </CaptionOption>

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

@@ -5,7 +5,7 @@ export function Input(props: {
   onInput: (str: string) => void;
 }) {
   return (
-    <div className="w-full relative mb-6">
+    <div className="w-full relative">
       <Icon
         className="pointer-events-none absolute top-1/2 left-3 transform -translate-y-1/2 text-video-context-inputPlaceholder"
         icon={Icons.SEARCH}

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

@@ -68,7 +68,7 @@ export function Link(props: {
   const content = (
     <div className={classNames("flex items-center flex-1", props.className)}>
       <div className="flex-1 text-left">{props.children}</div>
-      <div>{props.rightSide}</div>
+      <div className="flex">{props.rightSide}</div>
     </div>
   );
 
@@ -134,7 +134,7 @@ export function SelectableLink(props: {
         <Icon className="ml-2" icon={Icons.WARNING} />
       </span>
     );
-  if (props.loading) rightContent = <Spinner className="text-xl" />; // should override selected and error
+  if (props.loading) rightContent = <Spinner className="text-lg" />; // should override selected and error
 
   return (
     <Link