Merge pull request scratchfoundation#4557 from paulkaplan/hotfix/gif-frames

Fix loading single frame gifs by removing onDone in favor of indices

Author: paulkaplan

src/lib/file-uploader.js

@@ -118,15 +118,14 @@ const costumeUpload = function (fileData, fileType, storage, handleCostume, hand
     }
     case 'image/gif': {
         let costumes = [];
-        const onFrame = (frameNumber, dataUrl) => {
+        gifDecoder(fileData, (frameNumber, dataUrl, numFrames) => {
             costumeUpload(dataUrl, 'image/png', storage, costumes_ => {
                 costumes = costumes.concat(costumes_);
+                if (frameNumber === numFrames - 1) {
+                    handleCostume(costumes);
+                }
             }, handleError);
-        };
-        const onDone = () => {
-            handleCostume(costumes);
-        };
-        gifDecoder(fileData, {onFrame, onDone});
+        });
         return; // Abandon this load, do not try to load gif itself
     }
     default:

src/lib/gif-decoder.js

@@ -1,9 +1,10 @@
 import {GifReader} from 'omggif';
 
-export default (arrayBuffer, {onFrame, onDone}) => {
+export default (arrayBuffer, onFrame) => {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
     const gifReader = new GifReader(new Uint8Array(arrayBuffer));
+    const numFrames = gifReader.numFrames();
     canvas.width = gifReader.width;
     canvas.height = gifReader.height;
 
@@ -14,7 +15,6 @@ export default (arrayBuffer, {onFrame, onDone}) => {
         const framePixels = [];
         gifReader.decodeAndBlitFrameRGBA(i, framePixels);
         const {x, y, width, height, disposal} = gifReader.frameInfo(i);
-
         for (let row = 0; row < height; row++) {
             for (let column = 0; column < width; column++) {
                 const indexOffset = 4 * (x + (y * canvas.width));
@@ -47,16 +47,12 @@ export default (arrayBuffer, {onFrame, onDone}) => {
             break;
 
         }
-        onFrame(i, dataUrl);
+        onFrame(i, dataUrl, numFrames);
 
-        if (i < gifReader.numFrames() - 1) {
+        if (i < numFrames - 1) {
             setTimeout(() => {
                 loadFrame(i + 1);
             });
-        } else {
-            setTimeout(() => {
-                onDone();
-            });
         }
     };