setting things as hidden

21 files changed, 83 insertions, 33 deletions

diff --git a/animism-align/frontend/app/utils/transcript.utils.js b/animism-align/frontend/app/utils/transcript.utils.js
index 5a56611..6400394 100644
--- a/animism-align/frontend/app/utils/transcript.utils.js
+++ b/animism-align/frontend/app/utils/transcript.utils.js
@@ -50,9 +50,15 @@ export const buildParagraphs = (annotationOrder, sectionCount) => {
         end_ts: 0,
         annotations: [],
       }
+      if (paragraph && paragraph.type === 'hidden') {
+        currentParagraph.hidden = true
+      }
       if (annotation.type === 'section_heading') {
         currentParagraph.sectionIndex = sectionCount++
         currentParagraph.id = 'section_' + currentParagraph.sectionIndex
+        if (annotation.settings.hidden) {
+          currentParagraph.hidden = true
+        }
       }
       paragraphs.push(currentParagraph)
     }
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.css b/animism-align/frontend/app/views/align/components/annotations/annotation.form.css
index 26eeb26..8dcc561 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.css
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.css
@@ -54,5 +54,6 @@
   width: 1.4rem;
 }
 .annotationForm .checkbox {
+  margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
new file mode 100644
index 0000000..a632e70
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+
+import { Select, Checkbox } from 'app/common'
+
+export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect, handleSettingsChange }) => {
+  return (
+    <div className='options'>
+      <Checkbox
+        label="Hidden"
+        name="hidden"
+        checked={annotation.settings.hidden}
+        onChange={handleSettingsSelect}
+      />
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
index 29f9def..0b36d9a 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
@@ -1,4 +1,8 @@
 import {
+  AnnotationFormSectionHeading,
+} from './annotationForm.text'
+
+import {
   AnnotationFormVideo,
 } from './annotationForm.video'
 
@@ -11,6 +15,7 @@ import {
 } from './annotationForm.utility'
 
 export const annotationFormLookup = {
+  section_heading: AnnotationFormSectionHeading,
   image: AnnotationFormImage,
   video: AnnotationFormVideo,
   curtain: AnnotationFormCurtain,
diff --git a/animism-align/frontend/app/views/media/components/media.formImage.js b/animism-align/frontend/app/views/media/components/media.formImage.js
index b6e38be..04b821f 100644
--- a/animism-align/frontend/app/views/media/components/media.formImage.js
+++ b/animism-align/frontend/app/views/media/components/media.formImage.js
@@ -10,7 +10,7 @@ import { renderThumbnail } from 'app/common/upload.helpers'
 
 import ImageSelection from './media.formImageSelection'
 
-const DISPLAY_SIZE = 1024
+const DISPLAY_SIZE = 2000
 const DISPLAY_QUALITY= 80
 const THUMBNAIL_SIZE = 320
 const THUMBNAIL_QUALITY = 80
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
index 8825479..98be99b 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
@@ -24,7 +24,7 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
 }
 
 export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
-  let className = currentParagraph ? 'header current' : 'header'
+  let className = currentParagraph ? 'section_heading current' : 'section_heading'
   const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
   return (
     <div
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
index dfccb61..70c175e 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
@@ -10,6 +10,7 @@ import { PlayIcon } from '../nav/viewer.icons'
 class ChecklistContent extends Component {
   handleMediaSelection(mediaItem) {
     actions.audio.seek(mediaItem.start_ts)
+    actions.audio.play()
     actions.viewer.hideComponent('nav')
     actions.viewer.hideComponent('checklist')
   }
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.css b/animism-align/frontend/app/views/viewer/checklist/checklist.css
index 0499665..53aeaa3 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.css
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.css
@@ -111,6 +111,7 @@
 }
 .checklist-row .media-thumbnail {
   position: relative;
+  cursor: pointer;
 }
 .checklist-row .media-thumbnail img {
   max-width: 12rem;
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
index c0e4b0e..6ca6d79 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const Image = ({ element, media, transitionDuration }) => {
+export const FullscreenImage = ({ element, media, transitionDuration }) => {
   const item = media.lookup[element.settings.media_id]
   const style = {
     transitionDuration,
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
index c86236d..3a0e21d 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const Curtain = ({ element, transitionDuration }) => {
+export const FullscreenCurtain = ({ element, transitionDuration }) => {
   // console.log(element, isEntering)
   const { color } = element
   const style = {
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
new file mode 100644
index 0000000..9122426
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import VimeoPlayer from '@u-wave/react-vimeo'
+
+export const FullscreenVideo = ({ element, media, transitionDuration }) => {
+  const item = media.lookup[element.settings.media_id]
+  const style = {
+    transitionDuration,
+    backgroundImage: 'url(' + item.settings.display.url + ')',
+  }
+  return (
+    <div
+      className='fullscreen-element video'
+      style={style}
+    >
+      <VimeoPlayer video={data.url} autoplay muted />
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
index 3befbde..f533123 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
@@ -1,19 +1,19 @@
 import React from 'react'
 
-// import {
-//   MediaVideo
-// } from './fullscreen.video'
-
 import {
-  Image
+  FullscreenImage
 } from './fullscreen.image'
 
 import {
-  Curtain
+  FullscreenVideo
+} from './fullscreen.video'
+
+import {
+  FullscreenCurtain
 } from './fullscreen.utility'
 
 export const fullscreenComponents = {
-  curtain: React.memo(Curtain),
-  // video: React.memo(MediaVideo),
-  image: React.memo(Image),
+  curtain: React.memo(FullscreenCurtain),
+  video: React.memo(FullscreenVideo),
+  image: React.memo(FullscreenImage),
 }
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 89d1d42..9ad083d 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
@@ -12,7 +12,7 @@ import {
   MediaImage
 } from './inline.image'
 
-export const transcriptElementLookup = {
+export const inlineComponents = {
   paragraph: React.memo(Paragraph),
   hidden: React.memo(Paragraph),
   blockquote: React.memo(Paragraph),
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 8825479..f544e6f 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
@@ -2,14 +2,14 @@ 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 }) => {
+  if (paragraph.hidden) return null
   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 +23,13 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
   )
 }
 
-export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
-  let className = currentParagraph ? 'header current' : 'header'
+export const ParagraphHeading = ({ 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}
-      onDoubleClick={e => onDoubleClick(e, paragraph)}
     >
       <span>{ROMAN_NUMERALS[paragraph.sectionIndex]}{'. '}{text}</span>
     </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 fe821eb..463ca8e 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
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { MediaCitation } from './elementTypes.image'
+import { MediaCitation } from './inline.image'
 
 export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   if (!media.lookup) return <div />
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 4ca9475..00ca675 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -7,7 +7,7 @@
   overflow-y: scroll;
 }
 
-.player-transcript .header,
+.player-transcript .section_heading,
 .player-transcript .paragraph {
   font-family: "Freight Text", serif;
   font-size: 3rem;
@@ -17,10 +17,10 @@
   margin: 0 auto;
   padding-bottom: 2rem;
 }
-.player-transcript .header {
+.player-transcript .section_heading {
   text-align: center;
 }
-.player-transcript .header:first-child {
+.player-transcript .section_heading:first-child {
   margin-top: 8rem;
 }
 
@@ -46,14 +46,14 @@
 
 /* paragraph subtypes */
 
-.player-transcript .header {
+.player-transcript .section_heading {
   text-align: center;
   padding-top: 2rem;
 }
-.player-transcript .header:first-of-type {
+.player-transcript .section_heading:first-of-type {
   padding-top: 0;
 }
-.player-transcript .header span {
+.player-transcript .section_heading span {
 }
 
 .player-transcript .paragraph,
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
index 530b9d6..a491a88 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -6,7 +6,7 @@ import { connect } from 'react-redux'
 import actions from 'app/actions'
 
 import ParagraphList from 'app/views/paragraph/components/paragraph.list'
-import { transcriptElementLookup } from '../transcript/components'
+import { inlineComponents } from './components.inline'
 
 class PlayerTranscript extends Component {
   constructor(props){
@@ -18,7 +18,7 @@ class PlayerTranscript extends Component {
 
   handleAnnotationClick(e, paragraph, annotation) {
     console.log(annotation)
-    actions.audio.seek(annotation.start_ts)
+    // actions.audio.seek(annotation.start_ts)
   }
   
   handleParagraphDoubleClick(e, paragraph) {
@@ -34,7 +34,7 @@ class PlayerTranscript extends Component {
         <div className='content'>
           <ParagraphList
             paragraphs={paragraphs}
-            paragraphElementLookup={transcriptElementLookup}
+            paragraphElementLookup={inlineComponents}
             onAnnotationClick={this.handleAnnotationClick}
             onParagraphDoubleClick={this.handleParagraphDoubleClick}
           />
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
index b9d29a1..6d5e932 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
@@ -13,6 +13,7 @@ class ViewerSections extends Component {
   
   handleSectionSelection(section) {
     actions.audio.seek(section.start_ts)
+    actions.audio.play()
     actions.viewer.hideComponent('nav')
   }
 
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 8825479..98be99b 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
@@ -24,7 +24,7 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
 }
 
 export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
-  let className = currentParagraph ? 'header current' : 'header'
+  let className = currentParagraph ? 'section_heading current' : 'section_heading'
   const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
   return (
     <div
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 c0ce242..c186568 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
@@ -23,6 +23,7 @@ class Transcript extends Component {
   handleAnnotationClick(e, paragraph, annotation) {
     console.log(annotation)
     actions.audio.seek(annotation.start_ts)
+    actions.audio.play()
   }
   
   handleParagraphDoubleClick(e, paragraph) {
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.css b/animism-align/frontend/app/views/viewer/transcript/transcript.css
index 45942c6..9e4eff6 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.css
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.css
@@ -81,14 +81,14 @@
 
 /* paragraph subtypes */
 
-.transcript .header {
+.transcript .section_heading {
   text-align: center;
   padding-top: 2rem;
 }
-.transcript .header:first-of-type {
+.transcript .section_heading:first-of-type {
   padding-top: 0;
 }
-.transcript .header span {
+.transcript .section_heading span {
   border-bottom: 1px solid;
 }