diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer')
4 files changed, 40 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.router.js b/animism-align/frontend/app/views/viewer/nav/viewer.router.js index bbe09ee..f83f460 100644 --- a/animism-align/frontend/app/views/viewer/nav/viewer.router.js +++ b/animism-align/frontend/app/views/viewer/nav/viewer.router.js @@ -40,6 +40,9 @@ class ViewerRouter extends Component { case 'footnotes': actions.viewer.showComponent('footnotes') break + case 'textplate': + actions.viewer.seekToTimestamp(timestampToSeconds('44:39')) + break case 'end': break } diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.text.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.text.js new file mode 100644 index 0000000..d9f7117 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.text.js @@ -0,0 +1,21 @@ +import React from 'react' + +export const FullscreenTextPlate = ({ element, transitionDuration }) => { + console.log(element) + const { color } = element + const style = { + backgroundColor: color.backgroundColor.replace('1.0', '0.8'), + color: color.textColor, + transitionDuration, + } + return ( + <div + className='fullscreen-element text-plate' + style={style} + > + <span> + {element.annotation.text} + </span> + </div> + ) +} diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js index 4f0b38b..0ac69c5 100644 --- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js @@ -16,6 +16,10 @@ import { FullscreenCurtain } from './fullscreen.utility' +import { + FullscreenTextPlate +} from './fullscreen.text' + export const fullscreenComponents = { curtain: React.memo(FullscreenCurtain), video: React.memo(FullscreenVideo), @@ -23,4 +27,5 @@ export const fullscreenComponents = { gallery: React.memo(FullscreenGallery), carousel: React.memo(FullscreenCarousel), vitrine: React.memo(FullscreenVitrine), + text_plate: React.memo(FullscreenTextPlate), } diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css index c9a1e48..99c64cd 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css @@ -105,3 +105,14 @@ iframe { text-overflow: ellipsis; cursor: pointer; } + +/* text plates */ + +.fullscreen-element.text-plate span { + font-family: "Freight Text", serif; + font-size: 3rem; + line-height: 1.28; + max-width: 90%; + white-space: pre-line; + text-align: center; +} |