@rgby/collab-core 1.0.1

package/src/upload-queue.ts

@@ -0,0 +1,337 @@
+/**
+ * Upload Queue Manager
+ * Handles offline file uploads with IndexedDB queue
+ */
+
+export interface PendingUpload {
+    id: string;
+    spaceId: string;
+    documentId: string | null;
+    file: Blob;
+    filename: string;
+    mimeType: string;
+    timestamp: number;
+    retryCount: number;
+    tempUrl: string; // blob: URL for immediate display
+}
+
+export interface UploadQueueOptions {
+    dbName?: string;
+    storeName?: string;
+    maxRetries?: number;
+    retryDelay?: number; // Base delay in ms, exponential backoff
+}
+
+export type UploadQueueEventType = 'queue-changed' | 'upload-complete' | 'upload-failed';
+
+export interface UploadQueueEvent {
+    type: UploadQueueEventType;
+    upload?: PendingUpload;
+    error?: Error;
+}
+
+export class UploadQueueManager {
+    private db: IDBDatabase | null = null;
+    private dbName: string;
+    private storeName: string;
+    private maxRetries: number;
+    private retryDelay: number;
+    private listeners: Map<UploadQueueEventType, Set<(event: UploadQueueEvent) => void>> = new Map();
+    private isProcessing: boolean = false;
+
+    constructor(options: UploadQueueOptions = {}) {
+        this.dbName = options.dbName || 'collab-upload-queue';
+        this.storeName = options.storeName || 'pending_uploads';
+        this.maxRetries = options.maxRetries || 3;
+        this.retryDelay = options.retryDelay || 1000;
+
+        // Listen for online/offline events
+        window.addEventListener('online', () => {
+            console.log('[UploadQueue] Network online, processing queue');
+            this.processQueue();
+        });
+
+        window.addEventListener('offline', () => {
+            console.log('[UploadQueue] Network offline');
+        });
+    }
+
+    /**
+     * Initialize the IndexedDB database
+     */
+    async init(): Promise<void> {
+        if (this.db) return;
+
+        return new Promise((resolve, reject) => {
+            const request = indexedDB.open(this.dbName, 1);
+
+            request.onerror = () => {
+                reject(new Error('Failed to open IndexedDB'));
+            };
+
+            request.onsuccess = () => {
+                this.db = request.result;
+                console.log('[UploadQueue] IndexedDB initialized');
+                resolve();
+            };
+
+            request.onupgradeneeded = (event) => {
+                const db = (event.target as IDBOpenDBRequest).result;
+                if (!db.objectStoreNames.contains(this.storeName)) {
+                    const store = db.createObjectStore(this.storeName, { keyPath: 'id' });
+                    store.createIndex('timestamp', 'timestamp', { unique: false });
+                    store.createIndex('spaceId', 'spaceId', { unique: false });
+                    console.log('[UploadQueue] Object store created');
+                }
+            };
+        });
+    }
+
+    /**
+     * Add an upload to the queue
+     */
+    async add(upload: Omit<PendingUpload, 'id' | 'timestamp' | 'retryCount' | 'tempUrl'>): Promise<PendingUpload> {
+        await this.init();
+        if (!this.db) throw new Error('Database not initialized');
+
+        const id = `upload-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+        const tempUrl = URL.createObjectURL(upload.file);
+
+        const pendingUpload: PendingUpload = {
+            id,
+            spaceId: upload.spaceId,
+            documentId: upload.documentId,
+            file: upload.file,
+            filename: upload.filename,
+            mimeType: upload.mimeType,
+            timestamp: Date.now(),
+            retryCount: 0,
+            tempUrl
+        };
+
+        return new Promise((resolve, reject) => {
+            const transaction = this.db!.transaction([this.storeName], 'readwrite');
+            const store = transaction.objectStore(this.storeName);
+            const request = store.add(pendingUpload);
+
+            request.onsuccess = () => {
+                console.log('[UploadQueue] Upload added to queue:', id);
+                this.emit('queue-changed', { type: 'queue-changed', upload: pendingUpload });
+                resolve(pendingUpload);
+            };
+
+            request.onerror = () => {
+                reject(new Error('Failed to add upload to queue'));
+            };
+        });
+    }
+
+    /**
+     * Get all pending uploads
+     */
+    async getAll(): Promise<PendingUpload[]> {
+        await this.init();
+        if (!this.db) return [];
+
+        return new Promise((resolve, reject) => {
+            const transaction = this.db!.transaction([this.storeName], 'readonly');
+            const store = transaction.objectStore(this.storeName);
+            const request = store.getAll();
+
+            request.onsuccess = () => {
+                resolve(request.result || []);
+            };
+
+            request.onerror = () => {
+                reject(new Error('Failed to get uploads from queue'));
+            };
+        });
+    }
+
+    /**
+     * Remove an upload from the queue
+     */
+    async remove(id: string): Promise<void> {
+        await this.init();
+        if (!this.db) return;
+
+        return new Promise((resolve, reject) => {
+            const transaction = this.db!.transaction([this.storeName], 'readwrite');
+            const store = transaction.objectStore(this.storeName);
+            const request = store.delete(id);
+
+            request.onsuccess = () => {
+                console.log('[UploadQueue] Upload removed from queue:', id);
+                this.emit('queue-changed', { type: 'queue-changed' });
+                resolve();
+            };
+
+            request.onerror = () => {
+                reject(new Error('Failed to remove upload from queue'));
+            };
+        });
+    }
+
+    /**
+     * Update an upload in the queue
+     */
+    async update(upload: PendingUpload): Promise<void> {
+        await this.init();
+        if (!this.db) return;
+
+        return new Promise((resolve, reject) => {
+            const transaction = this.db!.transaction([this.storeName], 'readwrite');
+            const store = transaction.objectStore(this.storeName);
+            const request = store.put(upload);
+
+            request.onsuccess = () => {
+                resolve();
+            };
+
+            request.onerror = () => {
+                reject(new Error('Failed to update upload in queue'));
+            };
+        });
+    }
+
+    /**
+     * Clear all uploads from the queue
+     */
+    async clear(): Promise<void> {
+        await this.init();
+        if (!this.db) return;
+
+        // Revoke all blob URLs first
+        const uploads = await this.getAll();
+        uploads.forEach(upload => {
+            if (upload.tempUrl.startsWith('blob:')) {
+                URL.revokeObjectURL(upload.tempUrl);
+            }
+        });
+
+        return new Promise((resolve, reject) => {
+            const transaction = this.db!.transaction([this.storeName], 'readwrite');
+            const store = transaction.objectStore(this.storeName);
+            const request = store.clear();
+
+            request.onsuccess = () => {
+                console.log('[UploadQueue] Queue cleared');
+                this.emit('queue-changed', { type: 'queue-changed' });
+                resolve();
+            };
+
+            request.onerror = () => {
+                reject(new Error('Failed to clear queue'));
+            };
+        });
+    }
+
+    /**
+     * Process the queue - upload pending files
+     */
+    async processQueue(uploadFn?: (upload: PendingUpload) => Promise<any>): Promise<void> {
+        if (this.isProcessing || !navigator.onLine) {
+            console.log('[UploadQueue] Skipping queue processing (processing:', this.isProcessing, 'online:', navigator.onLine, ')');
+            return;
+        }
+
+        this.isProcessing = true;
+        console.log('[UploadQueue] Processing queue...');
+
+        try {
+            const uploads = await this.getAll();
+            console.log('[UploadQueue] Found', uploads.length, 'pending uploads');
+
+            for (const upload of uploads) {
+                try {
+                    if (!uploadFn) {
+                        console.warn('[UploadQueue] No upload function provided, skipping upload:', upload.id);
+                        continue;
+                    }
+
+                    console.log('[UploadQueue] Processing upload:', upload.id);
+                    const result = await uploadFn(upload);
+
+                    // Success - remove from queue and revoke blob URL
+                    await this.remove(upload.id);
+                    if (upload.tempUrl.startsWith('blob:')) {
+                        URL.revokeObjectURL(upload.tempUrl);
+                    }
+
+                    this.emit('upload-complete', { type: 'upload-complete', upload });
+                    console.log('[UploadQueue] Upload complete:', upload.id);
+                } catch (error) {
+                    console.error('[UploadQueue] Upload failed:', upload.id, error);
+
+                    // Increment retry count
+                    upload.retryCount += 1;
+
+                    if (upload.retryCount >= this.maxRetries) {
+                        // Max retries reached - remove from queue
+                        console.error('[UploadQueue] Max retries reached, removing:', upload.id);
+                        await this.remove(upload.id);
+                        if (upload.tempUrl.startsWith('blob:')) {
+                            URL.revokeObjectURL(upload.tempUrl);
+                        }
+                        this.emit('upload-failed', { type: 'upload-failed', upload, error: error as Error });
+                    } else {
+                        // Update retry count and schedule retry
+                        await this.update(upload);
+                        console.log('[UploadQueue] Retry scheduled for:', upload.id, 'attempt:', upload.retryCount);
+
+                        // Exponential backoff
+                        const delay = this.retryDelay * Math.pow(2, upload.retryCount - 1);
+                        await new Promise(resolve => setTimeout(resolve, delay));
+                    }
+                }
+            }
+        } finally {
+            this.isProcessing = false;
+            console.log('[UploadQueue] Queue processing complete');
+        }
+    }
+
+    /**
+     * Get the number of pending uploads
+     */
+    async count(): Promise<number> {
+        const uploads = await this.getAll();
+        return uploads.length;
+    }
+
+    /**
+     * Add event listener
+     */
+    on(event: UploadQueueEventType, callback: (event: UploadQueueEvent) => void): () => void {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, new Set());
+        }
+        this.listeners.get(event)!.add(callback);
+
+        // Return unsubscribe function
+        return () => {
+            this.listeners.get(event)?.delete(callback);
+        };
+    }
+
+    /**
+     * Emit event
+     */
+    private emit(event: UploadQueueEventType, data: UploadQueueEvent): void {
+        const callbacks = this.listeners.get(event);
+        if (callbacks) {
+            callbacks.forEach(callback => callback(data));
+        }
+    }
+
+    /**
+     * Close the database connection
+     */
+    async close(): Promise<void> {
+        if (this.db) {
+            this.db.close();
+            this.db = null;
+            console.log('[UploadQueue] Database closed');
+        }
+    }
+}