all files / in-line/ index.jsx

12.5% Statements 5/40
0% Branches 0/14
0% Functions 0/12
12.5% Lines 5/40
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                                                                                                                                                                                                     
'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;
    }
    const companionAds = _.filter(creatives, (creative) =>
      (!!creative.companionAds)
    );
    const videoOptions = _.merge({}, this.props.videoOptions);
 
    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.tracking}
          videoClicks={linear.videoClicks}
          mediaFiles={linear.mediaFiles.mediaFile}
          disableControls={this.state.videoOptions.disableControls}
        />
      );
    } else if (this.state.nonLinearAds && this.state.nonLinearAds.nonLinear) {
      const nonLinears = this.state.nonLinearAds.nonLinear;
      linearOrNonLinear = nonLinears.map((nonLinear, key) => (
        <NonLinear
          key={`linear-ad-${key}`}
          nonLinear={nonLinear}
          onEnded={(e) => { this.onEnded(e); }}
          duration={nonLinear.duration.getValue()}
          height={this.props.height}
          width={this.props.width}
        />
      ));
    }
    const companions = this.state.companionAds.map((creative, idx) => (
      <Companion
        key={`companion-${idx}`}
        companions={creative.companionAds.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,
};
 
export default InLine;