speaker icon on paragraphs

4 files changed, 38 insertions, 4 deletions

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 455df6f..57478a0 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -98,4 +98,4 @@ export const SpeakerIcon = (
   <path d="M29.11,20.37c0,2.48-1.21,4.74-3.23,6.04l-0.57-0.89c1.71-1.1,2.74-3.03,2.74-5.15c0-2.11-1.06-4.09-2.77-5.18l0.57-0.9
     C27.89,15.59,29.11,17.86,29.11,20.37z M10.89,15.5v9h5.02l5.4,4.38V11.12l-5.4,4.38H10.89z"/>
   </svg>
-)
\ No newline at end of file
+)
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 5d7135b..91ea506 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
@@ -1,21 +1,24 @@
 import React, { Component } from 'react'
 
 import { ROMAN_NUMERALS } from 'app/constants'
+import { SpeakerIcon } from '../../nav/viewer.icons'
 
 export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   if (paragraph.hidden) return null
   let className = paragraph.type
   if (className !== 'paragraph') className += ' paragraph'
   if (currentParagraph) className += ' current'
+  const firstAnnotation = paragraph.annotations[0]
   return (
     <div
       className={className}
     >
+      <div className="speaker-icon" onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}>{SpeakerIcon}</div>
       {paragraph.annotations.map(annotation => (
         <span
           key={annotation.id}
           className={annotation.id === currentAnnotation ? 'current' : ''}
-          onClick={e => onAnnotationClick(e, paragraph, annotation)}
+          onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}
           dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
         />
       ))}
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 9ca426e..47925ef 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -112,6 +112,36 @@
   transition: all 0.1s;
 }
 
+.player-transcript .paragraph {
+  position: relative;
+}
+.speaker-icon {
+  position: absolute;
+  top: 0;
+  left: -5.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+  padding: 1.5rem;
+}
+.intro_paragraph .speaker-icon {
+  top: -0.75rem;
+}
+.speaker-icon svg {
+  background: black;
+  border-radius: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.speaker-icon svg path {
+  fill: white;
+}
+.paragraph:hover .speaker-icon {
+  opacity: 1;
+}
+
 /* media */
 
 .player-transcript .media {
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
index cee70a8..c079d42 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -28,8 +28,9 @@ class PlayerTranscript extends Component {
   }
 
   handleAnnotationClick(e, paragraph, annotation) {
-    console.log(annotation)
-    // actions.audio.seek(annotation.start_ts)
+    // console.log(annotation)
+    actions.audio.seek(annotation.start_ts)
+    actions.audio.play()
   }
   
   handleParagraphDoubleClick(e, paragraph) {