blob: 5ec483339e51339037e1053dcd67c398ea078d6a (
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
|
import React from 'react'
import { EPILEPSY_WARNING, ROMAN_NUMERALS } from 'app/constants'
import { displayThumbnailURL } from 'app/utils/annotation.utils'
export const FullscreenCurtain = ({ element, transitionDuration }) => {
// console.log(element, isEntering)
const { color } = element
const style = {
backgroundColor: color.backgroundColor,
color: color.textColor,
transitionDuration,
}
console.log(element)
const curtainBackground = element.mediaItem && {
backgroundImage: 'url(' + (displayThumbnailURL(element.mediaItem)) + ')',
}
let texts = []
// console.log(element)
switch (element.settings.curtain_style) {
case 'section_heading':
texts.push((
<div key='idx'>{ROMAN_NUMERALS[element.section.index]}{'.'}</div>
))
texts.push((
<div key='title' dangerouslySetInnerHTML={{ __html: element.annotation.settings.curtain_text || element.section.title }} />
))
break
case 'video_title':
texts.push((
<i key='video'><div dangerouslySetInnerHTML={{ __html: element.annotation.settings.curtain_text }} /></i>
))
break
default:
texts.push((
<div key='curtain' dangerouslySetInnerHTML={{ __html: element.annotation.settings.curtain_text }} />
))
break
}
if (element.settings.flashing_light_warning) {
texts.push((
<div key='flashing_light_warning' className='flashing_light_warning'>{EPILEPSY_WARNING}</div>
))
}
return (
<div className='fullscreen-element curtain' style={style}>
{element.mediaItem && (
<div className='curtain-background' style={curtainBackground} />
)}
<div className='curtain-text'>
{texts}
</div>
</div>
)
}
|
