@rive-app/webgl 2.14.4 → 2.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/webgl",
-  "version": "2.14.4",
+  "version": "2.15.1",
   "description": "Rive's webgl 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 da() {
 const ea = m.onRuntimeInitialized;
 m.onRuntimeInitialized = function() {
   ea && ea();
-  let a = m.decodeFont;
-  m.decodeFont = function(c, d) {
-    c = a(c);
-    d(c);
+  let a = m.decodeAudio;
+  m.decodeAudio = function(d, e) {
+    d = a(d);
+    e(d);
   };
-  const b = m.FileAssetLoader;
-  m.ptrToAsset = c => {
-    let d = m.ptrToFileAsset(c);
-    return d.isImage ? m.ptrToImageAsset(c) : d.isFont ? m.ptrToFontAsset(c) : d;
+  let b = m.decodeFont;
+  m.decodeFont = function(d, e) {
+    d = b(d);
+    e(d);
   };
-  m.CustomFileAssetLoader = b.extend("CustomFileAssetLoader", {__construct:function({loadContents:c}) {
+  const c = m.FileAssetLoader;
+  m.ptrToAsset = d => {
+    let e = m.ptrToFileAsset(d);
+    return e.isImage ? m.ptrToImageAsset(d) : e.isFont ? m.ptrToFontAsset(d) : e.isAudio ? m.ptrToAudioAsset(d) : e;
+  };
+  m.CustomFileAssetLoader = c.extend("CustomFileAssetLoader", {__construct:function({loadContents:d}) {
     this.__parent.__construct.call(this);
-    this.Cb = c;
-  }, loadContents:function(c, d) {
-    c = m.ptrToAsset(c);
-    return this.Cb(c, d);
+    this.Cb = d;
+  }, loadContents:function(d, e) {
+    d = m.ptrToAsset(d);
+    return this.Cb(d, e);
   },});
-  m.CDNFileAssetLoader = b.extend("CDNFileAssetLoader", {__construct:function() {
+  m.CDNFileAssetLoader = c.extend("CDNFileAssetLoader", {__construct:function() {
     this.__parent.__construct.call(this);
-  }, loadContents:function(c) {
-    let d = m.ptrToAsset(c);
-    c = d.cdnUuid;
-    if ("" === c) {
+  }, loadContents:function(d) {
+    let e = m.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 k = new XMLHttpRequest();
+      k.responseType = "arraybuffer";
+      k.onreadystatechange = function() {
+        4 == k.readyState && 200 == k.status && g(k);
       };
-      g.open("GET", e, !0);
-      g.send(null);
-    })(d.cdnBaseUrl + "/" + c, e => {
-      d.decode(new Uint8Array(e.response));
+      k.open("GET", f, !0);
+      k.send(null);
+    })(e.cdnBaseUrl + "/" + d, f => {
+      e.decode(new Uint8Array(f.response));
     });
     return !0;
   },});
-  m.FallbackFileAssetLoader = b.extend("FallbackFileAssetLoader", {__construct:function() {
+  m.FallbackFileAssetLoader = c.extend("FallbackFileAssetLoader", {__construct:function() {
     this.__parent.__construct.call(this);
     this.gb = [];
-  }, addLoader:function(c) {
-    this.gb.push(c);
-  }, loadContents:function(c, d) {
-    for (let e of this.gb) {
-      if (e.loadContents(c, d)) {
+  }, addLoader:function(d) {
+    this.gb.push(d);
+  }, loadContents:function(d, e) {
+    for (let f of this.gb) {
+      if (f.loadContents(d, e)) {
         return !0;
       }
     }
@@ -395,7 +400,7 @@ function Ra(a, b) {
     return Qa(c, a, b);
   }));
 }
-var E, F, Va = {688684:(a, b, c, d, e) => {
+var E, F, Va = {688828:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -458,9 +463,9 @@ var E, F, Va = {688684:(a, b, c, d, e) => {
   }
   window.h.Ea += 1;
   return 1;
-}, 690862:() => {
+}, 691006:() => {
   "undefined" !== typeof window.h && (--window.h.Ea, 0 === window.h.Ea && delete window.h);
-}, 691026:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 691130:() => {
+}, 691170:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 691274:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -468,7 +473,7 @@ var E, F, Va = {688684:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 691301:(a, b, c, d, e, f) => {
+}, 691445:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -514,7 +519,7 @@ var E, F, Va = {688684:(a, b, c, d, e) => {
   a == window.h.H.Da && g.Y.connect(g.I.destination);
   g.mb = f;
   return window.h.vc(g);
-}, 694178:a => window.h.ua(a).I.sampleRate, 694251:a => {
+}, 694322:a => window.h.ua(a).I.sampleRate, 694395:a => {
   a = window.h.ua(a);
   void 0 !== a.Y && (a.Y.onaudioprocess = function() {
   }, a.Y.disconnect(), a.Y = void 0);
@@ -522,13 +527,13 @@ var E, F, Va = {688684:(a, b, c, d, e) => {
   a.I.close();
   a.I = void 0;
   a.mb = void 0;
-}, 694651:a => {
+}, 694795:a => {
   window.h.yb(a);
-}, 694701:a => {
+}, 694845:a => {
   a = window.h.ua(a);
   a.I.resume();
   a.state = window.h.ha.tb;
-}, 694840:a => {
+}, 694984:a => {
   a = window.h.ua(a);
   a.I.suspend();
   a.state = window.h.ha.stopped;
@@ -3842,7 +3847,7 @@ var Fe = {__syscall_fcntl64:function(a, b, c) {
   }).catch(ba);
   return {};
 })();
-var Yd = a => (Yd = p.malloc)(a), tc = a => (tc = p.free)(a), Sa = m._ma_device__on_notification_unlocked = a => (Sa = m._ma_device__on_notification_unlocked = p.ma_device__on_notification_unlocked)(a);
+var tc = a => (tc = p.free)(a), Yd = a => (Yd = p.malloc)(a), Sa = m._ma_device__on_notification_unlocked = a => (Sa = m._ma_device__on_notification_unlocked = p.ma_device__on_notification_unlocked)(a);
 m._ma_malloc_emscripten = (a, b) => (m._ma_malloc_emscripten = p.ma_malloc_emscripten)(a, b);
 m._ma_free_emscripten = (a, b) => (m._ma_free_emscripten = p.ma_free_emscripten)(a, b);
 var Ta = m._ma_device_process_pcm_frames_capture__webaudio = (a, b, c) => (Ta = m._ma_device_process_pcm_frames_capture__webaudio = p.ma_device_process_pcm_frames_capture__webaudio)(a, b, c), Ua = m._ma_device_process_pcm_frames_playback__webaudio = (a, b, c) => (Ua = m._ma_device_process_pcm_frames_playback__webaudio = p.ma_device_process_pcm_frames_playback__webaudio)(a, b, c), pe = () => (pe = p.__errno_location)(), sc = a => (sc = p.__getTypeName)(a);
@@ -4104,7 +4109,7 @@ Ie();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/webgl","version":"2.14.4","description":"Rive\'s webgl 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)"],"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/webgl","version":"2.15.1","description":"Rive\'s webgl 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)"],"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 */
@@ -4402,6 +4407,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 */ });
@@ -5526,6 +5532,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;
@@ -5550,17 +5601,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();
@@ -5613,14 +5675,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,
@@ -5716,6 +5770,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;
@@ -5745,6 +5817,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({
@@ -5822,9 +5896,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;
@@ -5903,7 +5977,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
@@ -5983,6 +6060,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;
@@ -6576,10 +6657,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) {
@@ -6592,7 +6686,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) {