Quality sorting, language selection UI for captions

Co-authored-by: mrjvs <mistrjvs@gmail.com>

package.json

@@ -15,6 +15,7 @@
     "core-js": "^3.29.1",
     "crypto-js": "^4.1.1",
     "dompurify": "^3.0.1",
+    "flag-icons": "^6.11.1",
     "fscreen": "^1.2.0",
     "fuse.js": "^6.4.6",
     "hls.js": "^1.0.7",

pnpm-lock.yaml

@@ -38,6 +38,9 @@ dependencies:
   dompurify:
     specifier: ^3.0.1
     version: 3.0.5
+  flag-icons:
+    specifier: ^6.11.1
+    version: 6.11.1
   fscreen:
     specifier: ^1.2.0
     version: 1.2.0
@@ -3770,6 +3773,10 @@ packages:
       path-exists: 4.0.0
     dev: true
 
+  /flag-icons@6.11.1:
+    resolution: {integrity: sha512-c2UMJTFZoVQ47/sE1mb+9b5S1pi8SjXsx0MR063O31GV+O2EN4FMwMdEYSQItpien2bl9w1viLUoo2R3r6OK3g==}
+    dev: false
+
   /flat-cache@3.1.0:
     resolution: {integrity: sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==}
     engines: {node: '>=12.0.0'}

src/components/player/atoms/Settings.tsx

@@ -1,3 +1,5 @@
+import "flag-icons/css/flag-icons.min.css";
+
 import classNames from "classnames";
 import { useCallback, useEffect, useState } from "react";
 
@@ -141,15 +143,61 @@ function CaptionSettingsView({ id }: { id: string }) {
   );
 }
 
+function CaptionOption(props: {
+  countryCode?: string;
+  children: React.ReactNode;
+  selected?: boolean;
+}) {
+  return (
+    <div className="grid grid-cols-[auto,1fr,auto] items-center gap-3 rounded -ml-3 -mr-3 px-3 py-2 cursor-pointer hover:bg-video-context-border hover:bg-opacity-10">
+      <div>
+        <span
+          className={classNames(
+            "!w-8 h-6 rounded overflow-hidden bg-video-context-flagBg bg-cover bg-center block fi",
+            props.countryCode ? `fi-${props.countryCode}` : undefined
+          )}
+        />
+      </div>
+      <span
+        className={classNames(props.selected && "text-white", "font-medium")}
+      >
+        {props.children}
+      </span>
+      {props.selected ? (
+        <Icon
+          icon={Icons.CIRCLE_CHECK}
+          className="text-xl text-video-context-type-accent"
+        />
+      ) : null}
+    </div>
+  );
+}
+
 function CaptionsView({ id }: { id: string }) {
   const router = useOverlayRouter(id);
 
   return (
     <>
-      <Context.BackLink onClick={() => router.navigate("/captions")}>
+      <Context.BackLink
+        onClick={() => router.navigate("/")}
+        rightSide={
+          <button
+            type="button"
+            onClick={() => router.navigate("/captions/settings")}
+          >
+            Customize
+          </button>
+        }
+      >
         Captions
       </Context.BackLink>
-      <Context.Section>Yee!</Context.Section>
+      <Context.Section>
+        <CaptionOption>Off</CaptionOption>
+        <CaptionOption countryCode="nl" selected>
+          Nederlands
+        </CaptionOption>
+        <CaptionOption countryCode="gr">Idk Gibraltar of zo?</CaptionOption>
+      </Context.Section>
     </>
   );
 }

src/stores/player/utils/qualities.ts

@@ -22,6 +22,17 @@ export type SourceSliceSource =
       url: string;
     };
 
+const qualitySorting: Record<SourceQuality, number> = {
+  "1080": 40,
+  "360": 10,
+  "480": 20,
+  "720": 30,
+  unknown: 0,
+};
+const sortedQualities: SourceQuality[] = Object.entries(qualitySorting)
+  .sort((a, b) => b[1] - a[1])
+  .map<SourceQuality>((v) => v[0] as SourceQuality);
+
 export function selectQuality(source: SourceSliceSource): {
   stream: LoadableSource;
   quality: null | SourceQuality;
@@ -32,12 +43,14 @@ export function selectQuality(source: SourceSliceSource): {
       quality: null,
     };
   if (source.type === "file") {
-    const firstQuality = Object.keys(
+    const bestQuality = sortedQualities.find(
-      source.qualities
+      (v) => source.qualities[v] && (source.qualities[v]?.url.length ?? 0) > 0
-    )[0] as keyof typeof source.qualities;
+    );
-    const stream = source.qualities[firstQuality];
+    if (bestQuality) {
-    if (stream) {
+      const stream = source.qualities[bestQuality];
-      return { stream, quality: firstQuality };
+      if (stream) {
+        return { stream, quality: bestQuality };
+      }
     }
   }
   throw new Error("couldn't select quality");

tailwind.config.js

@@ -136,6 +136,7 @@ module.exports = {
                 light: "#4D79A8",
                 border: "#4F5C66",
                 buttonFocus: "#202836",
+                flagBg: "#202836",
 
                 type: {
                   main: "#617A8A",