1 files changed, 32 insertions, 11 deletions
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 f831078..d6de779 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
@@ -8,12 +8,20 @@ import { posterURL } from 'app/utils/annotation.utils'
 
 export class MediaVideo extends Component {
   state = {
+    width: 0,
     ready: false,
   }
   constructor(props) {
     super(props)
+    this.handleReady = this.handleReady.bind(this)
     this.handlePlay = this.handlePlay.bind(this)
   }
+  handleReady(player) {
+    player.getVideoWidth().then(width => {
+      this.setState({ width })
+    }).catch(error => {
+    })
+  }
   handlePlay() {
     this.setState({ ready: true })
   }
@@ -68,17 +76,30 @@ export class MediaVideo extends Component {
     style.opacity = ready ? 1.0 : 0.0
     return (
       <div className={className}>
-        <div className='videoPlayer' style={style}>
-          <VimeoPlayer
-            video={item.url}
-            autoplay={annotation.settings.autoplay}
-            muted={true}
-            responsive={true}
-            controls={false}
-            byline={false}
-            style={poster}
-            onPlay={this.handlePlay}
-          />
+        <div className='videoContainer' style={style}>
+          <div className='videoPlayer'>
+            <VimeoPlayer
+              video={item.url}
+              autoplay={annotation.settings.autoplay}
+              muted={true}
+              responsive={true}
+              controls={false}
+              byline={false}
+              style={poster}
+              onReady={this.handleReady}
+              onPlay={this.handlePlay}
+            />
+          </div>
+          {this.state.width && (
+            <div
+              className="speaker-icon"
+              style={{
+                right: '50%',
+                marginRight: -1 * (this.state.width / 2 - 48 - 16)
+              }}
+              onClick={e => onAnnotationClick(e, paragraph, annotation)}
+            >{SpeakerIcon}</div>
+          )}
         </div>
         <MediaCitation media={item} />
       </div>