Merge pull request #175 from SpringRoll/release/2.5.0

Release/2.5.0

.github/workflows/build.yml

@@ -17,7 +17,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
 
     steps:
     - uses: actions/checkout@v1

.github/workflows/npm-deploy.yaml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 18
           registry-url: https://registry.npmjs.org/
 
       - name: install

.nvmrc

@@ -1 +1 @@
-v16.19.1
+v18.15.0

CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.5.0] - 2023-02-21
+
+### Changed
+
+- Prevent SoundPlugin from sending mute state before Application is loaded. 
+- Prevent CaptionsTogglePlugin from sending mute state before Application is loaded. 
+- updated .nvmrc to 18
+
+### Added
+
+- Added a check to make sure plugin preloads are finished before opening up the application to avoid race conditions. 
+
 ## [2.4.6] - 2023-10-16
 
 ### Fixed

README.md

@@ -678,6 +678,6 @@ There is no configuration required for the UserDataPlugin as it just handles req
 
 ## License
 
-Copyright (c) 2022 [SpringRoll](http://github.com/SpringRoll)
+Copyright (c) 2024 [SpringRoll](http://github.com/SpringRoll)
 
 Released under the MIT License.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "springroll-container",
-  "version": "2.4.6",
+  "version": "2.5.0",
   "description": "The iframe controller for interacting with SpringRoll applications",
   "main": "./dist/index.js",
   "license": "MIT",

src/Container.js

@@ -28,6 +28,7 @@ export class Container extends PluginManager {
     super({ plugins });
 
     this.iframe = iframeOrSelector instanceof HTMLIFrameElement ? iframeOrSelector : document.querySelector(iframeOrSelector);
+    this.iframe.style.backgroundColor = 'black';
 
     if (null === this.iframe) {
       throw new Error('No iframe was found with the provided selector');
@@ -141,6 +142,15 @@ export class Container extends PluginManager {
    * @memberof Container
    */
   _internalOpen(userPath, { singlePlay = false, playOptions = null } = {}) {
+    // If plugin preloads are still going wait for them to finish before opening the Application
+    if (this.preloading) {
+      this.client.on('preloadsFinished', () => {
+        this._internalOpen(userPath, { singlePlay, playOptions });
+      });
+
+      return;
+    }
+
     const options = { singlePlay, playOptions };
     this.reset();
 

src/PluginManager.js

@@ -15,6 +15,7 @@ export default class PluginManager {
    */
   constructor({ plugins = [] }) {
     this.client = new Bellhop();
+    this.preloading = true;
     // @ts-ignore
     this.client.hidden = this.client.receive.bind(this.client);
     // @ts-ignore
@@ -57,6 +58,9 @@ export default class PluginManager {
         plugin => plugin.preloadFailed !== true
       );
 
+      this.preloading = false;
+      this.client.trigger('preloadsFinished');
+
       //init
       this.plugins.forEach(plugin => {
         if (!plugin.init) {

src/base-plugins/ButtonPlugin.js

@@ -62,6 +62,7 @@ export class ButtonPlugin extends BasePlugin {
    * @memberof ButtonPlugin
    */
   _setMuteProp(prop, button, muted, disableSend = false) {
+    console.log('_setmuteprop', prop, muted, disableSend);
     if (Array.isArray(button)) {
       button.forEach(b => this.changeMutedState(b, muted));
     } else {

src/plugins/CaptionsTogglePlugin.js

@@ -65,7 +65,9 @@ export class CaptionsTogglePlugin extends ButtonPlugin {
           return;
         }
 
-        this.captionsMuted = !!SavedData.read(CaptionsTogglePlugin.captionsToggleKey);
+        const captionsMuted = !!SavedData.read(CaptionsTogglePlugin.captionsToggleKey);
+
+        this._setMuteProp('captionsMuted', captionsMuted, this._captionsButtons, true);
 
       }.bind(this)
     );
@@ -74,8 +76,9 @@ export class CaptionsTogglePlugin extends ButtonPlugin {
   * @memberof CaptionsTogglePlugin
   */
   start() {
-    this.captionsMuted = !!SavedData.read(CaptionsTogglePlugin.captionsToggleKey);
-
+    for (let i = 0; i < this.captionsButtonsLength; i++) {
+      this.captionsButtons[i].enableButton();
+    }
     this.client.on('loaded', this.sendAllProperties);
     this.client.on('loadDone', this.sendAllProperties);
   }

src/plugins/SoundPlugin.js

@@ -44,10 +44,10 @@ export class SoundPlugin extends ButtonPlugin {
     this._sfxMutedByUser = false;
     this._voMutedByUser = false;
 
-    this.soundMuteEnabled = false;
-    this.musicMuteEnabled = false;
-    this.sfxMuteEnabled = false;
-    this.voMuteEnabled = false;
+    this.soundMutedEnabled = false;
+    this.musicMutedEnabled = false;
+    this.sfxMutedEnabled = false;
+    this.voMutedEnabled = false;
 
     this.soundVolume = 1;
     this.musicVolume = 1;
@@ -401,7 +401,8 @@ export class SoundPlugin extends ButtonPlugin {
   /**
    * @memberof SoundPlugin
    */
-  init() {
+  async preload({ client }) {
+    this.client = client;
     this.client.on(
       'features',
       function(features) {
@@ -410,10 +411,10 @@ export class SoundPlugin extends ButtonPlugin {
         }
 
         // Confirm that the mute features are supported
-        this.soundMuteEnabled = !!features.data.sound;
-        this.musicMuteEnabled = !!features.data.music;
-        this.sfxMuteEnabled = !!features.data.sfx;
-        this.voMuteEnabled = !!features.data.vo;
+        this.soundMutedEnabled = !!features.data.sound;
+        this.musicMutedEnabled = !!features.data.music;
+        this.sfxMutedEnabled = !!features.data.sfx;
+        this.voMutedEnabled = !!features.data.vo;
 
         this.soundVolumeEnabled = !!features.data.soundVolume;
         this.musicVolumeEnabled = !!features.data.musicVolume;
@@ -444,6 +445,18 @@ export class SoundPlugin extends ButtonPlugin {
         for (let i = 0; i < this.voSlidersLength; i++) {
           this.voSliders[i].displaySlider(features.data);
         }
+
+        const soundMuted = !!SavedData.read(SoundPlugin.soundMutedKey);
+        const musicMuted = !!SavedData.read(SoundPlugin.musicMutedKey);
+        const sfxMuted = !!SavedData.read(SoundPlugin.sfxMutedKey);
+        const voMuted = !!SavedData.read(SoundPlugin.voMutedKey);
+
+        // set the property in case buttons exist but disable the send here
+        // properties will be sent in sendAllProperties
+        this.setMuteProp('soundMuted', soundMuted, this.soundButtons, true);
+        this.setMuteProp('musicMuted', musicMuted, this.musicButtons, true);
+        this.setMuteProp('sfxMuted', sfxMuted, this.sfxButtons, true);
+        this.setMuteProp('voMuted', voMuted, this.voButtons, true);
       }.bind(this)
     );
   }
@@ -452,7 +465,6 @@ export class SoundPlugin extends ButtonPlugin {
    * @memberof SoundPlugin
    */
   start() {
-
     for (let i = 0; i < this.soundButtonsLength; i++) {
       this.soundButtons[i].enableButton();
     }
@@ -466,11 +478,6 @@ export class SoundPlugin extends ButtonPlugin {
       this.voButtons[i].enableButton();
     }
 
-    this.soundMuted = !!SavedData.read(SoundPlugin.soundMutedKey);
-    this.musicMuted = !!SavedData.read(SoundPlugin.musicMutedKey);
-    this.sfxMuted = !!SavedData.read(SoundPlugin.sfxMutedKey);
-    this.voMuted = !!SavedData.read(SoundPlugin.voMutedKey);
-
     this.client.on('loaded', this.sendAllProperties);
     this.client.on('loadDone', this.sendAllProperties);
   }
@@ -481,23 +488,32 @@ export class SoundPlugin extends ButtonPlugin {
    * @memberof SoundPlugin
    */
   sendAllProperties() {
-    this.sendProperty(SoundPlugin.soundVolumeKey, this.soundVolume);
-    this.sendProperty(SoundPlugin.musicVolumeKey, this.musicVolume);
-    this.sendProperty(SoundPlugin.voVolumeKey, this.voVolume);
-    this.sendProperty(SoundPlugin.sfxVolumeKey, this.sfxVolume);
+
+    if ( this.soundVolumeEnabled && this.soundSlidersLength > 0 ) {
+      this.sendProperty(SoundPlugin.soundVolumeKey, this.soundVolume);
+    }
+    if ( this.musicVolumeEnabled && this.musicSlidersLength > 0 ) {
+      this.sendProperty(SoundPlugin.musicVolumeKey, this.musicVolume);
+    }
+    if ( this.voVolumeEnabled && this.voSlidersLength > 0 ) {
+      this.sendProperty(SoundPlugin.voVolumeKey, this.voVolume);
+    }
+    if ( this.sfxVolumeEnabled && this.sfxSlidersLength > 0 ) {
+      this.sendProperty(SoundPlugin.sfxVolumeKey, this.sfxVolume);
+    }
 
     // to avoid the mute property overwriting the volume on startup, mutes should only send if they're true
     // or the volume channel isn't enabled
-    if ( this.soundMuteEnabled && (this.soundMuted || !this.soundVolumeEnabled )) {
+    if ( (this.soundButtonsLength > 0 && this.soundMutedEnabled) && (this.soundMuted || !this.soundVolumeEnabled )) {
       this.sendProperty(SoundPlugin.soundMutedKey, this.soundMuted);
     }
-    if ( this.musicMuteEnabled && (this.musicMuted || !this.musicVolumeEnabled )) {
+    if ( (this.musicButtonsLength > 0 && this.musicMutedEnabled) && (this.musicMuted || !this.musicVolumeEnabled )) {
       this.sendProperty(SoundPlugin.musicMutedKey, this.musicMuted);
     }
-    if ( this.voMuteEnabled && ( this.voMuted || !this.voVolumeEnabled )) {
+    if ( (this.voButtonsLength > 0 && this.voMutedEnabled) && ( this.voMuted || !this.voVolumeEnabled )) {
       this.sendProperty(SoundPlugin.voMutedKey, this.voMuted);
     }
-    if ( this.sfxMuteEnabled && (this.sfxMuted || !this.sfxVolumeEnabled )) {
+    if ( (this.sfxButtonsLength > 0 && this.sfxMutedEnabled) && (this.sfxMuted || !this.sfxVolumeEnabled )) {
       this.sendProperty(SoundPlugin.sfxMutedKey, this.sfxMuted);
     }
   }