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
@@ -100,7 +87,7 @@ export default defineComponent({
       } else {
         element.style.width = "auto";
       }
-    }
+    },
   },
   mounted() {
     const observer = new IntersectionObserver((entries, _) => {

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;
@@ -38,7 +42,9 @@ export function queueAudioForLoading(
 
   // 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,7 +55,7 @@ export function queueAudioForLoading(
         onError: (error) => {
           if (onError) onError(error);
           reject(error);
-        }
+        },
       });
     });
   }
@@ -68,7 +74,7 @@ export function queueAudioForLoading(
       onError: (error) => {
         if (onError) onError(error);
         reject(error);
-      }
+      },
     });
 
     // Try to process queue
@@ -80,11 +86,22 @@ 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) {
@@ -106,7 +123,7 @@ function processQueue() {
 
     nextBatch[next.src].push({
       onComplete: next.onComplete,
-      onError: next.onError
+      onError: next.onError,
     });
   }
 
@@ -114,6 +131,12 @@ function processQueue() {
   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);
+  }
 }
 
 /**
@@ -151,12 +174,12 @@ async function loadAudio(
     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);

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
  */