fix: don't display any image by default, everything goes through queue
This commit is contained in:
parent
ae5820a022
commit
33491dba3e
3 changed files with 41 additions and 45 deletions
|
@ -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")
|
||||
)
|
||||
|
|
|
@ -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")) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
|
||||
// Configuration
|
||||
const MAX_CONCURRENT_LOADS = 3;
|
||||
const MAX_CONCURRENT_LOADS = 1;
|
||||
|
||||
// State
|
||||
let activeLoads = 0;
|
||||
|
@ -35,10 +35,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 +51,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 +70,7 @@ export function queueAudioForLoading(
|
|||
onError: (error) => {
|
||||
if (onError) onError(error);
|
||||
reject(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Try to process queue
|
||||
|
@ -81,35 +83,38 @@ export function queueAudioForLoading(
|
|||
*/
|
||||
function processQueue() {
|
||||
// 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);
|
||||
|
@ -130,40 +135,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();
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue