footnotes element, close box, navigate to timestamp when clicking go to text

4 files changed, 40 insertions, 25 deletions

diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
index dd53f0b..5180d5e 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
@@ -20,7 +20,7 @@ export const paragraphElementLookup = {
   pullquote: React.memo(Paragraph),
   big_text: React.memo(Paragraph),
   section_heading: React.memo(ParagraphHeading),
-  heading_text: React.memo(ParagraphHeading),
+  // heading_text: React.memo(ParagraphHeading),
   video: React.memo(MediaVideo),
   image: React.memo(MediaImage),
 }
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.router.js b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
index b177d2d..651bbb6 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.router.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
@@ -37,6 +37,10 @@ class ViewerRouter extends Component {
       case 'credits':
         actions.viewer.showCredits()
         break
+      case 'footnotes':
+        actions.viewer.showComponent('nav')
+        actions.viewer.showComponent('footnotes')
+        break
       case 'end':
         break
     }
diff --git a/animism-align/frontend/app/views/viewer/sections/footnotes.css b/animism-align/frontend/app/views/viewer/sections/footnotes.css
index bf7a308..a6003de 100644
--- a/animism-align/frontend/app/views/viewer/sections/footnotes.css
+++ b/animism-align/frontend/app/views/viewer/sections/footnotes.css
@@ -4,6 +4,7 @@
   position: relative;
 }
 .nav-footnotes {
+  flex-direction: column;
   position: absolute;
   bottom: 0;
   right: -1px;
@@ -34,9 +35,19 @@
 .nav-footnotes-close {
   text-align: right;
   height: 1rem;
+  margin-bottom: 0.5rem;
   cursor: pointer;
+  width: 100%;
+}
+.nav-footnotes-close svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.nav-footnotes-close svg line {
+  stroke: white;
 }
 .nav-footnotes-scroll {
+  min-height: 10rem;
   max-height: calc(50vh - 5rem);
   max-width: 100%;
   overflow-x: hidden;
@@ -72,4 +83,9 @@
   text-decoration: none;
   border-bottom: 1px dotted;
   cursor: pointer;
+}
+.nav-footnotes .nav-return {
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
index de60987..6c6ef31 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
@@ -1,40 +1,29 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 import { Arrow } from '../nav/viewer.icons'
+import { EfluxClose } from '../nav/eflux.icons'
 
-const notes = [
-  { index: 1, text: "<i>Lorem ipsum</i>, p. 156." },
-  { index: 2, text: "Ibid." },
-  { index: 3, text: "Ibid." },
-  { index: 4, text: "Cicero, <i>De finibus bonorum et malorum</i>, 1.10.32." },
-  { index: 5, text: "Ibid." },
-  { index: 6, text: "Ibid." },
-  { index: 7, text: "<i>Lorem Ipsum: The Prosody of Verismillitude</i>, p. 72." },
-  { index: 8, text: "Ibid." },
-  { index: 9, text: "Ibid." },
-  { index: 10, text: "Ibid." },
-  { index: 11, text: "Ibid." },
-  { index: 12, text: "Ibid." },
-  { index: 13, text: "Ibid." },
-  { index: 14, text: "Ibid." },
-]
-
-
-export default class ViewerSectionsFootnotes extends Component {
+class ViewerSectionsFootnotes extends Component {
   render() {
+    const { footnoteList } = this.props
     return (
       <div className='nav-footnotes'>
         <div className='nav-footnotes-close' onClick={() => actions.viewer.hideNavComponent('footnotes')}>
-          x
+          {EfluxClose}
         </div>
         <div className='nav-footnotes-scroll'>
-          {notes.map(note => (
-            <div key={note.index} className="note-element">
-              <div className="note-number">{note.index}</div>
+          {footnoteList.map(note => (
+            <div key={note.footnote_id} className="note-element">
+              <div className="note-number">
+                {note.footnote_id}
+              </div>
               <div className="note-body">
                 <div dangerouslySetInnerHTML={{ __html: note.text }} />
-                <u>Go to text</u>
+                <u onClick={() => actions.viewer.seekToTimestamp(note.start_ts)}>
+                  {'Go to text'}
+                </u>
               </div>
             </div>
           ))}
@@ -52,3 +41,9 @@ const FootnotesLink = ({ type }) => (
     {'Notes'}
   </div>
 )
+
+const mapStateToProps = state => ({
+  footnoteList: state.viewer.footnoteList,
+})
+
+export default connect(mapStateToProps)(ViewerSectionsFootnotes)