fix: rn downloads

components/AudioTrackSelector.tsx

@@ -34,7 +34,6 @@ export const AudioTrackSelector: React.FC<Props> = ({
   const optionGroups: OptionGroup[] = useMemo(
     () => [
       {
-        title: "Audio streams",
         options:
           audioStreams?.map((audio, idx) => ({
             type: "radio" as const,
@@ -71,26 +70,19 @@ export const AudioTrackSelector: React.FC<Props> = ({
   if (isTv) return null;
 
   return (
-    <View
-      className='flex shrink'
-      style={{
-        minWidth: 50,
+    <PlatformDropdown
+      groups={optionGroups}
+      trigger={trigger}
+      title={t("item_card.audio")}
+      open={open}
+      onOpenChange={setOpen}
+      onOptionSelect={handleOptionSelect}
+      expoUIConfig={{
+        hostStyle: { flex: 1 },
       }}
-    >
-      <PlatformDropdown
-        groups={optionGroups}
-        trigger={trigger}
-        title={t("item_card.audio")}
-        open={open}
-        onOpenChange={setOpen}
-        onOptionSelect={handleOptionSelect}
-        expoUIConfig={{
-          hostStyle: { flex: 1 },
-        }}
-        bottomSheetConfig={{
-          enablePanDownToClose: true,
-        }}
-      />
-    </View>
+      bottomSheetConfig={{
+        enablePanDownToClose: true,
+      }}
+    />
   );
 };

components/BitrateSelector.tsx

@@ -79,18 +79,16 @@ export const BitrateSelector: React.FC<Props> = ({
   const optionGroups: OptionGroup[] = useMemo(
     () => [
       {
-        id: "bitrates",
-        title: "Bitrates",
         options: sorted.map((bitrate) => ({
-          id: bitrate.key,
           type: "radio" as const,
-          groupId: "bitrates",
           label: bitrate.key,
+          value: bitrate,
           selected: bitrate.value === selected?.value,
+          onPress: () => onChange(bitrate),
         })),
       },
     ],
-    [sorted, selected],
+    [sorted, selected, onChange],
   );
 
   const handleOptionSelect = (optionId: string) => {
@@ -118,27 +116,19 @@ export const BitrateSelector: React.FC<Props> = ({
   if (isTv) return null;
 
   return (
-    <View
-      className='flex shrink'
-      style={{
-        minWidth: 60,
-        maxWidth: 200,
+    <PlatformDropdown
+      groups={optionGroups}
+      trigger={trigger}
+      title={t("item_card.quality")}
+      open={open}
+      onOpenChange={setOpen}
+      onOptionSelect={handleOptionSelect}
+      expoUIConfig={{
+        hostStyle: { flex: 1 },
       }}
-    >
-      <PlatformDropdown
-        groups={optionGroups}
-        trigger={trigger}
-        title={t("item_card.quality")}
-        open={open}
-        onOpenChange={setOpen}
-        onOptionSelect={handleOptionSelect}
-        expoUIConfig={{
-          hostStyle: { flex: 1 },
-        }}
-        bottomSheetConfig={{
-          enablePanDownToClose: true,
-        }}
-      />
-    </View>
+      bottomSheetConfig={{
+        enablePanDownToClose: true,
+      }}
+    />
   );
 };

components/DownloadItem.tsx

@@ -359,16 +359,18 @@ export const DownloadItems: React.FC<DownloadProps> = ({
                   })}
               </Text>
             </View>
-            <View className='flex flex-col space-y-2 w-full items-start'>
-              <BitrateSelector
-                inverted
-                onChange={(val) =>
-                  setSelectedOptions(
-                    (prev) => prev && { ...prev, bitrate: val },
-                  )
-                }
-                selected={selectedOptions?.bitrate}
-              />
+            <View className='flex flex-col space-y-2 w-full'>
+              <View className='items-start'>
+                <BitrateSelector
+                  inverted
+                  onChange={(val) =>
+                    setSelectedOptions(
+                      (prev) => prev && { ...prev, bitrate: val },
+                    )
+                  }
+                  selected={selectedOptions?.bitrate}
+                />
+              </View>
               {itemsNotDownloaded.length > 1 && (
                 <View className='flex flex-row items-center justify-between w-full py-2'>
                   <Text>{t("item_card.download.download_unwatched_only")}</Text>
@@ -380,21 +382,23 @@ export const DownloadItems: React.FC<DownloadProps> = ({
               )}
               {itemsNotDownloaded.length === 1 && (
                 <View>
-                  <MediaSourceSelector
-                    item={items[0]}
-                    onChange={(val) =>
-                      setSelectedOptions(
-                        (prev) =>
-                          prev && {
-                            ...prev,
-                            mediaSource: val,
-                          },
-                      )
-                    }
-                    selected={selectedOptions?.mediaSource}
-                  />
+                  <View className='items-start'>
+                    <MediaSourceSelector
+                      item={items[0]}
+                      onChange={(val) =>
+                        setSelectedOptions(
+                          (prev) =>
+                            prev && {
+                              ...prev,
+                              mediaSource: val,
+                            },
+                        )
+                      }
+                      selected={selectedOptions?.mediaSource}
+                    />
+                  </View>
                   {selectedOptions?.mediaSource && (
-                    <View className='flex flex-col space-y-2'>
+                    <View className='flex flex-col space-y-2 items-start'>
                       <AudioTrackSelector
                         source={selectedOptions.mediaSource}
                         onChange={(val) => {
@@ -427,11 +431,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
               )}
             </View>
 
-            <Button
-              className='mt-auto'
-              onPress={acceptDownloadOptions}
-              color='purple'
-            >
+            <Button onPress={acceptDownloadOptions} color='purple'>
               {t("item_card.download.download_button")}
             </Button>
           </View>

components/MediaSourceSelector.tsx

@@ -47,19 +47,17 @@ export const MediaSourceSelector: React.FC<Props> = ({
   const optionGroups: OptionGroup[] = useMemo(
     () => [
       {
-        id: "media-sources",
-        title: "Media sources",
         options:
-          item.MediaSources?.map((source, idx) => ({
-            id: `${source.Id || idx}`,
+          item.MediaSources?.map((source) => ({
             type: "radio" as const,
-            groupId: "media-sources",
             label: getDisplayName(source),
+            value: source,
             selected: source.Id === selected?.Id,
+            onPress: () => onChange(source),
           })) || [],
       },
     ],
-    [item.MediaSources, selected, getDisplayName],
+    [item.MediaSources, selected, getDisplayName, onChange],
   );
 
   const handleOptionSelect = (optionId: string) => {
@@ -87,26 +85,19 @@ export const MediaSourceSelector: React.FC<Props> = ({
   if (isTv) return null;
 
   return (
-    <View
-      className='flex shrink'
-      style={{
-        minWidth: 50,
+    <PlatformDropdown
+      groups={optionGroups}
+      trigger={trigger}
+      title={t("item_card.video")}
+      open={open}
+      onOpenChange={setOpen}
+      onOptionSelect={handleOptionSelect}
+      expoUIConfig={{
+        hostStyle: { flex: 1 },
       }}
-    >
-      <PlatformDropdown
-        groups={optionGroups}
-        trigger={trigger}
-        title={t("item_card.video")}
-        open={open}
-        onOpenChange={setOpen}
-        onOptionSelect={handleOptionSelect}
-        expoUIConfig={{
-          hostStyle: { flex: 1 },
-        }}
-        bottomSheetConfig={{
-          enablePanDownToClose: true,
-        }}
-      />
-    </View>
+      bottomSheetConfig={{
+        enablePanDownToClose: true,
+      }}
+    />
   );
 };

components/SubtitleTrackSelector.tsx

@@ -33,29 +33,27 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   const optionGroups: OptionGroup[] = useMemo(() => {
     const options = [
       {
-        id: "none",
         type: "radio" as const,
-        groupId: "subtitle-streams",
         label: t("item_card.none"),
+        value: -1,
         selected: selected === -1,
+        onPress: () => onChange(-1),
       },
       ...(subtitleStreams?.map((subtitle, idx) => ({
-        id: `${subtitle.Index || idx}`,
         type: "radio" as const,
-        groupId: "subtitle-streams",
         label: subtitle.DisplayTitle || `Subtitle Stream ${idx + 1}`,
+        value: subtitle.Index,
         selected: subtitle.Index === selected,
+        onPress: () => onChange(subtitle.Index ?? -1),
       })) || []),
     ];
 
     return [
       {
-        id: "subtitle-streams",
-        title: "Subtitle tracks",
         options,
       },
     ];
-  }, [subtitleStreams, selected, t]);
+  }, [subtitleStreams, selected, t, onChange]);
 
   const handleOptionSelect = (optionId: string) => {
     if (optionId === "none") {
@@ -96,27 +94,19 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   if (Platform.isTV || subtitleStreams?.length === 0) return null;
 
   return (
-    <View
-      className='flex col shrink justify-start place-self-start items-start'
-      style={{
-        minWidth: 60,
-        maxWidth: 200,
+    <PlatformDropdown
+      groups={optionGroups}
+      trigger={trigger}
+      title={t("item_card.subtitles")}
+      open={open}
+      onOpenChange={setOpen}
+      onOptionSelect={handleOptionSelect}
+      expoUIConfig={{
+        hostStyle: { flex: 1 },
       }}
-    >
-      <PlatformDropdown
-        groups={optionGroups}
-        trigger={trigger}
-        title={t("item_card.subtitles")}
-        open={open}
-        onOpenChange={setOpen}
-        onOptionSelect={handleOptionSelect}
-        expoUIConfig={{
-          hostStyle: { flex: 1 },
-        }}
-        bottomSheetConfig={{
-          enablePanDownToClose: true,
-        }}
-      />
-    </View>
+      bottomSheetConfig={{
+        enablePanDownToClose: true,
+      }}
+    />
   );
 };