diff options
4 files changed, 52 insertions, 9 deletions
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.form.js b/animism-align/frontend/views/align/components/annotations/annotation.form.js index eb5c0ad..3348804 100644 --- a/animism-align/frontend/views/align/components/annotations/annotation.form.js +++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js @@ -7,13 +7,13 @@ import actions from '../../../../actions' // import * as alignActions from '../align.actions' import { ZOOM_STEPS } from '../../constants' -import { clamp, timestamp } from '../../../../util' +import { clamp, timestamp, capitalize } from '../../../../util' import { timeToPosition } from '../../align.util' import { Select } from '../../../../common' const ANNOTATION_TYPES = [ 'sentence', 'header', 'paragraph_end', 'video', -].map(name => ({ name, label: name })) +].map(name => ({ name, label: capitalize(name.replace('_', ' ')) })) class AnnotationForm extends Component { constructor(props){ diff --git a/animism-align/frontend/views/paragraph/components/paragraph.types.js b/animism-align/frontend/views/paragraph/components/paragraph.types.js index 54eb965..6fd8558 100644 --- a/animism-align/frontend/views/paragraph/components/paragraph.types.js +++ b/animism-align/frontend/views/paragraph/components/paragraph.types.js @@ -1,4 +1,5 @@ import React, { Component } from 'react' +import VimeoPlayer from '@u-wave/react-vimeo' import actions from '../../../actions' @@ -37,8 +38,26 @@ export const ParagraphHeader = ({ paragraph, selectedParagraph, selectedAnnotati ) } +export const MediaVideo = ({ paragraph, media, selectedParagraph, selectedAnnotation, onAnnotationClick, onDoubleClick }) => { + if (!media.lookup) return <div /> + const className = selectedParagraph ? 'media selected' : 'media' + const annotation = paragraph.annotations[0] + const item = media.lookup[annotation.settings.media_id] + if (!item) return <div>Media not found: {annotation.settings.media_id}</div> + console.log(item) + return ( + <div + className={className} + onDoubleClick={e => onDoubleClick(e, paragraph)} + > + <VimeoPlayer video={item.url} autoplay muted width="650" /> + </div> + ) +} + export const ParagraphElementLookup = { paragraph: React.memo(Paragraph), blockquote: React.memo(Paragraph), header: React.memo(ParagraphHeader), + video: React.memo(MediaVideo), } diff --git a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js index 18bd8c5..fc1a687 100644 --- a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js +++ b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js @@ -9,6 +9,8 @@ import { ParagraphElementLookup } from '../components/paragraph.types' const floatLT = (a,b) => ((a*10|0) < (b*10|0)) const floatLTE = (a,b) => ((a*10|0) === (b*10|0) || floatLT(a,b)) +const MEDIA_TYPES = new Set(['image', 'gallery', 'vitrine', 'video']) + class ParagraphList extends Component { state = { paragraphs: [], @@ -65,9 +67,22 @@ class ParagraphList extends Component { const { lookup: paragraphLookup } = this.props.paragraph let currentParagraph = {} const paragraphs = [] + // loop over the annotations in time order annotationOrder.forEach((annotation_id, i) => { const annotation = annotationLookup[annotation_id] const paragraph = paragraphLookup[annotation.paragraph_id] + // if this annotation is media, insert it after the current paragraph + if (MEDIA_TYPES.has(annotation.type)) { + paragraphs.push({ + id: ('index_' + i), + type: annotation.type, + start_ts: annotation.start_ts, + end_ts: 0, + annotations: [annotation], + }) + return + } + // if this annotation is from a different paragraph, make a new paragraph if (annotation.paragraph_id !== currentParagraph.id) { const paragraph_type = getParagraphType(annotation, paragraph) currentParagraph = { @@ -79,9 +94,12 @@ class ParagraphList extends Component { } paragraphs.push(currentParagraph) } + // if this annotation is a paragraph_end, set the end timestamp if (annotation.type === 'paragraph_end') { currentParagraph.end_ts = annotation.start_ts - } else { + } + // otherwise, just append this annotation to the paragraph + else { currentParagraph.annotations.push(annotation) } }) @@ -101,6 +119,7 @@ class ParagraphList extends Component { // } render() { + const { media } = this.props const { paragraphs, currentParagraph, currentAnnotation } = this.state return ( <div className='paragraphs'> @@ -112,6 +131,7 @@ class ParagraphList extends Component { <ParagraphElement key={paragraph.id} paragraph={paragraph} + media={media} selectedParagraph={paragraph.id === currentParagraph} selectedAnnotation={paragraph.id === currentParagraph && currentAnnotation} onAnnotationClick={this.onAnnotationClick} @@ -119,7 +139,7 @@ class ParagraphList extends Component { /> ) } else { - return <div key={paragraph.id}>{'(empty)'}</div> + return <div key={paragraph.id}>{'(waiting to implement' + paragraph.type + ')'}</div> } })} </div> @@ -139,6 +159,7 @@ const mapStateToProps = state => ({ paragraph: state.paragraph.index, annotation: state.annotation.index, audio: state.audio, + media: state.media.index, }) const mapDispatchToProps = dispatch => ({ diff --git a/animism-align/frontend/views/paragraph/paragraph.css b/animism-align/frontend/views/paragraph/paragraph.css index 031b7ab..07399d6 100644 --- a/animism-align/frontend/views/paragraph/paragraph.css +++ b/animism-align/frontend/views/paragraph/paragraph.css @@ -2,8 +2,9 @@ width: 100%; height: calc(100% - 3.125rem); overflow: scroll; - padding-top: 1rem; - padding-left: 1rem; + background: white; + color: black; + padding: 1rem; } /* general paragraph styles */ @@ -11,6 +12,7 @@ .paragraphs .content { font-family: 'Georgia', serif; width: 650px; + margin: 0 auto; padding-bottom: 6rem; } @@ -36,13 +38,14 @@ /* current paragraph */ .paragraphs .paragraph.selected { - background: rgba(255,255,255,0.1); + background: rgba(0,0,0,0.0); } /* sentences */ .paragraphs span { margin-right: 4px; + cursor: pointer; } .paragraphs .paragraph .selected { @@ -51,6 +54,6 @@ -2px 3px 0 #fff, 2px 3px 0 #fff; box-decoration-break: clone; - background: #fff; - color: #000; + background: black; + color: white; }
\ No newline at end of file |