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
|
import React, { Component } from 'react'
import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
import { SpeakerIcon } from '../../nav/viewer.icons'
import { MediaCitation } from '../components.media'
export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
if (!media.lookup) return <div />
const annotation = paragraph.annotations[0]
const item = media.lookup[annotation.settings.media_id]
if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
let url, captionItem, colorName;
if (item.type === 'gallery') {
const index = parseInt(annotation.settings.frame_index)
const frame_id = item.settings.image_order[index]
const frame = item.settings.display_lookup[frame_id]
if (!frame) {
console.error("Slide not found:", annotation.settings.frame_index)
return <div />
}
url = frame.url
captionItem = item.settings.caption_lookup[frame_id]
if (!captionItem.short_caption) {
captionItem = item
}
colorName = annotation.settings.inline_color || annotation.settings.color || 'white'
} else {
url = item.settings.display.url
captionItem = item
colorName = annotation.settings.inline_color || annotation.settings.color || 'white'
}
if (annotation.settings.hide_caption) {
captionItem = null
}
const color = CURTAIN_COLOR_LOOKUP[colorName]
const style = {
backgroundColor: color.backgroundColor,
}
// "fullscreen-style inline images"
if (annotation.settings.inline_size === 'fullscreen') {
return (
<div className="media image fullscreen" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
<div className="img" style={{ backgroundImage: 'url(' + url + ')'}}>
<div className="speaker-icon">{SpeakerIcon}</div>
</div>
<MediaCitation media={captionItem} />
</div>
)
} else {
const imageClassName = "image-container " + (annotation.settings.inline_size || "")
return (
<div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
<div className={imageClassName} style={style}>
<img src={url} />
{!annotation.settings.hide_speaker_icon && <div className="speaker-icon">{SpeakerIcon}</div>}
</div>
{captionItem && <MediaCitation media={captionItem} />}
</div>
)
}
}
|
