Add Web Share Target and Protocol Handler #9

Author: stekhn

public/manifest.json

@@ -55,5 +55,31 @@
             "form_factor": "narrow",
             "label": "Transcribe App"
         }
-    ]
+    ],
+    "protocol_handlers": [
+        {
+            "protocol": "web+audio",
+            "url": "/transcribe/?url=%s"
+        }
+    ],
+    "share_target": {
+        "action": "/transcribe/",
+        "method": "POST",
+        "enctype": "multipart/form-data",
+        "params": {
+            "files": [
+                {
+                    "name": "audio_files",
+                    "accept": [
+                        "audio/*",
+                        ".mp3",
+                        ".wav",
+                        ".ogg",
+                        ".flac",
+                        ".m4a"
+                    ]
+                }
+            ]
+        }
+    }
 }

src/components/AudioManager.tsx

@@ -10,8 +10,10 @@ import { AnchorIcon, FolderIcon, MicrophoneIcon } from "./Icons";
 import { Modal } from "./Modal";
 import { Switch } from "./Switch";
 import { UrlInput } from "./UrlInput";
-import { Transcriber } from "../hooks/useTranscriber";
 import { titleCase } from "../utils/StringUtils";
+import { Transcriber } from "../hooks/useTranscriber";
+import { useProtocolHandler } from "../hooks/useProtocolHandler";
+import { useAudioFileReceiver } from "../hooks/useAudioFileReceiver";
 import { SAMPLING_RATE, DEFAULT_AUDIO_URL, LANGUAGES, MODELS } from "../config";
 
 export enum AudioSource {
@@ -116,6 +118,18 @@ export const AudioManager: React.FC<AudiomanagerProps> = ({ transcriber }) => {
         }
     };
 
+    // Handle requests to http://localhost:5173/transcribe/?url=
+    useProtocolHandler("web+transcribe", (url: URL) => {
+        const incomingUrl = url.toString();
+        setAudioDownloadUrl(incomingUrl);
+    });
+
+    useAudioFileReceiver(async (file) => {
+        const arrayBuffer = await file.arrayBuffer();
+        const mimeType = file.type;
+        await setAudioFromDownload(arrayBuffer, mimeType);
+    });
+
     // When URL changes, download audio
     useEffect(() => {
         if (audioDownloadUrl) {

src/components/Transcript.tsx

@@ -165,7 +165,7 @@ export const Transcript: React.FC<TranscriptProps> = ({ transcriber }) => {
                             className='flex-1'
                         >
                             <DownloadIcon className='size-5 fill-slate-100' />{" "}
-                            TXT
+                            Text
                         </Button>
                         <Button
                             aria-label='Download text as SRT file'

src/hooks/useAudioFileReceiver.ts

@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+
+type AudioFileHandler = (file: File) => void;
+
+export const useAudioFileReceiver = (handleFile: AudioFileHandler) => {
+    useEffect(() => {
+        const handleFetchEvent = async (event: FetchEvent) => {
+            if (event.request.method === "POST") {
+                const url = new URL(event.request.url);
+                console.log(event.request);
+                console.log(url);
+
+                event.respondWith(
+                    (async () => {
+                        try {
+                            const formData = await event.request.formData();
+                            const audioFile = formData.get(
+                                "audio_files",
+                            ) as File;
+
+                            if (
+                                audioFile &&
+                                audioFile.type.startsWith("audio/")
+                            ) {
+                                handleFile(audioFile);
+                                return new Response("Audio file received", {
+                                    status: 200,
+                                });
+                            } else {
+                                return new Response(
+                                    "No audio file received or invalid file type",
+                                    { status: 400 },
+                                );
+                            }
+                        } catch (error) {
+                            console.error("Error handling fetch event:", error);
+                            return new Response("Error handling audio file", {
+                                status: 500,
+                            });
+                        }
+                    })(),
+                );
+            }
+        };
+
+        // @ts-ignore
+        self.addEventListener("fetch", handleFetchEvent);
+
+        return () => {
+            // @ts-ignore
+            self.removeEventListener("fetch", handleFetchEvent);
+        };
+    }, [handleFile]);
+};

src/hooks/useProtocolHandler.ts

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+
+type ProtocolHandler = (url: URL) => void;
+
+export const useProtocolHandler = (
+    protocol: string,
+    handler: ProtocolHandler,
+) => {
+    const lastUrlRef = useRef<string | null>(null);
+
+    useEffect(() => {
+        if ("registerProtocolHandler" in navigator) {
+            try {
+                navigator.registerProtocolHandler(
+                    protocol,
+                    `${window.location.origin}/?url=%s`,
+                );
+            } catch (error) {
+                console.warn("Failed to register protocol handler:", error);
+            }
+        }
+    }, [protocol]);
+
+    useEffect(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const incomingUrl = urlParams.get("url");
+
+        if (incomingUrl && incomingUrl !== lastUrlRef.current) {
+            try {
+                const parsedUrl = new URL(incomingUrl);
+                handler(parsedUrl);
+                lastUrlRef.current = incomingUrl; // Update the last URL
+            } catch (error) {
+                console.error("Failed to parse incoming URL:", error);
+            }
+        }
+    }, [handler]);
+};

tsconfig.json

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "target": "ESNext",
         "useDefineForClassFields": true,
-        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "lib": ["ESNext", "DOM", "DOM.Iterable", "webworker"],
         "allowJs": false,
         "skipLibCheck": true,
         "esModuleInterop": false,