animate-vpaid-bridge - npm Package Compare versions

Comparing version 0.1.0 to 1.0.1

dist/animate-vpaid-bridge.js

@@ -1,194 +0,136 @@
-(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-/* eslint-disable no-unused-vars */
+require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 'use strict';
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-var propIsEnumerable = Object.prototype.propertyIsEnumerable;
-
-function toObject(val) {
-	if (val === null || val === undefined) {
-		throw new TypeError('Object.assign cannot be called with null or undefined');
+module.exports = function (hex) {
+	if (typeof hex !== 'string') {
+		throw new TypeError('Expected a string');
 	}
 
-	return Object(val);
-}
+	hex = hex.replace(/^#/, '');
 
-module.exports = Object.assign || function (target, source) {
-	var from;
-	var to = toObject(target);
-	var symbols;
+	if (hex.length === 3) {
+		hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+	}
 
-	for (var s = 1; s < arguments.length; s++) {
-		from = Object(arguments[s]);
+	var num = parseInt(hex, 16);
 
-		for (var key in from) {
-			if (hasOwnProperty.call(from, key)) {
-				to[key] = from[key];
-			}
-		}
-
-		if (Object.getOwnPropertySymbols) {
-			symbols = Object.getOwnPropertySymbols(from);
-			for (var i = 0; i < symbols.length; i++) {
-				if (propIsEnumerable.call(from, symbols[i])) {
-					to[symbols[i]] = from[symbols[i]];
-				}
-			}
-		}
-	}
-
-	return to;
+	return [num >> 16, num >> 8 & 255, num & 255];
 };
 
 },{}],2:[function(require,module,exports){
-'use strict';
+function E () {
+  // Keep this empty so it's easier to inherit from
+  // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
+}
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+E.prototype = {
+  on: function (name, callback, ctx) {
+    var e = this.e || (this.e = {});
 
-exports.default = function () {
-  if (this._destroyed) return;
+    (e[name] || (e[name] = [])).push({
+      fn: callback,
+      ctx: ctx
+    });
 
-  _toggles.$removeAll.call(this);
-  _trigger2.default.call(this, 'AdStopped');
-};
+    return this;
+  },
 
-var _trigger = require('../trigger');
+  once: function (name, callback, ctx) {
+    var self = this;
+    function listener () {
+      self.off(name, listener);
+      callback.apply(ctx, arguments);
+    };
 
-var _trigger2 = _interopRequireDefault(_trigger);
+    listener._ = callback
+    return this.on(name, listener, ctx);
+  },
 
-var _toggles = require('../toggles');
+  emit: function (name) {
+    var data = [].slice.call(arguments, 1);
+    var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
+    var i = 0;
+    var len = evtArr.length;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+    for (i; i < len; i++) {
+      evtArr[i].fn.apply(evtArr[i].ctx, data);
+    }
 
-},{"../toggles":5,"../trigger":6}],3:[function(require,module,exports){
-'use strict';
+    return this;
+  },
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+  off: function (name, callback) {
+    var e = this.e || (this.e = {});
+    var evts = e[name];
+    var liveEvents = [];
 
-exports.default = function () {
-  if (this._destroyed) return;
+    if (evts && callback) {
+      for (var i = 0, len = evts.length; i < len; i++) {
+        if (evts[i].fn !== callback && evts[i].fn._ !== callback)
+          liveEvents.push(evts[i]);
+      }
+    }
 
-  var videoSlot = this._videoSlot;
-  var percentPlayed = _mapNumber(0, videoSlot.duration, 0, 100, videoSlot.currentTime);
-  var last = this._lastQuartilePosition;
+    // Remove event from queue to prevent memory leak
+    // Suggested by https://github.com/lazd
+    // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
 
-  if (percentPlayed < last.position) return;
+    (liveEvents.length)
+      ? e[name] = liveEvents
+      : delete e[name];
 
-  if (last.hook) last.hook();
-
-  _trigger2.default.call(this, last.event);
-
-  var quartile = this._quartileEvents;
-  this._lastQuartilePosition = quartile[quartile.indexOf(last) + 1];
+    return this;
+  }
 };
 
-var _trigger = require('../trigger');
+module.exports = E;
 
-var _trigger2 = _interopRequireDefault(_trigger);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _normNumber(start, end, value) {
-  return (value - start) / (end - start);
-}
-
-function _mapNumber(fromStart, fromEnd, toStart, toEnd, value) {
-  return toStart + (toEnd - toStart) * _normNumber(fromStart, fromEnd, value);
-}
-
-},{"../trigger":6}],4:[function(require,module,exports){
+},{}],3:[function(require,module,exports){
 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 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 _loadCss = require('./util/load-css');
-
-var _loadCss2 = _interopRequireDefault(_loadCss);
-
-var _trigger = require('./trigger');
-
-var _trigger2 = _interopRequireDefault(_trigger);
-
-var _toggles = require('./toggles');
-
-var _vastEnded = require('./handler/vast-ended');
-
-var _vastEnded2 = _interopRequireDefault(_vastEnded);
-
-var _vastTimeupdate = require('./handler/vast-timeupdate');
-
-var _vastTimeupdate2 = _interopRequireDefault(_vastTimeupdate);
-
-var _objectAssign = require('object-assign');
-
-var _objectAssign2 = _interopRequireDefault(_objectAssign);
-
-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 $enableSkippable() {
-  this._attributes.skippableState = true;
-}
+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 $throwError(msg) {
-  _trigger2.default.call(this, 'AdError', msg);
-}
+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; }
 
-function $setVideoAd() {
-  var videoSlot = this._videoSlot;
+var TinyEmitter = require('tiny-emitter');
+var vpaidMethods = require('./vpaid-methods.json');
+var VideoTracker = require('./video-tracker');
 
-  if (!videoSlot) {
-    return $throwError.call(this, 'no video');
-  }
-  _setSize(videoSlot, [this._attributes.width, this._attributes.height]);
-
-  if (!_setSupportedVideo(videoSlot, this._parameters.videos || [])) {
-    return $throwError.call(this, 'no supported video found');
-  }
+function $removeAll() {
+  this._destroyed = true;
+  this._videoSlot.src = '';
+  this._slot.innerHTML = '';
+  this._ui = null;
 }
 
 function _setSize(el, size) {
-  el.setAttribute('width', size[0]);
-  el.setAttribute('height', size[1]);
-  el.style.width = size[0] + 'px';
-  el.style.height = size[1] + 'px';
+  el.width = size[0];
+  el.height = size[1];
+  // Just in case .style is not defined. This does happen in cases
+  // where video players pass in mock DOM objects. Like Google IMA
+  if (el.style) {
+    el.style.width = size[0] + 'px';
+    el.style.height = size[1] + 'px';
+  }
 }
 
-function _setSupportedVideo(videoEl, videos) {
-  var supportedVideos = videos.filter(function (video) {
-    return videoEl.canPlayType(video.mimetype);
-  });
+module.exports = function (_TinyEmitter) {
+  _inherits(Linear, _TinyEmitter);
 
-  if (supportedVideos.length === 0) return false;
+  function Linear() {
+    var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
 
-  videoEl.setAttribute('src', supportedVideos[0].url);
-
-  return true;
-}
-
-// function _createAndAppend (parent, tagName, className) {
-//   var el = document.createElement(tagName || 'div')
-//   el.className = className || ''
-//   parent.appendChild(el)
-//   return el
-// }
-
-var Linear = function () {
-  function Linear() {
     _classCallCheck(this, Linear);
 
-    this._slot = null;
-    this._videoSlot = null;
+    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Linear).call(this));
 
-    this._subscribers = {};
+    _this.emitVpaidMethodInvocations();
+    _this._ui = {};
+    _this.quartileIndexEmitted = -1;
+    _this.hasEngaged = false;
 
-    this._attributes = {
+    _this._attributes = {
       companions: '',
@@ -201,3 +143,3 @@ desiredBitrate: 256,
       linear: true,
-      skippableState: false,
+      adSkippableState: false,
       viewMode: 'normal',
@@ -209,3 +151,3 @@ width: 0,
 
-    this.previousAttributes = (0, _objectAssign2.default)({}, this._attributes);
+    _this.previousAttributes = Object.assign({}, _this._attributes);
 
@@ -215,7 +157,5 @@ // open interactive panel -> AdExpandedChange, AdInteraction
 
-    this._quartileEvents = [{ event: 'AdVideoStart', position: 0 }, { event: 'AdVideoFirstQuartile', position: 25 }, { event: 'AdVideoMidpoint', position: 50 }, { event: 'AdSkippableStateChange', position: 65, hook: $enableSkippable.bind(this) }, { event: 'AdVideoThirdQuartile', position: 75 }, { event: 'AdVideoComplete', position: 100 }];
-
-    this._lastQuartilePosition = this._quartileEvents[0];
-
-    this._parameters = {};
+    _this._options = options;
+    _this._options.videos = _this._options.videos || [];
+    return _this;
   }
@@ -268,2 +208,4 @@
     value: function initAd(width, height, viewMode, desiredBitrate, creativeData, environmentVars) {
+      var _this2 = this;
+
       this._attributes.width = width;
@@ -276,13 +218,92 @@ this._attributes.height = height;
       this._videoSlot = environmentVars.videoSlot;
-      this._style = (0, _loadCss2.default)('ad.css');
-      $setVideoAd.call(this);
-      this._videoSlot.addEventListener('timeupdate', _vastTimeupdate2.default.bind(this), false);
-      this._videoSlot.addEventListener('ended', _vastEnded2.default.bind(this), false);
+      if (!this._videoSlot) {
+        return this.emit('AdError', 'Video slot is invalid');
+      }
+      if (!this._slot) {
+        return this.emit('AdError', 'Slot is invalid');
+      }
+      _setSize(this._videoSlot, [this._attributes.width, this._attributes.height]);
+      this.setSupportedVideo(this._options.videos).then(function () {
+        _this2.emit('AdLoaded');
+      }).catch(function (reason) {
+        _this2.emit('AdLog', reason);
+        _this2.emit('AdLoaded');
+      });
+      this.videoTracker = new VideoTracker(this._videoSlot, this);
+    }
+  }, {
+    key: 'setVideoSource',
+    value: function setVideoSource(src, type) {
+      var _this3 = this;
 
-      _trigger2.default.call(this, 'AdLoaded');
+      return new Promise(function (resolve, reject) {
+        // As Google is not using an actual DOM video, it doesn't implement
+        // `onloadeddata`. In normal cases, `onloadeddata` is `null` when no
+        // handler function is assigned to it. However in Google's case, it
+        // returns as undefined.
+        if (typeof _this3._videoSlot.onloadeddata === 'undefined') {
+          resolve();
+        } else {
+          _this3._videoSlot.onloadeddata = function () {
+            resolve();
+          };
+        }
+        _this3._videoSlot.onerror = function (ev) {
+          var msg = void 0;
+          /* istanbul ignore next */
+          switch (ev.target.error.code) {
+            case ev.target.error.MEDIA_ERR_ABORTED:
+              msg = 'You aborted the video playback.';
+              break;
+            case ev.target.error.MEDIA_ERR_NETWORK:
+              msg = 'A network error caused the video download to fail part-way.';
+              break;
+            case ev.target.error.MEDIA_ERR_DECODE:
+              msg = 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support.';
+              break;
+            case ev.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+              msg = 'The video could not be loaded, either because the server or network failed or because the format is not supported.';
+              break;
+            default:
+              msg = 'An unknown error occurred.';
+              break;
+          }
+          reject(msg + ' Type: ' + type + ', source: ' + src);
+        };
+        _this3._videoSlot.src = src;
+        _this3._videoSlot.type = type;
+      });
     }
+  }, {
+    key: 'getSupportedVideos',
+    value: function getSupportedVideos(videos) {
+      var el = document.createElement('video');
+      return videos.filter(function (video) {
+        return el.canPlayType(video.type);
+      });
+    }
+  }, {
+    key: 'setSupportedVideo',
+    value: function setSupportedVideo(videos) {
+      var _this4 = this;
 
+      return new Promise(function (resolve, reject) {
+        var supportedVideos = _this4.getSupportedVideos(videos);
+        if (supportedVideos[0]) {
+          _this4.setVideoSource(supportedVideos[0].url, supportedVideos[0].type).then(function () {
+            resolve();
+          }).catch(function (reason) {
+            reject(reason);
+          });
+        } else {
+          reject('no supported video found');
+        }
+      });
+    }
+
     /**
-     * startAd
-     *
+     * startAd() is called by the video player when the video player is ready for the ad to
+     * display. The ad unit responds by sending an AdStarted event that notifies the video player
+     * when the ad unit has started playing. Once started, the video player cannot restart the ad unit
+     * by calling startAd() and stopAd() multiple times.
      */
@@ -293,18 +314,23 @@
     value: function startAd() {
-      this._videoSlot.play();
-      this._ui = {};
-      // this._ui.buy = _createAndAppend(this._slot, 'div', 'vpaidAdLinear')
-      // this._ui.banner = _createAndAppend(this._slot, 'div', 'banner')
-      // this._ui.xBtn = _createAndAppend(this._slot, 'button', 'close')
-      // this._ui.interact = _createAndAppend(this._slot, 'div', 'interact')
+      var _this5 = this;
 
-      // this._ui.buy.addEventListener('click', $onClickThru.bind(this), false)
-      // this._ui.banner.addEventListener('click', $toggleExpand.bind(this, true), false)
-      // this._ui.xBtn.addEventListener('click', $toggleExpand.bind(this, false), false)
-      _trigger2.default.call(this, 'AdStarted');
+      // As Google is not using an actual DOM video, it doesn't implement
+      // `onloadeddata`. In normal cases, `onloadeddata` is `null` when no
+      // handler function is assigned to it. However in Google's case, it
+      // returns as undefined.
+      if (typeof this._videoSlot.onloadeddata === 'undefined') {
+        this.emit('AdStarted');
+      } else {
+        // Ideally we want to wait till the first frame is present
+        this._videoSlot.onloadeddata = function () {
+          _this5.emit('AdStarted');
+        };
+      }
+      this._videoSlot.load();
     }
 
     /**
-     * stopAd
-     *
+     * The video player calls stopAd() when it will no longer display the ad or needs to cancel
+     * the ad unit. The ad unit responds by closing the ad, cleaning up its resources and then sending
+     * the AdStopped event. The process for stopping an ad may take time.
      */
@@ -315,5 +341,6 @@
     value: function stopAd() {
+      /* istanbul ignore if */
       if (this._destroyed) return;
-      _toggles.$removeAll.call(this);
-      _trigger2.default.call(this, 'AdStopped');
+      $removeAll.call(this);
+      this.emit('AdStopped');
     }
@@ -329,11 +356,20 @@
     value: function skipAd() {
+      /* istanbul ignore if */
       if (this._destroyed) return;
-      if (!this._attributes.skippableState) return;
-      _toggles.$removeAll.call(this);
-      _trigger2.default.call(this, 'AdSkipped');
-      _trigger2.default.call(this, 'AdStopped');
+      if (!this._attributes.adSkippableState) {
+        return false;
+      }
+      $removeAll.call(this);
+      this.emit('AdSkipped');
+      this.emit('AdStopped');
     }
 
     /**
-     * [resizeAd description]
+     * The resizeAd() method is only called when the video player changes the width and
+     * height of the video content container, which prompts the ad unit to scale or reposition. The ad
+     * unit then resizes itself to a width and height that is equal to or less than the width and height
+     * supplied by the video player. Once resized, the ad unit writes updated dimensions to the
+     * adWidth and adHeight properties and sends the AdSizeChange event to confirm that
+     * it has resized itself.
+     *
      * @param  {number} width    The maximum display area allotted for the ad. The ad unit must resize itself to a width and height that is within the values provided. The video player must always provide width and height unless it is in fullscreen mode. In fullscreen mode, the ad unit can ignore width/height parameters and resize to any dimension.
@@ -351,3 +387,3 @@ * @param  {number} height   The maximum display area allotted for the ad. The ad unit must resize itself to a width and height that is within the values provided. The video player must always provide width and height unless it is in fullscreen mode. In fullscreen mode, the ad unit can ignore width/height parameters and resize to any dimension.
       this._attributes.viewMode = viewMode;
-      _trigger2.default.call(this, 'AdSizeChange');
+      this.emit('AdSizeChange');
     }
@@ -364,3 +400,3 @@
       this._videoSlot.pause();
-      _trigger2.default.call(this, 'AdPaused');
+      this.emit('AdPaused');
     }
@@ -377,3 +413,3 @@
       this._videoSlot.play();
-      _trigger2.default.call(this, 'AdPlaying');
+      this.emit('AdPlaying');
     }
@@ -389,4 +425,5 @@
     value: function expandAd() {
+      this.hasEngaged = true;
       this.set('expanded', true);
-      _trigger2.default.call(this, 'AdExpandedChange');
+      this.emit('AdExpandedChange');
     }
@@ -403,3 +440,3 @@
       this.set('expanded', false);
-      _trigger2.default.call(this, 'AdExpandedChange');
+      this.emit('AdExpandedChange');
     }
@@ -418,9 +455,3 @@
     value: function subscribe(handler, event, context) {
-      if (!this._subscribers[event]) {
-        this._subscribers[event] = [];
-      }
-      this._subscribers[event].push({
-        callback: handler,
-        context: context
-      });
+      this.on(event, handler, context);
     }
@@ -438,7 +469,3 @@
     value: function unsubscribe(handler, event) {
-      var eventSubscribers = this._subscribers[event];
-      if (!Array.isArray(eventSubscribers)) return;
-      this._subscribers[event] = eventSubscribers.filter(function (subscriber) {
-        return handler !== subscriber;
-      });
+      this.off(event, handler);
     }
@@ -495,3 +522,3 @@
     /**
-     * getAdSkippableState - if the ad is in the position to be able to skip
+     * getAdadSkippableState - if the ad is in the position to be able to skip
      *
@@ -502,5 +529,5 @@ * @return {boolean}
   }, {
-    key: 'getAdSkippableState',
-    value: function getAdSkippableState() {
-      return this._attributes.skippableState;
+    key: 'getAdadSkippableState',
+    value: function getAdadSkippableState() {
+      return this._attributes.adSkippableState;
     }
@@ -517,3 +544,7 @@
     value: function getAdRemainingTime() {
-      return this._attributes.remainingTime;
+      if (this.hasEngaged) {
+        return -2;
+      } else {
+        return this._videoSlot.duration - this._videoSlot.currentTime;
+      }
     }
@@ -530,6 +561,22 @@
     value: function getAdDuration() {
-      return this._attributes.duration;
+      if (this.hasEngaged) {
+        return -2;
+      } else {
+        return this._videoSlot.duration;
+      }
     }
 
     /**
+     * in support of skippable ads, this feature enables the video
+     * player to identify when the ad is in a state where it can be skipped
+     * @return {[type]} [description]
+     */
+
+  }, {
+    key: 'getAdSkippableState',
+    value: function getAdSkippableState() {
+      return this._attributes.adSkippableState;
+    }
+
+    /**
      * getAdVolume
@@ -584,81 +631,133 @@ *
       if (volume < 0 || volume > 1) {
-        return $throwError('volume is not valid');
+        return this.emit('AdError', 'volume is not valid');
       }
       this.set('volume', volume);
       this._videoSlot.volume = volume;
-      _trigger2.default.call(this, 'AdVolumeChange');
+      this.emit('AdVolumeChange');
     }
+  }, {
+    key: 'emitVpaidMethodInvocations',
+    value: function emitVpaidMethodInvocations() {
+      var _this6 = this;
+
+      vpaidMethods.forEach(function (name) {
+        var originalReference = _this6[name];
+        _this6[name] = function () {
+          for (var _len = arguments.length, rest = Array(_len), _key = 0; _key < _len; _key++) {
+            rest[_key] = arguments[_key];
+          }
+
+          _this6.emit.apply(_this6, [name + '()'].concat(rest));
+          return originalReference.apply(_this6, rest);
+        };
+      }, this);
+    }
   }]);
 
   return Linear;
-}();
+}(TinyEmitter);
 
-exports.default = Linear;
-
-},{"./handler/vast-ended":2,"./handler/vast-timeupdate":3,"./toggles":5,"./trigger":6,"./util/load-css":7,"object-assign":1}],5:[function(require,module,exports){
+},{"./video-tracker":4,"./vpaid-methods.json":6,"tiny-emitter":2}],4:[function(require,module,exports){
 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.$toggleExpand = $toggleExpand;
-exports.$togglePlay = $togglePlay;
-exports.$toggleUI = $toggleUI;
-exports.$removeAll = $removeAll;
+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 _trigger = require('./trigger');
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var _trigger2 = _interopRequireDefault(_trigger);
+var vpaidLifeCycle = require('./vpaid-life-cycle');
+var quartiles = [{
+  value: 0,
+  name: vpaidLifeCycle[0]
+}, {
+  value: 0.25,
+  name: vpaidLifeCycle[1]
+}, {
+  value: 0.50,
+  name: vpaidLifeCycle[2]
+}, {
+  value: 0.75,
+  name: vpaidLifeCycle[3]
+}];
+module.exports = function () {
+  /**
+   * [constructor description]
+   * @param  {[type]} el      [description]
+   * @param  {TinyEmitter} emitter [description]
+   * @return {[type]}         [description]
+   */
+  function _class(el, emitter) {
+    var prefix = arguments.length <= 2 || arguments[2] === undefined ? 'AdVideo' : arguments[2];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+    _classCallCheck(this, _class);
 
-function $toggleExpand(toExpand) {
-  $toggleUI.call(this, toExpand);
-  $togglePlay.call(this, toExpand);
-
-  this._attributes.expandAd = toExpand;
-  this._attributes.remainingTime = toExpand ? -2 : -1;
-
-  _trigger2.default.call(this, 'AdExpandedChange');
-  _trigger2.default.call(this, 'AdDurationChange');
-}
-
-function $togglePlay(toPlay) {
-  if (toPlay) {
-    this._videoSlot.pause();
-  } else {
-    this._videoSlot.play();
+    this.el = el;
+    this.emitter = emitter;
+    this.prefix = prefix;
+    this.quartileIndexEmitted = -1;
+    this.el.addEventListener('timeupdate', this.handleTimeupdate.bind(this));
+    this.el.addEventListener('ended', this.handleEnded.bind(this));
   }
-}
 
-function $toggleUI(show) {
-  this._ui.interact.style.display = getDisplay();
-  this._ui.xBtn.style.display = getDisplay();
+  _createClass(_class, [{
+    key: 'emit',
+    value: function emit() {
+      for (var _len = arguments.length, rest = Array(_len), _key = 0; _key < _len; _key++) {
+        rest[_key] = arguments[_key];
+      }
 
-  function getDisplay() {
-    return show ? 'block' : 'none';
-  }
-}
+      var eventName = this.prefix + rest[0];
+      return this.emitter.emit.apply(this.emitter, [eventName].concat(rest.splice(1)));
+    }
+  }, {
+    key: 'handleTimeupdate',
+    value: function handleTimeupdate() {
+      var upcomingQuartileIndex = this.quartileIndexEmitted + 1;
+      var upcomingQuartile = quartiles[upcomingQuartileIndex];
+      if (upcomingQuartile && this.el.currentTime / this.el.duration > upcomingQuartile.value) {
+        this.emit(upcomingQuartile.name);
+        this.quartileIndexEmitted = upcomingQuartileIndex;
+      }
+    }
+  }, {
+    key: 'handleEnded',
+    value: function handleEnded() {
+      this.emit(vpaidLifeCycle[4]);
+      // Garbage collect event listeners
+      this.el.removeEventListener('timeupdate', this.handleTimeupdate);
+      this.el.removeEventListener('ended', this.handleEnded);
+    }
+  }]);
 
-function $removeAll() {
-  this._destroyed = true;
-  this._videoSlot.src = '';
-  this._style.parentElement.removeChild(this._style);
-  this._slot.innerHTML = '';
-  this._ui = null;
-}
+  return _class;
+}();
 
-},{"./trigger":6}],6:[function(require,module,exports){
-"use strict";
+},{"./vpaid-life-cycle":5}],5:[function(require,module,exports){
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+module.exports = ['Start', 'FirstQuartile', 'Midpoint', 'ThirdQuartile', 'Complete'];
 
-exports.default = function (event, msg) {
-  var subscribers = this._subscribers[event] || [];
-  subscribers.forEach(function (handlers) {
-    handlers.callback.apply(handlers.context, msg);
-  });
-};
+},{}],6:[function(require,module,exports){
+module.exports=[
+  "handshakeVersion",
+  "initAd",
+  "startAd",
+  "stopAd",
+  "skipAd",
+  "resizeAd",
+  "pauseAd",
+  "resumeAd",
+  "expandAd",
+  "collapseAd",
+  "getAdLinear",
+  "getAdWidth",
+  "getAdHeight",
+  "getAdExpanded",
+  "getAdadSkippableState",
+  "getAdRemainingTime",
+  "getAdDuration",
+  "getAdVolume",
+  "getAdCompanions",
+  "getAdIcons",
+  "setAdVolume"
+]
 
@@ -671,13 +770,19 @@ },{}],7:[function(require,module,exports){
 });
+exports.default = createScript;
+/**
+ * Creates the script element and provides a callback via onload
+ *
+ * @param  {[type]}   path [description]
+ * @param  {Function} cb   [description]
+ * @return {[type]}        [description]
+ */
+function createScript(path, cb) {
+  var script = document.createElement('script');
+  script.src = path;
+  script.type = 'text/javascript';
+  script.onload = cb;
+  return script;
+}
 
-exports.default = function (url) {
-  var link = document.createElement('link');
-  link.rel = 'stylesheet';
-  link.href = url;
-  // parent returns Window object
-  parent.document.body.appendChild(link);
-  return link;
-};
-
-},{}],8:[function(require,module,exports){
+},{}],"animate-vpaid-bridge":[function(require,module,exports){
 'use strict';
@@ -689,12 +794,12 @@
 
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
 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 _linear = require('vpaid-ad/src/linear');
+var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
 
-var _linear2 = _interopRequireDefault(_linear);
+var _createScript = require('./util/createScript');
 
-var _trigger = require('vpaid-ad/src/trigger');
+var _createScript2 = _interopRequireDefault(_createScript);
 
-var _trigger2 = _interopRequireDefault(_trigger);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -708,2 +813,5 @@
 
+var Linear = require('../node_modules/vpaid-ad/src/linear');
+var hexRgb = require('hex-rgb');
+
 var AnimateVpaidBridge = function (_Linear) {
@@ -718,2 +826,8 @@ _inherits(AnimateVpaidBridge, _Linear);
     _this.bridgeId = options.bridgeId;
+    _this.createjsUri = options.createjsUri;
+    _this.animateJs = options.animateJs;
+    _this.basePath = options.basePath;
+    _this.once('AdStarted', function () {
+      _this._videoSlot.play();
+    });
     return _this;
@@ -725,2 +839,4 @@ }
     value: function initAd(width, height, viewMode, desiredBitrate, creativeData, environmentVars) {
+      var _this2 = this;
+
       this._attributes.width = width;
@@ -732,9 +848,105 @@ this._attributes.height = height;
       this._videoSlot = environmentVars.videoSlot;
-      this.renderSlot_();
-      _trigger2.default.call(this, 'AdLoaded');
+      this.renderSlot_(function () {
+        _this2.canvas = document.getElementById('canvas');
+        _this2.images = images || {};
+        _this2.loader = new createjs.LoadQueue(false, _this2.basePath);
+        _this2.loader.addEventListener('fileload', _this2.handleFileLoad.bind(_this2));
+        _this2.loader.addEventListener('complete', function (ev) {
+          _this2.handleComplete(ev);
+        });
+        _get(Object.getPrototypeOf(AnimateVpaidBridge.prototype), 'initAd', _this2).call(_this2, width, height, viewMode, desiredBitrate, creativeData, environmentVars);
+        if (lib.properties.manifest.length === 0) {
+          _this2.initStage();
+        } else {
+          _this2.loader.loadManifest(lib.properties.manifest);
+        }
+      });
     }
+  }, {
+    key: 'handleFileLoad',
+    value: function handleFileLoad(ev) {
+      if (ev.item.type == 'image') {
+        images[ev.item.id] = ev.result;
+      }
+    }
+  }, {
+    key: 'initStage',
+    value: function initStage() {
+      this.exportRoot = new lib[this.bridgeId]();
+
+      var _hexRgb = hexRgb(lib.properties.color);
+
+      var _hexRgb2 = _slicedToArray(_hexRgb, 3);
+
+      var r = _hexRgb2[0];
+      var g = _hexRgb2[1];
+      var b = _hexRgb2[2];
+
+      this.canvas.style.backgroundColor = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + lib.properties.opacity;
+      console.log(this.canvas.style.backgroundColor);
+      this.stage = new createjs.Stage(this.canvas);
+      this.exportRoot.__elan__ = this;
+      this.stage.addChild(this.exportRoot);
+      this.stage.enableMouseOver();
+      // Registers the "tick" event listener.
+      createjs.Ticker.setFPS(lib.properties.fps);
+      createjs.Ticker.addEventListener('tick', this.stage);
+      this.resizeCanvas(false, 'both', false, 1);
+    }
+  }, {
+    key: 'handleComplete',
+    value: function handleComplete(ev) {
+      // This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
+      var queue = ev.target;
+      var ssMetadata = lib.ssMetadata;
+      for (var i = 0; i < ssMetadata.length; i++) {
+        ss[ssMetadata[i].name] = new createjs.SpriteSheet({
+          images: [queue.getResult(ssMetadata[i].name)],
+          frames: ssMetadata[i].frames
+        });
+      }
+      this.initStage();
+    }
+
+    /**
+     * This bit is from Adobe Animate CC
+     * @return {[type]} [description]
+     */
+
+  }, {
+    key: 'resizeCanvas',
+    value: function resizeCanvas(isResp, respDim, isScale, scaleType) {
+      var w = lib.properties.width;
+      var h = lib.properties.height;
+      var iw = window.innerWidth;
+      var ih = window.innerHeight;
+      var pRatio = window.devicePixelRatio;
+      var xRatio = iw / w;
+      var yRatio = ih / h;
+      var sRatio = 1;
+      if (isResp) {
+        if (respDim === 'width' && this.lastW == iw || respDim === 'height' && this.lastH == ih) {
+          sRatio = this.lastS;
+        } else if (!isScale) {
+          if (iw < w || ih < h) sRatio = Math.min(xRatio, yRatio);
+        } else if (scaleType === 1) {
+          sRatio = Math.min(xRatio, yRatio);
+        } else if (scaleType === 2) {
+          sRatio = Math.max(xRatio, yRatio);
+        }
+      }
+      this.canvas.width = w * pRatio * sRatio;
+      this.canvas.height = h * pRatio * sRatio;
+      this.canvas.style.width = w * sRatio + 'px';
+      this.canvas.style.height = h * sRatio + 'px';
+      this.stage.scaleX = pRatio * sRatio;
+      this.stage.scaleY = pRatio * sRatio;
+      this.lastW = iw;
+      this.lastH = ih;
+      this.lastS = sRatio;
+    }
   }]);
 
   return AnimateVpaidBridge;
-}(_linear2.default);
+}(Linear);
 
@@ -744,14 +956,25 @@ exports.default = AnimateVpaidBridge;
 
-AnimateVpaidBridge.prototype.renderSlot_ = function () {
+AnimateVpaidBridge.prototype.renderSlot_ = function (callback) {
+  var _this3 = this;
+
   var slotExists = this._slot && this._slot.tagName === 'DIV';
-  if (!slotExists) {
-    this._slot = document.createElement('div');
-    if (!document.body) {
-      document.body = document.createElement('body');
+  var createjsScript = (0, _createScript2.default)(this.createjsUri, function () {
+    if (!slotExists) {
+      _this3._slot = document.createElement('div');
+      if (!document.body) {
+        document.body = document.createElement('body');
+      }
+      document.body.appendChild(_this3._slot);
     }
-    document.body.appendChild(this._slot);
-  }
-  this._slot.innerHTML = '\n    <canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>\n  ';
+    // this should have broken down into options.
+    _this3._slot.innerHTML = '\n      <canvas id="canvas" width="550" height="400"></canvas>\n    ';
+    // loads Adobe Animate CC JavaScript
+    var animateJsScript = (0, _createScript2.default)(_this3.animateJs, function () {
+      callback();
+    });
+    document.body.appendChild(animateJsScript);
+  });
+  document.body.appendChild(createjsScript);
 };
 
-},{"vpaid-ad/src/linear":4,"vpaid-ad/src/trigger":6}]},{},[8]);
+},{"../node_modules/vpaid-ad/src/linear":3,"./util/createScript":7,"hex-rgb":1}]},{},[]);

dist/animate-vpaid-bridge.min.js

@@ -1,1 +0,1 @@
-!function t(e,i,n){function r(o,u){if(!i[o]){if(!e[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(s)return s(o,!0);var l=new Error("Cannot find module '"+o+"'");throw l.code="MODULE_NOT_FOUND",l}var d=i[o]={exports:{}};e[o][0].call(d.exports,function(t){var i=e[o][1][t];return r(i?i:t)},d,d.exports,t,e,i,n)}return i[o].exports}for(var s="function"==typeof require&&require,o=0;o<n.length;o++)r(n[o]);return r}({1:[function(t,e,i){"use strict";function n(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}var r=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;e.exports=Object.assign||function(t,e){for(var i,o,u=n(t),a=1;a<arguments.length;a++){i=Object(arguments[a]);for(var l in i)r.call(i,l)&&(u[l]=i[l]);if(Object.getOwnPropertySymbols){o=Object.getOwnPropertySymbols(i);for(var d=0;d<o.length;d++)s.call(i,o[d])&&(u[o[d]]=i[o[d]])}}return u}},{}],2:[function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(i,"__esModule",{value:!0}),i.default=function(){this._destroyed||(o.$removeAll.call(this),s.default.call(this,"AdStopped"))};var r=t("../trigger"),s=n(r),o=t("../toggles")},{"../toggles":5,"../trigger":6}],3:[function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function r(t,e,i){return(i-t)/(e-t)}function s(t,e,i,n,s){return i+(n-i)*r(t,e,s)}Object.defineProperty(i,"__esModule",{value:!0}),i.default=function(){if(!this._destroyed){var t=this._videoSlot,e=s(0,t.duration,0,100,t.currentTime),i=this._lastQuartilePosition;if(!(e<i.position)){i.hook&&i.hook(),u.default.call(this,i.event);var n=this._quartileEvents;this._lastQuartilePosition=n[n.indexOf(i)+1]}}};var o=t("../trigger"),u=n(o)},{"../trigger":6}],4:[function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(){this._attributes.skippableState=!0}function o(t){p.default.call(this,"AdError",t)}function u(){var t=this._videoSlot;return t?(a(t,[this._attributes.width,this._attributes.height]),l(t,this._parameters.videos||[])?void 0:o.call(this,"no supported video found")):o.call(this,"no video")}function a(t,e){t.setAttribute("width",e[0]),t.setAttribute("height",e[1]),t.style.width=e[0]+"px",t.style.height=e[1]+"px"}function l(t,e){var i=e.filter(function(e){return t.canPlayType(e.mimetype)});return 0===i.length?!1:(t.setAttribute("src",i[0].url),!0)}Object.defineProperty(i,"__esModule",{value:!0});var d=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),c=t("./util/load-css"),h=n(c),f=t("./trigger"),p=n(f),v=t("./toggles"),b=t("./handler/vast-ended"),_=n(b),y=t("./handler/vast-timeupdate"),g=n(y),m=t("object-assign"),A=n(m),k=function(){function t(){r(this,t),this._slot=null,this._videoSlot=null,this._subscribers={},this._attributes={companions:"",desiredBitrate:256,duration:30,remainingTime:-1,expanded:!1,icons:!1,linear:!0,skippableState:!1,viewMode:"normal",width:0,height:0,volume:1},this.previousAttributes=(0,A.default)({},this._attributes),this._quartileEvents=[{event:"AdVideoStart",position:0},{event:"AdVideoFirstQuartile",position:25},{event:"AdVideoMidpoint",position:50},{event:"AdSkippableStateChange",position:65,hook:s.bind(this)},{event:"AdVideoThirdQuartile",position:75},{event:"AdVideoComplete",position:100}],this._lastQuartilePosition=this._quartileEvents[0],this._parameters={}}return d(t,[{key:"set",value:function(t,e){this.previousAttributes[t]=this._attributes[t],this._attributes[t]=e}},{key:"handshakeVersion",value:function(t){return"2.0"}},{key:"initAd",value:function(t,e,i,n,r,s){this._attributes.width=t,this._attributes.height=e,this._attributes.viewMode=i,this._attributes.desiredBitrate=n,this._slot=s.slot,this._videoSlot=s.videoSlot,this._style=(0,h.default)("ad.css"),u.call(this),this._videoSlot.addEventListener("timeupdate",g.default.bind(this),!1),this._videoSlot.addEventListener("ended",_.default.bind(this),!1),p.default.call(this,"AdLoaded")}},{key:"startAd",value:function(){this._videoSlot.play(),this._ui={},p.default.call(this,"AdStarted")}},{key:"stopAd",value:function(){this._destroyed||(v.$removeAll.call(this),p.default.call(this,"AdStopped"))}},{key:"skipAd",value:function(){this._destroyed||this._attributes.skippableState&&(v.$removeAll.call(this),p.default.call(this,"AdSkipped"),p.default.call(this,"AdStopped"))}},{key:"resizeAd",value:function(t,e,i){this._attributes.width=t,this._attributes.height=e,this._attributes.viewMode=i,p.default.call(this,"AdSizeChange")}},{key:"pauseAd",value:function(){this._videoSlot.pause(),p.default.call(this,"AdPaused")}},{key:"resumeAd",value:function(){this._videoSlot.play(),p.default.call(this,"AdPlaying")}},{key:"expandAd",value:function(){this.set("expanded",!0),p.default.call(this,"AdExpandedChange")}},{key:"collapseAd",value:function(){this.set("expanded",!1),p.default.call(this,"AdExpandedChange")}},{key:"subscribe",value:function(t,e,i){this._subscribers[e]||(this._subscribers[e]=[]),this._subscribers[e].push({callback:t,context:i})}},{key:"unsubscribe",value:function(t,e){var i=this._subscribers[e];Array.isArray(i)&&(this._subscribers[e]=i.filter(function(e){return t!==e}))}},{key:"getAdLinear",value:function(){return this._attributes.linear}},{key:"getAdWidth",value:function(){return this._attributes.width}},{key:"getAdHeight",value:function(){return this._attributes.height}},{key:"getAdExpanded",value:function(){return this._attributes.expanded}},{key:"getAdSkippableState",value:function(){return this._attributes.skippableState}},{key:"getAdRemainingTime",value:function(){return this._attributes.remainingTime}},{key:"getAdDuration",value:function(){return this._attributes.duration}},{key:"getAdVolume",value:function(){return this._attributes.volume}},{key:"getAdCompanions",value:function(){return this._attributes.companions}},{key:"getAdIcons",value:function(){return this._attributes.icons}},{key:"setAdVolume",value:function(t){if(this.previousAttributes.volume!==t){if(0>t||t>1)return o("volume is not valid");this.set("volume",t),this._videoSlot.volume=t,p.default.call(this,"AdVolumeChange")}}}]),t}();i.default=k},{"./handler/vast-ended":2,"./handler/vast-timeupdate":3,"./toggles":5,"./trigger":6,"./util/load-css":7,"object-assign":1}],5:[function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function r(t){o.call(this,t),s.call(this,t),this._attributes.expandAd=t,this._attributes.remainingTime=t?-2:-1,l.default.call(this,"AdExpandedChange"),l.default.call(this,"AdDurationChange")}function s(t){t?this._videoSlot.pause():this._videoSlot.play()}function o(t){function e(){return t?"block":"none"}this._ui.interact.style.display=e(),this._ui.xBtn.style.display=e()}function u(){this._destroyed=!0,this._videoSlot.src="",this._style.parentElement.removeChild(this._style),this._slot.innerHTML="",this._ui=null}Object.defineProperty(i,"__esModule",{value:!0}),i.$toggleExpand=r,i.$togglePlay=s,i.$toggleUI=o,i.$removeAll=u;var a=t("./trigger"),l=n(a)},{"./trigger":6}],6:[function(t,e,i){"use strict";Object.defineProperty(i,"__esModule",{value:!0}),i.default=function(t,e){var i=this._subscribers[t]||[];i.forEach(function(t){t.callback.apply(t.context,e)})}},{}],7:[function(t,e,i){"use strict";Object.defineProperty(i,"__esModule",{value:!0}),i.default=function(t){var e=document.createElement("link");return e.rel="stylesheet",e.href=t,parent.document.body.appendChild(e),e}},{}],8:[function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(i,"__esModule",{value:!0});var u=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),a=t("vpaid-ad/src/linear"),l=n(a),d=t("vpaid-ad/src/trigger"),c=n(d),h=function(t){function e(t){r(this,e);var i=s(this,Object.getPrototypeOf(e).call(this,t));return i.bridgeId=t.bridgeId,i}return o(e,t),u(e,[{key:"initAd",value:function(t,e,i,n,r,s){this._attributes.width=t,this._attributes.height=e,this._attributes.viewMode=i,this._attributes.desiredBitrate=n,this._slot=s.slot,this._videoSlot=s.videoSlot,this.renderSlot_(),c.default.call(this,"AdLoaded")}}]),e}(l.default);i.default=h,h.prototype.renderSlot_=function(){var t=this._slot&&"DIV"===this._slot.tagName;t||(this._slot=document.createElement("div"),document.body||(document.body=document.createElement("body")),document.body.appendChild(this._slot)),this._slot.innerHTML='\n    <canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>\n  '}},{"vpaid-ad/src/linear":4,"vpaid-ad/src/trigger":6}]},{},[8]);
+require=function e(t,i,n){function r(a,s){if(!i[a]){if(!t[a]){var u="function"==typeof require&&require;if(!s&&u)return u(a,!0);if(o)return o(a,!0);var d=new Error("Cannot find module '"+a+"'");throw d.code="MODULE_NOT_FOUND",d}var l=i[a]={exports:{}};t[a][0].call(l.exports,function(e){var i=t[a][1][e];return r(i?i:e)},l,l.exports,e,t,i,n)}return i[a].exports}for(var o="function"==typeof require&&require,a=0;a<n.length;a++)r(n[a]);return r}({1:[function(e,t,i){"use strict";t.exports=function(e){if("string"!=typeof e)throw new TypeError("Expected a string");e=e.replace(/^#/,""),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);var t=parseInt(e,16);return[t>>16,t>>8&255,255&t]}},{}],2:[function(e,t,i){function n(){}n.prototype={on:function(e,t,i){var n=this.e||(this.e={});return(n[e]||(n[e]=[])).push({fn:t,ctx:i}),this},once:function(e,t,i){function n(){r.off(e,n),t.apply(i,arguments)}var r=this;return n._=t,this.on(e,n,i)},emit:function(e){var t=[].slice.call(arguments,1),i=((this.e||(this.e={}))[e]||[]).slice(),n=0,r=i.length;for(n;n<r;n++)i[n].fn.apply(i[n].ctx,t);return this},off:function(e,t){var i=this.e||(this.e={}),n=i[e],r=[];if(n&&t)for(var o=0,a=n.length;o<a;o++)n[o].fn!==t&&n[o].fn._!==t&&r.push(n[o]);return r.length?i[e]=r:delete i[e],this}},t.exports=n},{}],3:[function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(){this._destroyed=!0,this._videoSlot.src="",this._slot.innerHTML="",this._ui=null}function s(e,t){e.width=t[0],e.height=t[1],e.style&&(e.style.width=t[0]+"px",e.style.height=t[1]+"px")}var u=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),d=e("tiny-emitter"),l=e("./vpaid-methods.json"),c=e("./video-tracker");t.exports=function(e){function t(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];n(this,t);var i=r(this,Object.getPrototypeOf(t).call(this));return i.emitVpaidMethodInvocations(),i._ui={},i.quartileIndexEmitted=-1,i.hasEngaged=!1,i._attributes={companions:"",desiredBitrate:256,duration:30,remainingTime:-1,expanded:!1,icons:!1,linear:!0,adSkippableState:!1,viewMode:"normal",width:0,height:0,volume:1},i.previousAttributes=Object.assign({},i._attributes),i._options=e,i._options.videos=i._options.videos||[],i}return o(t,e),u(t,[{key:"set",value:function(e,t){this.previousAttributes[e]=this._attributes[e],this._attributes[e]=t}},{key:"handshakeVersion",value:function(e){return"2.0"}},{key:"initAd",value:function(e,t,i,n,r,o){var a=this;return this._attributes.width=e,this._attributes.height=t,this._attributes.viewMode=i,this._attributes.desiredBitrate=n,this._slot=o.slot,this._videoSlot=o.videoSlot,this._videoSlot?this._slot?(s(this._videoSlot,[this._attributes.width,this._attributes.height]),this.setSupportedVideo(this._options.videos).then(function(){a.emit("AdLoaded")}).catch(function(e){a.emit("AdLog",e),a.emit("AdLoaded")}),void(this.videoTracker=new c(this._videoSlot,this))):this.emit("AdError","Slot is invalid"):this.emit("AdError","Video slot is invalid")}},{key:"setVideoSource",value:function(e,t){var i=this;return new Promise(function(n,r){"undefined"==typeof i._videoSlot.onloadeddata?n():i._videoSlot.onloadeddata=function(){n()},i._videoSlot.onerror=function(i){var n=void 0;switch(i.target.error.code){case i.target.error.MEDIA_ERR_ABORTED:n="You aborted the video playback.";break;case i.target.error.MEDIA_ERR_NETWORK:n="A network error caused the video download to fail part-way.";break;case i.target.error.MEDIA_ERR_DECODE:n="The video playback was aborted due to a corruption problem or because the video used features your browser did not support.";break;case i.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:n="The video could not be loaded, either because the server or network failed or because the format is not supported.";break;default:n="An unknown error occurred."}r(n+" Type: "+t+", source: "+e)},i._videoSlot.src=e,i._videoSlot.type=t})}},{key:"getSupportedVideos",value:function(e){var t=document.createElement("video");return e.filter(function(e){return t.canPlayType(e.type)})}},{key:"setSupportedVideo",value:function(e){var t=this;return new Promise(function(i,n){var r=t.getSupportedVideos(e);r[0]?t.setVideoSource(r[0].url,r[0].type).then(function(){i()}).catch(function(e){n(e)}):n("no supported video found")})}},{key:"startAd",value:function(){var e=this;"undefined"==typeof this._videoSlot.onloadeddata?this.emit("AdStarted"):this._videoSlot.onloadeddata=function(){e.emit("AdStarted")},this._videoSlot.load()}},{key:"stopAd",value:function(){this._destroyed||(a.call(this),this.emit("AdStopped"))}},{key:"skipAd",value:function(){if(!this._destroyed){if(!this._attributes.adSkippableState)return!1;a.call(this),this.emit("AdSkipped"),this.emit("AdStopped")}}},{key:"resizeAd",value:function(e,t,i){this._attributes.width=e,this._attributes.height=t,this._attributes.viewMode=i,this.emit("AdSizeChange")}},{key:"pauseAd",value:function(){this._videoSlot.pause(),this.emit("AdPaused")}},{key:"resumeAd",value:function(){this._videoSlot.play(),this.emit("AdPlaying")}},{key:"expandAd",value:function(){this.hasEngaged=!0,this.set("expanded",!0),this.emit("AdExpandedChange")}},{key:"collapseAd",value:function(){this.set("expanded",!1),this.emit("AdExpandedChange")}},{key:"subscribe",value:function(e,t,i){this.on(t,e,i)}},{key:"unsubscribe",value:function(e,t){this.off(t,e)}},{key:"getAdLinear",value:function(){return this._attributes.linear}},{key:"getAdWidth",value:function(){return this._attributes.width}},{key:"getAdHeight",value:function(){return this._attributes.height}},{key:"getAdExpanded",value:function(){return this._attributes.expanded}},{key:"getAdadSkippableState",value:function(){return this._attributes.adSkippableState}},{key:"getAdRemainingTime",value:function(){return this.hasEngaged?-2:this._videoSlot.duration-this._videoSlot.currentTime}},{key:"getAdDuration",value:function(){return this.hasEngaged?-2:this._videoSlot.duration}},{key:"getAdSkippableState",value:function(){return this._attributes.adSkippableState}},{key:"getAdVolume",value:function(){return this._attributes.volume}},{key:"getAdCompanions",value:function(){return this._attributes.companions}},{key:"getAdIcons",value:function(){return this._attributes.icons}},{key:"setAdVolume",value:function(e){if(this.previousAttributes.volume!==e){if(e<0||e>1)return this.emit("AdError","volume is not valid");this.set("volume",e),this._videoSlot.volume=e,this.emit("AdVolumeChange")}}},{key:"emitVpaidMethodInvocations",value:function(){var e=this;l.forEach(function(t){var i=e[t];e[t]=function(){for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];return e.emit.apply(e,[t+"()"].concat(r)),i.apply(e,r)}},this)}}]),t}(d)},{"./video-tracker":4,"./vpaid-methods.json":6,"tiny-emitter":2}],4:[function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),o=e("./vpaid-life-cycle"),a=[{value:0,name:o[0]},{value:.25,name:o[1]},{value:.5,name:o[2]},{value:.75,name:o[3]}];t.exports=function(){function e(t,i){var r=arguments.length<=2||void 0===arguments[2]?"AdVideo":arguments[2];n(this,e),this.el=t,this.emitter=i,this.prefix=r,this.quartileIndexEmitted=-1,this.el.addEventListener("timeupdate",this.handleTimeupdate.bind(this)),this.el.addEventListener("ended",this.handleEnded.bind(this))}return r(e,[{key:"emit",value:function(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];var n=this.prefix+t[0];return this.emitter.emit.apply(this.emitter,[n].concat(t.splice(1)))}},{key:"handleTimeupdate",value:function(){var e=this.quartileIndexEmitted+1,t=a[e];t&&this.el.currentTime/this.el.duration>t.value&&(this.emit(t.name),this.quartileIndexEmitted=e)}},{key:"handleEnded",value:function(){this.emit(o[4]),this.el.removeEventListener("timeupdate",this.handleTimeupdate),this.el.removeEventListener("ended",this.handleEnded)}}]),e}()},{"./vpaid-life-cycle":5}],5:[function(e,t,i){"use strict";t.exports=["Start","FirstQuartile","Midpoint","ThirdQuartile","Complete"]},{}],6:[function(e,t,i){t.exports=["handshakeVersion","initAd","startAd","stopAd","skipAd","resizeAd","pauseAd","resumeAd","expandAd","collapseAd","getAdLinear","getAdWidth","getAdHeight","getAdExpanded","getAdadSkippableState","getAdRemainingTime","getAdDuration","getAdVolume","getAdCompanions","getAdIcons","setAdVolume"]},{}],7:[function(e,t,i){"use strict";function n(e,t){var i=document.createElement("script");return i.src=e,i.type="text/javascript",i.onload=t,i}Object.defineProperty(i,"__esModule",{value:!0}),i.default=n},{}],"animate-vpaid-bridge":[function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(i,"__esModule",{value:!0});var s=function(){function e(e,t){var i=[],n=!0,r=!1,o=void 0;try{for(var a,s=e[Symbol.iterator]();!(n=(a=s.next()).done)&&(i.push(a.value),!t||i.length!==t);n=!0);}catch(e){r=!0,o=e}finally{try{!n&&s.return&&s.return()}finally{if(r)throw o}}return i}return function(t,i){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),u=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),d=function e(t,i,n){null===t&&(t=Function.prototype);var r=Object.getOwnPropertyDescriptor(t,i);if(void 0===r){var o=Object.getPrototypeOf(t);return null===o?void 0:e(o,i,n)}if("value"in r)return r.value;var a=r.get;if(void 0!==a)return a.call(n)},l=e("./util/createScript"),c=n(l),h=e("../node_modules/vpaid-ad/src/linear"),p=e("hex-rgb"),f=function(e){function t(e){r(this,t);var i=o(this,Object.getPrototypeOf(t).call(this,e));return i.bridgeId=e.bridgeId,i.createjsUri=e.createjsUri,i.animateJs=e.animateJs,i.basePath=e.basePath,i.once("AdStarted",function(){i._videoSlot.play()}),i}return a(t,e),u(t,[{key:"initAd",value:function(e,i,n,r,o,a){var s=this;this._attributes.width=e,this._attributes.height=i,this._attributes.viewMode=n,this._attributes.desiredBitrate=r,this._slot=a.slot,this._videoSlot=a.videoSlot,this.renderSlot_(function(){s.canvas=document.getElementById("canvas"),s.images=images||{},s.loader=new createjs.LoadQueue(!1,s.basePath),s.loader.addEventListener("fileload",s.handleFileLoad.bind(s)),s.loader.addEventListener("complete",function(e){s.handleComplete(e)}),d(Object.getPrototypeOf(t.prototype),"initAd",s).call(s,e,i,n,r,o,a),0===lib.properties.manifest.length?s.initStage():s.loader.loadManifest(lib.properties.manifest)})}},{key:"handleFileLoad",value:function(e){"image"==e.item.type&&(images[e.item.id]=e.result)}},{key:"initStage",value:function(){this.exportRoot=new lib[this.bridgeId];var e=p(lib.properties.color),t=s(e,3),i=t[0],n=t[1],r=t[2];this.canvas.style.backgroundColor="rgba("+i+", "+n+", "+r+", "+lib.properties.opacity,console.log(this.canvas.style.backgroundColor),this.stage=new createjs.Stage(this.canvas),this.exportRoot.__elan__=this,this.stage.addChild(this.exportRoot),this.stage.enableMouseOver(),createjs.Ticker.setFPS(lib.properties.fps),createjs.Ticker.addEventListener("tick",this.stage),this.resizeCanvas(!1,"both",!1,1)}},{key:"handleComplete",value:function(e){for(var t=e.target,i=lib.ssMetadata,n=0;n<i.length;n++)ss[i[n].name]=new createjs.SpriteSheet({images:[t.getResult(i[n].name)],frames:i[n].frames});this.initStage()}},{key:"resizeCanvas",value:function(e,t,i,n){var r=lib.properties.width,o=lib.properties.height,a=window.innerWidth,s=window.innerHeight,u=window.devicePixelRatio,d=a/r,l=s/o,c=1;e&&("width"===t&&this.lastW==a||"height"===t&&this.lastH==s?c=this.lastS:i?1===n?c=Math.min(d,l):2===n&&(c=Math.max(d,l)):(a<r||s<o)&&(c=Math.min(d,l))),this.canvas.width=r*u*c,this.canvas.height=o*u*c,this.canvas.style.width=r*c+"px",this.canvas.style.height=o*c+"px",this.stage.scaleX=u*c,this.stage.scaleY=u*c,this.lastW=a,this.lastH=s,this.lastS=c}}]),t}(h);i.default=f,f.prototype.renderSlot_=function(e){var t=this,i=this._slot&&"DIV"===this._slot.tagName,n=(0,c.default)(this.createjsUri,function(){i||(t._slot=document.createElement("div"),document.body||(document.body=document.createElement("body")),document.body.appendChild(t._slot)),t._slot.innerHTML='\n      <canvas id="canvas" width="550" height="400"></canvas>\n    ';var n=(0,c.default)(t.animateJs,function(){e()});document.body.appendChild(n)});document.body.appendChild(n)}},{"../node_modules/vpaid-ad/src/linear":3,"./util/createScript":7,"hex-rgb":1}]},{},[]);

package.json

 {
   "name": "animate-vpaid-bridge",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "description": "",
@@ -12,7 +12,8 @@ "main": "src/index.js",
     "lint": "standard src/**/*.js",
-    "browserify": "browserify src/index.js -o dist/animate-vpaid-bridge.js",
-    "browserify-example": "browserify src/examples/sample-1.js -o examples/sample-1.js",
-    "uglify": "uglifyjs dist/animate-vpaid-bridge.js -o dist/animate-vpaid-bridge.min.js -c -m --screw-ie8",
-    "build": "npm run browserify && npm run uglify",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "npm run browserify && npm run uglify && npm run browserify-examples",
+    "browserify": "browserify -r ./src/index.js:animate-vpaid-bridge -o dist/animate-vpaid-bridge.js",
+    "browserify-kahweetest": "browserify src/examples/kahweetest.js -o dist/examples/ad-tags/kahweetest.js",
+    "browserify-motion": "browserify src/examples/motion.js -o dist/examples/ad-tags/motion.js",
+    "browserify-examples": "npm run browserify-motion && npm run browserify-kahweetest",
+    "uglify": "uglifyjs dist/animate-vpaid-bridge.js -o dist/animate-vpaid-bridge.min.js -c -m --screw-ie8"
   },
@@ -30,12 +31,21 @@ "repository": {
   "dependencies": {
-    "vpaid-ad": "^1.0.10"
+    "hex-rgb": "^1.0.0",
+    "tiny-emitter": "^1.1.0",
+    "vpaid-ad": "^2.0.7"
   },
   "devDependencies": {
-    "babel-core": "^6.5.2",
-    "babel-preset-es2015": "^6.5.0",
-    "babelify": "^7.2.0",
-    "browserify": "^13.0.0",
-    "mocha": "^2.4.5",
-    "standard": "^6.0.5",
-    "uglify-js": "^2.6.1"
+    "babel-core": "^6.13.2",
+    "babel-plugin-external-helpers": "^6.8.0",
+    "babel-preset-es2015": "^6.13.2",
+    "babel-preset-es2015-rollup": "^1.2.0",
+    "babelify": "^7.3.0",
+    "browserify": "^13.1.0",
+    "mocha": "^3.0.2",
+    "rollup": "^0.34.10",
+    "rollup-plugin-babel": "^2.6.1",
+    "rollup-plugin-commonjs": "^3.3.1",
+    "rollup-plugin-json": "^2.0.1",
+    "rollup-plugin-node-resolve": "^2.0.0",
+    "standard": "^7.1.2",
+    "uglify-js": "^2.7.1"
   },
@@ -42,0 +52,0 @@ "keywords": [

README.md

 # animate-vpaid-bridge
 
-Proof of concept of bridging between Adobe Animate CC and VPAID advertisements. Open issues to give your comments.
+Bridges between Adobe Animate CC and VPAID advertisements. Open issues to give your comments.
 
+[![Build Status](https://travis-ci.org/kahwee/animate-vpaid-bridge.svg?branch=master)](https://travis-ci.org/kahwee/animate-vpaid-bridge)
+
 # Usage
@@ -13,3 +15,3 @@
       {
-        src: '<YOURVIDEOURL>',
+        url: '<YOURVIDEOURL>',
         type: 'video/mp4'
@@ -19,3 +21,4 @@ }
     createjsUri: 'https://code.createjs.com/createjs-2015.11.26.min.js',
-    animateJs: 'https://s3.amazonaws.com/animate-vpaid-bridge/kahweetest.js',
+    basePath: 'https://s3.amazonaws.com/animate-vpaid-bridge/dist/examples/exports/',
+    animateJs: 'https://s3.amazonaws.com/animate-vpaid-bridge/dist/examples/exports/kahweetest.js',
     bridgeId: 'kahweetest'
@@ -28,6 +31,11 @@ })
 
-VAST ad tag: https://s3.amazonaws.com/animate-vpaid-bridge/sample-1.xml
+VAST with VPAID ad tag: 
 
+* [An elephant moving on screen, click on the shadow](https://s3.amazonaws.com/animate-vpaid-bridge/dist/examples/ad-tags/kahweetest.xml)
+* [A motion tween](https://s3.amazonaws.com/animate-vpaid-bridge/dist/examples/ad-tags/motion.xml)
+
+Try it in [Google IMA Player](https://developers.google.com/interactive-media-ads/docs/sdks/html5/vastinspector) and [JW Player](https://developer.jwplayer.com/tools/ad-tester/)
+
 # License
 
 MIT

src/index.js

@@ -1,4 +0,4 @@
-import Linear from 'vpaid-ad/src/linear'
+const Linear = require('../node_modules/vpaid-ad/src/linear')
+const hexRgb = require('hex-rgb');
 import createScript from './util/createScript'
-import $trigger from 'vpaid-ad/src/trigger'
 
@@ -12,3 +12,6 @@ export default class AnimateVpaidBridge extends Linear {
     this.animateJs = options.animateJs
-    this.mediaFiles = options.mediaFiles || []
+    this.basePath = options.basePath
+    this.once('AdStarted', () => {
+      this._videoSlot.play()
+    })
   }
@@ -24,15 +27,97 @@
     this.renderSlot_(() => {
-      const canvas = document.getElementById('canvas')
-      const exportRoot = new lib[this.bridgeId]()
-      let stage = new createjs.Stage(canvas)
-      stage.addChild(exportRoot)
-      stage.update()
-      createjs.Ticker.setFPS(lib.properties.fps)
-      createjs.Ticker.addEventListener('tick', stage)
-      let supportedVideos = this.mediaFiles.filter((mf) => this._videoSlot.canPlayType(mf.type))
-      this._videoSlot.setAttribute('src', supportedVideos[0].src)
-      $trigger.call(this, 'AdLoaded')
-
+      this.canvas = document.getElementById('canvas')
+      this.images = images || {}
+      this.loader = new createjs.LoadQueue(false, this.basePath)
+      this.loader.addEventListener('fileload', this.handleFileLoad.bind(this))
+      this.loader.addEventListener('complete', (ev) => {
+        this.handleComplete(ev)
+      })
+      super.initAd(
+        width,
+        height,
+        viewMode,
+        desiredBitrate,
+        creativeData,
+        environmentVars
+      )
+      if (lib.properties.manifest.length === 0) {
+        this.initStage()
+      } else {
+        this.loader.loadManifest(lib.properties.manifest)
+      }
     })
   }
+
+  handleFileLoad (ev) {
+    if (ev.item.type == 'image') {
+      images[ev.item.id] = ev.result
+    }
+  }
+
+  initStage () {
+    this.exportRoot = new lib[this.bridgeId]()
+    const [r, g, b] = hexRgb(lib.properties.color);
+    this.canvas.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${lib.properties.opacity}`
+    console.log(this.canvas.style.backgroundColor)
+    this.stage = new createjs.Stage(this.canvas)
+    this.exportRoot.__elan__ = this
+    this.stage.addChild(this.exportRoot)
+    this.stage.enableMouseOver()
+    // Registers the "tick" event listener.
+    createjs.Ticker.setFPS(lib.properties.fps)
+    createjs.Ticker.addEventListener('tick', this.stage)
+    this.resizeCanvas(false, 'both', false, 1)
+  }
+
+  handleComplete (ev) {
+    // This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
+    const queue = ev.target
+    const ssMetadata = lib.ssMetadata
+    for (var i = 0; i < ssMetadata.length; i++) {
+      ss[ssMetadata[i].name] = new createjs.SpriteSheet({
+        images: [queue.getResult(ssMetadata[i].name)],
+        frames: ssMetadata[i].frames
+      })
+    }
+    this.initStage()
+  }
+
+  /**
+   * This bit is from Adobe Animate CC
+   * @return {[type]} [description]
+   */
+  resizeCanvas (isResp, respDim, isScale, scaleType) {
+    const w = lib.properties.width
+    const h = lib.properties.height
+    const iw = window.innerWidth
+    const ih = window.innerHeight
+    const pRatio = window.devicePixelRatio
+    const xRatio = iw / w
+    const yRatio = ih / h
+    let sRatio = 1
+    if (isResp) {
+      if ((respDim === 'width' && this.lastW == iw) || (respDim === 'height' && this.lastH == ih)) {
+        sRatio = this.lastS
+      }
+      else if (!isScale) {
+        if (iw < w || ih < h)
+          sRatio = Math.min(xRatio, yRatio)
+      }
+      else if (scaleType === 1) {
+        sRatio = Math.min(xRatio, yRatio)
+      }
+      else if (scaleType === 2) {
+        sRatio = Math.max(xRatio, yRatio)
+      }
+    }
+    this.canvas.width = w * pRatio * sRatio
+    this.canvas.height = h * pRatio * sRatio
+    this.canvas.style.width = w * sRatio + 'px'
+    this.canvas.style.height = h * sRatio + 'px'
+    this.stage.scaleX = pRatio * sRatio
+    this.stage.scaleY = pRatio * sRatio
+    this.lastW = iw
+    this.lastH = ih
+    this.lastS = sRatio
+  }
 }
@@ -52,3 +137,3 @@
     this._slot.innerHTML = `
-      <canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>
+      <canvas id="canvas" width="550" height="400"></canvas>
     `
@@ -55,0 +140,0 @@ // loads Adobe Animate CC JavaScript

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2913757

increased by4207.49%

Number of package files

25

increased by56.25%

Lines of code

3627

increased by168.87%

Number of low quality alerts

1

decreased by-66.67%

Number of lines in readme file

39

increased by25.81%

Worsened metrics

Dependency count

3

increased by200%

Dev dependency count

14

increased by100%

Number of low supply chain risk alerts

8

increased by33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedhex-rgb@^1.0.0

• + Addedtiny-emitter@^1.1.0

• + Addedhex-rgb@1.0.0(transitive)

• + Addedtiny-emitter@1.2.02.1.0(transitive)

• + Addedvpaid-ad@2.3.1(transitive)

• - Removedvpaid-ad@1.0.14(transitive)

• Updatedvpaid-ad@^2.0.7