Mobile playback controls
This commit is contained in:
James Barnsley
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -68,11 +68,15 @@ main {
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
|
||||
padding: 10px 10px 10px 0;
|
||||
|
||||
.icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.options {
|
||||
top: 10px;
|
||||
right: 0;
|
||||
|
||||
.context-menu-trigger {
|
||||
|
||||
@ -45,10 +45,6 @@
|
||||
border-bottom: 1px dotted transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($light_grey, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
@ -58,11 +54,11 @@
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
vertical-align: bottom;
|
||||
|
||||
&.play {
|
||||
font-size: 24px;
|
||||
margin-top: -6px;
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@ -76,7 +72,7 @@
|
||||
|
||||
section {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
bottom: 11px;
|
||||
|
||||
&.playback {
|
||||
left: 20px;
|
||||
@ -85,7 +81,7 @@
|
||||
}
|
||||
|
||||
&.progress {
|
||||
top: 12px;
|
||||
bottom: 12px;
|
||||
left: 140px;
|
||||
right: 280px;
|
||||
padding-left: 20px;
|
||||
@ -94,7 +90,7 @@
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50px;
|
||||
right: 50px;
|
||||
}
|
||||
@ -102,7 +98,7 @@
|
||||
.current {
|
||||
font-size: 11px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
left: 0;
|
||||
width: 45px;
|
||||
text-align: right;
|
||||
@ -111,7 +107,7 @@
|
||||
.total {
|
||||
font-size: 11px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
right: 0;
|
||||
width: 45px;
|
||||
}
|
||||
@ -124,7 +120,7 @@
|
||||
}
|
||||
|
||||
&.volume {
|
||||
top: 12px;
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
width: 150px;
|
||||
|
||||
@ -134,13 +130,13 @@
|
||||
|
||||
.control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.slider-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 2px;
|
||||
right: 0;
|
||||
left: 30px;
|
||||
}
|
||||
@ -151,6 +147,97 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.triggers {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive($bp_medium){
|
||||
|
||||
.current-track {
|
||||
width: auto;
|
||||
bottom: auto;
|
||||
bottom: 8px;
|
||||
left: 60px;
|
||||
right: 60px;
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
|
||||
&.playback {
|
||||
left: 0;
|
||||
width: 60px;
|
||||
|
||||
.control {
|
||||
&.play {
|
||||
font-size: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.previous {
|
||||
display: none;
|
||||
}
|
||||
&.stop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.volume {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.progress {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.triggers {
|
||||
display: block;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
height: 150px;
|
||||
|
||||
section {
|
||||
|
||||
&.settings {
|
||||
display: block;
|
||||
right: 20px;
|
||||
bottom: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.volume {
|
||||
width: auto;
|
||||
display: block;
|
||||
right: 130px;
|
||||
left: 22px;
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
&.progress {
|
||||
display: block;
|
||||
bottom: 110px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -28,9 +28,10 @@
|
||||
|
||||
.track {
|
||||
height: 5px;
|
||||
top: 12px;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin-top: -3px;
|
||||
|
||||
.progress {
|
||||
top: 0;
|
||||
|
||||
@ -65,6 +65,10 @@ main {
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
|
||||
.content-wrapper {
|
||||
padding: 40px 10px 40px;
|
||||
}
|
||||
|
||||
section.list-wrapper {
|
||||
padding: 10px 0;
|
||||
}
|
||||
@ -329,6 +333,18 @@ footer {
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.right-padding {
|
||||
padding-right: 20px;
|
||||
}
|
||||
@ -336,17 +352,4 @@ footer {
|
||||
.left-padding {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user