Fix certain Gifs not loading

https://burtrum.org/up/2529a1fc-29cc-47bf-a7a9-7bc081382c54/winkgrin.gif

package-lock.json

@@ -53,7 +53,7 @@
         "karma-jasmine": "^5.0.0",
         "karma-jasmine-html-reporter": "^1.7.0",
         "karma-webpack": "^5.0.0",
-        "lerna": "^5.5.1",
+        "lerna": "^5.6.2",
         "mini-css-extract-plugin": "^2.6.0",
         "minimist": "^1.2.6",
         "po-loader": "0.6.1",

package.json

@@ -87,7 +87,7 @@
     "karma-jasmine": "^5.0.0",
     "karma-jasmine-html-reporter": "^1.7.0",
     "karma-webpack": "^5.0.0",
-    "lerna": "^5.5.1",
+    "lerna": "^5.6.2",
     "mini-css-extract-plugin": "^2.6.0",
     "minimist": "^1.2.6",
     "po-loader": "0.6.1",
@@ -105,13 +105,24 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
+    "@converse/openpromise": "^0.0.1",
+    "@converse/skeletor": "0.0.7",
     "bootstrap": "^4.6.0",
     "bootstrap.native": "^2.0.27",
     "client-compress": "^2.2.2",
+    "dayjs": "1.11.3",
     "dompurify": "^2.3.1",
     "favico.js-slevomat": "^0.3.11",
+    "filesize": "^7.0.0",
     "jed": "1.1.1",
-    "lit": "^2.4.0"
+    "lit": "^2.4.0",
+    "localforage-webextensionstorage-driver": "^3.0.0",
+    "lodash-es": "^4.17.21",
+    "pluggable.js": "3.0.1",
+    "sizzle": "^2.3.5",
+    "sprintf-js": "^1.1.2",
+    "strophe.js": "1.5.0",
+    "urijs": "^1.19.10"
   },
   "resolutions": {
     "autoprefixer": "10.4.5"

src/shared/components/gif.js

@@ -90,9 +90,11 @@ export default class ConverseGIFElement extends CustomElement {
 
     onControlsClicked (ev) {
         ev.preventDefault();
+
+
         if (this.supergif.playing) {
             this.supergif.pause();
-        } else {
+        } else if (this.supergif.frames.length > 0) {
             // When the user manually clicks play, we turn on looping
             this.supergif.options.loop = true;
             this.supergif.play();

src/shared/gif/index.js

@@ -30,8 +30,7 @@ export default class ConverseGif {
      * @param { Number } [options.progress_bar_height=5]
      */
     constructor (el, opts) {
-        this.options = Object.assign(
-            {
+        this.options = Object.assign({
                 width: null,
                 height: null,
                 autoplay: true,
@@ -100,6 +99,9 @@ export default class ConverseGif {
      * @returns {number}
      */
     getNextFrameNo () {
+        if (this.frames.length === 0) {
+            return 0;
+        }
         return (this.frame_idx + 1 + this.frames.length) % this.frames.length;
     }
 
@@ -286,10 +288,6 @@ export default class ConverseGif {
      */
     handleEOF (stream) {
         this.doDecodeProgress(stream, false);
-        if (!(this.options.width && this.options.height)) {
-            this.canvas.width = this.hdr.width * this.getCanvasScale();
-            this.canvas.height = this.hdr.height * this.getCanvasScale();
-        }
         this.initPlayer();
         !this.options.autoplay && this.drawPlayIcon();
     }
@@ -394,11 +392,10 @@ export default class ConverseGif {
      * @param { Number } i - The frame index
      */
     putFrame (i, show_pause_on_hover=true) {
+        if (!this.frames.length) return
+
         i = parseInt(i, 10);
-        if (i > this.frames.length - 1) {
-            i = 0;
-        }
-        if (i < 0) {
+        if (i > this.frames.length - 1 || i < 0) {
             i = 0;
         }
         const offset = this.frame_offsets[i];