forked from Ninjalama/streamyfin_mirror
359 lines
13 KiB
TypeScript
359 lines
13 KiB
TypeScript
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
|
|
import { DownloadOptions, useSettings } from "@/utils/atoms/settings";
|
|
import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { useAtom } from "jotai";
|
|
import { Linking, Switch, TouchableOpacity, View } from "react-native";
|
|
import * as DropdownMenu from "zeego/dropdown-menu";
|
|
import { Text } from "../common/Text";
|
|
import { Loader } from "../Loader";
|
|
import { Input } from "../common/Input";
|
|
import { useState } from "react";
|
|
import { Button } from "../Button";
|
|
|
|
export const SettingToggles: React.FC = () => {
|
|
const [settings, updateSettings] = useSettings();
|
|
|
|
const [api] = useAtom(apiAtom);
|
|
const [user] = useAtom(userAtom);
|
|
|
|
const [marlinUrl, setMarlinUrl] = useState<string>("");
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
const {
|
|
data: mediaListCollections,
|
|
isLoading: isLoadingMediaListCollections,
|
|
} = useQuery({
|
|
queryKey: ["sf_promoted", user?.Id, settings?.usePopularPlugin],
|
|
queryFn: async () => {
|
|
if (!api || !user?.Id) return [];
|
|
|
|
const response = await getItemsApi(api).getItems({
|
|
userId: user.Id,
|
|
tags: ["sf_promoted"],
|
|
recursive: true,
|
|
fields: ["Tags"],
|
|
includeItemTypes: ["BoxSet"],
|
|
});
|
|
|
|
return response.data.Items ?? [];
|
|
},
|
|
enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
|
|
staleTime: 0,
|
|
});
|
|
|
|
return (
|
|
<View className="flex flex-col rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
|
|
<View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
|
|
<View className="shrink">
|
|
<Text className="font-semibold">Auto rotate</Text>
|
|
<Text className="text-xs opacity-50">
|
|
Important on android since the video player orientation is locked to
|
|
the app orientation.
|
|
</Text>
|
|
</View>
|
|
<Switch
|
|
value={settings?.autoRotate}
|
|
onValueChange={(value) => updateSettings({ autoRotate: value })}
|
|
/>
|
|
</View>
|
|
<View
|
|
className={`
|
|
flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
|
|
`}
|
|
>
|
|
<View className="flex flex-col shrink">
|
|
<Text className="font-semibold">Download quality</Text>
|
|
<Text className="text-xs opacity-50">
|
|
Choose the search engine you want to use.
|
|
</Text>
|
|
</View>
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger>
|
|
<TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
|
|
<Text>{settings?.downloadQuality?.label}</Text>
|
|
</TouchableOpacity>
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content
|
|
loop={true}
|
|
side="bottom"
|
|
align="start"
|
|
alignOffset={0}
|
|
avoidCollisions={true}
|
|
collisionPadding={8}
|
|
sideOffset={8}
|
|
>
|
|
<DropdownMenu.Label>Quality</DropdownMenu.Label>
|
|
{DownloadOptions.map((option) => (
|
|
<DropdownMenu.Item
|
|
key={option.value}
|
|
onSelect={() => {
|
|
updateSettings({ downloadQuality: option });
|
|
}}
|
|
>
|
|
<DropdownMenu.ItemTitle>{option.label}</DropdownMenu.ItemTitle>
|
|
</DropdownMenu.Item>
|
|
))}
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</View>
|
|
<View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
|
|
<View className="shrink">
|
|
<Text className="font-semibold">Start videos in fullscreen</Text>
|
|
<Text className="text-xs opacity-50">
|
|
Clicking a video will start it in fullscreen mode, instead of
|
|
inline.
|
|
</Text>
|
|
</View>
|
|
<Switch
|
|
value={settings?.openFullScreenVideoPlayerByDefault}
|
|
onValueChange={(value) =>
|
|
updateSettings({ openFullScreenVideoPlayerByDefault: value })
|
|
}
|
|
/>
|
|
</View>
|
|
|
|
<View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
|
|
<View className="flex flex-col shrink">
|
|
<Text className="font-semibold">Use external player (VLC)</Text>
|
|
<Text className="text-xs opacity-50 shrink">
|
|
Open all videos in VLC instead of the default player. This requries
|
|
VLC to be installed on the phone.
|
|
</Text>
|
|
</View>
|
|
<Switch
|
|
value={settings?.openInVLC}
|
|
onValueChange={(value) => {
|
|
updateSettings({ openInVLC: value, forceDirectPlay: value });
|
|
}}
|
|
/>
|
|
</View>
|
|
|
|
<View className="flex flex-col">
|
|
<View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
|
|
<View className="flex flex-col">
|
|
<Text className="font-semibold">Use popular lists plugin</Text>
|
|
<Text className="text-xs opacity-50">Made by: lostb1t</Text>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
Linking.openURL(
|
|
"https://github.com/lostb1t/jellyfin-plugin-media-lists"
|
|
);
|
|
}}
|
|
>
|
|
<Text className="text-xs text-purple-600">More info</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<Switch
|
|
value={settings?.usePopularPlugin}
|
|
onValueChange={(value) =>
|
|
updateSettings({ usePopularPlugin: value })
|
|
}
|
|
/>
|
|
</View>
|
|
{settings?.usePopularPlugin && (
|
|
<View className="flex flex-col py-2 bg-neutral-900">
|
|
{mediaListCollections?.map((mlc) => (
|
|
<View
|
|
key={mlc.Id}
|
|
className="flex flex-row items-center justify-between bg-neutral-900 px-4 py-2"
|
|
>
|
|
<View className="flex flex-col">
|
|
<Text className="font-semibold">{mlc.Name}</Text>
|
|
</View>
|
|
<Switch
|
|
value={settings?.mediaListCollectionIds?.includes(mlc.Id!)}
|
|
onValueChange={(value) => {
|
|
if (!settings.mediaListCollectionIds) {
|
|
updateSettings({
|
|
mediaListCollectionIds: [mlc.Id!],
|
|
});
|
|
return;
|
|
}
|
|
|
|
updateSettings({
|
|
mediaListCollectionIds:
|
|
settings?.mediaListCollectionIds.includes(mlc.Id!)
|
|
? settings?.mediaListCollectionIds.filter(
|
|
(id) => id !== mlc.Id
|
|
)
|
|
: [...settings?.mediaListCollectionIds, mlc.Id!],
|
|
});
|
|
}}
|
|
/>
|
|
</View>
|
|
))}
|
|
{isLoadingMediaListCollections && (
|
|
<View className="flex flex-row items-center justify-center bg-neutral-900 p-4">
|
|
<Loader />
|
|
</View>
|
|
)}
|
|
{mediaListCollections?.length === 0 && (
|
|
<View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
|
|
<Text className="text-xs opacity-50">
|
|
No collections found. Add some in Jellyfin.
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
|
|
<View className="flex flex-col shrink">
|
|
<Text className="font-semibold">Force direct play</Text>
|
|
<Text className="text-xs opacity-50 shrink">
|
|
This will always request direct play. This is good if you want to
|
|
try to stream movies you think the device supports.
|
|
</Text>
|
|
</View>
|
|
<Switch
|
|
value={settings?.forceDirectPlay}
|
|
onValueChange={(value) => updateSettings({ forceDirectPlay: value })}
|
|
/>
|
|
</View>
|
|
|
|
<View
|
|
className={`
|
|
flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
|
|
${settings?.forceDirectPlay ? "opacity-50 select-none" : ""}
|
|
`}
|
|
>
|
|
<View className="flex flex-col shrink">
|
|
<Text className="font-semibold">Device profile</Text>
|
|
<Text className="text-xs opacity-50">
|
|
A profile used for deciding what audio and video codecs the device
|
|
supports.
|
|
</Text>
|
|
</View>
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger>
|
|
<TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
|
|
<Text>{settings?.deviceProfile}</Text>
|
|
</TouchableOpacity>
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content
|
|
loop={true}
|
|
side="bottom"
|
|
align="start"
|
|
alignOffset={0}
|
|
avoidCollisions={true}
|
|
collisionPadding={8}
|
|
sideOffset={8}
|
|
>
|
|
<DropdownMenu.Label>Profiles</DropdownMenu.Label>
|
|
<DropdownMenu.Item
|
|
key="1"
|
|
onSelect={() => {
|
|
updateSettings({ deviceProfile: "Expo" });
|
|
}}
|
|
>
|
|
<DropdownMenu.ItemTitle>Expo</DropdownMenu.ItemTitle>
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item
|
|
key="2"
|
|
onSelect={() => {
|
|
updateSettings({ deviceProfile: "Native" });
|
|
}}
|
|
>
|
|
<DropdownMenu.ItemTitle>Native</DropdownMenu.ItemTitle>
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item
|
|
key="3"
|
|
onSelect={() => {
|
|
updateSettings({ deviceProfile: "Old" });
|
|
}}
|
|
>
|
|
<DropdownMenu.ItemTitle>Old</DropdownMenu.ItemTitle>
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</View>
|
|
<View className="flex flex-col">
|
|
<View
|
|
className={`
|
|
flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
|
|
`}
|
|
>
|
|
<View className="flex flex-col shrink">
|
|
<Text className="font-semibold">Search engine</Text>
|
|
<Text className="text-xs opacity-50">
|
|
Choose the search engine you want to use.
|
|
</Text>
|
|
</View>
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger>
|
|
<TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
|
|
<Text>{settings?.searchEngine}</Text>
|
|
</TouchableOpacity>
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content
|
|
loop={true}
|
|
side="bottom"
|
|
align="start"
|
|
alignOffset={0}
|
|
avoidCollisions={true}
|
|
collisionPadding={8}
|
|
sideOffset={8}
|
|
>
|
|
<DropdownMenu.Label>Profiles</DropdownMenu.Label>
|
|
<DropdownMenu.Item
|
|
key="1"
|
|
onSelect={() => {
|
|
updateSettings({ searchEngine: "Jellyfin" });
|
|
queryClient.invalidateQueries({ queryKey: ["search"] });
|
|
}}
|
|
>
|
|
<DropdownMenu.ItemTitle>Jellyfin</DropdownMenu.ItemTitle>
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item
|
|
key="2"
|
|
onSelect={() => {
|
|
updateSettings({ searchEngine: "Marlin" });
|
|
queryClient.invalidateQueries({ queryKey: ["search"] });
|
|
}}
|
|
>
|
|
<DropdownMenu.ItemTitle>Marlin</DropdownMenu.ItemTitle>
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</View>
|
|
{settings?.searchEngine === "Marlin" && (
|
|
<View className="flex flex-col bg-neutral-900 px-4 pb-4">
|
|
<>
|
|
<View className="flex flex-row items-center space-x-2">
|
|
<View className="grow">
|
|
<Input
|
|
placeholder="Marlin Server URL..."
|
|
defaultValue={settings.marlinServerUrl}
|
|
value={marlinUrl}
|
|
keyboardType="url"
|
|
returnKeyType="done"
|
|
autoCapitalize="none"
|
|
textContentType="URL"
|
|
onChangeText={(text) => setMarlinUrl(text)}
|
|
/>
|
|
</View>
|
|
<Button
|
|
color="purple"
|
|
className="shrink w-16 h-12"
|
|
onPress={() => {
|
|
updateSettings({ marlinServerUrl: marlinUrl });
|
|
}}
|
|
>
|
|
Save
|
|
</Button>
|
|
</View>
|
|
|
|
<Text className="text-neutral-500 mt-2">
|
|
{settings?.marlinServerUrl}
|
|
</Text>
|
|
</>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|