2 files changed, 74 insertions, 18 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>
     )
   }
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 c8c897c..d1ca5e7 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -57,7 +57,7 @@
 /* video */
 
 .viewer-fullscreen .video {
-  pointer-events: none;
+  position: relative;
   align-items: flex-start;
 }
 
@@ -65,15 +65,51 @@ iframe {
   pointer-events: none;
 }
 
-.viewer-fullscreen .video > div {
+.viewer-fullscreen .video .vimeoPlayer {
   pointer-events: none;
   width: 100%;
   height: calc(100vh) !important;
   padding: 0 0 3rem 0
 }
 
-.viewer-fullscreen .video > div div {
+.viewer-fullscreen .video .vimeoPlayer div {
   width: 100%;
-  height: 100%;
+  height: 100% !important;
   padding: 0 !important;
 }
+
+.fullscreen-element.video .video-nav {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3rem;
+  font-size: 18px;
+  color: white;
+  z-index: 15;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.fullscreen-element.video .video-nav .video-title {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 33%;
+  background: black;
+  padding-left: 1rem;
+}
+.fullscreen-element.video .video-nav .video-playback {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  width: 33%;
+  background: black;
+}
+.fullscreen-element.video .video-nav .video-next {
+  width: 33%;
+  pointer-events: none;
+  background: transparent;
+}