secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Mobile playback controls

Browse Source
This commit is contained in:
James Barnsley
2017-06-22 08:59:40 +12:00
parent b979063ae7
commit 2ca8726141
6 changed files with 144 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/js/components/PlaybackControls.js
View File

@ -17,7 +17,11 @@ import * as mopidyActions from '../services/mopidy/actions'
class PlaybackControls extends React.Component{
constructor(props) {
super(props);
super(props)
this.state = {
expanded: false
}
}
renderPlayButton(){
@ -64,7 +68,7 @@ class PlaybackControls extends React.Component{
}
return (
<div className="playback-controls">
<div className={(this.state.expanded ? "expanded playback-controls" : "playback-controls")}>
<Link className="current-track" to={(this.props.current_track && this.props.current_track.album ? global.baseURL+'album/'+this.props.current_track.album.uri : null)}>
<div className="thumbnail-wrapper" onClick={e => this.handleThumbnailClick(e)}>
@ -79,14 +83,14 @@ class PlaybackControls extends React.Component{
</Link>
<section className="playback">
<a className="control" onClick={() => this.props.mopidyActions.previous()}>
<a className="control previous" onClick={() => this.props.mopidyActions.previous()}>
<FontAwesome name="step-backward" />
</a>
{ this.renderPlayButton() }
<a className="control" onClick={() => this.props.mopidyActions.stop()}>
<a className="control stop" onClick={() => this.props.mopidyActions.stop()}>
<FontAwesome name="stop" />
</a>
<a className="control" onClick={() => this.props.mopidyActions.next()}>
<a className="control next" onClick={() => this.props.mopidyActions.next()}>
<FontAwesome name="step-forward" />
</a>
</section>
@ -106,6 +110,12 @@ class PlaybackControls extends React.Component{
<section className="volume">
<VolumeControl />
</section>
<section className="triggers">
<a className="control next" onClick={() => this.setState({expanded: !this.state.expanded})}>
{this.state.expanded ? <FontAwesome name="chevron-down" /> : <FontAwesome name="chevron-up" />}
</a>
</section>
</div>
);

20
src/js/components/VolumeControl.js
View File

@ -56,22 +56,14 @@ class VolumeControl extends React.Component{
}
return (
<span className={className}>
<a className="modal-trigger" onClick={() => this.props.uiActions.openModal('volume')}>
{this.props.mute ? <FontAwesome className="muted" name="volume-off" /> : <FontAwesome name="volume-down" />}
</a>
<span className="default">
{this.renderMuteButton()}
<div className="slider-wrapper">
<div className="slider horizontal" onClick={e => this.handleClick(e)}>
<div className="track">
<div className="progress" style={{ width: this.props.volume+'%' }}></div>
</div>
{this.renderMuteButton()}
<div className="slider-wrapper">
<div className="slider horizontal" onClick={e => this.handleClick(e)}>
<div className="track">
<div className="progress" style={{ width: this.props.volume+'%' }}></div>
</div>
</div>
</span>
</div>
</span>
);
}