nicer automatic captions

1 files changed, 59 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/editor/captions/captions.container.js b/animism-align/frontend/app/views/editor/captions/captions.container.js
new file mode 100644
index 0000000..41cb2aa
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/captions/captions.container.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import './captions.css'
+
+import { MEDIA_ANNOTATION_TYPES } from 'app/constants'
+import CaptionForm from './components/caption.form'
+
+class CaptionsContainer extends Component {
+  render() {
+    const { annotation, media, episode } = this.props
+    const { order, lookup: annotationLookup } = annotation
+    const { lookup: mediaLookup } = media
+
+    const mediaItems = order.map(id => annotationLookup[id])
+    .filter(annotation => (
+      MEDIA_ANNOTATION_TYPES.has(annotation.type)
+      && !annotation.settings.hideCitation
+      && annotation.settings.media_id in mediaLookup
+    ))
+    .map(annotation => annotation.settings.media_id)
+    .reduce((dedupe, media_id) => {
+      if (dedupe.indexOf(media_id) === -1) {
+        dedupe.push(media_id)
+      }
+      return dedupe
+    }, [])
+    .map(media_id => mediaLookup[media_id])
+
+    // console.log(mediaItems)
+
+    return (
+      <div className='overview'>
+        <div className='project-top'>
+          <div className='project-heading'>
+            <h2>Captions</h2>
+          </div>
+          {mediaItems.map((item, index) => (
+            <CaptionForm
+              key={item.id}
+              episode={episode}
+              media={item}
+              index={index+1}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  project: state.site.project,
+  episode: state.site.episode,
+  annotation: state.annotation.index,
+  media: state.media.index,
+})
+
+export default connect(mapStateToProps)(CaptionsContainer)