heading text on section V

4 files changed, 32 insertions, 7 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
index 449e240..8b4b6fe 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
@@ -126,7 +126,7 @@ class AnnotationForm extends Component {
         {this.renderButtons()}
         {annotation.type === 'sentence' && this.renderTextarea()}
         {annotation.type === 'section_heading' && this.renderTextarea()}
-        {annotation.type === 'text_heading' && this.renderTextarea()}
+        {annotation.type === 'heading_text' && this.renderTextarea()}
         {(annotation.type in annotationFormLookup) && this.renderElementForm()}
       </div>
     )
diff --git a/animism-align/frontend/app/views/media/components/media.formGallery.js b/animism-align/frontend/app/views/media/components/media.formGallery.js
index 25b715c..b2e0381 100644
--- a/animism-align/frontend/app/views/media/components/media.formGallery.js
+++ b/animism-align/frontend/app/views/media/components/media.formGallery.js
@@ -26,6 +26,7 @@ export default class MediaGalleryForm extends Component {
     this.uploadSize = this.uploadSize.bind(this)
     this.handleSaveItem = this.handleSaveItem.bind(this)
     this.handleUploadGalleryThumbnail = this.handleUploadGalleryThumbnail.bind(this)
+    this.handleDestroyGalleryThumbnail = this.handleDestroyGalleryThumbnail.bind(this)
   }
 
   handleChange(e) {
@@ -53,7 +54,7 @@ export default class MediaGalleryForm extends Component {
   handleUploadGalleryThumbnail(file) {
     this.setState({ loading: true })
     if (this.props.data.thumbnail) {
-      actions.upload.destroy({ id: this.props.data.thumbnail.id })
+      this.handleDestroyGalleryThumbnail()
     }
     this.uploadThumbnail(file, 'thumbnail', THUMBNAIL_SIZE, THUMBNAIL_QUALITY)
     .then(data => {
@@ -65,6 +66,14 @@ export default class MediaGalleryForm extends Component {
     })
   }
 
+  handleDestroyGalleryThumbnail(e) {
+    if (e) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+    actions.upload.destroy({ id: this.props.data.thumbnail.id })
+  }
+
   uploadFullsize(files) {
     const { data } = this.props
     // first, upload all the fullsize files
@@ -283,6 +292,7 @@ export default class MediaGalleryForm extends Component {
           <div className='label'>
             <span>Thumbnail</span>
             <img src={data.settings.thumbnail.url} />
+            <button onClick={this.handleDestroyGalleryThumbnail}>x</button>
           </div>
         }
       </div>
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
index 7c00e09..5d6d08f 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
@@ -1,7 +1,9 @@
 import React from 'react'
 
 import {
-  Paragraph, ParagraphHeading
+  Paragraph,
+  SectionHeading,
+  HeadingText,
 } from './inline.text'
 
 import {
@@ -27,9 +29,9 @@ export const inlineComponents = {
   intro_paragraph: React.memo(Paragraph),
   hidden: React.memo(Paragraph),
   blockquote: React.memo(Paragraph),
-  section_heading: React.memo(ParagraphHeading),
-  heading_text: React.memo(ParagraphHeading),
-  header: React.memo(ParagraphHeading),
+  section_heading: React.memo(SectionHeading),
+  heading_text: React.memo(HeadingText),
+  header: React.memo(SectionHeading),
   video: React.memo(MediaVideo),
   image: React.memo(MediaImage),
   intro: React.memo(Intro),
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
index f544e6f..5d7135b 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
@@ -23,7 +23,7 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
   )
 }
 
-export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+export const SectionHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   if (paragraph.hidden) return null
   let className = currentParagraph ? 'section_heading current' : 'section_heading'
   const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
@@ -35,3 +35,16 @@ export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotatio
     </div>
   )
 }
+
+export const HeadingText = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+  if (paragraph.hidden) return null
+  let className = currentParagraph ? 'section_heading current' : 'section_heading'
+  const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
+  return (
+    <div
+      className={className}
+    >
+      <span>{text}</span>
+    </div>
+  )
+}