speaker icon on paragraphs

1 files changed, 4 insertions, 1 deletions

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 + ' ' }}
         />
       ))}