# Add download size to offline media downloads

- Added getDownloadSize helper function to display media size
 in MB or GB when appropriate

components/downloads/DownloadSize.tsx

@@ -0,0 +1,31 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import React, {useEffect, useMemo, useState} from "react";
+import {Text} from "@/components/common/Text";
+import useDownloadHelper from "@/utils/download";
+
+interface DownloadSizeProps {
+  items: BaseItemDto[];
+}
+
+export const DownloadSize: React.FC<DownloadSizeProps> = ({ items }) => {
+  const { getDownloadSize } = useDownloadHelper();
+  const [size, setSize] = useState<string | undefined>();
+
+  useEffect(() => {
+      getDownloadSize(...items).then(setSize)
+    },
+    [items]
+  );
+
+  const sizeText = useMemo(() => {
+    if (!size)
+      return "reading size..."
+    return size
+  }, [size])
+
+  return (
+    <>
+      <Text className="text-xs text-neutral-500">{sizeText}</Text>
+    </>
+  );
+};

components/downloads/EpisodeCard.tsx

@@ -1,6 +1,6 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import * as Haptics from "expo-haptics";
-import React, { useCallback, useMemo } from "react";
+import React, {useCallback, useMemo} from "react";
 import { TouchableOpacity, View } from "react-native";
 import {
   ActionSheetProvider,
@@ -8,12 +8,13 @@ import {
 } from "@expo/react-native-action-sheet";
 
 import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
-import { useDownload } from "@/providers/DownloadProvider";
+import {useDownload} from "@/providers/DownloadProvider";
 import { storage } from "@/utils/mmkv";
 import { Image } from "expo-image";
 import { Ionicons } from "@expo/vector-icons";
 import {Text} from "@/components/common/Text";
 import {runtimeTicksToSeconds} from "@/utils/time";
+import {DownloadSize} from "@/components/downloads/DownloadSize";
 
 interface EpisodeCardProps {
   item: BaseItemDto;
@@ -114,6 +115,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
           <Text className="text-xs text-neutral-500">
             {runtimeTicksToSeconds(item.RunTimeTicks)}
           </Text>
+          <DownloadSize items={[item]} />
         </View>
       </View>
       <Text numberOfLines={3} className="text-xs text-neutral-500 shrink">{item.Overview}</Text>

components/downloads/MovieCard.tsx

@@ -4,7 +4,7 @@ import {
 } from "@expo/react-native-action-sheet";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import * as Haptics from "expo-haptics";
-import React, { useCallback, useMemo } from "react";
+import React, {useCallback, useEffect, useMemo, useState} from "react";
 import { TouchableOpacity, View } from "react-native";
 
 import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
@@ -13,6 +13,7 @@ import { storage } from "@/utils/mmkv";
 import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
 import { ItemCardText } from "../ItemCardText";
+import {DownloadSize} from "@/components/downloads/DownloadSize";
 
 interface MovieCardProps {
   item: BaseItemDto;
@@ -97,6 +98,7 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
         </View>
       )}
       <ItemCardText item={item} />
+      <DownloadSize items={[item]} />
     </TouchableOpacity>
   );
 };

components/downloads/SeriesCard.tsx

@@ -1,11 +1,12 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import {TouchableOpacity, View} from "react-native";
 import { Text } from "../common/Text";
-import React, {useMemo} from "react";
+import React, {useEffect, useMemo, useState} from "react";
 import {storage} from "@/utils/mmkv";
 import {Image} from "expo-image";
 import {Ionicons} from "@expo/vector-icons";
 import {router} from "expo-router";
+import {DownloadSize} from "@/components/downloads/DownloadSize";
 
 export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({items}) => {
   const base64Image = useMemo(() => {
@@ -45,6 +46,7 @@ export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({items}) => {
       <View className="w-28 mt-2 flex flex-col">
         <Text numberOfLines={2} className="">{items[0].SeriesName}</Text>
         <Text className="text-xs opacity-50">{items[0].ProductionYear}</Text>
+        <DownloadSize items={items} />
       </View>
     </TouchableOpacity>
   );