implement audio volume fades within the skeleton dance video

1 files changed, 23 insertions, 2 deletions

diff --git a/animism-align/frontend/app/utils/vendor/vimeo/index.js b/animism-align/frontend/app/utils/vendor/vimeo/index.js
index ffa374c..ebda418 100644
--- a/animism-align/frontend/app/utils/vendor/vimeo/index.js
+++ b/animism-align/frontend/app/utils/vendor/vimeo/index.js
@@ -69,7 +69,9 @@ class Vimeo extends React.Component {
           player.setLoop(value)
           break
         case 'volume':
-          player.setVolume(value)
+          if (!('targetVolume' in propNames)) {
+            player.setVolume(value)
+          }
           break
         case 'paused':
           player.getPaused().then((paused) => {
@@ -114,7 +116,7 @@ class Vimeo extends React.Component {
             duration: value,
             easing: oktween.easing.quad_in_out,
             update: obj => {
-              console.log(obj.volume)
+              // console.log(obj.volume)
               player.setVolume(obj.volume)
             },
             finished: () => {
@@ -124,6 +126,25 @@ class Vimeo extends React.Component {
           })
           break
 
+        case 'targetVolume':
+          if (this.props.muted || !value || this.fadeTween) return
+          console.log('fade audio to', value)
+          player.setVolume(value)
+          this.fadeTween = oktween.add({
+            from: { volume: this.props.volume },
+            to: { volume: this.props.targetVolume },
+            duration: this.props.volumeFadeTime,
+            easing: oktween.easing.quad_in_out,
+            update: obj => {
+              // console.log(obj.volume)
+              player.setVolume(obj.volume)
+            },
+            finished: () => {
+              this.fadeTween = null
+            }
+          })
+          break
+
         case 'video':
           if (value) {
             const { start } = this.props