New: Add new API to preview media player to play segments (#408)

box · Sep 26, 2017 · ef60e95 · ef60e95
1 parent 4cbfc0f
commit ef60e95
Show file tree

Hide file tree

Showing 3 changed files with 261 additions and 73 deletions.
diff --git a/src/lib/viewers/media/MediaBaseViewer.js b/src/lib/viewers/media/MediaBaseViewer.js
@@ -36,6 +36,7 @@ class MediaBaseViewer extends BaseViewer {
 
         this.loadTimeout = 100000;
         this.oldVolume = DEFAULT_VOLUME;
+        this.pauseListener = null;
     }
 
     /**
@@ -63,6 +64,7 @@ class MediaBaseViewer extends BaseViewer {
                 this.mediaEl.removeEventListener('loadeddata', this.loadeddataHandler);
                 this.mediaEl.removeEventListener('error', this.errorHandler);
 
+                this.removePauseEventListener();
                 this.mediaEl.removeAttribute('src');
                 this.mediaEl.load();
             }
@@ -235,6 +237,18 @@ class MediaBaseViewer extends BaseViewer {
         this.addEventListenersForMediaElement();
     }
 
+    /**
+     * Handles timeupdate event for MediaControls
+     *
+     * @private
+     * @param {number} time - Time in seconds
+     * @return {void}
+     */
+    handleTimeupdateFromMediaControls(time) {
+        this.removePauseEventListener();
+        this.setMediaTime(time);
+    }
+
     /**
      * Adds event listeners to the media controls.
      * Makes changes to the media element.
@@ -243,7 +257,7 @@ class MediaBaseViewer extends BaseViewer {
      * @return {void}
      */
     addEventListenersForMediaControls() {
-        this.mediaControls.addListener('timeupdate', this.setMediaTime);
+        this.mediaControls.addListener('timeupdate', this.handleTimeupdateFromMediaControls);
         this.mediaControls.addListener('volumeupdate', this.setVolume);
         this.mediaControls.addListener('toggleplayback', this.togglePlay);
         this.mediaControls.addListener('togglemute', this.toggleMute);
@@ -378,25 +392,93 @@ class MediaBaseViewer extends BaseViewer {
     }
 
     /**
-     * Toggle playback
+     * Removes pause event listener
+     *
+     * @private
+     * @return {void}
+     */
+    removePauseEventListener() {
+        if (this.mediaEl) {
+            this.mediaEl.removeEventListener('timeupdate', this.pauseListener);
+        }
+    }
+
+    /**
+     * Validates time parameter
      *
      * @private
+     * @param {number} time - time for media
+     * @return {boolean} - true if time is valid
+     */
+    isValidTime(time) {
+        return typeof time === 'number' && isFinite(time) && time >= 0 && time <= this.mediaEl.duration;
+    }
+
+    /**
+     * Play media, optionally from start time to end time
+     *
+     * @param {number} start - start time in seconds
+     * @param {number} end - end time in seconds
      * @emits play
-     * @emits pause
      * @return {void}
      */
-    togglePlay() {
-        if (this.mediaEl.paused) {
+    play(start, end) {
+        const hasValidStart = this.isValidTime(start);
+        const hasValidEnd = this.isValidTime(end);
+        this.removePauseEventListener();
+        if (hasValidStart) {
+            if (hasValidEnd && start < end) {
+                this.pause(end);
+            }
+            // Start playing media from <start> time
+            this.setMediaTime(start);
+        }
+        if (arguments.length === 0 || hasValidStart) {
             this.mediaEl.play();
             this.emit('play');
             this.handleRate();
             this.handleVolume();
+        }
+    }
+
+    /**
+     * Pause media
+     *
+     * @param {number} time - time at which media is paused
+     * @emits pause
+     * @return {void}
+     */
+    pause(time) {
+        const hasValidTime = this.isValidTime(time);
+        // Remove eventListener because segment completed playing or user paused manually
+        this.removePauseEventListener();
+        if (hasValidTime) {
+            this.pauseListener = () => {
+                if (this.mediaEl.currentTime > time) {
+                    this.pause();
+                }
+            };
+            this.mediaEl.addEventListener('timeupdate', this.pauseListener);
         } else {
             this.mediaEl.pause();
             this.emit('pause');
         }
     }
 
+    /**
+     * Toggle playback
+     *
+     * @private
+     * @return {void}
+     */
+    togglePlay() {
+        if (this.mediaEl.paused) {
+            this.play();
+        } else {
+            this.pause();
+        }
+    }
+
     /**
      * Toggle mute
      *
@@ -464,6 +546,7 @@ class MediaBaseViewer extends BaseViewer {
      */
     quickSeek(increment) {
         let newTime = this.mediaEl.currentTime + increment;
+        this.removePauseEventListener();
         // Make sure it's within bounds
         newTime = Math.max(0, Math.min(newTime, this.mediaEl.duration));
         this.setMediaTime(newTime);