feat: support external component config (#192)

Support to get external component config.
Save all the external configs in the config store.
Each component can map it's own config with mapStateToProps

src/components/error-overlay/error-overlay.js

@@ -15,6 +15,7 @@ import {actions} from "../../reducers/engine";
  * @returns {Object} - mapped state to this component
  */
 const mapStateToProps = state => ({
+  config: state.config.components.error,
   hasError: state.engine.hasError
 });
 

src/components/fullscreen/fullscreen.js

@@ -14,6 +14,7 @@ import {default as Icon, IconType} from '../icon';
  * @returns {Object} - mapped state to this component
  */
 const mapStateToProps = state => ({
+  targetId: state.config.targetId,
   fullscreen: state.fullscreen.fullscreen,
   isMobile: state.shell.isMobile
 });
@@ -34,7 +35,7 @@ class FullscreenControl extends BaseComponent {
    * @memberof FullscreenControl
    */
   constructor(obj: Object) {
-    super({name: 'Fullscreen', player: obj.player, config: obj.config});
+    super({name: 'Fullscreen', player: obj.player});
   }
 
   /**
@@ -104,7 +105,7 @@ class FullscreenControl extends BaseComponent {
     if (this.props.isMobile && this.player.env.os.name === 'iOS') {
       this.player.getView().getElementsByTagName('video')[0].webkitEnterFullscreen();
     } else {
-      let elementToFullscreen = document.getElementById(this.config.targetId);
+      let elementToFullscreen = document.getElementById(this.props.targetId);
       if (elementToFullscreen) {
         this.requestFullscreen(elementToFullscreen);
       }

src/components/seekbar-playback-container/seekbar-playback-container.js

@@ -35,7 +35,7 @@ class SeekBarPlaybackContainer extends BaseComponent {
    * @memberof SeekBarPlaybackContainer
    */
   constructor(obj: Object) {
-    super({name: 'SeekBarPlaybackContainer', player: obj.player, config: obj.config});
+    super({name: 'SeekBarPlaybackContainer', player: obj.player});
   }
 
   /**
@@ -75,9 +75,6 @@ class SeekBarPlaybackContainer extends BaseComponent {
         duration={this.props.duration}
         isDraggingActive={this.props.isDraggingActive}
         isMobile={this.props.isMobile}
-        thumbsSprite={this.props.config.thumbsSprite}
-        thumbsSlices={this.props.config.thumbsSlices}
-        thumbsWidth={this.props.config.thumbsWidth}
       />
     )
   }

src/components/seekbar/seekbar.js

@@ -3,28 +3,26 @@ import style from '../../styles/style.scss';
 import {h, Component} from 'preact';
 import {toHHMMSS} from '../../utils/time-format';
 import {KeyMap} from "../../utils/key-map";
+import {connect} from "preact-redux";
+import {bindActions} from "../../utils/bind-actions";
+import {actions} from "../../reducers/shell";
 
 /**
- * SeekBarControl component
- *
- * @class SeekBarControl
- * @example <SeekBarControl
- *  playerElement={this.player.getView().parentElement}
- *  showFramePreview={this.props.showFramePreview}
- *  showTimeBubble={this.props.showTimeBubble}
- *  changeCurrentTime={time => this.player.currentTime = time}
- *  thumbsSprite={this.config.thumbsSprite}
- *  thumbsSlices={this.config.thumbsSlices}
- *  thumbsWidth={this.config.thumbsWidth}
- *  updateSeekbarDraggingStatus={data => this.props.updateSeekbarDraggingStatus(data)}
- *  updateCurrentTime={data => this.props.updateCurrentTime(data)}
- *  currentTime={this.props.currentTime}
- *  duration={this.props.duration}
- *  isDraggingActive={this.props.isDraggingActive}
- *  isMobile={this.props.isMobile}
- * />
- * @extends {Component}
+ * mapping state to props
+ * @param {*} state - redux store state
+ * @returns {Object} - mapped state to this component
  */
+const mapStateToProps = state => ({
+  config: state.config.components.seekbar
+});
+
+@connect(mapStateToProps, bindActions(actions))
+  /**
+   * SeekBarControl component
+   *
+   * @class SeekBarControl
+   * @extends {Component}
+   */
 class SeekBarControl extends Component {
   state: Object;
   _seekBarElement: HTMLElement;
@@ -291,8 +289,8 @@ class SeekBarControl extends Component {
    */
   getThumbSpriteOffset(): string {
     const percent = this.state.virtualTime / this.props.duration;
-    const sliceIndex = Math.ceil(this.props.thumbsSlices * percent);
-    return -(sliceIndex * this.props.thumbsWidth) + 'px 0px';
+    const sliceIndex = Math.ceil(this.props.config.thumbsSlices * percent);
+    return -(sliceIndex * this.props.config.thumbsWidth) + 'px 0px';
   }
 
   /**
@@ -345,7 +343,7 @@ class SeekBarControl extends Component {
    */
   renderFramePreview(): React$Element<any> | void {
     if (
-      !this.props.thumbsSprite || !this.props.thumbsSlices || !this.props.thumbsWidth ||
+      !this.props.config.thumbsSprite || !this.props.config.thumbsSlices || !this.props.config.thumbsWidth ||
       !this.props.showFramePreview ||
       this.props.isMobile
     ) return undefined;
@@ -369,9 +367,9 @@ class SeekBarControl extends Component {
    * @private
    */
   _getFramePreviewImgStyle(): string {
-    let framePreviewImgStyle = `background-image: url(${this.props.thumbsSprite});`;
+    let framePreviewImgStyle = `background-image: url(${this.props.config.thumbsSprite});`;
     framePreviewImgStyle += `background-position: ${this.getThumbSpriteOffset()};`;
-    framePreviewImgStyle += `background-size: ${this.props.thumbsSlices * this.props.thumbsWidth}px 100%;`;
+    framePreviewImgStyle += `background-size: ${this.props.config.thumbsSlices * this.props.config.thumbsWidth}px 100%;`;
     return framePreviewImgStyle;
   }
 
@@ -383,7 +381,7 @@ class SeekBarControl extends Component {
    */
   _getFramePreviewStyle(): string {
     let framePreviewStyle = `left: ${this.getFramePreviewOffset()}px;`;
-    framePreviewStyle += `width: ${this.props.thumbsWidth}px;`;
+    framePreviewStyle += `width: ${this.props.config.thumbsWidth}px;`;
     return framePreviewStyle;
   }
 

src/components/shell/shell.js

@@ -14,7 +14,7 @@ import {KeyMap} from "../../utils/key-map";
  */
 const mapStateToProps = state => ({
   targetId: state.config.targetId,
-  config: state.config.ui.shell,
+  forceTouchUI: state.config.forceTouchUI,
   metadataLoaded: state.engine.metadataLoaded,
   currentState: state.engine.playerState.currentState,
   playerClasses: state.shell.playerClasses,
@@ -174,7 +174,7 @@ class Shell extends BaseComponent {
    * @memberof Shell
    */
   componentDidMount() {
-    this.props.updateIsMobile(!!this.player.env.device.type || this.props.config.forceTouchUI);
+    this.props.updateIsMobile(!!this.player.env.device.type || this.props.forceTouchUI);
     if (document.body) {
       this.props.updateDocumentWidth(document.body.clientWidth);
     }

src/reducers/config.js

@@ -8,10 +8,11 @@ export const types = {
 };
 
 export const initialState = {
-  ui: {
+  forceTouchUI: false,
+  components: {
+    watermark: {},
     seekbar: {},
-    shell: {},
-    errorOverlay: {}
+    error: {}
   }
 };
 
@@ -27,9 +28,9 @@ export default (state: Object = initialState, action: Object) => {
     case types.UPDATE_COMPONENT: {
       return {
         ...state,
-        ui: {
-          ...state.ui,
-          [action.componentAlias]: Utils.Object.mergeDeep(state.ui[action.componentAlias], action.config)
+        components: {
+          ...state.components,
+          [action.componentAlias]: Utils.Object.mergeDeep(state.components[action.componentAlias], action.config)
         }
       };
     }

src/ui-manager.js

@@ -60,6 +60,7 @@ export default class UIManager {
       name: `playkit #${this.targetId}`,
       instanceId: this.targetId
     }));
+    this.setConfig(config);
   }
 
   /**
@@ -74,7 +75,7 @@ export default class UIManager {
     if (componentAlias) {
       this.store.dispatch(actions.updateComponentConfig(componentAlias, config));
     } else {
-      this.store.dispatch(actions.updateConfig({targetId: this.targetId, ...config}));
+      this.store.dispatch(actions.updateConfig(config));
     }
   }
 

src/ui-presets/ads.js

@@ -63,7 +63,7 @@ export default function adsUI(props: any): ?React$Element<any> {
           </div>
           <div className={style.rightControls}>
             <VolumeControl player={props.player}/>
-            <FullscreenControl player={props.player} config={props.config}/>
+            <FullscreenControl player={props.player}/>
           </div>
         </BottomBar>
       </div>

src/ui-presets/error.js

@@ -2,7 +2,6 @@
 import style from '../styles/style.scss';
 import {h} from 'preact';
 import ErrorOverlay from '../components/error-overlay';
-import getComponentConfig from '../utils/component-config';
 
 /**
  * Error ui
@@ -14,9 +13,7 @@ import getComponentConfig from '../utils/component-config';
 export default function errorUI(props: any): React$Element<any> {
   return (
     <div className={style.playbackGuiWWrapper}>
-      <ErrorOverlay config={getComponentConfig(props.config, 'errorOverlay')}
-                    player={props.player}
-                    updateHasError={hasError => props.updateHasError(hasError)}/>
+      <ErrorOverlay player={props.player}/>
     </div>
   )
 }

src/ui-presets/live.js

@@ -15,7 +15,6 @@ import OverlayPortal from '../components/overlay-portal';
 import KeyboardControl from '../components/keyboard';
 import LiveTag from '../components/live-tag';
 import UnmuteIndication from '../components/unmute-indication';
-import getComponentConfig from '../utils/component-config';
 
 /**
  * Live ui intrface
@@ -38,8 +37,7 @@ export default function liveUI(props: any): React$Element<any> {
             showFramePreview
             showTimeBubble
             player={props.player}
-            playerContainer={props.playerContainer}
-            config={getComponentConfig(props.config, 'seekbar')}/>
+            playerContainer={props.playerContainer}/>
           <div className={style.leftControls}>
             <PlayPauseControl player={props.player}/>
             <LiveTag player={props.player}/>
@@ -48,7 +46,7 @@ export default function liveUI(props: any): React$Element<any> {
             <VolumeControl player={props.player}/>
             <LanguageControl player={props.player}/>
             <SettingsControl player={props.player}/>
-            <FullscreenControl player={props.player} config={props.config}/>
+            <FullscreenControl player={props.player}/>
           </div>
         </BottomBar>
       </div>

src/ui-presets/playback.js

@@ -1,7 +1,6 @@
 //@flow
 import style from '../styles/style.scss';
 import {h} from 'preact';
-import getComponentConfig from '../utils/component-config';
 import OverlayAction from '../components/overlay-action';
 import PrePlaybackPlayOverlay from '../components/pre-playback-play-overlay';
 import Loading from '../components/loading';
@@ -38,8 +37,7 @@ export default function playbackUI(props: any): React$Element<any> {
           <SeekBarPlaybackContainer showFramePreview
                                     showTimeBubble
                                     player={props.player}
-                                    playerContainer={props.playerContainer}
-                                    config={getComponentConfig(props.config, 'seekbar')}/>
+                                    playerContainer={props.playerContainer}/>
           <div className={style.leftControls}>
             <PlayPauseControl player={props.player}/>
             <RewindControl player={props.player} step={10}/>
@@ -49,7 +47,7 @@ export default function playbackUI(props: any): React$Element<any> {
             <VolumeControl player={props.player}/>
             <LanguageControl player={props.player}/>
             <SettingsControl player={props.player}/>
-            <FullscreenControl player={props.player} config={props.config}/>
+            <FullscreenControl player={props.player}/>
           </div>
         </BottomBar>
       </div>

src/utils/component-config.js

@@ -8,9 +8,9 @@
  */
 function getComponentConfig(config: any, alias: string): Object {
   try {
-    return config.ui[alias];
+    return config.components[alias];
   } catch (error) {
-    return {}
+    return {};
   }
 }