feat(FEC-10941): Use In-Stream DASH thumbnails on the timeline (#583)

docs/configuration.md

@@ -189,50 +189,6 @@ var uiManager = new playkit.ui.UIManager(player, config);
 > >
 > > ##
 > >
-> > ### config.components.seekbar
-> >
-> > ##### Type: `Object`
-> >
-> > ```js
-> > {
-> >    thumbsSprite: string,
-> >    thumbsWidth: number,
-> >    thumbsSlices: number
-> > }
-> > ```
-> >
-> > ##### Description: Defines the seekbar component optional configuration.
-> >
-> > > ### config.components.seekbar.thumbsSprite
-> > >
-> > > ##### Type: `string`
-> > >
-> > > ##### Default: `-`
-> > >
-> > > ##### Description: The URL for the preview thumbnail image.
-> > >
-> > > ##
-> > >
-> > > ### config.components.seekbar.thumbsWidth
-> > >
-> > > ##### Type: `number`
-> > >
-> > > ##### Default: `-`
-> > >
-> > > ##### Description: The width of each preview thumbnail slice.
-> > >
-> > > ##
-> > >
-> > > ### config.components.watermark.thumbsSlices
-> > >
-> > > ##### Type: `number`
-> > >
-> > > ##### Default: `-`
-> > >
-> > > ##### Description: The amount of slices that the preview thumbnail image will divided into.
-> >
-> > ##
-> >
 > > ### config.components.fullscreen
 > >
 > > ##### Type: `Object`

src/components/seekbar-live-playback-container/seekbar-live-playback-container.js

@@ -54,6 +54,15 @@ class SeekBarLivePlaybackContainer extends Component {
     });
   }
 
+  /**
+   *
+   * @returns {number} - the currentTime of the video to show
+   * @memberof SeekBarLivePlaybackContainer
+   */
+  get currentTime(): number {
+    return Math.min(this.props.currentTime, this.props.duration);
+  }
+
   /**
    * render component
    *
@@ -71,8 +80,8 @@ class SeekBarLivePlaybackContainer extends Component {
         showFramePreview={this.props.showFramePreview}
         showTimeBubble={this.props.showTimeBubble}
         changeCurrentTime={time => {
-          // avoiding exiting live edge by mistake in case currenttime is just a bit smaller than duration
-          if (!(this.props.player.isOnLiveEdge() && time === this.duration)) {
+          // avoiding exiting live edge by mistake in case currentTime is just a bit smaller than duration
+          if (!(this.props.player.isOnLiveEdge() && time === this.props.duration)) {
             this.props.player.currentTime = time;
           }
         }}
@@ -83,24 +92,15 @@ class SeekBarLivePlaybackContainer extends Component {
         updateCurrentTime={data => this.props.updateCurrentTime(data)}
         updateVirtualTime={data => this.props.updateVirtualTime(data)}
         isDvr={this.props.isDvr}
-        currentTime={this.props.currentTime}
+        currentTime={this.currentTime}
         virtualTime={this.props.virtualTime}
-        duration={this.duration}
+        duration={this.props.duration}
         isDraggingActive={this.props.isDraggingActive}
         isMobile={this.props.isMobile}
         notifyChange={payload => this.props.notifyChange(payload)}
       />
     );
   }
-
-  /**
-   *
-   * @returns {number} - the duration of the video to show
-   * @memberof SeekBarLivePlaybackContainer
-   */
-  get duration(): number {
-    return this.props.player.isOnLiveEdge() ? this.props.currentTime : Math.max(this.props.duration, this.props.currentTime);
-  }
 }
 
 SeekBarLivePlaybackContainer.displayName = COMPONENT_NAME;

src/components/seekbar-preview/seekbar-preview.js

@@ -2,6 +2,9 @@
 import style from '../../styles/style.scss';
 import {h, Component} from 'preact';
 import {connect} from 'react-redux';
+import {withPlayer} from 'components';
+
+const FRAME_PREVIEW_IMG_CONTAINER_OFFSET: number = 4;
 
 /**
  * mapping state to props
@@ -18,41 +21,47 @@ const mapStateToProps = state => ({
  * @class SeekBarPreview
  * @extends {Component}
  */
+@withPlayer
 @connect(mapStateToProps)
 class SeekBarPreview extends Component {
   /**
-   * utility function to get the thumb sprite background position
-   * @returns {string} background-position string value
+   * Gets the style of the frame preview image.
+   * @param {Object} thumbnailInfo  - The thumbnail info data.
+   * @returns {string} - The css style string.
+   * @private
    */
-  getThumbSpriteOffset(): string {
-    const percent = this.props.virtualTime / this.props.duration;
-    const sliceIndex = Math.ceil(this.props.thumbsSlices * percent);
-    return -(sliceIndex * this.props.thumbsWidth) + 'px 0px';
+  _getFramePreviewImgStyle(thumbnailInfo: Object): string {
+    let framePreviewImgStyle = `background: url(${thumbnailInfo.url});`;
+    framePreviewImgStyle += `background-position: -${thumbnailInfo.x}px -${thumbnailInfo.y}px;`;
+    return framePreviewImgStyle;
   }
 
   /**
-   * Gets the style of the frame preview image.
-   * @returns {string} - The css style string.
+   * Gets the style of the frame preview image container.
+   * @param {Object} thumbnailInfo  - The thumbnail info data.
+   * @returns {Object} - The css object style.
    * @private
    */
-  _getFramePreviewImgStyle(): string {
-    let framePreviewImgStyle = `background-image: url(${this.props.thumbsSprite});`;
-    framePreviewImgStyle += `background-position: ${this.getThumbSpriteOffset()};`;
-    framePreviewImgStyle += `background-size: ${this.props.thumbsSlices * this.props.thumbsWidth}px 100%;`;
-    return framePreviewImgStyle;
+  _getFramePreviewImgContainerStyle(thumbnailInfo: Object): Object {
+    return {
+      height: `${thumbnailInfo.height + FRAME_PREVIEW_IMG_CONTAINER_OFFSET}px`,
+      width: `${thumbnailInfo.width + FRAME_PREVIEW_IMG_CONTAINER_OFFSET}px`
+    };
   }
 
   /**
    * render component
    * @returns {React$Element} - component element
    */
   render() {
-    if (!this.props.thumbsSprite || !this.props.thumbsSlices || !this.props.thumbsWidth) return undefined;
-    return (
-      <div className={[style.framePreviewImgContainer, style.nonSticky].join(' ')}>
-        <div className={style.framePreviewImg} style={this._getFramePreviewImgStyle()} />
-      </div>
-    );
+    const thumbnailInfo = this.props.player.getThumbnail(this.props.virtualTime);
+    if (thumbnailInfo) {
+      return (
+        <div style={this._getFramePreviewImgContainerStyle(thumbnailInfo)} className={[style.framePreviewImgContainer, style.nonSticky].join(' ')}>
+          <div className={style.framePreviewImg} style={this._getFramePreviewImgStyle(thumbnailInfo)} />
+        </div>
+      );
+    }
   }
 }
 

src/components/seekbar-preview/seekbar-preview.scss

@@ -1,9 +1,5 @@
-@import '~styles/variables';
-
 .frame-preview {
   .frame-preview-img-container {
-    height: $frame-preview-img-height + 4px;
-    width: $frame-preview-img-width + 4px;
     border: 2px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px;
 

src/components/seekbar/seekbar.js

@@ -513,12 +513,7 @@ class SeekBar extends Component {
         className={this.props.hidePreview ? [style.framePreview, style.hideFramePreview].join(' ') : style.framePreview}
         style={this._getFramePreviewStyle()}
         ref={c => (c ? (this._framePreviewElement = c) : undefined)}>
-        <SeekBarPreview
-          virtualTime={this.props.virtualTime}
-          thumbsSlices={this.props.config.thumbsSlices}
-          thumbsWidth={this.props.config.thumbsWidth}
-          thumbsSprite={this.props.config.thumbsSprite}
-        />
+        <SeekBarPreview virtualTime={this.props.virtualTime} />
       </div>
     );
   }
@@ -530,8 +525,7 @@ class SeekBar extends Component {
    * @private
    */
   _getFramePreviewStyle(): string {
-    let framePreviewStyle = `left: ${this.getFramePreviewOffset()}px;`;
-    return framePreviewStyle;
+    return `left: ${this.getFramePreviewOffset()}px;`;
   }
 
   /**

src/styles/_variables.scss

@@ -26,15 +26,11 @@ $spinner-colors: rgb(218, 31, 38), rgb(6, 168, 133), rgb(0, 147, 68), rgb(248, 1
   rgb(252, 210, 3);
 $default-transition-time: 500;
 $default-hovering-offset: 60px;
-$frame-preview-img-width: 160;
-$frame-preview-img-height: 90;
 
 :export {
   brandColor: $brand-color;
   white: $white;
   progressBarHeight: $progress-bar-height;
   progressBarBorderRadius: $progress-bar-border-radius;
-  framePreviewImgWidth: $frame-preview-img-width;
-  framePreviewImgHeight: $frame-preview-img-height;
   defaultTransitionTime: $default-transition-time;
 }