speaker icon on images

4 files changed, 35 insertions, 6 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>
     )
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
index 55ff420..3e70b24 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import VimeoPlayer from '@u-wave/react-vimeo'
 
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
+import { SpeakerIcon } from '../../nav/viewer.icons'
 import { MediaCitation } from '../components.media'
 
 export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
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 47925ef..7e0b302 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -117,16 +117,19 @@
 }
 .speaker-icon {
   position: absolute;
-  top: 0;
-  left: -5.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
+  cursor: pointer;
   transition: opacity 0.2s;
   padding: 1.5rem;
 }
-.intro_paragraph .speaker-icon {
+.paragraph .speaker-icon {
+  top: -1.5rem;
+  left: -5.5rem;
+}
+.paragraph.intro_paragraph .speaker-icon {
   top: -0.75rem;
 }
 .speaker-icon svg {
@@ -147,8 +150,16 @@
 .player-transcript .media {
   width: 100%;
 }
-.player-transcript .media.image img {
+.player-transcript .media.image {
+  text-align: center;
+}
+.player-transcript .media.image .image-container {
+  position: relative;
   margin: 0 auto;
+  display: inline-block;
+}
+.player-transcript .media.image img {
+  cursor: pointer;
   display: block;
   max-width: 100%;
   max-height: 90vh;
@@ -160,6 +171,7 @@
   background-position: center center;
 }
 .player-transcript .media .citation {
+  text-align: left;
   width: 45rem;
   margin: 0 auto;
   padding: 1rem 0;
@@ -170,6 +182,17 @@
   pointer-events: none;
   padding: 1rem 0;
 }
+.player-transcript .media.image .speaker-icon {
+  bottom: 0;
+  right: 0;
+  opacity: 1;
+}
+.player-transcript .media.image .speaker-icon:hover svg {
+  background: white;
+}
+.player-transcript .media.image .speaker-icon:hover svg path {
+  fill: black;
+}
 
 /* intro */
 
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 c079d42..9048227 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -29,7 +29,7 @@ class PlayerTranscript extends Component {
 
   handleAnnotationClick(e, paragraph, annotation) {
     // console.log(annotation)
-    actions.audio.seek(annotation.start_ts)
+    actions.audio.seek(paragraph.start_ts)
     actions.audio.play()
   }