feat(local-storage): store cvaa settings (#45)

src/setup.js

@@ -10,7 +10,8 @@ import {
   validateProvidersConfig,
   setDefaultPlayerConfig,
   setStorageConfig,
-  applyStorageSupport
+  applyStorageSupport,
+  setStorageTextStyle
 } from "./utils/setup-helpers"
 
 /**
@@ -26,10 +27,11 @@ function setup(targetId: string, options: Object): KalturaPlayer {
   let containerId = createKalturaPlayerContainer(targetId);
   setDefaultPlayerConfig(userPlayerConfig);
   evaluatePluginsConfig(userPlayerConfig);
-  setStorageConfig(options.disableUserCache, userPlayerConfig);
+  setStorageConfig(userPlayerConfig);
   let player = loadPlayer(userPlayerConfig);
   let kalturaPlayerApi = new KalturaPlayer(player, containerId, userProvidersConfig);
   let kalturaPlayer = Object.assign(player, kalturaPlayerApi);
+  setStorageTextStyle(kalturaPlayer);
   applyStorageSupport(kalturaPlayer);
   return kalturaPlayer;
 }

src/storage/storage-manager.js

@@ -1,16 +1,18 @@
 // @flow
 import StorageWrapper from './storage-wrapper'
 import LoggerFactory from '../utils/logger'
+import {Utils} from 'playkit-js'
 
 export default class StorageManager {
-  static StorageKeys = [
-    'muted',
-    'volume',
-    'textLanguage',
-    'audioLanguage'
-  ];
+  static StorageKeys: { [key: string]: string } = {
+    MUTED: 'muted',
+    VOLUME: 'volume',
+    AUDIO_LANG: 'audioLanguage',
+    TEXT_LANG: 'textLanguage',
+    TEXT_STYLE: 'textStyle'
+  };
+
   static _logger: any = LoggerFactory.getLogger('StorageManager');
-  static _player: Player;
 
   static isLocalStorageAvailable(): boolean {
     return StorageWrapper.isLocalStorageAvailable();
@@ -25,21 +27,40 @@ export default class StorageManager {
    */
   static attach(player: Player): void {
     StorageManager._logger.debug('Attach local storage');
-    StorageManager._player = player;
-    StorageManager._player.addEventListener(player.Event.VOLUME_CHANGE, () => {
-      StorageWrapper.setItem('muted', StorageManager._player.muted);
-      StorageWrapper.setItem('volume', StorageManager._player.volume);
+    player.addEventListener(player.Event.MUTE_CHANGE, () => {
+      StorageWrapper.setItem(StorageManager.StorageKeys.MUTED, player.muted);
+    });
+    player.addEventListener(player.Event.VOLUME_CHANGE, () => {
+      StorageWrapper.setItem(StorageManager.StorageKeys.VOLUME, player.volume);
     });
-    StorageManager._player.addEventListener(player.Event.AUDIO_TRACK_CHANGED, (event) => {
+    player.addEventListener(player.Event.AUDIO_TRACK_CHANGED, (event) => {
       const audioTrack = event.payload.selectedAudioTrack;
-      StorageWrapper.setItem('audioLanguage', audioTrack.language);
+      StorageWrapper.setItem(StorageManager.StorageKeys.AUDIO_LANG, audioTrack.language);
     });
-    StorageManager._player.addEventListener(player.Event.TEXT_TRACK_CHANGED, (event) => {
+    player.addEventListener(player.Event.TEXT_TRACK_CHANGED, (event) => {
       const textTrack = event.payload.selectedTextTrack;
-      StorageWrapper.setItem('textLanguage', textTrack.language);
+      StorageWrapper.setItem(StorageManager.StorageKeys.TEXT_LANG, textTrack.language);
+    });
+    player.addEventListener(player.Event.TEXT_STYLE_CHANGED, () => {
+      try {
+        const textStyle = JSON.stringify(player.textStyle);
+        StorageWrapper.setItem(StorageManager.StorageKeys.TEXT_STYLE, textStyle);
+      } catch (e) {
+        this._logger.error(e.message);
+      }
     });
   }
 
+  /**
+   * Gets the player text style from storage.
+   * @static
+   * @public
+   * @returns {?Object} - The stored text style object
+   */
+  static getPlayerTextStyle(): ?Object {
+    return StorageWrapper.getItem(StorageManager.StorageKeys.TEXT_STYLE);
+  }
+
   /**
    * Checks if we have previous storage.
    * @public
@@ -63,7 +84,7 @@ export default class StorageManager {
    * @static
    * @return {Object} - Partial storageable player configuration.
    */
-  static getStorage(): Object {
+  static getStorageConfig(): Object {
     let values = StorageManager._getExistingValues();
     let storageConfig = StorageManager._buildStorageConfig(values);
     this._logger.debug('Gets storage config', storageConfig);
@@ -72,19 +93,21 @@ export default class StorageManager {
 
   static _getExistingValues(): Object {
     let obj = {};
-    for (let i = 0; i < StorageManager.StorageKeys.length; i++) {
-      let key = StorageManager.StorageKeys[i];
-      let value = StorageWrapper.getItem(key);
-      if (value != null) {
-        obj[key] = value;
+    Object.keys(StorageManager.StorageKeys).forEach((key)=>{
+      let value = StorageManager.StorageKeys[key];
+      let item = StorageWrapper.getItem(value);
+      if (item != null) {
+        obj[value] = item;
       }
-    }
+    });
     return obj;
   }
 
   static _buildStorageConfig(values: Object): Object {
+    const storageConfig = Utils.Object.mergeDeep({}, values);
+    delete storageConfig.textStyle;
     return {
-      playback: values
+      playback: storageConfig
     };
   }
 }

src/utils/setup-helpers.js

@@ -1,5 +1,5 @@
 // @flow
-import {Env, Utils} from 'playkit-js'
+import {Env, Utils, TextStyle} from 'playkit-js'
 import {ValidationErrorType} from './validation-error'
 import StorageManager from '../storage/storage-manager'
 
@@ -144,15 +144,12 @@ function checkNativeTextTracksSupport(playerConfig: Object): void {
 
 /**
  * Sets the storage config on the player config if certain conditions are met.
- * @param {boolean} disableUserCache - Whether to disable the cache support.
  * @param {Object} playerConfig - The player configuration.
  * @returns {void}
  */
-function setStorageConfig(disableUserCache: boolean, playerConfig: Object): void {
-  if (!disableUserCache && StorageManager.isLocalStorageAvailable() && StorageManager.hasStorage()) {
-    const playerStorageConfig = {};
-    Utils.Object.mergeDeep(playerStorageConfig, StorageManager.getStorage(), playerConfig);
-    Utils.Object.mergeDeep(playerConfig, playerStorageConfig);
+function setStorageConfig(playerConfig: Object): void {
+  if (!playerConfig.disableUserCache && StorageManager.isLocalStorageAvailable() && StorageManager.hasStorage()) {
+    Utils.Object.mergeDeep(playerConfig, StorageManager.getStorageConfig());
   }
 }
 
@@ -167,6 +164,20 @@ function applyStorageSupport(player: any): void {
   }
 }
 
+/**
+ * Sets the player text style from storage.
+ * @param {any} player - The Kaltura player.
+ * @returns {void}
+ */
+function setStorageTextStyle(player: any): void {
+  if (StorageManager.isLocalStorageAvailable()) {
+    const textStyleObj = StorageManager.getPlayerTextStyle();
+    if (textStyleObj) {
+      player.textStyle = Utils.Object.mergeDeep(new TextStyle(), textStyleObj);
+    }
+  }
+}
+
 /**
  * Returns true if user agent indicate that browser is Safari
  * @returns {boolean} - if browser is Safari
@@ -186,6 +197,7 @@ function isIos(): boolean {
 export {
   setStorageConfig,
   applyStorageSupport,
+  setStorageTextStyle,
   extractPlayerConfig,
   extractProvidersConfig,
   createKalturaPlayerContainer,

test/src/setup.spec.js

@@ -1,24 +1,27 @@
 import {setup} from '../../src/setup'
 import * as TestUtils from 'playkit-js/test/src/utils/test-utils'
+import StorageWrapper from "../../src/storage/storage-wrapper";
 
 const targetId = 'player-placeholder_setup.spec';
 
 describe('setup', function () {
 
-  let providerConfig, kalturaPlayer;
+  let providerConfig, kalturaPlayer, sandbox;
 
   before(function () {
     TestUtils.createElement('DIV', targetId);
   });
 
   beforeEach(function () {
+    sandbox = sinon.sandbox.create();
     providerConfig = {
       partnerId: 2196781,
       entryId: '1_h14v9eug'
     };
   });
 
   afterEach(function () {
+    sandbox.restore();
     kalturaPlayer = null;
     TestUtils.removeVideoElementsFromTestPage();
   });
@@ -48,10 +51,19 @@ describe('setup', function () {
     kalturaPlayer.loadMedia.should.exist;
     kalturaPlayer.loadMedia(providerConfig.entryId)
       .then(() => {
+        kalturaPlayer.ready().then(()=>{
+          let sessionIdRegex = /playSessionId=((?:[a-z0-9]|-|:)*)/i;
+          sessionIdRegex.exec(kalturaPlayer.src)[1].should.equal(kalturaPlayer.config.session.id);
+          done();
+        });
         kalturaPlayer.load();
-        let sessionIdRegex = /playSessionId=((?:[a-z0-9]|-|:)*)/i;
-        sessionIdRegex.exec(kalturaPlayer.src)[1].should.equal(kalturaPlayer.config.session.id);
-        done();
       });
   });
+
+  it('should set text style from storage', function () {
+    let textStyle = {"fontSize":"20%","fontFamily":"sans-serif","fontColor":[14,15,0],"fontOpacity":0,"backgroundColor":[1,2,3],"backgroundOpacity":1,"fontEdge":[]};
+    sandbox.stub(StorageWrapper, 'getItem').withArgs('textStyle').returns(textStyle);
+    kalturaPlayer = setup(targetId, providerConfig);
+    kalturaPlayer.textStyle.should.deep.equal(textStyle);
+  });
 });

test/src/storage/storage-manager.spec.js

@@ -41,7 +41,7 @@ describe('StorageManager', function () {
       return 1;
     });
     sandbox.stub(StorageWrapper, 'getItem').withArgs('volume').returns(1);
-    StorageManager.getStorage().should.deep.equal({
+    StorageManager.getStorageConfig().should.deep.equal({
       playback: {
         volume: 1
       }
@@ -57,7 +57,7 @@ describe('StorageManager', function () {
     getItemStub.withArgs('muted').returns(false);
     getItemStub.withArgs('textLanguage').returns('heb');
     getItemStub.withArgs('audioLanguage').returns('eng');
-    StorageManager.getStorage().should.deep.equal({
+    StorageManager.getStorageConfig().should.deep.equal({
       playback: {
         volume: 0.5,
         muted: false,
@@ -74,20 +74,24 @@ describe('StorageManager', function () {
     let fakePlayer = {
       listeners: [],
       Event: {
+        MUTE_CHANGE: 'mutechange',
         VOLUME_CHANGE: 'volumechange',
         AUDIO_TRACK_CHANGED: 'audiotrackchanged',
-        TEXT_TRACK_CHANGED: 'texttrackchanged'
+        TEXT_TRACK_CHANGED: 'texttrackchanged',
+        TEXT_STYLE_CHANGED: 'textstylechanged'
       },
       addEventListener: function (eventName) {
         this.listeners.push(eventName);
       }
     };
     StorageManager.attach(fakePlayer);
-    fakePlayer.listeners.should.have.length.of(3);
+    fakePlayer.listeners.should.have.length.of(5);
     fakePlayer.listeners.should.deep.equal([
+      'mutechange',
       'volumechange',
       'audiotrackchanged',
-      'texttrackchanged'
+      'texttrackchanged',
+      'textstylechanged'
     ]);
   });
 });

test/src/utils/setup-helpers.spec.js

@@ -347,7 +347,7 @@ describe('setStorageConfig', function () {
     sandbox.restore();
   });
 
-  it('should merge the player and storage config with priority to the player config', function () {
+  it('should merge the player and storage config with priority to the storage config', function () {
     let playerConfig = {
       playback: {
         textLanguage: 'ita'
@@ -361,9 +361,9 @@ describe('setStorageConfig', function () {
     };
     sandbox.stub(StorageManager, 'isLocalStorageAvailable', () => true);
     sandbox.stub(StorageManager, 'hasStorage', () => true);
-    sandbox.stub(StorageManager, 'getStorage', () => storageConfig);
-    setStorageConfig(false, playerConfig);
-    playerConfig.playback.textLanguage.should.equal('ita');
+    sandbox.stub(StorageManager, 'getStorageConfig', () => storageConfig);
+    setStorageConfig(playerConfig);
+    playerConfig.playback.textLanguage.should.equal('eng');
     playerConfig.playback.audioLanguage.should.equal('fra');
   });
 
@@ -377,8 +377,8 @@ describe('setStorageConfig', function () {
     };
     sandbox.stub(StorageManager, 'isLocalStorageAvailable', () => true);
     sandbox.stub(StorageManager, 'hasStorage', () => true);
-    sandbox.stub(StorageManager, 'getStorage', () => storageConfig);
-    setStorageConfig(false, playerConfig);
+    sandbox.stub(StorageManager, 'getStorageConfig', () => storageConfig);
+    setStorageConfig(playerConfig);
     playerConfig.playback.textLanguage.should.equal('eng');
     playerConfig.playback.audioLanguage.should.equal('fra');
   });