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 from 'react'
import { connect } from 'react-redux'
import actions from 'app/actions'
import { timestamp } from 'app/utils'
// arrows
const arrows = {
down: (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<polygon points="10.06,16.14 9.51,16.98 20,23.86 30.49,16.98 29.94,16.14 20,22.66" />
</svg>
),
up: (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<polygon points="10.06,23.86 9.51,23.02 20,16.14 30.49,23.02 29.94,23.86 20,17.34" />
</svg>
),
right: (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="10 0 20 40">
<polygon points="16.98,30.49 16.14,29.94 22.66,20 16.14,10.06 16.98,9.51 23.86,20" />
</svg>
),
left: (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="10 0 20 40">
<polygon points="23.02,30.49 16.14,20 23.02,9.51 23.86,10.06 17.34,20 23.86,29.94" />
</svg>
),
}
export const Arrow = React.memo(({ type }) => (
<div className={'arrow ' + type}>
{arrows[type]}
</div>
))
// volume toggle
export const VolumeControl = React.memo(({ volume }) => (
<div className={volume ? 'volume' : 'volume muted'} onClick={() => actions.audio.setVolume(setVolume ? 0.0 : 1.0)}>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<path d="M5,25h4.17l0,2.5H5V25z M15.33,27.5h4.17V20h-4.17V27.5z M20.5,27.5h4.17v-10H20.5V27.5z M25.67,27.5h4.17V15h-4.17V27.5z
M30.83,27.5H35v-15h-4.17V27.5z M10.17,27.5h4.17v-5h-4.17V27.5z"/>
</svg>
</div>
))
// play / pause button
export const PlayIcon = (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<polygon points="12.5,11 12.5,29 27.5,20 " />
</svg>
)
export const PauseIcon = (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<path d="M14.34,12.5h4.16v15h-4.16V12.5z M21.5,27.5h4.17v-15H21.5V27.5z" />
</svg>
)
export const PlayButton = ({ playing }) => {
return (
<div
className='playToggle'
onClick={() => playing ? actions.audio.pause() : actions.audio.play()}
>
{playing ? PauseIcon : PlayIcon}
</div>
)
}
// player current time
export const PlayerTime = ({ play_ts, duration }) => (
<span className='playerTime'>
{timestamp(play_ts)}
<span className='playerDuration'>
{' / '}
{timestamp(duration)}
</span>
</span>
)
// zoom button
export const ZoomPlus = (
<svg className='zoomPlus' version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<path className='ring' d="M20,35.5c-8.55,0-15.5-6.95-15.5-15.5c0-8.55,6.95-15.5,15.5-15.5S35.5,11.45,35.5,20C35.5,28.55,28.55,35.5,20,35.5z M20,5.5C12,5.5,5.5,12,5.5,20c0,8,6.5,14.5,14.5,14.5S34.5,28,34.5,20C34.5,12,28,5.5,20,5.5z" />
<path className='ring-inner' d="M20,35.5c-8.55,0-15.5-6.95-15.5-15.5c0-8.55,6.95-15.5,15.5-15.5S35.5,11.45,35.5,20C35.5,28.55,28.55,35.5,20,35.5z" />
<path className='cross' d="M27.5,19.5h-7v-7h-1v7h-7v1h7v7h1v-7h7V19.5z"/>
</svg>
)
|
