feat: set ui seekbar config (#59)

Set ui seek bar config via kaltura player.
For now it's done only internally with default params.
After the refactor of kaltura player we will expose it to user config.

Added a mini-service for thumbnail handling which can be extended easily.

karma.conf.js

@@ -48,7 +48,7 @@ module.exports = function (config) {
     },
     client: {
       mocha: {
-        timeout: 2000,
+        timeout: 5000,
         reporter: 'html'
       }
     }

src/kaltura-player.js

@@ -4,7 +4,7 @@ import PlaykitUI from 'playkit-js-ui'
 import OvpProvider from 'playkit-js-providers/dist/ovpProvider'
 import getLogger from './utils/logger'
 import {addKalturaParams} from './utils/kaltura-params'
-import {addKalturaPoster} from './utils/setup-helpers'
+import {addKalturaPoster, setUISeekbarConfig} from './utils/setup-helpers'
 import {evaluatePluginsConfig} from './plugins/plugins-config'
 import './assets/style.css'
 
@@ -30,6 +30,7 @@ export default class KalturaPlayer {
     return this._provider.getConfig(entryId, uiConfId)
       .then((data) => {
         const dimensions = this._player.dimensions;
+        setUISeekbarConfig(data, this._uiManager);
         addKalturaPoster(data.metadata, dimensions.width, dimensions.height);
         addKalturaParams(data.sources, this._player);
         Utils.Object.mergeDeep(data.plugins, this._player.config.plugins);

src/utils/setup-helpers.js

@@ -1,8 +1,10 @@
 // @flow
 import {Env, Utils, TextStyle} from 'playkit-js'
+import PlaykitUI from 'playkit-js-ui'
 import {ValidationErrorType} from './validation-error'
 import StorageManager from '../storage/storage-manager'
 import {setLogLevel as _setLogLevel, LogLevel} from './logger'
+import {DEFAULT_THUMBS_SLICES, DEFAULT_THUMBS_WIDTH, getThumbSlicesUrl} from './thumbs'
 import type LogLevelType from './logger'
 
 const CONTAINER_CLASS_NAME: string = 'kaltura-player-container';
@@ -259,11 +261,25 @@ function setLogLevel(options: Object): void {
  */
 function getUrlParameter(name: string) {
   name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
-  var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
-  var results = regex.exec(location.search);
+  const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+  const results = regex.exec(location.search);
   return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
 }
 
+/**
+ * Sets the preview thumbnail config for the ui seekbar component.
+ * @param {Object} data - The provider data.
+ * @param {PlaykitUI} uiManager - The ui manager.
+ * @returns {void}
+ */
+function setUISeekbarConfig(data: Object, uiManager: PlaykitUI): void {
+  uiManager.setConfig({
+    thumbsSprite: getThumbSlicesUrl(data),
+    thumbsWidth: DEFAULT_THUMBS_WIDTH,
+    thumbsSlices: DEFAULT_THUMBS_SLICES
+  }, "seekbar");
+}
+
 export {
   setStorageConfig,
   applyStorageSupport,
@@ -279,5 +295,6 @@ export {
   checkNativeTextTracksSupport,
   isSafari,
   isIos,
-  setLogLevel
+  setLogLevel,
+  setUISeekbarConfig
 };

src/utils/thumbs.js

@@ -0,0 +1,26 @@
+// @flow
+import evaluate from './evaluate'
+
+export const DEFAULT_THUMBS_WIDTH: number = 164;
+export const DEFAULT_THUMBS_SLICES: number = 100;
+const TEMPLATE: string = '{{thumbnailUrl}}/width/{{width}}/vid_slices/{{slices}}/ks/{{ks}}';
+
+/**
+ * Builds thumbnail slices url for the ui.
+ * @param {Object} data - The prover data.
+ * @param {Object} uiConfig - The ui config.
+ * @returns {string} - The thumbnail slices url.
+ */
+export function getThumbSlicesUrl(data: Object, uiConfig: Object = {}): string {
+  try {
+    const model: Object = {
+      thumbnailUrl: data.metadata.poster,
+      ks: data.session.ks,
+      width: uiConfig.thumbsWidth || DEFAULT_THUMBS_WIDTH,
+      slices: uiConfig.thumbsSlices || DEFAULT_THUMBS_SLICES,
+    };
+    return evaluate(TEMPLATE, model);
+  } catch (e) {
+    return '';
+  }
+}

test/src/utils/thumbs.spec.js

@@ -0,0 +1,29 @@
+import {getThumbSlicesUrl} from '../../../src/utils/thumbs'
+
+describe('getThumbSlicesUrl', function () {
+  const fakeData = {
+    metadata: {
+      poster: "//my-thumb-service.com/p/1/entry_id/2/version/3"
+    },
+    session: {
+      ks: "my-ks"
+    }
+  };
+
+  const fakeUIConfig = {
+    thumbsSlices: 200,
+    thumbsWidth: 100
+  };
+
+  it('should get thumbnail slices url with default params', function () {
+    getThumbSlicesUrl(fakeData).should.equals(
+      `${fakeData.metadata.poster}/width/164/vid_slices/100/ks/${fakeData.session.ks}`
+    );
+  });
+
+  it('should get thumbnail slices url with the custom params', function () {
+    getThumbSlicesUrl(fakeData, fakeUIConfig).should.equals(
+      `${fakeData.metadata.poster}/width/100/vid_slices/200/ks/${fakeData.session.ks}`
+    );
+  });
+});