@entryline/gifstream - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

package.json

 {
   "name": "@entryline/gifstream",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A JavaScript library for creating high resolution GIFs",
@@ -5,0 +5,0 @@ "main": "./src/js/gif.js",

README.md

@@ -10,3 +10,3 @@ gifStream is a JavaScript tool for creating large animated graphics on the web.
 ```javascript
-  import GifStream from 'gifStream'
+  import GifStream from '@entryline/gifstream';
 
@@ -45,3 +45,16 @@ const gifStream = new GifStream();
 ```
+## Cancel requests
+Tested in chrome, Edge, and Firefox (and does not break anything in IE)
 
+```javascript
+createGif() {
+  gifStream.createGIF({this.options})
+  this.isDownloading = true;
+}
+componentWillUnmount() {
+  if (this.isDownloading) {
+    gifStream.cancel();
+  }
+}
+  ```
 ## Credits
@@ -48,0 +61,0 @@

src/js/gif.js

@@ -5,3 +5,3 @@ import GifWriter from "gifwriter";
 import { ReadableStream } from "web-streams-polyfill";
-
+Promise.config({ cancellation: true });
 export default class GifStream {
@@ -88,2 +88,10 @@ constructor() {
   }
+  cancel() {
+    this.cancelled = true;
+    if (this.promise) {
+      this.promise.cancel();
+    } else {
+      this.cancelled = true;
+    }
+  }
   /**
@@ -100,2 +108,3 @@ * Create GIF from options
     this.canvas = document.createElement("canvas");
+    this.cancelled = false;
     this.ctx = this.canvas.getContext("2d");
@@ -120,3 +129,8 @@ this.options = options;
     }
-    Promise.all(imagePromiseArray).then(images => {
+    function returnCancel() {
+      console.warn("GIF creation has been cancelled");
+      callback({ cancelled: true });
+    }
+
+    this.promise = Promise.all(imagePromiseArray).then(images => {
       var gifStream = this.getStream(images, this.ctx);
@@ -126,3 +140,3 @@ var reader = gifStream.getReader();
       var processedImages = 1;
-      function finished(chunks) {
+      const finished = chunks => {
         const callbackObj = {
@@ -133,10 +147,12 @@ blob: new Blob(chunks, { type: "image/gif" }),
         callback(callbackObj);
-      }
+      };
 
-      function pull() {
+      const pull = () => {
         const imageLength = options.images.length;
-        return reader.read().then(function(result) {
+        return reader.read().then(result => {
           const chunk = result.value;
           if (result.done) {
             finished(chunks);
+          } else if (this.cancelled) {
+            returnCancel();
           } else {
@@ -148,3 +164,3 @@ chunks.push(new Uint8Array(chunk));
             processedImages++;
-            setTimeout(function() {
+            setTimeout(() => {
               // This was needed in order for callback to be applied
@@ -155,3 +171,3 @@ return pull();
         });
-      }
+      };
       options.progressCallback(0);
@@ -162,3 +178,3 @@ pull();
   getImagePromise(frame) {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve, reject, onCancel) => {
       var img = new Image();
@@ -182,2 +198,5 @@ img.width = this.options.gifWidth;
       img.src = frame.src;
+      onCancel(() => {
+        img.src = ""; // https://stackoverflow.com/a/5278475
+      });
     });
@@ -184,0 +203,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

38074

increased by2.17%

Lines of code

1077

increased by1.8%

Number of lines in readme file

63

increased by26%

No dependency changes