feat(FEC-13567): add dynamic links to logo (#847)

### Description of the Changes

- **enhancement**

allow configuring the `url` configuration with dynamic `entryId` value
(for kms).
**for example,** configuring the following url:
`https://kms-hostname.com/media/{entryId}`
the entry id will be replaced with the current played entry id (taken
from `player.sources.id`), and when clicking on the logo link, it will
open the media page in kms.

**Note-** if there is no entry id (for example when using `setMedia` API
and not passing the entry id), then the logo will be unclickable.

#### Resolves
[FEC-13567](https://kaltura.atlassian.net/browse/FEC-13567)




[FEC-13567]:
https://kaltura.atlassian.net/browse/FEC-13567?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

docs/components.md

@@ -5,3 +5,4 @@
 - [Seekbar](./components/seekbar/README.md)
 - [Time Display](./components/time-display/README.md)
 - [Error Overlay](./components/error-overlay/README.md)
+- [Logo](./components/logo/README.md)

docs/components/logo/README.md

@@ -0,0 +1,63 @@
+# Logo
+
+Component that renders a logo image in the bottom bar area
+
+## Props
+
+| Prop | Description       |
+|------|-------------------|
+| img  | The image url     |
+| text | Text for tooltip  |
+| link | The logo url link |
+
+## Configuration
+
+> > ### img
+> >
+> > ##### Type: `string | undefined`
+> >
+> > ##### Default: `undefined`
+> >
+> > ##### Description: Defines logo image url.
+>
+> > ### text
+> >
+> > ##### Type: `string | undefined`
+> >
+> > ##### Default: `undefined`
+> >
+> > ##### Description: Defines logo tooltip text.
+>
+> > ### link
+> >
+> > ##### Type: `string | undefined`
+> >
+> > ##### Default: `undefined`
+> >
+> > ##### Description: Defines logo image link url.
+>
+
+
+## Player configuration
+
+> This guide assumes you are using the [Kaltura Player]
+
+[kaltura player]: https://github.com/kaltura/kaltura-player-js/
+
+```js
+const config = {
+    ...
+    ui: {
+        components: {
+            logo: {
+                img: "https://custom-logo-image-url",
+                url: "https://custom-logo-link-url",
+                text: 'Logo text'
+            }
+        }
+    }
+    ...
+}
+
+const player = KalturaPlayer.setup(config);
+```

docs/configuration.md

@@ -156,7 +156,7 @@ var uiManager = new playkit.ui.UIManager(player, config);
 >
 > ##### Description: Defines the ui components configuration.
 >
-> Optional components to configure: `watermark`,`seekbar`, `fullscreen`
+> Optional components to configure: `watermark`,`seekbar`, `fullscreen`, `logo`
 
 ##
 

src/components/logo/logo.tsx

@@ -4,6 +4,7 @@ import {connect} from 'react-redux';
 import {withText} from 'preact-i18n';
 import {withPlayer} from '../player';
 import {withLogger} from '../logger';
+import {withEventManager} from '../../event';
 
 const COMPONENT_NAME = 'Logo';
 
@@ -18,6 +19,8 @@ const mapStateToProps = state => ({
   config: state.config.components.logo
 });
 
+const ENTRY_VAR = '{entryId}';
+
 /**
  * Logo component
  *
@@ -27,14 +30,57 @@ const mapStateToProps = state => ({
  */
 @connect(mapStateToProps)
 @withPlayer
+@withEventManager
 @withLogger(COMPONENT_NAME)
 @withText({logoText: 'controls.logo'})
 class Logo extends Component<any, any> {
+  /**
+   * @constructor
+   * @param {*} props props
+   */
+  constructor(props: any) {
+    super(props);
+    this.setState({isUrlClickable: true, urlLink: props.config.url});
+  }
+
+  /**
+   * when component did mount
+   *
+   * @returns {void}
+   * @memberof Logo
+   */
+  public componentDidMount(): void {
+    this._handleLogoUrl();
+  }
+
+  /**
+   * handles the logo url
+   * if the url contains ${entryId}, then replace it with the played entry id
+   *
+   * @returns {void}
+   * @memberof Logo
+   */
+  private _handleLogoUrl(): void {
+    const url = this.props.config.url;
+    if (url && url.indexOf(ENTRY_VAR) !== -1) {
+      const {player, eventManager} = this.props;
+      eventManager.listen(player, player.Event.MEDIA_LOADED, () => {
+        const entryId = player.sources.id;
+        if (typeof entryId === 'string') {
+          this.setState({urlLink: url.replace(ENTRY_VAR, entryId)});
+        } else {
+          this.props.logger.debug(`Logo url was not replaced; entry id was not found.`);
+          this.setState({isUrlClickable: false});
+        }
+      });
+    }
+  }
+
   /**
    * should render component
    * @returns {boolean} - whether to render the component
    */
-  _shouldRender(): boolean {
+  private _shouldRender(): boolean {
     const isActive = !(Object.keys(this.props.config).length === 0 && this.props.config.constructor === Object) && this.props.config.img;
     this.props.onToggle(COMPONENT_NAME, isActive);
     return isActive;
@@ -47,13 +93,15 @@ class Logo extends Component<any, any> {
    * @returns {?React$Element} - component
    * @memberof Logo
    */
-  render(props: any): VNode<any> | undefined {
+  public render(props: any): VNode<any> | undefined {
     if (!this._shouldRender()) {
       return undefined;
     }
     return (
-      <div className={[style.controlButtonContainer, !props.config.url ? style.emptyUrl : ''].join(' ')} title={props.config.text}>
-        <a className={style.controlButton} href={props.config.url} aria-label={props.logoText} target="_blank" rel="noopener noreferrer">
+      <div
+        className={[style.controlButtonContainer, !props.config.url || !this.state.isUrlClickable ? style.emptyUrl : ''].join(' ')}
+        title={props.config.text}>
+        <a className={style.controlButton} href={this.state.urlLink} aria-label={props.logoText} target="_blank" rel="noopener noreferrer">
           <img className={style.icon} src={props.config.img} />
         </a>
       </div>