Ninjalama/streamyfin_mirror
1
0
Fork 1
mirror of https://github.com/streamyfin/streamyfin.git synced 2025-08-20 18:37:18 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: remove deps

Browse Source
This commit is contained in:
Fredrik Burmester
2025-01-04 17:08:00 +01:00
parent 8ea38a3efc
commit aa785b0f95
18 changed files with 1248 additions and 909 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
app/(auth)/(tabs)/(home,libraries,search)/jellyseerr/page.tsx
View File

@@ -1,33 +1,32 @@
import React, { useCallback, useRef, useState } from "react";
import { useLocalSearchParams } from "expo-router";
import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
import { Text } from "@/components/common/Text";
import { ParallaxScrollView } from "@/components/ParallaxPage";
import { Image } from "expo-image";
import { TouchableOpacity, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { OverviewText } from "@/components/OverviewText";
import { GenreTags } from "@/components/GenreTags";
import { MediaType } from "@/utils/jellyseerr/server/constants/media";
import { useQuery } from "@tanstack/react-query";
import { useJellyseerr } from "@/hooks/useJellyseerr";
import { Button } from "@/components/Button";
import { Input } from "@/components/common/Input";
import { Text } from "@/components/common/Text";
import { GenreTags } from "@/components/GenreTags";
import { OverviewText } from "@/components/OverviewText";
import { ParallaxScrollView } from "@/components/ParallaxPage";
import { JellyserrRatings } from "@/components/Ratings";
import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
import { useJellyseerr } from "@/hooks/useJellyseerr";
import {
IssueType,
IssueTypeName,
} from "@/utils/jellyseerr/server/constants/issue";
import { MediaType } from "@/utils/jellyseerr/server/constants/media";
import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
import { Ionicons } from "@expo/vector-icons";
import {
BottomSheetBackdrop,
BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import {
IssueType,
IssueTypeName,
} from "@/utils/jellyseerr/server/constants/issue";
import * as DropdownMenu from "zeego/dropdown-menu";
import { Input } from "@/components/common/Input";
import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
import { JellyserrRatings } from "@/components/Ratings";
import { useQuery } from "@tanstack/react-query";
import { Image } from "expo-image";
import { useLocalSearchParams } from "expo-router";
import React, { useCallback, useRef, useState } from "react";
import { Modal, TouchableOpacity, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
const Page: React.FC = () => {
const insets = useSafeAreaInsets();
@@ -51,6 +50,7 @@ const Page: React.FC = () => {
const [issueType, setIssueType] = useState<IssueType>();
const [issueMessage, setIssueMessage] = useState<string>();
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const [isIssueTypeModalVisible, setIsIssueTypeModalVisible] = useState(false);
const {
data: details,
@@ -231,47 +231,68 @@ const Page: React.FC = () => {
</View>
<View className="flex flex-col space-y-2 items-start">
<View className="flex flex-col">
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<View className="flex flex-col">
<Text className="opacity-50 mb-1 text-xs">
Issue Type
</Text>
<TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
<Text style={{}} className="" numberOfLines={1}>
{issueType
? IssueTypeName[issueType]
: "Select an issue"}
</Text>
</TouchableOpacity>
</View>
</DropdownMenu.Trigger>
<DropdownMenu.Content
loop={false}
side="bottom"
align="center"
alignOffset={0}
avoidCollisions={true}
collisionPadding={0}
sideOffset={0}
<View className="flex flex-col">
<Text className="opacity-50 mb-1 text-xs">Issue Type</Text>
<TouchableOpacity
className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
onPress={() => setIsIssueTypeModalVisible(true)}
>
<DropdownMenu.Label>Types</DropdownMenu.Label>
{Object.entries(IssueTypeName)
.reverse()
.map(([key, value], idx) => (
<DropdownMenu.Item
key={value}
onSelect={() =>
setIssueType(key as unknown as IssueType)
}
<Text className="" numberOfLines={1}>
{issueType ? IssueTypeName[issueType] : "Select an issue"}
</Text>
<Ionicons
name="chevron-down"
size={16}
color="white"
style={{ opacity: 0.5 }}
/>
</TouchableOpacity>
<Modal
visible={isIssueTypeModalVisible}
transparent
animationType="slide"
onRequestClose={() => setIsIssueTypeModalVisible(false)}
>
<TouchableOpacity
className="flex-1 bg-black/50"
activeOpacity={1}
onPress={() => setIsIssueTypeModalVisible(false)}
>
<View className="mt-auto bg-neutral-900 rounded-t-xl">
<View className="p-4 border-b border-neutral-800">
<Text className="text-lg font-bold text-center">
Select Issue Type
</Text>
</View>
<View className="max-h-[50%]">
{Object.entries(IssueTypeName)
.reverse()
.map(([key, value]) => (
<TouchableOpacity
key={key}
className="p-4 border-b border-neutral-800"
onPress={() => {
setIssueType(key as unknown as IssueType);
setIsIssueTypeModalVisible(false);
}}
>
<Text className="text-center">{value}</Text>
</TouchableOpacity>
))}
</View>
<TouchableOpacity
className="p-4 border-t border-neutral-800"
onPress={() => setIsIssueTypeModalVisible(false)}
>
<DropdownMenu.ItemTitle>
{value}
</DropdownMenu.ItemTitle>
</DropdownMenu.Item>
))}
</DropdownMenu.Content>
</DropdownMenu.Root>
<Text className="text-center text-purple-400">
Cancel
</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
</View>
</View>
<Input

306
app/(auth)/(tabs)/(libraries)/_layout.tsx
View File

@@ -1,12 +1,44 @@
import { Text } from "@/components/common/Text";
import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
import { useSettings } from "@/utils/atoms/settings";
import { Ionicons } from "@expo/vector-icons";
import { Stack } from "expo-router";
import { Platform } from "react-native";
import * as DropdownMenu from "zeego/dropdown-menu";
import { useState } from "react";
import { Modal, Platform, TouchableOpacity, View } from "react-native";
export default function IndexLayout() {
const [settings, updateSettings] = useSettings();
const [isMenuVisible, setIsMenuVisible] = useState(false);
const [activeSubmenu, setActiveSubmenu] = useState<string | null>(null);
const MenuItem = ({
label,
selected,
onPress,
disabled = false,
}: {
label: string;
selected?: boolean;
onPress: () => void;
disabled?: boolean;
}) => (
<TouchableOpacity
className={`p-4 border-b border-neutral-800 flex-row items-center justify-between ${
disabled ? "opacity-50" : ""
}`}
onPress={onPress}
disabled={disabled}
>
<Text className="text-base">{label}</Text>
{selected && <Ionicons name="checkmark" size={24} color="white" />}
</TouchableOpacity>
);
const MenuSection = ({ title }: { title: string }) => (
<View className="p-4 border-b border-neutral-800 bg-neutral-800/30">
<Text className="text-sm opacity-50 font-medium">{title}</Text>
</View>
);
if (!settings?.libraryOptions) return null;
@@ -22,163 +54,167 @@ export default function IndexLayout() {
headerTransparent: Platform.OS === "ios" ? true : false,
headerShadowVisible: false,
headerRight: () => (
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Ionicons
name="ellipsis-horizontal-outline"
size={24}
color="white"
/>
</DropdownMenu.Trigger>
<DropdownMenu.Content
align={"end"}
alignOffset={-10}
avoidCollisions={false}
collisionPadding={0}
loop={false}
side={"bottom"}
sideOffset={10}
<Modal
visible={isMenuVisible}
transparent
animationType="slide"
onRequestClose={() => {
setIsMenuVisible(false);
setActiveSubmenu(null);
}}
>
<TouchableOpacity
className="flex-1 bg-black/50"
activeOpacity={1}
onPress={() => {
setIsMenuVisible(false);
setActiveSubmenu(null);
}}
>
<DropdownMenu.Label>Display</DropdownMenu.Label>
<DropdownMenu.Group key="display-group">
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger key="image-style-trigger">
Display
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
alignOffset={-10}
avoidCollisions={true}
collisionPadding={0}
loop={true}
sideOffset={10}
>
<DropdownMenu.CheckboxItem
key="display-option-1"
value={settings.libraryOptions.display === "row"}
onValueChange={() =>
<View className="mt-auto bg-neutral-900 rounded-t-xl">
{!activeSubmenu ? (
<>
<MenuSection title="Display" />
<MenuItem
label="Display"
onPress={() => setActiveSubmenu("display")}
/>
<MenuItem
label="Image style"
onPress={() => setActiveSubmenu("imageStyle")}
/>
<MenuItem
label="Show titles"
selected={settings.libraryOptions.showTitles}
disabled={
settings.libraryOptions.imageStyle === "poster"
}
onPress={() => {
if (settings.libraryOptions.imageStyle === "poster")
return;
updateSettings({
libraryOptions: {
...settings.libraryOptions,
showTitles: !settings.libraryOptions.showTitles,
},
});
}}
/>
<MenuItem
label="Show stats"
selected={settings.libraryOptions.showStats}
onPress={() => {
updateSettings({
libraryOptions: {
...settings.libraryOptions,
showStats: !settings.libraryOptions.showStats,
},
});
}}
/>
</>
) : activeSubmenu === "display" ? (
<>
<View className="p-4 border-b border-neutral-800 flex-row items-center">
<TouchableOpacity
onPress={() => setActiveSubmenu(null)}
>
<Ionicons
name="chevron-back"
size={24}
color="white"
/>
</TouchableOpacity>
<Text className="text-lg font-bold ml-2">Display</Text>
</View>
<MenuItem
label="Row"
selected={settings.libraryOptions.display === "row"}
onPress={() => {
updateSettings({
libraryOptions: {
...settings.libraryOptions,
display: "row",
},
})
}
>
<DropdownMenu.ItemIndicator />
<DropdownMenu.ItemTitle key="display-title-1">
Row
</DropdownMenu.ItemTitle>
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
key="display-option-2"
value={settings.libraryOptions.display === "list"}
onValueChange={() =>
});
setActiveSubmenu(null);
}}
/>
<MenuItem
label="List"
selected={settings.libraryOptions.display === "list"}
onPress={() => {
updateSettings({
libraryOptions: {
...settings.libraryOptions,
display: "list",
},
})
});
setActiveSubmenu(null);
}}
/>
</>
) : activeSubmenu === "imageStyle" ? (
<>
<View className="p-4 border-b border-neutral-800 flex-row items-center">
<TouchableOpacity
onPress={() => setActiveSubmenu(null)}
>
<Ionicons
name="chevron-back"
size={24}
color="white"
/>
</TouchableOpacity>
<Text className="text-lg font-bold ml-2">
Image Style
</Text>
</View>
<MenuItem
label="Poster"
selected={
settings.libraryOptions.imageStyle === "poster"
}
>
<DropdownMenu.ItemIndicator />
<DropdownMenu.ItemTitle key="display-title-2">
List
</DropdownMenu.ItemTitle>
</DropdownMenu.CheckboxItem>
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger key="image-style-trigger">
Image style
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
alignOffset={-10}
avoidCollisions={true}
collisionPadding={0}
loop={true}
sideOffset={10}
>
<DropdownMenu.CheckboxItem
key="poster-option"
value={settings.libraryOptions.imageStyle === "poster"}
onValueChange={() =>
onPress={() => {
updateSettings({
libraryOptions: {
...settings.libraryOptions,
imageStyle: "poster",
},
})
});
setActiveSubmenu(null);
}}
/>
<MenuItem
label="Cover"
selected={
settings.libraryOptions.imageStyle === "cover"
}
>
<DropdownMenu.ItemIndicator />
<DropdownMenu.ItemTitle key="poster-title">
Poster
</DropdownMenu.ItemTitle>
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
key="cover-option"
value={settings.libraryOptions.imageStyle === "cover"}
onValueChange={() =>
onPress={() => {
updateSettings({
libraryOptions: {
...settings.libraryOptions,
imageStyle: "cover",
},
})
}
>
<DropdownMenu.ItemIndicator />
<DropdownMenu.ItemTitle key="cover-title">
Cover
</DropdownMenu.ItemTitle>
</DropdownMenu.CheckboxItem>
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
</DropdownMenu.Group>
<DropdownMenu.Group key="show-titles-group">
<DropdownMenu.CheckboxItem
disabled={settings.libraryOptions.imageStyle === "poster"}
key="show-titles-option"
value={settings.libraryOptions.showTitles}
onValueChange={(newValue) => {
if (settings.libraryOptions.imageStyle === "poster")
return;
updateSettings({
libraryOptions: {
...settings.libraryOptions,
showTitles: newValue === "on" ? true : false,
},
});
}}
>
<DropdownMenu.ItemIndicator />
<DropdownMenu.ItemTitle key="show-titles-title">
Show titles
</DropdownMenu.ItemTitle>
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
key="show-stats-option"
value={settings.libraryOptions.showStats}
onValueChange={(newValue) => {
updateSettings({
libraryOptions: {
...settings.libraryOptions,
showStats: newValue === "on" ? true : false,
},
});
}}
>
<DropdownMenu.ItemIndicator />
<DropdownMenu.ItemTitle key="show-stats-title">
Show stats
</DropdownMenu.ItemTitle>
</DropdownMenu.CheckboxItem>
</DropdownMenu.Group>
});
setActiveSubmenu(null);
}}
/>
</>
) : null}
<DropdownMenu.Separator />
</DropdownMenu.Content>
</DropdownMenu.Root>
<TouchableOpacity
className="p-4 border-t border-neutral-800"
onPress={() => {
setIsMenuVisible(false);
setActiveSubmenu(null);
}}
>
<Text className="text-center text-purple-400">Done</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
),
}}
/>

12
app/(auth)/(tabs)/_layout.tsx
View File

@@ -73,18 +73,6 @@ export default function TabLayout() {
: () => ({ sfSymbol: "rectangle.stack" }),
}}
/>
<NativeTabs.Screen
name="(custom-links)"
options={{
title: "Custom Links",
// @ts-expect-error
tabBarItemHidden: settings?.showCustomMenuLinks ? false : true,
tabBarIcon:
Platform.OS == "android"
? () => require("@/assets/icons/list.png")
: () => ({ sfSymbol: "list.dash" }),
}}
/>
</NativeTabs>
</>
);

120
components/AudioTrackSelector.tsx
View File

@@ -1,7 +1,7 @@
import { Ionicons } from "@expo/vector-icons";
import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
import { useMemo } from "react";
import { TouchableOpacity, View } from "react-native";
import * as DropdownMenu from "zeego/dropdown-menu";
import { useMemo, useState } from "react";
import { Modal, TouchableOpacity, View } from "react-native";
import { Text } from "./common/Text";
interface Props extends React.ComponentProps<typeof View> {
@@ -16,6 +16,8 @@ export const AudioTrackSelector: React.FC<Props> = ({
selected,
...props
}) => {
const [isModalVisible, setIsModalVisible] = useState(false);
const audioStreams = useMemo(
() => source?.MediaStreams?.filter((x) => x.Type === "Audio"),
[source]
@@ -25,50 +27,80 @@ export const AudioTrackSelector: React.FC<Props> = ({
() => audioStreams?.find((x) => x.Index === selected),
[audioStreams, selected]
);
return (
<View
className="flex shrink"
style={{
minWidth: 50,
}}
>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<View className="flex flex-col" {...props}>
<Text className="opacity-50 mb-1 text-xs">Audio</Text>
<TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
<Text className="" numberOfLines={1}>
{selectedAudioSteam?.DisplayTitle}
<>
<View
className="flex shrink"
style={{
minWidth: 50,
}}
>
<View className="flex flex-col" {...props}>
<Text className="opacity-50 mb-1 text-xs">Audio</Text>
<TouchableOpacity
className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
onPress={() => setIsModalVisible(true)}
>
<Text className="" numberOfLines={1}>
{selectedAudioSteam?.DisplayTitle}
</Text>
<Ionicons
name="chevron-down"
size={16}
color="white"
style={{ opacity: 0.5 }}
/>
</TouchableOpacity>
</View>
</View>
<Modal
visible={isModalVisible}
transparent
animationType="slide"
onRequestClose={() => setIsModalVisible(false)}
>
<TouchableOpacity
className="flex-1 bg-black/50"
activeOpacity={1}
onPress={() => setIsModalVisible(false)}
>
<View className="mt-auto bg-neutral-900 rounded-t-xl">
<View className="p-4 border-b border-neutral-800">
<Text className="text-lg font-bold text-center">
Audio Streams
</Text>
</View>
<View className="max-h-[50%]">
{audioStreams?.map((audio, idx: number) => (
<TouchableOpacity
key={idx.toString()}
className={`p-4 border-b border-neutral-800 flex-row items-center justify-between`}
onPress={() => {
if (audio.Index !== null && audio.Index !== undefined) {
onChange(audio.Index);
setIsModalVisible(false);
}
}}
>
<Text>{audio.DisplayTitle}</Text>
{audio.Index === selected && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
))}
</View>
<TouchableOpacity
className="p-4 border-t border-neutral-800"
onPress={() => setIsModalVisible(false)}
>
<Text className="text-center text-purple-400">Cancel</Text>
</TouchableOpacity>
</View>
</DropdownMenu.Trigger>
<DropdownMenu.Content
loop={true}
side="bottom"
align="start"
alignOffset={0}
avoidCollisions={true}
collisionPadding={8}
sideOffset={8}
>
<DropdownMenu.Label>Audio streams</DropdownMenu.Label>
{audioStreams?.map((audio, idx: number) => (
<DropdownMenu.Item
key={idx.toString()}
onSelect={() => {
if (audio.Index !== null && audio.Index !== undefined)
onChange(audio.Index);
}}
>
<DropdownMenu.ItemTitle>
{audio.DisplayTitle}
</DropdownMenu.ItemTitle>
</DropdownMenu.Item>
))}
</DropdownMenu.Content>
</DropdownMenu.Root>
</View>
</TouchableOpacity>
</Modal>
</>
);
};

118
components/BitrateSelector.tsx
View File

@@ -1,7 +1,7 @@
import { TouchableOpacity, View } from "react-native";
import * as DropdownMenu from "zeego/dropdown-menu";
import { TouchableOpacity, View, Modal } from "react-native";
import { Text } from "./common/Text";
import { useMemo } from "react";
import { useMemo, useState } from "react";
import { Ionicons } from "@expo/vector-icons";
export type Bitrate = {
key: string;
@@ -49,6 +49,8 @@ export const BitrateSelector: React.FC<Props> = ({
inverted,
...props
}) => {
const [isModalVisible, setIsModalVisible] = useState(false);
const sorted = useMemo(() => {
if (inverted)
return BITRATES.sort(
@@ -57,49 +59,81 @@ export const BitrateSelector: React.FC<Props> = ({
return BITRATES.sort(
(a, b) => (b.value || Infinity) - (a.value || Infinity)
);
}, []);
}, [inverted]);
return (
<View
className="flex shrink"
style={{
minWidth: 60,
maxWidth: 200,
}}
>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<View className="flex flex-col" {...props}>
<Text className="opacity-50 mb-1 text-xs">Quality</Text>
<TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
<Text style={{}} className="" numberOfLines={1}>
{BITRATES.find((b) => b.value === selected?.value)?.key}
<>
<View
className="flex shrink"
style={{
minWidth: 60,
maxWidth: 200,
}}
>
<View className="flex flex-col" {...props}>
<Text className="opacity-50 mb-1 text-xs">Quality</Text>
<TouchableOpacity
className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
onPress={() => setIsModalVisible(true)}
>
<Text className="" numberOfLines={1}>
{BITRATES.find((b) => b.value === selected?.value)?.key}
</Text>
<Ionicons
name="chevron-down"
size={16}
color="white"
style={{ opacity: 0.5 }}
/>
</TouchableOpacity>
</View>
</View>
<Modal
visible={isModalVisible}
transparent
animationType="slide"
onRequestClose={() => setIsModalVisible(false)}
>
<TouchableOpacity
className="flex-1 bg-black/50"
activeOpacity={1}
onPress={() => setIsModalVisible(false)}
>
<View className="mt-auto bg-neutral-900 rounded-t-xl">
<View className="p-4 border-b border-neutral-800">
<Text className="text-lg font-bold text-center">
Select Quality
</Text>
</View>
<View className="max-h-[50%]">
{sorted.map((bitrate) => (
<TouchableOpacity
key={bitrate.key}
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
onChange(bitrate);
setIsModalVisible(false);
}}
>
<Text>{bitrate.key}</Text>
{bitrate.value === selected?.value && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
))}
</View>
<TouchableOpacity
className="p-4 border-t border-neutral-800"
onPress={() => setIsModalVisible(false)}
>
<Text className="text-center text-purple-400">Cancel</Text>
</TouchableOpacity>
</View>
</DropdownMenu.Trigger>
<DropdownMenu.Content
loop={false}
side="bottom"
align="center"
alignOffset={0}
avoidCollisions={true}
collisionPadding={0}
sideOffset={0}
>
<DropdownMenu.Label>Bitrates</DropdownMenu.Label>
{sorted.map((b) => (
<DropdownMenu.Item
key={b.key}
onSelect={() => {
onChange(b);
}}
>
<DropdownMenu.ItemTitle>{b.key}</DropdownMenu.ItemTitle>
</DropdownMenu.Item>
))}
</DropdownMenu.Content>
</DropdownMenu.Root>
</View>
</TouchableOpacity>
</Modal>
</>
);
};

2
components/ItemContent.tsx
View File

@@ -11,7 +11,6 @@ import { CastAndCrew } from "@/components/series/CastAndCrew";
import { CurrentSeries } from "@/components/series/CurrentSeries";
import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
import { useImageColors } from "@/hooks/useImageColors";
import { apiAtom } from "@/providers/JellyfinProvider";
import { SubtitleHelper } from "@/utils/SubtitleHelper";
import { useSettings } from "@/utils/atoms/settings";
@@ -44,7 +43,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
const [settings] = useSettings();
const navigation = useNavigation();
const insets = useSafeAreaInsets();
useImageColors({ item });
const [loadingLogo, setLoadingLogo] = useState(true);
const [headerHeight, setHeaderHeight] = useState(350);

123
components/MediaSourceSelector.tsx
View File

@@ -1,13 +1,12 @@
import { tc } from "@/utils/textTools";
import { convertBitsToMegabitsOrGigabits } from "@/utils/bToMb";
import { Ionicons } from "@expo/vector-icons";
import {
BaseItemDto,
MediaSourceInfo,
} from "@jellyfin/sdk/lib/generated-client/models";
import { useEffect, useMemo } from "react";
import { TouchableOpacity, View } from "react-native";
import * as DropdownMenu from "zeego/dropdown-menu";
import { useMemo, useState } from "react";
import { Modal, TouchableOpacity, View } from "react-native";
import { Text } from "./common/Text";
import { convertBitsToMegabitsOrGigabits } from "@/utils/bToMb";
interface Props extends React.ComponentProps<typeof View> {
item: BaseItemDto;
@@ -21,6 +20,8 @@ export const MediaSourceSelector: React.FC<Props> = ({
selected,
...props
}) => {
const [isModalVisible, setIsModalVisible] = useState(false);
const selectedName = useMemo(
() =>
item.MediaSources?.find((x) => x.Id === selected?.Id)?.MediaStreams?.find(
@@ -30,48 +31,80 @@ export const MediaSourceSelector: React.FC<Props> = ({
);
return (
<View
className="flex shrink"
style={{
minWidth: 50,
}}
>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<View className="flex flex-col" {...props}>
<Text className="opacity-50 mb-1 text-xs">Video</Text>
<TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center">
<Text numberOfLines={1}>{selectedName}</Text>
<>
<View
className="flex shrink"
style={{
minWidth: 50,
}}
>
<View className="flex flex-col" {...props}>
<Text className="opacity-50 mb-1 text-xs">Video</Text>
<TouchableOpacity
className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
onPress={() => setIsModalVisible(true)}
>
<Text numberOfLines={1}>{selectedName}</Text>
<Ionicons
name="chevron-down"
size={16}
color="white"
style={{ opacity: 0.5 }}
/>
</TouchableOpacity>
</View>
</View>
<Modal
visible={isModalVisible}
transparent
animationType="slide"
onRequestClose={() => setIsModalVisible(false)}
>
<TouchableOpacity
className="flex-1 bg-black/50"
activeOpacity={1}
onPress={() => setIsModalVisible(false)}
>
<View className="mt-auto bg-neutral-900 rounded-t-xl">
<View className="p-4 border-b border-neutral-800">
<Text className="text-lg font-bold text-center">
Media Sources
</Text>
</View>
<View className="max-h-[50%]">
{item.MediaSources?.map((source, idx: number) => (
<TouchableOpacity
key={idx.toString()}
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
onChange(source);
setIsModalVisible(false);
}}
>
<Text>
{`${name(source.Name)} - ${convertBitsToMegabitsOrGigabits(
source.Size
)}`}
</Text>
{source.Id === selected?.Id && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
))}
</View>
<TouchableOpacity
className="p-4 border-t border-neutral-800"
onPress={() => setIsModalVisible(false)}
>
<Text className="text-center text-purple-400">Cancel</Text>
</TouchableOpacity>
</View>
</DropdownMenu.Trigger>
<DropdownMenu.Content
loop={true}
side="bottom"
align="start"
alignOffset={0}
avoidCollisions={true}
collisionPadding={8}
sideOffset={8}
>
<DropdownMenu.Label>Media sources</DropdownMenu.Label>
{item.MediaSources?.map((source, idx: number) => (
<DropdownMenu.Item
key={idx.toString()}
onSelect={() => {
onChange(source);
}}
>
<DropdownMenu.ItemTitle>
{`${name(source.Name)} - ${convertBitsToMegabitsOrGigabits(
source.Size
)}`}
</DropdownMenu.ItemTitle>
</DropdownMenu.Item>
))}
</DropdownMenu.Content>
</DropdownMenu.Root>
</View>
</TouchableOpacity>
</Modal>
</>
);
};

149
components/SubtitleTrackSelector.tsx
View File

@@ -1,10 +1,10 @@
import { tc } from "@/utils/textTools";
import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
import { useMemo } from "react";
import { Platform, TouchableOpacity, View } from "react-native";
import * as DropdownMenu from "zeego/dropdown-menu";
import { useMemo, useState } from "react";
import { Platform, TouchableOpacity, View, Modal } from "react-native";
import { Text } from "./common/Text";
import { SubtitleHelper } from "@/utils/SubtitleHelper";
import { Ionicons } from "@expo/vector-icons";
interface Props extends React.ComponentProps<typeof View> {
source?: MediaSourceInfo;
@@ -20,6 +20,8 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
isTranscoding,
...props
}) => {
const [isModalVisible, setIsModalVisible] = useState(false);
const subtitleStreams = useMemo(() => {
const subtitleHelper = new SubtitleHelper(source?.MediaStreams ?? []);
@@ -38,59 +40,98 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
if (subtitleStreams.length === 0) return null;
return (
<View
className="flex col shrink justify-start place-self-start items-start"
style={{
minWidth: 60,
maxWidth: 200,
}}
>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<View className="flex flex-col " {...props}>
<Text className="opacity-50 mb-1 text-xs">Subtitle</Text>
<TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
<Text className=" ">
{selectedSubtitleSteam
? tc(selectedSubtitleSteam?.DisplayTitle, 7)
: "None"}
<>
<View
className="flex col shrink justify-start place-self-start items-start"
style={{
minWidth: 60,
maxWidth: 200,
}}
>
<View className="flex flex-col" {...props}>
<Text className="opacity-50 mb-1 text-xs">Subtitle</Text>
<TouchableOpacity
className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
onPress={() => setIsModalVisible(true)}
>
<Text>
{selectedSubtitleSteam
? tc(selectedSubtitleSteam?.DisplayTitle, 7)
: "None"}
</Text>
<Ionicons
name="chevron-down"
size={16}
color="white"
style={{ opacity: 0.5 }}
/>
</TouchableOpacity>
</View>
</View>
<Modal
visible={isModalVisible}
transparent
animationType="slide"
onRequestClose={() => setIsModalVisible(false)}
>
<TouchableOpacity
className="flex-1 bg-black/50"
activeOpacity={1}
onPress={() => setIsModalVisible(false)}
>
<View className="mt-auto bg-neutral-900 rounded-t-xl">
<View className="p-4 border-b border-neutral-800">
<Text className="text-lg font-bold text-center">
Subtitle Tracks
</Text>
</View>
<View className="max-h-[50%]">
<TouchableOpacity
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
onChange(-1);
setIsModalVisible(false);
}}
>
<Text>None</Text>
{selected === -1 && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
{subtitleStreams?.map((subtitle, idx: number) => (
<TouchableOpacity
key={idx.toString()}
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
if (
subtitle.Index !== undefined &&
subtitle.Index !== null
) {
onChange(subtitle.Index);
setIsModalVisible(false);
}
}}
>
<Text>{subtitle.DisplayTitle}</Text>
{subtitle.Index === selected && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
))}
</View>
<TouchableOpacity
className="p-4 border-t border-neutral-800"
onPress={() => setIsModalVisible(false)}
>
<Text className="text-center text-purple-400">Cancel</Text>
</TouchableOpacity>
</View>
</DropdownMenu.Trigger>
<DropdownMenu.Content
loop={true}
side="bottom"
align="start"
alignOffset={0}
avoidCollisions={true}
collisionPadding={8}
sideOffset={8}
>
<DropdownMenu.Label>Subtitle tracks</DropdownMenu.Label>
<DropdownMenu.Item
key={"-1"}
onSelect={() => {
onChange(-1);
}}
>
<DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
</DropdownMenu.Item>
{subtitleStreams?.map((subtitle, idx: number) => (
<DropdownMenu.Item
key={idx.toString()}
onSelect={() => {
if (subtitle.Index !== undefined && subtitle.Index !== null)
onChange(subtitle.Index);
}}
>
<DropdownMenu.ItemTitle>
{subtitle.DisplayTitle}
</DropdownMenu.ItemTitle>
</DropdownMenu.Item>
))}
</DropdownMenu.Content>
</DropdownMenu.Root>
</View>
</TouchableOpacity>
</Modal>
</>
);
};

1
components/common/ItemImage.tsx
View File

@@ -1,4 +1,3 @@
import { useImageColors } from "@/hooks/useImageColors";
import { apiAtom } from "@/providers/JellyfinProvider";
import { getItemImage } from "@/utils/getItemImage";
import { Ionicons } from "@expo/vector-icons";

98
components/series/SeasonDropdown.tsx
View File

@@ -1,8 +1,8 @@
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import { useEffect, useMemo } from "react";
import { TouchableOpacity, View } from "react-native";
import * as DropdownMenu from "zeego/dropdown-menu";
import { useEffect, useMemo, useState } from "react";
import { TouchableOpacity, View, Modal } from "react-native";
import { Text } from "../common/Text";
import { Ionicons } from "@expo/vector-icons";
type Props = {
item: BaseItemDto;
@@ -29,6 +29,8 @@ export const SeasonDropdown: React.FC<Props> = ({
state,
onSelect,
}) => {
const [isModalVisible, setIsModalVisible] = useState(false);
const keys = useMemo<SeasonKeys>(
() =>
item.Type === "Episode"
@@ -55,7 +57,6 @@ export const SeasonDropdown: React.FC<Props> = ({
let initialIndex: number | undefined;
if (initialSeasonIndex !== undefined) {
// Use the provided initialSeasonIndex if it exists in the seasons
const seasonExists = seasons.some(
(season: any) => season[keys.index] === initialSeasonIndex
);
@@ -65,7 +66,6 @@ export const SeasonDropdown: React.FC<Props> = ({
}
if (initialIndex === undefined) {
// Fall back to the previous logic if initialIndex is not set
const season1 = seasons.find((season: any) => season[keys.index] === 1);
const season0 = seasons.find((season: any) => season[keys.index] === 0);
const firstSeason = season1 || season0 || seasons[0];
@@ -87,35 +87,65 @@ export const SeasonDropdown: React.FC<Props> = ({
Number(a[keys.index]) - Number(b[keys.index]);
return (
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<View className="flex flex-row">
<TouchableOpacity className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
<Text>Season {seasonIndex}</Text>
</TouchableOpacity>
</View>
</DropdownMenu.Trigger>
<DropdownMenu.Content
loop={true}
side="bottom"
align="start"
alignOffset={0}
avoidCollisions={true}
collisionPadding={8}
sideOffset={8}
<>
<TouchableOpacity
className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between"
onPress={() => setIsModalVisible(true)}
>
<DropdownMenu.Label>Seasons</DropdownMenu.Label>
{seasons?.sort(sortByIndex).map((season: any) => (
<DropdownMenu.Item
key={season[keys.title]}
onSelect={() => onSelect(season)}
>
<DropdownMenu.ItemTitle>
{season[keys.title]}
</DropdownMenu.ItemTitle>
</DropdownMenu.Item>
))}
</DropdownMenu.Content>
</DropdownMenu.Root>
<Text>Season {seasonIndex}</Text>
<Ionicons
name="chevron-down"
size={16}
color="white"
style={{ opacity: 0.5, marginLeft: 8 }}
/>
</TouchableOpacity>
<Modal
visible={isModalVisible}
transparent
animationType="slide"
onRequestClose={() => setIsModalVisible(false)}
>
<TouchableOpacity
className="flex-1 bg-black/50"
activeOpacity={1}
onPress={() => setIsModalVisible(false)}
>
<View className="mt-auto bg-neutral-900 rounded-t-xl">
<View className="p-4 border-b border-neutral-800">
<Text className="text-lg font-bold text-center">
Select Season
</Text>
</View>
<View className="max-h-[50%]">
{seasons?.sort(sortByIndex).map((season: any) => (
<TouchableOpacity
key={season[keys.title]}
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
onSelect(season);
setIsModalVisible(false);
}}
>
<Text>{season[keys.title]}</Text>
{Number(season[keys.index]) === Number(seasonIndex) && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
))}
</View>
<TouchableOpacity
className="p-4 border-t border-neutral-800"
onPress={() => setIsModalVisible(false)}
>
<Text className="text-center text-purple-400">Cancel</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
</>
);
};

1
components/series/SeasonPicker.tsx
View File

@@ -5,7 +5,6 @@ import {
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
import { runtimeTicksToSeconds } from "@/utils/time";
import { Ionicons } from "@expo/vector-icons";
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
import { useQuery, useQueryClient } from "@tanstack/react-query";

137
components/settings/AudioToggles.tsx
View File

@@ -1,8 +1,9 @@
import { TouchableOpacity, View, ViewProps } from "react-native";
import * as DropdownMenu from "zeego/dropdown-menu";
import { TouchableOpacity, View, ViewProps, Modal } from "react-native";
import { Text } from "../common/Text";
import { useMedia } from "./MediaContext";
import { Switch } from "react-native-gesture-handler";
import { Ionicons } from "@expo/vector-icons";
import { useState } from "react";
interface Props extends ViewProps {}
@@ -10,69 +11,35 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
const media = useMedia();
const { settings, updateSettings } = media;
const cultures = media.cultures;
const [isModalVisible, setIsModalVisible] = useState(false);
if (!settings) return null;
return (
<View>
<Text className="text-lg font-bold mb-2">Audio</Text>
<View className="flex flex-col rounded-xl mb-4 overflow-hidden divide-y-2 divide-solid divide-neutral-800">
<View
className={`
flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
`}
>
<View className="flex flex-col rounded-xl mb-4 overflow-hidden divide-y-2 divide-solid divide-neutral-800">
<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">Audio language</Text>
<Text className="text-xs opacity-50">
Choose a default audio language.
</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?.defaultAudioLanguage?.DisplayName || "None"}
</Text>
</TouchableOpacity>
</DropdownMenu.Trigger>
<DropdownMenu.Content
loop={true}
side="bottom"
align="start"
alignOffset={0}
avoidCollisions={true}
collisionPadding={8}
sideOffset={8}
>
<DropdownMenu.Label>Languages</DropdownMenu.Label>
<DropdownMenu.Item
key={"none-audio"}
onSelect={() => {
updateSettings({
defaultAudioLanguage: null,
});
}}
>
<DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
</DropdownMenu.Item>
{cultures?.map((l) => (
<DropdownMenu.Item
key={l?.ThreeLetterISOLanguageName ?? "unknown"}
onSelect={() => {
updateSettings({
defaultAudioLanguage: l,
});
}}
>
<DropdownMenu.ItemTitle>
{l.DisplayName}
</DropdownMenu.ItemTitle>
</DropdownMenu.Item>
))}
</DropdownMenu.Content>
</DropdownMenu.Root>
<TouchableOpacity
className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between"
onPress={() => setIsModalVisible(true)}
>
<Text>{settings?.defaultAudioLanguage?.DisplayName || "None"}</Text>
<Ionicons
name="chevron-down"
size={16}
color="white"
style={{ opacity: 0.5, marginLeft: 8 }}
/>
</TouchableOpacity>
</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">
@@ -89,6 +56,7 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
/>
</View>
</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">
@@ -109,6 +77,71 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
</View>
</View>
</View>
<Modal
visible={isModalVisible}
transparent
animationType="slide"
onRequestClose={() => setIsModalVisible(false)}
>
<TouchableOpacity
className="flex-1 bg-black/50"
activeOpacity={1}
onPress={() => setIsModalVisible(false)}
>
<View className="mt-auto bg-neutral-900 rounded-t-xl">
<View className="p-4 border-b border-neutral-800">
<Text className="text-lg font-bold text-center">
Select Language
</Text>
</View>
<View className="max-h-[50%]">
<TouchableOpacity
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
updateSettings({
defaultAudioLanguage: null,
});
setIsModalVisible(false);
}}
>
<Text>None</Text>
{!settings?.defaultAudioLanguage && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
{cultures?.map((l) => (
<TouchableOpacity
key={l?.ThreeLetterISOLanguageName ?? "unknown"}
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
updateSettings({
defaultAudioLanguage: l,
});
setIsModalVisible(false);
}}
>
<Text>{l.DisplayName}</Text>
{settings?.defaultAudioLanguage
?.ThreeLetterISOLanguageName ===
l.ThreeLetterISOLanguageName && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
))}
</View>
<TouchableOpacity
className="p-4 border-t border-neutral-800"
onPress={() => setIsModalVisible(false)}
>
<Text className="text-center text-purple-400">Cancel</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
</View>
);
};

117
components/settings/SettingToggles.tsx
View File

@@ -1,17 +1,18 @@
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import { useSettings } from "@/utils/atoms/settings";
import { Ionicons } from "@expo/vector-icons";
import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useAtom } from "jotai";
import React, { useState } from "react";
import {
Linking,
Modal,
Switch,
TouchableOpacity,
View,
ViewProps,
} from "react-native";
import * as DropdownMenu from "zeego/dropdown-menu";
import { Button } from "../Button";
import { Input } from "../common/Input";
import { Text } from "../common/Text";
@@ -21,7 +22,6 @@ import { JellyseerrSettings } from "./Jellyseerr";
import { MediaProvider } from "./MediaContext";
import { MediaToggles } from "./MediaToggles";
import { SubtitleToggles } from "./SubtitleToggles";
interface Props extends ViewProps {}
export const SettingToggles: React.FC<Props> = ({ ...props }) => {
@@ -31,6 +31,8 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
const [user] = useAtom(userAtom);
const [marlinUrl, setMarlinUrl] = useState<string>("");
const queryClient = useQueryClient();
const [isSearchEngineModalVisible, setIsSearchEngineModalVisible] =
useState(false);
const {
data: mediaListCollections,
@@ -54,6 +56,13 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
staleTime: 0,
});
type SearchEngine = "Jellyfin" | "Marlin";
const searchEngines: Array<{ id: SearchEngine; name: string }> = [
{ id: "Jellyfin", name: "Jellyfin" },
{ id: "Marlin", name: "Marlin" },
];
if (!settings) return null;
return (
@@ -183,54 +192,27 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
</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-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>
<TouchableOpacity
className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between"
onPress={() => setIsSearchEngineModalVisible(true)}
>
<Text>{settings.searchEngine}</Text>
<Ionicons
name="chevron-down"
size={16}
color="white"
style={{ opacity: 0.5, marginLeft: 8 }}
/>
</TouchableOpacity>
</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">
@@ -269,6 +251,55 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
</View>
)}
</View>
<Modal
visible={isSearchEngineModalVisible}
transparent
animationType="slide"
onRequestClose={() => setIsSearchEngineModalVisible(false)}
>
<TouchableOpacity
className="flex-1 bg-black/50"
activeOpacity={1}
onPress={() => setIsSearchEngineModalVisible(false)}
>
<View className="mt-auto bg-neutral-900 rounded-t-xl">
<View className="p-4 border-b border-neutral-800">
<Text className="text-lg font-bold text-center">
Select Search Engine
</Text>
</View>
<View className="max-h-[50%]">
{searchEngines.map((engine) => (
<TouchableOpacity
key={engine.id}
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
updateSettings({
searchEngine: engine.id,
});
queryClient.invalidateQueries({ queryKey: ["search"] });
setIsSearchEngineModalVisible(false);
}}
>
<Text>{engine.name}</Text>
{settings.searchEngine === engine.id && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
))}
</View>
<TouchableOpacity
className="p-4 border-t border-neutral-800"
onPress={() => setIsSearchEngineModalVisible(false)}
>
<Text className="text-center text-purple-400">Cancel</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
</View>
</View>
<JellyseerrSettings />

239
components/settings/SubtitleToggles.tsx
View File

@@ -1,9 +1,10 @@
import { TouchableOpacity, View, ViewProps } from "react-native";
import * as DropdownMenu from "zeego/dropdown-menu";
import { Ionicons } from "@expo/vector-icons";
import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
import { useState } from "react";
import { Modal, TouchableOpacity, View, ViewProps } from "react-native";
import { Switch } from "react-native-gesture-handler";
import { Text } from "../common/Text";
import { useMedia } from "./MediaContext";
import { Switch } from "react-native-gesture-handler";
import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
interface Props extends ViewProps {}
@@ -11,6 +12,9 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
const media = useMedia();
const { settings, updateSettings } = media;
const cultures = media.cultures;
const [isLanguageModalVisible, setIsLanguageModalVisible] = useState(false);
const [isModeModalVisible, setIsModeModalVisible] = useState(false);
if (!settings) return null;
const subtitleModes = [
@@ -24,69 +28,31 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
return (
<View>
<Text className="text-lg font-bold mb-2">Subtitle</Text>
<View className="flex flex-col rounded-xl mb-4 overflow-hidden divide-y-2 divide-solid divide-neutral-800">
<View
className={`
flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
`}
>
<View className="flex flex-col rounded-xl mb-4 overflow-hidden divide-y-2 divide-solid divide-neutral-800">
<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">Subtitle language</Text>
<Text className="text-xs opacity-50">
Choose a default subtitle language.
</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?.defaultSubtitleLanguage?.DisplayName || "None"}
</Text>
</TouchableOpacity>
</DropdownMenu.Trigger>
<DropdownMenu.Content
loop={true}
side="bottom"
align="start"
alignOffset={0}
avoidCollisions={true}
collisionPadding={8}
sideOffset={8}
>
<DropdownMenu.Label>Languages</DropdownMenu.Label>
<DropdownMenu.Item
key={"none-subs"}
onSelect={() => {
updateSettings({
defaultSubtitleLanguage: null,
});
}}
>
<DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
</DropdownMenu.Item>
{cultures?.map((l) => (
<DropdownMenu.Item
key={l?.ThreeLetterISOLanguageName ?? "unknown"}
onSelect={() => {
updateSettings({
defaultSubtitleLanguage: l,
});
}}
>
<DropdownMenu.ItemTitle>
{l.DisplayName}
</DropdownMenu.ItemTitle>
</DropdownMenu.Item>
))}
</DropdownMenu.Content>
</DropdownMenu.Root>
<TouchableOpacity
className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between"
onPress={() => setIsLanguageModalVisible(true)}
>
<Text>
{settings?.defaultSubtitleLanguage?.DisplayName || "None"}
</Text>
<Ionicons
name="chevron-down"
size={16}
color="white"
style={{ opacity: 0.5, marginLeft: 8 }}
/>
</TouchableOpacity>
</View>
<View
className={`
flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
`}
>
<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">Subtitle Mode</Text>
<Text className="text-xs opacity-50 mr-2">
@@ -95,36 +61,18 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
multiple options are available.
</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?.subtitleMode || "Loading"}</Text>
</TouchableOpacity>
</DropdownMenu.Trigger>
<DropdownMenu.Content
loop={true}
side="bottom"
align="start"
alignOffset={0}
avoidCollisions={true}
collisionPadding={8}
sideOffset={8}
>
<DropdownMenu.Label>Subtitle Mode</DropdownMenu.Label>
{subtitleModes?.map((l) => (
<DropdownMenu.Item
key={l}
onSelect={() => {
updateSettings({
subtitleMode: l,
});
}}
>
<DropdownMenu.ItemTitle>{l}</DropdownMenu.ItemTitle>
</DropdownMenu.Item>
))}
</DropdownMenu.Content>
</DropdownMenu.Root>
<TouchableOpacity
className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between"
onPress={() => setIsModeModalVisible(true)}
>
<Text>{settings?.subtitleMode || "Loading"}</Text>
<Ionicons
name="chevron-down"
size={16}
color="white"
style={{ opacity: 0.5, marginLeft: 8 }}
/>
</TouchableOpacity>
</View>
<View className="flex flex-col">
@@ -186,6 +134,119 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
</View>
</View>
</View>
<Modal
visible={isLanguageModalVisible}
transparent
animationType="slide"
onRequestClose={() => setIsLanguageModalVisible(false)}
>
<TouchableOpacity
className="flex-1 bg-black/50"
activeOpacity={1}
onPress={() => setIsLanguageModalVisible(false)}
>
<View className="mt-auto bg-neutral-900 rounded-t-xl">
<View className="p-4 border-b border-neutral-800">
<Text className="text-lg font-bold text-center">
Select Language
</Text>
</View>
<View className="max-h-[50%]">
<TouchableOpacity
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
updateSettings({
defaultSubtitleLanguage: null,
});
setIsLanguageModalVisible(false);
}}
>
<Text>None</Text>
{!settings?.defaultSubtitleLanguage && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
{cultures?.map((l) => (
<TouchableOpacity
key={l?.ThreeLetterISOLanguageName ?? "unknown"}
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
updateSettings({
defaultSubtitleLanguage: l,
});
setIsLanguageModalVisible(false);
}}
>
<Text>{l.DisplayName}</Text>
{settings?.defaultSubtitleLanguage
?.ThreeLetterISOLanguageName ===
l.ThreeLetterISOLanguageName && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
))}
</View>
<TouchableOpacity
className="p-4 border-t border-neutral-800"
onPress={() => setIsLanguageModalVisible(false)}
>
<Text className="text-center text-purple-400">Cancel</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
{/* Subtitle Mode Selection Modal */}
<Modal
visible={isModeModalVisible}
transparent
animationType="slide"
onRequestClose={() => setIsModeModalVisible(false)}
>
<TouchableOpacity
className="flex-1 bg-black/50"
activeOpacity={1}
onPress={() => setIsModeModalVisible(false)}
>
<View className="mt-auto bg-neutral-900 rounded-t-xl">
<View className="p-4 border-b border-neutral-800">
<Text className="text-lg font-bold text-center">
Select Subtitle Mode
</Text>
</View>
<View className="max-h-[50%]">
{subtitleModes?.map((mode) => (
<TouchableOpacity
key={mode}
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
updateSettings({
subtitleMode: mode,
});
setIsModeModalVisible(false);
}}
>
<Text>{mode}</Text>
{settings?.subtitleMode === mode && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
))}
</View>
<TouchableOpacity
className="p-4 border-t border-neutral-800"
onPress={() => setIsModeModalVisible(false)}
>
<Text className="text-center text-purple-400">Cancel</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
</View>
);
};

1
components/video-player/controls/EpisodeList.tsx
View File

@@ -19,7 +19,6 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
import { atom, useAtom } from "jotai";
import { useEffect, useMemo, useRef, useState } from "react";
import { TouchableOpacity, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
type Props = {
item: BaseItemDto;

225
components/video-player/controls/dropdown/DropdownViewDirect.tsx
View File

@@ -1,13 +1,13 @@
import React, { useMemo, useState } from "react";
import { View, TouchableOpacity } from "react-native";
import { View, TouchableOpacity, Modal } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import * as DropdownMenu from "zeego/dropdown-menu";
import { useControlContext } from "../contexts/ControlContext";
import { useVideoContext } from "../contexts/VideoContext";
import { EmbeddedSubtitle, ExternalSubtitle } from "../types";
import { useAtomValue } from "jotai";
import { apiAtom } from "@/providers/JellyfinProvider";
import { router, useLocalSearchParams } from "expo-router";
import { Text } from "@/components/common/Text";
interface DropdownViewDirectProps {
showControls: boolean;
@@ -16,6 +16,11 @@ interface DropdownViewDirectProps {
const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
showControls,
}) => {
const [isMainModalVisible, setIsMainModalVisible] = useState(false);
const [activeSubMenu, setActiveSubMenu] = useState<
"subtitle" | "audio" | null
>(null);
const api = useAtomValue(apiAtom);
const ControlContext = useControlContext();
const mediaSource = ControlContext?.mediaSource;
@@ -51,12 +56,10 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
deliveryUrl: s.DeliveryUrl,
})) || [];
// Combine embedded subs with external subs only if not offline
return [...embeddedSubs, ...externalSubs] as (
| EmbeddedSubtitle
| ExternalSubtitle
)[];
return embeddedSubs as EmbeddedSubtitle[];
}, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams]);
const { subtitleIndex, audioIndex } = useLocalSearchParams<{
@@ -67,87 +70,143 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
bitrateValue: string;
}>();
const closeAllModals = () => {
setIsMainModalVisible(false);
setActiveSubMenu(null);
};
const MenuOption = ({
label,
onPress,
}: {
label: string;
onPress: () => void;
}) => (
<TouchableOpacity
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={onPress}
>
<Text>{label}</Text>
<Ionicons name="chevron-forward" size={20} color="white" />
</TouchableOpacity>
);
return (
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
<Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
</TouchableOpacity>
</DropdownMenu.Trigger>
<DropdownMenu.Content
loop={true}
side="bottom"
align="start"
alignOffset={0}
avoidCollisions={true}
collisionPadding={8}
sideOffset={8}
<>
<TouchableOpacity
className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
onPress={() => setIsMainModalVisible(true)}
>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger key="subtitle-trigger">
Subtitle
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
alignOffset={-10}
avoidCollisions={true}
collisionPadding={0}
loop={true}
sideOffset={10}
>
{allSubtitleTracksForDirectPlay?.map((sub, idx: number) => (
<DropdownMenu.CheckboxItem
key={`subtitle-item-${idx}`}
value={subtitleIndex === sub.index.toString()}
onValueChange={() => {
if ("deliveryUrl" in sub && sub.deliveryUrl) {
setSubtitleURL &&
setSubtitleURL(api?.basePath + sub.deliveryUrl, sub.name);
} else {
setSubtitleTrack && setSubtitleTrack(sub.index);
}
router.setParams({
subtitleIndex: sub.index.toString(),
});
}}
>
<DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
{sub.name}
</DropdownMenu.ItemTitle>
</DropdownMenu.CheckboxItem>
))}
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger key="audio-trigger">
Audio
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
alignOffset={-10}
avoidCollisions={true}
collisionPadding={0}
loop={true}
sideOffset={10}
>
{audioTracks?.map((track, idx: number) => (
<DropdownMenu.CheckboxItem
key={`audio-item-${idx}`}
value={audioIndex === track.index.toString()}
onValueChange={() => {
setAudioTrack && setAudioTrack(track.index);
router.setParams({
audioIndex: track.index.toString(),
});
}}
>
<DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
{track.name}
</DropdownMenu.ItemTitle>
</DropdownMenu.CheckboxItem>
))}
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
</DropdownMenu.Content>
</DropdownMenu.Root>
<Ionicons name="ellipsis-horizontal" size={24} color="white" />
</TouchableOpacity>
<Modal
visible={isMainModalVisible}
transparent
animationType="slide"
onRequestClose={closeAllModals}
>
<TouchableOpacity
className="flex-1 bg-black/50"
activeOpacity={1}
onPress={closeAllModals}
>
<View className="mt-auto bg-neutral-900 rounded-t-xl">
{!activeSubMenu ? (
<>
<View className="p-4 border-b border-neutral-800">
<Text className="text-lg font-bold text-center">
Settings
</Text>
</View>
<View>
<MenuOption
label="Subtitle"
onPress={() => setActiveSubMenu("subtitle")}
/>
<MenuOption
label="Audio"
onPress={() => setActiveSubMenu("audio")}
/>
</View>
</>
) : activeSubMenu === "subtitle" ? (
<>
<View className="p-4 border-b border-neutral-800 flex-row items-center">
<TouchableOpacity onPress={() => setActiveSubMenu(null)}>
<Ionicons name="chevron-back" size={24} color="white" />
</TouchableOpacity>
<Text className="text-lg font-bold ml-2">Subtitle</Text>
</View>
<View className="max-h-[50%]">
{allSubtitleTracksForDirectPlay?.map((sub, idx) => (
<TouchableOpacity
key={`subtitle-${idx}`}
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
if ("deliveryUrl" in sub && sub.deliveryUrl) {
setSubtitleURL?.(
api?.basePath + sub.deliveryUrl,
sub.name
);
} else {
setSubtitleTrack?.(sub.index);
}
router.setParams({
subtitleIndex: sub.index.toString(),
});
closeAllModals();
}}
>
<Text>{sub.name}</Text>
{subtitleIndex === sub.index.toString() && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
))}
</View>
</>
) : (
<>
<View className="p-4 border-b border-neutral-800 flex-row items-center">
<TouchableOpacity onPress={() => setActiveSubMenu(null)}>
<Ionicons name="chevron-back" size={24} color="white" />
</TouchableOpacity>
<Text className="text-lg font-bold ml-2">Audio</Text>
</View>
<View className="max-h-[50%]">
{audioTracks?.map((track, idx) => (
<TouchableOpacity
key={`audio-${idx}`}
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
setAudioTrack?.(track.index);
router.setParams({
audioIndex: track.index.toString(),
});
closeAllModals();
}}
>
<Text>{track.name}</Text>
{audioIndex === track.index.toString() && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
))}
</View>
</>
)}
<TouchableOpacity
className="p-4 border-t border-neutral-800"
onPress={closeAllModals}
>
<Text className="text-center text-purple-400">Cancel</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
</>
);
};

255
components/video-player/controls/dropdown/DropdownViewTranscoding.tsx
View File

@@ -1,20 +1,25 @@
import React, { useCallback, useMemo, useState } from "react";
import { View, TouchableOpacity } from "react-native";
import { Text } from "@/components/common/Text";
import { apiAtom } from "@/providers/JellyfinProvider";
import { SubtitleHelper } from "@/utils/SubtitleHelper";
import { Ionicons } from "@expo/vector-icons";
import * as DropdownMenu from "zeego/dropdown-menu";
import { useLocalSearchParams, useRouter } from "expo-router";
import { useAtomValue } from "jotai";
import React, { useCallback, useMemo, useState } from "react";
import { Modal, TouchableOpacity, View } from "react-native";
import { useControlContext } from "../contexts/ControlContext";
import { useVideoContext } from "../contexts/VideoContext";
import { TranscodedSubtitle } from "../types";
import { useAtomValue } from "jotai";
import { apiAtom } from "@/providers/JellyfinProvider";
import { useLocalSearchParams, useRouter } from "expo-router";
import { SubtitleHelper } from "@/utils/SubtitleHelper";
interface DropdownViewProps {
showControls: boolean;
}
const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
const [isMainModalVisible, setIsMainModalVisible] = useState(false);
const [activeSubMenu, setActiveSubMenu] = useState<
"subtitle" | "audio" | null
>(null);
const router = useRouter();
const api = useAtomValue(apiAtom);
const ControlContext = useControlContext();
@@ -116,6 +121,27 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
[mediaSource, subtitleIndex, audioIndex]
);
const closeAllModals = () => {
setIsMainModalVisible(false);
setActiveSubMenu(null);
};
const MenuOption = ({
label,
onPress,
}: {
label: string;
onPress: () => void;
}) => (
<TouchableOpacity
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={onPress}
>
<Text>{label}</Text>
<Ionicons name="chevron-forward" size={20} color="white" />
</TouchableOpacity>
);
return (
<View
style={{
@@ -125,108 +151,135 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
}}
className="p-4"
>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
<Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
</TouchableOpacity>
</DropdownMenu.Trigger>
<DropdownMenu.Content
loop={true}
side="bottom"
align="start"
alignOffset={0}
avoidCollisions={true}
collisionPadding={8}
sideOffset={8}
<TouchableOpacity
className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
onPress={() => setIsMainModalVisible(true)}
>
<Ionicons name="ellipsis-horizontal" size={24} color="white" />
</TouchableOpacity>
<Modal
visible={isMainModalVisible}
transparent
animationType="slide"
onRequestClose={closeAllModals}
>
<TouchableOpacity
className="flex-1 bg-black/50"
activeOpacity={1}
onPress={closeAllModals}
>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger key="subtitle-trigger">
Subtitle
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
alignOffset={-10}
avoidCollisions={true}
collisionPadding={0}
loop={true}
sideOffset={10}
>
{allSubtitleTracksForTranscodingStream?.map(
(sub, idx: number) => (
<DropdownMenu.CheckboxItem
value={
subtitleIndex ===
(isOnTextSubtitle && sub.IsTextSubtitleStream
? subtitleHelper
<View className="mt-auto bg-neutral-900 rounded-t-xl">
{!activeSubMenu ? (
<>
<View className="p-4 border-b border-neutral-800">
<Text className="text-lg font-bold text-center">
Settings
</Text>
</View>
<View>
<MenuOption
label="Subtitle"
onPress={() => setActiveSubMenu("subtitle")}
/>
<MenuOption
label="Audio"
onPress={() => setActiveSubMenu("audio")}
/>
</View>
</>
) : activeSubMenu === "subtitle" ? (
<>
<View className="p-4 border-b border-neutral-800 flex-row items-center">
<TouchableOpacity onPress={() => setActiveSubMenu(null)}>
<Ionicons name="chevron-back" size={24} color="white" />
</TouchableOpacity>
<Text className="text-lg font-bold ml-2">Subtitle</Text>
</View>
<View className="max-h-[50%]">
{allSubtitleTracksForTranscodingStream?.map((sub, idx) => (
<TouchableOpacity
key={`subtitle-${idx}`}
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
if (
subtitleIndex ===
(isOnTextSubtitle && sub.IsTextSubtitleStream
? subtitleHelper
.getSourceSubtitleIndex(sub.index)
.toString()
: sub?.index.toString())
)
return;
router.setParams({
subtitleIndex: subtitleHelper
.getSourceSubtitleIndex(sub.index)
.toString()
: sub?.index.toString())
}
key={`subtitle-item-${idx}`}
onValueChange={() => {
if (
subtitleIndex ===
.toString(),
});
if (sub.IsTextSubtitleStream && isOnTextSubtitle) {
setSubtitleTrack && setSubtitleTrack(sub.index);
} else {
changeToImageBasedSub(sub.index);
}
closeAllModals();
}}
>
<Text>{sub.name}</Text>
{subtitleIndex ===
(isOnTextSubtitle && sub.IsTextSubtitleStream
? subtitleHelper
.getSourceSubtitleIndex(sub.index)
.toString()
: sub?.index.toString())
)
return;
: sub?.index.toString()) && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
))}
</View>
</>
) : (
<>
<View className="p-4 border-b border-neutral-800 flex-row items-center">
<TouchableOpacity onPress={() => setActiveSubMenu(null)}>
<Ionicons name="chevron-back" size={24} color="white" />
</TouchableOpacity>
<Text className="text-lg font-bold ml-2">Audio</Text>
</View>
<View className="max-h-[50%]">
{allAudio?.map((track, idx) => (
<TouchableOpacity
key={`audio-${idx}`}
className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
onPress={() => {
if (audioIndex === track.index.toString()) return;
router.setParams({
audioIndex: track.index.toString(),
});
ChangeTranscodingAudio(track.index);
closeAllModals();
}}
>
<Text>{track.name}</Text>
{audioIndex === track.index.toString() && (
<Ionicons name="checkmark" size={24} color="white" />
)}
</TouchableOpacity>
))}
</View>
</>
)}
router.setParams({
subtitleIndex: subtitleHelper
.getSourceSubtitleIndex(sub.index)
.toString(),
});
if (sub.IsTextSubtitleStream && isOnTextSubtitle) {
setSubtitleTrack && setSubtitleTrack(sub.index);
return;
}
changeToImageBasedSub(sub.index);
}}
>
<DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
{sub.name}
</DropdownMenu.ItemTitle>
</DropdownMenu.CheckboxItem>
)
)}
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger key="audio-trigger">
Audio
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
alignOffset={-10}
avoidCollisions={true}
collisionPadding={0}
loop={true}
sideOffset={10}
<TouchableOpacity
className="p-4 border-t border-neutral-800"
onPress={closeAllModals}
>
{allAudio?.map((track, idx: number) => (
<DropdownMenu.CheckboxItem
key={`audio-item-${idx}`}
value={audioIndex === track.index.toString()}
onValueChange={() => {
if (audioIndex === track.index.toString()) return;
router.setParams({
audioIndex: track.index.toString(),
});
ChangeTranscodingAudio(track.index);
}}
>
<DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
{track.name}
</DropdownMenu.ItemTitle>
</DropdownMenu.CheckboxItem>
))}
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
</DropdownMenu.Content>
</DropdownMenu.Root>
<Text className="text-center text-purple-400">Cancel</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
</View>
);
};

108
hooks/useImageColors.ts
View File

@@ -1,108 +0,0 @@
import { apiAtom } from "@/providers/JellyfinProvider";
import {
adjustToNearBlack,
calculateTextColor,
isCloseToBlack,
itemThemeColorAtom,
} from "@/utils/atoms/primaryColor";
import { getItemImage } from "@/utils/getItemImage";
import { storage } from "@/utils/mmkv";
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
import { useAtom, useAtomValue } from "jotai";
import { useEffect, useMemo } from "react";
import { getColors } from "react-native-image-colors";
/**
* Custom hook to extract and manage image colors for a given item.
*
* @param item - The BaseItemDto object representing the item.
* @param disabled - A boolean flag to disable color extraction.
*
*/
export const useImageColors = ({
item,
url,
disabled,
}: {
item?: BaseItemDto | null;
url?: string | null;
disabled?: boolean;
}) => {
const api = useAtomValue(apiAtom);
const [, setPrimaryColor] = useAtom(itemThemeColorAtom);
const source = useMemo(() => {
if (!api) return;
if (url) return { uri: url };
else if (item)
return getItemImage({
item,
api,
variant: "Primary",
quality: 80,
width: 300,
});
else return null;
}, [api, item]);
useEffect(() => {
if (disabled) return;
if (source?.uri) {
// Check if colors are already cached in storage
const _primary = storage.getString(`${source.uri}-primary`);
const _text = storage.getString(`${source.uri}-text`);
// If colors are cached, use them and exit
if (_primary && _text) {
setPrimaryColor({
primary: _primary,
text: _text,
});
return;
}
// Extract colors from the image
getColors(source.uri, {
fallback: "#fff",
cache: false,
})
.then((colors) => {
let primary: string = "#fff";
let text: string = "#000";
let backup: string = "#fff";
// Select the appropriate color based on the platform
if (colors.platform === "android") {
primary = colors.dominant;
backup = colors.vibrant;
} else if (colors.platform === "ios") {
primary = colors.detail;
backup = colors.primary;
}
// Adjust the primary color if it's too close to black
if (primary && isCloseToBlack(primary)) {
if (backup && !isCloseToBlack(backup)) primary = backup;
primary = adjustToNearBlack(primary);
}
// Calculate the text color based on the primary color
if (primary) text = calculateTextColor(primary);
setPrimaryColor({
primary,
text,
});
// Cache the colors in storage
if (source.uri && primary) {
storage.set(`${source.uri}-primary`, primary);
storage.set(`${source.uri}-text`, text);
}
})
.catch((error) => {
console.error("Error getting colors", error);
});
}
}, [source?.uri, setPrimaryColor, disabled]);
};