trying to improve transcript scrolling. background on hover. pullquote styling

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 {