speaker icon on images

1 files changed, 6 insertions, 1 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
index e477ba6..9928eef 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 
+import { SpeakerIcon } from '../../nav/viewer.icons'
 import { MediaCitation } from '../components.media'
 
 export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
@@ -10,6 +11,7 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
   if (annotation.settings.fullscreen) {
     return (
       <div className="media image fullscreen">
+        <div className="speaker-icon" onClick={e => onAnnotationClick(e, paragraph, annotation)}>{SpeakerIcon}</div>
         <div className="img" style={{ backgroundImage: 'url(' + item.settings.display.url + ')'}} />
         <MediaCitation media={item} />
       </div>
@@ -17,7 +19,10 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
   } else {
     return (
       <div className="media image">
-        <img src={item.settings.display.url} />
+        <div className="image-container">
+          <img src={item.settings.display.url} />
+          <div className="speaker-icon" onClick={e => onAnnotationClick(e, paragraph, annotation)}>{SpeakerIcon}</div>
+        </div>
         <MediaCitation media={item} />
       </div>
     )