@glomex/vast-ima-player/test-page/test-page.bundle.js

Convenience wrapper for advertising video/audio content with Google IMA

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.testPage = {}));
}(this, (function (exports) { 'use strict';

  function ownKeys(object, enumerableOnly) {
    var keys = Object.keys(object);

    if (Object.getOwnPropertySymbols) {
      var symbols = Object.getOwnPropertySymbols(object);

      if (enumerableOnly) {
        symbols = symbols.filter(function (sym) {
          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
        });
      }

      keys.push.apply(keys, symbols);
    }

    return keys;
  }

  function _objectSpread2(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i] != null ? arguments[i] : {};

      if (i % 2) {
        ownKeys(Object(source), true).forEach(function (key) {
          _defineProperty(target, key, source[key]);
        });
      } else if (Object.getOwnPropertyDescriptors) {
        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
      } else {
        ownKeys(Object(source)).forEach(function (key) {
          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
        });
      }
    }

    return target;
  }

  function _defineProperty(obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }

    return obj;
  }

  function _toConsumableArray(arr) {
    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
  }

  function _arrayWithoutHoles(arr) {
    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
  }

  function _iterableToArray(iter) {
    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
  }

  function _unsupportedIterableToArray(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(o);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
  }

  function _arrayLikeToArray(arr, len) {
    if (len == null || len > arr.length) len = arr.length;

    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

    return arr2;
  }

  function _nonIterableSpread() {
    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  }

  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

  function createCommonjsModule(fn) {
    var module = { exports: {} };
  	return fn(module, module.exports), module.exports;
  }

  var formToObject = createCommonjsModule(function (module, exports) {
    (function (global, factory) {
      {
        factory(module, exports);
      }
    })(commonjsGlobal, function (module, exports) {

      exports.default = function (form) {
        var obj = Object.create(null);

        function assign(name, value) {
          if (obj[name] === undefined) {
            obj[name] = value;
          } else if (Array.isArray(obj[name])) {
            obj[name].push(value);
          } else {
            obj[name] = [obj[name], value];
          }
        }

        Array.prototype.slice.call(form.elements).forEach(function (field) {
          if (field.name && !field.disabled && ['file', 'reset', 'button'].indexOf(field.type) === -1) {
            if (field.type === 'select-multiple') {
              Array.prototype.slice.call(field.options).forEach(function (option) {
                if (option.selected) {
                  assign(field.name, option.value);
                }
              });
            } else if (field.type === 'checkbox' || field.type === 'radio') {
              if (field.checked) {
                assign(field.name, field.value);
              }
            } else {
              assign(field.name, field.value);
            }
          }
        });
        return obj;
      };

      module.exports = exports['default'];
    });
  });

  var _window = window,
      vastImaPlayer = _window.vastImaPlayer,
      google = _window.google,
      bulmaSlider = _window.bulmaSlider,
      document = _window.document;
  var LINEAR_AD_URL = 'https://glomex.github.io/vast-ima-player/linear-ad.xml';
  var NOT_FOUND_AD_URL = 'https://glomex.github.io/vast-ima-player/not-found.xml';
  var NONLINEAR_AD_URL = 'https://glomex.github.io/vast-ima-player/nonlinear-ad.xml';
  function connectPageEvents() {
    // Get all "navbar-burger" elements
    var navBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); // Check if there are any navbar burgers

    if (navBurgers.length > 0) {
      // Add a click event on each of them
      navBurgers.forEach(function (el) {
        el.addEventListener('click', function () {
          // Get the target from the "data-target" attribute
          var target = document.getElementById(el.dataset.target); // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"

          el.classList.toggle('is-active');
          target.classList.toggle('is-active');
        });
      });
    }

    var addPlayerForm = document.querySelector('#addPlayerForm');
    addPlayerForm.addEventListener('submit', function (event) {
      event.preventDefault();
      addVastImaPlayer(convertFormToObject(addPlayerForm));
    });
    var vpaidMode = document.querySelector('#vpaidMode');
    var numRedirects = document.querySelector('#numRedirects');
    var locale = document.querySelector('#locale');
    google.ima.settings.setNumRedirects(Number(numRedirects.value));
    google.ima.settings.setLocale(locale.value);
    google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode[vpaidMode.value]);
    vpaidMode.addEventListener('change', function () {
      google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode[vpaidMode.value]);
    });
    numRedirects.addEventListener('change', function () {
      google.ima.settings.setNumRedirects(Number(numRedirects.value));
    });
    locale.addEventListener('change', function () {
      google.ima.settings.setLocale(locale.value);
    });
  }

  function initializeVastImaPlayer() {
    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
        video = _ref.video,
        adContainer = _ref.adContainer,
        enablePreloading = _ref.enablePreloading,
        loadVideoTimeout = _ref.loadVideoTimeout,
        useStyledNonLinearAds = _ref.useStyledNonLinearAds,
        useStyledLinearAds = _ref.useStyledLinearAds,
        autoAlign = _ref.autoAlign,
        renderAdUiElements = _ref.renderAdUiElements,
        useAdContainerAsClickElement = _ref.useAdContainerAsClickElement,
        disableCustomPlaybackForIOS10Plus = _ref.disableCustomPlaybackForIOS10Plus,
        autoResize = _ref.autoResize;

    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
    adsRenderingSettings.enablePreloading = enablePreloading;
    adsRenderingSettings.loadVideoTimeout = loadVideoTimeout;
    adsRenderingSettings.useStyledNonLinearAds = useStyledNonLinearAds;
    adsRenderingSettings.useStyledLinearAds = useStyledLinearAds;
    adsRenderingSettings.autoAlign = autoAlign;

    if (renderAdUiElements) {
      adsRenderingSettings.uiElements = [google.ima.UiElements.COUNTDOWN, google.ima.UiElements.AD_ATTRIBUTION];
    } else {
      adsRenderingSettings.uiElements = [];
    }

    var adImaPlayerOptions = new vastImaPlayer.PlayerOptions();

    if (useAdContainerAsClickElement) {
      adImaPlayerOptions.clickTrackingElement = adContainer;
    }

    adImaPlayerOptions.disableCustomPlaybackForIOS10Plus = Boolean(disableCustomPlaybackForIOS10Plus);
    adImaPlayerOptions.autoResize = autoResize;
    return new vastImaPlayer.Player(google.ima, video, adContainer, adsRenderingSettings, adImaPlayerOptions);
  }

  var instanceNumber = 0;

  function addVastImaPlayer(settings) {
    instanceNumber += 1;
    var domString = "<div class=\"container\">\n  <div class=\"tile is-ancestor is-parent\">\n    <div class=\"tile is-8 is-child box\">\n      <div class=\"playerContainer\">\n        <video ".concat(settings.muted ? 'muted ' : '', "controls playsinline\n          poster=\"https://glomex.github.io/vast-ima-player/big-buck-bunny.png\" preload=\"auto\">\n          <source type=\"video/mp4\" src=\"https://glomex.github.io/vast-ima-player/big-buck-bunny.mp4\">\n        </video>\n        <div class=\"adContainer\"></div>\n      </div>\n      <div class=\"buttons\">\n        <button class=\"button play-button\">\n          <span title=\"Play\" class=\"icon is-small\">\n            <i class=\"fas fa-play\"></i>\n          </span>\n        </button>\n        <button class=\"button pause-button\">\n          <span title=\"Pause\" class=\"icon is-small\">\n            <i class=\"fas fa-pause\"></i>\n          </span>\n        </button>\n        <button class=\"button mute-toggle-button\">\n          <span title=\"").concat(settings.muted ? 'Unmute' : 'Mute', "\" class=\"icon is-small\">\n            <i class=\"fas ").concat(settings.muted ? 'fa-microphone-slash' : 'fa-microphone', "\"></i>\n          </span>\n        </button>\n        <div title=\"Adjust Volume\" class=\"button volume-slider\">\n          <input id=\"sliderWithValue").concat(instanceNumber, "\" class=\"slider has-output\" min=\"0\" max=\"100\" value=\"50\" step=\"1\"\n            type=\"range\">\n          <output for=\"sliderWithValue").concat(instanceNumber, "\">50</output>\n        </div>\n      </div>\n    </div>\n    <div class=\"tile is-child box\">\n      <div class=\"tabs is-boxed\">\n        <ul>\n          <li class=\"is-active ad-tag-url-button\">\n            <a>\n              <span>Tag URL</span>\n            </a>\n          </li>\n          <li class=\"ad-tag-string-button\">\n            <a>\n              <span>Tag String</span>\n            </a>\n          </li>\n          <li class=\"player-log-button\">\n            <a>\n              <span>Log</span>\n            </a>\n          </li>\n        </ul>\n        <button style=\"float:right;\" class=\"delete is-large remove-button\">Delete</button>\n      </div>\n      <div class=\"ad-tag-url-screen\">\n        <div class=\"field\">\n          <label class=\"label\">VAST URL</label>\n          <div class=\"control\">\n            <span class=\"select\">\n              <select name=\"vastUrl\">\n                <option selected value=\"").concat(LINEAR_AD_URL, "\">Linear VAST 4s</option>\n                <option value=\"").concat(NONLINEAR_AD_URL, "\">Nonlinear VAST</option>\n                <option value=\"").concat(NOT_FOUND_AD_URL, "\">Not Found URL</option>\n              </select>\n            </span>\n          </div>\n        </div>\n        <div class=\"buttons\">\n          <button class=\"button is-info\" name=\"playVast\">Play VAST</button>\n          <button class=\"button is-info\" name=\"loadAndPlayVast\">Load VAST</button>\n        </div>\n        <hr>\n        <div class=\"field\">\n          <label class=\"label\">Manual</label>\n          <div class=\"control\">\n            <input name=\"vastUrlManual\" class=\"input\" type=\"text\" placeholder=\"...add your Ad-Tag-URL here ...\">\n          </div>\n        </div>\n        <div class=\"buttons\">\n          <button class=\"button is-info\" name=\"playVastUrlManual\">Play Ad-Tag</button>\n          <button class=\"button is-info\" name=\"loadAndPlayVastUrlManual\">Load Ad-Tag</button>\n        </div>\n      </div>\n      <div class=\"ad-tag-string-screen\" style=\"display:none;\">\n        <div class=\"field\">\n          <label class=\"label\">VMAP</label>\n          <div class=\"control\">\n            <span class=\"select\">\n              <select name=\"vmap\">\n                <option selected value=\"[1, 1, 1, 1, true]\">Ad-Pods: Pre-, Mid- and Postrolls</option>\n                <option value=\"[0, 0, 0, 1, true]\">Ad-Pods: Only Postroll</option>\n                <option value=\"[1, 0, 0, 0, true]\">Ad-Pods: Only Preroll</option>\n                <option value=\"[0, 0, 0, 0, true]\">No Ad Breaks</option>\n                <option value=\"[2, 2, 2, 2, true]\">Ad-Pods 2x: Pre-, Mid- and Postrolls</option>\n                <option value=\"[2, 2, 2, 2, false]\">No Ad-Pods 2x: Pre-, Mid- and Postrolls</option>\n                <option value=\"[1, 1, 1, 1, false, true]\">Ad-Waterfall: Pre- Mid- and Postrolls</option>\n                <option value=\"[2, 0, 0, 0, false, true]\">Ad-Waterfall 2x: Only Preroll</option>\n                <option value=\"[1, 0, 0, 1, false, false, true]\">Nonlinear Preroll and Linear Postroll</option>\n                <option value=\"[1, 0, 0, 0, false, false, true]\">Nonlinear Preroll only</option>\n                <option value=\"[1, 0, 1, 0, false, false, true]\">Nonlinear Preroll and Linear Midroll-2</option>\n              </select>\n            </span>\n          </div>\n        </div>\n        <div class=\"buttons\">\n          <button class=\"button is-info\" name=\"playVmap\">Play VMAP</button>\n          <button class=\"button is-info\" name=\"loadAndPlayVmap\">Load VMAP</button>\n        </div>\n        <hr>\n        <div class=\"field\">\n          <label class=\"label\">Manual</label>\n          <div class=\"control\">\n            <textarea name=\"adsResponseString\" class=\"textarea is-small\" placeholder=\"...enter your ads response here...\"></textarea>\n          </div>\n        </div>\n        <div class=\"buttons\">\n          <button class=\"button is-info\" name=\"playAdsResponseString\">Play</button>\n          <button class=\"button is-info\" name=\"loadAndPlayAdsResponseString\">Load</button>\n        </div>\n      </div>\n      <div class=\"player-log-screen\" style=\"display:none;\">\n        <div class=\"field\">\n          <div class=\"control\">\n            <textarea rows=\"16\" wrap=\"off\" class=\"textarea is-small\" readonly placeholder=\"...player log will appear here...\"></textarea>\n          </div>\n        </div>\n        <button class=\"button is-info\" name=\"resetLog\">Reset</button>\n      </div>\n    </div>\n  </div>\n</div>");
    var element = document.createElement('section');
    element.classList.add('section');
    element.innerHTML = domString;
    document.body.appendChild(element);
    var video = element.querySelector('video');
    var adContainer = element.querySelector('.adContainer');
    var vastImaPlayer = initializeVastImaPlayer(_objectSpread2({
      video: video,
      adContainer: adContainer
    }, settings));
    updateExternalPlayerControls(element, vastImaPlayer);
    connectElementEvents(element, vastImaPlayer, settings);
    bulmaSlider.attach();
  }

  function connectElementEvents(element, vastImaPlayer, settings) {
    var video = element.querySelector('video');
    element.querySelector('.play-button').addEventListener('click', function () {
      vastImaPlayer.play();
    });
    element.querySelector('.pause-button').addEventListener('click', function () {
      vastImaPlayer.pause();
    });
    var muteToggleButton = element.querySelector('.mute-toggle-button');
    var muteToggleButtonSpan = muteToggleButton.querySelector('span');

    var adjustMutedUi = function adjustMutedUi() {
      muteToggleButtonSpan.innerHTML = "<i class=\"fas ".concat(vastImaPlayer.muted ? 'fa-microphone-slash' : 'fa-microphone', "\"></i>");

      if (vastImaPlayer.muted) {
        muteToggleButtonSpan.setAttribute('title', 'Unmute');
      } else {
        muteToggleButtonSpan.setAttribute('title', 'Mute');
      }
    };

    muteToggleButton.addEventListener('click', function () {
      vastImaPlayer.muted = !vastImaPlayer.muted;
    });
    var volumeSlider = element.querySelector('.volume-slider input');
    var volumeSliderOutput = element.querySelector('.volume-slider output');
    volumeSlider.addEventListener('change', function () {
      vastImaPlayer.volume = Number(volumeSlider.value) / 100 || 0;
    });
    video.addEventListener('volumechange', function () {
      volumeSlider.value = video.volume * 100;
      volumeSliderOutput.innerHTML = video.volume * 100;
      adjustMutedUi();
    });
    var adTagUrlButton = element.querySelector('.ad-tag-url-button');
    var adTagUrlScreen = element.querySelector('.ad-tag-url-screen');
    var adTagStringButton = element.querySelector('.ad-tag-string-button');
    var adTagStringScreen = element.querySelector('.ad-tag-string-screen');
    var playerLogButton = element.querySelector('.player-log-button');
    var playerLogScreen = element.querySelector('.player-log-screen');
    adTagUrlButton.addEventListener('click', function () {
      playerLogScreen.style.display = 'none';
      adTagStringScreen.style.display = 'none';
      adTagUrlScreen.style.display = 'block';
      playerLogButton.classList.remove('is-active');
      adTagStringButton.classList.remove('is-active');
      adTagUrlButton.classList.add('is-active');
    });
    adTagStringButton.addEventListener('click', function () {
      playerLogScreen.style.display = 'none';
      adTagStringScreen.style.display = 'block';
      adTagUrlScreen.style.display = 'none';
      playerLogButton.classList.remove('is-active');
      adTagStringButton.classList.add('is-active');
      adTagUrlButton.classList.remove('is-active');
    });
    playerLogButton.addEventListener('click', function () {
      adTagUrlScreen.style.display = 'none';
      adTagStringScreen.style.display = 'none';
      playerLogScreen.style.display = 'block';
      playerLogButton.classList.add('is-active');
      adTagStringButton.classList.remove('is-active');
      adTagUrlButton.classList.remove('is-active');
    });
    connectPlayerEventsToLog(element, vastImaPlayer); // Section: VAST-URL

    var vastUrlSelect = element.querySelector('[name=vastUrl]');
    var playVastButton = element.querySelector('[name=playVast]');
    playVastButton.addEventListener('click', function () {
      var playAdsRequest = new google.ima.AdsRequest();
      playAdsRequest.adTagUrl = vastUrlSelect.value;
      playAdsRequest.vastLoadTimeout = settings.vastLoadTimeout;
      vastImaPlayer.playAds(playAdsRequest);
    });
    var loadAndPlayVast = element.querySelector('[name=loadAndPlayVast]');
    setupLoadAndPlayButton(loadAndPlayVast, 'Start VAST', function () {
      var playAdsRequest = new google.ima.AdsRequest();
      playAdsRequest.adTagUrl = vastUrlSelect.value;
      playAdsRequest.vastLoadTimeout = settings.vastLoadTimeout;
      return playAdsRequest;
    }, vastImaPlayer); // Section: Manual VAST-URL

    var vastUrlManual = element.querySelector('[name=vastUrlManual]');
    var playVastUrlManualButton = element.querySelector('[name=playVastUrlManual]');
    playVastUrlManualButton.addEventListener('click', function () {
      var playAdsRequest = new google.ima.AdsRequest();
      playAdsRequest.adTagUrl = vastUrlManual.value;
      playAdsRequest.vastLoadTimeout = settings.vastLoadTimeout;
      vastImaPlayer.playAds(playAdsRequest);
    });
    var loadAndPlayVastUrlManual = element.querySelector('[name=loadAndPlayVastUrlManual]');
    setupLoadAndPlayButton(loadAndPlayVastUrlManual, 'Start Ad-Tag', function () {
      var playAdsRequest = new google.ima.AdsRequest();
      playAdsRequest.adTagUrl = vastUrlManual.value;
      playAdsRequest.vastLoadTimeout = settings.vastLoadTimeout;
      return playAdsRequest;
    }, vastImaPlayer); // Section: VMAP examples

    var vmapSelect = element.querySelector('[name=vmap]');
    var playVmapButton = element.querySelector('[name=playVmap]');

    var createVmapAdsRequest = function createVmapAdsRequest() {
      var playAdsRequest = new google.ima.AdsRequest();
      var selectedValue = JSON.parse(vmapSelect.value);
      playAdsRequest.vastLoadTimeout = settings.vastLoadTimeout;
      playAdsRequest.adsResponse = constructVmap({
        prerollCount: selectedValue[0],
        midroll1Count: selectedValue[1],
        midroll2Count: selectedValue[2],
        postrollCount: selectedValue[3],
        useAdPods: Boolean(selectedValue[4]),
        useAdWaterfall: Boolean(selectedValue[5]),
        placeNonlinearAdOnPreoll: Boolean(selectedValue[6])
      });
      element.querySelector('[name=adsResponseString]').value = playAdsRequest.adsResponse;
      return playAdsRequest;
    };

    playVmapButton.addEventListener('click', function () {
      vastImaPlayer.playAds(createVmapAdsRequest());
    });
    var loadAndPlayVmap = element.querySelector('[name=loadAndPlayVmap]');
    setupLoadAndPlayButton(loadAndPlayVmap, 'Start VMAP', createVmapAdsRequest, vastImaPlayer); // Section Manual Ads-Response

    var adsResponseString = element.querySelector('[name=adsResponseString]');
    var playAdsResponseString = element.querySelector('[name=playAdsResponseString]');

    var createStringAdsRequest = function createStringAdsRequest() {
      var playAdsRequest = new google.ima.AdsRequest();
      playAdsRequest.adsResponse = adsResponseString.value;
      playAdsRequest.vastLoadTimeout = settings.vastLoadTimeout;
      return playAdsRequest;
    };

    playAdsResponseString.addEventListener('click', function () {
      vastImaPlayer.playAds(createStringAdsRequest());
    });
    var loadAndPlayAdsResponseString = element.querySelector('[name=loadAndPlayAdsResponseString]');
    setupLoadAndPlayButton(loadAndPlayAdsResponseString, 'Start', createStringAdsRequest, vastImaPlayer);
    var removeButton = element.querySelector('.remove-button');
    removeButton.addEventListener('click', function () {
      vastImaPlayer.destroy();
      element.parentNode.removeChild(element);
    });
  }

  function connectPlayerEventsToLog(element, vastImaPlayer) {
    var textarea = element.querySelector('.player-log-screen textarea');
    var resetLogButton = element.querySelector('.player-log-screen button[name="resetLog"]');
    resetLogButton.addEventListener('click', function () {
      textarea.value = '';
    });
    vastImaPlayer.addEventListener('MediaStart', function () {
      textarea.value += 'MediaStart\n';
      textarea.scrollTop = textarea.scrollHeight;
    });
    vastImaPlayer.addEventListener('AdError', function (event) {
      textarea.value += "AdError, ".concat(JSON.stringify({
        errorCode: event.detail.error.errorCode,
        message: event.detail.error.message
      }), "\n");
      textarea.scrollTop = textarea.scrollHeight;
    });
    vastImaPlayer.addEventListener('MediaImpression', function () {
      textarea.value += 'MediaImpression\n';
      textarea.scrollTop = textarea.scrollHeight;
    });
    vastImaPlayer.addEventListener('MediaStop', function () {
      textarea.value += 'MediaStop\n';
      textarea.scrollTop = textarea.scrollHeight;
    });
    vastImaPlayer.addEventListener('AdMetadata', function () {
      textarea.value += "AdMetadata, ".concat(JSON.stringify({
        cuePoints: vastImaPlayer.cuePoints
      }), "\n");
      textarea.scrollTop = textarea.scrollHeight;
    });
    vastImaPlayer.addEventListener('AdStarted', function (event) {
      var adPodInfo = event.detail.ad.getAdPodInfo();
      textarea.value += "AdStarted, ".concat(JSON.stringify(adPodInfo.g), "\n");
      textarea.scrollTop = textarea.scrollHeight;
    });
    vastImaPlayer.addEventListener('AdComplete', function (event) {
      var adPodInfo = event.detail.ad.getAdPodInfo();
      textarea.value += "AdComplete, ".concat(JSON.stringify(adPodInfo.g), "\n");
      textarea.scrollTop = textarea.scrollHeight;
    });
    vastImaPlayer.addEventListener('AdProgress', function (event) {
      textarea.value += "AdProgress, duration: ".concat(vastImaPlayer.duration, ", currentTime: ").concat(vastImaPlayer.currentTime, ", adData: ").concat(JSON.stringify(event.detail.adData), "\n");
      textarea.scrollTop = textarea.scrollHeight;
    });
    vastImaPlayer.addEventListener('AdLog', function (event) {
      textarea.value += "AdLog, adData: ".concat(JSON.stringify(event.detail.adData), "\n");
      textarea.scrollTop = textarea.scrollHeight;
    });
    vastImaPlayer.addEventListener('timeupdate', function () {
      textarea.value += "timeupdate, duration: ".concat(vastImaPlayer.duration, ", currentTime: ").concat(vastImaPlayer.currentTime, "\n");
      textarea.scrollTop = textarea.scrollHeight;
    });
    vastImaPlayer.addEventListener('ended', function () {
      textarea.value += "ended, duration: ".concat(vastImaPlayer.duration, ", currentTime: ").concat(vastImaPlayer.currentTime, "\n");
      textarea.scrollTop = textarea.scrollHeight;
    });
  }

  function updateExternalPlayerControls(element, vastImaPlayer) {
    var currentVolume = String(vastImaPlayer.volume * 100 || 0);
    element.querySelector('.volume-slider input').value = currentVolume;
    element.querySelector('.volume-slider output').innerHTML = currentVolume;
  }

  function setupLoadAndPlayButton(button, startText, createAdsRequest, vastImaPlayer) {
    var currentStart = function currentStart() {};

    var defaultText = button.innerHTML;
    vastImaPlayer.addEventListener('MediaStop', function () {
      button.innerHTML = defaultText;
    });
    button.addEventListener('click', function () {
      if (button.innerHTML === defaultText) {
        button.classList.add('is-loading');
        vastImaPlayer.loadAds(createAdsRequest(), function (_ref2) {
          var start = _ref2.start;
          button.classList.remove('is-loading');
          button.innerHTML = startText;
          currentStart = start;
        });
      } else {
        currentStart();
        button.innerHTML = defaultText;
      }
    });
  }

  function constructVmap(_ref3) {
    var prerollCount = _ref3.prerollCount,
        midroll1Count = _ref3.midroll1Count,
        midroll2Count = _ref3.midroll2Count,
        postrollCount = _ref3.postrollCount,
        _ref3$useAdPods = _ref3.useAdPods,
        useAdPods = _ref3$useAdPods === void 0 ? true : _ref3$useAdPods,
        _ref3$useAdWaterfall = _ref3.useAdWaterfall,
        useAdWaterfall = _ref3$useAdWaterfall === void 0 ? true : _ref3$useAdWaterfall,
        _ref3$placeNonlinearA = _ref3.placeNonlinearAdOnPreoll,
        placeNonlinearAdOnPreoll = _ref3$placeNonlinearA === void 0 ? false : _ref3$placeNonlinearA;
    return "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n  <VMAP xmlns:vmap=\"http://www.iab.net/vmap-1.0\" version=\"1.0\">\n    ".concat(prerollCount ? createAdBreaks('start', prerollCount, useAdPods, useAdWaterfall, placeNonlinearAdOnPreoll) : '', "\n    ").concat(midroll1Count ? createAdBreaks('00:00:10.000', midroll1Count, useAdPods, useAdWaterfall, false) : '', "\n    ").concat(midroll2Count ? createAdBreaks('00:00:20.000', midroll2Count, useAdPods, useAdWaterfall, false) : '', "\n    ").concat(postrollCount ? createAdBreaks('end', postrollCount, useAdPods, useAdWaterfall, false) : '', "\n  </VMAP>");
  }

  function createAdBreaks(position, count, useAdPods, useAdWaterfall, useNonlinearAd) {
    if (useNonlinearAd) {
      return useAdPods ? createVmapAdBreakAsAdPod(position, count, createNonlinearAd) : createIndividualVmapAdBreaks(position, count, createNonlinearAd);
    }

    if (useAdWaterfall) {
      return createIndividualVmapAdBreaks(position, count, createAdWaterfall);
    }

    return useAdPods ? createVmapAdBreakAsAdPod(position, count, createLinearAd) : createIndividualVmapAdBreaks(position, count, createLinearAd);
  }

  function createVast(createAd) {
    var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
    var withSequence = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
    return "<VAST xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"vast.xsd\" version=\"3.0\">\n    ".concat(_toConsumableArray(Array(count)).map(function (item, index) {
      return createAd(withSequence ? index + 1 : undefined);
    }).join(''), "\n  </VAST>");
  }

  function createLinearAd(sequence) {
    return "<Ad".concat(sequence != null ? " sequence=\"".concat(sequence, "\"") : '', ">\n    <Wrapper>\n      <VASTAdTagURI>\n        <![CDATA[").concat(LINEAR_AD_URL, "]]>\n      </VASTAdTagURI>\n    </Wrapper>\n  </Ad>");
  }

  function createNonlinearAd(sequence) {
    return "<Ad".concat(sequence != null ? " sequence=\"".concat(sequence, "\"") : '', ">\n    <Wrapper>\n      <VASTAdTagURI>\n        <![CDATA[").concat(NONLINEAR_AD_URL, "]]>\n      </VASTAdTagURI>\n    </Wrapper>\n  </Ad>");
  }

  function createAdWaterfall() {
    return "<Ad>\n    <Wrapper>\n      <Error>https://error?not-found-ad-url</Error>\n      <VASTAdTagURI>\n        <![CDATA[".concat(NOT_FOUND_AD_URL, "]]>\n      </VASTAdTagURI>\n      <Extensions>\n        <Extension type=\"waterfall\" fallback_index=\"1\"/>\n      </Extensions>\n    </Wrapper>\n  </Ad>\n  <Ad>\n    <InLine>\n      <Error>https://error?broken-mediafile</Error>\n      <Creatives>\n        <Creative>\n          <Linear>\n            <Duration><![CDATA[ 00:00:00 ]]></Duration>\n            <MediaFiles>\n              <MediaFile delivery=\"progressive\" bitrate=\"400\" width=\"0\" height=\"0\" type=\"video/mp4\">\n                <![CDATA[ https://broken-mediafile ]]>\n              </MediaFile>\n            </MediaFiles>\n          </Linear>\n        </Creative>\n      </Creatives>\n      <Extensions>\n        <Extension type=\"waterfall\" fallback_index=\"1\"/>\n      </Extensions>\n    </InLine>\n  </Ad>\n  <Ad>\n    <InLine>\n      <Error>https://error?timeout-mediafile</Error>\n      <Creatives>\n        <Creative>\n          <Linear>\n            <Duration><![CDATA[ 00:00:00 ]]></Duration>\n            <MediaFiles>\n              <MediaFile delivery=\"progressive\" bitrate=\"400\" width=\"0\" height=\"0\" type=\"video/mp4\">\n                <![CDATA[ http://10.255.255.1/will_timeout.mp4 ]]>\n              </MediaFile>\n            </MediaFiles>\n          </Linear>\n        </Creative>\n      </Creatives>\n      <Extensions>\n        <Extension type=\"waterfall\" fallback_index=\"1\"/>\n      </Extensions>\n    </InLine>\n  </Ad>\n  <Ad>\n    <Wrapper>\n      <VASTAdTagURI>\n        <![CDATA[").concat(LINEAR_AD_URL, "]]>\n      </VASTAdTagURI>\n      <Extensions>\n        <Extension type=\"waterfall\" fallback_index=\"1\"/>\n      </Extensions>\n    </Wrapper>\n  </Ad>\n  <Ad>\n    <Wrapper>\n      <!-- this should not be played because there was a valid ad before -->\n      <VASTAdTagURI>\n        <![CDATA[").concat(LINEAR_AD_URL, "]]>\n      </VASTAdTagURI>\n      <Extensions>\n        <Extension type=\"waterfall\" fallback_index=\"1\"/>\n      </Extensions>\n    </Wrapper>\n  </Ad>");
  }

  function createIndividualVmapAdBreaks(position, count, createAd) {
    return _toConsumableArray(Array(count)).map(function () {
      return "<vmap:AdBreak timeOffset=\"".concat(position, "\" breakType=\"linear\">\n    <vmap:AdSource allowMultipleAds=\"true\" followRedirects=\"false\">\n      <vmap:VASTAdData>\n        ").concat(createVast(createAd), "\n      </vmap:VASTAdData>\n    </vmap:AdSource>\n  </vmap:AdBreak>");
    }).join('');
  }

  function createVmapAdBreakAsAdPod(position, count, createAd) {
    return "<vmap:AdBreak timeOffset=\"".concat(position, "\" breakType=\"linear\">\n    <vmap:AdSource allowMultipleAds=\"true\" followRedirects=\"false\">\n      <vmap:VASTAdData>\n        ").concat(createVast(createAd, count, true), "\n      </vmap:VASTAdData>\n    </vmap:AdSource>\n  </vmap:AdBreak>");
  }

  function convertFormToObject(form) {
    var object = formToObject(form);
    Object.keys(object).forEach(function (key) {
      if (object[key] === 'on') {
        object[key] = true;
      }
    });
    return object;
  }

  exports.connectPageEvents = connectPageEvents;

  Object.defineProperty(exports, '__esModule', { value: true });

})));