From 6dea2acdf558f39c868be92c5657190d9fb6bd46 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 28 Aug 2020 18:02:05 +0200 Subject: transcript UX --- .../views/viewer/transcript/components/elementTypes.gallery.js | 3 +-- .../app/views/viewer/transcript/components/elementTypes.image.js | 3 +-- .../app/views/viewer/transcript/components/elementTypes.text.js | 8 ++++---- .../app/views/viewer/transcript/components/elementTypes.video.js | 3 +-- .../frontend/app/views/viewer/transcript/components/index.js | 3 ++- 5 files changed, 9 insertions(+), 11 deletions(-) (limited to 'animism-align/frontend/app/views/viewer/transcript/components') diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js index 895c9dd..6d6db2d 100644 --- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js +++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import { MediaCitation } from './elementTypes.image' -export const MediaGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { +export const MediaGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => { if (!media.lookup) return
const className = currentParagraph ? 'media current' : 'media' const annotation = paragraph.annotations[0] @@ -15,7 +15,6 @@ export const MediaGallery = ({ paragraph, media, currentParagraph, currentAnnota
onAnnotationClick(e, paragraph, annotation)} - onDoubleClick={e => onDoubleClick(e, paragraph)} > {"["} diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js index 4f4f960..64de3a2 100644 --- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js +++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js @@ -27,7 +27,7 @@ export const MediaCitation = ({ media }) => { ) } -export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { +export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => { if (!media.lookup) return
const className = currentParagraph ? 'media image current' : 'media image' const annotation = paragraph.annotations[0] @@ -40,7 +40,6 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
onAnnotationClick(e, paragraph, annotation)} - onDoubleClick={e => onDoubleClick(e, paragraph)} > {"["} 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 3fc13b4..292eec8 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 @@ -2,14 +2,13 @@ import React, { Component } from 'react' import { ROMAN_NUMERALS } from 'app/constants' -export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { +export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => { let className = paragraph.type if (className !== 'paragraph') className += ' paragraph' if (currentParagraph) className += ' current' return (
onDoubleClick(e, paragraph)} > {paragraph.annotations.map(annotation => ( { +export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => { let className = currentParagraph ? 'section_heading current' : 'section_heading' const text = paragraph.annotations.map(annotation => annotation.text).join(' ') + const firstAnnotation = paragraph.annotations[0] return (
onDoubleClick(e, paragraph)} + onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)} > {ROMAN_NUMERALS[paragraph.sectionIndex]}{'. '}{text}
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 7cb03bb..423a055 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 @@ -2,7 +2,7 @@ import React, { Component } from 'react' import { MediaCitation } from './elementTypes.image' -export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { +export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => { if (!media.lookup) return
const className = currentParagraph ? 'media current' : 'media' const annotation = paragraph.annotations[0] @@ -15,7 +15,6 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati
onAnnotationClick(e, paragraph, annotation)} - onDoubleClick={e => onDoubleClick(e, paragraph)} > {"["} diff --git a/animism-align/frontend/app/views/viewer/transcript/components/index.js b/animism-align/frontend/app/views/viewer/transcript/components/index.js index 4641c45..3b5901d 100644 --- a/animism-align/frontend/app/views/viewer/transcript/components/index.js +++ b/animism-align/frontend/app/views/viewer/transcript/components/index.js @@ -21,9 +21,10 @@ export const transcriptElementLookup = { intro_paragraph: React.memo(Paragraph), blockquote: React.memo(Paragraph), - hidden: React.memo(HiddenParagraph), + hidden: React.memo(Paragraph), heading_text: React.memo(HiddenParagraph), intro: React.memo(HiddenParagraph), + schedule: React.memo(HiddenParagraph), section_heading: React.memo(ParagraphHeading), header: React.memo(ParagraphHeading), -- cgit v1.2.3-70-g09d2