Fix: Preventing forward scrubbing (fixes: #319) (#320)

Co-authored-by: Brad Simpson <[email protected]>
Co-authored-by: Oliver Foster <[email protected]>

Author: 3 people

js/mediaView.js

@@ -192,13 +192,7 @@ class MediaView extends ComponentView {
       this.setupInviewCompletion('.component__widget');
     }
 
-    // wrapper to check if preventForwardScrubbing is turned on.
-    if ((this.model.get('_preventForwardScrubbing')) && (!this.model.get('_isComplete'))) {
-      $(this.mediaElement).on({
-        seeking: this.onMediaElementSeeking,
-        timeupdate: this.onMediaElementTimeUpdate
-      });
-    }
+    this.preventForwardScrubbing();
 
     // handle other completion events in the event Listeners
     $(this.mediaElement).on({
@@ -521,6 +515,22 @@ class MediaView extends ComponentView {
     Adapt.trigger('media:transcript', 'complete', this);
   }
 
+  /**
+   * This function ensures that users cannot skip ahead in the media until they have watched it fully if `_preventForwardScrubbing` is enabled.
+   */
+  preventForwardScrubbing() {
+    if (!this.model.get('_preventForwardScrubbing') || this.model.get('_isComplete')) return;
+    $(this.mediaElement).on({
+      seeking: this.onMediaElementSeeking,
+      timeupdate: this.onMediaElementTimeUpdate
+    });
+    const timeSlider = this.$('.mejs__time-slider')[0];
+    if (!timeSlider) return;
+    timeSlider.style.pointerEvents = 'none';
+    timeSlider.addEventListener('input', (e) => e.preventDefault());
+    timeSlider.setAttribute('aria-disabled', 'true');
+  }
+
   /**
    * Queue firing a media event to prevent simultaneous events firing, and provide a better indication of how the
    * media  player is behaving