diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer')
10 files changed, 21 insertions, 17 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js index 7e237a1..10a4653 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js @@ -11,8 +11,9 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati if (annotation.settings.fullscreen) { return ( <div className="media image fullscreen" onClick={e => onAnnotationClick(e, paragraph, annotation)}> - <div className="speaker-icon">{SpeakerIcon}</div> - <div className="img" style={{ backgroundImage: 'url(' + item.settings.display.url + ')'}} /> + <div className="img" style={{ backgroundImage: 'url(' + item.settings.display.url + ')'}}> + <div className="speaker-icon">{SpeakerIcon}</div> + </div> <MediaCitation media={item} /> </div> ) diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js index 3e70b24..a1dc344 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js @@ -11,12 +11,15 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati const className = currentParagraph ? 'media video current' : 'media video' 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> const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white + const width = window.innerWidth + const height = window.innerHeight * 0.8 const style = { backgroundColor: color.backgroundColor, color: color.textColor, + height: height + 32 } - if (!item) return <div>Media not found: {annotation.settings.media_id}</div> // console.log(annotation.settings) return ( <div @@ -29,8 +32,8 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati muted controls={false} byline={false} - width={window.innerWidth} - height={window.innerHeight * 0.8} + width={width} + height={height} /> </div> <MediaCitation media={item} /> diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js index cfd1e48..914a8d9 100644 --- a/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js +++ b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js @@ -18,7 +18,7 @@ export const Carousel = ({ media }) => { <div ref={sliderRef} className='keen-slider carousel-items'> {image_order.map(id => { const image = display_lookup[id] - console.log(image) + // console.log(image) return ( <CarouselItem key={id} image={image} /> ) 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 ef7bbc7..712e0a9 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -165,6 +165,7 @@ max-height: calc(100vh - 7rem); } .player-transcript .media.fullscreen .img { + position: relative; width: 100vw; height: 100vh; background-size: cover; 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 <div /> const className = currentParagraph ? 'media current' : 'media' const annotation = paragraph.annotations[0] @@ -15,7 +15,6 @@ export const MediaGallery = ({ paragraph, media, currentParagraph, currentAnnota <div className={className} onClick={e => onAnnotationClick(e, paragraph, annotation)} - onDoubleClick={e => onDoubleClick(e, paragraph)} > {"["} <MediaCitation media={item} /> 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 <div /> const className = currentParagraph ? 'media image current' : 'media image' const annotation = paragraph.annotations[0] @@ -40,7 +40,6 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati <div className={className} onClick={e => onAnnotationClick(e, paragraph, annotation)} - onDoubleClick={e => onDoubleClick(e, paragraph)} > {"["} <MediaCitation media={item} /> 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 ( <div className={className} - onDoubleClick={e => onDoubleClick(e, paragraph)} > {paragraph.annotations.map(annotation => ( <span @@ -23,13 +22,14 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn ) } -export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { +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 ( <div className={className} - onDoubleClick={e => onDoubleClick(e, paragraph)} + onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)} > <span>{ROMAN_NUMERALS[paragraph.sectionIndex]}{'. '}{text}</span> </div> 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 <div /> const className = currentParagraph ? 'media current' : 'media' const annotation = paragraph.annotations[0] @@ -15,7 +15,6 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati <div className={className} onClick={e => onAnnotationClick(e, paragraph, annotation)} - onDoubleClick={e => onDoubleClick(e, paragraph)} > {"["} <MediaCitation media={item} /> 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), diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.css b/animism-align/frontend/app/views/viewer/transcript/transcript.css index 9e4eff6..0ffcf32 100644 --- a/animism-align/frontend/app/views/viewer/transcript/transcript.css +++ b/animism-align/frontend/app/views/viewer/transcript/transcript.css @@ -82,6 +82,7 @@ /* paragraph subtypes */ .transcript .section_heading { + cursor: pointer; text-align: center; padding-top: 2rem; } |