blob: dd5f640ba2d3061ec0ac13a7b29c2178324c7a32 (
plain)
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
import React, { Component } from 'react'
import { CURTAIN_COLOR_SELECT_OPTIONS, IMAGE_BACKGROUND_SIZE_OPTIONS } from 'app/constants'
import { Select, Checkbox, TextInput, LabelDescription } from 'app/common'
import { AnnotationFormFullscreen } from './annotationForm.utility'
import { makeMediaItems } from 'app/utils/annotation.utils'
export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
if (!media.lookup) return <div />
const video_list_items = makeMediaItems(media, ['video'])
return (
<div className='options'>
<Select
name='media_id'
className="media_id"
selected={annotation.settings.media_id}
options={video_list_items}
defaultOption='Choose a video'
onChange={handleSettingsSelect}
/>
<Checkbox
label="Autoplay"
name="autoplay"
checked={annotation.settings.autoplay}
onChange={handleSettingsSelect}
/>
<Checkbox
label="Fullscreen"
name="fullscreen"
checked={annotation.settings.fullscreen}
onChange={handleSettingsSelect}
/>
<Checkbox
label="Inline"
name="inline"
checked={annotation.settings.inline}
onChange={handleSettingsSelect}
/>
<Checkbox
label="Loop"
name="loop"
checked={annotation.settings.loop}
onChange={handleSettingsSelect}
/>
<Checkbox
label="Unmute"
name="unmuted"
checked={annotation.settings.unmuted}
onChange={handleSettingsSelect}
/>
{annotation.settings.inline && (
<Checkbox
label="Hide Controls"
name="hide_controls"
checked={annotation.settings.hide_controls}
onChange={handleSettingsSelect}
/>
)}
{annotation.settings.inline && (
<Checkbox
label="Show poster image"
name="poster"
checked={annotation.settings.poster}
onChange={handleSettingsSelect}
/>
)}
{(annotation.settings.fullscreen && !annotation.settings.inline) && (
<Checkbox
label="Hide inline video poster"
name="hide_poster_inline"
checked={annotation.settings.hide_poster_inline}
onChange={handleSettingsSelect}
/>
)}
{(annotation.settings.fullscreen && !annotation.settings.inline) && (
<Checkbox
label="Can play full video at end of section"
name="can_play_full_video"
checked={annotation.settings.can_play_full_video}
onChange={handleSettingsSelect}
/>
)}
<Checkbox
label="Hide in transcript"
name="hide_in_transcript"
checked={annotation.settings.hide_in_transcript}
onChange={handleSettingsSelect}
/>
<Select
title='Color'
name='color'
selected={annotation.settings.color}
options={CURTAIN_COLOR_SELECT_OPTIONS}
defaultOption='Pick a color'
onChange={handleSettingsSelect}
/>
<Select
title='Poster Size'
name='poster_size'
selected={annotation.settings.poster_size}
options={IMAGE_BACKGROUND_SIZE_OPTIONS}
defaultOption='Select size'
onChange={handleSettingsSelect}
/>
<Select
title='Poster background color'
name='poster_background_color'
selected={annotation.settings.poster_background_color}
options={CURTAIN_COLOR_SELECT_OPTIONS}
defaultOption='Pick a color'
onChange={handleSettingsSelect}
/>
<TextInput
title="Video start time"
name="video_start_ts"
className="number"
placeholder="0:00"
data={annotation.settings}
onChange={handleSettingsChange}
autoComplete="off"
/>
<LabelDescription>
{'Auto-advances the video to this point when starting'}
</LabelDescription>
{(annotation.settings.fullscreen && !annotation.settings.inline) && (
<AnnotationFormFullscreen
annotation={annotation}
handleSettingsChange={handleSettingsChange}
handleSettingsSelect={handleSettingsSelect}
/>
)}
</div>
)
}
export const AnnotationFormVideoSetVolume = ({ annotation, handleSettingsChange }) => {
return (
<div className='options'>
<TextInput
title="Volume"
name="volume"
className="number"
placeholder="1.0"
data={annotation.settings}
onChange={handleSettingsChange}
autoComplete="off"
/>
<TextInput
title="Fade Time"
name="duration"
className="number"
placeholder="0:01"
data={annotation.settings}
onChange={handleSettingsChange}
autoComplete="off"
/>
</div>
)
}
|
