diff options
3 files changed, 44 insertions, 8 deletions
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 6eef6a0..9a9c0a6 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 @@ -1,18 +1,18 @@ import React, { Component } from 'react' export const MediaCitation = ({ media }) => { - if (media.citation) { + if (media.settings.bibliography) { return ( - <span dangerouslySetInnerHTML={{ _html: media.citation }} /> + <span dangerouslySetInnerHTML={{ __html: media.settings.bibliography }} /> ) } return ( <span> {media.author} {', '} - {media.pre_title} + {media.pre_title && media.pre_title} <i>{media.title}</i> - {media.post_title} + {media.post_title && media.post_title} {'. '} {media.date && ( ' ' + media.date + '.' 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 b9caa69..88ed3b7 100644 --- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js +++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js @@ -25,6 +25,7 @@ class Transcript extends Component { this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this) this.handleMouseWheel = this.handleMouseWheel.bind(this) this.containerRef = React.createRef() + this.lastScroll = 0 } componentDidMount() { @@ -67,6 +68,7 @@ class Transcript extends Component { } updateScrollPosition(play_ts, forceScroll) { + if (this.state.scrolling) return const { paragraphs, windowHeight, currentParagraph } = this.state const scrollTop = this.containerRef.current.scrollTop if (!forceScroll && currentParagraph && floatInRange(currentParagraph.start_ts, play_ts, currentParagraph.end_ts)) return @@ -81,8 +83,19 @@ class Transcript extends Component { if (insideParagraph && nextParagraph) { // console.log(nextParagraph.scrollTop) if (!floatInRange(scrollTop, nextParagraph.scrollTop, scrollTop + windowHeight) || forceScroll) { - this.setState({ currentParagraph: nextParagraph, scrolling: true }) - this.scrollToParagraph(scrollTop, nextParagraph.scrollTop) + const now = Date.now() + // suppress double-scrolling + // suppress scroll if transcript is open and we've scrolled more than one screen-length away + if (!this.props.viewer.transcript || ( + now - this.lastScroll > 1200 && + Math.abs(scrollTop - nextParagraph.scrollTop) < this.state.windowHeight + )) { + this.lastScroll = now + this.scrollToParagraph(scrollTop, nextParagraph.scrollTop) + this.setState({ currentParagraph: nextParagraph, scrolling: true }) + } else { + this.setState({ currentParagraph: nextParagraph }) + } } else { this.setState({ currentParagraph: nextParagraph }) } @@ -90,6 +103,7 @@ class Transcript extends Component { } scrollToParagraph(scrollFrom, scrollTo) { + // suppress if already scrolling if (this.state.scrolling) return // console.log('scrolling!', scrollFrom, scrollTo) oktween.add({ @@ -125,6 +139,7 @@ class Transcript extends Component { handleMouseWheel(e) { e.stopPropagation() + this.lastScroll = Date.now() } render() { diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.css b/animism-align/frontend/app/views/viewer/transcript/transcript.css index 1078133..82d29ff 100644 --- a/animism-align/frontend/app/views/viewer/transcript/transcript.css +++ b/animism-align/frontend/app/views/viewer/transcript/transcript.css @@ -92,16 +92,35 @@ } .transcript .section_heading span { border-bottom: 1px solid; + background: rgba(0,0,0,0.0); + transition: background 0.2s; } -.transcript .paragraph, -.transcript .hidden { +.transcript .section_heading:hover span, +.transcript .media:hover span { + background: rgba(0,0,0,0.12); } +.transcript .paragraph { + cursor: pointer; + background: rgba(0,0,0,0.0); + transition: background 0.2s +} .transcript .blockquote { padding-left: 2rem; line-height: 1.45; } +.transcript .pullquote { + border-left: 2px solid #ddd; + padding-left: 1rem; +} +.transcript .pullquote_credit { + display: block; + text-align: right; +} +.transcript .pullquote_credit:before { + content: '—'; +} /* sentences */ @@ -113,6 +132,8 @@ margin-right: 0; border-bottom: 1px solid; cursor: pointer; + background: rgba(0,0,0,0.0); + transition: background 0.2s; } .transcript .paragraph .current { |