From f2d612de04da968a74efe94d0b448b465869d6e0 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 24 Jul 2020 22:26:07 +0200
Subject: navigate to media

---
 .../views/viewer/checklist/checklist.content.js    | 31 ++++++++++++++--------
 1 file changed, 20 insertions(+), 11 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer/checklist')

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>
-- 
cgit v1.2.3-70-g09d2