diff --git a/src/index.html b/src/index.html index 74a732d8..372bcfda 100755 --- a/src/index.html +++ b/src/index.html @@ -14,7 +14,7 @@ - + diff --git a/src/js/App.js b/src/js/App.js index b0b1efe6..b1ec1c14 100755 --- a/src/js/App.js +++ b/src/js/App.js @@ -6,7 +6,7 @@ import { hashHistory, Link } from 'react-router' import { connect } from 'react-redux' import Sidebar from './components/Sidebar' -import MiniPlayer from './components/MiniPlayer' +import PlaybackControls from './components/PlaybackControls' import SidebarToggleButton from './components/SidebarToggleButton' import ContextMenu from './components/ContextMenu' import Dragger from './components/Dragger' @@ -190,7 +190,7 @@ class App extends React.Component{ return (
- +
{this.props.children}
diff --git a/src/js/components/MiniPlayer.js b/src/js/components/MiniPlayer.js index ff364cfb..d4bb7e11 100755 --- a/src/js/components/MiniPlayer.js +++ b/src/js/components/MiniPlayer.js @@ -27,8 +27,15 @@ class MiniPlayer extends React.Component{ } render(){ + var images = [] + if (this.props.current_track && this.props.current_track.album && this.props.current_track.album.images){ + images = this.props.current_track.album.images + } + return (
+ +
{ this.props.current_track ? this.props.current_track.name : - }
diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js new file mode 100755 index 00000000..134a1dda --- /dev/null +++ b/src/js/components/PlaybackControls.js @@ -0,0 +1,131 @@ + +import React, { PropTypes } from 'react' +import { connect } from 'react-redux' +import { bindActionCreators } from 'redux' +import FontAwesome from 'react-fontawesome' + +import ProgressSlider from './ProgressSlider' +import VolumeControl from './VolumeControl' +import Dater from './Dater' +import ArtistSentence from './ArtistSentence' +import Thumbnail from './Thumbnail' + +import * as mopidyActions from '../services/mopidy/actions' + +class PlaybackControls extends React.Component{ + + constructor(props) { + super(props); + } + + renderPlayButton(){ + var button = this.props.mopidyActions.play()}> + if( this.props.play_state == 'playing' ){ + button = this.props.mopidyActions.pause()}> + } + return button; + } + + renderConsumeButton(){ + var button = this.props.mopidyActions.instruct('tracklist.setConsume', [true])}>Consume + if( this.props.consume ){ + button = this.props.mopidyActions.instruct('tracklist.setConsume', [false])}>Consume + } + return button; + } + + renderRandomButton(){ + var button = this.props.mopidyActions.instruct('tracklist.setRandom', [true])}>Shuffle + if( this.props.random ){ + button = this.props.mopidyActions.instruct('tracklist.setRandom', [false])}>Shuffle + } + return button; + } + + renderRepeatButton(){ + var button = this.props.mopidyActions.instruct('tracklist.setRepeat', [true])}>Repeat + if( this.props.repeat ){ + button = this.props.mopidyActions.instruct('tracklist.setRepeat', [false])}>Repeat + } + return button; + } + + render(){ + var images = [] + if (this.props.current_track && this.props.current_track.album && this.props.current_track.album.images){ + images = this.props.current_track.album.images + } + + return ( +
+ +
+ +
+ { this.props.current_track ? this.props.current_track.name : - } +
+
+ { this.props.current_track ? : } +
+
+ +
+ this.props.mopidyActions.previous()}> + + + { this.renderPlayButton() } + this.props.mopidyActions.stop()}> + + + this.props.mopidyActions.next()}> + + +
+ +
+ { this.renderConsumeButton() } + { this.renderRandomButton() } + { this.renderRepeatButton() } +
+ +
+ + { this.props.time_position ? : '-' } + { this.props.current_track ? : '-' } +
+ +
+ +
+ +
+ ); + } +} + + +/** + * Export our component + * + * We also integrate our global store, using connect() + **/ + +const mapStateToProps = (state, ownProps) => { + return { + current_track: (typeof(state.ui.current_track) !== 'undefined' && typeof(state.ui.tracks) !== 'undefined' && typeof(state.ui.tracks[state.ui.current_track.uri]) !== 'undefined' ? state.ui.tracks[state.ui.current_track.uri] : null), + radio_enabled: (state.ui.radio && state.ui.radio.enabled ? true : false), + play_state: state.mopidy.play_state, + time_position: state.mopidy.time_position, + consume: state.mopidy.consume, + repeat: state.mopidy.repeat, + random: state.mopidy.random + } +} + +const mapDispatchToProps = (dispatch) => { + return { + mopidyActions: bindActionCreators(mopidyActions, dispatch) + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(PlaybackControls) \ No newline at end of file diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js index 73713108..e4ccf552 100755 --- a/src/js/components/Sidebar.js +++ b/src/js/components/Sidebar.js @@ -5,7 +5,6 @@ import { bindActionCreators } from 'redux' import { Link } from 'react-router' import Icon from './Icon' -import Thumbnail from './Thumbnail' import SearchForm from './SearchForm' import Dropzones from './Dropzones' @@ -21,8 +20,6 @@ class Sidebar extends React.Component{ render(){ return (