diff options
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, |