@rive-app/canvas-lite 2.14.0 → 2.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/canvas-lite",
-  "version": "2.14.0",
+  "version": "2.14.2",
   "description": "A lite version of Rive's canvas 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

@@ -2252,7 +2252,7 @@ Pc();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.14.0","description":"A lite version of Rive\'s canvas 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.js.map","rive.wasm","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/canvas-lite","version":"2.14.2","description":"A lite version of Rive\'s canvas 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.js.map","rive.wasm","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -2556,6 +2556,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) {
@@ -3399,6 +3414,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
@@ -3491,8 +3507,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;
@@ -3512,6 +3696,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 = [];
@@ -3575,6 +3761,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,
@@ -3590,6 +3784,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;
@@ -3642,7 +3840,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)({
@@ -3732,6 +3931,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";
@@ -4459,6 +4659,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;