From 964dcf5c85b68207e5bc6c36c0a438855a22e26e Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 23 Oct 2020 16:58:15 +0200
Subject: footnotes in pull quotes

---
 .../components/annotations/annotation.index.css    |  2 +-
 .../annotationForms/annotationForm.video.js        | 14 ++++----
 .../app/views/paragraph/paragraph.reducer.js       |  1 +
 .../viewer/player/components.inline/inline.text.js | 40 +++++++++++++--------
 .../transcript/components/elementTypes.text.js     | 41 ++++++++++++++--------
 .../viewer/transcript/transcript.container.js      |  1 +
 6 files changed, 64 insertions(+), 35 deletions(-)

(limited to 'animism-align/frontend/app')

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.index.css b/animism-align/frontend/app/views/align/components/annotations/annotation.index.css
index 5547408..af44212 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.index.css
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.index.css
@@ -52,7 +52,7 @@
   width: 200px;
 }
 .annotationIndex .annotation.text_plate {
-  left: calc(405px + 0.5rem);
+  left: calc(605px + 0.5rem);
 }
 .annotation.curtain {
   background-image: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0));
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
index 7bbe952..0199b46 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -56,12 +56,14 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h
           onChange={handleSettingsSelect}
         />
       )}
-      <Checkbox
-        label="Hide inline video poster"
-        name="hide_poster_inline22"
-        checked={annotation.settings.hide_poster_inline}
-        onChange={handleSettingsSelect}
-      />
+      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
+        <Checkbox
+          label="Hide inline video poster"
+          name="hide_poster_inline"
+          checked={annotation.settings.hide_poster_inline}
+          onChange={handleSettingsSelect}
+        />
+      )}
       <Checkbox
         label="Hide in transcript"
         name="hide_in_transcript"
diff --git a/animism-align/frontend/app/views/paragraph/paragraph.reducer.js b/animism-align/frontend/app/views/paragraph/paragraph.reducer.js
index 911c150..041014f 100644
--- a/animism-align/frontend/app/views/paragraph/paragraph.reducer.js
+++ b/animism-align/frontend/app/views/paragraph/paragraph.reducer.js
@@ -5,6 +5,7 @@ import { crudState, crudReducer } from 'app/api/crud.reducer'
 
 const initialState = crudState('paragraph', {
   paragraphs: [],
+  footnotes: [],
   options: {
   }
 })
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
index d257090..20f45c7 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
@@ -50,20 +50,32 @@ export const Pullquote = ({ paragraph, currentParagraph, currentAnnotation, onAn
       className={className}
     >
       <div className="speaker-icon" onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}>{SpeakerIcon}</div>
-      {paragraph.annotations.map(annotation => (
-        <span
-          key={annotation.id}
-          className={
-            annotation.type === 'pullquote_credit'
-            ? 'pullquote_credit'
-            : annotation.id === currentAnnotation
-            ? 'current'
-            : ''
-          }
-          onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}
-          dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
-        />
-      ))}
+      {paragraph.annotations.map(annotation => {
+        if (annotation.type === 'footnote') {
+          return (
+            <span
+              key={annotation.id}
+              className='footnote'
+              onClick={e => onAnnotationClick(e, paragraph, annotation)}
+              dangerouslySetInnerHTML={{ __html: annotation.footnote_id }}
+            />
+          )
+        }
+        return (
+          <span
+            key={annotation.id}
+            className={
+              annotation.type === 'pullquote_credit'
+              ? 'pullquote_credit'
+              : annotation.id === currentAnnotation
+              ? 'current'
+              : ''
+            }
+            onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}
+            dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
+          />
+        )
+      })}
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
index 64bfb63..e81ee7b 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
@@ -8,6 +8,7 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
   if (className !== 'paragraph') className += ' paragraph'
   if (currentParagraph) className += ' current'
   const firstAnnotation = paragraph.annotations[0]
+console.log(paragraph.start_ts, paragraph)
   return (
     <div
       className={className}
@@ -49,20 +50,32 @@ export const Pullquote = ({ paragraph, currentParagraph, currentAnnotation, onAn
       data-startts={paragraph.start_ts}
       data-endts={paragraph.end_ts}
     >
-      {paragraph.annotations.map(annotation => (
-        <span
-          key={annotation.id}
-          className={
-            annotation.type === 'pullquote_credit'
-            ? 'pullquote_credit'
-            : annotation.id === currentAnnotation
-            ? 'current'
-            : ''
-          }
-          onClick={e => onAnnotationClick(e, paragraph, annotation)}
-          dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
-        />
-      ))}
+      {paragraph.annotations.map(annotation => {
+        if (annotation.type === 'footnote') {
+          return (
+            <span
+              key={annotation.id}
+              className='footnote'
+              onClick={e => onAnnotationClick(e, annotation, annotation)}
+              dangerouslySetInnerHTML={{ __html: annotation.footnote_id }}
+            />
+          )
+        }
+        return (
+          <span
+            key={annotation.id}
+            className={
+              annotation.type === 'pullquote_credit'
+              ? 'pullquote_credit'
+              : annotation.id === currentAnnotation
+              ? 'current'
+              : ''
+            }
+            onClick={e => onAnnotationClick(e, paragraph, annotation)}
+            dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
+          />
+        )
+      })}
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
index b12fc18..52ff2f6 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
@@ -129,6 +129,7 @@ class Transcript extends Component {
 
   render() {
     const { viewer, paragraphs } = this.props
+    console.log(paragraphs.map(p => p.annotations.filter(a => a.type === 'footnote')).filter(p => p.length))
     return (
       <div className="transcript">
         <div
-- 
cgit v1.2.3-70-g09d2