www: fix mp3 download while authenticated

www/app/[domain]/transcripts/useMp3.ts

@@ -1,36 +1,64 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import {
   DefaultApi,
-  V1TranscriptGetAudioMp3Request,
+  // V1TranscriptGetAudioMp3Request,
 } from "../../api/apis/DefaultApi";
 import {} from "../../api";
 import { useError } from "../../(errors)/errorContext";
+import { DomainContext } from "../domainContext";
 
 type Mp3Response = {
   url: string | null;
+  blob: Blob | null;
   loading: boolean;
   error: Error | null;
 };
 
 const useMp3 = (api: DefaultApi, id: string): Mp3Response => {
   const [url, setUrl] = useState<string | null>(null);
+  const [blob, setBlob] = useState<Blob | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setErrorState] = useState<Error | null>(null);
   const { setError } = useError();
+  const { api_url } = useContext(DomainContext);
 
   const getMp3 = (id: string) => {
-    if (!id) throw new Error("Transcript ID is required to get transcript Mp3");
+    if (!id) return;
 
     setLoading(true);
-    const requestParameters: V1TranscriptGetAudioMp3Request = {
-      transcriptId: id,
-    };
-    api
-      .v1TranscriptGetAudioMp3(requestParameters)
-      .then((result) => {
-        setUrl(result);
-        setLoading(false);
-        console.debug("Transcript Mp3 loaded:", result);
+    // XXX Current API interface does not output a blob, we need to to is manually
+    // const requestParameters: V1TranscriptGetAudioMp3Request = {
+    //   transcriptId: id,
+    // };
+    // api
+    //   .v1TranscriptGetAudioMp3(requestParameters)
+    //   .then((result) => {
+    //     setUrl(result);
+    //     setLoading(false);
+    //     console.debug("Transcript Mp3 loaded:", result);
+    //   })
+    //   .catch((err) => {
+    //     setError(err);
+    //     setErrorState(err);
+    //   });
+    const localUrl = `${api_url}/v1/transcripts/${id}/audio/mp3`;
+    if (localUrl == url) return;
+    const headers = new Headers();
+
+    if (api.configuration.configuration.accessToken) {
+      headers.set("Authorization", api.configuration.configuration.accessToken);
+    }
+
+    fetch(localUrl, {
+      method: "GET",
+      headers,
+    })
+      .then((response) => {
+        setUrl(localUrl);
+        response.blob().then((blob) => {
+          setBlob(blob);
+          setLoading(false);
+        });
       })
       .catch((err) => {
         setError(err);
@@ -42,7 +70,7 @@ const useMp3 = (api: DefaultApi, id: string): Mp3Response => {
     getMp3(id);
   }, [id]);
 
-  return { url, loading, error };
+  return { url, blob, loading, error };
 };
 
 export default useMp3;