Do my lil thang with the sources

package.json

@@ -26,6 +26,9 @@
     ]
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@formkit/auto-animate": "^0.8.2",
     "@headlessui/react": "^1.7.19",
     "@ladjs/country-language": "^1.0.3",

pnpm-lock.yaml

@@ -12,6 +12,15 @@ overrides:
   rollup: npm:@rollup/wasm-node
 
 dependencies:
+  '@dnd-kit/core':
+    specifier: ^6.1.0
+    version: 6.1.0(react-dom@18.3.1)(react@18.3.1)
+  '@dnd-kit/sortable':
+    specifier: ^8.0.0
+    version: 8.0.0(@dnd-kit/core@6.1.0)(react@18.3.1)
+  '@dnd-kit/utilities':
+    specifier: ^3.2.2
+    version: 3.2.2(react@18.3.1)
   '@formkit/auto-animate':
     specifier: ^0.8.2
     version: 0.8.2
@@ -1568,6 +1577,49 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
+  /@dnd-kit/accessibility@3.1.0(react@18.3.1):
+    resolution: {integrity: sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+    dependencies:
+      react: 18.3.1
+      tslib: 2.6.2
+    dev: false
+
+  /@dnd-kit/core@6.1.0(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.0(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      tslib: 2.6.2
+    dev: false
+
+  /@dnd-kit/sortable@8.0.0(@dnd-kit/core@6.1.0)(react@18.3.1):
+    resolution: {integrity: sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.1.0
+      react: '>=16.8.0'
+    dependencies:
+      '@dnd-kit/core': 6.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      tslib: 2.6.2
+    dev: false
+
+  /@dnd-kit/utilities@3.2.2(react@18.3.1):
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: '>=16.8.0'
+    dependencies:
+      react: 18.3.1
+      tslib: 2.6.2
+    dev: false
+
   /@esbuild/aix-ppc64@0.20.2:
     resolution: {integrity: sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==}
     engines: {node: '>=12'}
@@ -5445,7 +5497,7 @@ packages:
     dependencies:
       lilconfig: 3.1.1
       postcss: 8.4.38
-      yaml: 2.4.1
+      yaml: 2.4.2
     dev: true
 
   /postcss-nested@6.0.1(postcss@8.4.38):
@@ -7334,8 +7386,8 @@ packages:
   /yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
-  /yaml@2.4.1:
+  /yaml@2.4.2:
-    resolution: {integrity: sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==}
+    resolution: {integrity: sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==}
     engines: {node: '>= 14'}
     hasBin: true
     dev: true

src/assets/locales/en.json

@@ -586,6 +586,8 @@
       "autoplay": "Autoplay",
       "autoplayDescription": "Automatically play the next episode in a series after reaching the end. Can be enabled by users with the browser extension, a custom proxy, or with the default setup if allowed by the host.",
       "autoplayLabel": "Autoplay",
+      "sourceOrder": "Reordering sources",
+      "sourceOrderDescription": "Drag and drop to reorder sources. This will determine the order in which sources are checked for the media you are trying to watch. If a source is greyed out, it means it is not available on your device.",
       "title": "Preferences"
     },
     "reset": "Reset",

src/backend/providers/providers.ts

@@ -25,3 +25,11 @@ export function getProviders() {
     target: targets.BROWSER,
   });
 }
+
+export function getAllProviders() {
+  return makeProviders({
+    fetcher: makeStandardFetcher(fetch),
+    target: targets.BROWSER_EXTENSION,
+    consistentIpForRequests: true,
+  });
+}

src/components/form/SortableList.tsx

@@ -0,0 +1,97 @@
+import {
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import classNames from "classnames";
+
+import { Icon, Icons } from "../Icon";
+
+export interface Item {
+  id: string;
+  name: string;
+  disabled?: boolean;
+}
+
+function SortableItem(props: { item: Item }) {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: props.item.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className={classNames(
+        "bg-dropdown-background hover:bg-dropdown-hoverBackground select-none space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg touch-none",
+        props.item.disabled && "opacity-50",
+        transform ? "cursor-grabbing" : "cursor-grab",
+      )}
+    >
+      <span className="flex-1 text-white font-bold">{props.item.name}</span>
+      {props.item.disabled && <Icon icon={Icons.WARNING} />}
+      <Icon icon={Icons.MENU} />
+    </div>
+  );
+}
+
+export function SortableList(props: {
+  items: Item[];
+  setItems: (items: Item[]) => void;
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over) return;
+    if (active.id !== over.id) {
+      const currentItems = props.items;
+      const oldIndex = currentItems.findIndex((item) => item.id === active.id);
+      const newIndex = currentItems.findIndex((item) => item.id === over.id);
+      const newItems = arrayMove(currentItems, oldIndex, newIndex);
+      props.setItems(newItems);
+    }
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext
+        items={props.items}
+        strategy={verticalListSortingStrategy}
+      >
+        <div className="flex flex-col gap-2">
+          {props.items.map((item) => (
+            <SortableItem key={item.id} item={item} />
+          ))}
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+}

src/hooks/useProviderScrape.tsx

@@ -14,6 +14,7 @@ import {
 } from "@/backend/helpers/providerApi";
 import { getLoadbalancedProviderApiUrl } from "@/backend/providers/fetchers";
 import { getProviders } from "@/backend/providers/providers";
+import { usePreferencesStore } from "@/stores/preferences";
 
 export interface ScrapingItems {
   id: string;
@@ -156,6 +157,8 @@ export function useScrape() {
     startScrape,
   } = useBaseScrape();
 
+  const preferredSourceOrder = usePreferencesStore((s) => s.sourceOrder);
+
   const startScraping = useCallback(
     async (media: ScrapeMedia) => {
       const providerApiUrl = getLoadbalancedProviderApiUrl();
@@ -181,6 +184,7 @@ export function useScrape() {
       const providers = getProviders();
       const output = await providers.runAll({
         media,
+        sourceOrder: preferredSourceOrder,
         events: {
           init: initEvent,
           start: startEvent,
@@ -199,6 +203,7 @@ export function useScrape() {
       discoverEmbedsEvent,
       getResult,
       startScrape,
+      preferredSourceOrder,
     ],
   );
 

src/hooks/useSettingsState.ts

@@ -52,6 +52,7 @@ export function useSettingsState(
     | undefined,
   enableThumbnails: boolean,
   enableAutoplay: boolean,
+  sourceOrder: string[],
 ) {
   const [proxyUrlsState, setProxyUrls, resetProxyUrls, proxyUrlsChanged] =
     useDerived(proxyUrls);
@@ -91,6 +92,12 @@ export function useSettingsState(
     resetEnableAutoplay,
     enableAutoplayChanged,
   ] = useDerived(enableAutoplay);
+  const [
+    sourceOrderState,
+    setSourceOrderState,
+    resetSourceOrder,
+    sourceOrderChanged,
+  ] = useDerived(sourceOrder);
 
   function reset() {
     resetTheme();
@@ -103,6 +110,7 @@ export function useSettingsState(
     resetProfile();
     resetEnableThumbnails();
     resetEnableAutoplay();
+    resetSourceOrder();
   }
 
   const changed =
@@ -114,7 +122,8 @@ export function useSettingsState(
     proxyUrlsChanged ||
     profileChanged ||
     enableThumbnailsChanged ||
-    enableAutoplayChanged;
+    enableAutoplayChanged ||
+    sourceOrderChanged;
 
   return {
     reset,
@@ -164,5 +173,10 @@ export function useSettingsState(
       set: setEnableAutoplayState,
       changed: enableAutoplayChanged,
     },
+    sourceOrder: {
+      state: sourceOrderState,
+      set: setSourceOrderState,
+      changed: sourceOrderChanged,
+    },
   };
 }

src/index.tsx

@@ -10,7 +10,7 @@ import { createRoot } from "react-dom/client";
 import { HelmetProvider } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { BrowserRouter, HashRouter } from "react-router-dom";
-import { useAsync } from "react-use";
+import { useAsync, useAsyncFn } from "react-use";
 
 import { Button } from "@/components/buttons/Button";
 import { Icon, Icons } from "@/components/Icon";
@@ -31,6 +31,10 @@ import { SettingsSyncer } from "@/stores/subtitles/SettingsSyncer";
 import { ThemeProvider } from "@/stores/theme";
 import { TurnstileProvider } from "@/stores/turnstile";
 
+import {
+  extensionInfo,
+  isExtensionActiveCached,
+} from "./backend/extension/messaging";
 import { initializeChromecast } from "./setup/chromecast";
 import { initializeOldStores } from "./stores/__old/migrations";
 
@@ -149,6 +153,23 @@ function TheRouter(props: { children: ReactNode }) {
   return <HashRouter>{props.children}</HashRouter>;
 }
 
+// Checks if the extension is installed
+function ExtensionStatus() {
+  const { t } = useTranslation();
+  const [state] = useAsyncFn(async () => {
+    if (!isExtensionActiveCached) {
+      return extensionInfo();
+    }
+  });
+
+  if (state.loading) {
+    return <LoadingScreen type="lazy" />;
+  }
+  if (state.error) {
+    return <ErrorScreen>{t("screens.loadingUserError.reload")}</ErrorScreen>;
+  }
+  return null;
+}
 const container = document.getElementById("root");
 const root = createRoot(container!);
 
@@ -158,6 +179,7 @@ root.render(
       <TurnstileProvider />
       <HelmetProvider>
         <Suspense fallback={<LoadingScreen type="lazy" />}>
+          <ExtensionStatus />
           <ThemeProvider applyGlobal>
             <ProgressSyncer />
             <BookmarkSyncer />

src/pages/Settings.tsx

@@ -11,6 +11,7 @@ import {
 import { getSessions, updateSession } from "@/backend/accounts/sessions";
 import { updateSettings } from "@/backend/accounts/settings";
 import { editUser } from "@/backend/accounts/user";
+import { getAllProviders } from "@/backend/providers/providers";
 import { Button } from "@/components/buttons/Button";
 import { WideContainer } from "@/components/layout/WideContainer";
 import { UserIcons } from "@/components/UserIcon";
@@ -126,6 +127,9 @@ export function SettingsPage() {
   const enableAutoplay = usePreferencesStore((s) => s.enableAutoplay);
   const setEnableAutoplay = usePreferencesStore((s) => s.setEnableAutoplay);
 
+  const sourceOrder = usePreferencesStore((s) => s.sourceOrder);
+  const setSourceOrder = usePreferencesStore((s) => s.setSourceOrder);
+
   const account = useAuthStore((s) => s.account);
   const updateProfile = useAuthStore((s) => s.setAccountProfile);
   const updateDeviceName = useAuthStore((s) => s.updateDeviceName);
@@ -149,8 +153,25 @@ export function SettingsPage() {
     account?.profile,
     enableThumbnails,
     enableAutoplay,
+    sourceOrder,
   );
 
+  const availableSources = useMemo(() => {
+    const sources = getAllProviders().listSources();
+    const sourceIDs = sources.map((s) => s.id);
+    const stateSources = state.sourceOrder.state;
+
+    // Filter out sources that are not in `stateSources` and are in `sources`
+    const updatedSources = stateSources.filter((ss) => sourceIDs.includes(ss));
+
+    // Add sources from `sources` that are not in `stateSources`
+    const missingSources = sources
+      .filter((s) => !stateSources.includes(s.id))
+      .map((s) => s.id);
+
+    return [...updatedSources, ...missingSources];
+  }, [state.sourceOrder.state]);
+
   useEffect(() => {
     setPreviewTheme(activeTheme ?? "default");
   }, [setPreviewTheme, activeTheme]);
@@ -202,6 +223,7 @@ export function SettingsPage() {
 
     setEnableThumbnails(state.enableThumbnails.state);
     setEnableAutoplay(state.enableAutoplay.state);
+    setSourceOrder(state.sourceOrder.state);
     setAppLanguage(state.appLanguage.state);
     setTheme(state.theme.state);
     setSubStyling(state.subtitleStyling.state);
@@ -228,6 +250,7 @@ export function SettingsPage() {
     setEnableThumbnails,
     state,
     setEnableAutoplay,
+    setSourceOrder,
     setAppLanguage,
     setTheme,
     setSubStyling,
@@ -278,6 +301,8 @@ export function SettingsPage() {
             setEnableThumbnails={state.enableThumbnails.set}
             enableAutoplay={state.enableAutoplay.state}
             setEnableAutoplay={state.enableAutoplay.set}
+            sourceOrder={availableSources}
+            setSourceOrder={state.sourceOrder.set}
           />
         </div>
         <div id="settings-appearance" className="mt-48">

src/pages/parts/settings/PreferencesPart.tsx

@@ -1,9 +1,13 @@
 import classNames from "classnames";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
+import { getAllProviders, getProviders } from "@/backend/providers/providers";
+import { Button } from "@/components/buttons/Button";
 import { Toggle } from "@/components/buttons/Toggle";
 import { FlagIcon } from "@/components/FlagIcon";
 import { Dropdown } from "@/components/form/Dropdown";
+import { SortableList } from "@/components/form/SortableList";
 import { Heading1 } from "@/components/utils/Text";
 import { appLanguageOptions } from "@/setup/i18n";
 import { isAutoplayAllowed } from "@/utils/autoplay";
@@ -16,6 +20,8 @@ export function PreferencesPart(props: {
   setEnableThumbnails: (v: boolean) => void;
   enableAutoplay: boolean;
   setEnableAutoplay: (v: boolean) => void;
+  sourceOrder: string[];
+  setSourceOrder: (v: string[]) => void;
 }) {
   const { t } = useTranslation();
   const sorted = sortLangCodes(appLanguageOptions.map((item) => item.code));
@@ -34,6 +40,17 @@ export function PreferencesPart(props: {
     (item) => item.id === getLocaleInfo(props.language)?.code,
   );
 
+  const allSources = getAllProviders().listSources();
+
+  const sourceItems = useMemo(() => {
+    const currentDeviceSources = getProviders().listSources();
+    return props.sourceOrder.map((id) => ({
+      id,
+      name: allSources.find((s) => s.id === id)?.name || id,
+      disabled: !currentDeviceSources.find((s) => s.id === id),
+    }));
+  }, [props.sourceOrder, allSources]);
+
   return (
     <div className="space-y-12">
       <Heading1 border>{t("settings.preferences.title")}</Heading1>
@@ -94,6 +111,29 @@ export function PreferencesPart(props: {
           </p>
         </div>
       </div>
+
+      <div className="flex flex-col gap-3">
+        <p className="text-white font-bold">
+          {t("settings.preferences.sourceOrder")}
+        </p>
+        <p className="max-w-[25rem] font-medium">
+          {t("settings.preferences.sourceOrderDescription")}
+        </p>
+
+        <SortableList
+          items={sourceItems}
+          setItems={(items) =>
+            props.setSourceOrder(items.map((item) => item.id))
+          }
+        />
+        <Button
+          className="max-w-[25rem]"
+          theme="secondary"
+          onClick={() => props.setSourceOrder(allSources.map((s) => s.id))}
+        >
+          {t("settings.reset")}
+        </Button>
+      </div>
     </div>
   );
 }

src/stores/preferences/index.tsx

@@ -4,26 +4,35 @@ import { immer } from "zustand/middleware/immer";
 
 export interface PreferencesStore {
   enableThumbnails: boolean;
-  setEnableThumbnails(v: boolean): void;
   enableAutoplay: boolean;
+  sourceOrder: string[];
+
+  setEnableThumbnails(v: boolean): void;
   setEnableAutoplay(v: boolean): void;
+  setSourceOrder(v: string[]): void;
 }
 
 export const usePreferencesStore = create(
   persist(
     immer<PreferencesStore>((set) => ({
       enableThumbnails: false,
+      enableAutoplay: true,
+      sourceOrder: [],
       setEnableThumbnails(v) {
         set((s) => {
           s.enableThumbnails = v;
         });
       },
-      enableAutoplay: true,
       setEnableAutoplay(v) {
         set((s) => {
           s.enableAutoplay = v;
         });
       },
+      setSourceOrder(v) {
+        set((s) => {
+          s.sourceOrder = v;
+        });
+      },
     })),
     {
       name: "__MW::preferences",