1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import SkipNextIcon from '@material-ui/icons/SkipNext';
import { Typography, Card, CardMedia, CardContent, IconButton } from '@material-ui/core';
import styles from './cardStyle-jss';
class PlayerCard extends React.Component {
state = { expanded: false };
handleExpandClick = () => {
this.setState({ expanded: !this.state.expanded });
};
render() {
const {
classes,
theme,
title,
artist,
cover,
} = this.props;
return (
<Card className={classes.cardPlayer}>
<div className={classes.details}>
<CardContent className={classes.content}>
<Typography variant="h5">{title}</Typography>
<Typography variant="subtitle1" color="textSecondary">
{artist}
</Typography>
</CardContent>
<div className={classes.controls}>
<IconButton aria-label="Previous">
{theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />}
</IconButton>
<IconButton aria-label="Play/pause">
<PlayArrowIcon className={classes.playIcon} />
</IconButton>
<IconButton aria-label="Next">
{theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />}
</IconButton>
</div>
</div>
<CardMedia
className={classes.cover}
image={cover}
title={title}
/>
</Card>
);
}
}
PlayerCard.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
title: PropTypes.string.isRequired,
artist: PropTypes.string.isRequired,
cover: PropTypes.string.isRequired,
};
export default withStyles(styles, { withTheme: true })(PlayerCard);
|
