video modal mostly working

2 files changed, 113 insertions, 107 deletions

diff --git a/animism-align/frontend/app/views/viewer/modals/modals.video.css b/animism-align/frontend/app/views/viewer/modals/modals.video.css
new file mode 100644
index 0000000..090391b
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/modals/modals.video.css
@@ -0,0 +1,43 @@
+.video-modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  transition: opacity 0.5s;
+  opacity: 0.0;
+  pointer-events: none;
+}
+.video-modal.open {
+  opacity: 1.0;
+  pointer-events: auto;
+}
+.video-modal .video {
+  width: 100%;
+  height: 100%;
+}
+.video-modal .video .videoPlayer {
+  pointer-events: none;
+  width: 100%;
+  height: calc(100vh) !important;
+  padding: 3rem 0 3rem 0;
+  transition: opacity 0.5s;
+}
+.video-modal .video .videoPlayer div {
+  width: 100%;
+  height: 100% !important;
+  padding: 0 !important;
+}
+.nav-open .video-modal .video-scrubber {
+  transform: translateZ(0) translateY(3rem);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.video-modal-open .nav-player {
+  opacity: 0;
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/modals/modals.video.js b/animism-align/frontend/app/views/viewer/modals/modals.video.js
index e94b4c4..b67fc4b 100644
--- a/animism-align/frontend/app/views/viewer/modals/modals.video.js
+++ b/animism-align/frontend/app/views/viewer/modals/modals.video.js
@@ -4,7 +4,7 @@ import VimeoPlayer from 'app/utils/vendor/vimeo'
 
 import actions from 'app/actions'
 import { timestampToSeconds } from 'app/utils'
-import { VideoScrubber, VideoSubtitles } from '../components.media'
+import { VideoScrubber, VideoSubtitles } from '../player/components.media'
 
 class ModalVideo extends Component {
   state = {
@@ -28,6 +28,8 @@ class ModalVideo extends Component {
     volume: 1.0,
     volumeFadeTime: 1000,
     lastCue: -1,
+    // play state
+    playing: false,
   }
   constructor(props) {
     super(props)
@@ -35,70 +37,24 @@ class ModalVideo extends Component {
     this.handlePause = this.handlePause.bind(this)
     this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
     this.handleScrub = this.handleScrub.bind(this)
+    this.handleToggle = this.handleToggle.bind(this)
     this.handleEnd = this.handleEnd.bind(this)
   }
-  componentDidMount() {
-    const video_start_ts = timestampToSeconds(this.props.element.settings.video_start_ts) || 0.0
-    // TODO: here you can add the current play time modulo ...
-    this.setState({
-      seek: video_start_ts,
-      video_start_ts,
-    })
-  }
   componentDidUpdate(prevProps) {
-    // if the play_ts jumped more than a second, seek
-    const { play_ts, element, currentSection, fadeOutDuration } = this.props
-    if (Math.abs(play_ts - prevProps.play_ts) > 1.0) {
-      // handle seek
-      const { duration, video_start_ts } = this.state
-      const seek = ((play_ts - element.start_ts) % duration) + video_start_ts
-      this.setState({ seek })
-    }
-    // console.log(play_ts, currentSection.cues.length, fadeOutDuration, element.settings.unmuted, this.state.fadeOut)
-    // volume changes - only if unmuted and not already leaving.
-    if (element.settings.unmuted && !this.state.fadeOut) {
-      // if we just started leaving the element, fade out the audio
-      if (fadeOutDuration) {
-        // console.log("fade out audio", this.props.fadeOutDuration)
-        setTimeout(() => this.setState({ fadeOut: true }), 0)
-      }
-      // otherwise, check if we gotta set the volume based on the position
-      else if (currentSection.cues.length) {
-        this.checkCuePosition(play_ts, currentSection.cues)
-      }
-    }
-  }
-  checkCuePosition(play_ts, cues) {
-    // const { volume element.settings.unmuted ? volume : 0.0
-    const { unmuted } = this.props.element.settings
-    let volume = unmuted ? 1.0 : 0.0
-    let { volumeFadeTime, lastCue } = this.state
-    // console.log(cues)
-    cues.some((cue, i) => {
-      if (cue.start_ts < play_ts) {
-        lastCue = i
-        if (cue.settings.volume) {
-          volume = parseFloat(cue.settings.volume)
-          volumeFadeTime = timestampToSeconds(cue.settings.duration) * 1000
-          // console.log(volume, volumeFadeTime)
-          return false
-        }
-      }
-      return true
-    })
-    // console.log('last cue', lastCue, volume, volumeFadeTime)
-    if (lastCue !== this.state.lastCue) {
-      this.setState({ volume, volumeFadeTime, lastCue })
+    if (prevProps.open && !this.props.open) {
+      setTimeout(() => {
+        actions.viewer.resetVideoModal()
+      }, 500)
     }
   }
   handlePlay() {
-    this.setState({ ready: true })
+    this.setState({ ready: true, playing: true })
   }
   handlePause() {
-
+    this.setState({ playing: false })
   }
   handleEnd() {
-
+    this.setState({ playing: false })
   }
   handleTimeUpdate(timing) {
     if (!this.state.scrubbing || ('scrubbing' in timing)) {
@@ -107,80 +63,87 @@ class ModalVideo extends Component {
   }
   handleScrub(timing) {
     // console.log(timing)
-    this.setState(timing)
+    this.setState({
+      ...timing,
+      seek: timing.seconds,
+    })
+  }
+  handleToggle() {
+    console.log('handle toggle to', !this.state.playing)
+    this.setState({ playing: !this.state.playing })
   }
-
   render() {
-    const { element, media, transitionDuration, play_ts, playing, cc, playerVolume } = this.props
-    const { duration, seconds, ready, volume, volumeFadeTime, fadeOut, lastCue } = this.state
-    const { color } = element
-    const item = media.lookup[element.settings.media_id]
+    const { open, media: mediaItem, color, cc, playerVolume } = this.props
+    const { duration, seconds, ready, volume, volumeFadeTime, playing, fadeOut, lastCue } = this.state
+    if (!color || !mediaItem) {
+      return <div />
+    }
     const style = {
       backgroundColor: color.backgroundColor,
       color: color.textColor,
-      transitionDuration,
     }
     const playerStyle = {
       opacity: ready ? 1.0 : 0.0
     }
-    // 
     // console.log(volume, playerVolume)
     return (
       <div
-        className='fullscreen-element video'
+        className={open ? 'video-modal open' : 'video-modal'}
         style={style}
       >
-        <div
-          className='videoPlayer'
-          style={playerStyle}
-        >
-          <VimeoPlayer
-            video={item.url}
-            paused={!playing}
-            autoplay={true}
-            autopause={false}
-            muted={!element.settings.unmuted}
-            loop={!!element.settings.loop}
-            seek={this.state.seek}
-            responsive={true}
-            controls={false}
-            byline={false}
-            volume={element.settings.unmuted ? playerVolume : 0.0}
-            targetVolume={element.settings.unmuted ? volume * playerVolume : 0.0}
-            volumeFadeTime={volumeFadeTime}
-            fadeOut={fadeOut && this.props.fadeOutDuration}
-            onPlay={this.handlePlay}
-            onPause={this.handlePause}
-            onTimeUpdate={this.handleTimeUpdate}
-            onEnd={this.handleEnd}
-            lastCue={lastCue}
+        <div className='fullscreen-element video' onClick={this.handleToggle}>
+          <div
+            className='videoPlayer'
+            style={playerStyle}
+          >
+            <VimeoPlayer
+              video={mediaItem.url}
+              paused={!open || (ready && !playing)}
+              autoplay={true}
+              autopause={false}
+              muted={false}
+              loop={false}
+              seek={this.state.seek}
+              responsive={true}
+              controls={false}
+              byline={false}
+              volume={playerVolume}
+              targetVolume={playerVolume}
+              volumeFadeTime={volumeFadeTime}
+              fadeOut={0}
+              onPlay={this.handlePlay}
+              onPause={this.handlePause}
+              onTimeUpdate={this.handleTimeUpdate}
+              onEnd={this.handleEnd}
+              lastCue={lastCue}
+            />
+          </div>
+          <VideoScrubber
+            play_ts={seconds}
+            start_ts={0}
+            video_start_ts={0}
+            playing={playing}
+            duration={duration}
+            timing={this.state}
+            mediaItem={mediaItem}
+            cc={cc}
+            onScrub={this.handleScrub}
+            onToggle={this.handleToggle}
+            scrubMasterAudio={false}
+          />
+          <VideoSubtitles
+            cc={cc}
+            play_ts={seconds}
+            mediaItem={mediaItem}
           />
         </div>
-        <VideoScrubber
-          play_ts={play_ts}
-          start_ts={element.start_ts}
-          video_start_ts={this.state.video_start_ts}
-          playing={playing}
-          duration={element.duration}
-          timing={this.state}
-          mediaItem={item}
-          cc={cc}
-          onScrub={this.handleScrub}
-        />
-        <VideoSubtitles
-          cc={cc}
-          play_ts={seconds}
-          mediaItem={item}
-        />
       </div>
     )
   }
 }
 
 const mapStateToProps = state => ({
-  viewer: state.viewer,
-  play_ts: state.audio.play_ts,
-  playing: state.audio.playing,
+  ...state.viewer.videoModal,
   playerVolume: state.audio.volume,
   cc: state.audio.cc,
 })