diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer')
4 files changed, 68 insertions, 3 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 diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index f03b16d..8c03a10 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -2,7 +2,9 @@ import * as types from 'app/types' import { store, history, dispatch } from 'app/store' import { MEDIA_ANNOTATION_TYPES, MEDIA_LABEL_TYPES, - TEXT_ANNOTATION_TYPES, UTILITY_ANNOTATION_TYPES, + TEXT_ANNOTATION_TYPES, + INLINE_UTILITY_ANNOTATION_TYPES, + FULLSCREEN_UTILITY_ANNOTATION_TYPES, CURTAIN_COLOR_LOOKUP, } from 'app/constants' import { buildParagraphs } from 'app/utils/transcript.utils' @@ -96,8 +98,13 @@ export const loadSections = () => dispatch => { } } + // build timeline of special inline items + if (INLINE_UTILITY_ANNOTATION_TYPES.has(annotation.type)) { + sectionTextAnnotationOrder.push(annotation.id) + } + // build timeline of fullscreen events - if (UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) { + if (FULLSCREEN_UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) { const event = makeFullscreenEvent(eventIndex++, annotation) fullscreenTimeline.push(event) } @@ -123,7 +130,7 @@ export const loadSections = () => dispatch => { } } - // console.log(sections) + console.log(sections) // console.log(fullscreenTimeline) dispatch({ type: types.viewer.load_sections, sections, fullscreenTimeline }) } |