Enhance playlist page

* Do not display play next button on `/playlist` page.
* Play on `/playlist` page jumps to the selected item instead of
clearing the whole playlist.
This commit is contained in:
Lucas Verney 2016-09-18 21:46:40 +02:00
parent 23c252f96a
commit 99e9b54376
5 changed files with 40 additions and 31 deletions

View File

@ -51,8 +51,10 @@ class SongsTableRowCSSIntl extends Component {
*/
onPlayNextClick() {
$(this.refs.playNext).blur();
if (this.props.playNextAction) {
this.props.playNextAction(this.props.song.get("id"));
}
}
render() {
const { formatMessage } = this.props.intl;
@ -61,6 +63,18 @@ class SongsTableRowCSSIntl extends Component {
const linkToArtist = "/artist/" + this.props.song.getIn(["artist", "id"]) + "-" + encodeURIComponent(this.props.song.getIn(["artist", "name"]));
const linkToAlbum = linkToArtist + "/album/" + this.props.song.getIn(["album", "id"]) + "-" + encodeURIComponent(this.props.song.getIn(["album", "name"]));
let playNextButton = null;
if (this.props.playNextAction) {
playNextButton = (
<button styleName="playNext" title={formatMessage(songsMessages["app.common.playNext"])} onClick={this.onPlayNextClick} ref="playNext">
<span className="sr-only">
<FormattedMessage {...songsMessages["app.common.playNext"]} />
</span>
<FontAwesome name="plus-circle" aria-hidden="true" />
</button>
);
}
return (
<tr>
<td>
@ -70,12 +84,7 @@ class SongsTableRowCSSIntl extends Component {
</span>
<FontAwesome name="play-circle-o" aria-hidden="true" />
</button>&nbsp;
<button styleName="playNext" title={formatMessage(songsMessages["app.common.playNext"])} onClick={this.onPlayNextClick} ref="playNext">
<span className="sr-only">
<FormattedMessage {...songsMessages["app.common.playNext"]} />
</span>
<FontAwesome name="plus-circle" aria-hidden="true" />
</button>
{ playNextButton }
</td>
<td className="title">{this.props.song.get("name")}</td>
<td className="artist"><Link to={linkToArtist}>{this.props.song.getIn(["artist", "name"])}</Link></td>
@ -88,7 +97,7 @@ class SongsTableRowCSSIntl extends Component {
}
SongsTableRowCSSIntl.propTypes = {
playAction: PropTypes.func.isRequired,
playNextAction: PropTypes.func.isRequired,
playNextAction: PropTypes.func,
song: PropTypes.instanceOf(Immutable.Map).isRequired,
intl: intlShape.isRequired,
};
@ -165,7 +174,7 @@ class SongsTableCSS extends Component {
}
SongsTableCSS.propTypes = {
playAction: PropTypes.func.isRequired,
playNextAction: PropTypes.func.isRequired,
playNextAction: PropTypes.func,
songs: PropTypes.instanceOf(Immutable.List).isRequired,
filterText: PropTypes.string,
};
@ -230,7 +239,7 @@ export default class FilterablePaginatedSongsTable extends Component {
}
FilterablePaginatedSongsTable.propTypes = {
playAction: PropTypes.func.isRequired,
playNextAction: PropTypes.func.isRequired,
playNextAction: PropTypes.func,
isFetching: PropTypes.bool.isRequired,
error: PropTypes.string,
songs: PropTypes.instanceOf(Immutable.List).isRequired,

View File

@ -17,7 +17,7 @@ import Playlist from "../components/Playlist";
class PlaylistPage extends Component {
render() {
return (
<Playlist playAction={this.props.actions.playSong} playNextAction={this.props.actions.pushSong} songs={this.props.songsList} currentIndex={this.props.currentIndex} />
<Playlist playAction={this.props.actions.jumpToSong} playNextAction={null} songs={this.props.songsList} currentIndex={this.props.currentIndex} />
);
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long