all files / lib/in-line/ index.jsx

98.08% Statements 51/52
78.13% Branches 25/32
92.31% Functions 12/13
98.04% Lines 50/51
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131                                                                                                                                                                 
'use strict';
 
import _ from 'lodash';
import React from 'react';
import Linear from '../linear/index';
import NonLinear from './non-linear';
import Companion from './companion';
import { vastBaseStyle } from '../helpers/styles';
 
class InLine extends React.Component {
 
  constructor(props) {
    super(props);
    const creatives = this.props.inLine.creatives.creative;
    const linearAd = _.find(creatives, (creative) =>
      (!!creative.linear)
    );
    let nonLinearAds;
    const nonLinear = _.find(creatives, (creative) =>
      (!!creative.nonLinearAds)
    );
    if (nonLinear) {
      nonLinearAds = nonLinear.nonLinearAds;
    }
    let companionAds = _.find(creatives, (creative) =>
      (!!creative.companionAds)
    );
    const videoOptions = _.merge({}, this.props.videoOptions);
    if (companionAds) {
      companionAds = companionAds.companionAds;
    }
    this.state = {
      linearAd,
      nonLinearAds,
      videoOptions,
      companionAds,
    };
  }
 
  onEnded() {
    this.props.onEnded();
  }
 
  startVideo() {
    if (this.vastVideoRef) {
      this.vastVideoRef.startVideo();
    }
  }
 
  render() {
    let linearOrNonLinear;
    if (this.state.linearAd && this.state.linearAd.linear) {
      const linear = this.state.linearAd.linear;
      linearOrNonLinear = (
        <Linear
          ref={(ref) => (this.vastVideoRef = ref)}
          onVideoEnded={(e) => { this.onEnded(e); }}
          height={this.props.height}
          width={this.props.width}
          duration={linear.duration.getValue()}
          tracking={linear.trackingEvents ? linear.trackingEvents.tracking : []}
          videoClicks={linear.videoClicks}
          mediaFiles={linear.mediaFiles.mediaFile}
          disableControls={this.state.videoOptions.disableControls}
        />
      );
    } else Eif (this.state.nonLinearAds && this.state.nonLinearAds.nonLinear) {
      const nonLinears = this.state.nonLinearAds.nonLinear;
      linearOrNonLinear = nonLinears.map((nonLinear, key) => {
        let duration = 0;
        let tracking = [];
        let onEnded = () => {};
        if (key === 0) {
          duration = this.state.nonLinearAds.duration
            ? this.state.nonLinearAds.duration.getValue()
            : this.props.defaultDuration || undefined;
          tracking = this.state.nonLinearAds.trackingEvents ?
            this.state.nonLinearAds.trackingEvents.tracking : [];
          onEnded = (e) => { this.onEnded(e); };
        }
        return (<NonLinear
          key={`linear-ad-${key}`}
          nonLinear={nonLinear}
          onEnded={onEnded}
          duration={duration}
          height={this.props.height}
          tracking={tracking}
          width={this.props.width}
        />);
      });
    }
    let companions = null;
    if (this.state.companionAds) {
      companions = this.state.companionAds.companion.map((companion, idx) => {
        const duration = this.state.companionAds.duration
          ? this.state.companionAds.duration.getValue()
          : undefined;
        return (
          <Companion
            key={`companion-${idx}`}
            duration={duration}
            tracking={companion.trackingEvents ?
              companion.trackingEvents.tracking : []
            }
            companion={companion}
          />
        );
      });
    }
 
    return (
      <div style={vastBaseStyle}>
        {linearOrNonLinear}
        {companions}
      </div>
    );
  }
 
}
 
InLine.propTypes = {
  height: React.PropTypes.number.isRequired,
  width: React.PropTypes.number.isRequired,
  inLine: React.PropTypes.object.isRequired,
  onEnded: React.PropTypes.func.isRequired,
  videoOptions: React.PropTypes.object,
  defaultDuration: React.PropTypes.string,
};
 
export default InLine;