feat: new download quality options

2026-03-11 03:46:19 +00:00 · 2024-08-21 20:34:07 +02:00
parent 9a621cab4e
commit 27785e7d18
4 changed files with 309 additions and 133 deletions
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -4,37 +4,132 @@ import { runningProcesses } from "@/utils/atoms/downloads";
 import { queueActions, queueAtom } from "@/utils/atoms/queue";
 import { getPlaybackInfo } from "@/utils/jellyfin/media/getPlaybackInfo";
 import Ionicons from "@expo/vector-icons/Ionicons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} 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";
 import { useAtom } from "jotai";
-import { TouchableOpacity, View } from "react-native";
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+} from "react-native";
 import { Loader } from "./Loader";
 import ProgressCircle from "./ProgressCircle";
+import { DownloadQuality, useSettings } from "@/utils/atoms/settings";
+import { useCallback } from "react";
+import ios from "@/utils/profiles/ios";
+import native from "@/utils/profiles/native";
+import old from "@/utils/profiles/old";

-type DownloadProps = {
+interface DownloadProps extends TouchableOpacityProps {
  item: BaseItemDto;
-  playbackUrl: string;
-};
+}

-export const DownloadItem: React.FC<DownloadProps> = ({
-  item,
-  playbackUrl,
-}) => {
+export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const [process] = useAtom(runningProcesses);
  const [queue, setQueue] = useAtom(queueAtom);

-  const { startRemuxing } = useRemuxHlsToMp4(playbackUrl, item);
+  const [settings] = useSettings();

-  const { data: playbackInfo, isLoading } = useQuery({
-    queryKey: ["playbackInfo", item.Id],
-    queryFn: async () => getPlaybackInfo(api, item.Id, user?.Id),
-  });
+  const { startRemuxing } = useRemuxHlsToMp4(item);

-  const { data: downloaded, isLoading: isLoadingDownloaded } = useQuery({
+  const initiateDownload = useCallback(
+    async (qualitySetting: DownloadQuality) => {
+      if (!api || !user?.Id || !item.Id) {
+        throw new Error(
+          "DownloadItem ~ initiateDownload: No api or user or item"
+        );
+      }
+
+      let deviceProfile: any = ios;
+
+      if (settings?.deviceProfile === "Native") {
+        deviceProfile = native;
+      } else if (settings?.deviceProfile === "Old") {
+        deviceProfile = old;
+      }
+
+      let maxStreamingBitrate: number | undefined = undefined;
+
+      if (qualitySetting === "high") {
+        maxStreamingBitrate = 8000000;
+      } else if (qualitySetting === "low") {
+        maxStreamingBitrate = 2000000;
+      }
+
+      const response = await api.axiosInstance.post(
+        `${api.basePath}/Items/${item.Id}/PlaybackInfo`,
+        {
+          DeviceProfile: deviceProfile,
+          UserId: user.Id,
+          MaxStreamingBitrate: maxStreamingBitrate,
+          StartTimeTicks: 0,
+          EnableTranscoding: maxStreamingBitrate ? true : undefined,
+          AutoOpenLiveStream: true,
+          MediaSourceId: item.Id,
+          AllowVideoStreamCopy: maxStreamingBitrate ? false : true,
+        },
+        {
+          headers: {
+            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
+          },
+        }
+      );
+
+      let url: string | undefined = undefined;
+
+      const mediaSource = response.data.MediaSources?.[0] as MediaSourceInfo;
+
+      if (!mediaSource) {
+        throw new Error("No media source");
+      }
+
+      if (mediaSource.SupportsDirectPlay) {
+        if (item.MediaType === "Video") {
+          console.log("Using direct stream for video!");
+          url = `${api.basePath}/Videos/${item.Id}/stream.mp4?mediaSourceId=${item.Id}&static=true`;
+        } else if (item.MediaType === "Audio") {
+          console.log("Using direct stream for audio!");
+          const searchParams = new URLSearchParams({
+            UserId: user.Id,
+            DeviceId: api.deviceInfo.id,
+            MaxStreamingBitrate: "140000000",
+            Container:
+              "opus,webm|opus,mp3,aac,m4a|aac,m4b|aac,flac,webma,webm|webma,wav,ogg",
+            TranscodingContainer: "mp4",
+            TranscodingProtocol: "hls",
+            AudioCodec: "aac",
+            api_key: api.accessToken,
+            StartTimeTicks: "0",
+            EnableRedirection: "true",
+            EnableRemoteMedia: "false",
+          });
+          url = `${api.basePath}/Audio/${
+            item.Id
+          }/universal?${searchParams.toString()}`;
+        }
+      }
+
+      if (mediaSource.TranscodingUrl) {
+        console.log("Using transcoded stream!");
+        url = `${api.basePath}${mediaSource.TranscodingUrl}`;
+      } else {
+        throw new Error("No transcoding url");
+      }
+
+      return await startRemuxing(url);
+    },
+    [api, item, startRemuxing, user?.Id]
+  );
+
+  const { data: downloaded, isFetching } = useQuery({
    queryKey: ["downloaded", item.Id],
    queryFn: async () => {
      if (!item.Id) return false;
@@ -48,7 +143,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({
    enabled: !!item.Id,
  });

-  if (isLoading || isLoadingDownloaded) {
+  if (isFetching) {
    return (
      <View className="rounded h-10 aspect-square flex items-center justify-center">
        <Loader />
@@ -56,20 +151,13 @@ export const DownloadItem: React.FC<DownloadProps> = ({
    );
  }

-  if (playbackInfo?.MediaSources?.[0].SupportsDirectPlay === false) {
-    return (
-      <View className="rounded h-10 aspect-square flex items-center justify-center opacity-50">
-        <Ionicons name="cloud-download-outline" size={24} color="white" />
-      </View>
-    );
-  }
-
  if (process && process?.item.Id === item.Id) {
    return (
      <TouchableOpacity
        onPress={() => {
          router.push("/downloads");
        }}
+        {...props}
      >
        <View className="rounded h-10 aspect-square flex items-center justify-center">
          {process.progress === 0 ? (
@@ -96,6 +184,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({
        onPress={() => {
          router.push("/downloads");
        }}
+        {...props}
      >
        <View className="rounded h-10 aspect-square flex items-center justify-center opacity-50">
          <Ionicons name="hourglass" size={24} color="white" />
@@ -110,6 +199,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({
        onPress={() => {
          router.push("/downloads");
        }}
+        {...props}
      >
        <View className="rounded h-10 aspect-square flex items-center justify-center">
          <Ionicons name="cloud-download" size={26} color="#9333ea" />
@@ -123,11 +213,16 @@ export const DownloadItem: React.FC<DownloadProps> = ({
          queueActions.enqueue(queue, setQueue, {
            id: item.Id!,
            execute: async () => {
-              await startRemuxing();
+              // await startRemuxing(playbackUrl);
+              if (!settings?.downloadQuality?.value) {
+                throw new Error("No download quality selected");
+              }
+              await initiateDownload(settings?.downloadQuality?.value);
            },
            item,
          });
        }}
+        {...props}
      >
        <View className="rounded h-10 aspect-square flex items-center justify-center">
          <Ionicons name="cloud-download-outline" size={26} color="white" />
--- a/components/settings/SettingToggles.tsx
+++ b/components/settings/SettingToggles.tsx
@@ -1,5 +1,5 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
+import { DownloadOptions, useSettings } from "@/utils/atoms/settings";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAtom } from "jotai";
@@ -58,6 +58,46 @@ export const SettingToggles: React.FC = () => {
          onValueChange={(value) => updateSettings({ autoRotate: value })}
        />
      </View>
+      <View
+        className={`
+            flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+          `}
+      >
+        <View className="flex flex-col shrink">
+          <Text className="font-semibold">Download quality</Text>
+          <Text className="text-xs opacity-50">
+            Choose the search engine you want to use.
+          </Text>
+        </View>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text>{settings?.downloadQuality?.label}</Text>
+            </TouchableOpacity>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            loop={true}
+            side="bottom"
+            align="start"
+            alignOffset={0}
+            avoidCollisions={true}
+            collisionPadding={8}
+            sideOffset={8}
+          >
+            <DropdownMenu.Label>Quality</DropdownMenu.Label>
+            {DownloadOptions.map((option) => (
+              <DropdownMenu.Item
+                key={option.value}
+                onSelect={() => {
+                  updateSettings({ downloadQuality: option });
+                }}
+              >
+                <DropdownMenu.ItemTitle>{option.label}</DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </View>
      <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
        <View className="shrink">
          <Text className="font-semibold">Start videos in fullscreen</Text>
@@ -73,6 +113,23 @@ export const SettingToggles: React.FC = () => {
          }
        />
      </View>
+
+      <View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
+        <View className="flex flex-col shrink">
+          <Text className="font-semibold">Use external player (VLC)</Text>
+          <Text className="text-xs opacity-50 shrink">
+            Open all videos in VLC instead of the default player. This requries
+            VLC to be installed on the phone.
+          </Text>
+        </View>
+        <Switch
+          value={settings?.openInVLC}
+          onValueChange={(value) => {
+            updateSettings({ openInVLC: value, forceDirectPlay: value });
+          }}
+        />
+      </View>
+
      <View className="flex flex-col">
        <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
          <View className="flex flex-col">
@@ -157,22 +214,6 @@ export const SettingToggles: React.FC = () => {
        />
      </View>

-      <View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
-        <View className="flex flex-col shrink">
-          <Text className="font-semibold">Use external player (VLC)</Text>
-          <Text className="text-xs opacity-50 shrink">
-            Open all videos in VLC instead of the default player. This requries
-            VLC to be installed on the phone.
-          </Text>
-        </View>
-        <Switch
-          value={settings?.openInVLC}
-          onValueChange={(value) => {
-            updateSettings({ openInVLC: value, forceDirectPlay: value });
-          }}
-        />
-      </View>
-
      <View
        className={`
        flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4