- Added another sequence to examples

- Set data-frame attribute to canvas with number of last drawn frame
mediamonks · Jul 3, 2024 · 7976e06 · 7976e06
1 parent fe17c0b
commit 7976e06
Show file tree

Hide file tree

Showing 97 changed files with 16 additions and 11 deletions.
diff --git a/example/public/0001.webp b/example/public/0001.webp
diff --git a/example/public/0002.webp b/example/public/0002.webp
diff --git a/example/public/0003.webp b/example/public/0003.webp
diff --git a/example/public/0004.webp b/example/public/0004.webp
diff --git a/example/public/0005.webp b/example/public/0005.webp
diff --git a/example/public/0006.webp b/example/public/0006.webp
diff --git a/example/public/0007.webp b/example/public/0007.webp
diff --git a/example/public/0008.webp b/example/public/0008.webp
diff --git a/example/public/0009.webp b/example/public/0009.webp
diff --git a/example/public/0010.webp b/example/public/0010.webp
diff --git a/example/public/0011.webp b/example/public/0011.webp
diff --git a/example/public/0012.webp b/example/public/0012.webp
diff --git a/example/public/0013.webp b/example/public/0013.webp
diff --git a/example/public/0014.webp b/example/public/0014.webp
diff --git a/example/public/0015.webp b/example/public/0015.webp
diff --git a/example/public/0016.webp b/example/public/0016.webp
diff --git a/example/public/0017.webp b/example/public/0017.webp
diff --git a/example/public/0018.webp b/example/public/0018.webp
diff --git a/example/public/0019.webp b/example/public/0019.webp
diff --git a/example/public/0020.webp b/example/public/0020.webp
diff --git a/example/public/0021.webp b/example/public/0021.webp
diff --git a/example/public/0022.webp b/example/public/0022.webp
diff --git a/example/public/0023.webp b/example/public/0023.webp
diff --git a/example/public/0024.webp b/example/public/0024.webp
diff --git a/example/public/0025.webp b/example/public/0025.webp
diff --git a/example/public/0026.webp b/example/public/0026.webp
diff --git a/example/public/0027.webp b/example/public/0027.webp
diff --git a/example/public/0028.webp b/example/public/0028.webp
diff --git a/example/public/0029.webp b/example/public/0029.webp
diff --git a/example/public/0030.webp b/example/public/0030.webp
diff --git a/example/public/0031.webp b/example/public/0031.webp
diff --git a/example/public/0032.webp b/example/public/0032.webp
diff --git a/example/public/0033.webp b/example/public/0033.webp
diff --git a/example/public/0034.webp b/example/public/0034.webp
diff --git a/example/public/0035.webp b/example/public/0035.webp
diff --git a/example/public/0036.webp b/example/public/0036.webp
diff --git a/example/public/0037.webp b/example/public/0037.webp
diff --git a/example/public/0038.webp b/example/public/0038.webp
diff --git a/example/public/0039.webp b/example/public/0039.webp
diff --git a/example/public/0040.webp b/example/public/0040.webp
diff --git a/example/public/0041.webp b/example/public/0041.webp
diff --git a/example/public/0042.webp b/example/public/0042.webp
diff --git a/example/public/0043.webp b/example/public/0043.webp
diff --git a/example/public/0044.webp b/example/public/0044.webp
diff --git a/example/public/0045.webp b/example/public/0045.webp
diff --git a/example/public/0046.webp b/example/public/0046.webp
diff --git a/example/public/0047.webp b/example/public/0047.webp
diff --git a/example/public/0048.webp b/example/public/0048.webp
diff --git a/example/public/0049.webp b/example/public/0049.webp
diff --git a/example/public/0050.webp b/example/public/0050.webp
diff --git a/example/public/0051.webp b/example/public/0051.webp
diff --git a/example/public/0052.webp b/example/public/0052.webp
diff --git a/example/public/0053.webp b/example/public/0053.webp
diff --git a/example/public/0054.webp b/example/public/0054.webp
diff --git a/example/public/0055.webp b/example/public/0055.webp
diff --git a/example/public/0056.webp b/example/public/0056.webp
diff --git a/example/public/0057.webp b/example/public/0057.webp
diff --git a/example/public/0058.webp b/example/public/0058.webp
diff --git a/example/public/0059.webp b/example/public/0059.webp
diff --git a/example/public/0060.webp b/example/public/0060.webp
diff --git a/example/public/0061.webp b/example/public/0061.webp
diff --git a/example/public/0062.webp b/example/public/0062.webp
diff --git a/example/public/0063.webp b/example/public/0063.webp
diff --git a/example/public/0064.webp b/example/public/0064.webp
diff --git a/example/public/0065.webp b/example/public/0065.webp
diff --git a/example/public/0066.webp b/example/public/0066.webp
diff --git a/example/public/0067.webp b/example/public/0067.webp
diff --git a/example/public/0068.webp b/example/public/0068.webp
diff --git a/example/public/0069.webp b/example/public/0069.webp
diff --git a/example/public/0070.webp b/example/public/0070.webp
diff --git a/example/public/0071.webp b/example/public/0071.webp
diff --git a/example/public/0072.webp b/example/public/0072.webp
diff --git a/example/public/0073.webp b/example/public/0073.webp
diff --git a/example/public/0074.webp b/example/public/0074.webp
diff --git a/example/public/0075.webp b/example/public/0075.webp
diff --git a/example/public/0076.webp b/example/public/0076.webp
diff --git a/example/public/0077.webp b/example/public/0077.webp
diff --git a/example/public/0078.webp b/example/public/0078.webp
diff --git a/example/public/0079.webp b/example/public/0079.webp
diff --git a/example/public/0080.webp b/example/public/0080.webp
diff --git a/example/public/0081.webp b/example/public/0081.webp
diff --git a/example/public/0082.webp b/example/public/0082.webp
diff --git a/example/public/0083.webp b/example/public/0083.webp
diff --git a/example/public/0084.webp b/example/public/0084.webp
diff --git a/example/public/0085.webp b/example/public/0085.webp
diff --git a/example/public/0086.webp b/example/public/0086.webp
diff --git a/example/public/0087.webp b/example/public/0087.webp
diff --git a/example/public/0088.webp b/example/public/0088.webp
diff --git a/example/public/0089.webp b/example/public/0089.webp
diff --git a/example/public/0090.webp b/example/public/0090.webp
diff --git a/example/public/lowrespreviews.tar b/example/public/lowrespreviews.tar
diff --git a/example/src/exampleConstructDestructTest.js b/example/src/exampleConstructDestructTest.js
@@ -16,12 +16,12 @@ function createFastImageSequence(container) {
     const src = [];
 
     const imageSrc = {
-        imageURL: (i) => `${('' + (i + 1)).padStart(4, '0')}.webp`,
+        imageURL: (i) => `sequence_1/${('' + (i + 1)).padStart(4, '0')}.webp`,
         useWorker: Math.random() > .5, // default true
         maxCachedImages: (1 + Math.random() * 32) | 0, // default 32
     };
     const tarSrc = {
-        tarURL: 'lowrespreviews.tar',
+        tarURL: 'sequence_1/lowrespreviews.tar',
         imageURL: (i) => `${('' + (i + 1)).padStart(4, '0')}.jpg`,
         useWorker: Math.random() > .5, // default true
         maxCachedImages: (1 + Math.random() * 32) | 0, // default 32

diff --git a/example/src/exampleLoadTar.js b/example/src/exampleLoadTar.js
@@ -16,7 +16,7 @@ function blobToDataURL(blob) {
 
 export async function initExampleLoadTar(container) {
     // load tar file with lowres previews
-    fetch('lowrespreviews.tar').then(async (response) => {
+    fetch('sequence_1/lowrespreviews.tar').then(async (response) => {
         const blob = await response.blob();
         const dataURL = await blobToDataURL(blob);
 

diff --git a/example/src/examplePlayBackwards.js b/example/src/examplePlayBackwards.js
@@ -3,13 +3,13 @@ import {FastImageSequence} from '../../src/index';
 export async function initExamplePlayBackwards(container) {
     const fastImageSequence = new FastImageSequence(container, {
         name: 'PlayBackwardsTest at 200fps',
-        frames: 89,
+        frames: 120,
         src: {
-            imageURL: (i) => `${('' + (i + 1)).padStart(4, '0')}.webp`,
+            imageURL: (i) => `sequence_2/${('' + (i + 1)).padStart(3, '0')}.jpg`,
         },
         // optional arguments:
         loop: true, // default false
-        objectFit: 'cover', // default 'cover'
+        objectFit: 'contain', // default 'cover'
         fillStyle: '#00000000', // default #00000000
         clearCanvas: false, // default false
         showDebugInfo: true,

diff --git a/example/src/exampleStillImage.js b/example/src/exampleStillImage.js
@@ -5,7 +5,7 @@ export async function initExampleStillImage(container) {
         name: 'StillImageTest',
         frames: 89,
         src: {
-            imageURL: (i) => `${('' + (i + 1)).padStart(4, '0')}.webp`,
+            imageURL: (i) => `sequence_1/${('' + (i + 1)).padStart(4, '0')}.webp`,
             maxCachedImages: 1, // default 32
             useWorker: true,
         },

diff --git a/example/src/exampleWithControl.js b/example/src/exampleWithControl.js
@@ -10,11 +10,11 @@ export async function initExampleWithControl(container) {
         frames: 89,
         src: [
             {
-                imageURL: (i) => `${('' + (i + 1)).padStart(4, '0')}.webp`,
+                imageURL: (i) => `sequence_1/${('' + (i + 1)).padStart(4, '0')}.webp`,
                 maxCachedImages: 8, // default 32
             },
             {
-                tarURL: 'lowrespreviews.tar',
+                tarURL: 'sequence_1/lowrespreviews.tar',
                 imageURL: (i) => `${('' + (i + 1)).padStart(4, '0')}.jpg`
             }
         ],

diff --git a/src/lib/FastImageSequence.ts b/src/lib/FastImageSequence.ts
@@ -350,7 +350,12 @@ export class FastImageSequence {
       this.log('Poster image', this.options.poster);
       const posterImage = new Image();
       posterImage.src = this.options.poster;
-      await posterImage.decode().then(() => this.drawImage(this.posterImage = posterImage)).catch((e) => this.log(e));
+      await posterImage.decode().then(() => {
+        this.posterImage = posterImage;
+        if (this.lastFrameDrawn < 0) {
+          this.drawImage(this.posterImage);
+        }
+      }).catch((e) => this.log(e));
     }
     await Promise.all(this.sources.map(src => src.loadResources()));
     await this.getFrameImage(0);
@@ -436,7 +441,7 @@ export class FastImageSequence {
     }
 
     this.lastFrameDrawn = frame.index;
-
+    this.canvas.setAttribute('data-frame', frame.index.toString());
     this.drawImage(image);
   }