vast-player-react
Version:
A React Component That Plays an Inline VAST 4.0 Ad
218 lines (181 loc) • 7.37 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _index = require('./in-line/index');
var _index2 = _interopRequireDefault(_index);
var _vastXml = require('vast-xml-4');
var _vastXml2 = _interopRequireDefault(_vastXml);
var _axios = require('axios');
var _axios2 = _interopRequireDefault(_axios);
var _lodash = require('lodash');
var _lodash2 = _interopRequireDefault(_lodash);
var _styles = require('./helpers/styles');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var vastBase = JSON.parse(JSON.stringify(_styles.vastBaseStyle));
var VastPlayer = function (_React$Component) {
_inherits(VastPlayer, _React$Component);
function VastPlayer(props) {
_classCallCheck(this, VastPlayer);
var _this = _possibleConstructorReturn(this, (VastPlayer.__proto__ || Object.getPrototypeOf(VastPlayer)).call(this, props));
var vast = _this.props.vastJson;
var ads = null;
var adCount = 0;
// References to all Ads
_this.adRefs = [];
if (vast) {
ads = _this.validateJson(_this.props.vastJson);
adCount = ads.length;
} else if (!_this.props.vastXml) {
throw new Error('Pass either VAST XML or VAST JSON(from vast-xml-4 lib)');
}
_this.state = {
heightStr: _this.props.height + 'px',
widthStr: _this.props.width + 'px',
vast: vast,
adCount: adCount,
index: 0,
ads: ads,
isTrackingFired: false
};
return _this;
}
_createClass(VastPlayer, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
if (!this.state.vast && this.props.vastXml) {
_vastXml2.default.parse(this.props.vastXml).then(function (json) {
var ads = _this2.validateJson(json.vast);
_this2.setState({
vast: json.vast,
ads: ads,
adCount: ads.length
});
});
}
this.fireTracking();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
this.fireTracking();
if (this.adRefs[this.state.index]) {
this.adRefs[this.state.index].startVideo();
}
}
}, {
key: 'onEnded',
value: function onEnded() {
if (this.state.index + 1 < this.state.adCount) {
this.setState({
index: this.state.index + 1
});
} else {
if (this.props.onEnded) {
this.props.onEnded();
}
}
}
}, {
key: 'fireTracking',
value: function fireTracking() {
if (!this.isTrackingFired && this.state.vast) {
this.isTrackingFired = true;
this.state.ads.forEach(function (ad) {
if (ad.inLine.impression) {
ad.inLine.impression.forEach(function (pixel) {
_axios2.default.get(pixel.getValue());
});
}
if (ad.inLine.viewableImpression && ad.inLine.viewableImpression.viewUndetermined) {
ad.inLine.viewableImpression.viewUndetermined.forEach(function (impression) {
_axios2.default.get(impression.getValue());
});
}
});
}
}
}, {
key: 'validateJson',
value: function validateJson(vastJson) {
var ads = vastJson.ad.filter(function (a) {
return !!a.inLine;
});
if (vastJson.getAttr('version') !== '4.0') {
throw new Error('React Vast Player only support VAST 4.0');
}
if (ads.length === 0) {
throw new Error('No InLine Ads Found');
}
return ads;
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
var renderable = null;
var vastPlayerStyle = _extends({
backgroundColor: '#000000',
height: this.state.heightStr,
width: this.state.widthStr
}, vastBase);
if (this.state.vast) {
renderable = this.state.ads.map(function (ad, idx) {
var videoOptions = _lodash2.default.cloneDeep(_this3.props.videoOptions);
var style = _extends({}, vastBase);
if (idx !== _this3.state.index) {
style.display = 'none';
}
return _react2.default.createElement(
'div',
{
key: 'inline-div-' + idx,
style: style
},
_react2.default.createElement(_index2.default, {
ref: function ref(_ref) {
return _this3.adRefs.push(_ref);
},
onEnded: function onEnded(e) {
_this3.onEnded(e);
},
key: 'inline-' + idx,
height: _this3.props.height,
width: _this3.props.width,
defaultDuration: _this3.props.defaultDuration,
inLine: ad.inLine,
videoOptions: videoOptions
})
);
});
}
return _react2.default.createElement(
'div',
{
style: vastPlayerStyle
},
renderable
);
}
}]);
return VastPlayer;
}(_react2.default.Component);
VastPlayer.propTypes = {
vastXml: _react2.default.PropTypes.string,
vastJson: _react2.default.PropTypes.object,
defaultDuration: _react2.default.PropTypes.string,
height: _react2.default.PropTypes.number.isRequired,
width: _react2.default.PropTypes.number.isRequired,
onEnded: _react2.default.PropTypes.func,
videoOptions: _react2.default.PropTypes.object
};
exports.default = VastPlayer;
//# sourceMappingURL=vast-player.js.map