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
|
import React, { Component } from 'react'
import { CURTAIN_COLOR_SELECT_OPTIONS, IMAGE_INLINE_SIZE_OPTIONS } from 'app/constants'
import { Select, Checkbox, TextInput } from 'app/common'
import { AnnotationFormFullscreen } from './annotationForm.utility'
import { makeMediaItems, makeGalleryItems } from 'app/utils/annotation.utils'
export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
if (!media.lookup) return <div />
const image_list_items = makeMediaItems(media, ['image', 'gallery'])
const { gallery_items, thumbnail } = makeGalleryItems(annotation, media)
console.log(annotation)
return (
<div className='options'>
<Select
name='media_id'
className="media_id"
selected={annotation.settings.media_id}
options={image_list_items}
defaultOption='Choose an image'
onChange={handleSettingsSelect}
/>
{gallery_items && (
<Select
name='frame_index'
selected={annotation.settings.frame_index}
options={gallery_items}
defaultOption='Choose an image'
onChange={handleSettingsSelect}
/>
)}
{thumbnail && (
<img src={thumbnail.url} />
)}
<Checkbox
label="Fullscreen"
name="fullscreen"
checked={annotation.settings.fullscreen}
onChange={handleSettingsSelect}
/>
<Select
title='Color'
name='color'
selected={annotation.settings.color}
options={CURTAIN_COLOR_SELECT_OPTIONS}
defaultOption='Pick a color'
onChange={handleSettingsSelect}
/>
{(annotation.settings.fullscreen) && (
<div>
<Checkbox
label="Hide inline image"
name="hide_poster_inline"
checked={annotation.settings.hide_poster_inline}
onChange={handleSettingsSelect}
/>
<Select
title='Inline size'
name='inline_size'
selected={annotation.settings.inline_size}
options={IMAGE_INLINE_SIZE_OPTIONS}
defaultOption='Pick a size'
onChange={handleSettingsSelect}
/>
<Checkbox
label="Hide speaker icon"
name="hide_speaker_icon"
checked={annotation.settings.hide_speaker_icon}
onChange={handleSettingsSelect}
/>
<Select
title='Inline background color'
name='inline_color'
selected={annotation.settings.inline_color}
options={CURTAIN_COLOR_SELECT_OPTIONS}
defaultOption='Pick a color'
onChange={handleSettingsSelect}
/>
</div>
)}
<Checkbox
label="Hide caption"
name="hide_caption"
checked={annotation.settings.hide_caption}
onChange={handleSettingsSelect}
/>
<Checkbox
label="Hide in transcript"
name="hide_in_transcript"
checked={annotation.settings.hide_in_transcript}
onChange={handleSettingsSelect}
/>
<TextInput
title="Override start time"
name="override_start_ts"
className="number"
placeholder="0:00"
data={annotation.settings}
onChange={handleSettingsChange}
autoComplete="off"
/>
{(annotation.settings.fullscreen && !annotation.settings.inline) && (
<AnnotationFormFullscreen
annotation={annotation}
handleSettingsChange={handleSettingsChange}
handleSettingsSelect={handleSettingsSelect}
/>
)}
</div>
)
}
|
