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
@@ -80,14 +93,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, _) => {
@@ -101,7 +114,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,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;
@@ -39,12 +35,10 @@ 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(
+    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,14 +49,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({
@@ -74,7 +68,7 @@ export function queueAudioForLoading(
       onError: (error) => {
         if (onError) onError(error);
         reject(error);
-      },
+      }
     });
 
     // Try to process queue
@@ -86,57 +80,40 @@ 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) {
     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);
-  }
 }
 
 /**
@@ -153,40 +130,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,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
  */