footnotes in transcript

2 files changed, 30 insertions, 8 deletions

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 ed90bca..64bfb63 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
@@ -7,20 +7,33 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
   let className = paragraph.type
   if (className !== 'paragraph') className += ' paragraph'
   if (currentParagraph) className += ' current'
+  const firstAnnotation = paragraph.annotations[0]
   return (
     <div
       className={className}
       data-startts={paragraph.start_ts}
       data-endts={paragraph.end_ts}
     >
-      {paragraph.annotations.map(annotation => (
-        <span
-          key={annotation.id}
-          className={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.id === currentAnnotation ? 'current' : ''}
+            onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}
+            dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
+          />
+        )
+      })}
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.css b/animism-align/frontend/app/views/viewer/transcript/transcript.css
index fbaa13f..ed479f2 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.css
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.css
@@ -125,3 +125,12 @@
   color: #000;
   transition: all 0.2s;
 }
+
+.transcript .footnote {
+  font-size: 0.8rem;
+  position: relative;
+  top: -0.5rem;
+  left: -0.4rem;
+  margin-right: -0.2rem;
+  cursor: pointer;
+}
\ No newline at end of file