relational = (size) => {
    return this.props.videoWidth / K4W * size;
  }

  isCustomLefty = () => {
    const {
      banner,
    } = this.props;
    if (banner.type === 'custom') {
      return undefined;
    }
    return ((banner.left + (banner.width / 2)) < (K4W / 2));
  }

  calculateSizes = () => {
    return {
      width: this.relational(this.props.banner.expandedWidth || this.props.banner.width) + 'px',
      height: this.relational(this.props.banner.expandedHeight || this.props.banner.height) + 'px',
    };
  }

  calculatePosition = () => {
    const {
      banner,
    } = this.props;
    let position = {};

    if (banner.type === 'custom') {
      if (this.isCustomLefty()) {
        position.left = this.relational(banner.width) + 'px';
      } else {
        position.right = this.relational(K4W - banner.left - banner.width) + 'px';
      }
      position.top = this.relational(K4H - banner.top - banner.height);
    } else {
      position = {
        [banner.side]: 0,
        [banner.direction || 'bottom']: 0,
      };
    }

    return position;
  }