diff options
Diffstat (limited to 'animism-align/frontend/app')
10 files changed, 79 insertions, 26 deletions
diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js index b70f49c..711d979 100644 --- a/animism-align/frontend/app/constants.js +++ b/animism-align/frontend/app/constants.js @@ -1,3 +1,5 @@ +import { capitalize } from 'app/utils' + export const URLS = { audio: '/static/data_store/peaks/animism_episode_01_2810.mp3', peaks: '/static/data_store/peaks/peaks.json', @@ -44,6 +46,21 @@ export const ROMAN_NUMERALS = [ 'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX', ] +export const ANNOTATION_SELECT_LABELS = { + 'section_heading': 'Chapter Heading', +} + +export const ANNOTATION_SELECT_OPTIONS = [ + 'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'paragraph_end', + 'footnote', + 'text_plate', + 'video', 'subtitle', + 'image', + 'gallery', 'carousel', 'grid', 'vitrine', + 'gallery_advance', + 'curtain', 'intro', 'schedule', +].map(name => ({ name, label: ANNOTATION_SELECT_LABELS[name] || capitalize(name.replace('_', ' ')) })) + export const TEXT_ANNOTATION_TYPES = new Set([ 'section_heading', 'heading_text', 'sentence', 'paragraph_end', 'pullquote_credit', 'footnote', 'text_plate', 'subtitle', @@ -95,7 +112,7 @@ export const BLACK_WHITE_SELECT_OPTIONS = [ ] export const CURTAIN_STYLE_SELECT_OPTIONS = [ - { label: 'section heading', name: 'section_heading'}, + { label: 'chapter heading', name: 'section_heading'}, { label: 'video title', name: 'video_title'}, { label: 'default', name: 'default'}, ] @@ -116,6 +133,7 @@ export const IMAGE_BACKGROUND_SIZE_OPTIONS = [ { label: 'Contain', name: 'contain' }, { label: '90% Width', name: '90% auto' }, { label: '90% Height', name: 'auto 90%' }, + { label: 'Hidden', name: 'hidden' }, ] export const IMAGE_INLINE_SIZE_OPTIONS = [ diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js index 5bf21b5..76175c9 100644 --- a/animism-align/frontend/app/utils/annotation.utils.js +++ b/animism-align/frontend/app/utils/annotation.utils.js @@ -87,7 +87,9 @@ export const sectionProgressPercentage = (section, play_ts) => { export const makeMediaItems = (media, types) => { const { lookup, order } = media - if (!(types instanceof Set)) { + if (types instanceof String) { + types = new Set([ types ]) + } else if (!(types instanceof Set)) { types = new Set(types) } const listItems = order.filter(id => types.has(lookup[id].type)).map(id => { diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js index e0a66e4..7b1918a 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js @@ -5,24 +5,13 @@ import { connect } from 'react-redux' import actions from 'app/actions' -import { MEDIA_ANNOTATION_TYPES } from 'app/constants' -import { clamp, timestamp, capitalize } from 'app/utils' +import { ANNOTATION_SELECT_OPTIONS, MEDIA_ANNOTATION_TYPES } from 'app/constants' +import { timestamp } from 'app/utils' import { timeToPosition } from 'app/utils/align.utils' import { Select } from 'app/common' import { annotationFormLookup } from './annotationForms' -const ANNOTATION_TYPES = [ - 'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'paragraph_end', - 'footnote', - 'text_plate', - 'video', 'subtitle', - 'image', - 'gallery', 'carousel', 'grid', 'vitrine', - 'gallery_advance', - 'curtain', 'intro', 'schedule', -].map(name => ({ name, label: capitalize(name.replace('_', ' ')) })) - const annotationTextTypes = new Set([ 'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'footnote', 'text_plate', ]) @@ -148,7 +137,7 @@ class AnnotationForm extends Component { <Select name='type' selected={annotation.type} - options={ANNOTATION_TYPES} + options={ANNOTATION_SELECT_OPTIONS} defaultOption='text' onChange={this.handleSelect} /> diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js index 9c94435..8bc7675 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js @@ -1,10 +1,17 @@ import React, { Component } from 'react' -import { CURTAIN_COLOR_SELECT_OPTIONS, CURTAIN_STYLE_SELECT_OPTIONS, BLACK_WHITE_SELECT_OPTIONS } from 'app/constants' +import { + CURTAIN_COLOR_SELECT_OPTIONS, + CURTAIN_STYLE_SELECT_OPTIONS, + BLACK_WHITE_SELECT_OPTIONS, + IMAGE_BACKGROUND_SIZE_OPTIONS, +} from 'app/constants' import { Select, Checkbox, TextInput, LabelDescription } from 'app/common' import { AnnotationFormFullscreen } from './annotationForm.utility' +import { makeMediaItems } from 'app/utils/annotation.utils' -export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect, handleSettingsChange }) => { +export const AnnotationFormSectionHeading = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => { + const image_list_items = makeMediaItems(media, ['image', 'video', 'gallery']) return ( <div className='options'> <Checkbox @@ -21,6 +28,24 @@ export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect, defaultOption='Pick a color' onChange={handleSettingsSelect} /> + <Select + title='Cover image' + name='media_id' + className="media_id" + selected={annotation.settings.media_id} + options={image_list_items} + defaultOption='Choose an image' + onChange={handleSettingsSelect} + /> + <Select + title='Cover style' + name='cover_style' + className="cover_style" + selected={annotation.settings.cover_style} + options={IMAGE_BACKGROUND_SIZE_OPTIONS} + defaultOption='Cover image caption style' + onChange={handleSettingsSelect} + /> <LabelDescription> {'Background color for section'} </LabelDescription> diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js index c3e5c58..4194d4a 100644 --- a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js +++ b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js @@ -23,6 +23,7 @@ class ChecklistContent extends Component { render() { const { sections, checklistSection } = this.props + let mediaIndex = 1 return ( <div className="checklist-content"> <div className="checklist-table"> @@ -39,7 +40,7 @@ class ChecklistContent extends Component { onClick={() => this.handleMediaSelection(section, mediaItem, i)} > <div className="media-id"> - {pad(section.mediaIndex + i + 1, 2)} + {pad(mediaIndex++, 2)} </div> <div className="media-section"> {ROMAN_NUMERALS[section.index]} diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js index 5ec4833..02a9525 100644 --- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js @@ -12,9 +12,11 @@ export const FullscreenCurtain = ({ element, transitionDuration }) => { transitionDuration, } console.log(element) - const curtainBackground = element.mediaItem && { + const curtainBackground = (element.cover_style !== "hidden" && !!element.mediaItem) && { backgroundImage: 'url(' + (displayThumbnailURL(element.mediaItem)) + ')', + backgroundSize: element.cover_style, } + let texts = [] // console.log(element) switch (element.settings.curtain_style) { @@ -46,7 +48,7 @@ export const FullscreenCurtain = ({ element, transitionDuration }) => { } return ( <div className='fullscreen-element curtain' style={style}> - {element.mediaItem && ( + {curtainBackground && ( <div className='curtain-background' style={curtainBackground} /> )} <div className='curtain-text'> 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 4f7b33d..63112e7 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css @@ -139,6 +139,7 @@ iframe { height: 100%; background-size: cover; background-position: center; + background-repeat: no-repeat; z-index: 0; transition: opacity 3.0s; opacity: 0; diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js index 34a944d..fd7ade4 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js @@ -22,7 +22,7 @@ class ViewerSectionsList extends Component { this.scrollRef.current.scrollLeft += delta } render() { - const { play_ts, sections, currentSection } = this.props + const { play_ts, sections, media, currentSection } = this.props return ( <div ref={this.scrollRef} @@ -31,7 +31,12 @@ class ViewerSectionsList extends Component { > {sections.map(section => { // console.log(section) - const media = section.media.length ? section.media[0].media : null + let mediaItem + if (section.cover_id) { + mediaItem = media.lookup[section.cover_id] + } else { + mediaItem = section.media.length ? section.media[0].media : null + } const { no_audio, section_nav_color } = section const progress = sectionProgressPercentage(section, play_ts) return ( @@ -42,7 +47,7 @@ class ViewerSectionsList extends Component { > <div> <div className="section-thumbnail" style={{ - backgroundImage: media && 'url(' + thumbnailURL(media) + ')', + backgroundImage: mediaItem && 'url(' + thumbnailURL(mediaItem) + ')', }}> {!no_audio && <div className={"section-duration-" + section_nav_color}> @@ -77,6 +82,7 @@ class ViewerSectionsList extends Component { } const mapStateToProps = state => ({ + media: state.media.index, nav: state.viewer.nav, play_ts: state.audio.play_ts, sections: state.viewer.sections, diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js index 6ad46b2..a86f8c3 100644 --- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js +++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js @@ -77,6 +77,7 @@ class TranscriptVideoSubtitles extends Component { } } render() { + const { mediaItem } = this.props const { subtitles, current } = this.state if (!subtitles) return return ( @@ -96,6 +97,7 @@ class TranscriptVideoSubtitles extends Component { </span> ) })} + <span className="pullquote_credit sentence">{mediaItem.author}</span> </div> ) } diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index fa63804..82d3cf1 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -192,8 +192,13 @@ export const loadSections = () => dispatch => { // currentSection.fullscreenTimeline.unshift(initial_curtain_event) } - if (currentSection.fullscreenTimeline.length && currentSection.fullscreenTimeline[0].type === 'curtain' && currentSection.media.length) { - currentSection.fullscreenTimeline[0].mediaItem = currentSection.media[0].media + if (currentSection.fullscreenTimeline.length && currentSection.fullscreenTimeline[0].type === 'curtain') { + if (currentSection.cover_id) { + currentSection.fullscreenTimeline[0].mediaItem = mediaLookup[currentSection.cover_id] + } else if (currentSection.media.length) { + currentSection.fullscreenTimeline[0].mediaItem = currentSection.media[0].media + } + currentSection.fullscreenTimeline[0].cover_style = currentSection.cover_style } currentSection.duration = currentSection.end_ts - currentSection.start_ts currentSection.inlineParagraphCount = currentSection.paragraphs.filter(p => !p.hidden).length @@ -209,6 +214,8 @@ const newSection = (annotation, index, mediaIndex) => ({ start_ts: annotation.start_ts, end_ts: 0, title: annotation.text, + cover_id: annotation.settings.media_id || 0, + cover_style: annotation.settings.cover_style || "cover", media: [], fullscreenTimeline: [], index, |