ampache_react/app/components/Album.jsx

143 lines
4.9 KiB
React
Raw Permalink Normal View History

// NPM import
2016-07-07 23:23:18 +02:00
import React, { Component, PropTypes } from "react";
import CSSModules from "react-css-modules";
import { defineMessages, FormattedMessage, injectIntl, intlShape } from "react-intl";
import FontAwesome from "react-fontawesome";
import Immutable from "immutable";
2016-07-07 23:23:18 +02:00
// Local imports
2016-08-02 13:07:12 +02:00
import { formatLength, messagesMap } from "../utils";
// Translations
2016-08-02 13:07:12 +02:00
import commonMessages from "../locales/messagesDescriptors/common";
2016-07-07 23:23:18 +02:00
// Styles
import css from "../styles/Album.scss";
// Set translations
const albumMessages = defineMessages(messagesMap(Array.concat([], commonMessages)));
2016-08-02 13:07:12 +02:00
/**
* Track row in an album tracks table.
*/
class AlbumTrackRowCSSIntl extends Component {
constructor(props) {
super(props);
// Bind this
this.onPlayClick = this.onPlayClick.bind(this);
this.onPlayNextClick = this.onPlayNextClick.bind(this);
}
/**
* Handle click on play button.
*/
onPlayClick() {
$(this.refs.play).blur();
this.props.playAction(this.props.track.get("id"));
}
/**
* Handle click on play next button.
*/
onPlayNextClick() {
$(this.refs.playNext).blur();
this.props.playNextAction(this.props.track.get("id"));
}
render() {
const { formatMessage } = this.props.intl;
const length = formatLength(this.props.track.get("time"));
2016-07-07 23:23:18 +02:00
return (
<tr>
2016-08-02 13:07:12 +02:00
<td>
<button styleName="play" title={formatMessage(albumMessages["app.common.play"])} onClick={this.onPlayClick}>
<span className="sr-only">
<FormattedMessage {...albumMessages["app.common.play"]} />
</span>
<FontAwesome name="play-circle-o" aria-hidden="true" />
</button>&nbsp;
<button styleName="playNext" title={formatMessage(albumMessages["app.common.playNext"])} onClick={this.onPlayNextClick} ref="playNext">
<span className="sr-only">
<FormattedMessage {...albumMessages["app.common.playNext"]} />
</span>
<FontAwesome name="plus-circle" aria-hidden="true" />
</button>
2016-08-02 13:07:12 +02:00
</td>
<td>{this.props.track.get("track")}</td>
<td>{this.props.track.get("name")}</td>
2016-07-07 23:23:18 +02:00
<td>{length}</td>
</tr>
);
}
}
AlbumTrackRowCSSIntl.propTypes = {
playAction: PropTypes.func.isRequired,
playNextAction: PropTypes.func.isRequired,
track: PropTypes.instanceOf(Immutable.Map).isRequired,
intl: intlShape.isRequired,
2016-07-07 23:23:18 +02:00
};
export let AlbumTrackRow = injectIntl(CSSModules(AlbumTrackRowCSSIntl, css));
2016-07-07 23:23:18 +02:00
/**
* Tracks table of an album.
*/
2016-07-30 01:05:25 +02:00
class AlbumTracksTableCSS extends Component {
render() {
let rows = [];
// Build rows for each track
const { playAction, playNextAction } = this.props;
2016-07-07 23:23:18 +02:00
this.props.tracks.forEach(function (item) {
rows.push(<AlbumTrackRow playAction={playAction} playNextAction={playNextAction} track={item} key={item.get("id")} />);
2016-07-07 23:23:18 +02:00
});
return (
2016-07-30 01:05:25 +02:00
<table className="table table-hover" styleName="songs">
2016-07-07 23:23:18 +02:00
<tbody>
{rows}
</tbody>
</table>
);
}
}
2016-07-30 01:05:25 +02:00
AlbumTracksTableCSS.propTypes = {
playAction: PropTypes.func.isRequired,
playNextAction: PropTypes.func.isRequired,
tracks: PropTypes.instanceOf(Immutable.List).isRequired,
2016-07-07 23:23:18 +02:00
};
2016-07-30 01:05:25 +02:00
export let AlbumTracksTable = CSSModules(AlbumTracksTableCSS, css);
/**
* An entire album row containing art and tracks table.
*/
class AlbumRowCSS extends Component {
render() {
2016-07-07 23:23:18 +02:00
return (
<div className="row" styleName="row">
2016-09-18 22:50:59 +02:00
<div className="col-xs-9 col-sm-offset-2 col-sm-10" styleName="nameRow">
<h2>{this.props.album.get("name")}</h2>
2016-07-07 23:23:18 +02:00
</div>
<div className="col-xs-3 col-sm-2" styleName="artRow">
<p className="text-center"><img src={this.props.album.get("art")} width="200" height="200" className="img-responsive img-circle" styleName="art" alt={this.props.album.get("name")} /></p>
2016-07-27 13:51:30 +02:00
</div>
<div className="col-xs-9 col-sm-10 table-responsive">
{
this.props.songs.size > 0 ?
<AlbumTracksTable playAction={this.props.playAction} playNextAction={this.props.playNextAction} tracks={this.props.songs} /> :
null
}
2016-07-07 23:23:18 +02:00
</div>
</div>
);
}
}
AlbumRowCSS.propTypes = {
playAction: PropTypes.func.isRequired,
playNextAction: PropTypes.func.isRequired,
album: PropTypes.instanceOf(Immutable.Map).isRequired,
songs: PropTypes.instanceOf(Immutable.List).isRequired,
2016-07-07 23:23:18 +02:00
};
export let AlbumRow = CSSModules(AlbumRowCSS, css);