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:
parent
23c252f96a
commit
99e9b54376
@ -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>
|
||||
<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,
|
||||
|
@ -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
Loading…
Reference in New Issue
Block a user