/
Controls.tsx
94 lines (84 loc) · 2.17 KB
/
Controls.tsx
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React, { PureComponent } from 'react';
import { px, styled } from '../styles';
import { StyledComponentProps, StylesOptions } from '../types/common';
import { WebPlaybackTrack } from '../types/spotify';
import Next from './icons/Next';
import Pause from './icons/Pause';
import Play from './icons/Play';
import Previous from './icons/Previous';
interface Props {
isExternalDevice: boolean;
isPlaying: boolean;
onClickNext: () => void;
onClickPrevious: () => void;
onClickTogglePlay: () => void;
nextTracks: WebPlaybackTrack[];
previousTracks: WebPlaybackTrack[];
styles: StylesOptions;
}
const Wrapper = styled('div')(
{},
({ styles }: StyledComponentProps) => ({
alignItems: 'center',
display: 'flex',
height: px(styles.height),
justifyContent: 'center',
'@media (max-width: 767px)': {
padding: px(10),
},
'> div': {
minWidth: px(styles.height),
textAlign: 'center',
},
button: {
color: styles.color,
fontSize: px(16),
'&.rswp__toggle': {
fontSize: px(28),
},
},
}),
'ControlsRSWP',
);
export default class Controls extends PureComponent<Props> {
public render() {
const {
isExternalDevice,
isPlaying,
onClickNext,
onClickPrevious,
onClickTogglePlay,
nextTracks,
previousTracks,
styles,
} = this.props;
return (
<Wrapper styles={styles}>
<div>
{(!!previousTracks.length || isExternalDevice) && (
<button type="button" onClick={onClickPrevious} aria-label="Previous Track">
<Previous />
</button>
)}
</div>
<div>
<button
type="button"
className="rswp__toggle"
onClick={onClickTogglePlay}
aria-label={isPlaying ? 'Pause' : 'Play'}
>
{isPlaying ? <Pause /> : <Play />}
</button>
</div>
<div>
{(!!nextTracks.length || isExternalDevice) && (
<button type="button" onClick={onClickNext} aria-label="Next Track">
<Next />
</button>
)}
</div>
</Wrapper>
);
}
}