web: add uuid() function with fallback if randomUUID is missing

web/src/lib/storage/memory.ts

@@ -1,4 +1,5 @@
 import { AbstractStorage } from "./storage";
+import { uuid } from "$lib/util";
 
 export class MemoryStorage extends AbstractStorage {
     #chunkSize: number;
@@ -48,7 +49,7 @@ export class MemoryStorage extends AbstractStorage {
             }
         }
 
-        return new File(outputView, crypto.randomUUID());
+        return new File(outputView, uuid());
     }
 
     #expand(size: number) {

web/src/lib/storage/opfs.ts

@@ -1,4 +1,5 @@
 import { AbstractStorage } from "./storage";
+import { uuid } from "$lib/util";
 
 const COBALT_PROCESSING_DIR = "cobalt-processing-data";
 
@@ -19,7 +20,7 @@ export class OPFSStorage extends AbstractStorage {
     static async init() {
         const root = await navigator.storage.getDirectory();
         const cobaltDir = await root.getDirectoryHandle(COBALT_PROCESSING_DIR, { create: true });
-        const handle = await cobaltDir.getFileHandle(crypto.randomUUID(), { create: true });
+        const handle = await cobaltDir.getFileHandle(uuid(), { create: true });
         const reader = await handle.createSyncAccessHandle();
 
         return new this(cobaltDir, handle, reader);

web/src/lib/task-manager/queue.ts

@@ -4,6 +4,7 @@ import { ffmpegMetadataArgs } from "$lib/util";
 import { createDialog } from "$lib/state/dialogs";
 import { addItem } from "$lib/state/task-manager/queue";
 import { openQueuePopover } from "$lib/state/queue-visibility";
+import { uuid } from "$lib/util";
 
 import type { CobaltQueueItem } from "$lib/types/queue";
 import type { CobaltCurrentTasks } from "$lib/types/task-manager";
@@ -20,12 +21,12 @@ export const getMediaType = (type: string) => {
 }
 
 export const createRemuxPipeline = (file: File) => {
-    const parentId = crypto.randomUUID();
+    const parentId = uuid();
     const mediaType = getMediaType(file.type);
 
     const pipeline: CobaltPipelineItem[] = [{
         worker: "remux",
-        workerId: crypto.randomUUID(),
+        workerId: uuid(),
         parentId,
         workerArgs: {
             files: [file],
@@ -140,7 +141,7 @@ export const createSavePipeline = (
         return showError("pipeline.missing_response_data");
     }
 
-    const parentId = oldTaskId || crypto.randomUUID();
+    const parentId = oldTaskId || uuid();
     const pipeline: CobaltPipelineItem[] = [];
 
     // reverse is needed for audio (second item) to be downloaded first
@@ -149,7 +150,7 @@ export const createSavePipeline = (
     for (const tunnel of tunnels) {
         pipeline.push({
             worker: "fetch",
-            workerId: crypto.randomUUID(),
+            workerId: uuid(),
             parentId,
             workerArgs: {
                 url: tunnel,
@@ -182,7 +183,7 @@ export const createSavePipeline = (
 
     pipeline.push({
         worker: workerType,
-        workerId: crypto.randomUUID(),
+        workerId: uuid(),
         parentId,
         dependsOn: pipeline.map(w => w.workerId),
         workerArgs: {

web/src/lib/util.ts

@@ -26,3 +26,20 @@ export const ffmpegMetadataArgs = (metadata: CobaltFileMetadata) =>
         }
         return [];
     });
+
+const digit = () => '0123456789abcdef'[Math.random() * 16 | 0];
+export const uuid = () => {
+    if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+        return crypto.randomUUID();
+    }
+
+    const digits = Array.from({length: 32}, digit);
+    digits[12] = '4';
+    digits[16] = '89ab'[Math.random() * 4 | 0];
+
+    return digits
+            .join('')
+            .match(/^(.{8})(.{4})(.{4})(.{4})(.{12})$/)!
+            .slice(1)
+            .join('-');
+}