This commit is contained in:
Fredrik Burmester
2024-08-06 21:16:37 +02:00
parent 165a9ddde7
commit 57e33428dc
29 changed files with 1113 additions and 296 deletions

View File

@@ -1,8 +1,12 @@
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import { runningProcesses } from "@/utils/atoms/downloads";
import { getPlaybackInfo, useDownloadMedia } from "@/utils/jellyfin";
import {
getPlaybackInfo,
useDownloadMedia,
useRemuxHlsToMp4,
} from "@/utils/jellyfin";
import Ionicons from "@expo/vector-icons/Ionicons";
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useQuery } from "@tanstack/react-query";
import { router } from "expo-router";
@@ -14,9 +18,13 @@ import { Text } from "./common/Text";
type DownloadProps = {
item: BaseItemDto;
playbackURL: string;
};
export const DownloadItem: React.FC<DownloadProps> = ({ item }) => {
export const DownloadItem: React.FC<DownloadProps> = ({
item,
playbackURL,
}) => {
const [api] = useAtom(apiAtom);
const [user] = useAtom(userAtom);
const [process] = useAtom(runningProcesses);
@@ -24,6 +32,8 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item }) => {
const { downloadMedia, isDownloading, error, cancelDownload } =
useDownloadMedia(api, user?.Id);
const { startRemuxing, cancelRemuxing } = useRemuxHlsToMp4(playbackURL, item);
const { data: playbackInfo, isLoading } = useQuery({
queryKey: ["playbackInfo", item.Id],
queryFn: async () => getPlaybackInfo(api, item.Id, user?.Id),
@@ -34,6 +44,8 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item }) => {
const source = playbackInfo.MediaSources?.[0];
console.log("Source:", JSON.stringify(source));
if (source?.SupportsDirectPlay && item.CanDownload) {
downloadMedia(item);
} else {
@@ -80,22 +92,34 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item }) => {
{process ? (
<TouchableOpacity
onPress={() => {
cancelDownload();
cancelRemuxing();
}}
className="relative"
className="flex flex-row items-center"
>
<View className="-rotate-45">
<ProgressCircle
size={26}
fill={process.progress}
width={3}
tintColor="#3498db"
backgroundColor="#bdc3c7"
/>
</View>
<View className="absolute top-0 left-0 font-bold w-full h-full flex flex-col items-center justify-center">
<Text className="text-[6px]">{process.progress.toFixed(0)}%</Text>
<View className="relative">
<View className="-rotate-45">
<ProgressCircle
size={26}
fill={process.progress}
width={3}
tintColor="#3498db"
backgroundColor="#bdc3c7"
/>
</View>
{process.progress > 0 ? (
<View className="absolute top-0 left-0 font-bold w-full h-full flex flex-col items-center justify-center">
<Text className="text-[6px]">
{process.progress.toFixed(0)}%
</Text>
</View>
) : null}
</View>
{process?.speed && (process?.speed || 0) > 0 ? (
<View className="ml-2">
<Text>{process.speed.toFixed(2)}x</Text>
</View>
) : null}
</TouchableOpacity>
) : downloaded ? (
<TouchableOpacity
@@ -110,7 +134,8 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item }) => {
) : (
<TouchableOpacity
onPress={() => {
downloadFile();
// downloadFile();
startRemuxing();
}}
>
<Ionicons name="cloud-download-outline" size={26} color="white" />