diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
3 files changed, 58 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js index e46751e..781378e 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js @@ -12,6 +12,10 @@ import { MediaImage } from './inline.image' +import { + Intro +} from './inline.utility' + export const inlineComponents = { paragraph: React.memo(Paragraph), intro_paragraph: React.memo(Paragraph), @@ -22,4 +26,5 @@ export const inlineComponents = { header: React.memo(ParagraphHeading), video: React.memo(MediaVideo), image: React.memo(MediaImage), + intro: React.memo(Intro), } diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js new file mode 100644 index 0000000..dd4dbfe --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js @@ -0,0 +1,22 @@ +import React, { Component } from 'react' + +export const Intro = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => { + let className = 'site-intro' + const annotation = paragraph.annotations[0] + const item = media.lookup[annotation.settings.media_id] + console.log(item) + const style = { + backgroundImage: 'url(' + item.settings.file.url + ')', + } + return ( + <div + className={className} + style={style} + > + <div className='inner'> + {annotation.settings.title && <span dangerouslySetInnerHTML={{ __html: annotation.settings.title }} />} + {annotation.settings.subtitle && <span dangerouslySetInnerHTML={{ __html: annotation.settings.subtitle }} />} + </div> + </div> + ) +} diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css index 8862587..fa7e3d7 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -136,3 +136,34 @@ font-family: "Neue Haas Unica"; color: #888; } + +/* intro */ + +.site-intro { + position: relative; + width: 100vw; + height: 100vh; + overflow: hidden; + background: black; + background-size: cover; + background-position: center center; + background-repeat: no-repeat; +} +.site-intro .inner { + position: absolute; + top: 0; left: 50%; + transform: translateZ(0) translateX(-50%); + width: 100%; + height: 100%; + padding-bottom: 3rem; + max-width: 90%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: white; + font-family: "Freight Text", serif; + font-size: 12vh; + line-height: 1; + text-align: center; +}
\ No newline at end of file |