handle seeking for now

3 files changed, 24 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 45d5ab0..42b40a6 100644
--- a/animism-align/frontend/app/utils/vendor/vimeo/index.js
+++ b/animism-align/frontend/app/utils/vendor/vimeo/index.js
@@ -81,6 +81,18 @@ class Vimeo extends React.Component {
             return null;
           });
           break;
+        case 'seek':
+          player.setCurrentTime(value).then(function(seconds) {
+          }).catch(function(error) {
+            switch (error.name) {
+              case 'RangeError':
+                // the time was less than 0 or greater than the video’s duration
+                break
+              default:
+                // some other error occurred
+                break
+            }
+          });
         case 'width':
         case 'height':
           player.element[name] = value;
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
index 1d7d055..14aafe9 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
@@ -6,9 +6,10 @@ import { PlayButton, PlayerTime, VolumeControl } from 'app/views/viewer/nav/view
 
 class FullscreenVideo extends Component {
   state = {
-    duration: 1.0,
+    duration: 0.0,
     percent: 0.0,
     seconds: 0.0,
+    seek: 0.0,
   }
   constructor(props) {
     super(props)
@@ -17,6 +18,13 @@ class FullscreenVideo extends Component {
     this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
     this.handleEnd = this.handleEnd.bind(this)
   }
+  componentDidUpdate(prevProps) {
+    if (Math.abs(this.props.play_ts - prevProps.play_ts) > 2.0) {
+      // handle seek
+      const seek = this.props.play_ts - this.props.element.start_ts
+      this.setState({ seek })
+    }
+  }
   handlePlay() {
 
   }
@@ -51,6 +59,7 @@ class FullscreenVideo extends Component {
             paused={!playing}
             autoplay={true}
             muted={true}
+            seek={this.state.seek}
             responsive={true}
             controls={false}
             byline={false}
@@ -77,6 +86,7 @@ class FullscreenVideo extends Component {
 
 const mapStateToProps = state => ({
   viewer: state.viewer,
+  play_ts: state.audio.play_ts,
   playing: state.audio.playing,
   volume: state.audio.volume,
 })
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index 1aad149..61f5122 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -82,7 +82,7 @@ iframe {
   position: absolute;
   bottom: 0;
   left: 0;
-  width: 66%;
+  width: 66.6%;
   height: 3rem;
   font-size: 18px;
   color: white;