feat(FEC-8084): add loading spinner while preforming change media (#106)

Before calling the provider to get the media config, update the loading spinner state of the ui manager using the setConfig API.
Also, moved all UI logic to ui-actions file.

src/common/utils/setup-helpers.js

@@ -1,7 +1,6 @@
 // @flow
 import {setDefaultAnalyticsPlugin} from 'player-defaults'
 import {Utils, TextStyle, Env} from 'playkit-js'
-import {UIManager} from 'playkit-js-ui'
 import {ValidationErrorType} from './validation-error'
 import StorageManager from '../storage/storage-manager'
 import {setLogLevel as _setLogLevel, LogLevel} from './logger'
@@ -148,18 +147,6 @@ function getUrlParameter(name: string) {
   return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
 }
 
-/**
- * Sets the media info on error component to the "retry" functionality.
- * @param {UIManager} uiManager - The ui manager.
- * @param {ProviderMediaInfoObject} mediaInfo - The media info.
- * @returns {void}
- */
-function setUIErrorOverlayConfig(uiManager: UIManager, mediaInfo: ProviderMediaInfoObject): void {
-  uiManager.setConfig({
-    mediaInfo: mediaInfo
-  }, "error");
-}
-
 /**
  * Checks if the server UIConf exist
  * @param {number} uiConfId - The server UIConf
@@ -279,7 +266,6 @@ export {
   createKalturaPlayerContainer,
   checkNativeHlsSupport,
   getDefaultOptions,
-  setUIErrorOverlayConfig,
   isSafari,
   isIos
 };

src/common/utils/ui-actions.js

@@ -0,0 +1,28 @@
+// @flow
+import {UIManager} from 'playkit-js-ui'
+
+/**
+ * Sets the media info on error component to the "retry" functionality.
+ * @param {UIManager} uiManager - The ui manager.
+ * @param {ProviderMediaInfoObject} mediaInfo - The media info.
+ * @returns {void}
+ */
+function setUIErrorOverlayConfig(uiManager: UIManager, mediaInfo: ProviderMediaInfoObject): void {
+  uiManager.setConfig({
+    mediaInfo: mediaInfo
+  }, 'error');
+}
+
+/**
+ * Sets the loading spinner state.
+ * @param {UIManager} uiManager - The ui manager.
+ * @param {boolean} show - The spinner state.
+ * @returns {void}
+ */
+function setUILoadingSpinnerState(uiManager: UIManager, show: boolean): void {
+  uiManager.setConfig({
+    show: show
+  }, 'loading');
+}
+
+export {setUIErrorOverlayConfig, setUILoadingSpinnerState};

src/kaltura-player.js

@@ -4,7 +4,7 @@ import {UIManager} from 'playkit-js-ui'
 import {Provider} from 'playkit-js-providers'
 import getLogger from './common/utils/logger'
 import {addKalturaParams} from './common/utils/kaltura-params'
-import {setUIErrorOverlayConfig} from './common/utils/setup-helpers'
+import {setUIErrorOverlayConfig, setUILoadingSpinnerState} from './common/utils/ui-actions'
 import {evaluatePluginsConfig} from './common/plugins/plugins-config'
 import {addKalturaPoster, setUISeekbarConfig} from 'poster-and-thumbs'
 import './assets/style.css'
@@ -48,6 +48,7 @@ export default class KalturaPlayer {
     this._logger.debug('loadMedia', mediaInfo);
     this._player.reset();
     this._player.loadingMedia = true;
+    setUILoadingSpinnerState(this._uiManager, true);
     setUIErrorOverlayConfig(this._uiManager, mediaInfo);
     return this._provider.getMediaConfig(mediaInfo)
       .then(mediaConfig => this.setMedia(mediaConfig))