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
95
96
97
|
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
const VolumeIcon = React.memo(({ muted }) => (
<div className={muted ? 'volume muted' : 'volume'} onClick={() => actions.audio.toggleMuted()}>
<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>
))
export const VolumeControl = connect(state => ({
muted: state.audio.muted,
}))(VolumeIcon)
// play / pause button
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>
)
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>
)
const PlayButtonIcon = ({ playing }) => {
return (
<div
className='playToggle'
onClick={() => playing ? actions.audio.pause() : actions.audio.play()}
>
{playing ? PauseIcon : PlayIcon}
</div>
)
}
export const PlayButton = connect(state => ({
playing: state.audio.playing,
}))(PlayButtonIcon)
// player current time
const PlayerTimeSpan = ({ play_ts, duration }) => (
<span className='playerTime'>
{timestamp(play_ts)}
{' / '}
{timestamp(duration)}
</span>
)
export const PlayerTime = connect(state => ({
play_ts: state.audio.play_ts,
duration: state.align.timeline.duration,
}))(PlayerTimeSpan)
|
