fixing scrubber

5 files changed, 50 insertions, 15 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
index f634faa..56bb4ab 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -50,6 +50,14 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h
       />
       {annotation.settings.inline && (
         <Checkbox
+          label="Hide Controls"
+          name="hide_controls"
+          checked={annotation.settings.hide_controls}
+          onChange={handleSettingsSelect}
+        />
+      )}
+      {annotation.settings.inline && (
+        <Checkbox
           label="Show poster image"
           name="poster"
           checked={annotation.settings.poster}
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
index 213f17c..ec020f8 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
@@ -63,7 +63,7 @@ class FullscreenVideo extends Component {
   }
 
   render() {
-    const { element, media, transitionDuration, playing } = this.props
+    const { element, media, transitionDuration, play_ts, playing } = this.props
     const { duration, seconds, ready } = this.state
     const { color } = element
     const item = media.lookup[element.settings.media_id]
@@ -102,6 +102,7 @@ class FullscreenVideo extends Component {
           />
         </div>
         <VideoScrubber
+          play_ts={play_ts}
           start_ts={element.start_ts}
           video_start_ts={this.state.video_start_ts}
           playing={playing}
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>
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js
index c236f81..48250c7 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js
@@ -57,7 +57,7 @@ class VideoScrubber extends Component {
     // 
     onScrub({
       seek: video_seek,
-      seconds: video_seek,
+      seconds: seconds,
       scrubbing,
     })
   }
@@ -82,10 +82,11 @@ class VideoScrubber extends Component {
     this.setState({ hovering: false })
   }
   render() {
-    const { playing, volume, timing, video_start_ts, duration } = this.props
+    const { playing, start_ts, play_ts, volume, timing, video_start_ts, duration } = this.props
     const { hovering, showing } = this.state
     // remove video start offset from timing
-    const player_ts = timing.seconds - video_start_ts
+    console.log(start_ts, play_ts)
+    const player_ts = play_ts - start_ts
     // compute percent from the length of the fullscreen element
     const percent = clamp(player_ts / duration, 0, 1)
     // display timestamp from the fullscreen element too
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 3a8f61c..e5a323c 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -245,6 +245,10 @@
   padding: 1rem 0;
 }
 
+.player-transcript .media.video .videoContainer {
+  position: relative;
+}
+
 .player-transcript .media.video .speaker-icon,
 .player-transcript .media.image .speaker-icon {
   bottom: 0;