feat(FEC-9174): customize logo on bottom bar (#402)

add customize logo from ui config added for small screen and up

src/components/logo/index.js

@@ -0,0 +1 @@
+export {Logo} from './logo';

src/components/logo/logo.js

@@ -0,0 +1,76 @@
+//@flow
+import style from '../../styles/style.scss';
+import {h} from 'preact';
+import {connect} from 'preact-redux';
+import BaseComponent from '../base';
+import {Text} from 'preact-i18n';
+import {PLAYER_SIZE} from '../shell/shell';
+
+const COMPONENT_NAME = 'Logo';
+
+/**
+ * mapping state to props
+ * @param {*} state - redux store state
+ * @returns {Object} - mapped state to this component
+ */
+const mapStateToProps = state => ({
+  isMobile: state.shell.isMobile,
+  playerSize: state.shell.playerSize,
+  config: state.config.components.logo
+});
+
+@connect(mapStateToProps)
+/**
+ * Logo component
+ *
+ * @class Logo
+ * @example <Logo player={this.player} />
+ * @extends {BaseComponent}
+ */
+class Logo extends BaseComponent {
+  /**
+   * should render component
+   * @param {*} props - component props
+   * @returns {boolean} - whether to render the component
+   * @static
+   */
+  static shouldRender(props: any): boolean {
+    const componentConfig = props.config.components[COMPONENT_NAME.toLocaleLowerCase()];
+    return !(Object.keys(componentConfig).length === 0 && componentConfig.constructor === Object);
+  }
+  /**
+   * Creates an instance of Logo.
+   * @param {Object} obj obj
+   * @memberof Logo
+   */
+  constructor(obj: Object) {
+    super({name: COMPONENT_NAME, player: obj.player});
+  }
+
+  /**
+   * render component
+   *
+   * @param {*} props - component props
+   * @returns {?React$Element} - component
+   * @memberof Logo
+   */
+  render(props: any): ?React$Element<any> {
+    const invisibleMode = [PLAYER_SIZE.TINY, PLAYER_SIZE.EXTRA_SMALL, PLAYER_SIZE.SMALL].includes(this.props.playerSize);
+    if (props.config.img && !invisibleMode) {
+      return (
+        <div
+          className={[style.controlButtonContainer, style.controlLogo].join(' ')}
+          aria-label={<Text id="controls.logo" />}
+          title={props.config.text}>
+          <a className={style.controlButton} href={props.config.url} target="_blank" rel="noopener noreferrer">
+            <img className={style.icon} src={props.config.img} />
+          </a>
+        </div>
+      );
+    }
+  }
+}
+
+Logo.displayName = COMPONENT_NAME;
+
+export {Logo};

src/reducers/config.js

@@ -13,7 +13,8 @@ export const initialState = {
     watermark: {},
     seekbar: {},
     vrStereo: {},
-    share: {}
+    share: {},
+    logo: {}
   }
 };
 

src/translations/en.json

@@ -14,7 +14,8 @@
     "next": "Next",
     "prev": "Prev",
     "startOver": "Start over",
-    "pictureInPicture": "Picture in picture"
+    "pictureInPicture": "Picture in picture",
+    "logo": "Logo"
   },
   "unmute": {
     "unmute": "Unmute"

src/ui-presets/live.js

@@ -23,6 +23,7 @@ import {PlaybackControls} from '../components/playback-controls';
 import {PictureInPicture} from '../components/picture-in-picture';
 import {PictureInPictureOverlay} from '../components/picture-in-picture-overlay';
 import {ShareControl} from '../components/share';
+import {Logo} from '../components/logo/logo';
 
 /**
  * Live ui intrface
@@ -56,6 +57,7 @@ export function liveUI(props: any): React$Element<any> {
             <CastControl player={props.player} />
             <PictureInPicture player={props.player} />
             <FullscreenControl player={props.player} />
+            {Logo.shouldRender(props) ? <Logo player={props.player} /> : undefined}
           </div>
         </BottomBar>
       </div>

src/ui-presets/playback.js

@@ -27,6 +27,7 @@ import {PlaylistNextScreen} from '../components/playlist-next-screen';
 import {PictureInPicture} from '../components/picture-in-picture';
 import {PictureInPictureOverlay} from '../components/picture-in-picture-overlay';
 import {ShareControl} from '../components/share';
+import {Logo} from '../components/logo/logo';
 
 /**
  * Playback ui interface
@@ -63,6 +64,7 @@ export function playbackUI(props: any): React$Element<any> {
             <CastControl player={props.player} />
             <PictureInPicture player={props.player} />
             <FullscreenControl player={props.player} />
+            {Logo.shouldRender(props) ? <Logo player={props.player} /> : undefined}
           </div>
         </BottomBar>
       </div>