pullquote, but may be hidden in the transcript

4 files changed, 29 insertions, 3 deletions

diff --git a/animism-align/frontend/app/utils/transcript.utils.js b/animism-align/frontend/app/utils/transcript.utils.js
index 65d13fd..f343d76 100644
--- a/animism-align/frontend/app/utils/transcript.utils.js
+++ b/animism-align/frontend/app/utils/transcript.utils.js
@@ -70,6 +70,7 @@ export const buildParagraphs = (annotationOrder, sectionCount) => {
         start_ts: annotation.start_ts,
         end_ts: 0,
         annotations: [],
+        settings: paragraph ? paragraph.settings : {},
       }
       if (paragraph && paragraph.type === 'hidden') {
         currentParagraph.hidden = true
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.form.js b/animism-align/frontend/app/views/paragraph/components/paragraph.form.js
index 6c57b6a..55cb74e 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraph.form.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.form.js
@@ -5,8 +5,8 @@ import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 
-import { clamp, timestamp, capitalize } from 'app/utils'
-import { Select } from 'app/common'
+import { timestamp, capitalize } from 'app/utils'
+import { Select, Checkbox } from 'app/common'
 
 const PARAGRAPH_TYPES = [
   'paragraph', 'intro_paragraph', 'blockquote', 'pullquote', 'big_text', 'hidden',
@@ -17,6 +17,7 @@ class ParagraphForm extends Component {
     super(props)
     this.handleChange = this.handleChange.bind(this)
     this.handleSelect = this.handleSelect.bind(this)
+    this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
   }
   componentDidMount() {
@@ -35,6 +36,16 @@ class ParagraphForm extends Component {
       [name]: value,
     })
   }
+  handleSettingsSelect(name, value) {
+    const { onUpdate, paragraph } = this.props
+    onUpdate({
+      ...paragraph,
+      settings: {
+        ...paragraph.settings,
+        [name]: value,
+      }
+    })
+  }
   handleSubmit() {
     const { paragraph, onClose } = this.props
     actions.paragraph.update(paragraph)
@@ -45,6 +56,7 @@ class ParagraphForm extends Component {
   }
   render() {
     const { paragraph, y } = this.props
+    console.log(paragraph)
     return (
       <div
         className='paragraphForm'
@@ -53,6 +65,14 @@ class ParagraphForm extends Component {
         }}
       >
         {this.renderButtons()}
+        <div>
+          <Checkbox
+            label="Hide in transcript"
+            name="hide_in_transcript"
+            checked={paragraph.settings ? paragraph.settings.hide_in_transcript : false}
+            onChange={this.handleSettingsSelect}
+          />
+        </div>
       </div>
     )
   }
diff --git a/animism-align/frontend/app/views/paragraph/paragraph.css b/animism-align/frontend/app/views/paragraph/paragraph.css
index d676df3..dcc250c 100644
--- a/animism-align/frontend/app/views/paragraph/paragraph.css
+++ b/animism-align/frontend/app/views/paragraph/paragraph.css
@@ -100,8 +100,10 @@
   right: -305px;
   width: 300px;
   padding: 0.5rem;
-  background: #ddd;
+  background: #838;
+  color: #ddd;
   box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+  font-family: 'Roboto', sans-serif;
 }
 .paragraphForm .select div {
   color: #ddd;
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 49cbdd3..ed90bca 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
@@ -3,6 +3,7 @@ import React, { Component } from 'react'
 import { ROMAN_NUMERALS } from 'app/constants'
 
 export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+  if (paragraph.settings && paragraph.settings.hide_in_transcript) return
   let className = paragraph.type
   if (className !== 'paragraph') className += ' paragraph'
   if (currentParagraph) className += ' current'
@@ -25,6 +26,7 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
 }
 
 export const Pullquote = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+  if (paragraph.settings && paragraph.settings.hide_in_transcript) return
   let className = paragraph.type
   if (className !== 'paragraph') className += ' paragraph'
   if (currentParagraph) className += ' current'
@@ -53,6 +55,7 @@ export const Pullquote = ({ paragraph, currentParagraph, currentAnnotation, onAn
 }
 
 export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+  if (paragraph.settings && paragraph.settings.hide_in_transcript) return
   let className = currentParagraph ? 'section_heading current' : 'section_heading'
   const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
   const firstAnnotation = paragraph.annotations[0]