Re-calculate maxCachedImages based on number of available frames

mediamonks · Jan 6, 2025 · b94cdcf · b94cdcf
1 parent 5eba9db
commit b94cdcf
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/src/lib/FastImageSequence.ts b/src/lib/FastImageSequence.ts
@@ -441,7 +441,7 @@ export class FastImageSequence {
     }
 
     this.lastFrameDrawn = frame.index;
-    this.canvas.setAttribute('data-frame', frame.index.toString());
+    // this.canvas.setAttribute('data-frame', frame.index.toString());
     this.drawImage(image);
   }
 
@@ -459,23 +459,22 @@ export class FastImageSequence {
 
     if (this.options.objectFit === 'contain') {
       // contain
-      const canvasWidth = containerAspect > imageAspect ? this.height * containerAspect : this.width;
-      const canvasHeight = containerAspect > imageAspect ? this.height : this.width / containerAspect;
+      const canvasWidth = (containerAspect > imageAspect ? this.height * containerAspect : this.width) | 0;
+      const canvasHeight = (containerAspect > imageAspect ? this.height : this.width / containerAspect) | 0;
 
       if (this.canvas.width !== canvasWidth || this.canvas.height !== this.height) {
         this.canvas.width = canvasWidth;
         this.canvas.height = canvasHeight;
       }
     } else {
       // cover
-      const canvasWidth = containerAspect > imageAspect ? this.width : this.height * containerAspect;
-      const canvasHeight = containerAspect > imageAspect ? this.width / containerAspect : this.height;
+      const canvasWidth = (containerAspect > imageAspect ? this.width : this.height * containerAspect) | 0;
+      const canvasHeight = (containerAspect > imageAspect ? this.width / containerAspect : this.height) | 0;
 
       if (this.canvas.width !== canvasWidth || this.canvas.height !== this.height) {
         this.canvas.width = canvasWidth;
         this.canvas.height = canvasHeight;
       }
-
     }
 
     const dx = (this.canvas.width - this.width) * this.options.horizontalAlign;

diff --git a/src/lib/ImageSource.ts b/src/lib/ImageSource.ts
@@ -55,15 +55,18 @@ export default class ImageSource {
     this.index = index;
     this.options = {...ImageSource.defaultOptions, ...options};
 
-    this.options.maxCachedImages = clamp(Math.floor(this.options.maxCachedImages), 1, this.context.options.frames);
-
     this.context.frames.forEach(frame => frame.images[index] = new ImageElement(this, frame));
   }
 
   public get type() {
     return INPUT_CODE;
   }
 
+  public get maxCachedImages() {
+    const max = this.initialized ? this.images.filter(a => a.available).length : this.context.options.frames;
+    return clamp(Math.floor(this.options.maxCachedImages), 1, max);
+  }
+
   protected get images(): ImageElement[] {
     return this.context.frames.map(frame => frame.images[this.index] as ImageElement);
   }
@@ -74,8 +77,7 @@ export default class ImageSource {
    * @param onProgress - A callback function that is called with the progress of the loading.
    */
   public setMaxCachedImages(maxCache: number, onProgress?: (progress: number) => void): Promise<boolean> {
-    const max = this.initialized ? this.images.filter(a => a.available).length : this.context.options.frames;
-    this.options.maxCachedImages = clamp(maxCache, 1, max);
+    this.options.maxCachedImages = maxCache;
     return this.context.onLoadProgress(onProgress);
   }
 
@@ -92,7 +94,6 @@ export default class ImageSource {
     }
 
     this.initialized = true;
-    this.setMaxCachedImages(this.options.maxCachedImages);
   }
 
   public process(setLoadingPriority: () => void) {
@@ -106,7 +107,7 @@ export default class ImageSource {
 
     while (numLoading < maxConnectionLimit && imagesToLoad.length > 0) {
       const image = imagesToLoad.shift() as ImageElement;
-      if (image.frame.priority < maxLoadedPriority || numLoaded < this.options.maxCachedImages - numLoading) {
+      if (image.frame.priority < maxLoadedPriority || numLoaded < this.maxCachedImages - numLoading) {
         image.loading = true;
         this.fetchImage(image).then((imageElement) => {
           if (image.loading) {
@@ -127,7 +128,7 @@ export default class ImageSource {
   public getLoadStatus() {
     const numLoading = this.images.filter(a => a.loading).length;
     const numLoaded = this.images.filter(a => a.image !== undefined).length;
-    const maxLoaded = this.options.maxCachedImages;
+    const maxLoaded = this.maxCachedImages;
     const progress = Math.max(0, numLoaded - numLoading) / Math.max(1, maxLoaded);
     return {progress, numLoading, numLoaded, maxLoaded};
   }
@@ -152,7 +153,7 @@ export default class ImageSource {
 
   private releaseImageWithLowestPriority() {
     const loadedImages = this.images.filter(a => a.image !== undefined && !a.loading);
-    if (loadedImages.length > this.options.maxCachedImages) {
+    if (loadedImages.length > this.maxCachedImages) {
       const sortedFrame = loadedImages.sort((a, b) => a.frame.priority - b.frame.priority).pop();
       if (sortedFrame) {
         sortedFrame.releaseImage();

diff --git a/src/lib/ImageSourceFetch.ts b/src/lib/ImageSourceFetch.ts
@@ -22,9 +22,9 @@ export default class ImageSourceFetch extends ImageSource {
             releaseImageFetchWorker(worker);
           }).catch(e => reject(e));
         } else {
-          const imgElement = new Image();
-          loadImage(imgElement, imageElement.imageURL).then(() => {
-            resolve(imgElement);
+          const img = new Image();
+          loadImage(img, imageElement.imageURL).then(() => {
+            resolve(img);
           }).catch(e => reject(e));
         }
       } else {