@mjhls/mjh-framework 1.0.239 → 1.0.241

package/dist/cjs/index.js

@@ -7,10 +7,12 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
 var _toObject = require('./_to-object-329a650b.js');
 require('./web.dom.iterable-0998bdc3.js');
-var inherits$2 = require('./inherits-5b5ca8db.js');
-var toConsumableArray = require('./toConsumableArray-7e4caf3c.js');
+var debounce = require('./debounce-783eb233.js');
+var main = require('./main-0ea1b808.js');
+var toConsumableArray = require('./toConsumableArray-f05a306f.js');
 require('./core.get-iterator-method-e049ca4a.js');
 var _extends$2 = require('./extends-e94dbea5.js');
+var inherits$2 = require('./inherits-9898af5a.js');
 var React = require('react');
 var React__default = _interopDefault(React);
 var index = require('./index-fa3cec70.js');
@@ -23,17 +25,16 @@ var visibilitySensor = require('./visibility-sensor-b72d9527.js');
 var Link = _interopDefault(require('next/link'));
 var Router = require('next/router');
 var Router__default = _interopDefault(Router);
-var debounce = require('./debounce-bbca43c4.js');
 require('react-dom');
 var index$1 = require('./index-be0c82be.js');
 require('./index-fa0fb52c.js');
-var main = require('./main-d9a1b014.js');
 var entities = require('./entities-310b46ee.js');
 var slicedToArray = require('./slicedToArray-e38fb29d.js');
-var AdSlot = require('./AdSlot-1fe1c231.js');
+var AdSlot = require('./AdSlot-c472fff6.js');
+require('./promise-b96c61f8.js');
 var DeckContent = require('./DeckContent.js');
-require('./get-af2516a4.js');
-var GridContent = require('./GridContent-21bc198f.js');
+require('./get-1f91592f.js');
+var GridContent = require('./GridContent-463c504f.js');
 var DeckQueue = require('./DeckQueue.js');
 require('react-bootstrap/Media');
 var ThumbnailCard = require('./ThumbnailCard.js');
@@ -44,14 +45,14 @@ var reactBootstrap = require('react-bootstrap');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 var index_esm = require('./index.esm-340d3792.js');
 var VideoSeriesListing = require('./VideoSeriesListing.js');
-var MasterDeck = require('./MasterDeck-f8fbac3c.js');
+var MasterDeck = require('./MasterDeck.js');
 var Button = _interopDefault(require('react-bootstrap/Button'));
 var PublicationDeck = require('./PublicationDeck.js');
 var IssueDeck = require('./IssueDeck.js');
 require('react-bootstrap/Badge');
 var IssueContentDeck = require('./IssueContentDeck.js');
 var Spinner = _interopDefault(require('react-bootstrap/Spinner'));
-var TemplateNormal = require('./Normal-c89b709d.js');
+var TemplateNormal = require('./Normal-0f06cc52.js');
 require('react-bootstrap/ListGroup');
 var Head = _interopDefault(require('next/head'));
 var Accordion = _interopDefault(require('react-bootstrap/Accordion'));
@@ -69,17 +70,6 @@ var DropdownButton = _interopDefault(require('react-bootstrap/DropdownButton'));
 var Dropdown = _interopDefault(require('react-bootstrap/Dropdown'));
 var Ustream = require('./Ustream-85b14a8d.js');
 
-var $JSON = _toObject._core.JSON || (_toObject._core.JSON = { stringify: JSON.stringify });
-var stringify = function stringify(it) { // eslint-disable-line no-unused-vars
-  return $JSON.stringify.apply($JSON, arguments);
-};
-
-var stringify$1 = _commonjsHelpers.createCommonjsModule(function (module) {
-module.exports = { "default": stringify, __esModule: true };
-});
-
-var _JSON$stringify = _commonjsHelpers.unwrapExports(stringify$1);
-
 var momentTimezone = _commonjsHelpers.createCommonjsModule(function (module) {
 //! moment-timezone.js
 //! version : 0.5.31
@@ -1631,12 +1621,12 @@ var latest = {
 };
 
 var latest$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  version: version,
-  zones: zones,
-  links: links,
-  countries: countries,
-  'default': latest
+	__proto__: null,
+	version: version,
+	zones: zones,
+	links: links,
+	countries: countries,
+	'default': latest
 });
 
 var require$$1 = _commonjsHelpers.getCjsExportFromNamespace(latest$1);
@@ -1646,10 +1636,166 @@ var moment = module.exports = momentTimezone;
 moment.tz.load(require$$1);
 });
 
+var js_cookie = _commonjsHelpers.createCommonjsModule(function (module, exports) {
+(function (factory) {
+	var registeredInModuleLoader;
+	{
+		module.exports = factory();
+		registeredInModuleLoader = true;
+	}
+	if (!registeredInModuleLoader) {
+		var OldCookies = window.Cookies;
+		var api = window.Cookies = factory();
+		api.noConflict = function () {
+			window.Cookies = OldCookies;
+			return api;
+		};
+	}
+}(function () {
+	function extend () {
+		var i = 0;
+		var result = {};
+		for (; i < arguments.length; i++) {
+			var attributes = arguments[ i ];
+			for (var key in attributes) {
+				result[key] = attributes[key];
+			}
+		}
+		return result;
+	}
+
+	function decode (s) {
+		return s.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
+	}
+
+	function init (converter) {
+		function api() {}
+
+		function set (key, value, attributes) {
+			if (typeof document === 'undefined') {
+				return;
+			}
+
+			attributes = extend({
+				path: '/'
+			}, api.defaults, attributes);
+
+			if (typeof attributes.expires === 'number') {
+				attributes.expires = new Date(new Date() * 1 + attributes.expires * 864e+5);
+			}
+
+			// We're using "expires" because "max-age" is not supported by IE
+			attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
+
+			try {
+				var result = JSON.stringify(value);
+				if (/^[\{\[]/.test(result)) {
+					value = result;
+				}
+			} catch (e) {}
+
+			value = converter.write ?
+				converter.write(value, key) :
+				encodeURIComponent(String(value))
+					.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
+
+			key = encodeURIComponent(String(key))
+				.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
+				.replace(/[\(\)]/g, escape);
+
+			var stringifiedAttributes = '';
+			for (var attributeName in attributes) {
+				if (!attributes[attributeName]) {
+					continue;
+				}
+				stringifiedAttributes += '; ' + attributeName;
+				if (attributes[attributeName] === true) {
+					continue;
+				}
+
+				// Considers RFC 6265 section 5.2:
+				// ...
+				// 3.  If the remaining unparsed-attributes contains a %x3B (";")
+				//     character:
+				// Consume the characters of the unparsed-attributes up to,
+				// not including, the first %x3B (";") character.
+				// ...
+				stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
+			}
+
+			return (document.cookie = key + '=' + value + stringifiedAttributes);
+		}
+
+		function get (key, json) {
+			if (typeof document === 'undefined') {
+				return;
+			}
+
+			var jar = {};
+			// To prevent the for loop in the first place assign an empty array
+			// in case there are no cookies at all.
+			var cookies = document.cookie ? document.cookie.split('; ') : [];
+			var i = 0;
+
+			for (; i < cookies.length; i++) {
+				var parts = cookies[i].split('=');
+				var cookie = parts.slice(1).join('=');
+
+				if (!json && cookie.charAt(0) === '"') {
+					cookie = cookie.slice(1, -1);
+				}
+
+				try {
+					var name = decode(parts[0]);
+					cookie = (converter.read || converter)(cookie, name) ||
+						decode(cookie);
+
+					if (json) {
+						try {
+							cookie = JSON.parse(cookie);
+						} catch (e) {}
+					}
+
+					jar[name] = cookie;
+
+					if (key === name) {
+						break;
+					}
+				} catch (e) {}
+			}
+
+			return key ? jar[key] : jar;
+		}
+
+		api.set = set;
+		api.get = function (key) {
+			return get(key, false /* read as raw */);
+		};
+		api.getJSON = function (key) {
+			return get(key, true /* read as json */);
+		};
+		api.remove = function (key, attributes) {
+			set(key, '', extend(attributes, {
+				expires: -1
+			}));
+		};
+
+		api.defaults = {};
+
+		api.withConverter = init;
+
+		return api;
+	}
+
+	return init(function () {});
+}));
+});
+
 var clientId = process.env.CVENT_CLIENT_ID;
 var clientSecret = process.env.CVENT_CLIENT_SECRET;
 var corsProxy = 'https://cors-anywhere.herokuapp.com/';
 var currentTime = momentTimezone$1().toISOString();
+var itemsPerPage = 10;
 
 var EventsDeck = function EventsDeck(_ref) {
   var _ref$autoScroll = _ref.autoScroll,
@@ -1680,8 +1826,8 @@ var EventsDeck = function EventsDeck(_ref) {
 
   var _useState7 = React.useState(null),
       _useState8 = slicedToArray._slicedToArray(_useState7, 2),
-      nextPagingToken = _useState8[0],
-      setNextPagingToken = _useState8[1];
+      nextPageLink = _useState8[0],
+      setNextPageLink = _useState8[1];
 
   var _useState9 = React.useState(true),
       _useState10 = slicedToArray._slicedToArray(_useState9, 2),
@@ -1690,41 +1836,37 @@ var EventsDeck = function EventsDeck(_ref) {
 
   var _useState11 = React.useState(1),
       _useState12 = slicedToArray._slicedToArray(_useState11, 2),
-      page = _useState12[0],
-      setPage = _useState12[1];
+      currentPage = _useState12[0],
+      setCurrentPage = _useState12[1];
 
-  var _useState13 = React.useState(1),
-      _useState14 = slicedToArray._slicedToArray(_useState13, 2),
-      currentPage = _useState14[0],
-      setCurrentPage = _useState14[1];
+  var currentPageRef = React.useRef(currentPage);
+
+  var getEvents = function getEvents(params) {
+    var url = params.url;
 
-  var getEvents = function getEvents() {
-    var itemsPerPage = 10;
-    var url = corsProxy + 'https://api-platform.cvent.com/event/v1/events/filter?limit=' + itemsPerPage;
     fetch(url, {
       headers: {
         Accept: 'application/json',
         'x-api-key': clientId,
         Authorization: 'Bearer ' + accessToken
       },
-      body: _JSON$stringify({ filter: filter }),
+      body: AdSlot._JSON$stringify({ filter: filter }),
       method: 'POST'
     }).then(function (response) {
       return response.json();
     }).then(function (events) {
       setIsLoading(false);
-      var newData = events.data.map(function (item) {
-        return _extends$2._extends({}, item, {
-          pageNumber: page
+      if (events.data && events.data.length > 0) {
+        var newData = events.data.map(function (item) {
+          return _extends$2._extends({}, item, {
+            pageNumber: currentPage
+          });
         });
-      });
-      console.log(events.paging);
-      if (newData.length > 0) {
         setData(function (prevData) {
           return [].concat(toConsumableArray._toConsumableArray(prevData), toConsumableArray._toConsumableArray(newData));
         });
-        setNextPagingToken(events.paging.nextToken ? events.paging.nextToken : null);
-        setScrolling(true);
+        setNextPageLink(events.paging._links.next ? events.paging._links.next.href : null);
+        newData.length === itemsPerPage ? setScrolling(true) : setScrolling(false);
       } else {
         setScrolling(false);
       }
@@ -1733,83 +1875,59 @@ var EventsDeck = function EventsDeck(_ref) {
 
   React.useEffect(function () {
     // load initial data
-    if (accessToken && page === 1 && currentPage === 1) {
-      getEvents();
+    if (accessToken && currentPage === 1) {
+      var initailUrl = 'https://api-platform.cvent.com/event/v1/events/filter?limit=' + itemsPerPage;
+      getEvents({ url: initailUrl });
+    }
+  }, [accessToken, currentPage, filter]);
+
+  React.useEffect(function () {
+    // load more events
+    if (accessToken && nextPageLink && currentPage !== 1 && currentPage !== currentPageRef.current) {
+      getEvents({ url: nextPageLink });
     }
-  }, [accessToken, filter, page, currentPage]);
+  }, [currentPage]);
 
   React.useEffect(function () {
     // reset state when filter changes
     setIsLoading(true);
     setData([]);
-    setPage(1);
     setCurrentPage(1);
+    currentPageRef.current = 1;
   }, [filter]);
 
   React.useEffect(function () {
     // get access token
-    var encodedData = window.btoa(clientId + ':' + clientSecret);
-    var url = corsProxy + 'https://api-platform.cvent.com/ea/oauth2/token';
-    fetch(url, {
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        Authorization: 'Basic ' + encodedData
-      },
-      method: 'POST',
-      body: 'grant_type=client_credentials&client_id=' + clientId
-    }).then(function (response) {
-      return response.json();
-    }).then(function (json) {
-      return setAccessToken(json.access_token);
-    }).catch(function (e) {
-      return console.log(e);
-    });
-  }, []);
-
-  var loadMore = debounce.debounce_1(function () {
-    setPage(function (prevPage) {
-      return prevPage + 1;
-    });
-  }, 0);
-
-  React.useEffect(function () {
-    // load more events
-    page !== 1 && page !== currentPage && loadMoreEvents();
-  }, [page]);
-
-  var loadMoreEvents = function loadMoreEvents() {
-    console.log(nextPagingToken, 'nextPagingToken');
-    if (nextPagingToken) {
-      var url = corsProxy + 'https://api-platform.cvent.com/event/v1/events/filter?token=' + nextPagingToken;
+    var cventAccessToken = js_cookie.get('cvent_access_token');
+    if (cventAccessToken) {
+      setAccessToken(cventAccessToken);
+    } else {
+      var encodedData = window.btoa(clientId + ':' + clientSecret);
+      var url = corsProxy + 'https://api-platform.cvent.com/ea/oauth2/token';
       fetch(url, {
         headers: {
-          Accept: 'application/json',
-          'x-api-key': clientId,
-          Authorization: 'Bearer ' + accessToken
+          'Content-Type': 'application/x-www-form-urlencoded',
+          Authorization: 'Basic ' + encodedData
         },
-        body: _JSON$stringify({ filter: filter }),
-        method: 'POST'
+        method: 'POST',
+        body: 'grant_type=client_credentials&client_id=' + clientId
       }).then(function (response) {
         return response.json();
-      }).then(function (events) {
-        var newData = events.data.map(function (item) {
-          return _extends$2._extends({}, item, {
-            pageNumber: page
-          });
-        });
-        console.log(events.paging);
-        if (newData.length > 0) {
-          setData(function (prevData) {
-            return [].concat(toConsumableArray._toConsumableArray(prevData), toConsumableArray._toConsumableArray(newData));
-          });
-          setNextPagingToken(events.paging.nextToken ? events.paging.nextToken : null);
-          setScrolling(true);
-        } else {
-          setScrolling(false);
-        }
+      }).then(function (json) {
+        var inOneHour = new Date(new Date().getTime() + 60 * 60 * 1000);
+        js_cookie.set('cvent_access_token', json.access_token, { expires: inOneHour });
+        setAccessToken(json.access_token);
+      }).catch(function (e) {
+        return console.log(e);
       });
     }
-  };
+  }, []);
+
+  var loadMore = debounce.debounce_1(function () {
+    setCurrentPage(function (prevCurrentPage) {
+      return prevCurrentPage + 1;
+    });
+  }, 0);
 
   var changePageNumber = function changePageNumber(pageNumber) {
     if (seoPaginate) {
@@ -1817,7 +1935,6 @@ var EventsDeck = function EventsDeck(_ref) {
       var qrIndex = path.indexOf('?');
       var pathname = router.pathname;
       var queryString = '';
-
       if (qrIndex > 0) {
         path = path.substring(1, qrIndex);
 
@@ -1842,10 +1959,10 @@ var EventsDeck = function EventsDeck(_ref) {
 
       pageNumber = parseInt(pageNumber);
 
-      if (currentPage !== pageNumber) {
+      if (pageNumber !== currentPageRef.current) {
         index.lib_3.refresh();
 
-        setCurrentPage(pageNumber);
+        currentPageRef.current = pageNumber;
         if (path[0] !== '/') {
           path = '/' + path;
         }
@@ -2019,891 +2136,84 @@ var EventsDeck = function EventsDeck(_ref) {
     );
   }
 
-  if (data.length > 0) {
-    return React__default.createElement(
-      'div',
-      { className: 'contentDeck' },
-      autoScroll ? React__default.createElement(
-        React__default.Fragment,
-        null,
-        React__default.createElement(
-          visibilitySensor.InfiniteScroll,
-          { dataLength: data.length, next: loadMore, hasMore: scrolling, scrollThreshold: 0.9 },
-          React__default.createElement(
-            Container,
-            null,
-            cardLoader()
-          )
-        ),
-        React__default.createElement(
-          'noscript',
-          null,
-          renderManualPagination()
-        )
-      ) : React__default.createElement(
-        React__default.Fragment,
-        null,
-        React__default.createElement(
-          Container,
-          null,
-          cardLoader()
-        ),
-        React__default.createElement(
-          'div',
-          { style: { padding: '0px 10px' } },
-          scrolling ? React__default.createElement(
-            'button',
-            {
-              style: { margin: 'auto', width: '100%' },
-              onClick: function onClick(e) {
-                loadMore();
-              } },
-            'Load More'
-          ) : React__default.createElement(
-            'p',
-            { style: { textAlign: 'center' } },
-            React__default.createElement(
-              'b',
-              null,
-              'End of data'
-            )
-          )
-        ),
-        React__default.createElement(
-          'noscript',
-          null,
-          renderManualPagination()
-        )
-      )
-    );
-  } else {
-    return React__default.createElement(
-      'div',
-      null,
-      React__default.createElement(
-        'div',
-        null,
-        'No events found '
-      )
-    );
-  }
-};
-
-var runtime = _commonjsHelpers.createCommonjsModule(function (module) {
-/**
- * Copyright (c) 2014-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-!(function(global) {
-
-  var Op = Object.prototype;
-  var hasOwn = Op.hasOwnProperty;
-  var undefined$1; // More compressible than void 0.
-  var $Symbol = typeof Symbol === "function" ? Symbol : {};
-  var iteratorSymbol = $Symbol.iterator || "@@iterator";
-  var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
-  var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
-  var runtime = global.regeneratorRuntime;
-  if (runtime) {
-    {
-      // If regeneratorRuntime is defined globally and we're in a module,
-      // make the exports object identical to regeneratorRuntime.
-      module.exports = runtime;
-    }
-    // Don't bother evaluating the rest of this file if the runtime was
-    // already defined globally.
-    return;
-  }
-
-  // Define the runtime globally (as expected by generated code) as either
-  // module.exports (if we're in a module) or a new, empty object.
-  runtime = global.regeneratorRuntime =  module.exports ;
-
-  function wrap(innerFn, outerFn, self, tryLocsList) {
-    // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
-    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
-    var generator = Object.create(protoGenerator.prototype);
-    var context = new Context(tryLocsList || []);
-
-    // The ._invoke method unifies the implementations of the .next,
-    // .throw, and .return methods.
-    generator._invoke = makeInvokeMethod(innerFn, self, context);
-
-    return generator;
-  }
-  runtime.wrap = wrap;
-
-  // Try/catch helper to minimize deoptimizations. Returns a completion
-  // record like context.tryEntries[i].completion. This interface could
-  // have been (and was previously) designed to take a closure to be
-  // invoked without arguments, but in all the cases we care about we
-  // already have an existing method we want to call, so there's no need
-  // to create a new function object. We can even get away with assuming
-  // the method takes exactly one argument, since that happens to be true
-  // in every case, so we don't have to touch the arguments object. The
-  // only additional allocation required is the completion record, which
-  // has a stable shape and so hopefully should be cheap to allocate.
-  function tryCatch(fn, obj, arg) {
-    try {
-      return { type: "normal", arg: fn.call(obj, arg) };
-    } catch (err) {
-      return { type: "throw", arg: err };
-    }
-  }
-
-  var GenStateSuspendedStart = "suspendedStart";
-  var GenStateSuspendedYield = "suspendedYield";
-  var GenStateExecuting = "executing";
-  var GenStateCompleted = "completed";
-
-  // Returning this object from the innerFn has the same effect as
-  // breaking out of the dispatch switch statement.
-  var ContinueSentinel = {};
-
-  // Dummy constructor functions that we use as the .constructor and
-  // .constructor.prototype properties for functions that return Generator
-  // objects. For full spec compliance, you may wish to configure your
-  // minifier not to mangle the names of these two functions.
-  function Generator() {}
-  function GeneratorFunction() {}
-  function GeneratorFunctionPrototype() {}
-
-  // This is a polyfill for %IteratorPrototype% for environments that
-  // don't natively support it.
-  var IteratorPrototype = {};
-  IteratorPrototype[iteratorSymbol] = function () {
-    return this;
-  };
-
-  var getProto = Object.getPrototypeOf;
-  var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
-  if (NativeIteratorPrototype &&
-      NativeIteratorPrototype !== Op &&
-      hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
-    // This environment has a native %IteratorPrototype%; use it instead
-    // of the polyfill.
-    IteratorPrototype = NativeIteratorPrototype;
-  }
-
-  var Gp = GeneratorFunctionPrototype.prototype =
-    Generator.prototype = Object.create(IteratorPrototype);
-  GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
-  GeneratorFunctionPrototype.constructor = GeneratorFunction;
-  GeneratorFunctionPrototype[toStringTagSymbol] =
-    GeneratorFunction.displayName = "GeneratorFunction";
-
-  // Helper for defining the .next, .throw, and .return methods of the
-  // Iterator interface in terms of a single ._invoke method.
-  function defineIteratorMethods(prototype) {
-    ["next", "throw", "return"].forEach(function(method) {
-      prototype[method] = function(arg) {
-        return this._invoke(method, arg);
-      };
-    });
-  }
-
-  runtime.isGeneratorFunction = function(genFun) {
-    var ctor = typeof genFun === "function" && genFun.constructor;
-    return ctor
-      ? ctor === GeneratorFunction ||
-        // For the native GeneratorFunction constructor, the best we can
-        // do is to check its .name property.
-        (ctor.displayName || ctor.name) === "GeneratorFunction"
-      : false;
-  };
-
-  runtime.mark = function(genFun) {
-    if (Object.setPrototypeOf) {
-      Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
-    } else {
-      genFun.__proto__ = GeneratorFunctionPrototype;
-      if (!(toStringTagSymbol in genFun)) {
-        genFun[toStringTagSymbol] = "GeneratorFunction";
-      }
-    }
-    genFun.prototype = Object.create(Gp);
-    return genFun;
-  };
-
-  // Within the body of any async function, `await x` is transformed to
-  // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
-  // `hasOwn.call(value, "__await")` to determine if the yielded value is
-  // meant to be awaited.
-  runtime.awrap = function(arg) {
-    return { __await: arg };
-  };
-
-  function AsyncIterator(generator) {
-    function invoke(method, arg, resolve, reject) {
-      var record = tryCatch(generator[method], generator, arg);
-      if (record.type === "throw") {
-        reject(record.arg);
-      } else {
-        var result = record.arg;
-        var value = result.value;
-        if (value &&
-            typeof value === "object" &&
-            hasOwn.call(value, "__await")) {
-          return Promise.resolve(value.__await).then(function(value) {
-            invoke("next", value, resolve, reject);
-          }, function(err) {
-            invoke("throw", err, resolve, reject);
-          });
-        }
-
-        return Promise.resolve(value).then(function(unwrapped) {
-          // When a yielded Promise is resolved, its final value becomes
-          // the .value of the Promise<{value,done}> result for the
-          // current iteration. If the Promise is rejected, however, the
-          // result for this iteration will be rejected with the same
-          // reason. Note that rejections of yielded Promises are not
-          // thrown back into the generator function, as is the case
-          // when an awaited Promise is rejected. This difference in
-          // behavior between yield and await is important, because it
-          // allows the consumer to decide what to do with the yielded
-          // rejection (swallow it and continue, manually .throw it back
-          // into the generator, abandon iteration, whatever). With
-          // await, by contrast, there is no opportunity to examine the
-          // rejection reason outside the generator function, so the
-          // only option is to throw it from the await expression, and
-          // let the generator function handle the exception.
-          result.value = unwrapped;
-          resolve(result);
-        }, reject);
-      }
-    }
-
-    var previousPromise;
-
-    function enqueue(method, arg) {
-      function callInvokeWithMethodAndArg() {
-        return new Promise(function(resolve, reject) {
-          invoke(method, arg, resolve, reject);
-        });
-      }
-
-      return previousPromise =
-        // If enqueue has been called before, then we want to wait until
-        // all previous Promises have been resolved before calling invoke,
-        // so that results are always delivered in the correct order. If
-        // enqueue has not been called before, then it is important to
-        // call invoke immediately, without waiting on a callback to fire,
-        // so that the async generator function has the opportunity to do
-        // any necessary setup in a predictable way. This predictability
-        // is why the Promise constructor synchronously invokes its
-        // executor callback, and why async functions synchronously
-        // execute code before the first await. Since we implement simple
-        // async functions in terms of async generators, it is especially
-        // important to get this right, even though it requires care.
-        previousPromise ? previousPromise.then(
-          callInvokeWithMethodAndArg,
-          // Avoid propagating failures to Promises returned by later
-          // invocations of the iterator.
-          callInvokeWithMethodAndArg
-        ) : callInvokeWithMethodAndArg();
-    }
-
-    // Define the unified helper method that is used to implement .next,
-    // .throw, and .return (see defineIteratorMethods).
-    this._invoke = enqueue;
-  }
-
-  defineIteratorMethods(AsyncIterator.prototype);
-  AsyncIterator.prototype[asyncIteratorSymbol] = function () {
-    return this;
-  };
-  runtime.AsyncIterator = AsyncIterator;
-
-  // Note that simple async functions are implemented on top of
-  // AsyncIterator objects; they just return a Promise for the value of
-  // the final result produced by the iterator.
-  runtime.async = function(innerFn, outerFn, self, tryLocsList) {
-    var iter = new AsyncIterator(
-      wrap(innerFn, outerFn, self, tryLocsList)
-    );
-
-    return runtime.isGeneratorFunction(outerFn)
-      ? iter // If outerFn is a generator, return the full iterator.
-      : iter.next().then(function(result) {
-          return result.done ? result.value : iter.next();
-        });
-  };
-
-  function makeInvokeMethod(innerFn, self, context) {
-    var state = GenStateSuspendedStart;
-
-    return function invoke(method, arg) {
-      if (state === GenStateExecuting) {
-        throw new Error("Generator is already running");
-      }
-
-      if (state === GenStateCompleted) {
-        if (method === "throw") {
-          throw arg;
-        }
-
-        // Be forgiving, per 25.3.3.3.3 of the spec:
-        // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
-        return doneResult();
-      }
-
-      context.method = method;
-      context.arg = arg;
-
-      while (true) {
-        var delegate = context.delegate;
-        if (delegate) {
-          var delegateResult = maybeInvokeDelegate(delegate, context);
-          if (delegateResult) {
-            if (delegateResult === ContinueSentinel) continue;
-            return delegateResult;
-          }
-        }
-
-        if (context.method === "next") {
-          // Setting context._sent for legacy support of Babel's
-          // function.sent implementation.
-          context.sent = context._sent = context.arg;
-
-        } else if (context.method === "throw") {
-          if (state === GenStateSuspendedStart) {
-            state = GenStateCompleted;
-            throw context.arg;
-          }
-
-          context.dispatchException(context.arg);
-
-        } else if (context.method === "return") {
-          context.abrupt("return", context.arg);
-        }
-
-        state = GenStateExecuting;
-
-        var record = tryCatch(innerFn, self, context);
-        if (record.type === "normal") {
-          // If an exception is thrown from innerFn, we leave state ===
-          // GenStateExecuting and loop back for another invocation.
-          state = context.done
-            ? GenStateCompleted
-            : GenStateSuspendedYield;
-
-          if (record.arg === ContinueSentinel) {
-            continue;
-          }
-
-          return {
-            value: record.arg,
-            done: context.done
-          };
-
-        } else if (record.type === "throw") {
-          state = GenStateCompleted;
-          // Dispatch the exception by looping back around to the
-          // context.dispatchException(context.arg) call above.
-          context.method = "throw";
-          context.arg = record.arg;
-        }
-      }
-    };
-  }
-
-  // Call delegate.iterator[context.method](context.arg) and handle the
-  // result, either by returning a { value, done } result from the
-  // delegate iterator, or by modifying context.method and context.arg,
-  // setting context.delegate to null, and returning the ContinueSentinel.
-  function maybeInvokeDelegate(delegate, context) {
-    var method = delegate.iterator[context.method];
-    if (method === undefined$1) {
-      // A .throw or .return when the delegate iterator has no .throw
-      // method always terminates the yield* loop.
-      context.delegate = null;
-
-      if (context.method === "throw") {
-        if (delegate.iterator.return) {
-          // If the delegate iterator has a return method, give it a
-          // chance to clean up.
-          context.method = "return";
-          context.arg = undefined$1;
-          maybeInvokeDelegate(delegate, context);
-
-          if (context.method === "throw") {
-            // If maybeInvokeDelegate(context) changed context.method from
-            // "return" to "throw", let that override the TypeError below.
-            return ContinueSentinel;
-          }
-        }
-
-        context.method = "throw";
-        context.arg = new TypeError(
-          "The iterator does not provide a 'throw' method");
-      }
-
-      return ContinueSentinel;
-    }
-
-    var record = tryCatch(method, delegate.iterator, context.arg);
-
-    if (record.type === "throw") {
-      context.method = "throw";
-      context.arg = record.arg;
-      context.delegate = null;
-      return ContinueSentinel;
-    }
-
-    var info = record.arg;
-
-    if (! info) {
-      context.method = "throw";
-      context.arg = new TypeError("iterator result is not an object");
-      context.delegate = null;
-      return ContinueSentinel;
-    }
-
-    if (info.done) {
-      // Assign the result of the finished delegate to the temporary
-      // variable specified by delegate.resultName (see delegateYield).
-      context[delegate.resultName] = info.value;
-
-      // Resume execution at the desired location (see delegateYield).
-      context.next = delegate.nextLoc;
-
-      // If context.method was "throw" but the delegate handled the
-      // exception, let the outer generator proceed normally. If
-      // context.method was "next", forget context.arg since it has been
-      // "consumed" by the delegate iterator. If context.method was
-      // "return", allow the original .return call to continue in the
-      // outer generator.
-      if (context.method !== "return") {
-        context.method = "next";
-        context.arg = undefined$1;
-      }
-
-    } else {
-      // Re-yield the result returned by the delegate method.
-      return info;
-    }
-
-    // The delegate iterator is finished, so forget it and continue with
-    // the outer generator.
-    context.delegate = null;
-    return ContinueSentinel;
-  }
-
-  // Define Generator.prototype.{next,throw,return} in terms of the
-  // unified ._invoke helper method.
-  defineIteratorMethods(Gp);
-
-  Gp[toStringTagSymbol] = "Generator";
-
-  // A Generator should always return itself as the iterator object when the
-  // @@iterator function is called on it. Some browsers' implementations of the
-  // iterator prototype chain incorrectly implement this, causing the Generator
-  // object to not be returned from this call. This ensures that doesn't happen.
-  // See https://github.com/facebook/regenerator/issues/274 for more details.
-  Gp[iteratorSymbol] = function() {
-    return this;
-  };
-
-  Gp.toString = function() {
-    return "[object Generator]";
-  };
-
-  function pushTryEntry(locs) {
-    var entry = { tryLoc: locs[0] };
-
-    if (1 in locs) {
-      entry.catchLoc = locs[1];
-    }
-
-    if (2 in locs) {
-      entry.finallyLoc = locs[2];
-      entry.afterLoc = locs[3];
-    }
-
-    this.tryEntries.push(entry);
-  }
-
-  function resetTryEntry(entry) {
-    var record = entry.completion || {};
-    record.type = "normal";
-    delete record.arg;
-    entry.completion = record;
-  }
-
-  function Context(tryLocsList) {
-    // The root entry object (effectively a try statement without a catch
-    // or a finally block) gives us a place to store values thrown from
-    // locations where there is no enclosing try statement.
-    this.tryEntries = [{ tryLoc: "root" }];
-    tryLocsList.forEach(pushTryEntry, this);
-    this.reset(true);
-  }
-
-  runtime.keys = function(object) {
-    var keys = [];
-    for (var key in object) {
-      keys.push(key);
-    }
-    keys.reverse();
-
-    // Rather than returning an object with a next method, we keep
-    // things simple and return the next function itself.
-    return function next() {
-      while (keys.length) {
-        var key = keys.pop();
-        if (key in object) {
-          next.value = key;
-          next.done = false;
-          return next;
-        }
-      }
-
-      // To avoid creating an additional object, we just hang the .value
-      // and .done properties off the next function object itself. This
-      // also ensures that the minifier will not anonymize the function.
-      next.done = true;
-      return next;
-    };
-  };
-
-  function values(iterable) {
-    if (iterable) {
-      var iteratorMethod = iterable[iteratorSymbol];
-      if (iteratorMethod) {
-        return iteratorMethod.call(iterable);
-      }
-
-      if (typeof iterable.next === "function") {
-        return iterable;
-      }
-
-      if (!isNaN(iterable.length)) {
-        var i = -1, next = function next() {
-          while (++i < iterable.length) {
-            if (hasOwn.call(iterable, i)) {
-              next.value = iterable[i];
-              next.done = false;
-              return next;
-            }
-          }
-
-          next.value = undefined$1;
-          next.done = true;
-
-          return next;
-        };
-
-        return next.next = next;
-      }
-    }
-
-    // Return an iterator with no values.
-    return { next: doneResult };
-  }
-  runtime.values = values;
-
-  function doneResult() {
-    return { value: undefined$1, done: true };
-  }
-
-  Context.prototype = {
-    constructor: Context,
-
-    reset: function(skipTempReset) {
-      this.prev = 0;
-      this.next = 0;
-      // Resetting context._sent for legacy support of Babel's
-      // function.sent implementation.
-      this.sent = this._sent = undefined$1;
-      this.done = false;
-      this.delegate = null;
-
-      this.method = "next";
-      this.arg = undefined$1;
-
-      this.tryEntries.forEach(resetTryEntry);
-
-      if (!skipTempReset) {
-        for (var name in this) {
-          // Not sure about the optimal order of these conditions:
-          if (name.charAt(0) === "t" &&
-              hasOwn.call(this, name) &&
-              !isNaN(+name.slice(1))) {
-            this[name] = undefined$1;
-          }
-        }
-      }
-    },
-
-    stop: function() {
-      this.done = true;
-
-      var rootEntry = this.tryEntries[0];
-      var rootRecord = rootEntry.completion;
-      if (rootRecord.type === "throw") {
-        throw rootRecord.arg;
-      }
-
-      return this.rval;
-    },
-
-    dispatchException: function(exception) {
-      if (this.done) {
-        throw exception;
-      }
-
-      var context = this;
-      function handle(loc, caught) {
-        record.type = "throw";
-        record.arg = exception;
-        context.next = loc;
-
-        if (caught) {
-          // If the dispatched exception was caught by a catch block,
-          // then let that catch block handle the exception normally.
-          context.method = "next";
-          context.arg = undefined$1;
-        }
-
-        return !! caught;
-      }
-
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        var record = entry.completion;
-
-        if (entry.tryLoc === "root") {
-          // Exception thrown outside of any try block that could handle
-          // it, so set the completion value of the entire function to
-          // throw the exception.
-          return handle("end");
-        }
-
-        if (entry.tryLoc <= this.prev) {
-          var hasCatch = hasOwn.call(entry, "catchLoc");
-          var hasFinally = hasOwn.call(entry, "finallyLoc");
-
-          if (hasCatch && hasFinally) {
-            if (this.prev < entry.catchLoc) {
-              return handle(entry.catchLoc, true);
-            } else if (this.prev < entry.finallyLoc) {
-              return handle(entry.finallyLoc);
-            }
-
-          } else if (hasCatch) {
-            if (this.prev < entry.catchLoc) {
-              return handle(entry.catchLoc, true);
-            }
-
-          } else if (hasFinally) {
-            if (this.prev < entry.finallyLoc) {
-              return handle(entry.finallyLoc);
-            }
-
-          } else {
-            throw new Error("try statement without catch or finally");
-          }
-        }
-      }
-    },
-
-    abrupt: function(type, arg) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        if (entry.tryLoc <= this.prev &&
-            hasOwn.call(entry, "finallyLoc") &&
-            this.prev < entry.finallyLoc) {
-          var finallyEntry = entry;
-          break;
-        }
-      }
-
-      if (finallyEntry &&
-          (type === "break" ||
-           type === "continue") &&
-          finallyEntry.tryLoc <= arg &&
-          arg <= finallyEntry.finallyLoc) {
-        // Ignore the finally entry if control is not jumping to a
-        // location outside the try/catch block.
-        finallyEntry = null;
-      }
-
-      var record = finallyEntry ? finallyEntry.completion : {};
-      record.type = type;
-      record.arg = arg;
-
-      if (finallyEntry) {
-        this.method = "next";
-        this.next = finallyEntry.finallyLoc;
-        return ContinueSentinel;
-      }
-
-      return this.complete(record);
-    },
-
-    complete: function(record, afterLoc) {
-      if (record.type === "throw") {
-        throw record.arg;
-      }
-
-      if (record.type === "break" ||
-          record.type === "continue") {
-        this.next = record.arg;
-      } else if (record.type === "return") {
-        this.rval = this.arg = record.arg;
-        this.method = "return";
-        this.next = "end";
-      } else if (record.type === "normal" && afterLoc) {
-        this.next = afterLoc;
-      }
-
-      return ContinueSentinel;
-    },
-
-    finish: function(finallyLoc) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        if (entry.finallyLoc === finallyLoc) {
-          this.complete(entry.completion, entry.afterLoc);
-          resetTryEntry(entry);
-          return ContinueSentinel;
-        }
-      }
-    },
-
-    "catch": function(tryLoc) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        if (entry.tryLoc === tryLoc) {
-          var record = entry.completion;
-          if (record.type === "throw") {
-            var thrown = record.arg;
-            resetTryEntry(entry);
-          }
-          return thrown;
-        }
-      }
-
-      // The context.catch method must only be called with a location
-      // argument that corresponds to a known catch block.
-      throw new Error("illegal catch attempt");
-    },
-
-    delegateYield: function(iterable, resultName, nextLoc) {
-      this.delegate = {
-        iterator: values(iterable),
-        resultName: resultName,
-        nextLoc: nextLoc
-      };
-
-      if (this.method === "next") {
-        // Deliberately forget the last sent value so that we don't
-        // accidentally pass it on to the delegate.
-        this.arg = undefined$1;
-      }
-
-      return ContinueSentinel;
-    }
-  };
-})(
-  // In sloppy mode, unbound `this` refers to the global object, fallback to
-  // Function constructor if we're in global strict mode. That is sadly a form
-  // of indirect eval which violates Content Security Policy.
-  (function() { return this })() || Function("return this")()
-);
-});
-
-/**
- * Copyright (c) 2014-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// This method of obtaining a reference to the global object needs to be
-// kept identical to the way it is obtained in runtime.js
-var g = (function() { return this })() || Function("return this")();
-
-// Use `getOwnPropertyNames` because not all browsers support calling
-// `hasOwnProperty` on the global `self` object in a worker. See #183.
-var hadRuntime = g.regeneratorRuntime &&
-  Object.getOwnPropertyNames(g).indexOf("regeneratorRuntime") >= 0;
-
-// Save the old regeneratorRuntime in case it needs to be restored later.
-var oldRuntime = hadRuntime && g.regeneratorRuntime;
-
-// Force reevalutation of runtime.js.
-g.regeneratorRuntime = undefined;
-
-var runtimeModule = runtime;
-
-if (hadRuntime) {
-  // Restore the original runtime.
-  g.regeneratorRuntime = oldRuntime;
-} else {
-  // Remove the global property added by runtime.js.
-  try {
-    delete g.regeneratorRuntime;
-  } catch(e) {
-    g.regeneratorRuntime = undefined;
-  }
-}
-
-var regenerator = runtimeModule;
-
-var asyncToGenerator = _commonjsHelpers.createCommonjsModule(function (module, exports) {
-
-exports.__esModule = true;
-
-
-
-var _promise2 = _interopRequireDefault(MasterDeck.promise);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = function (fn) {
-  return function () {
-    var gen = fn.apply(this, arguments);
-    return new _promise2.default(function (resolve, reject) {
-      function step(key, arg) {
-        try {
-          var info = gen[key](arg);
-          var value = info.value;
-        } catch (error) {
-          reject(error);
-          return;
-        }
-
-        if (info.done) {
-          resolve(value);
-        } else {
-          return _promise2.default.resolve(value).then(function (value) {
-            step("next", value);
-          }, function (err) {
-            step("throw", err);
-          });
-        }
-      }
-
-      return step("next");
-    });
-  };
+  if (data.length > 0) {
+    return React__default.createElement(
+      'div',
+      { className: 'contentDeck' },
+      autoScroll ? React__default.createElement(
+        React__default.Fragment,
+        null,
+        React__default.createElement(
+          visibilitySensor.InfiniteScroll,
+          { dataLength: data.length, next: loadMore, hasMore: scrolling, scrollThreshold: 0.9 },
+          React__default.createElement(
+            Container,
+            null,
+            cardLoader()
+          )
+        ),
+        React__default.createElement(
+          'noscript',
+          null,
+          renderManualPagination()
+        )
+      ) : React__default.createElement(
+        React__default.Fragment,
+        null,
+        React__default.createElement(
+          Container,
+          null,
+          cardLoader()
+        ),
+        React__default.createElement(
+          'div',
+          { style: { padding: '0px 10px' } },
+          scrolling ? React__default.createElement(
+            'button',
+            {
+              style: { margin: 'auto', width: '100%' },
+              onClick: function onClick(e) {
+                loadMore();
+              } },
+            'Load More'
+          ) : React__default.createElement(
+            'p',
+            { style: { textAlign: 'center' } },
+            React__default.createElement(
+              'b',
+              null,
+              'End of data'
+            )
+          )
+        ),
+        React__default.createElement(
+          'noscript',
+          null,
+          renderManualPagination()
+        )
+      )
+    );
+  } else {
+    return React__default.createElement(
+      'div',
+      null,
+      React__default.createElement(
+        'div',
+        null,
+        'No events found '
+      )
+    );
+  }
 };
-});
-
-var _asyncToGenerator = _commonjsHelpers.unwrapExports(asyncToGenerator);
 
 var corsProxy$1 = 'https://cors-anywhere.herokuapp.com/';
-var itemsPerPage = 10;
+var itemsPerPage$1 = 10;
 
 var CMEDeck = function CMEDeck(_ref) {
   var getData = function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(params) {
+    var _ref2 = AdSlot._asyncToGenerator( /*#__PURE__*/AdSlot.regenerator.mark(function _callee(params) {
       var form, response, result, regex, newData;
-      return regenerator.wrap(function _callee$(_context) {
+      return AdSlot.regenerator.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
@@ -2949,7 +2259,7 @@ var CMEDeck = function CMEDeck(_ref) {
                 });
 
                 setIsLoading(false);
-                newData.length === itemsPerPage ? setScrolling(true) : setScrolling(false);
+                newData.length === itemsPerPage$1 ? setScrolling(true) : setScrolling(false);
                 setData(function (prevData) {
                   return [].concat(toConsumableArray._toConsumableArray(prevData), toConsumableArray._toConsumableArray(newData));
                 });
@@ -3009,7 +2319,7 @@ var CMEDeck = function CMEDeck(_ref) {
       data = _useState8[0],
       setData = _useState8[1];
 
-  var _useState9 = React.useState(router && router.query && router.query.page ? (parseInt(router.query.page) - 1) * itemsPerPage : 0),
+  var _useState9 = React.useState(router && router.query && router.query.page ? (parseInt(router.query.page) - 1) * itemsPerPage$1 : 0),
       _useState10 = slicedToArray._slicedToArray(_useState9, 2),
       from = _useState10[0],
       setFrom = _useState10[1];
@@ -3019,7 +2329,7 @@ var CMEDeck = function CMEDeck(_ref) {
 
   React.useEffect(function () {
     // load initial data
-    getData({ from: from, limit: itemsPerPage });
+    getData({ from: from, limit: itemsPerPage$1 });
   }, []);
 
   var changePageNumber = function changePageNumber(pageNumber) {
@@ -3074,7 +2384,7 @@ var CMEDeck = function CMEDeck(_ref) {
 
   var loadMore = debounce.debounce_1(function () {
     setFrom(function (prevFrom) {
-      return prevFrom + itemsPerPage;
+      return prevFrom + itemsPerPage$1;
     });
     setCurrentPage(function (prevCurrentPage) {
       return prevCurrentPage + 1;
@@ -3084,7 +2394,7 @@ var CMEDeck = function CMEDeck(_ref) {
   React.useEffect(function () {
     if (currentPageRef.current !== currentPage && fromeRef.current !== from) {
       fromeRef.current = from;
-      getData({ from: from, limit: itemsPerPage });
+      getData({ from: from, limit: itemsPerPage$1 });
     }
   }, [currentPage]);
 
@@ -6133,6 +5443,28 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
 
   var id = YoutubeGroup.getYoutubeId(url);
 
+  var _useState = React.useState(false),
+      _useState2 = slicedToArray._slicedToArray(_useState, 2),
+      playReported = _useState2[0],
+      setPlayReported = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+      endReported = _useState4[0],
+      setEndReported = _useState4[1];
+
+  var _useState5 = React.useState(null),
+      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
+      intervalID = _useState6[0],
+      setIntervalID = _useState6[1];
+
+  var _useState7 = React.useState(null),
+      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
+      segmentData = _useState8[0],
+      setSegemntData = _useState8[1];
+
+  var queueProgress = [];
+
   var opts = {
     width: '100%',
     playerVars: {
@@ -6140,7 +5472,77 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
     }
   };
 
-  return React__default.createElement(YouTube, { videoId: id, opts: opts });
+  React.useEffect(function () {
+    if (segmentData) {
+      console.log('Video Segment', segmentData);
+      AdSlot.Beam.report_beam_video('Segment', main.main_16, segmentData.duration, segmentData.current, segmentData.segment);
+    }
+  }, [segmentData]);
+
+  var handlePlayPercent = function handlePlayPercent(player) {
+    var current = player.getCurrentTime();
+    var duration = player.getDuration();
+    var queue = Math.floor(duration / 10);
+    var segment = Math.floor(current / queue);
+
+    if (!queueProgress.includes(segment)) {
+      setSegemntData({
+        current: current,
+        duration: duration,
+        queue: queue,
+        segment: segment
+      });
+      queueProgress.push(segment);
+    }
+  };
+
+  var handleOnPlay = function handleOnPlay(event) {
+    // report play 
+    if (!playReported) {
+      console.log('Video Play', event);
+
+      var player = event.target;
+      var current = player.getCurrentTime();
+      var duration = player.getDuration();
+      var queue = Math.floor(duration / 10);
+      var segment = Math.floor(current / queue);
+
+      AdSlot.Beam.report_beam_video('Play', main.main_16, duration, current, segment);
+      setPlayReported(true);
+      var _intervalID = setInterval(function () {
+        handlePlayPercent(event.target);
+      }, 1000);
+      setIntervalID(_intervalID);
+    }
+  };
+
+  var handleOnEnd = function handleOnEnd(event) {
+    if (!endReported) {
+      console.log('Video End', event);
+      var player = event.target;
+      var current = player.getCurrentTime();
+      var duration = player.getDuration();
+      var queue = Math.floor(duration / 10);
+      var segment = Math.floor(current / queue);
+
+      AdSlot.Beam.report_beam_video('End', main.main_16, duration, current, segment);
+      setEndReported(true);
+      clearInterval(intervalID);
+    }
+  };
+
+  var handleOnPause = function handleOnPause(event) {
+    console.log('Video Pause');
+    var player = event.target;
+    var current = player.getCurrentTime();
+    var duration = player.getDuration();
+    var queue = Math.floor(duration / 10);
+    var segment = Math.floor(current / queue);
+
+    AdSlot.Beam.report_beam_video('Pause', main.main_16, duration, current, segment);
+  };
+
+  return React__default.createElement(YouTube, { videoId: id, opts: opts, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: handleOnEnd });
 };
 
 var Sidebar = function Sidebar(_ref) {
@@ -6665,10 +6067,10 @@ function datasetify(elem) {
         props.push({ name: "data-" + key, value: ds[key] });
     }
 
-    return props.length ? stringify$2(props) : ""
+    return props.length ? stringify(props) : ""
 }
 
-function stringify$2(list) {
+function stringify(list) {
     var attributes = [];
     list.forEach(function (tuple) {
         var name = tuple.name;
@@ -6704,7 +6106,7 @@ function properties(elem) {
         props.push({ name: "class", value: elem.className });
     }
 
-    return props.length ? stringify$2(props) : ""
+    return props.length ? stringify(props) : ""
 }
 
 function escapeText(s) {
@@ -14089,161 +13491,6 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
 
 var Breadcrumbs$1 = React__default.memo(Breadcrumbs);
 
-var js_cookie = _commonjsHelpers.createCommonjsModule(function (module, exports) {
-(function (factory) {
-	var registeredInModuleLoader;
-	{
-		module.exports = factory();
-		registeredInModuleLoader = true;
-	}
-	if (!registeredInModuleLoader) {
-		var OldCookies = window.Cookies;
-		var api = window.Cookies = factory();
-		api.noConflict = function () {
-			window.Cookies = OldCookies;
-			return api;
-		};
-	}
-}(function () {
-	function extend () {
-		var i = 0;
-		var result = {};
-		for (; i < arguments.length; i++) {
-			var attributes = arguments[ i ];
-			for (var key in attributes) {
-				result[key] = attributes[key];
-			}
-		}
-		return result;
-	}
-
-	function decode (s) {
-		return s.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
-	}
-
-	function init (converter) {
-		function api() {}
-
-		function set (key, value, attributes) {
-			if (typeof document === 'undefined') {
-				return;
-			}
-
-			attributes = extend({
-				path: '/'
-			}, api.defaults, attributes);
-
-			if (typeof attributes.expires === 'number') {
-				attributes.expires = new Date(new Date() * 1 + attributes.expires * 864e+5);
-			}
-
-			// We're using "expires" because "max-age" is not supported by IE
-			attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
-
-			try {
-				var result = JSON.stringify(value);
-				if (/^[\{\[]/.test(result)) {
-					value = result;
-				}
-			} catch (e) {}
-
-			value = converter.write ?
-				converter.write(value, key) :
-				encodeURIComponent(String(value))
-					.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
-
-			key = encodeURIComponent(String(key))
-				.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
-				.replace(/[\(\)]/g, escape);
-
-			var stringifiedAttributes = '';
-			for (var attributeName in attributes) {
-				if (!attributes[attributeName]) {
-					continue;
-				}
-				stringifiedAttributes += '; ' + attributeName;
-				if (attributes[attributeName] === true) {
-					continue;
-				}
-
-				// Considers RFC 6265 section 5.2:
-				// ...
-				// 3.  If the remaining unparsed-attributes contains a %x3B (";")
-				//     character:
-				// Consume the characters of the unparsed-attributes up to,
-				// not including, the first %x3B (";") character.
-				// ...
-				stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
-			}
-
-			return (document.cookie = key + '=' + value + stringifiedAttributes);
-		}
-
-		function get (key, json) {
-			if (typeof document === 'undefined') {
-				return;
-			}
-
-			var jar = {};
-			// To prevent the for loop in the first place assign an empty array
-			// in case there are no cookies at all.
-			var cookies = document.cookie ? document.cookie.split('; ') : [];
-			var i = 0;
-
-			for (; i < cookies.length; i++) {
-				var parts = cookies[i].split('=');
-				var cookie = parts.slice(1).join('=');
-
-				if (!json && cookie.charAt(0) === '"') {
-					cookie = cookie.slice(1, -1);
-				}
-
-				try {
-					var name = decode(parts[0]);
-					cookie = (converter.read || converter)(cookie, name) ||
-						decode(cookie);
-
-					if (json) {
-						try {
-							cookie = JSON.parse(cookie);
-						} catch (e) {}
-					}
-
-					jar[name] = cookie;
-
-					if (key === name) {
-						break;
-					}
-				} catch (e) {}
-			}
-
-			return key ? jar[key] : jar;
-		}
-
-		api.set = set;
-		api.get = function (key) {
-			return get(key, false /* read as raw */);
-		};
-		api.getJSON = function (key) {
-			return get(key, true /* read as json */);
-		};
-		api.remove = function (key, attributes) {
-			set(key, '', extend(attributes, {
-				expires: -1
-			}));
-		};
-
-		api.defaults = {};
-
-		api.withConverter = init;
-
-		return api;
-	}
-
-	return init(function () {});
-}));
-});
-
 var SetCookie = function SetCookie(key, value) {
   js_cookie.set(key, value, { expires: 1, sameSite: 'none', secure: true });
 };
@@ -15928,6 +15175,7 @@ var _initialiseProps = function _initialiseProps() {
 };
 
 exports.AdSlot = AdSlot.DFPAdSlot;
+exports.Beam = AdSlot.Beam;
 exports.DeckContent = DeckContent;
 exports.AD = GridContent.AD;
 exports.GridContent = GridContent.GridContent;
@@ -15938,7 +15186,7 @@ exports.GroupDeck = GroupDeck;
 exports.YoutubeGroup = YoutubeGroup.YoutubeGroup;
 exports.QueueDeckExpanded = QueueDeckExpanded;
 exports.VideoSeriesListing = VideoSeriesListing;
-exports.MasterDeck = MasterDeck.MasterDeck;
+exports.MasterDeck = MasterDeck;
 exports.PublicationDeck = PublicationDeck;
 exports.IssueDeck = IssueDeck;
 exports.IssueContentDeck = IssueContentDeck;