fade out audio at the end of a chapter

1 files changed, 63 insertions, 36 deletions

diff --git a/animism-align/frontend/app/utils/vendor/vimeo/index.js b/animism-align/frontend/app/utils/vendor/vimeo/index.js
index 68363e3..ffa374c 100644
--- a/animism-align/frontend/app/utils/vendor/vimeo/index.js
+++ b/animism-align/frontend/app/utils/vendor/vimeo/index.js
@@ -1,28 +1,29 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Player from '@vimeo/player';
-import eventNames from './eventNames';
+import React from 'react'
+import PropTypes from 'prop-types'
+import Player from '@vimeo/player'
+import eventNames from './eventNames'
+import oktween from 'app/utils/oktween'
 
 class Vimeo extends React.Component {
   constructor(props) {
-    super(props);
+    super(props)
 
-    this.refContainer = this.refContainer.bind(this);
+    this.refContainer = this.refContainer.bind(this)
   }
 
   componentDidMount() {
-    this.createPlayer();
+    this.createPlayer()
   }
 
   componentDidUpdate(prevProps) {
     // eslint-disable-next-line react/destructuring-assignment
-    const changes = Object.keys(this.props).filter((name) => this.props[name] !== prevProps[name]);
+    const changes = Object.keys(this.props).filter((name) => this.props[name] !== prevProps[name])
 
-    this.updateProps(changes);
+    this.updateProps(changes)
   }
 
   componentWillUnmount() {
-    this.player.destroy();
+    this.player.destroy()
   }
 
   /**
@@ -45,7 +46,7 @@ class Vimeo extends React.Component {
       muted: this.props.muted,
       background: this.props.background,
       responsive: this.props.responsive,
-    };
+    }
     /* eslint-enable react/destructuring-assignment */
   }
 
@@ -53,34 +54,35 @@ class Vimeo extends React.Component {
    * @private
    */
   updateProps(propNames) {
-    const { player } = this;
+    const { player } = this
     propNames.forEach((name) => {
       // eslint-disable-next-line react/destructuring-assignment
-      const value = this.props[name];
+      const value = this.props[name]
       switch (name) {
         case 'autopause':
-          player.setAutopause(value);
-          break;
+          player.setAutopause(value)
+          break
         case 'color':
-          player.setColor(value);
-          break;
+          player.setColor(value)
+          break
         case 'loop':
-          player.setLoop(value);
-          break;
+          player.setLoop(value)
+          break
         case 'volume':
-          player.setVolume(value);
-          break;
+          player.setVolume(value)
+          break
         case 'paused':
           player.getPaused().then((paused) => {
             if (value && !paused) {
-              return player.pause();
+              return player.pause()
             }
             if (!value && paused) {
-              return player.play();
+              return player.play()
             }
-            return null;
-          });
-          break;
+            return null
+          })
+          break
+
         case 'seek':
           player.setCurrentTime(value).then(function(seconds) {
           }).catch(function(error) {
@@ -92,31 +94,56 @@ class Vimeo extends React.Component {
                 // some other error occurred
                 break
             }
-          });
+          })
+          player.element[name] = value
+          break
+
         case 'width':
+          player.element[name] = value
+          break
         case 'height':
-          player.element[name] = value;
-          break;
+          player.element[name] = value
+          break
+
+        case 'fadeOut':
+          if (this.props.muted || !value || this.fadeOutTween) return
+          console.log('fade out audio')
+          this.fadeOutTween = oktween.add({
+            from: { volume: 1.0 },
+            to: { volume: 0.0 },
+            duration: value,
+            easing: oktween.easing.quad_in_out,
+            update: obj => {
+              console.log(obj.volume)
+              player.setVolume(obj.volume)
+            },
+            finished: () => {
+              player.setVolume(0.0)
+              this.fadeOutTween = null
+            }
+          })
+          break
+
         case 'video':
           if (value) {
-            const { start } = this.props;
-            const loaded = player.loadVideo(value);
+            const { start } = this.props
+            const loaded = player.loadVideo(value)
             // Set the start time only when loading a new video.
             // It seems like this has to be done after the video has loaded, else it just starts at
             // the beginning!
             if (typeof start === 'number') {
               loaded.then(() => {
-                player.setCurrentTime(start);
-              });
+                player.setCurrentTime(start)
+              })
             }
           } else {
-            player.unload();
+            player.unload()
           }
-          break;
+          break
         default:
           // Nothing
       }
-    });
+    })
   }
 
   /**