clamp scrubber dot. clickable fullscreen video posters

3 files changed, 5 insertions, 2 deletions

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 5fa1ea7..2fdcba7 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
@@ -9,7 +9,7 @@ import { VideoScrubber } from '../components.media'
 class FullscreenVideo extends Component {
   state = {
     // duration of the video, in seconds
-    duration: 0.0,
+    duration: 60.0,
     // percentage offset from vimeo. not used
     percent: 0.0,
     // current timestamp from vimeo, in seconds
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 bb6a753..ec25cba 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
@@ -87,7 +87,7 @@ class VideoScrubber extends Component {
     // remove video start offset from timing
     const player_ts = timing.seconds - video_start_ts
     // compute percent from the length of the fullscreen element
-    const percent = player_ts / duration
+    const percent = clamp(player_ts / duration, 0, 1)
     // display timestamp from the fullscreen element too
     const timestampText = timestamp(clamp(player_ts, 0, duration))
     // show or hide the scrubber bar
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 c676d0b..6a2473c 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -222,6 +222,7 @@
   padding: 0 !important;
 }
 .player-transcript .media.video .videoPoster {
+  position: relative;
   cursor: pointer;
   background-size: cover;
   background-position: center center;
@@ -230,6 +231,8 @@
   height: calc(100vh - 15rem) !important;
   padding: 1rem 0;
 }
+
+.player-transcript .media.video .speaker-icon,
 .player-transcript .media.image .speaker-icon {
   bottom: 0;
   right: 0;