some video player css

1 files changed, 34 insertions, 14 deletions

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 2c9f7d6..72121a7 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
@@ -1,7 +1,14 @@
 import React, { Component } from 'react'
 import VimeoPlayer from 'app/utils/vendor/vimeo'
 
+import { PlayerTime } from 'app/views/viewer/nav/viewer.icons'
+
 export class FullscreenVideo extends Component {
+  state = {
+    duration: 1.0,
+    percent: 0.0,
+    seconds: 0.0,
+  }
   constructor(props) {
     super(props)
     this.handlePlay = this.handlePlay.bind(this)
@@ -18,11 +25,12 @@ export class FullscreenVideo extends Component {
   handleEnd() {
 
   }
-  handleTimeUpdate() {
-
+  handleTimeUpdate(timing) {
+    this.setState(timing)
   }
   render() {
     const { element, media, transitionDuration } = this.props
+    const { duration, percent, seconds } = this.state
     const { color } = element
     const item = media.lookup[element.settings.media_id]
     const style = {
@@ -36,18 +44,30 @@ export class FullscreenVideo extends Component {
         className='fullscreen-element video'
         style={style}
       >
-        <VimeoPlayer
-          video={item.url}
-          autoplay={true}
-          muted={true}
-          responsive={true}
-          controls={false}
-          byline={false}
-          onPlay={this.handlePlay}
-          onPause={this.handlePause}
-          onTimeUpdate={this.handleTimeUpdate}
-          onEnd={this.handleEnd}
-        />
+        <div className='vimeoPlayer'>
+          <VimeoPlayer
+            video={item.url}
+            autoplay={true}
+            muted={true}
+            responsive={true}
+            controls={false}
+            byline={false}
+            onPlay={this.handlePlay}
+            onPause={this.handlePause}
+            onTimeUpdate={this.handleTimeUpdate}
+            onEnd={this.handleEnd}
+          />
+        </div>
+        <div className='video-nav'>
+          <div className='video-title'>
+            {item.title}
+          </div>
+          <div className='video-playback'>
+            <PlayerTime play_ts={seconds} duration={duration} />
+          </div>
+          <div className='video-next'>
+          </div>
+        </div>
       </div>
     )
   }