src/components/SVGContent.vue

@@ -469,10 +469,6 @@ 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,5 +1,18 @@
 <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}`"
@@ -30,7 +43,7 @@ export default defineComponent({
   },
   computed: {
     dynamicFiles(): { top: number; left: number; src: string }[] {
-      return this.definition.files.map((src: string, idx: number) => {
+      return this.definition.files.slice(1).map((src: string, idx: number) => {
         const cy =
           this.definition.top +
           (this.isVertical
@@ -87,7 +100,7 @@ export default defineComponent({
       } else {
         element.style.width = "auto";
       }
-    },
+    }
   },
   mounted() {
     const observer = new IntersectionObserver((entries, _) => {

src/services/AudioLoader.ts

@@ -1,13 +1,9 @@
 /**
  * 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 = 1;
+const MAX_CONCURRENT_LOADS = 3;
-const RETRY_DELAY_MS = 200; // Time to wait before retrying if yielding to images
 
 // State
 let activeLoads = 0;
@@ -42,9 +38,7 @@ export function queueAudioForLoading(
   
   // If this source is already being loaded, add to existing promises
   if (pendingLoads.has(src)) {
-    console.debug(
+    console.debug(`[AudioLoader] Already loading ${src}, adding to pending requests`);
-      `[AudioLoader] Already loading ${src}, adding to pending requests`
-    );
     return new Promise((resolve, reject) => {
       audioQueue.push({
         src,
@@ -55,7 +49,7 @@ export function queueAudioForLoading(
         onError: (error) => {
           if (onError) onError(error);
           reject(error);
-        },
+        }
       });
     });
   }
@@ -74,7 +68,7 @@ export function queueAudioForLoading(
       onError: (error) => {
         if (onError) onError(error);
         reject(error);
-      },
+      }
     });
 
     // Try to process queue
@@ -86,22 +80,11 @@ 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<
+  const nextBatch: Record<string, Array<{
-    string,
+    onComplete: (blobUrl: string) => void;
-    Array<{
+    onError: (error: Error) => void;
-      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) {
@@ -123,7 +106,7 @@ function processQueue() {
     
     nextBatch[next.src].push({
       onComplete: next.onComplete,
-      onError: next.onError,
+      onError: next.onError
     });
   }
   
@@ -131,12 +114,6 @@ 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);
-  }
 }
 
 /**
@@ -174,12 +151,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,14 +12,6 @@ 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
  */