@rive-app/webgl2 2.14.0 → 2.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/webgl2",
-  "version": "2.14.0",
+  "version": "2.14.2",
   "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, FontAsset, ImageAsset } from "./rive_advanced.mjs";
 /**
  * Generic type for a parameterless void callback
  */
@@ -117,7 +117,8 @@ export declare enum EventType {
     Draw = "draw",
     Advance = "advance",
     StateChange = "statechange",
-    RiveEvent = "riveevent"
+    RiveEvent = "riveevent",
+    AudioStatusChange = "audiostatuschange"
 }
 export type RiveEventPayload = rc.RiveEvent | rc.OpenUrlEvent;
 export interface Event {
@@ -304,12 +305,14 @@ export declare class Rive {
     private shouldDisableRiveListeners;
     private automaticallyHandleEvents;
     private enableRiveAssetCDN;
+    private _volume;
     durations: number[];
     frameTimes: number[];
     frameCount: number;
     isTouchScrollEnabled: boolean;
     constructor(params: RiveParameters);
     static new(params: RiveParameters): Rive;
+    private onSystemAudioChanged;
     private init;
     /**
      * Setup Rive Listeners on the canvas
@@ -525,6 +528,11 @@ export declare class Rive {
      * Returns the contents of a Rive file: the artboards, animations, and state machines
      */
     get contents(): RiveFileContents;
+    /**
+     * getter and setter for the volume of the artboard
+     */
+    get volume(): number;
+    set volume(value: number);
 }
 /**
  * Contents of a state machine input

package/rive.js

@@ -410,7 +410,7 @@ function Pa(a, b) {
     return Oa(c, a, b);
   }));
 }
-var J, K, Ta = {473560:(a, b, c, d, e) => {
+var J, K, Ta = {473712:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -473,9 +473,9 @@ var J, K, Ta = {473560:(a, b, c, d, e) => {
   }
   window.h.Da += 1;
   return 1;
-}, 475738:() => {
+}, 475890:() => {
   "undefined" !== typeof window.h && (--window.h.Da, 0 === window.h.Da && delete window.h);
-}, 475902:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 476006:() => {
+}, 476054:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 476158:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -483,7 +483,7 @@ var J, K, Ta = {473560:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 476177:(a, b, c, d, e, f) => {
+}, 476329:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -529,7 +529,7 @@ var J, K, Ta = {473560:(a, b, c, d, e) => {
   a == window.h.I.Ca && g.Z.connect(g.J.destination);
   g.kb = f;
   return window.h.tc(g);
-}, 479054:a => window.h.wa(a).J.sampleRate, 479127:a => {
+}, 479206:a => window.h.wa(a).J.sampleRate, 479279:a => {
   a = window.h.wa(a);
   void 0 !== a.Z && (a.Z.onaudioprocess = function() {
   }, a.Z.disconnect(), a.Z = void 0);
@@ -537,13 +537,13 @@ var J, K, Ta = {473560:(a, b, c, d, e) => {
   a.J.close();
   a.J = void 0;
   a.kb = void 0;
-}, 479527:a => {
+}, 479679:a => {
   window.h.xb(a);
-}, 479577:a => {
+}, 479729:a => {
   a = window.h.wa(a);
   a.J.resume();
   a.state = window.h.ha.sb;
-}, 479716:a => {
+}, 479868:a => {
   a = window.h.wa(a);
   a.J.suspend();
   a.state = window.h.ha.stopped;
@@ -3548,8 +3548,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 = 470936;
-n.___stop_em_js = 473560;
+n.___start_em_js = 471088;
+n.___stop_em_js = 473712;
 var $d;
 Ia = function ae() {
   $d || be();
@@ -3609,7 +3609,7 @@ be();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/webgl2","version":"2.14.0","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.14.2","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 */
@@ -3913,6 +3913,21 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _rive_advanced_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var package_json__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -4756,6 +4771,7 @@ var EventType;
     EventType["Advance"] = "advance";
     EventType["StateChange"] = "statechange";
     EventType["RiveEvent"] = "riveevent";
+    EventType["AudioStatusChange"] = "audiostatuschange";
 })(EventType || (EventType = {}));
 /**
  * Looping types: one-shot, loop, and ping-pong
@@ -4848,8 +4864,176 @@ var TaskQueueManager = /** @class */ (function () {
     };
     return TaskQueueManager;
 }());
+// #endregion
+// #region Audio
+var SystemAudioStatus;
+(function (SystemAudioStatus) {
+    SystemAudioStatus[SystemAudioStatus["AVAILABLE"] = 0] = "AVAILABLE";
+    SystemAudioStatus[SystemAudioStatus["UNAVAILABLE"] = 1] = "UNAVAILABLE";
+})(SystemAudioStatus || (SystemAudioStatus = {}));
+// Class to handle audio context availability and status changes
+var AudioManager = /** @class */ (function (_super) {
+    __extends(AudioManager, _super);
+    function AudioManager() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._started = false;
+        _this._enabled = false;
+        _this._status = SystemAudioStatus.UNAVAILABLE;
+        return _this;
+    }
+    AudioManager.prototype.delay = function (time) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, new Promise(function (resolve) { return setTimeout(resolve, time); })];
+            });
+        });
+    };
+    AudioManager.prototype.timeout = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, new Promise(function (_, reject) { return setTimeout(reject, 50); })];
+            });
+        });
+    };
+    // Alerts animations on status changes and removes the listeners to avoid alerting twice.
+    AudioManager.prototype.reportToListeners = function () {
+        this.fire({ type: EventType.AudioStatusChange });
+        this.removeAll();
+    };
+    /**
+     * The audio context has been resolved.
+     * Alert any listeners that we can now play audio.
+     * Rive will now play audio at the configured volume.
+     */
+    AudioManager.prototype.enableAudio = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                if (!this._enabled) {
+                    this._enabled = true;
+                    this._status = SystemAudioStatus.AVAILABLE;
+                    this.reportToListeners();
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * Check if we are able to play audio.
+     *
+     * We currently check the audio context, when resume() returns before a timeout we know that the
+     * audio context is running and we can enable audio.
+     */
+    AudioManager.prototype.testAudio = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!(this._status === SystemAudioStatus.UNAVAILABLE &&
+                            this._audioContext !== null)) return [3 /*break*/, 4];
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, Promise.race([this._audioContext.resume(), this.timeout()])];
+                    case 2:
+                        _b.sent();
+                        this.enableAudio();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        _a = _b.sent();
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Establish audio for use with rive.
+     * We both test if we can use audio intermittently and listen for user interaction.
+     * The aim is to enable audio playback as soon as the browser allows this.
+     */
+    AudioManager.prototype._establishAudio = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!!this._started) return [3 /*break*/, 5];
+                        this._started = true;
+                        if (!(typeof window == "undefined")) return [3 /*break*/, 1];
+                        this.enableAudio();
+                        return [3 /*break*/, 5];
+                    case 1:
+                        this._audioContext = new AudioContext();
+                        this.listenForUserAction();
+                        _a.label = 2;
+                    case 2:
+                        if (!(this._status === SystemAudioStatus.UNAVAILABLE)) return [3 /*break*/, 5];
+                        return [4 /*yield*/, this.testAudio()];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, this.delay(1000)];
+                    case 4:
+                        _a.sent();
+                        return [3 /*break*/, 2];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    AudioManager.prototype.listenForUserAction = function () {
+        var _this = this;
+        // NOTE: AudioContexts are ready immediately if requested in a ui callback
+        // we *could* re request one in this listener.
+        var _clickListener = function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                // note this has "better" results than calling `await this.testAudio()`
+                // as we force audio to be enabled in the current thread, rather than chancing
+                // the thread to be passed over for some other async context
+                this.enableAudio();
+                return [2 /*return*/];
+            });
+        }); };
+        // NOTE: we should test this on mobile/pads
+        document.addEventListener("pointerdown", _clickListener, {
+            once: true,
+        });
+    };
+    /**
+     * Establish the audio context for rive, this lets rive know that we can play audio.
+     */
+    AudioManager.prototype.establishAudio = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this._establishAudio();
+                return [2 /*return*/];
+            });
+        });
+    };
+    Object.defineProperty(AudioManager.prototype, "systemVolume", {
+        get: function () {
+            if (this._status === SystemAudioStatus.UNAVAILABLE) {
+                // We do an immediate test to avoid depending on the delay of the running test
+                this.testAudio();
+                return 0;
+            }
+            return 1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AudioManager.prototype, "status", {
+        get: function () {
+            return this._status;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return AudioManager;
+}(EventManager));
+var audioManager = new AudioManager();
 var Rive = /** @class */ (function () {
     function Rive(params) {
+        var _this = this;
         var _a;
         // Tracks if a Rive file is loaded
         this.loaded = false;
@@ -4869,6 +5053,8 @@ var Rive = /** @class */ (function () {
         this.automaticallyHandleEvents = false;
         // Allow the runtime to automatically load assets hosted in Rive's runtime.
         this.enableRiveAssetCDN = true;
+        // Keep a local value of the set volume to update it asynchronously
+        this._volume = 1;
         // Durations to generate a frame for the last second. Used for performance profiling.
         this.durations = [];
         this.frameTimes = [];
@@ -4932,6 +5118,14 @@ 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,
@@ -4947,6 +5141,10 @@ var Rive = /** @class */ (function () {
         console.warn("This function is deprecated: please use `new Rive({})` instead");
         return new Rive(params);
     };
+    // Event handler for when audio context becomes available
+    Rive.prototype.onSystemAudioChanged = function () {
+        this.volume = this._volume;
+    };
     // Initializes the Rive object either from constructor or load()
     Rive.prototype.init = function (_a) {
         var _this = this;
@@ -4999,7 +5197,8 @@ var Rive = /** @class */ (function () {
                 .filter(function (sm) { return sm.playing && _this.runtime.hasListeners(sm.instance); })
                 .map(function (sm) { return sm.instance; });
             var touchScrollEnabledOption = this.isTouchScrollEnabled;
-            if (riveListenerOptions && 'isTouchScrollEnabled' in riveListenerOptions) {
+            if (riveListenerOptions &&
+                "isTouchScrollEnabled" in riveListenerOptions) {
                 touchScrollEnabledOption = riveListenerOptions.isTouchScrollEnabled;
             }
             this.eventCleanup = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.registerTouchInteractions)({
@@ -5089,6 +5288,7 @@ var Rive = /** @class */ (function () {
             return;
         }
         this.artboard = rootArtboard;
+        rootArtboard.volume = this._volume * audioManager.systemVolume;
         // Check that the artboard has at least 1 animation
         if (this.artboard.animationCount() < 1) {
             var msg = "Artboard has no animations";
@@ -5816,6 +6016,25 @@ var Rive = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Rive.prototype, "volume", {
+        /**
+         * getter and setter for the volume of the artboard
+         */
+        get: function () {
+            if (this.artboard && this.artboard.volume !== this._volume) {
+                this._volume = this.artboard.volume;
+            }
+            return this._volume;
+        },
+        set: function (value) {
+            this._volume = value;
+            if (this.artboard) {
+                this.artboard.volume = value * audioManager.systemVolume;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     // Error message for missing source or buffer
     Rive.missingErrorMessage = "Rive source file or data buffer required";
     return Rive;