pulling out section list

14 files changed, 217 insertions, 31 deletions

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index 9643b5f..fc7e591 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -36,4 +36,9 @@ export const INNER_HEIGHT = window.innerHeight - HEADER_MARGIN
 export const ROMAN_NUMERALS = [
   'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X',
   'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX',
-]
\ No newline at end of file
+]
+
+export const MEDIA_TYPES = new Set([
+  'image', 'gallery', 'vitrine',
+  'video',
+])
diff --git a/animism-align/frontend/app/router.js b/animism-align/frontend/app/router.js
index bd87cbe..982429b 100644
--- a/animism-align/frontend/app/router.js
+++ b/animism-align/frontend/app/router.js
@@ -18,11 +18,7 @@ const viewList = Object.keys(views).map(name => {
 
 export default class Router extends Component {
   componentDidMount() {
-    actions.site.loadText()
-    actions.site.loadPeaks()
-    actions.annotation.index()
-    actions.paragraph.index()
-    actions.media.index()
+    actions.site.loadProject()
   }
   render() {
     return (
diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js
index 296b3fd..eaff1f6 100644
--- a/animism-align/frontend/app/types.js
+++ b/animism-align/frontend/app/types.js
@@ -23,7 +23,7 @@ export const audio = with_type('audio', [
 ])
 
 export const viewer = with_type('viewer', [
-  'toggle_section'
+  'load_sections', 'toggle_section'
 ])
 
 export const site = with_type('site', [
diff --git a/animism-align/frontend/app/views/align/align.actions.js b/animism-align/frontend/app/views/align/align.actions.js
index 5176d81..90c9593 100644
--- a/animism-align/frontend/app/views/align/align.actions.js
+++ b/animism-align/frontend/app/views/align/align.actions.js
@@ -1,6 +1,6 @@
 import * as types from 'app/types'
 import { store, history, dispatch } from 'app/store'
-import { api, post, pad, preloadImage } from 'app/utils'
+import { api } from 'app/utils'
 import actions from 'app/actions'
 // import { session } from 'app/session'
 import throttle from 'lodash.throttle'
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
index 1b8a0ac..ae92f78 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
@@ -6,11 +6,7 @@ import { connect } from 'react-redux'
 import { floatLT, floatLTE } from 'app/utils'
 import actions from 'app/actions'
 import ParagraphForm from '../components/paragraph.form'
-
-const MEDIA_TYPES = new Set([
-  'image', 'gallery', 'vitrine',
-  'video',
-])
+import { MEDIA_TYPES } from 'app/constants'
 
 class ParagraphList extends Component {
   state = {
diff --git a/animism-align/frontend/app/views/site/site.actions.js b/animism-align/frontend/app/views/site/site.actions.js
index b894c64..90e7249 100644
--- a/animism-align/frontend/app/views/site/site.actions.js
+++ b/animism-align/frontend/app/views/site/site.actions.js
@@ -1,14 +1,31 @@
 import * as types from 'app/types'
-import { api, post, pad, preloadImage } from 'app/utils'
+import { api } from 'app/utils'
+import actions from 'app/actions'
 
-export const loadPeaks = (asdf) => dispatch => {
-  api(dispatch, types.peaks, 'peaks', '/static/data_store/peaks/peaks.json')
+export const loadProject = () => dispatch => {
+  Promise.all([
+    actions.site.loadText(),
+    actions.site.loadPeaks(),
+    actions.annotation.index(),
+    actions.paragraph.index(),
+    actions.media.index(),
+  ]).then(() => {
+    console.log(arguments)
+    actions.viewer.loadSections()
+  }).catch(err => {
+    console.error(err)
+  })
 }
 
-export const loadText = (asdf) => dispatch => {
+export const loadPeaks = (asdf) => dispatch => (
+  api(dispatch, types.peaks, 'peaks', '/static/data_store/peaks/peaks.json')
+)
+
+export const loadText = (asdf) => dispatch => (
   api(dispatch, types.text, 'text', '/static/data_store/peaks/text.txt')
-}
+)
 
-export const updateText = text => dispatch => {
+export const updateText = text => dispatch => (
   dispatch({ type: types.text.loaded, data: text })
-}
\ No newline at end of file
+)
+
diff --git a/animism-align/frontend/app/views/upload/upload.actions.js b/animism-align/frontend/app/views/upload/upload.actions.js
index 73c8e16..7325a55 100644
--- a/animism-align/frontend/app/views/upload/upload.actions.js
+++ b/animism-align/frontend/app/views/upload/upload.actions.js
@@ -1,6 +1,4 @@
 import * as types from 'app/types'
-import { store, history } from 'app/store'
-import { api, post, pad, preloadImage } from 'app/utils'
 import actions from 'app/actions'
 import { session } from 'app/session'
 
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
index 4200b03..a0a9a1a 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
@@ -16,10 +16,12 @@ class ViewerNav extends Component {
       <div className="viewer-nav">
         <div className='nav-row main-nav'>
           <div>
-            <Arrow type={'up'} />
-            {ROMAN_NUMERALS[0]}
-            {'. '}
-            {'Introduction'}
+            <span className="section-link link">
+              <Arrow type={'up'} />
+              {ROMAN_NUMERALS[0]}
+              {'. '}
+              {'Introduction'}
+            </span>
           </div>
           <div>
             <PlayButton />
@@ -27,8 +29,10 @@ class ViewerNav extends Component {
             <VolumeControl />
           </div>
           <div>
-            Next
-            <Arrow type={'right'} />
+            <span className="next-link link">
+              Next
+              <Arrow type={'right'} />
+            </span>
           </div>
         </div>
       </div>
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.sections.js b/animism-align/frontend/app/views/viewer/nav/viewer.sections.js
new file mode 100644
index 0000000..76402e8
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.sections.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+import { Arrow } from './viewer.icons'
+import ViewerSectionsNav from './viewer.sections.nav'
+import { ROMAN_NUMERALS } from 'app/constants'
+import { thumbnailURL } from 'app/views/align/align.util'
+
+class ViewerSections extends Component {
+  componentDidMount() {
+  }
+  
+  render() {
+    const { sections } = this.props
+    return (
+      <div className="viewer-sections">
+        {sections.map(section => {
+          console.log(section)
+          return (
+            <div className="viewer-section" key={section.index}>
+              <div className="section-thumbnail" style={{
+                backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0]) + ')',
+              }}/>
+              {ROMAN_NUMERALS[section.index]}: {section.title}
+            </div>
+          )
+        })}
+        <ViewerSectionsNav />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  sections: state.viewer.sections,
+})
+
+export default connect(mapStateToProps)(ViewerSections)
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/nav/viewer.sections.nav.js
new file mode 100644
index 0000000..dcccfd5
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.sections.nav.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+import { Arrow } from './viewer.icons'
+
+class ViewerSectionsNav extends Component {
+  componentDidMount() {
+  }
+  
+  render() {
+    const { } = this.props
+    return (
+      <div className="viewer-nav">
+        <div className='nav-row'>
+          <div>
+            <span className="share-link link">
+              <Arrow type={'up'} />
+              {'Share'}
+            </span>
+          </div>
+          <div>
+            <span className="checklist-link link">
+              <Arrow type={'up'} />
+              {'Checklist'}
+            </span>
+          </div>
+          <div>
+            <span className="transcript-link link">
+              {'Transcript'}
+            </span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+})
+
+export default connect(mapStateToProps)(ViewerSectionsNav)
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 7f8e1c8..35e26a9 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -1,14 +1,51 @@
 import * as types from 'app/types'
 import { store, history, dispatch } from 'app/store'
-// import {  } from 'app/utils'
-// import actions from 'app/actions'
+import { MEDIA_TYPES } from 'app/constants'
+
+const newSection = (annotation, index) => ({
+  start_ts: annotation.start_ts,
+  title: annotation.text,
+  media: [],
+  index,
+})
+
+export const loadSections = () => dispatch => {
+  let sections = [], currentSection
+  const state = store.getState()
+  const { order: annotationOrder, lookup: annotationLookup } = state.annotation.index
+  const { lookup: mediaLookup } = state.media.index
+  console.log(state.media.index)
+
+  // loop over the annotations in time order. group the media found in each section.
+  annotationOrder.forEach((annotation_id, i) => {
+    const annotation = annotationLookup[annotation_id]
+    if (annotation.type === 'header') {
+      currentSection = newSection(annotation, sections.length)
+      sections.push(currentSection)
+    }
+    if (MEDIA_TYPES.has(annotation.type)) {
+      if (!currentSection) {
+        console.error("media found before first section")
+        return
+      }
+      const media = mediaLookup[annotation.settings.media_id]
+      currentSection.media.push(media)
+    }
+  })
+
+  console.log(sections)
+
+  dispatch({ type: types.viewer.load_sections, data: sections })
+}
 
 export const showSection = section => dispatch => {
   dispatch({ type: types.viewer.toggle_section, key: section, value: true })
 }
+
 export const hideSection = section => dispatch => {
   dispatch({ type: types.viewer.toggle_section, key: section, value: false })
 }
+
 export const toggleSection = section => dispatch => {
   dispatch({ type: types.viewer.toggle_section, key: section, value: !store.getState().viewer[section] })
 }
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index b5d9721..d9a8071 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -12,6 +12,7 @@ import actions from 'app/actions'
 import { Loader } from 'app/common'
 
 import ViewerNav from './nav/viewer.nav'
+import ViewerSections from './nav/viewer.sections'
 import ViewerRouter from './nav/viewer.router'
 import Player from './player/player.container'
 import Transcript from './transcript/transcript.container'
@@ -64,6 +65,7 @@ class ViewerContainer extends Component {
             <Player />
           </div>
           <ViewerNav />
+          <ViewerSections />
           <Transcript />
           <Checklist />
           <Route exact path='/viewer/:component/' component={ViewerRouter} />
@@ -77,7 +79,8 @@ const mapStateToProps = state => ({
   loaded: (
     !!state.annotation.index.lookup &&
     !!state.paragraph.index.lookup &&
-    !!state.media.index.lookup
+    !!state.media.index.lookup &&
+    !!state.viewer.sections.length
   ),
   viewer: state.viewer,
 })
diff --git a/animism-align/frontend/app/views/viewer/viewer.nav.css b/animism-align/frontend/app/views/viewer/viewer.nav.css
index 3797619..d353aa1 100644
--- a/animism-align/frontend/app/views/viewer/viewer.nav.css
+++ b/animism-align/frontend/app/views/viewer/viewer.nav.css
@@ -34,9 +34,22 @@
   align-items: center;
 }
 
+.viewer-nav .link {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;  
+  cursor: pointer;
+}
+
+.transcript-link {
+  padding-right: 1.25rem;
+}
+
 /* Arrows */
 
 .viewer-nav .arrow {
+  display: inline-block;
   width: 2.5rem;
   height: 2.5rem;
   display: flex;
@@ -97,3 +110,28 @@
   margin-left: 0.5rem;
   margin-right: 0.75rem;
 }
+
+/* Viewer sections */
+
+.viewer-sections {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: black;
+  color: white;
+  display: block;
+  white-space: nowrap;
+}
+.viewer-sections .viewer-section {
+  display: inline-block;
+  padding: 1rem;
+  margin: 1rem;
+}
+.viewer-sections .section-thumbnail {
+  display: block;
+  width: 6rem;
+  height: 4rem;
+  background-size: cover;
+  background-position: center center;
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 2668ca1..ef315bb 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -4,6 +4,7 @@ const initialState = {
   transcript: false,
   checklist: false,
   nav: false,
+  sections: { loading: true },
   options: {
   }
 }
@@ -11,11 +12,19 @@ const initialState = {
 export default function viewerReducer(state = initialState, action) {
   // console.log(action.type, action)
   switch (action.type) {
+
+    case types.viewer.load_sections:
+      return {
+        ...state,
+        sections: action.data,
+      }
+
     case types.viewer.toggle_section:
       return {
         ...state,
         [action.key]: action.value,
       }
+
     default:
       return state
   }