www: use a service worker to download the mp3 and add authorization header

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

@@ -7,74 +7,59 @@ import { shouldShowError } from "../../lib/errorUtils";
 
 type Mp3Response = {
   url: string | null;
-  blob: Blob | null;
+  media: HTMLMediaElement | null;
   loading: boolean;
   error: Error | null;
 };
 
 const useMp3 = (protectedPath: boolean, id: string): Mp3Response => {
   const [url, setUrl] = useState<string | null>(null);
-  const [blob, setBlob] = useState<Blob | null>(null);
+  const [media, setMedia] = useState<HTMLMediaElement | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setErrorState] = useState<Error | null>(null);
   const { setError } = useError();
   const api = getApi(protectedPath);
   const { api_url } = useContext(DomainContext);
   const accessTokenInfo = useFiefAccessTokenInfo();
+  const [serviceWorkerReady, setServiceWorkerReady] = useState(false);
+
+  useEffect(() => {
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker.register("/service-worker.js").then(() => {
+        setServiceWorkerReady(true);
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!navigator.serviceWorker) return;
+    if (!navigator.serviceWorker.controller) return;
+    if (!serviceWorkerReady) return;
+    // Send the token to the service worker
+    navigator.serviceWorker.controller.postMessage({
+      type: "SET_AUTH_TOKEN",
+      token: accessTokenInfo?.access_token,
+    });
+  }, [navigator.serviceWorker, serviceWorkerReady, accessTokenInfo]);
 
   const getMp3 = (id: string) => {
     if (!id || !api) return;
 
+    // createa a audio element and set the source
     setLoading(true);
-    // 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 (accessTokenInfo) {
-      headers.set("Authorization", "Bearer " + accessTokenInfo.access_token);
-    }
-    fetch(localUrl, {
-      method: "GET",
-      headers,
-    })
-      .then((response) => {
-        setUrl(localUrl);
-        response.blob().then((blob) => {
-          setBlob(blob);
-          setLoading(false);
-        });
-      })
-      .catch((err) => {
-        setErrorState(err);
-        const shouldShowHuman = shouldShowError(error);
-        if (shouldShowHuman) {
-          setError(err, "There was an error loading the audio");
-        } else {
-          setError(err);
-        }
-      });
+    const audioElement = document.createElement("audio");
+    audioElement.src = `${api_url}/v1/transcripts/${id}/audio/mp3`;
+    audioElement.crossOrigin = "anonymous";
+    audioElement.preload = "auto";
+    setMedia(audioElement);
+    setLoading(false);
   };
 
   useEffect(() => {
     getMp3(id);
   }, [id, api]);
 
-  return { url, blob, loading, error };
+  return { url, media, loading, error };
 };
 
 export default useMp3;