Castafiore/app/widgets/PlayerWidget.js at 2bad22ffaeac9b2514d0f45798a5ceef275bdcf5 · sawyerf/Castafiore · GitHub

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
import { FlexWidget, IconWidget, ImageWidget, OverlapWidget } from 'react-native-android-widget'

const playIcon = '\uF04B'
const pauseIcon = '\uF04C'
const nextIcon = '\uF051'
const prevIcon = '\uF048'

const PlayerWidget = ({ height, width, coverUrl, isPlaying }) => {
	return (
		<OverlapWidget>
			<FlexWidget
				style={{
					width: width > height ? width : height,
					height: width > height ? width : height,
					marginTop: width > height ? (height - width) / 2 : 0,
					marginLeft: width > height ? 0 : (width - height) / 2,
					overflow: 'hidden',
				}}
			>
				<ImageWidget
					image={coverUrl}
					style={{
						resizeMode: 'cover',
					}}
					imageWidth={width > height ? width : height}
					imageHeight={width > height ? width : height}
				/>
			</FlexWidget>
			<FlexWidget
				style={{
					width: width,
					height: height,
					flexDirection: 'row',
					justifyContent: 'center',
					alignItems: 'center',
					backgroundColor: 'rgba(0,0,0,0.4)',
				}}
			>
				<IconWidget
					font="FontAwesome"
					icon={prevIcon}
					size={30}
					clickAction={'PREV_ACTION'}
					style={{
						color: "white",
						padding: 8,
					}}
				/>
				<IconWidget
					font="FontAwesome"
					icon={isPlaying ? pauseIcon : playIcon}
					size={45}
					clickAction={isPlaying ? 'PAUSE_ACTION' : 'PLAY_ACTION' }
					style={{
						color: "white",
						padding: 8,
						marginHorizontal: 20,
					}}
				/>
				<IconWidget
					font="FontAwesome"
					icon={nextIcon}
					size={30}
					clickAction={'NEXT_ACTION'}
					style={{
						color: "white",
						padding: 8,
					}}
				/>
			</FlexWidget>
		</OverlapWidget >
	)
}

export default PlayerWidget