detemine root cause of download issue.

components/Settings.tsx

@@ -6,11 +6,12 @@ import { Settings } from "@/app/lib/settings";
 import { LanguageServer, fetchWithTimeout } from "@/app/i18n/api";
 import { Picker } from "@react-native-picker/picker";
 import { longLang } from "@/app/i18n/lang";
+import FileSystem, { DownloadResumable } from "expo-file-system";
 import { LIBRETRANSLATE_BASE_URL } from "@/constants/api";
 import {
   WHISPER_MODELS,
   WHISPER_MODEL_DIR,
-  downloadWhisperModel,
+  initiateWhisperDownload,
   download_status,
   getWhisperDownloadStatus,
   getWhisperTarget,
@@ -53,6 +54,10 @@ const SettingsComponent: React.FC = () => {
   const [langServerConn, setLangServerConn] = useState<
     undefined | connection_test_t
   >();
+  const [whisperDownloadProgress, setWhisperDownloadProgress] = useState<
+    FileSystem.DownloadProgressData | undefined
+  >();
+  const [downloader, setDownloader] = useState<DownloadResumable | undefined>();
 
   const fillHostLanguageOptions = async () => {
     const settings = await Settings.getDefault();
@@ -73,7 +78,7 @@ const SettingsComponent: React.FC = () => {
         error: `Could not connect to ${libretranslateBaseUrl}: ${err}`,
       });
     }
-  }
+  };
 
   useEffect(() => {
     (async () => {
@@ -147,12 +152,25 @@ const SettingsComponent: React.FC = () => {
 
   const doReadownload = async () => {
     if (!whisperModel) return;
-    await downloadWhisperModel(whisperModel, { force_redownload: true });
+    await initiateWhisperDownload(whisperModel, {
+      force_redownload: true,
+      onDownload: setWhisperDownloadProgress,
+    });
   };
 
   const doDownload = async () => {
     if (!whisperModel) return;
-    await downloadWhisperModel(whisperModel);
+    try {
+      setDownloader(
+        await initiateWhisperDownload(whisperModel, {
+          onDownload: setWhisperDownloadProgress,
+        })
+      );
+      await downloader?.downloadAsync();
+      console.log("completed download");
+    } catch (err) {
+      console.error(err);
+    }
   };
 
   const handleHostLanguageChange = async (value: string) => {
@@ -217,28 +235,18 @@ const SettingsComponent: React.FC = () => {
           <Picker.Item key={key} label={label} value={key} />
         ))}
       </Picker>
-      {whisperModel && (
-        <View>
-          {downloadStatus?.status === "complete" ? (
-            <Pressable onPress={doReadownload}>Re-Download</Pressable>
-          ) : downloadStatus?.status === "in_progress" ? (
-            <Text>
-              {(downloadStatus.bytes.done / downloadStatus.bytes.total) * 100.0}{" "}
-              % complete
-              {downloadStatus.bytes.done} bytes of {downloadStatus.bytes.total}
-            </Text>
-          ) : (
-            <View>
-              <Pressable onPress={doDownload} style={styles.button}>
-                <Text style={styles.buttonText}>Download</Text>
-              </Pressable>
-              <Text>
-                This will download to {Paths.join(WHISPER_MODEL_DIR, WHISPER_MODELS[whisperModel].target)}
-              </Text>
-            </View>
-          )}
-        </View>
-      )}
+      <View>
+        { /* If there's a downloader, that means we're in the middle of a download */}
+        {downloader && whisperDownloadProgress && (
+          <Text>
+            {whisperDownloadProgress.totalBytesWritten} of {whisperDownloadProgress.totalBytesExpectedToWrite}
+          </Text>
+        )
+        }
+        <Pressable onPress={doDownload} style={styles.button}>
+          <Text style={styles.buttonText}>Download</Text>
+        </Pressable>
+      </View>
     </View>
   ) : (
     <View>

components/ui/WhisperDownloader.tsx

@@ -0,0 +1,33 @@
+import { Settings } from "@/app/lib/settings"
+import { WHISPER_MODELS } from "@/app/lib/whisper"
+import { Picker } from "@react-native-picker/picker"
+import { useEffect, useState } from "react"
+import { Pressable, View } from "react-native"
+
+const WhisperDownloader = () => {
+
+    const [whisperModel, setWhisperModel] = useState<string|undefined>();
+
+    useEffect(() => {
+        const settings = await Settings.getDefault();
+        setWhisperModel((await settings.getWhisperModel()) || "small");
+    }, [])
+
+    return (
+        <View>
+            <Picker
+            selectedValue={whisperModel || ""}
+            style={{ height: 50, width: "100%" }}
+            onValueChange={setWhisperModel}
+            accessibilityHint="whisper model"
+        >
+            {Object.entries(WHISPER_MODELS).map(([key, { label }]) => (
+            <Picker.Item key={key} label={label} value={key} />
+            ))}
+        </Picker>
+
+        <WhisperDownloadButton whisperModel={whisperModel} />
+
+        <WhisperDownloadInfo whisperModel={whisperModel} />
+  </View>
+}