mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-04-27 19:14:48 +01:00
chore: remove deps
This commit is contained in:
Fredrik Burmester
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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,4 +1,3 @@
|
||||
import { useImageColors } from "@/hooks/useImageColors";
|
||||
import { apiAtom } from "@/providers/JellyfinProvider";
|
||||
import { getItemImage } from "@/utils/getItemImage";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user