diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer')
3 files changed, 54 insertions, 28 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js index d257090..20f45c7 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js @@ -50,20 +50,32 @@ export const Pullquote = ({ paragraph, currentParagraph, currentAnnotation, onAn className={className} > <div className="speaker-icon" onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}>{SpeakerIcon}</div> - {paragraph.annotations.map(annotation => ( - <span - key={annotation.id} - className={ - annotation.type === 'pullquote_credit' - ? 'pullquote_credit' - : annotation.id === currentAnnotation - ? 'current' - : '' - } - onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)} - dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }} - /> - ))} + {paragraph.annotations.map(annotation => { + if (annotation.type === 'footnote') { + return ( + <span + key={annotation.id} + className='footnote' + onClick={e => onAnnotationClick(e, paragraph, annotation)} + dangerouslySetInnerHTML={{ __html: annotation.footnote_id }} + /> + ) + } + return ( + <span + key={annotation.id} + className={ + annotation.type === 'pullquote_credit' + ? 'pullquote_credit' + : annotation.id === currentAnnotation + ? 'current' + : '' + } + onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)} + dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }} + /> + ) + })} </div> ) } diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js index 64bfb63..e81ee7b 100644 --- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js +++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js @@ -8,6 +8,7 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn if (className !== 'paragraph') className += ' paragraph' if (currentParagraph) className += ' current' const firstAnnotation = paragraph.annotations[0] +console.log(paragraph.start_ts, paragraph) return ( <div className={className} @@ -49,20 +50,32 @@ export const Pullquote = ({ paragraph, currentParagraph, currentAnnotation, onAn data-startts={paragraph.start_ts} data-endts={paragraph.end_ts} > - {paragraph.annotations.map(annotation => ( - <span - key={annotation.id} - className={ - annotation.type === 'pullquote_credit' - ? 'pullquote_credit' - : annotation.id === currentAnnotation - ? 'current' - : '' - } - onClick={e => onAnnotationClick(e, paragraph, annotation)} - dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }} - /> - ))} + {paragraph.annotations.map(annotation => { + if (annotation.type === 'footnote') { + return ( + <span + key={annotation.id} + className='footnote' + onClick={e => onAnnotationClick(e, annotation, annotation)} + dangerouslySetInnerHTML={{ __html: annotation.footnote_id }} + /> + ) + } + return ( + <span + key={annotation.id} + className={ + annotation.type === 'pullquote_credit' + ? 'pullquote_credit' + : annotation.id === currentAnnotation + ? 'current' + : '' + } + onClick={e => onAnnotationClick(e, paragraph, annotation)} + dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }} + /> + ) + })} </div> ) } diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js index b12fc18..52ff2f6 100644 --- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js +++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js @@ -129,6 +129,7 @@ class Transcript extends Component { render() { const { viewer, paragraphs } = this.props + console.log(paragraphs.map(p => p.annotations.filter(a => a.type === 'footnote')).filter(p => p.length)) return ( <div className="transcript"> <div |