play/pause on video

4 files changed, 22 insertions, 9 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index 2740a2e..79de1b4 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -69,10 +69,10 @@
   stroke: #000;
   transition: stroke 0.5s;
 }
-.eflux-logo.black svg path {
+.black .eflux-logo svg path {
   fill: #fff;
 }
-.eflux-logo.black svg line {
+.black .eflux-logo svg line {
   stroke: #fff;
 }
 
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 78e237e..010e660 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -197,10 +197,12 @@
   stroke: #000;
   stroke-width: 0.5;
 }
+.fullscreen-element.video .volume path,
 .viewer-nav.hovering-nav .volume path,
 .nav-open .volume path {
   fill: #fff;
 }
+.fullscreen-element.video .volume.muted path,
 .viewer-nav.hovering-nav .volume.muted path,
 .nav-open .volume.muted path {
   fill: #000;
@@ -218,6 +220,8 @@
 .playToggle polygon {
   fill: #000;
 }
+.fullscreen-element.video .playToggle path,
+.fullscreen-element.video .playToggle polygon,
 .viewer-nav.hovering-nav .playToggle path,
 .viewer-nav.hovering-nav .playToggle polygon,
 .nav-open .playToggle path,
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 72121a7..c4bd4e4 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,9 +1,10 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import VimeoPlayer from 'app/utils/vendor/vimeo'
 
-import { PlayerTime } from 'app/views/viewer/nav/viewer.icons'
+import { PlayButton, PlayerTime, VolumeControl } from 'app/views/viewer/nav/viewer.icons'
 
-export class FullscreenVideo extends Component {
+class FullscreenVideo extends Component {
   state = {
     duration: 1.0,
     percent: 0.0,
@@ -29,7 +30,7 @@ export class FullscreenVideo extends Component {
     this.setState(timing)
   }
   render() {
-    const { element, media, transitionDuration } = this.props
+    const { element, media, transitionDuration, playing, volume } = this.props
     const { duration, percent, seconds } = this.state
     const { color } = element
     const item = media.lookup[element.settings.media_id]
@@ -38,7 +39,7 @@ export class FullscreenVideo extends Component {
       color: color.textColor,
       transitionDuration,
     }
-    console.log(item)
+    // console.log(item)
     return (
       <div
         className='fullscreen-element video'
@@ -63,7 +64,9 @@ export class FullscreenVideo extends Component {
             {item.title}
           </div>
           <div className='video-playback'>
+            <PlayButton playing={playing} />
             <PlayerTime play_ts={seconds} duration={duration} />
+            <VolumeControl volume={volume} />
           </div>
           <div className='video-next'>
           </div>
@@ -72,3 +75,11 @@ export class FullscreenVideo extends Component {
     )
   }
 }
+
+const mapStateToProps = state => ({
+  viewer: state.viewer,
+  playing: state.audio.playing,
+  volume: state.audio.volume,
+})
+
+export default connect(mapStateToProps)(FullscreenVideo)
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
index 25fbc83..4f0b38b 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
@@ -4,9 +4,7 @@ import {
   FullscreenImage
 } from './fullscreen.image'
 
-import {
-  FullscreenVideo
-} from './fullscreen.video'
+import FullscreenVideo from './fullscreen.video'
 
 import {
   FullscreenVitrine,