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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
import React from 'react'
import { connect } from 'react-redux'
import actions from 'app/actions'
import { clamp, 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, onClick }) => (
<div className={'arrow ' + type} onClick={onClick}>
{arrows[type]}
</div>
))
// volume toggle
export const VolumeControlIcon = ({ volume }) => (
<div
className={volume ? 'volume' : 'volume muted'}
onClick={e => {
e && e.stopPropagation()
actions.audio.setVolume(volume ? 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>
)
export const VolumeControl = React.memo(VolumeControlIcon)
// 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, onClick }) => {
return (
<div
className={playing ? 'playToggle playing' : 'playToggle paused'}
onClick={e => {
e && e.stopPropagation()
if (onClick) {
onClick(playing)
} else if (playing) {
actions.audio.pause()
} else {
actions.viewer.playFromClick()
}
}}
>
{playing ? PauseIcon : PlayIcon}
</div>
)
}
// subtitles
export const SubtitleButton = ({ cc }) => {
return (
<div
className={cc ? 'cc-button on' : 'cc-button off'}
onClick={() => actions.audio.setCC(!cc)}
>
{'CC'}
</div>
)
}
// player current time
export const PlayerTime = ({ play_ts, duration }) => (
<span className='playerTime'>
{timestamp(clamp(play_ts, 0, duration))}
<span className='playerDuration'>
{' / '}
{timestamp(clamp(duration, 0, 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>
)
export const SpeakerIcon = (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<path d="M29.11,20.37c0,2.48-1.21,4.74-3.23,6.04l-0.57-0.89c1.71-1.1,2.74-3.03,2.74-5.15c0-2.11-1.06-4.09-2.77-5.18l0.57-0.9
C27.89,15.59,29.11,17.86,29.11,20.37z M10.89,15.5v9h5.02l5.4,4.38V11.12l-5.4,4.38H10.89z"/>
</svg>
)
// mobile phone icon
export const MobilePhoneIcon = (
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16">
<path fillRule="evenodd" d="M11 1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
<path fillRule="evenodd" d="M8 14a1 1 0 1 0 0-2a1 1 0 0 0 0 2z"/>
</svg>
)
|
