@rive-app/webgl2 2.14.4 → 2.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/webgl2",
-  "version": "2.14.4",
+  "version": "2.15.1",
   "description": "Rive's webgl2 based web api.",
   "main": "rive.js",
   "homepage": "https://rive.app",

package/rive.d.ts

@@ -1,5 +1,5 @@
 import * as rc from "./rive_advanced.mjs";
-export type { FileAsset, FontAsset, ImageAsset } from "./rive_advanced.mjs";
+export type { FileAsset, AudioAsset, FontAsset, ImageAsset, } from "./rive_advanced.mjs";
 /**
  * Generic type for a parameterless void callback
  */
@@ -285,6 +285,7 @@ export declare class Rive {
     private _layout;
     private renderer;
     private loaded;
+    private _observed;
     /**
      * Tracks if a Rive file is loaded; we need this in addition to loaded as some
      * commands (e.g. contents) can be called as soon as the file is loaded.
@@ -306,6 +307,7 @@ export declare class Rive {
     private automaticallyHandleEvents;
     private enableRiveAssetCDN;
     private _volume;
+    private _hasZeroSize;
     durations: number[];
     frameTimes: number[];
     frameCount: number;
@@ -313,6 +315,7 @@ export declare class Rive {
     constructor(params: RiveParameters);
     static new(params: RiveParameters): Rive;
     private onSystemAudioChanged;
+    private onCanvasResize;
     private init;
     /**
      * Setup Rive Listeners on the canvas
@@ -325,6 +328,11 @@ export declare class Rive {
      * Remove Rive Listeners setup on the canvas
      */
     removeRiveListeners(): void;
+    /**
+     * If the instance has audio and the system audio is not ready
+     * we hook the instance to the audio manager
+     */
+    private initializeAudio;
     private initData;
     private initArtboard;
     drawFrame(): void;
@@ -567,17 +575,24 @@ export declare const Testing: {
     EventManager: typeof EventManager;
     TaskQueueManager: typeof TaskQueueManager;
 };
+/**
+ * Decodes bytes into an audio asset.
+ *
+ * Be sure to call `.unref()` on the audio once it is no longer needed. This
+ * allows the engine to clean it up when it is not used by any more animations.
+ */
+export declare const decodeAudio: (bytes: Uint8Array) => Promise<rc.Audio>;
 /**
  * Decodes bytes into an image.
  *
- * Be sure to call `.dispose()` on the image once it is no longer needed. This
+ * Be sure to call `.unref()` on the image once it is no longer needed. This
  * allows the engine to clean it up when it is not used by any more animations.
  */
 export declare const decodeImage: (bytes: Uint8Array) => Promise<rc.Image>;
 /**
  * Decodes bytes into a font.
  *
- * Be sure to call `.dispose()` on the font once it is no longer needed. This
+ * Be sure to call `.unref()` on the font once it is no longer needed. This
  * allows the engine to clean it up when it is not used by any more animations.
  */
 export declare const decodeFont: (bytes: Uint8Array) => Promise<rc.Font>;

package/rive.js

@@ -91,52 +91,57 @@ function ea() {
 const fa = n.onRuntimeInitialized;
 n.onRuntimeInitialized = function() {
   fa && fa();
-  let a = n.decodeFont;
-  n.decodeFont = function(c, d) {
-    c = a(c);
-    d(c);
+  let a = n.decodeAudio;
+  n.decodeAudio = function(d, e) {
+    d = a(d);
+    e(d);
   };
-  const b = n.FileAssetLoader;
-  n.ptrToAsset = c => {
-    let d = n.ptrToFileAsset(c);
-    return d.isImage ? n.ptrToImageAsset(c) : d.isFont ? n.ptrToFontAsset(c) : d;
+  let b = n.decodeFont;
+  n.decodeFont = function(d, e) {
+    d = b(d);
+    e(d);
   };
-  n.CustomFileAssetLoader = b.extend("CustomFileAssetLoader", {__construct:function({loadContents:c}) {
+  const c = n.FileAssetLoader;
+  n.ptrToAsset = d => {
+    let e = n.ptrToFileAsset(d);
+    return e.isImage ? n.ptrToImageAsset(d) : e.isFont ? n.ptrToFontAsset(d) : e.isAudio ? n.ptrToAudioAsset(d) : e;
+  };
+  n.CustomFileAssetLoader = c.extend("CustomFileAssetLoader", {__construct:function({loadContents:d}) {
     this.__parent.__construct.call(this);
-    this.Ab = c;
-  }, loadContents:function(c, d) {
-    c = n.ptrToAsset(c);
-    return this.Ab(c, d);
+    this.Ab = d;
+  }, loadContents:function(d, e) {
+    d = n.ptrToAsset(d);
+    return this.Ab(d, e);
   },});
-  n.CDNFileAssetLoader = b.extend("CDNFileAssetLoader", {__construct:function() {
+  n.CDNFileAssetLoader = c.extend("CDNFileAssetLoader", {__construct:function() {
     this.__parent.__construct.call(this);
-  }, loadContents:function(c) {
-    let d = n.ptrToAsset(c);
-    c = d.cdnUuid;
-    if ("" === c) {
+  }, loadContents:function(d) {
+    let e = n.ptrToAsset(d);
+    d = e.cdnUuid;
+    if ("" === d) {
       return !1;
     }
-    (function(e, f) {
-      var g = new XMLHttpRequest();
-      g.responseType = "arraybuffer";
-      g.onreadystatechange = function() {
-        4 == g.readyState && 200 == g.status && f(g);
+    (function(f, g) {
+      var m = new XMLHttpRequest();
+      m.responseType = "arraybuffer";
+      m.onreadystatechange = function() {
+        4 == m.readyState && 200 == m.status && g(m);
       };
-      g.open("GET", e, !0);
-      g.send(null);
-    })(d.cdnBaseUrl + "/" + c, e => {
-      d.decode(new Uint8Array(e.response));
+      m.open("GET", f, !0);
+      m.send(null);
+    })(e.cdnBaseUrl + "/" + d, f => {
+      e.decode(new Uint8Array(f.response));
     });
     return !0;
   },});
-  n.FallbackFileAssetLoader = b.extend("FallbackFileAssetLoader", {__construct:function() {
+  n.FallbackFileAssetLoader = c.extend("FallbackFileAssetLoader", {__construct:function() {
     this.__parent.__construct.call(this);
     this.fb = [];
-  }, addLoader:function(c) {
-    this.fb.push(c);
-  }, loadContents:function(c, d) {
-    for (let e of this.fb) {
-      if (e.loadContents(c, d)) {
+  }, addLoader:function(d) {
+    this.fb.push(d);
+  }, loadContents:function(d, e) {
+    for (let f of this.fb) {
+      if (f.loadContents(d, e)) {
         return !0;
       }
     }
@@ -410,7 +415,7 @@ function Pa(a, b) {
     return Oa(c, a, b);
   }));
 }
-var J, K, Ta = {473872:(a, b, c, d, e) => {
+var J, K, Ta = {474256:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -473,9 +478,9 @@ var J, K, Ta = {473872:(a, b, c, d, e) => {
   }
   window.h.Da += 1;
   return 1;
-}, 476050:() => {
+}, 476434:() => {
   "undefined" !== typeof window.h && (--window.h.Da, 0 === window.h.Da && delete window.h);
-}, 476214:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 476318:() => {
+}, 476598:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 476702:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -483,7 +488,7 @@ var J, K, Ta = {473872:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 476489:(a, b, c, d, e, f) => {
+}, 476873:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -529,7 +534,7 @@ var J, K, Ta = {473872:(a, b, c, d, e) => {
   a == window.h.I.Ca && g.Z.connect(g.J.destination);
   g.kb = f;
   return window.h.tc(g);
-}, 479366:a => window.h.wa(a).J.sampleRate, 479439:a => {
+}, 479750:a => window.h.wa(a).J.sampleRate, 479823:a => {
   a = window.h.wa(a);
   void 0 !== a.Z && (a.Z.onaudioprocess = function() {
   }, a.Z.disconnect(), a.Z = void 0);
@@ -537,13 +542,13 @@ var J, K, Ta = {473872:(a, b, c, d, e) => {
   a.J.close();
   a.J = void 0;
   a.kb = void 0;
-}, 479839:a => {
+}, 480223:a => {
   window.h.xb(a);
-}, 479889:a => {
+}, 480273:a => {
   a = window.h.wa(a);
   a.J.resume();
   a.state = window.h.ha.sb;
-}, 480028:a => {
+}, 480412:a => {
   a = window.h.wa(a);
   a.J.suspend();
   a.state = window.h.ha.stopped;
@@ -3548,8 +3553,8 @@ n.dynCall_viijii = (a, b, c, d, e, f, g) => (n.dynCall_viijii = y.dynCall_viijii
 n.dynCall_iiiiij = (a, b, c, d, e, f, g) => (n.dynCall_iiiiij = y.dynCall_iiiiij)(a, b, c, d, e, f, g);
 n.dynCall_iiiiijj = (a, b, c, d, e, f, g, m, p) => (n.dynCall_iiiiijj = y.dynCall_iiiiijj)(a, b, c, d, e, f, g, m, p);
 n.dynCall_iiiiiijj = (a, b, c, d, e, f, g, m, p, l) => (n.dynCall_iiiiiijj = y.dynCall_iiiiiijj)(a, b, c, d, e, f, g, m, p, l);
-n.___start_em_js = 471248;
-n.___stop_em_js = 473872;
+n.___start_em_js = 471632;
+n.___stop_em_js = 474256;
 var $d;
 Ia = function ae() {
   $d || be();
@@ -3609,7 +3614,7 @@ be();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/webgl2","version":"2.14.4","description":"Rive\'s webgl2 based web api.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)","Chris Dalton <chris@rive.app> (https://rive.app)"],"license":"MIT","files":["rive.js","rive.wasm","rive.js.map","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
+module.exports = JSON.parse('{"name":"@rive-app/webgl2","version":"2.15.1","description":"Rive\'s webgl2 based web api.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)","Chris Dalton <chris@rive.app> (https://rive.app)"],"license":"MIT","files":["rive.js","rive.wasm","rive.js.map","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -3907,6 +3912,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   StateMachineInput: () => (/* binding */ StateMachineInput),
 /* harmony export */   StateMachineInputType: () => (/* binding */ StateMachineInputType),
 /* harmony export */   Testing: () => (/* binding */ Testing),
+/* harmony export */   decodeAudio: () => (/* binding */ decodeAudio),
 /* harmony export */   decodeFont: () => (/* binding */ decodeFont),
 /* harmony export */   decodeImage: () => (/* binding */ decodeImage)
 /* harmony export */ });
@@ -5031,6 +5037,51 @@ var AudioManager = /** @class */ (function (_super) {
     return AudioManager;
 }(EventManager));
 var audioManager = new AudioManager();
+/**
+ * This class takes care of any observers that will be attached to an animation.
+ * It should be treated as a singleton because observers are much more performant
+ * when used for observing multiple elements by a single instance.
+ */
+var ObjectObservers = /** @class */ (function () {
+    function ObjectObservers() {
+        var _this = this;
+        this._elementsMap = new Map();
+        /**
+         * Resize observers trigger both when the element changes its size and also when the
+         * element is added or removed from the document.
+         */
+        this._onObservedEntry = function (entry) {
+            var observed = _this._elementsMap.get(entry.target);
+            if (observed !== null) {
+                observed.onResize(entry.target.clientWidth == 0 || entry.target.clientHeight == 0);
+            }
+            else {
+                _this._resizeObserver.unobserve(entry.target);
+            }
+        };
+        this._onObserved = function (entries) {
+            entries.forEach(_this._onObservedEntry);
+        };
+        this._resizeObserver = new ResizeObserver(this._onObserved);
+    }
+    // Adds an observable element
+    ObjectObservers.prototype.add = function (element, onResize) {
+        var observed = {
+            onResize: onResize,
+            element: element,
+        };
+        this._elementsMap.set(element, observed);
+        this._resizeObserver.observe(element);
+        return observed;
+    };
+    // Removes an observable element
+    ObjectObservers.prototype.remove = function (observed) {
+        this._resizeObserver.unobserve(observed.element);
+        this._elementsMap.delete(observed.element);
+    };
+    return ObjectObservers;
+}());
+var observers = new ObjectObservers();
 var Rive = /** @class */ (function () {
     function Rive(params) {
         var _this = this;
@@ -5055,17 +5106,28 @@ var Rive = /** @class */ (function () {
         this.enableRiveAssetCDN = true;
         // Keep a local value of the set volume to update it asynchronously
         this._volume = 1;
+        // Whether the canvas element's size is 0
+        this._hasZeroSize = false;
         // Durations to generate a frame for the last second. Used for performance profiling.
         this.durations = [];
         this.frameTimes = [];
         this.frameCount = 0;
         this.isTouchScrollEnabled = false;
+        this.onCanvasResize = function (hasZeroSize) {
+            _this._hasZeroSize = hasZeroSize;
+            if (!_this._layout.maxX || !_this._layout.maxY) {
+                _this.resizeToCanvas();
+            }
+        };
         /**
          * Used be draw to track when a second of active rendering time has passed.
          * Used for debugging purposes
          */
         this.renderSecondTimer = 0;
         this.canvas = params.canvas;
+        if (params.canvas.constructor === HTMLCanvasElement) {
+            this._observed = observers.add(this.canvas, this.onCanvasResize);
+        }
         this.src = params.src;
         this.buffer = params.buffer;
         this.layout = (_a = params.layout) !== null && _a !== void 0 ? _a : new Layout();
@@ -5118,14 +5180,6 @@ var Rive = /** @class */ (function () {
             this.assetLoader = params.assetLoader;
         // Hook up the task queue
         this.taskQueue = new TaskQueueManager(this.eventManager);
-        // Initialize audio
-        if (audioManager.status == SystemAudioStatus.UNAVAILABLE) {
-            audioManager.add({
-                type: EventType.AudioStatusChange,
-                callback: function () { return _this.onSystemAudioChanged(); },
-            });
-            audioManager.establishAudio();
-        }
         this.init({
             src: this.src,
             buffer: this.buffer,
@@ -5221,6 +5275,24 @@ var Rive = /** @class */ (function () {
             this.eventCleanup();
         }
     };
+    /**
+     * If the instance has audio and the system audio is not ready
+     * we hook the instance to the audio manager
+     */
+    Rive.prototype.initializeAudio = function () {
+        var _this = this;
+        var _a;
+        // Initialize audio if needed
+        if (audioManager.status == SystemAudioStatus.UNAVAILABLE) {
+            if ((_a = this.artboard) === null || _a === void 0 ? void 0 : _a.hasAudio) {
+                audioManager.add({
+                    type: EventType.AudioStatusChange,
+                    callback: function () { return _this.onSystemAudioChanged(); },
+                });
+                audioManager.establishAudio();
+            }
+        }
+    };
     // Initializes runtime with Rive data and preps for playing
     Rive.prototype.initData = function (artboardName, animationNames, stateMachineNames, autoplay) {
         var _a;
@@ -5250,6 +5322,8 @@ var Rive = /** @class */ (function () {
                         if (this.file) {
                             // Initialize and draw frame
                             this.initArtboard(artboardName, animationNames, stateMachineNames, autoplay);
+                            // Check for audio
+                            this.initializeAudio();
                             // Everything's set up, emit a load event
                             this.loaded = true;
                             this.eventManager.fire({
@@ -5327,9 +5401,9 @@ var Rive = /** @class */ (function () {
      * @param time the time at which to render a frame
      */
     Rive.prototype.draw = function (time, onSecond) {
-        var before = performance.now();
         // Clear the frameRequestId, as we're now rendering a fresh frame
         this.frameRequestId = null;
+        var before = performance.now();
         // On the first pass, make sure lastTime has a valid value
         if (!this.lastRenderTime) {
             this.lastRenderTime = time;
@@ -5408,7 +5482,10 @@ var Rive = /** @class */ (function () {
         renderer.save();
         // Update the renderer alignment if necessary
         this.alignRenderer();
-        this.artboard.draw(renderer);
+        // Do not draw on 0 canvas size
+        if (!this._hasZeroSize) {
+            this.artboard.draw(renderer);
+        }
         renderer.restore();
         renderer.flush();
         // Check for any animations that looped
@@ -5488,6 +5565,10 @@ var Rive = /** @class */ (function () {
         this.stopRendering();
         // Clean up any artboard, animation or state machine instances.
         this.cleanupInstances();
+        // Remove from observer
+        if (this._observed !== null) {
+            observers.remove(this._observed);
+        }
         // Delete the rive file
         (_a = this.file) === null || _a === void 0 ? void 0 : _a.delete();
         this.file = null;
@@ -6081,10 +6162,23 @@ var Testing = {
 };
 // #endregion
 // #region asset loaders
+/**
+ * Decodes bytes into an audio asset.
+ *
+ * Be sure to call `.unref()` on the audio once it is no longer needed. This
+ * allows the engine to clean it up when it is not used by any more animations.
+ */
+var decodeAudio = function (bytes) {
+    return new Promise(function (resolve) {
+        return RuntimeLoader.getInstance(function (rive) {
+            rive.decodeAudio(bytes, resolve);
+        });
+    });
+};
 /**
  * Decodes bytes into an image.
  *
- * Be sure to call `.dispose()` on the image once it is no longer needed. This
+ * Be sure to call `.unref()` on the image once it is no longer needed. This
  * allows the engine to clean it up when it is not used by any more animations.
  */
 var decodeImage = function (bytes) {
@@ -6097,7 +6191,7 @@ var decodeImage = function (bytes) {
 /**
  * Decodes bytes into a font.
  *
- * Be sure to call `.dispose()` on the font once it is no longer needed. This
+ * Be sure to call `.unref()` on the font once it is no longer needed. This
  * allows the engine to clean it up when it is not used by any more animations.
  */
 var decodeFont = function (bytes) {