feat: storage refactor (#33)

karma.conf.js

@@ -1,3 +1,6 @@
+const webpack = require("webpack");
+const packageData = require("./package.json");
+
 const isWindows = /^win/.test(process.platform);
 const isMacOS = /^darwin/.test(process.platform);
 // Create custom launcher in case running with Travis
@@ -39,6 +42,13 @@ module.exports = function (config) {
       'coverage'
     ],
     webpack: {
+      plugins: [
+        new webpack.DefinePlugin({
+          __VERSION__: JSON.stringify(packageData.version),
+          __NAME__: JSON.stringify(packageData.name),
+          __PACKAGE_URL__: JSON.stringify(packageData.repository.url)
+        })
+      ],
       devtool: 'inline-source-map',
       module: {
         rules: [{

src/index.js

@@ -4,9 +4,9 @@ import PolyfillManager from './polyfills/polyfill-manager'
 import './polyfills/all'
 import LoggerFactory from './utils/logger'
 
-declare var __VERSION__:string;
-declare var __NAME__:string;
-declare var __PACKAGE_URL__:string;
+declare var __VERSION__: string;
+declare var __NAME__: string;
+declare var __PACKAGE_URL__: string;
 
 LoggerFactory.getLogger().log(`%c ${__NAME__} ${__VERSION__}`, "color: #98ff98;  font-size: large");
 LoggerFactory.getLogger().log(`%c For more details see ${__PACKAGE_URL__}`, "color: #98ff98;");

src/kaltura-player.js

@@ -28,14 +28,10 @@ export default class KalturaPlayer {
     this._logger.debug('loadMedia', {entryId: entryId, uiConfId: uiConfId});
     return this._provider.getConfig(entryId, uiConfId)
       .then((data) => {
-        let playerConfig = {};
         const dimensions = this._player.dimensions;
         addKalturaPoster(data.metadata, dimensions.width, dimensions.height);
         addKalturaParams(data.sources, this._player);
-        Utils.Object.mergeDeep(playerConfig, this._player.config, data);
-        this._player.configure(playerConfig);
+        this._player.configure(data);
       });
   }
 }
-
-

src/setup.js

@@ -1,14 +1,15 @@
 // @flow
-import {loadPlayer, Utils} from 'playkit-js'
+import {loadPlayer} from 'playkit-js'
 import KalturaPlayer from './kaltura-player'
-import StorageManager from './storage/storage-manager'
 import {
   extractPlayerConfig,
   extractProvidersConfig,
   createKalturaPlayerContainer,
   validateTargetId,
   validateProvidersConfig,
-  checkNativeHlsSupport
+  checkNativeHlsSupport,
+  setStorageConfig,
+  applyStorageSupport
 } from "./utils/setup-helpers"
 
 /**
@@ -23,19 +24,11 @@ function setup(targetId: string, options: Object): KalturaPlayer {
   let userProvidersConfig = extractProvidersConfig(options);
   let containerId = createKalturaPlayerContainer(targetId);
   checkNativeHlsSupport(userPlayerConfig);
+  setStorageConfig(options.disableUserCache, userPlayerConfig);
   let player = loadPlayer(userPlayerConfig);
   let kalturaPlayerApi = new KalturaPlayer(player, containerId, userProvidersConfig);
   let kalturaPlayer = Object.assign(player, kalturaPlayerApi);
-  if (StorageManager.isLocalStorageAvailable()) {
-    let storageManager = new StorageManager();
-    storageManager.attach(kalturaPlayer);
-    if (!options.disableUserCache && storageManager.hasStorage()) {
-      let storageConfig = storageManager.getStorage();
-      let storageAndUserPlayerConfig = {};
-      Utils.Object.mergeDeep(storageAndUserPlayerConfig, storageConfig, userPlayerConfig);
-      kalturaPlayer.configure(storageAndUserPlayerConfig);
-    }
-  }
+  applyStorageSupport(kalturaPlayer);
   return kalturaPlayer;
 }
 

src/storage/storage-manager.js

@@ -1,9 +1,6 @@
 // @flow
 import StorageWrapper from './storage-wrapper'
 import LoggerFactory from '../utils/logger'
-import {name} from '../../package.json'
-
-const STORAGE_PREFIX = name + '_';
 
 export default class StorageManager {
   static StorageKeys = [
@@ -12,47 +9,45 @@ export default class StorageManager {
     'textLanguage',
     'audioLanguage'
   ];
-  _storage: StorageWrapper;
-  _player: Player;
-  _logger: any;
+  static _logger: any = LoggerFactory.getLogger('StorageManager');
+  static _player: Player;
 
   static isLocalStorageAvailable(): boolean {
     return StorageWrapper.isLocalStorageAvailable();
   }
 
-  constructor() {
-    this._storage = new StorageWrapper(STORAGE_PREFIX);
-    this._logger = LoggerFactory.getLogger('StorageManager');
-  }
-
   /**
    * Attaches the player listeners to the local storage wrapper.
    * @param {Player} player - The player reference.
+   * @static
+   * @public
    * @returns {void}
    */
-  attach(player: Player): void {
-    this._logger.debug('Attach local storage');
-    this._player = player;
-    this._player.addEventListener(player.Event.VOLUME_CHANGE, () => {
-      this._storage.setItem('muted', this._player.muted);
-      this._storage.setItem('volume', this._player.volume);
+  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);
     });
-    this._player.addEventListener(player.Event.AUDIO_TRACK_CHANGED, (event) => {
+    StorageManager._player.addEventListener(player.Event.AUDIO_TRACK_CHANGED, (event) => {
       let audioTrack = event.payload.selectedAudioTrack;
-      this._storage.setItem('audioLanguage', audioTrack.language);
+      StorageWrapper.setItem('audioLanguage', audioTrack.language);
     });
-    this._player.addEventListener(player.Event.TEXT_TRACK_CHANGED, (event) => {
+    StorageManager._player.addEventListener(player.Event.TEXT_TRACK_CHANGED, (event) => {
       let textTrack = event.payload.selectedTextTrack;
-      this._storage.setItem('textLanguage', textTrack.language);
+      StorageWrapper.setItem('textLanguage', textTrack.language);
     });
   }
 
   /**
    * Checks if we have previous storage.
+   * @public
+   * @static
    * @return {boolean} - Whether we have previous storage.
    */
-  hasStorage(): boolean {
-    let storageSize = this._storage.size;
+  static hasStorage(): boolean {
+    let storageSize = StorageWrapper.size;
     let hasStorage = (storageSize !== 0);
     if (hasStorage) {
       this._logger.debug('Storage found with size of ', storageSize);
@@ -64,28 +59,30 @@ export default class StorageManager {
 
   /**
    * Gets the storage in the structure of the player configuration.
+   * @public
+   * @static
    * @return {Object} - Partial storageable player configuration.
    */
-  getStorage(): Object {
-    let values = this._getExistingValues();
-    let storageConfig = this._buildStorageConfig(values);
+  static getStorage(): Object {
+    let values = StorageManager._getExistingValues();
+    let storageConfig = StorageManager._buildStorageConfig(values);
     this._logger.debug('Gets storage config', storageConfig);
     return storageConfig;
   }
 
-  _getExistingValues(): Object {
+  static _getExistingValues(): Object {
     let obj = {};
     for (let i = 0; i < StorageManager.StorageKeys.length; i++) {
       let key = StorageManager.StorageKeys[i];
-      let value = this._storage.getItem(key);
+      let value = StorageWrapper.getItem(key);
       if (value != null) {
         obj[key] = value;
       }
     }
     return obj;
   }
 
-  _buildStorageConfig(values: Object): Object {
+  static _buildStorageConfig(values: Object): Object {
     return {
       playback: values
     };

src/storage/storage-wrapper.js

@@ -1,10 +1,17 @@
 // @flow
 import LoggerFactory from '../utils/logger'
+import {PLAYER_NAME} from '../index'
+
+const STORAGE_PREFIX = PLAYER_NAME + '_';
 
 export default class StorageWrapper {
-  _prefix: string;
-  _logger: any;
+  static _logger: any = LoggerFactory.getLogger('StorageWrapper');
 
+  /**
+   * @static
+   * @public
+   * @returns {boolean} - Whether a local storage object is available on the current environment.
+   */
   static isLocalStorageAvailable(): boolean {
     if (typeof Storage !== 'undefined') {
       try {
@@ -20,48 +27,49 @@ export default class StorageWrapper {
     }
   }
 
-  constructor(prefix: string = '') {
-    this._logger = LoggerFactory.getLogger('StorageWrapper');
-    this._prefix = prefix;
-  }
-
   /**
+   * @static
+   * @public
    * @return {number} - The number of keys in the local storage started with wanted prefix.
    */
-  get size(): number {
-    return Object.keys(localStorage).filter((key) => key.startsWith(this._prefix)).length;
+  static get size(): number {
+    return Object.keys(localStorage).filter((key) => key.startsWith(STORAGE_PREFIX)).length;
   }
 
   /**
    * Sets an item in the local storage.
    * @param {string} key - The key of the item.
    * @param {any} item - The value of the item.
+   * @static
+   * @public
    * @returns {void}
    */
-  setItem(key: string, item: any): void {
+  static setItem(key: string, item: any): void {
     StorageWrapper._validateKey(key);
     try {
-      this._logger.debug('Sets item for key: ' + key, item);
-      localStorage.setItem(this._prefix + key, item);
+      StorageWrapper._logger.debug('Sets item for key: ' + key, item);
+      localStorage.setItem(STORAGE_PREFIX + key, item);
     } catch (e) {
       if (StorageWrapper._isQuotaExceeded(e)) {
-        this._logger.error('Quota exceeded: ' + e.message);
+        StorageWrapper._logger.error('Quota exceeded: ' + e.message);
       } else {
-        this._logger.error(e.message);
+        StorageWrapper._logger.error(e.message);
       }
     }
   }
 
   /**
    * Gets an item from the local storage.
    * @param {string} key - The item key.
+   * @static
+   * @public
    * @returns {any} - The item value.
    */
-  getItem(key: string): any {
+  static getItem(key: string): any {
     StorageWrapper._validateKey(key);
     let item = null;
     try {
-      item = localStorage.getItem(this._prefix + key);
+      item = localStorage.getItem(STORAGE_PREFIX + key);
       if (typeof item === 'string') {
         return JSON.parse(item);
       } else {

src/utils/setup-helpers.js

@@ -1,6 +1,7 @@
 // @flow
 import {Env, Utils} from 'playkit-js'
 import {ValidationErrorType} from './validation-error'
+import StorageManager from '../storage/storage-manager'
 
 const CONTAINER_CLASS_NAME: string = 'kaltura-player-container';
 
@@ -113,6 +114,29 @@ function checkNativeHlsSupport(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()) {
+    Utils.Object.mergeDeep(playerConfig, StorageManager.getStorage());
+  }
+}
+
+/**
+ * Applies cache support if it's supported by the environment.
+ * @param {any} player - The Kaltura player.
+ * @returns {void}
+ */
+function applyStorageSupport(player: any): void {
+  if (StorageManager.isLocalStorageAvailable()) {
+    StorageManager.attach(player);
+  }
+}
+
 /**
  * Returns true if user agent indicate that browser is Safari
  * @returns {boolean} - if browser is Safari
@@ -130,6 +154,8 @@ function isIos(): boolean{
 }
 
 export {
+  setStorageConfig,
+  applyStorageSupport,
   extractPlayerConfig,
   extractProvidersConfig,
   createKalturaPlayerContainer,