Add reorder sources toggle

Require reorder sources to be enabled first

src/assets/locales/en.json

@@ -666,11 +666,12 @@
       "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 the <bold>extension</bold> is required for that source.",
+      "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 the <bold>extension</bold> is required for that source. <br><br> <strong>(The default order is best for most users)</strong>",
       "title": "Preferences",
       "discover": "Discover section",
       "discoverDescription": "Show the Discover section on the Homepage below your bookmarked media. Enabling this can increase load times. This setting is enabled by default.",
-      "discoverLabel": "Discover section"
+      "discoverLabel": "Discover section",
+      "sourceOrderEnableLabel": "Custom source order"
     },
     "reset": "Reset",
     "save": "Save",

src/hooks/useProviderScrape.tsx

@@ -158,6 +158,7 @@ export function useScrape() {
   } = useBaseScrape();
 
   const preferredSourceOrder = usePreferencesStore((s) => s.sourceOrder);
+  const enableSourceOrder = usePreferencesStore((s) => s.enableSourceOrder);
 
   const startScraping = useCallback(
     async (media: ScrapeMedia) => {
@@ -184,7 +185,8 @@ export function useScrape() {
       const providers = getProviders();
       const output = await providers.runAll({
         media,
-        sourceOrder: preferredSourceOrder,
+        // Only pass sourceOrder if enableSourceOrder is true
+        sourceOrder: enableSourceOrder ? preferredSourceOrder : undefined,
         events: {
           init: initEvent,
           start: startEvent,
@@ -204,6 +206,7 @@ export function useScrape() {
       getResult,
       startScrape,
       preferredSourceOrder,
+      enableSourceOrder,
     ],
   );
 

src/hooks/useSettingsState.ts

@@ -54,6 +54,7 @@ export function useSettingsState(
   enableAutoplay: boolean,
   enableDiscover: boolean,
   sourceOrder: string[],
+  enableSourceOrder: boolean,
 ) {
   const [proxyUrlsState, setProxyUrls, resetProxyUrls, proxyUrlsChanged] =
     useDerived(proxyUrls);
@@ -105,6 +106,12 @@ export function useSettingsState(
     resetSourceOrder,
     sourceOrderChanged,
   ] = useDerived(sourceOrder);
+  const [
+    enableSourceOrderState,
+    setenableSourceOrderState,
+    resetenableSourceOrder,
+    enableSourceOrderChanged,
+  ] = useDerived(enableSourceOrder);
 
   function reset() {
     resetTheme();
@@ -119,6 +126,7 @@ export function useSettingsState(
     resetEnableAutoplay();
     resetEnableDiscover();
     resetSourceOrder();
+    resetenableSourceOrder();
   }
 
   const changed =
@@ -132,7 +140,8 @@ export function useSettingsState(
     enableThumbnailsChanged ||
     enableAutoplayChanged ||
     enableDiscoverChanged ||
-    sourceOrderChanged;
+    sourceOrderChanged ||
+    enableSourceOrderChanged;
 
   return {
     reset,
@@ -192,5 +201,10 @@ export function useSettingsState(
       set: setSourceOrderState,
       changed: sourceOrderChanged,
     },
+    enableSourceOrder: {
+      state: enableSourceOrderState,
+      set: setenableSourceOrderState,
+      changed: enableSourceOrderChanged,
+    },
   };
 }

src/pages/Settings.tsx

@@ -143,6 +143,11 @@ export function SettingsPage() {
   const enableDiscover = usePreferencesStore((s) => s.enableDiscover);
   const setEnableDiscover = usePreferencesStore((s) => s.setEnableDiscover);
 
+  const enableSourceOrder = usePreferencesStore((s) => s.enableSourceOrder);
+  const setenableSourceOrder = usePreferencesStore(
+    (s) => s.setenableSourceOrder,
+  );
+
   const account = useAuthStore((s) => s.account);
   const updateProfile = useAuthStore((s) => s.setAccountProfile);
   const updateDeviceName = useAuthStore((s) => s.updateDeviceName);
@@ -168,6 +173,7 @@ export function SettingsPage() {
     enableAutoplay,
     enableDiscover,
     sourceOrder,
+    enableSourceOrder,
   );
 
   const availableSources = useMemo(() => {
@@ -243,6 +249,7 @@ export function SettingsPage() {
     setTheme(state.theme.state);
     setSubStyling(state.subtitleStyling.state);
     setProxySet(state.proxyUrls.state?.filter((v) => v !== "") ?? null);
+    setenableSourceOrder(state.enableSourceOrder.state);
 
     if (state.profile.state) {
       updateProfile(state.profile.state);
@@ -275,6 +282,7 @@ export function SettingsPage() {
     updateProfile,
     logout,
     setBackendUrl,
+    setenableSourceOrder,
   ]);
   return (
     <SubPageLayout>
@@ -321,6 +329,8 @@ export function SettingsPage() {
             setEnableDiscover={state.enableDiscover.set}
             sourceOrder={availableSources}
             setSourceOrder={state.sourceOrder.set}
+            enableSourceOrder={state.enableSourceOrder.state}
+            setenableSourceOrder={state.enableSourceOrder.set}
           />
         </div>
         <div id="settings-appearance" className="mt-28">

src/pages/parts/settings/PreferencesPart.tsx

@@ -25,6 +25,8 @@ export function PreferencesPart(props: {
   setSourceOrder: (v: string[]) => void;
   enableDiscover: boolean;
   setEnableDiscover: (v: boolean) => void;
+  enableSourceOrder: boolean;
+  setenableSourceOrder: (v: boolean) => void;
 }) {
   const { t } = useTranslation();
   const sorted = sortLangCodes(appLanguageOptions.map((item) => item.code));
@@ -162,21 +164,38 @@ export function PreferencesPart(props: {
                   ),
                 }}
               />
+              <div
+                onClick={() =>
+                  props.setenableSourceOrder(!props.enableSourceOrder)
+                }
+                className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg"
+              >
+                <Toggle enabled={props.enableSourceOrder} />
+                <p className="flex-1 text-white font-bold">
+                  {t("settings.preferences.sourceOrderEnableLabel")}
+                </p>
+              </div>
             </div>
 
-            <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>
+            {props.enableSourceOrder && (
+              <div className="w-full flex flex-col gap-4">
+                <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>
         </div>
       </div>

src/stores/preferences/index.tsx

@@ -7,11 +7,13 @@ export interface PreferencesStore {
   enableAutoplay: boolean;
   enableDiscover: boolean;
   sourceOrder: string[];
+  enableSourceOrder: boolean;
 
   setEnableThumbnails(v: boolean): void;
   setEnableAutoplay(v: boolean): void;
   setEnableDiscover(v: boolean): void;
   setSourceOrder(v: string[]): void;
+  setenableSourceOrder(v: boolean): void;
 }
 
 export const usePreferencesStore = create(
@@ -21,6 +23,7 @@ export const usePreferencesStore = create(
       enableAutoplay: true,
       enableDiscover: true,
       sourceOrder: [],
+      enableSourceOrder: false,
       setEnableThumbnails(v) {
         set((s) => {
           s.enableThumbnails = v;
@@ -41,6 +44,11 @@ export const usePreferencesStore = create(
           s.sourceOrder = v;
         });
       },
+      setenableSourceOrder(v) {
+        set((s) => {
+          s.enableSourceOrder = v;
+        });
+      },
     })),
     {
       name: "__MW::preferences",