navigate to media

3 files changed, 38 insertions, 15 deletions

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 3eadaca..842947f 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
@@ -8,6 +8,11 @@ import { thumbnailURL } from 'app/views/align/align.util'
 import { PlayIcon } from '../nav/viewer.icons'
 
 class ChecklistContent extends Component {
+  handleMediaSelection(mediaItem) {
+    actions.audio.seek(mediaItem.start_ts)
+    actions.viewer.hideSection('nav')
+    actions.viewer.hideSection('checklist')
+  }
   render() {
     const { sections, currentSection } = this.props
     return (
@@ -19,8 +24,12 @@ class ChecklistContent extends Component {
             }
             return (
               <div className="checklist-section" key={section.index}>
-                {section.media.map((media, i) => (
-                  <div className="checklist-row" key={section.index + "_" + i}>
+                {section.media.map((mediaItem, i) => (
+                  <div
+                    className="checklist-row"
+                    key={section.index + "_" + i}
+                    onClick={() => this.handleMediaSelection(mediaItem)}
+                  >
                     <div className="media-id">
                       {pad(section.mediaIndex + i + 1, 2)}
                     </div>
@@ -30,22 +39,22 @@ class ChecklistContent extends Component {
                       {section.title}
                     </div>
                     <div className="media-about">
-                      {media.author}
+                      {mediaItem.media.author}
                       <br />
-                      {media.pre_title && (media.pre_title + ' ')}
-                      <i>{media.title}</i>
-                      {media.post_title && (' ' + media.post_title)}
+                      {mediaItem.media.pre_title && (mediaItem.media.pre_title + ' ')}
+                      <i>{mediaItem.media.title}</i>
+                      {mediaItem.media.post_title && (' ' + mediaItem.media.post_title)}
                       <br />
-                      {media.year}
+                      {mediaItem.media.year}
                       <div className='media-type'>
-                        {media.medium}
-                        {media.settings.duration && (', ' + media.settings.duration)}
+                        {mediaItem.media.medium}
+                        {mediaItem.media.settings.duration && (', ' + mediaItem.media.settings.duration)}
                       </div>
                     </div>
                     <div className="media-image">
                       <div className="media-thumbnail">
-                        <img src={thumbnailURL(media)} alt={media.title} />
-                        {media.type === 'video' &&
+                        <img src={thumbnailURL(mediaItem.media)} alt={mediaItem.media.title} />
+                        {mediaItem.type === 'video' &&
                           <span className='play-button'>
                             {PlayIcon}
                           </span>
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 f4089e2..5cf40eb 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
@@ -30,14 +30,14 @@ class ViewerSections extends Component {
             >
               <div>
                 <div className="section-thumbnail" style={{
-                  backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0]) + ')',
+                  backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0].media) + ')',
                 }}/>
                 <div className="section-title">
                   {ROMAN_NUMERALS[section.index]}<br />
                   {section.title}
                 </div>
                 <div className="section-media">
-                  {section.media.map(media => media.type).join(', ')}
+                  {section.mediaTypes}
                 </div>
               </div>
             </div>
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index aa5124f..563b18f 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -11,7 +11,10 @@ const newSection = (annotation, index, mediaIndex) => ({
 })
 
 export const loadSections = () => dispatch => {
-  let sections = [], currentSection, mediaIndex = 0
+  let sections = []
+  let currentSection
+  let mediaIndex = 0
+  let mediaTypes = {}
   const state = store.getState()
   const { order: annotationOrder, lookup: annotationLookup } = state.annotation.index
   const { lookup: mediaLookup } = state.media.index
@@ -19,13 +22,20 @@ export const loadSections = () => dispatch => {
   annotationOrder.forEach((annotation_id, i) => {
     const annotation = annotationLookup[annotation_id]
     if (annotation.type === 'header') {
+      if (currentSection) {
+        currentSection.mediaTypes = Object.keys(mediaTypes).join(', ')
+        mediaTypes = {}
+      }
       currentSection = newSection(annotation, sections.length, mediaIndex)
       sections.push(currentSection)
     }
     if (MEDIA_TYPES.has(annotation.type)) {
       if (currentSection) {
         const media = mediaLookup[annotation.settings.media_id]
-        currentSection.media.push(media)
+        currentSection.media.push({
+          start_ts: annotation.start_ts,
+          media
+        })
         mediaIndex += 1
       } else {
         console.error("media found before first section")
@@ -33,6 +43,10 @@ export const loadSections = () => dispatch => {
     }
   })
 
+  if (currentSection) {
+    currentSection.mediaTypes = Object.keys(mediaTypes).join(', ')
+  }
+
   // console.log(sections)
 
   dispatch({ type: types.viewer.load_sections, data: sections })