checklist

3 files changed, 125 insertions, 13 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>
     )
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.css b/animism-align/frontend/app/views/viewer/checklist/checklist.css
index 4e87335..0499665 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.css
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.css
@@ -1,5 +1,9 @@
 .checklist {
   z-index: 20;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
   position: absolute;
   bottom: 0;
   left: 0;
@@ -10,7 +14,7 @@
   background: white;
   color: black;
   font-size: 16px;
-  padding: 1.5rem;
+  padding: 0;
 }
 .checklist-open .checklist {
   transform: translateZ(0) translateY(0);
@@ -21,6 +25,8 @@
 
 .checklist-dropdown-container {
   width: 12rem;
+  margin-top: 1.5rem;
+  margin-left: 1.5rem;
   cursor: pointer;
 }
 .checklist-dropdown {
@@ -62,3 +68,69 @@
   color: white;
   background: black;
 }
+
+/* checklist content */
+
+.checklist-content {
+  flex: 1;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.checklist-table {
+  width: 51rem;
+  margin-top: 1.5rem;
+  margin-left: 1rem;
+  margin-bottom: 3rem;
+  margin-right: 1.5rem;
+}
+.checklist-section {
+  border-top: 1px solid;
+}
+.checklist-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.checklist-row > div {
+  width: 25%;
+  padding-right: 1rem;
+}
+.checklist-row > div.media-image {
+  padding-right: 0;
+  display: flex;
+  justify-content: flex-end;
+}
+.checklist-row .media-type {
+  display: block;
+  padding-top: 0.5rem;
+  font-size: 12px;
+}
+.checklist-row .media-thumbnail {
+  position: relative;
+}
+.checklist-row .media-thumbnail img {
+  max-width: 12rem;
+}
+.checklist-row .play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateZ(0) translateX(-50%) translateY(-50%);
+  border: 1px solid white;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+}
+.checklist-row .play-button svg {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  left: 0.125rem;
+}
+.checklist-row .play-button svg polygon {
+  fill: white;
+}
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index da3ecbf..183c3e0 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -49,12 +49,12 @@ export const VolumeControl = React.memo(({ volume }) => (
 
 // play / pause button
 
-const PlayIcon = (
+export const PlayIcon = (
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
     <polygon points="12.5,11 12.5,29 27.5,20 " />
   </svg>
 )
-const PauseIcon = (
+export const PauseIcon = (
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
     <path d="M14.34,12.5h4.16v15h-4.16V12.5z M21.5,27.5h4.17v-15H21.5V27.5z" />
   </svg>