fix: marlin search settings

app/(auth)/(tabs)/(home)/_layout.tsx

@@ -1,6 +1,6 @@
 import { Chromecast } from "@/components/Chromecast";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
-import { Feather, Ionicons } from "@expo/vector-icons";
+import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
 import { Platform, TouchableOpacity, View } from "react-native";
 
@@ -55,6 +55,12 @@ export default function IndexLayout() {
           title: "",
         }}
       />
+      <Stack.Screen
+        name="settings/marlin-search/page"
+        options={{
+          title: "",
+        }}
+      />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
         <Stack.Screen key={name} name={name} options={options} />
       ))}

app/(auth)/(tabs)/(home)/settings.tsx

@@ -6,6 +6,7 @@ import { DownloadSettings } from "@/components/settings/DownloadSettings";
 import { MediaProvider } from "@/components/settings/MediaContext";
 import { MediaToggles } from "@/components/settings/MediaToggles";
 import { OtherSettings } from "@/components/settings/OtherSettings";
+import { PluginSettings } from "@/components/settings/PluginSettings";
 import { QuickConnect } from "@/components/settings/QuickConnect";
 import { StorageSettings } from "@/components/settings/StorageSettings";
 import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
@@ -63,15 +64,7 @@ export default function settings() {
         <OtherSettings />
         <DownloadSettings />
 
-        <View>
-          <ListGroup title="Jellyseerr">
-            <ListItem
-              onPress={() => router.push("/settings/jellyseerr/page")}
-              title={"Jellyseerr Settings"}
-              showArrow
-            ></ListItem>
-          </ListGroup>
-        </View>
+        <PluginSettings />
 
         <View className="mb-4">
           <ListGroup title={"Logs"}>

app/(auth)/(tabs)/(home)/settings/marlin-search/page.tsx

@@ -0,0 +1,103 @@
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { useQueryClient } from "@tanstack/react-query";
+import { useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
+import {
+  Linking,
+  Switch,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { toast } from "sonner-native";
+
+export default function page() {
+  const navigation = useNavigation();
+
+  const [settings, updateSettings] = useSettings();
+  const queryClient = useQueryClient();
+
+  const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");
+
+  const onSave = (val: string) => {
+    updateSettings({
+      marlinServerUrl: !val.endsWith("/") ? val : val.slice(0, -1),
+    });
+    toast.success("Saved");
+  };
+
+  const handleOpenLink = () => {
+    Linking.openURL("https://github.com/fredrikburmester/marlin-search");
+  };
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <TouchableOpacity onPress={() => onSave(value)}>
+          <Text className="text-blue-500">Save</Text>
+        </TouchableOpacity>
+      ),
+    });
+  }, [navigation, value]);
+
+  if (!settings) return null;
+
+  return (
+    <View className="px-4">
+      <ListGroup>
+        <ListItem
+          title={"Enable Marlin Search"}
+          onPress={() => {
+            updateSettings({ searchEngine: "Jellyfin" });
+            queryClient.invalidateQueries({ queryKey: ["search"] });
+          }}
+        >
+          <Switch
+            value={settings.searchEngine === "Marlin"}
+            onValueChange={(value) => {
+              updateSettings({ searchEngine: value ? "Marlin" : "Jellyfin" });
+              queryClient.invalidateQueries({ queryKey: ["search"] });
+            }}
+          />
+        </ListItem>
+      </ListGroup>
+
+      <View
+        className={`mt-2 ${
+          settings.searchEngine === "Marlin" ? "" : "opacity-50"
+        }`}
+      >
+        <View className="flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4">
+          <View
+            className={`flex flex-row items-center bg-neutral-900 h-11 pr-4`}
+          >
+            <Text className="mr-4">URL</Text>
+            <TextInput
+              editable={settings.searchEngine === "Marlin"}
+              className="text-white"
+              placeholder="http(s)://domain.org:port"
+              value={value}
+              keyboardType="url"
+              returnKeyType="done"
+              autoCapitalize="none"
+              textContentType="URL"
+              onChangeText={(text) => setValue(text)}
+            />
+          </View>
+        </View>
+        <Text className="px-4 text-xs text-neutral-500 mt-1">
+          Enter the URL for the Marlin server. The URL should include http or
+          https and optionally the port.{" "}
+          <Text className="text-blue-500" onPress={handleOpenLink}>
+            Read more about Marlin.
+          </Text>
+        </Text>
+      </View>
+    </View>
+  );
+}

app/(auth)/(tabs)/(search)/index.tsx

@@ -95,6 +95,8 @@ export default function search() {
           return (searchApi.data.SearchHints as BaseItemDto[]) || [];
         } else {
           if (!settings?.marlinServerUrl) return [];
+
+          console.log(settings.marlinServerUrl);
           const url = `${
             settings.marlinServerUrl
           }/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
@@ -102,6 +104,9 @@ export default function search() {
             .join("&includeItemTypes=")}`;
 
           const response1 = await axios.get(url);
+
+          console.log(response1.statusText);
+
           const ids = response1.data.ids;
 
           if (!ids || !ids.length) return [];

components/settings/DownloadSettings.tsx

@@ -5,13 +5,13 @@ import { Ionicons } from "@expo/vector-icons";
 import { useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
 import React from "react";
-import { Switch, TouchableOpacity } from "react-native";
+import { Switch, TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 
-export const DownloadSettings: React.FC = () => {
+export const DownloadSettings: React.FC = ({ ...props }) => {
   const [settings, updateSettings] = useSettings();
   const { setProcesses } = useDownload();
   const router = useRouter();
@@ -20,84 +20,92 @@ export const DownloadSettings: React.FC = () => {
   if (!settings) return null;
 
   return (
-    <ListGroup title="Downloads">
-      <ListItem title="Download method">
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger>
-            <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
-              <Text className="mr-1 text-[#8E8D91]">
-                {settings.downloadMethod === "remux" ? "Default" : "Optimized"}
-              </Text>
-              <Ionicons name="chevron-expand-sharp" size={18} color="#5A5960" />
-            </TouchableOpacity>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content
-            loop={true}
-            side="bottom"
-            align="start"
-            alignOffset={0}
-            avoidCollisions={true}
-            collisionPadding={8}
-            sideOffset={8}
-          >
-            <DropdownMenu.Label>Methods</DropdownMenu.Label>
-            <DropdownMenu.Item
-              key="1"
-              onSelect={() => {
-                updateSettings({ downloadMethod: "remux" });
-                setProcesses([]);
-              }}
+    <View {...props} className="mb-4">
+      <ListGroup title="Downloads">
+        <ListItem title="Download method">
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
+                <Text className="mr-1 text-[#8E8D91]">
+                  {settings.downloadMethod === "remux"
+                    ? "Default"
+                    : "Optimized"}
+                </Text>
+                <Ionicons
+                  name="chevron-expand-sharp"
+                  size={18}
+                  color="#5A5960"
+                />
+              </TouchableOpacity>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              loop={true}
+              side="bottom"
+              align="start"
+              alignOffset={0}
+              avoidCollisions={true}
+              collisionPadding={8}
+              sideOffset={8}
             >
-              <DropdownMenu.ItemTitle>Default</DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              key="2"
-              onSelect={() => {
-                updateSettings({ downloadMethod: "optimized" });
-                setProcesses([]);
-                queryClient.invalidateQueries({ queryKey: ["search"] });
-              }}
-            >
-              <DropdownMenu.ItemTitle>Optimized</DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      </ListItem>
+              <DropdownMenu.Label>Methods</DropdownMenu.Label>
+              <DropdownMenu.Item
+                key="1"
+                onSelect={() => {
+                  updateSettings({ downloadMethod: "remux" });
+                  setProcesses([]);
+                }}
+              >
+                <DropdownMenu.ItemTitle>Default</DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                key="2"
+                onSelect={() => {
+                  updateSettings({ downloadMethod: "optimized" });
+                  setProcesses([]);
+                  queryClient.invalidateQueries({ queryKey: ["search"] });
+                }}
+              >
+                <DropdownMenu.ItemTitle>Optimized</DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </ListItem>
 
-      <ListItem
-        title="Remux max download"
-        disabled={settings.downloadMethod !== "remux"}
-      >
-        <Stepper
-          value={settings.remuxConcurrentLimit}
-          step={1}
-          min={1}
-          max={4}
-          onUpdate={(value) =>
-            updateSettings({
-              remuxConcurrentLimit: value as Settings["remuxConcurrentLimit"],
-            })
-          }
-        />
-      </ListItem>
+        <ListItem
+          title="Remux max download"
+          disabled={settings.downloadMethod !== "remux"}
+        >
+          <Stepper
+            value={settings.remuxConcurrentLimit}
+            step={1}
+            min={1}
+            max={4}
+            onUpdate={(value) =>
+              updateSettings({
+                remuxConcurrentLimit: value as Settings["remuxConcurrentLimit"],
+              })
+            }
+          />
+        </ListItem>
 
-      <ListItem
-        title="Auto download"
-        disabled={settings.downloadMethod !== "optimized"}
-      >
-        <Switch
+        <ListItem
+          title="Auto download"
           disabled={settings.downloadMethod !== "optimized"}
-          value={settings.autoDownload}
-          onValueChange={(value) => updateSettings({ autoDownload: value })}
-        />
-      </ListItem>
+        >
+          <Switch
+            disabled={settings.downloadMethod !== "optimized"}
+            value={settings.autoDownload}
+            onValueChange={(value) => updateSettings({ autoDownload: value })}
+          />
+        </ListItem>
 
-      <ListItem
-        disabled={settings.downloadMethod !== "optimized"}
-        onPress={() => router.push("/settings/optimized-server/page")}
-        showArrow
-        title="Optimized Versions Server"
-      ></ListItem>
-    </ListGroup>
+        <ListItem
+          disabled={settings.downloadMethod !== "optimized"}
+          onPress={() => router.push("/settings/optimized-server/page")}
+          showArrow
+          title="Optimized Versions Server"
+        ></ListItem>
+      </ListGroup>
+    </View>
   );
 };

components/settings/OtherSettings.tsx

@@ -1,11 +1,5 @@
-import { Stepper } from "@/components/inputs/Stepper";
-import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import {
-  ScreenOrientationEnum,
-  Settings,
-  useSettings,
-} from "@/utils/atoms/settings";
+import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
 import {
   BACKGROUND_FETCH_TASK,
   registerBackgroundFetchAsync,
@@ -15,22 +9,13 @@ import { Ionicons } from "@expo/vector-icons";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import * as BackgroundFetch from "expo-background-fetch";
-import { useRouter } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import * as TaskManager from "expo-task-manager";
 import { useAtom } from "jotai";
 import React, { useEffect, useState } from "react";
-import {
-  Linking,
-  Switch,
-  TouchableOpacity,
-  View,
-  ViewProps,
-} from "react-native";
+import { Linking, Switch, TouchableOpacity, ViewProps } from "react-native";
 import { toast } from "sonner-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
-import { Button } from "../Button";
-import { Input } from "../common/Input";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
@@ -76,6 +61,8 @@ export const OtherSettings: React.FC = () => {
   /**********************
    *********************/
 
+  const queryClient = useQueryClient();
+
   const {
     data: mediaListCollections,
     isLoading: isLoadingMediaListCollections,
@@ -258,129 +245,6 @@ export const OtherSettings: React.FC = () => {
           )}
         </ListGroup>
       )}
-
-      <ListItem title="Search engine">
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger>
-            <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
-              <Text className="mr-1 text-[#8E8D91]">
-                {settings.searchEngine}
-              </Text>
-              <Ionicons name="chevron-expand-sharp" size={18} color="#5A5960" />
-            </TouchableOpacity>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content
-            loop={true}
-            side="bottom"
-            align="start"
-            alignOffset={0}
-            avoidCollisions={true}
-            collisionPadding={8}
-            sideOffset={8}
-          >
-            <DropdownMenu.Label>Orientation</DropdownMenu.Label>
-            <DropdownMenu.Item
-              key="1"
-              onSelect={() => {
-                updateSettings({
-                  defaultVideoOrientation:
-                    ScreenOrientation.OrientationLock.DEFAULT,
-                });
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {
-                  ScreenOrientationEnum[
-                    ScreenOrientation.OrientationLock.DEFAULT
-                  ]
-                }
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              key="2"
-              onSelect={() => {
-                updateSettings({
-                  defaultVideoOrientation:
-                    ScreenOrientation.OrientationLock.PORTRAIT_UP,
-                });
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {
-                  ScreenOrientationEnum[
-                    ScreenOrientation.OrientationLock.PORTRAIT_UP
-                  ]
-                }
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              key="3"
-              onSelect={() => {
-                updateSettings({
-                  defaultVideoOrientation:
-                    ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
-                });
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {
-                  ScreenOrientationEnum[
-                    ScreenOrientation.OrientationLock.LANDSCAPE_LEFT
-                  ]
-                }
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              key="4"
-              onSelect={() => {
-                updateSettings({
-                  defaultVideoOrientation:
-                    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
-                });
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {
-                  ScreenOrientationEnum[
-                    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
-                  ]
-                }
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      </ListItem>
-
-      {settings.searchEngine === "Marlin" && (
-        <ListItem title="Marlin Server URL">
-          <View className="flex flex-row items-center space-x-2">
-            <Input
-              placeholder="Marlin Server URL..."
-              defaultValue={settings.marlinServerUrl}
-              value={marlinUrl}
-              keyboardType="url"
-              returnKeyType="done"
-              autoCapitalize="none"
-              textContentType="URL"
-              onChangeText={(text) => setMarlinUrl(text)}
-            />
-            <Button
-              color="purple"
-              className="shrink w-16 h-12"
-              onPress={() => {
-                updateSettings({
-                  marlinServerUrl: marlinUrl.endsWith("/")
-                    ? marlinUrl
-                    : marlinUrl + "/",
-                });
-              }}
-            >
-              Save
-            </Button>
-          </View>
-        </ListItem>
-      )}
-
       <ListItem
         title="Show Custom Menu Links"
         onPress={() =>

components/settings/PluginSettings.tsx

@@ -0,0 +1,30 @@
+import { useSettings } from "@/utils/atoms/settings";
+import { useRouter } from "expo-router";
+import React from "react";
+import { View } from "react-native";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+
+export const PluginSettings = () => {
+  const [settings, updateSettings] = useSettings();
+
+  const router = useRouter();
+
+  if (!settings) return null;
+  return (
+    <View>
+      <ListGroup title="Plugins">
+        <ListItem
+          onPress={() => router.push("/settings/jellyseerr/page")}
+          title={"Jellyseerr Settings"}
+          showArrow
+        />
+        <ListItem
+          onPress={() => router.push("/settings/marlin-search/page")}
+          title="Marlin Search"
+          showArrow
+        />
+      </ListGroup>
+    </View>
+  );
+};