commit fb0f6c142151ec0b9f738fe8cbb0028f43d41447
author Jorge Betancourt <jmbetancourt@google.com> Fri Feb 19 15:14:12 2021 -0500
committer Skia Commit-Bot <skia-commit-bot@chromium.org> Fri Feb 19 20:41:24 2021 +0000
tree aff6bff6984fccc7a684c7acc4486fcc83b7f063
parent 923bdb83d207799b0bc6757a398ca6a4e30cbd39

add volume controller to skottie web player

Change-Id: If1a7d0d40eae3a8efd3d9cbee40119fa7608c28c
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/372507
Commit-Queue: Jorge Betancourt <jmbetancourt@google.com>
Reviewed-by: Kevin Lubick <kjlubick@google.com>

skottie/modules/audio.js

diff --git a/skottie/modules/audio.js b/skottie/modules/audio.js
index fa8f343..110129f 100644
--- a/skottie/modules/audio.js
+++ b/skottie/modules/audio.js
@@ -21,6 +21,11 @@
       player.seek(-1);
     }
   }
+  this.setVolume = function(v) {
+    for(const player of this.map.values()) {
+      player.volume(v);
+    }
+  }
 }
 
 /**
@@ -55,4 +60,7 @@
       }
     }
   };
+  this.volume = function(v) {
+    this.howl.volume(v);
+  };
 }

skottie/modules/skottie-sk/skottie-sk.js

diff --git a/skottie/modules/skottie-sk/skottie-sk.js b/skottie/modules/skottie-sk/skottie-sk.js
index d919ee3..f475a91 100644
--- a/skottie/modules/skottie-sk/skottie-sk.js
+++ b/skottie/modules/skottie-sk/skottie-sk.js
@@ -139,6 +139,13 @@
     <input id=scrub type=range min=0 max=${SCRUBBER_RANGE+1} step=0.1
         @input=${ele._onScrub} @change=${ele._onScrubEnd}>
   </div>
+  <collapse-sk id=volume closed>
+    <p>
+      Volume:
+    </p>
+    <input id=volume-slider type=range min=0 max=1 step=.05 value=1
+      @input=${ele._onVolumeChange}>
+  </collapse-sk>
 </div>
 <collapse-sk id=embed closed>
   <p>
@@ -461,6 +468,10 @@
         }
       }
 
+      if (sounds.map.size > 0) {
+        this._toggleVolumeSlider();
+      }
+
       // check fonts
       fonts.forEach(font => {
         if (!assets[font.fName]) {
@@ -755,6 +766,10 @@
     this._scrubbing = false;
   }
 
+  _onVolumeChange(e) {
+    this._state.soundMap.setVolume(e.currentTarget.value);
+  }
+
   _rewind(e) {
     // Handle rewinding when paused.
     this._wasmTimePassed = 0;
@@ -805,6 +820,11 @@
     this.render();
   }
 
+  _toggleVolumeSlider() {
+    let collapse = $$('#volume', this);
+    collapse.closed = !collapse;
+  }
+
   _upload() {
     // POST the JSON to /_/upload
     this._hash = '';

skottie/modules/skottie-sk/skottie-sk.scss

diff --git a/skottie/modules/skottie-sk/skottie-sk.scss b/skottie/modules/skottie-sk/skottie-sk.scss
index e47584a..7bb0d87 100644
--- a/skottie/modules/skottie-sk/skottie-sk.scss
+++ b/skottie/modules/skottie-sk/skottie-sk.scss
@@ -137,6 +137,15 @@
       width: 20em;
     }
   }
+
+  #volume-slider {
+    display: block;
+    margin: 8px;
+
+    input {
+      width: 10em;
+    }
+  }
 }
 
 #json_editor button {