feat: implement priority yielding between audio and image loaders to optimize resource loading

src/components/SVGContent.vue

@@ -469,6 +469,10 @@ async function processScrolls(svg: XMLDocument): Promise<VideoScrollDef[]> {
 
   return Promise.all(
     Array.from(svg.getElementsByTagName("image"))
+      .map((el) => {
+        el.removeAttribute("xlink:href");
+        return el;
+      })
       .filter((el) =>
         Array.from(el.children).some((el) => el.tagName == "desc")
       )

src/components/VideoScroll.vue

@@ -1,18 +1,5 @@
 <template>
   <div class="video-scroll" ref="root" v-if="definition.directions.length > 0">
-    <img
-      class="visible displayed loaded"
-      :src="definition.files[0]"
-      :style="{
-        top: `${Math.round(definition.top)}px`,
-        left: `${Math.round(definition.left)}px`,
-        width: isHorizontal ? `${Math.round(definition.width)}px` : 'auto',
-        height: isVertical ? `${Math.round(definition.height)}px` : 'auto',
-        transform: `rotate(${definition.angle}deg)`,
-      }"
-    />
-
-    <!--suppress RequiredAttributes -->
     <img
       v-for="(file, idx) in dynamicFiles"
       :key="`${idx}_${file.src}`"
@@ -43,7 +30,7 @@ export default defineComponent({
   },
   computed: {
     dynamicFiles(): { top: number; left: number; src: string }[] {
-      return this.definition.files.slice(1).map((src: string, idx: number) => {
+      return this.definition.files.map((src: string, idx: number) => {
         const cy =
           this.definition.top +
           (this.isVertical
@@ -93,14 +80,14 @@ export default defineComponent({
       // Setup image display when loaded
       element.classList.add("displayed");
       element.classList.add("loaded");
-      
+
       // Adjust dimensions based on scroll direction
       if (this.isHorizontal) {
         element.style.height = "auto";
       } else {
         element.style.width = "auto";
       }
-    }
+    },
   },
   mounted() {
     const observer = new IntersectionObserver((entries, _) => {
@@ -114,7 +101,7 @@ export default defineComponent({
             queueImageForLoading(element, function() {
               self.handleImageLoad(element);
             });
-            
+
             // Add a fallback to show the image after a timeout even if not fully loaded
             setTimeout(() => {
               if (!element.classList.contains("loaded")) {

src/services/AudioLoader.ts

@@ -1,9 +1,13 @@
 /**
  * Global audio loading queue service to prevent hitting browser connection limits
+ * Will yield to image loading if images are queued
  */
 
+import { hasQueuedImages } from "./ImageLoader";
+
 // Configuration
-const MAX_CONCURRENT_LOADS = 3;
+const MAX_CONCURRENT_LOADS = 1;
+const RETRY_DELAY_MS = 200; // Time to wait before retrying if yielding to images
 
 // State
 let activeLoads = 0;
@@ -35,10 +39,12 @@ export function queueAudioForLoading(
     if (onComplete) setTimeout(() => onComplete(blobUrl), 0);
     return Promise.resolve(blobUrl);
   }
-  
+
   // If this source is already being loaded, add to existing promises
   if (pendingLoads.has(src)) {
-    console.debug(`[AudioLoader] Already loading ${src}, adding to pending requests`);
+    console.debug(
+      `[AudioLoader] Already loading ${src}, adding to pending requests`
+    );
     return new Promise((resolve, reject) => {
       audioQueue.push({
         src,
@@ -49,14 +55,14 @@ export function queueAudioForLoading(
         onError: (error) => {
           if (onError) onError(error);
           reject(error);
-        }
+        },
       });
     });
   }
-  
+
   // Mark as pending
   pendingLoads.add(src);
-  
+
   return new Promise((resolve, reject) => {
     // Add to queue
     audioQueue.push({
@@ -68,7 +74,7 @@ export function queueAudioForLoading(
       onError: (error) => {
         if (onError) onError(error);
         reject(error);
-      }
+      },
     });
 
     // Try to process queue
@@ -80,40 +86,57 @@ export function queueAudioForLoading(
  * Process the next items in the queue if we have capacity
  */
 function processQueue() {
+  // Check if there are any images being loaded or queued - yield to them if so
+  if (hasQueuedImages()) {
+    console.debug("[AudioLoader] Yielding to image loader, will retry later");
+    // Schedule a retry after a short delay
+    setTimeout(processQueue, RETRY_DELAY_MS);
+    return;
+  }
+
   // Group queue items by src to avoid duplicate loads
-  const nextBatch: Record<string, Array<{
-    onComplete: (blobUrl: string) => void;
-    onError: (error: Error) => void;
-  }>> = {};
+  const nextBatch: Record<
+    string,
+    Array<{
+      onComplete: (blobUrl: string) => void;
+      onError: (error: Error) => void;
+    }>
+  > = {};
 
   // Find next items to process while respecting MAX_CONCURRENT_LOADS
   while (activeLoads < MAX_CONCURRENT_LOADS && audioQueue.length > 0) {
     const next = audioQueue.shift();
     if (!next) continue;
-    
+
     // If already cached, complete immediately without consuming a slot
     if (loadedAudioCache[next.src]) {
       next.onComplete(loadedAudioCache[next.src]);
       continue;
     }
-    
+
     // Group by src
     if (!nextBatch[next.src]) {
       nextBatch[next.src] = [];
       // Each unique src counts as one active load
       activeLoads++;
     }
-    
+
     nextBatch[next.src].push({
       onComplete: next.onComplete,
-      onError: next.onError
+      onError: next.onError,
     });
   }
-  
+
   // Start loading each unique audio file
   Object.entries(nextBatch).forEach(([src, handlers]) => {
     loadAudio(src, handlers);
   });
+
+  // If we have more items in the queue but didn't process them due to capacity limits,
+  // and no images are queued, schedule another processQueue call to check again soon
+  if (audioQueue.length > 0 && !hasQueuedImages()) {
+    setTimeout(processQueue, RETRY_DELAY_MS);
+  }
 }
 
 /**
@@ -130,40 +153,40 @@ async function loadAudio(
   }>
 ) {
   console.debug(`[AudioLoader] Loading ${src} (${handlers.length} listeners)`);
-  
+
   try {
     // Fetch the entire audio file
     const response = await fetch(src);
-    
+
     if (!response.ok) {
       throw new Error(`Failed to load audio: ${response.statusText}`);
     }
-    
+
     // Convert to blob to ensure full download
     const blob = await response.blob();
-    
+
     // Create a blob URL to use as the audio source
     const blobUrl = URL.createObjectURL(blob);
-    
+
     // Store in cache
     loadedAudioCache[src] = blobUrl;
-    
+
     console.debug(`[AudioLoader] Successfully loaded ${src}`);
-    
+
     // Call all completion handlers
-    handlers.forEach(handler => handler.onComplete(blobUrl));
+    handlers.forEach((handler) => handler.onComplete(blobUrl));
   } catch (error) {
     console.error(`[AudioLoader] Error loading audio: ${error}`);
-    
+
     // Call all error handlers
-    handlers.forEach(handler => handler.onError(error as Error));
+    handlers.forEach((handler) => handler.onError(error as Error));
   } finally {
     // Remove from pending loads
     pendingLoads.delete(src);
-    
+
     // Decrement counter when audio is loaded (or failed)
     activeLoads--;
-    
+
     // Process next audio in queue if available
     processQueue();
   }

src/services/ImageLoader.ts

@@ -12,6 +12,14 @@ const imageQueue: Array<{
   onComplete: () => void;
 }> = [];
 
+/**
+ * Check if there are any images queued or actively loading
+ * Used by other loaders to prioritize image loading
+ */
+export function hasQueuedImages(): boolean {
+  return imageQueue.length > 0 || activeLoads > 0;
+}
+
 /**
  * Queue an image for loading, respecting the global concurrent loading limit
  */