checklist

1 files changed, 50 insertions, 10 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 ae72adf..3eadaca 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
@@ -2,21 +2,61 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import actions from 'app/actions'
+import { ROMAN_NUMERALS } from 'app/constants'
+import { pad } from 'app/utils'
+import { thumbnailURL } from 'app/views/align/align.util'
+import { PlayIcon } from '../nav/viewer.icons'
 
 class ChecklistContent extends Component {
   render() {
     const { sections, currentSection } = this.props
     return (
-      <div className="">
-        <div className="checklist-content">
-          <div className="checklist-table">
-            {sections.map(section => {
-              if (currentSection !== "all" || section.index !== currentSection) return
-              return (
-                <div key={section.index} />
-              )
-            })}
-          </div>
+      <div className="checklist-content">
+        <div className="checklist-table">
+          {sections.map(section => {
+            if ((currentSection !== "all" && section.index !== currentSection) || !section.media.length) {
+              return <div key={section.index} />
+            }
+            return (
+              <div className="checklist-section" key={section.index}>
+                {section.media.map((media, i) => (
+                  <div className="checklist-row" key={section.index + "_" + i}>
+                    <div className="media-id">
+                      {pad(section.mediaIndex + i + 1, 2)}
+                    </div>
+                    <div className="media-section">
+                      {ROMAN_NUMERALS[section.index]}
+                      <br />
+                      {section.title}
+                    </div>
+                    <div className="media-about">
+                      {media.author}
+                      <br />
+                      {media.pre_title && (media.pre_title + ' ')}
+                      <i>{media.title}</i>
+                      {media.post_title && (' ' + media.post_title)}
+                      <br />
+                      {media.year}
+                      <div className='media-type'>
+                        {media.medium}
+                        {media.settings.duration && (', ' + media.settings.duration)}
+                      </div>
+                    </div>
+                    <div className="media-image">
+                      <div className="media-thumbnail">
+                        <img src={thumbnailURL(media)} alt={media.title} />
+                        {media.type === 'video' &&
+                          <span className='play-button'>
+                            {PlayIcon}
+                          </span>
+                        }
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )
+          })}
         </div>
       </div>
     )