fix: don't display any image by default, everything goes through queue

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

@@ -3,7 +3,7 @@
  */
 
 // Configuration
-const MAX_CONCURRENT_LOADS = 3;
+const MAX_CONCURRENT_LOADS = 1;
 
 // State
 let activeLoads = 0;
@@ -38,7 +38,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 +51,7 @@ export function queueAudioForLoading(
         onError: (error) => {
           if (onError) onError(error);
           reject(error);
-        }
+        },
       });
     });
   }
@@ -68,7 +70,7 @@ export function queueAudioForLoading(
       onError: (error) => {
         if (onError) onError(error);
         reject(error);
-      }
+      },
     });
 
     // Try to process queue
@@ -81,10 +83,13 @@ export function queueAudioForLoading(
  */
 function processQueue() {
   // Group queue items by src to avoid duplicate loads
-  const nextBatch: Record<string, Array<{
+  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 +111,7 @@ function processQueue() {
 
     nextBatch[next.src].push({
       onComplete: next.onComplete,
-      onError: next.onError
+      onError: next.onError,
     });
   }
 
@@ -151,12 +156,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);