play/pause on video

2 files changed, 16 insertions, 7 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 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,