HOW DID THAT FIX IT

(share_target and file_handler polyfill using that work)
(imagine if i break it again)

Author: NellowTCS

Build/src/helpers/filePickerHelper.tsx

@@ -481,20 +481,20 @@ function processFiles(files: File[]): AudioFile[] {
 // ---------------------
 export async function extractAudioMetadata(file: File): Promise<AudioMetadata> {
   setProcessingState(true);
-  
+
   const ext = file.name.split(".").pop()?.toLowerCase();
 
   // Use flo-specific extraction for .flo files
   if (ext === "flo") {
     try {
       const arrayBuffer = await file.arrayBuffer();
-      const { 
-        getFloMetadata, 
-        getFloCoverArt, 
-        getFloSyncedLyrics, 
-        getFloInfo 
+      const {
+        getFloMetadata,
+        getFloCoverArt,
+        getFloSyncedLyrics,
+        getFloInfo
       } = await import("./floProcessor");
-      
+
       // Get all flo data in parallel
       const [meta, cover, lyrics, info] = await Promise.all([
         getFloMetadata(arrayBuffer),
@@ -725,7 +725,7 @@ export function setupFileHandler(
     typeof window.launchQueue.setConsumer !== "function"
   ) {
     console.warn("File Handling API not supported in this browser");
-    return () => {}; // Return empty cleanup function
+    return () => { }; // Return empty cleanup function
   }
 
   const consumer = async (launchParams: any) => {
@@ -790,7 +790,7 @@ export function setupFileHandler(
       typeof window.launchQueue.setConsumer === "function"
     ) {
       try {
-        window.launchQueue.setConsumer(() => {});
+        window.launchQueue.setConsumer(() => { });
       } catch (e) {
         console.warn("Could not clear file handler consumer:", e);
       }
@@ -810,21 +810,17 @@ export interface ShareTargetResult {
 }
 
 export function handleShareTarget(): ShareTargetResult | null {
-  // Share targets can send data via URL parameters or launch queue
   if (typeof window === "undefined") {
     return null;
   }
 
-  // Check URL parameters for share data
   const urlParams = new URLSearchParams(window.location.search);
   const title = urlParams.get("title") || undefined;
   const text = urlParams.get("text") || undefined;
   const url = urlParams.get("url") || undefined;
 
-  // Determine what type of share this is
-  // Files would typically come through launch queue or POST request
-  if (title || text) {
-    // Text-based share - could be song info to search for
+  if (title || text || url) {
+    // Handle text sharing
     return {
       files: [],
       title,
@@ -834,12 +830,12 @@ export function handleShareTarget(): ShareTargetResult | null {
     };
   }
 
-  return null;
+  // Handle files shared via Cache API
+  return null; // Will be handled in useShareTarget
 }
 
-// Hook to handle share targets and file shares
 export function useShareTarget(
-  onShareReceived: (result: ShareTargetResult) => void,
+  onShareReceived: (result: ShareTargetResult) => void
 ) {
   const hasProcessedRef = useRef(false);
 
@@ -848,46 +844,47 @@ export function useShareTarget(
 
     async function processShare() {
       const urlParams = new URLSearchParams(window.location.search);
-      
-      // Check for files in Cache (sent from Service Worker)
+
       if (urlParams.get("share-received") === "true") {
         try {
-          const cache = await caches.open('incoming-shares');
-          const response = await cache.match('/shared-file');
-          
-          if (response) {
-            const blob = await response.blob();
-            // Try to recover the filename from headers or default to "shared-audio"
-            const filename = response.headers.get('x-file-name') || "shared-audio.mp3";
-            const file = new File([blob], filename, { type: blob.type });
+          const cache = await caches.open("incoming-shares");
+          const keys = await cache.keys();
+
+          const files: File[] = [];
+          for (const key of keys) {
+            if (key.url.includes("/shared-file-")) {
+              const response = await cache.match(key);
+              const blob = await response?.blob();
+              const fileName =
+                response?.headers.get("x-file-name") || "unknown-file";
+              files.push(new File([blob!], fileName, { type: blob?.type }));
+            }
+          }
 
+          if (files.length > 0) {
             hasProcessedRef.current = true;
-            onShareReceived({
-              files: [file],
-              type: "files",
-            });
+            onShareReceived({ files, type: "files" });
+
+            // Cleanup the cache after processing
+            for (const key of keys) {
+              await cache.delete(key);
+            }
 
-            // Cleanup
-            await cache.delete('/shared-file');
             const cleanUrl = new URL(window.location.href);
             cleanUrl.searchParams.delete("share-received");
             window.history.replaceState({}, "", cleanUrl.toString());
-            return; // Exit early if we handled files
+            return;
           }
-        } catch (e) {
-          console.error("Failed to retrieve shared file from cache", e);
+        } catch (error) {
+          console.error("Failed to retrieve shared files:", error);
         }
       }
 
-      // Fallback to standard Text/URL share handling
+      // Fallback to text sharing (e.g., query parameters)
       const shareResult = handleShareTarget();
-      if (shareResult && shareResult.type !== "none") {
+      if (shareResult) {
         hasProcessedRef.current = true;
         onShareReceived(shareResult);
-
-        const url = new URL(window.location.href);
-        ["title", "text", "url"].forEach((p) => url.searchParams.delete(p));
-        window.history.replaceState({}, "", url.toString());
       }
     }
 

Build/src/pages/_index.tsx

@@ -44,21 +44,19 @@ export default function IndexPage() {
   useShareTarget((result) => {
     if (result.files.length > 0) {
       toast.success(
-        t("shareTarget.filesReceived", { count: result.files.length }),
+        t("shareTarget.filesReceived", { count: result.files.length })
       );
       importAudioFiles(result.files, musicPlayerHook.addSong, t);
     }
-    if (result.title || result.text || result.url) {
+  
+    if (result.type === "search" && (result.title || result.text || result.url)) {
       const sharedContent = result.title || result.text || result.url;
       if (sharedContent) {
-        // Treat shared text as a search query
         musicPlayerHook.setSearchQuery(sharedContent);
         toast.info(t("shareTarget.searchQuery", { query: sharedContent }));
-
-        // Focus search input after a short delay to ensure UI is ready
         setTimeout(() => {
           const searchInput = document.querySelector(
-            'input[type="search"], input[placeholder*="search" i]',
+            'input[type="search"], input[placeholder*="search" i]'
           ) as HTMLInputElement;
           if (searchInput) {
             searchInput.focus();

Build/src/workers/sw.ts

@@ -1,33 +1,47 @@
-import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
-import { registerRoute, NavigationRoute } from 'workbox-routing';
+import { precacheAndRoute, createHandlerBoundToURL } from "workbox-precaching";
+import { registerRoute, NavigationRoute } from "workbox-routing";
 
 // @ts-ignore
 precacheAndRoute(self.__WB_MANIFEST);
 
-const handler = createHandlerBoundToURL('index.html'); 
+// Handle SPA navigation requests
+const handler = createHandlerBoundToURL("index.html");
 const navigationRoute = new NavigationRoute(handler, {
-    allowlist: [/^\/beta\/HTMLPlayer\//], 
+  allowlist: [/^\/beta\/HTMLPlayer\//],
 });
 registerRoute(navigationRoute);
 
+// Handle POST requests for file sharing
 registerRoute(
-    ({ url, request }) => {
-        return url.pathname === '/beta/HTMLPlayer/' && request.method === 'POST';
-    },
-    async ({ event }) => {
-        try {
-            const formData = await event.request.formData();
-            const file = formData.get('audio');
-            if (file) {
-                const cache = await caches.open('incoming-shares');
-                await cache.put('/shared-file', new Response(file));
-            }
-            const redirectUrl = new URL('/beta/HTMLPlayer/?share-received=true', self.location.origin);
-            return Response.redirect(redirectUrl.href, 303);
-        } catch (e) {
-            // always return a response even on error
-            return new Response('Failed to process share', { status: 400 });
+  ({ url, request }) => {
+    return url.pathname === "/beta/HTMLPlayer/" && request.method === "POST";
+  },
+  async ({ event }) => {
+    try {
+      const formData = await event.request.formData();
+      const cache = await caches.open("incoming-shares");
+
+      // Process all files in the form data
+      const files = [];
+      for (const [key, value] of formData.entries()) {
+        if (value instanceof File) {
+          files.push({ file: value, key });
+          await cache.put(`/shared-file-${value.name}`, new Response(value, {
+            headers: { "x-file-name": value.name, "content-type": value.type },
+          }));
         }
-    },
-    'POST'
+      }
+
+      // Redirect to the app with an indicator for file sharing
+      const redirectUrl = new URL(
+        `/beta/HTMLPlayer/?share-received=true&files=${files.length}`,
+        self.location.origin
+      );
+      return Response.redirect(redirectUrl.href, 303);
+    } catch (e) {
+      // Always return a response even on error
+      return new Response("Failed to process file share", { status: 400 });
+    }
+  },
+  "POST"
 );