ampache_react/app/components/Album.jsx

85 lines
2.3 KiB
React
Raw Normal View History

2016-07-07 23:23:18 +02:00
import React, { Component, PropTypes } from "react";
import CSSModules from "react-css-modules";
2016-07-07 23:23:18 +02:00
import { formatLength } from "../utils";
import css from "../styles/Album.scss";
2016-07-07 23:23:18 +02:00
export class AlbumTrackRow extends Component {
render () {
const length = formatLength(this.props.track.length);
return (
<tr>
<td>{this.props.track.track}</td>
<td>{this.props.track.name}</td>
<td>{length}</td>
</tr>
);
}
}
AlbumTrackRow.propTypes = {
track: PropTypes.object.isRequired
};
export class AlbumTracksTable extends Component {
render () {
var rows = [];
this.props.tracks.forEach(function (item) {
rows.push(<AlbumTrackRow track={item} key={item.id} />);
});
return (
<table className="table table-hover songs">
<tbody>
{rows}
</tbody>
</table>
);
}
}
AlbumTracksTable.propTypes = {
tracks: PropTypes.array.isRequired
};
class AlbumRowCSS extends Component {
2016-07-07 23:23:18 +02:00
render () {
return (
<div className="row" styleName="row">
<div className="col-sm-offset-2 col-xs-10" styleName="nameRow">
2016-07-27 13:51:30 +02:00
<h2>{this.props.album.name}</h2>
2016-07-07 23:23:18 +02:00
</div>
<div className="col-xs-2" styleName="artRow">
<p className="text-center"><img src={this.props.album.art} width="200" height="200" className="img-responsive img-circle" styleName="art" alt={this.props.album.name} /></p>
2016-07-27 13:51:30 +02:00
</div>
<div className="col-sm-10 table-responsive">
{
Array.isArray(this.props.album.tracks) ?
<AlbumTracksTable tracks={this.props.album.tracks} /> :
null
}
2016-07-07 23:23:18 +02:00
</div>
</div>
);
}
}
AlbumRowCSS.propTypes = {
2016-07-07 23:23:18 +02:00
album: PropTypes.object.isRequired
};
export let AlbumRow = CSSModules(AlbumRowCSS, css);
2016-07-07 23:23:18 +02:00
export default class Album extends Component {
render () {
return (
<AlbumRow album={this.props.album} />
);
}
}
Album.propTypes = {
album: PropTypes.object.isRequired
};