feat: watermark support (#190)

Add support for watermark component

docs/configuration.md

@@ -12,7 +12,8 @@ var uiManager = new playkit.ui.UIManager(player, config);
 {
   targetId: string,
   forceTouchUI: boolean, // optional
-  logLevel: string // optional
+  logLevel: string, // optional
+  components: Object // optional
 }
 ```
 ## 
@@ -33,3 +34,50 @@ Useful for applications that wants to force mobile view of player UI.
 >##### Default: `"ERROR"`
 >##### Description: Defines the ui log level.
 >Possible values: `"DEBUG", "INFO", "TIME", "WARN", "ERROR", "OFF"`
+## 
+>### config.components
+>##### Type: `Object`
+>##### Default: `-`
+>##### Description: Defines the ui components configuration.
+>Optional components to configure: `watermark`
+## 
+>>### config.components.watermark
+>>##### Type: `Object`
+>>```js
+>>{
+>>    img: string,
+>>    url: string, 
+>>    placement: string, 
+>>    timeout: number
+>>}
+>>```
+>>##### Default: 
+>>```js
+>>{
+>>    img: '',
+>>    url: '',
+>>    placement: 'top-left',
+>>    timeout: 0
+>>}
+>>```
+>>##### Description: Defines a watermark component.
+>>>### config.components.watermark.img
+>>>##### Type: `string`
+>>>##### Default: `''`
+>>>##### Description: The URL for the watermark image.
+>>>## 
+>>>### config.components.watermark.url
+>>>##### Type: `string`
+>>>##### Default: `''`
+>>>##### Description: The URL to open on clicking the watermark.
+>>>## 
+>>>### config.components.watermark.placement
+>>>##### Type: `string`
+>>>##### Default: `'top-left'`
+>>>##### Description: The placement of the watermark.
+>>>Possible values: `'top-left', 'top-right', 'bottom-left', 'bottom-right'`
+>>>## 
+>>>### config.components.watermark.timeout
+>>>##### Type: `number`
+>>>##### Default: `0`
+>>>##### Description: Timeout (in milliseconds) to hide the watermark.

src/components/watermark/_watermark.scss

@@ -0,0 +1,31 @@
+.player .watermark {
+  position: absolute;
+  padding: 5px;
+  z-index: 11;
+  transition: visibility 0s 1s, opacity 1s linear, transform ease-out 100ms;
+  &.hide-watermark {
+    visibility: hidden;
+    opacity: 0;
+  }
+  &.top {
+    top: 0;
+  }
+  &.bottom {
+    bottom: 0;
+  }
+  &.right {
+    right: 0;
+  }
+  &.left {
+    left: 0;
+  }
+}
+
+.player {
+  &:not(.pre-playback):not(.overlay-active) {
+    &.state-paused :global(.playkit-watermark.playkit-bottom),
+    &.hover :global(.playkit-watermark.playkit-bottom) {
+      transform: translateY(-60px);
+    }
+  }
+}

src/components/watermark/index.js

@@ -0,0 +1 @@
+export default from './watermark';

src/components/watermark/watermark.js

@@ -0,0 +1,93 @@
+//@flow
+import style from '../../styles/style.scss';
+import {h} from 'preact';
+import BaseComponent from '../base';
+import {connect} from "preact-redux";
+
+/**
+ * mapping state to props
+ * @param {*} state - redux store state
+ * @returns {Object} - mapped state to this component
+ */
+const mapStateToProps = state => ({
+  config: Object.assign({
+    placement: 'top-left',
+    timeout: 0
+  }, state.config.components.watermark)
+});
+
+@connect(mapStateToProps)
+  /**
+   * Watermark component
+   * @class Watermark
+   * @example <Watermark player={this.player} />
+   * @extends {BaseComponent}
+   */
+class Watermark extends BaseComponent {
+  /**
+   * @static
+   * @type {string} - Component display name
+   */
+  static displayName = 'watermark';
+
+  /**
+   * Creates an instance of Watermark.
+   * @param {Object} obj - object
+   * @memberof Watermark
+   */
+  constructor(obj: Object) {
+    super({name: 'Watermark', player: obj.player});
+    this.setState({show: true});
+  }
+
+  /**
+   * After component mounted, listen to relevant player event for updating the state of the component
+   * @method componentDidMount
+   * @returns {void}
+   * @memberof Watermark
+   */
+  componentDidMount() {
+    /**
+     * playing handler
+     * @returns {void}
+     */
+    const onPlaying = () => {
+      this.player.removeEventListener(this.player.Event.PLAYING, onPlaying);
+      if (this.props.config.timeout > 0) {
+        setTimeout(() => this.setState({show: false}), this.props.config.timeout);
+      }
+    };
+    this.player.addEventListener(this.player.Event.PLAYING, onPlaying);
+    this.player.addEventListener(this.player.Event.CHANGE_SOURCE_ENDED, () => {
+      this.setState({show: true});
+      this.player.addEventListener(this.player.Event.PLAYING, onPlaying)
+    });
+  }
+
+  /**
+   * Render component
+   * @param {*} props - component props
+   * @returns {?React$Element} - component element
+   * @memberof Watermark
+   */
+  render(props: any): ?React$Element<any> {
+    if (props.config.img) {
+      const styleClass = [style.watermark];
+      props.config.placement.split('-').forEach((side) => {
+        styleClass.push(style[side]);
+      });
+      if (!this.state.show) {
+        styleClass.push(style.hideWatermark);
+      }
+      return (
+        <div className={styleClass.join(' ')}>
+          <a href={props.config.url} target='_blank' rel='noopener noreferrer'>
+            <img src={props.config.img}/>
+          </a>
+        </div>
+      )
+    }
+  }
+}
+
+export default Watermark;

src/styles/style.scss

@@ -33,3 +33,4 @@
 @import '../components/slider/slider';
 @import '../components/ad-learn-more/ad-learn-more';
 @import '../components/fullscreen/fullscreen';
+@import '../components/watermark/watermark';

src/ui-presets/live.js

@@ -15,6 +15,8 @@ import OverlayPortal from '../components/overlay-portal';
 import KeyboardControl from '../components/keyboard';
 import LiveTag from '../components/live-tag';
 import UnmuteIndication from '../components/unmute-indication';
+import Watermark from '../components/watermark/watermark';
+import {shouldRenderComponent} from '../utils/component-config';
 
 /**
  * Live ui intrface
@@ -51,6 +53,9 @@ export default function liveUI(props: any): React$Element<any> {
         </BottomBar>
       </div>
       <PrePlaybackPlayOverlay player={props.player}/>
+      {shouldRenderComponent(props.config, Watermark.displayName)
+        ? <Watermark player={props.player}/>
+        : undefined}
     </div>
   )
 }

src/ui-presets/playback.js

@@ -16,6 +16,8 @@ import BottomBar from '../components/bottom-bar';
 import OverlayPortal from '../components/overlay-portal';
 import KeyboardControl from '../components/keyboard';
 import UnmuteIndication from '../components/unmute-indication';
+import Watermark from '../components/watermark/watermark';
+import {shouldRenderComponent} from '../utils/component-config';
 
 /**
  * Playback ui interface
@@ -52,6 +54,9 @@ export default function playbackUI(props: any): React$Element<any> {
         </BottomBar>
       </div>
       <PrePlaybackPlayOverlay player={props.player}/>
+      {shouldRenderComponent(props.config, Watermark.displayName)
+        ? <Watermark player={props.player}/>
+        : undefined}
     </div>
   )
 }

src/utils/component-config.js

@@ -1,5 +1,4 @@
 //@flow
-
 /**
  * Gets config param value
  * @param {*} config property name
@@ -14,4 +13,16 @@ function getComponentConfig(config: any, alias: string): Object {
   }
 }
 
-export default getComponentConfig;
+/**
+ * Checks if component should be rendered based on its value in the store.
+ * @param {Object} config - Config store
+ * @param {string} alias - Component alias
+ * @return {boolean} - Whether component should be rendered
+ */
+function shouldRenderComponent(config: Object, alias: string) {
+  const componentConfig = config.components[alias];
+  return !(Object.keys(componentConfig).length === 0 &&
+    componentConfig.constructor === Object);
+}
+
+export {shouldRenderComponent, getComponentConfig};