Nnnn use advance and apply in js runtime

two separate commits:
- use advanceAndApply
- fix a memory leak with audio for not destroying the event listener

Diffs=
9942df6a1d Nnnn use advance and apply in js runtime (#8728)

Co-authored-by: hernan <[email protected]>

Author: bodymovin

.rive_head

@@ -1 +1 @@
-f9355c5d844b041f7ea6475ef99be7288f74404c
+9942df6a1dd563f388199860930f19a7ca31d299

js/src/rive.ts

@@ -407,6 +407,14 @@ class StateMachine {
     this.instance.advance(time);
   }
 
+  /**
+   * Advances the state machine instance by a given time and apply changes to artboard.
+   * @param time - the time to advance the animation by in seconds
+   */
+  public advanceAndApply(time: number) {
+    this.instance.advanceAndApply(time);
+  }
+
   /**
    * Returns the number of events reported from the last advance call
    * @returns Number of events reported
@@ -1564,6 +1572,9 @@ export class Rive {
   // Whether the canvas element's size is 0
   private _hasZeroSize = false;
 
+  // Audio event listener
+  private _audioEventListener: EventListener | null = null;
+
   // Durations to generate a frame for the last second. Used for performance profiling.
   public durations: number[] = [];
   public frameTimes: number[] = [];
@@ -1774,11 +1785,12 @@ export class Rive {
   private initializeAudio() {
     // Initialize audio if needed
     if (audioManager.status == SystemAudioStatus.UNAVAILABLE) {
-      if (this.artboard?.hasAudio) {
-        audioManager.add({
+      if (this.artboard?.hasAudio && this._audioEventListener === null) {
+        this._audioEventListener = {
           type: EventType.AudioStatusChange,
           callback: () => this.onSystemAudioChanged(),
-        });
+        };
+        audioManager.add(this._audioEventListener);
         audioManager.establishAudio();
       }
     }
@@ -2009,13 +2021,15 @@ export class Rive {
           }
         }
       }
-      stateMachine.advance(elapsedTime);
+      stateMachine.advanceAndApply(elapsedTime);
       // stateMachine.instance.apply(this.artboard);
     }
 
     // Once the animations have been applied to the artboard, advance it
     // by the elapsed time.
-    this.artboard.advance(elapsedTime);
+    if (this.animator.stateMachines.length == 0) {
+      this.artboard.advance(elapsedTime);
+    }
 
     const { renderer } = this;
     // Canvas must be wiped to prevent artifacts
@@ -2125,6 +2139,10 @@ export class Rive {
     this.riveFile = null;
     this.file = null;
     this.deleteRiveRenderer();
+    if (this._audioEventListener !== null) {
+      audioManager.remove(this._audioEventListener);
+      this._audioEventListener = null;
+    }
   }
 
   /**

js/src/rive_advanced.mjs.d.ts

@@ -730,6 +730,12 @@ export declare class StateMachineInstance {
    * @param sec - Scrub the state machine instance by a number of seconds
    */
   advance(sec: number): boolean;
+  /**
+   * Advances/scrubs the StateMachineInstance by the set amount of seconds. Note that this will
+   * apply changes to the properties of objects in the Artboard.
+   * @param sec - Scrub the state machine instance by a number of seconds
+   */
+  advanceAndApply(sec: number): boolean;
   /**
    * Returns the number of states changed while the state machine played
    * @returns Number of states changed in the duration of the state machine played

wasm/src/bindings.cpp

@@ -727,6 +727,11 @@ EMSCRIPTEN_BINDINGS(RiveWASM)
             optional_override([](rive::StateMachineInstance& self, float elapsedTime) -> bool {
                 return self.advance(elapsedTime);
             }))
+        .function("advanceAndApply",
+                  optional_override([](rive::StateMachineInstance& self, double seconds) -> bool {
+                      return self.advanceAndApply(seconds);
+                  }),
+                  allow_raw_pointers())
         .function("inputCount", &rive::StateMachineInstance::inputCount)
         .function("input", &rive::StateMachineInstance::input, allow_raw_pointers())
         .function("pointerDown",