feat(FEC-9649): loading external CSS (#329)

In UIWrapper constructor we check if the ui config has a css url provided.
If so we load it and append it to the doc header

src/common/ui-wrapper.js

@@ -3,7 +3,14 @@ import {UIManager} from '@playkit-js/playkit-js-ui';
 import {Env, Utils} from '@playkit-js/playkit-js';
 import {DEFAULT_THUMBS_SLICES, DEFAULT_THUMBS_WIDTH, getThumbSlicesUrl} from './utils/thumbs';
 import {KalturaPlayer} from '../kaltura-player';
+import getLogger from './utils/logger';
 
+/**
+ * The logger of the UIWrapper class.
+ * @private
+ * @const
+ */
+const logger = getLogger('UIWrapper');
 class UIWrapper {
   _uiManager: UIManager;
   _disabled: boolean = false;
@@ -22,6 +29,7 @@ class UIWrapper {
         this._uiManager.buildDefaultUI();
       }
       this._handleVr(options.plugins);
+      this._handleExternalCSS(config);
     }
     return new Proxy(this, {
       get: (uiw: UIWrapper, prop: string) => {
@@ -58,6 +66,19 @@ class UIWrapper {
     this.setConfig({show: show}, 'loading');
   }
 
+  _handleExternalCSS(config: UIOptionsObject): void {
+    if (config.css) {
+      Utils.Dom.loadStyleSheetAsync(config.css).then(
+        () => {
+          logger.debug(`external css was loaded successfully`);
+        },
+        () => {
+          logger.error(`external css failed to load`);
+        }
+      );
+    }
+  }
+
   _handleVr(config: PKPluginsConfigObject = {}): void {
     if (config.vr && !config.vr.disable) {
       this._setStereoConfig(config.vr);