mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-05-31 19:18:26 +01:00
first commit
This commit is contained in:
Fredrik Burmester
55
app/(auth)/(tabs)/_layout.tsx
Normal file
55
app/(auth)/(tabs)/_layout.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { router, Tabs } from "expo-router";
|
||||
import React from "react";
|
||||
|
||||
import { TabBarIcon } from "@/components/navigation/TabBarIcon";
|
||||
import { Colors } from "@/constants/Colors";
|
||||
import { TouchableOpacity } from "react-native";
|
||||
import { Feather } from "@expo/vector-icons";
|
||||
|
||||
export default function TabLayout() {
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
tabBarActiveTintColor: Colors.tabIconSelected,
|
||||
headerShown: false,
|
||||
}}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
headerShown: true,
|
||||
headerStyle: { backgroundColor: "black" },
|
||||
|
||||
title: "Home",
|
||||
tabBarIcon: ({ color, focused }) => (
|
||||
<TabBarIcon
|
||||
name={focused ? "home" : "home-outline"}
|
||||
color={color}
|
||||
/>
|
||||
),
|
||||
headerRight: () => (
|
||||
<TouchableOpacity
|
||||
style={{ marginHorizontal: 17 }}
|
||||
onPress={() => {
|
||||
router.push("/(auth)/settings");
|
||||
}}
|
||||
>
|
||||
<Feather name="settings" color={"white"} size={24} />
|
||||
</TouchableOpacity>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="search"
|
||||
options={{
|
||||
headerStyle: { backgroundColor: "black" },
|
||||
headerShown: true,
|
||||
title: "Search",
|
||||
tabBarIcon: ({ color, focused }) => (
|
||||
<TabBarIcon name={focused ? "search" : "search"} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
141
app/(auth)/(tabs)/index.tsx
Normal file
141
app/(auth)/(tabs)/index.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import { Text } from "@/components/common/Text";
|
||||
import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
|
||||
import { ItemCardText } from "@/components/ItemCardText";
|
||||
import { Loading } from "@/components/Loading";
|
||||
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
|
||||
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
|
||||
import { getItemsApi, getSuggestionsApi } from "@jellyfin/sdk/lib/utils/api";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useRouter } from "expo-router";
|
||||
import { useAtom } from "jotai";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
export default function index() {
|
||||
const [api] = useAtom(apiAtom);
|
||||
const [user] = useAtom(userAtom);
|
||||
const router = useRouter();
|
||||
|
||||
const { data, isLoading, isError } = useQuery<BaseItemDto[]>({
|
||||
queryKey: ["resumeItems", api, user?.Id],
|
||||
queryFn: async () => {
|
||||
if (!api || !user?.Id) {
|
||||
return [];
|
||||
}
|
||||
const response = await getItemsApi(api).getResumeItems({
|
||||
userId: user.Id,
|
||||
});
|
||||
return response.data.Items || [];
|
||||
},
|
||||
enabled: !!api && !!user?.Id,
|
||||
staleTime: 60,
|
||||
});
|
||||
|
||||
const { data: collections } = useQuery({
|
||||
queryKey: ["collections", user?.Id],
|
||||
queryFn: async () => {
|
||||
if (!api || !user?.Id) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const data = (
|
||||
await getItemsApi(api).getItems({
|
||||
userId: user.Id,
|
||||
})
|
||||
).data;
|
||||
|
||||
return data.Items || [];
|
||||
},
|
||||
enabled: !!api && !!user?.Id,
|
||||
staleTime: 0,
|
||||
});
|
||||
|
||||
const { data: suggestions } = useQuery<BaseItemDto[]>({
|
||||
queryKey: ["suggestions", user?.Id],
|
||||
queryFn: async () => {
|
||||
if (!api || !user?.Id) {
|
||||
return [];
|
||||
}
|
||||
const response = await getSuggestionsApi(api).getSuggestions({
|
||||
userId: user.Id,
|
||||
limit: 5,
|
||||
mediaType: ["Video"],
|
||||
});
|
||||
|
||||
return response.data.Items || [];
|
||||
},
|
||||
enabled: !!api && !!user?.Id,
|
||||
staleTime: 60,
|
||||
});
|
||||
|
||||
if (isLoading)
|
||||
return (
|
||||
<View className="justify-center items-center h-full">
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
);
|
||||
|
||||
if (isError) return <Text>Error loading items</Text>;
|
||||
|
||||
if (!data || data.length === 0) return <Text>No data...</Text>;
|
||||
|
||||
return (
|
||||
<ScrollView nestedScrollEnabled>
|
||||
<View className="py-4 px-4 gap-y-2">
|
||||
<Text className="text-2xl font-bold">Continue Watching</Text>
|
||||
<ScrollView horizontal>
|
||||
<View className="flex flex-row gap-x-2">
|
||||
{data.map((item) => (
|
||||
<TouchableOpacity
|
||||
key={item.Id}
|
||||
onPress={() => router.push(`/items/${item.Id}/page`)}
|
||||
className="flex flex-col w-48"
|
||||
>
|
||||
<View>
|
||||
<ContinueWatchingPoster item={item} />
|
||||
<ItemCardText item={item} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
<Text className="text-2xl font-bold">Collections</Text>
|
||||
<ScrollView horizontal>
|
||||
<View className="flex flex-row gap-x-2">
|
||||
{collections?.map((item) => (
|
||||
<TouchableOpacity
|
||||
key={item.Id}
|
||||
onPress={() => router.push(`/collections/${item.Id}/page`)}
|
||||
className="flex flex-col w-48"
|
||||
>
|
||||
<View>
|
||||
<ContinueWatchingPoster item={item} />
|
||||
<ItemCardText item={item} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
<Text className="text-2xl font-bold">Suggestions</Text>
|
||||
<ScrollView horizontal>
|
||||
<View className="flex flex-row gap-x-2">
|
||||
{suggestions?.map((item) => (
|
||||
<TouchableOpacity
|
||||
key={item.Id}
|
||||
onPress={() => router.push(`/items/${item.Id}/page`)}
|
||||
className="flex flex-col w-48"
|
||||
>
|
||||
<ContinueWatchingPoster item={item} />
|
||||
<ItemCardText item={item} />
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
91
app/(auth)/(tabs)/search.tsx
Normal file
91
app/(auth)/(tabs)/search.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import { Input } from "@/components/common/Input";
|
||||
import { Text } from "@/components/common/Text";
|
||||
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
|
||||
import { getSearchApi } from "@jellyfin/sdk/lib/utils/api";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { router } from "expo-router";
|
||||
import { useAtom } from "jotai";
|
||||
import React, { useState } from "react";
|
||||
import { ScrollView, TouchableOpacity, View } from "react-native";
|
||||
|
||||
export default function search() {
|
||||
const [search, setSearch] = useState<string>("");
|
||||
const [totalResults, setTotalResults] = useState<number>(0);
|
||||
|
||||
const [api] = useAtom(apiAtom);
|
||||
const [user] = useAtom(userAtom);
|
||||
|
||||
// useEffect(() => {
|
||||
// (async () => {
|
||||
// if (!api || search.length === 0) return;
|
||||
// const searchApi = await getSearchApi(api).getSearchHints({
|
||||
// searchTerm: search,
|
||||
// limit: 10,
|
||||
// includeItemTypes: ["Movie"],
|
||||
// });
|
||||
|
||||
// const data = searchApi.data;
|
||||
|
||||
// setTotalResults(data.TotalRecordCount || 0);
|
||||
// setData(data.SearchHints || []);
|
||||
// })();
|
||||
// }, [search]);
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ["search", search],
|
||||
queryFn: async () => {
|
||||
if (!api || !user || search.length === 0) return [];
|
||||
|
||||
const searchApi = await getSearchApi(api).getSearchHints({
|
||||
searchTerm: search,
|
||||
limit: 10,
|
||||
includeItemTypes: ["Movie"],
|
||||
});
|
||||
|
||||
return searchApi.data.SearchHints;
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<View className="p-4">
|
||||
<View className="mb-4">
|
||||
<Input
|
||||
placeholder="Search here..."
|
||||
value={search}
|
||||
onChangeText={(text) => setSearch(text)}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<ScrollView>
|
||||
<View className="rounded-xl overflow-hidden">
|
||||
{data?.map((item, index) => (
|
||||
<RenderItem item={item} key={index} />
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
type RenderItemProps = {
|
||||
item: BaseItemDto;
|
||||
};
|
||||
|
||||
const RenderItem: React.FC<RenderItemProps> = ({ item }) => {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push(`/(auth)/items/${item.Id}/page`)}
|
||||
className="flex flex-row items-center justify-between p-4 bg-neutral-900 border-neutral-800"
|
||||
>
|
||||
<View className="flex flex-col">
|
||||
<Text className="font-bold">{item.Name}</Text>
|
||||
{item.Type === "Movie" && (
|
||||
<Text className="opacity-50">{item.ProductionYear}</Text>
|
||||
)}
|
||||
</View>
|
||||
<Ionicons name="arrow-forward" size={24} color="white" />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
191
app/(auth)/collections/[collection]/page.tsx
Normal file
191
app/(auth)/collections/[collection]/page.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import { Text } from "@/components/common/Text";
|
||||
import { Loading } from "@/components/Loading";
|
||||
import MoviePoster from "@/components/MoviePoster";
|
||||
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
|
||||
import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import { useAtom } from "jotai";
|
||||
import { useMemo, useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
const page: React.FC = () => {
|
||||
const searchParams = useLocalSearchParams();
|
||||
const { collection: collectionId } = searchParams as { collection: string };
|
||||
|
||||
const [api] = useAtom(apiAtom);
|
||||
const [user] = useAtom(userAtom);
|
||||
|
||||
const { data: collection } = useQuery({
|
||||
queryKey: ["collection", collectionId],
|
||||
queryFn: async () => {
|
||||
if (!api || !user?.Id) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const data = (
|
||||
await getItemsApi(api).getItems({
|
||||
userId: user.Id,
|
||||
})
|
||||
).data;
|
||||
|
||||
console.log(data.Items?.find((item) => item.Id == collectionId));
|
||||
|
||||
return data.Items?.find((item) => item.Id == collectionId);
|
||||
},
|
||||
enabled: !!api && !!user?.Id,
|
||||
staleTime: 0,
|
||||
});
|
||||
|
||||
const [startIndex, setStartIndex] = useState<number>(0);
|
||||
|
||||
const { data, isLoading, isError } = useQuery<{
|
||||
Items: BaseItemDto[];
|
||||
TotalRecordCount: number;
|
||||
}>({
|
||||
queryKey: ["collection-items", collectionId, startIndex],
|
||||
queryFn: async () => {
|
||||
if (!api) return [];
|
||||
|
||||
const response = await api.axiosInstance.get(
|
||||
`${api.basePath}/Users/${user?.Id}/Items`,
|
||||
{
|
||||
params: {
|
||||
SortBy:
|
||||
collection?.CollectionType === "movies"
|
||||
? "SortName,ProductionYear"
|
||||
: "SortName",
|
||||
SortOrder: "Ascending",
|
||||
IncludeItemTypes:
|
||||
collection?.CollectionType === "movies" ? "Movie" : "Series",
|
||||
Recursive: true,
|
||||
Fields:
|
||||
collection?.CollectionType === "movies"
|
||||
? "PrimaryImageAspectRatio,MediaSourceCount"
|
||||
: "PrimaryImageAspectRatio",
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
|
||||
ParentId: collectionId,
|
||||
Limit: 100,
|
||||
StartIndex: startIndex,
|
||||
},
|
||||
headers: {
|
||||
Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
return response.data || [];
|
||||
},
|
||||
enabled: !!collection && !!api,
|
||||
});
|
||||
|
||||
const totalItems = useMemo(() => {
|
||||
return data?.TotalRecordCount;
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<ScrollView>
|
||||
<View>
|
||||
<View className="px-4 mb-4">
|
||||
<Text className="font-bold text-3xl mb-2">{collection?.Name}</Text>
|
||||
<View className="flex flex-row items-center justify-between">
|
||||
<Text>
|
||||
{startIndex + 1}-{startIndex + 100} of {totalItems}
|
||||
</Text>
|
||||
<View className="flex flex-row items-center space-x-2">
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
setStartIndex((prev) => Math.max(prev - 100, 0));
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name="arrow-back-circle-outline"
|
||||
size={32}
|
||||
color="white"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
setStartIndex((prev) => prev + 100);
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name="arrow-forward-circle-outline"
|
||||
size={32}
|
||||
color="white"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{isLoading ? (
|
||||
<View className="my-12">
|
||||
<ActivityIndicator color={"white"} />
|
||||
</View>
|
||||
) : (
|
||||
<View className="flex flex-row flex-wrap">
|
||||
{data?.Items?.map((item: any, index: number) => (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
maxWidth: "33%",
|
||||
width: "100%",
|
||||
padding: 10,
|
||||
}}
|
||||
key={index}
|
||||
onPress={() => {
|
||||
if (collection?.CollectionType === "movies") {
|
||||
router.push(`/items/${item.Id}/page`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<View className="flex flex-col gap-y-2">
|
||||
<MoviePoster item={item} />
|
||||
<Text>{item.Name}</Text>
|
||||
<Text className="opacity-50 text-xs">
|
||||
{item.ProductionYear}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
{!isLoading && (
|
||||
<View className="flex flex-row items-center space-x-2 justify-center mt-4 mb-12">
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
setStartIndex((prev) => Math.max(prev - 100, 0));
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name="arrow-back-circle-outline"
|
||||
size={32}
|
||||
color="white"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
setStartIndex((prev) => prev + 100);
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name="arrow-forward-circle-outline"
|
||||
size={32}
|
||||
color="white"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
136
app/(auth)/items/[id]/page.tsx
Normal file
136
app/(auth)/items/[id]/page.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import { Text } from "@/components/common/Text";
|
||||
import { DownloadItem } from "@/components/DownloadItem";
|
||||
import { SimilarItems } from "@/components/SimilarItems";
|
||||
import { VideoPlayer } from "@/components/VideoPlayer";
|
||||
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
|
||||
import { getBackdrop, getStreamUrl, getUserItemData } from "@/utils/jellyfin";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import {} from "@jellyfin/sdk/lib/utils/url";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Image } from "expo-image";
|
||||
import { Stack, useLocalSearchParams, useNavigation } from "expo-router";
|
||||
import { useAtom } from "jotai";
|
||||
import { useEffect } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Dimensions,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
const page: React.FC = () => {
|
||||
const local = useLocalSearchParams();
|
||||
const { id } = local as { id: string };
|
||||
|
||||
const [api] = useAtom(apiAtom);
|
||||
const [user] = useAtom(userAtom);
|
||||
|
||||
const navigation = useNavigation();
|
||||
|
||||
const { data: item, isLoading: l1 } = useQuery({
|
||||
queryKey: ["item", id],
|
||||
queryFn: async () =>
|
||||
await getUserItemData({
|
||||
api,
|
||||
userId: user?.Id,
|
||||
itemId: id,
|
||||
}),
|
||||
enabled: !!id && !!api,
|
||||
staleTime: Infinity,
|
||||
});
|
||||
|
||||
const screenWidth = Dimensions.get("window").width;
|
||||
|
||||
const { data: playbackURL, isLoading: l2 } = useQuery({
|
||||
queryKey: ["playbackUrl", id],
|
||||
queryFn: async () => {
|
||||
if (!api || !user?.Id) return;
|
||||
return await getStreamUrl({
|
||||
api,
|
||||
userId: user.Id,
|
||||
item,
|
||||
startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
|
||||
});
|
||||
},
|
||||
enabled: !!id && !!api && !!user?.Id && !!item,
|
||||
staleTime: Infinity,
|
||||
});
|
||||
|
||||
const { data: url } = useQuery({
|
||||
queryKey: ["backdrop", item?.Id],
|
||||
queryFn: async () => getBackdrop(api, item),
|
||||
enabled: !!api && !!item?.Id,
|
||||
staleTime: Infinity,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
navigation.setOptions({
|
||||
headerRight: () => {
|
||||
<Ionicons name="accessibility" />;
|
||||
},
|
||||
});
|
||||
}, [item, playbackURL, navigation]);
|
||||
|
||||
const { data: posterUrl } = useQuery({
|
||||
queryKey: ["backdrop", item?.Id],
|
||||
queryFn: async () => getBackdrop(api, item),
|
||||
enabled: !!api && !!item?.Id,
|
||||
staleTime: Infinity,
|
||||
});
|
||||
|
||||
if (l1 || l2)
|
||||
return (
|
||||
<View className="justify-center items-center h-full">
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
);
|
||||
|
||||
if (!item?.Id) return null;
|
||||
if (!playbackURL) return null;
|
||||
|
||||
return (
|
||||
<ScrollView style={[{ flex: 1 }]}>
|
||||
{posterUrl && (
|
||||
<View className="p-4 rounded-xl overflow-hidden ">
|
||||
<Image
|
||||
source={{ uri: posterUrl }}
|
||||
className="w-full aspect-video rounded-xl overflow-hidden border border-neutral-800"
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
<View className="flex flex-col text-center px-4 mb-4">
|
||||
<View className="flex flex-col">
|
||||
{item.Type === "Episode" ? (
|
||||
<>
|
||||
<Text className="text-center opacity-50">{item?.SeriesName}</Text>
|
||||
<Text className="text-center font-bold text-2xl">
|
||||
{item?.Name}
|
||||
</Text>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text className="text-center font-bold text-2xl">
|
||||
{item?.Name}
|
||||
</Text>
|
||||
<Text className="text-center opacity-50">
|
||||
{item?.ProductionYear}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className="justify-center items-center w-full my-4">
|
||||
{playbackURL && <DownloadItem item={item} url={playbackURL} />}
|
||||
</View>
|
||||
<Text>{item.Overview}</Text>
|
||||
</View>
|
||||
<View className="flex flex-col p-4">
|
||||
<VideoPlayer itemId={item.Id} />
|
||||
</View>
|
||||
<SimilarItems itemId={item.Id} />
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
22
app/(auth)/player/offline/page.tsx
Normal file
22
app/(auth)/player/offline/page.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { OfflineVideoPlayer } from "@/components/OfflineVideoPlayer";
|
||||
import * as FileSystem from "expo-file-system";
|
||||
import { useLocalSearchParams } from "expo-router";
|
||||
import { useMemo } from "react";
|
||||
import { View } from "react-native";
|
||||
|
||||
export default function page() {
|
||||
const searchParams = useLocalSearchParams();
|
||||
const { itemId, url } = searchParams as { itemId: string; url: string };
|
||||
|
||||
const fileUrl = useMemo(() => {
|
||||
return FileSystem.documentDirectory + url;
|
||||
}, [url]);
|
||||
|
||||
if (!fileUrl) return null;
|
||||
|
||||
return (
|
||||
<View className="h-screen w-screen items-center justify-center">
|
||||
{url && <OfflineVideoPlayer url={fileUrl} />}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
172
app/(auth)/settings.tsx
Normal file
172
app/(auth)/settings.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
import { Button } from "@/components/Button";
|
||||
import { Text } from "@/components/common/Text";
|
||||
import { runningProcesses } from "@/components/DownloadItem";
|
||||
import { ListItem } from "@/components/ListItem";
|
||||
import ProgressCircle from "@/components/ProgressCircle";
|
||||
import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import * as FileSystem from "expo-file-system";
|
||||
import { useRouter } from "expo-router";
|
||||
import { FFmpegKit } from "ffmpeg-kit-react-native";
|
||||
import { useAtom } from "jotai";
|
||||
import { useEffect, useState } from "react";
|
||||
import { TouchableOpacity, View } from "react-native";
|
||||
|
||||
const deleteAllFiles = async () => {
|
||||
const directoryUri = FileSystem.documentDirectory;
|
||||
|
||||
try {
|
||||
const fileNames = await FileSystem.readDirectoryAsync(directoryUri!);
|
||||
for (let item of fileNames) {
|
||||
await FileSystem.deleteAsync(`${directoryUri}/${item}`);
|
||||
}
|
||||
|
||||
AsyncStorage.removeItem("downloaded_files");
|
||||
} catch (error) {
|
||||
console.error("Failed to delete the directory:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteFile = async (id: string | null | undefined) => {
|
||||
if (!id) return;
|
||||
|
||||
FileSystem.deleteAsync(`${FileSystem.documentDirectory}/${id}.mp4`).catch(
|
||||
(err) => console.error(err)
|
||||
);
|
||||
|
||||
AsyncStorage.setItem(
|
||||
"downloaded_files",
|
||||
JSON.stringify([
|
||||
JSON.parse(
|
||||
(await AsyncStorage.getItem("downloaded_files")) || "[]"
|
||||
).filter((f: string) => f !== id),
|
||||
])
|
||||
);
|
||||
};
|
||||
|
||||
const listDownloadedFiles = async () => {
|
||||
const directoryUri = FileSystem.documentDirectory; // Directory where files are stored
|
||||
|
||||
try {
|
||||
const fileNames = await FileSystem.readDirectoryAsync(directoryUri!);
|
||||
return fileNames; // This will be an array of file names in the directory
|
||||
} catch (error) {
|
||||
console.error("Failed to read the directory:", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export default function settings() {
|
||||
const { logout } = useJellyfin();
|
||||
|
||||
const [api] = useAtom(apiAtom);
|
||||
const [user] = useAtom(userAtom);
|
||||
|
||||
const [files, setFiles] = useState<BaseItemDto[]>([]);
|
||||
const [key, setKey] = useState(0);
|
||||
|
||||
const [session, setSession] = useAtom(runningProcesses);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [activeProcess] = useAtom(runningProcesses);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const data = JSON.parse(
|
||||
(await AsyncStorage.getItem("downloaded_files")) || "[]"
|
||||
) as BaseItemDto[];
|
||||
|
||||
setFiles(data);
|
||||
})();
|
||||
}, [key]);
|
||||
|
||||
return (
|
||||
<View className="p-4 flex flex-col gap-y-4">
|
||||
<Text className="font-bold text-2xl">Information</Text>
|
||||
|
||||
<View className="rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-neutral-900">
|
||||
<ListItem title="User" subTitle={user?.Name} />
|
||||
<ListItem title="Server" subTitle={api?.basePath} />
|
||||
</View>
|
||||
<Button onPress={logout}>Log out</Button>
|
||||
|
||||
<View className="mb-4">
|
||||
<Text className="font-bold text-2xl">Downloads</Text>
|
||||
|
||||
{files.length > 0 ? (
|
||||
<View>
|
||||
{files.map((file) => (
|
||||
<TouchableOpacity
|
||||
key={file.Id}
|
||||
className="rounded-xl overflow-hidden"
|
||||
onPress={() => {
|
||||
router.back();
|
||||
router.push(
|
||||
`/(auth)/player/offline/page?url=${file.Id}.mp4&itemId=${file.Id}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
<ListItem
|
||||
title={file.Name}
|
||||
subTitle={file.ProductionYear?.toString()}
|
||||
iconAfter={
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
deleteFile(file.Id);
|
||||
setKey((prevKey) => prevKey + 1);
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name="close-circle-outline"
|
||||
size={24}
|
||||
color="white"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
) : activeProcess ? (
|
||||
<ListItem
|
||||
title={activeProcess.item.Name}
|
||||
iconAfter={
|
||||
<ProgressCircle
|
||||
size={22}
|
||||
fill={activeProcess.progress}
|
||||
width={3}
|
||||
tintColor="#3498db"
|
||||
backgroundColor="#bdc3c7"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Text className="opacity-50">No downloaded files</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Button
|
||||
onPress={() => {
|
||||
deleteAllFiles();
|
||||
setKey((prevKey) => prevKey + 1);
|
||||
}}
|
||||
>
|
||||
Clear files data
|
||||
</Button>
|
||||
|
||||
{session?.item.Id && (
|
||||
<Button
|
||||
onPress={() => {
|
||||
FFmpegKit.cancel();
|
||||
setSession(null);
|
||||
}}
|
||||
>
|
||||
Cancel all downloads
|
||||
</Button>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
145
app/(public)/login.tsx
Normal file
145
app/(public)/login.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { Button } from "@/components/Button";
|
||||
import { Input } from "@/components/common/Input";
|
||||
import { Text } from "@/components/common/Text";
|
||||
import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
|
||||
import { useAtom } from "jotai";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { KeyboardAvoidingView, Platform, View } from "react-native";
|
||||
|
||||
import { z } from "zod";
|
||||
|
||||
const CredentialsSchema = z.object({
|
||||
username: z.string().min(1, "Username is required"),
|
||||
password: z.string().min(1, "Password is required"),
|
||||
});
|
||||
|
||||
const Login: React.FC = () => {
|
||||
const { setServer, login, removeServer } = useJellyfin();
|
||||
const [api] = useAtom(apiAtom);
|
||||
|
||||
const [serverURL, setServerURL] = useState<string>("");
|
||||
const [credentials, setCredentials] = useState<{
|
||||
username: string;
|
||||
password: string;
|
||||
}>({
|
||||
username: "",
|
||||
password: "",
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const handleLogin = async () => {
|
||||
setLoading(true);
|
||||
const result = CredentialsSchema.safeParse(credentials);
|
||||
if (result.success) {
|
||||
await login(credentials.username, credentials.password);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const parsedServerURL = useMemo(() => {
|
||||
let parsedServerURL = serverURL.trim();
|
||||
|
||||
if (parsedServerURL) {
|
||||
parsedServerURL = parsedServerURL.endsWith("/")
|
||||
? parsedServerURL.replace("/", "")
|
||||
: parsedServerURL;
|
||||
parsedServerURL = parsedServerURL.startsWith("http")
|
||||
? parsedServerURL
|
||||
: "http://" + parsedServerURL;
|
||||
|
||||
return parsedServerURL;
|
||||
}
|
||||
|
||||
return "";
|
||||
}, [serverURL]);
|
||||
|
||||
const handleConnect = (url: string) => {
|
||||
setServer({ address: url });
|
||||
};
|
||||
|
||||
if (api?.basePath) {
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<View className="flex flex-col px-4 justify-center h-full gap-y-2">
|
||||
<Text className="text-3xl font-bold">Jellyfin</Text>
|
||||
<Text className="opacity-50 mb-2">Server: {api.basePath}</Text>
|
||||
<Button
|
||||
onPress={() => {
|
||||
removeServer();
|
||||
setServerURL("");
|
||||
}}
|
||||
>
|
||||
Change server
|
||||
</Button>
|
||||
<Text className="text-2xl font-bold">Log in</Text>
|
||||
<Input
|
||||
placeholder="Username"
|
||||
onChangeText={(text) =>
|
||||
setCredentials({ ...credentials, username: text })
|
||||
}
|
||||
value={credentials.username}
|
||||
autoFocus
|
||||
secureTextEntry={false}
|
||||
keyboardType="default"
|
||||
returnKeyType="done"
|
||||
autoCapitalize="none"
|
||||
textContentType="username"
|
||||
clearButtonMode="while-editing"
|
||||
maxLength={500}
|
||||
/>
|
||||
<Input
|
||||
className="mb-2"
|
||||
placeholder="Password"
|
||||
onChangeText={(text) =>
|
||||
setCredentials({ ...credentials, password: text })
|
||||
}
|
||||
value={credentials.password}
|
||||
secureTextEntry
|
||||
keyboardType="default"
|
||||
returnKeyType="done"
|
||||
autoCapitalize="none"
|
||||
textContentType="password"
|
||||
clearButtonMode="while-editing"
|
||||
maxLength={500}
|
||||
/>
|
||||
<Button onPress={handleLogin} loading={loading}>
|
||||
Log in
|
||||
</Button>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<View className="flex flex-col px-4 justify-center h-full gap-y-2">
|
||||
<Text className="text-3xl font-bold">Jellyfin</Text>
|
||||
<Text className="opacity-50">Enter a server adress</Text>
|
||||
<Input
|
||||
className="mb-2"
|
||||
placeholder="http(s)://..."
|
||||
onChangeText={setServerURL}
|
||||
value={serverURL}
|
||||
autoFocus
|
||||
secureTextEntry={false}
|
||||
keyboardType="url"
|
||||
returnKeyType="done"
|
||||
autoCapitalize="none"
|
||||
textContentType="URL"
|
||||
clearButtonMode="while-editing"
|
||||
maxLength={500}
|
||||
/>
|
||||
<Button onPress={() => handleConnect(parsedServerURL)}>Connect</Button>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
32
app/+html.tsx
Normal file
32
app/+html.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { ScrollViewStyleReset } from "expo-router/html";
|
||||
import { type PropsWithChildren } from "react";
|
||||
|
||||
/**
|
||||
* This file is web-only and used to configure the root HTML for every web page during static rendering.
|
||||
* The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
|
||||
*/
|
||||
export default function Root({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
|
||||
{/*
|
||||
Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
|
||||
However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
|
||||
*/}
|
||||
<ScrollViewStyleReset />
|
||||
|
||||
{/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
|
||||
<style />
|
||||
{/* Add any additional <head> elements that you want globally available on web... */}
|
||||
</head>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
32
app/+not-found.tsx
Normal file
32
app/+not-found.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { Link, Stack } from "expo-router";
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
import { ThemedText } from "@/components/ThemedText";
|
||||
import { ThemedView } from "@/components/ThemedView";
|
||||
|
||||
export default function NotFoundScreen() {
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen options={{ title: "Oops!" }} />
|
||||
<ThemedView style={styles.container}>
|
||||
<ThemedText type="title">This screen doesn't exist.</ThemedText>
|
||||
<Link href={"/"} style={styles.link}>
|
||||
<ThemedText type="link">Go to home screen!</ThemedText>
|
||||
</Link>
|
||||
</ThemedView>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: 20,
|
||||
},
|
||||
link: {
|
||||
marginTop: 15,
|
||||
paddingVertical: 15,
|
||||
},
|
||||
});
|
||||
119
app/_layout.tsx
Normal file
119
app/_layout.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import { DarkTheme, ThemeProvider } from "@react-navigation/native";
|
||||
import { useFonts } from "expo-font";
|
||||
import { router, Stack } from "expo-router";
|
||||
import * as SplashScreen from "expo-splash-screen";
|
||||
import { useEffect, useRef } from "react";
|
||||
import "react-native-reanimated";
|
||||
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { Provider as JotaiProvider } from "jotai";
|
||||
import { JellyfinProvider } from "@/providers/JellyfinProvider";
|
||||
import { TouchableOpacity } from "react-native";
|
||||
|
||||
import Feather from "@expo/vector-icons/Feather";
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
|
||||
// Prevent the splash screen from auto-hiding before asset loading is complete.
|
||||
SplashScreen.preventAutoHideAsync();
|
||||
|
||||
export const unstable_settings = {
|
||||
initialRouteName: "(auth)/(tabs)/",
|
||||
};
|
||||
|
||||
export default function RootLayout() {
|
||||
const [loaded] = useFonts({
|
||||
SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
|
||||
});
|
||||
|
||||
const queryClientRef = useRef<QueryClient>(
|
||||
new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 60,
|
||||
refetchOnMount: false,
|
||||
refetchInterval: false,
|
||||
refetchIntervalInBackground: false,
|
||||
refetchOnReconnect: false,
|
||||
refetchOnWindowFocus: false,
|
||||
retryOnMount: false,
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (loaded) {
|
||||
SplashScreen.hideAsync();
|
||||
}
|
||||
}, [loaded]);
|
||||
|
||||
if (!loaded) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClientRef.current}>
|
||||
<JotaiProvider>
|
||||
<JellyfinProvider>
|
||||
<StatusBar style="auto" />
|
||||
<ThemeProvider value={DarkTheme}>
|
||||
<Stack>
|
||||
<Stack.Screen
|
||||
name="(auth)/(tabs)"
|
||||
options={{
|
||||
headerShown: false,
|
||||
title: "Home",
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="(auth)/settings"
|
||||
options={{
|
||||
headerShown: true,
|
||||
|
||||
title: "Settings",
|
||||
presentation: "modal",
|
||||
headerLeft: () => (
|
||||
<TouchableOpacity onPress={() => router.back()}>
|
||||
<Feather name="x-circle" size={24} color="white" />
|
||||
</TouchableOpacity>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="(auth)/player/offline/page"
|
||||
options={{
|
||||
title: "",
|
||||
headerShown: true,
|
||||
headerStyle: { backgroundColor: "transparent" },
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="(auth)/items/[id]/page"
|
||||
options={{
|
||||
title: "",
|
||||
headerShown: true,
|
||||
headerStyle: { backgroundColor: "transparent" },
|
||||
headerShadowVisible: true,
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="(auth)/collections/[collection]/page"
|
||||
options={{
|
||||
title: "",
|
||||
headerShown: true,
|
||||
headerStyle: { backgroundColor: "transparent" },
|
||||
headerShadowVisible: true,
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="(public)/login"
|
||||
options={{ headerShown: false, title: "Login" }}
|
||||
/>
|
||||
<Stack.Screen name="+not-found" />
|
||||
</Stack>
|
||||
</ThemeProvider>
|
||||
</JellyfinProvider>
|
||||
</JotaiProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user