@mjhls/mjh-framework 1.0.120 → 1.0.122

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React__default, { Component, useState, useEffect, useRef, useLayoutEffect, createElement, createContext } from 'react';
+import React__default, { Component, useState, useEffect, useRef, createElement, createContext } from 'react';
 import PropTypes from 'prop-types';
 import reactDom from 'react-dom';
 import Container from 'react-bootstrap/Container';
@@ -21,6 +21,7 @@ import FormControl from 'react-bootstrap/FormControl';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import NavDropdown from 'react-bootstrap/NavDropdown';
+import ReactPlayer from 'react-player';
 import Pagination from 'react-bootstrap/Pagination';
 import Carousel$1 from 'react-bootstrap/Carousel';
 import Breadcrumb from 'react-bootstrap/Breadcrumb';
@@ -9506,7 +9507,7 @@ var DeckContent = function (_React$Component) {
                 React__default.createElement(
                   Card,
                   { className: 'content-card', style: { flexDirection: mode } },
-                  React__default.createElement(
+                  (row.thumbnail && row.thumbnail.asset || _this.props.defaultImage) && React__default.createElement(
                     Link,
                     { href: _this.mapping[contentCategoryName] + '/[url]', as: _this.mapping[contentCategoryName] + '/' + row.url.current },
                     React__default.createElement(
@@ -10982,7 +10983,7 @@ var GridContent = function (_React$Component) {
                 React__default.createElement(
                   Card,
                   { className: 'content-card', style: { flexDirection: index$$1 === 0 || index$$1 % 4 === 0 ? 'top' : 'row' } },
-                  React__default.createElement(
+                  (row.thumbnail && row.thumbnail.asset || _this2.props.defaultImage) && React__default.createElement(
                     Link,
                     { href: _this2.mapping[contentCategoryName] + '/[url]', as: _this2.mapping[contentCategoryName] + '/' + row.url.current },
                     React__default.createElement(
@@ -11304,7 +11305,7 @@ var DeckQueue = function (_React$Component) {
                   React__default.createElement(
                     Row,
                     { style: { flexDirection: mode } },
-                    React__default.createElement(
+                    (row.thumbnail && row.thumbnail.asset || _this2.props.defaultImage) && React__default.createElement(
                       Col,
                       { md: 12, lg: 4 },
                       React__default.createElement(
@@ -12078,6 +12079,105 @@ var renderAuthor = function renderAuthor(authorDetail, index$$1, length) {
   } else return null;
 };
 
+var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems) {
+  var numberOfItemsBeforeAd = 6;
+  return React__default.createElement(
+    'div',
+    null,
+    data && data.map(function (article, index$$1) {
+      var pageNumber = article.pageNumber || values.page;
+      var contentCategoryName = article.contentCategory ? article.contentCategory.name : 'Articles';
+      return React__default.createElement(
+        React__default.Fragment,
+        { key: article._id ? article._id : index$$1 },
+        React__default.createElement(
+          VisibilitySensor,
+          {
+            key: article._id ? article._id : index$$1,
+            onChange: function onChange(isVisible) {
+              isVisible && changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage);
+            } },
+          React__default.createElement(
+            React__default.Fragment,
+            null,
+            React__default.createElement(
+              Media$1,
+              { key: article._id ? article._id : index$$1, style: { marginBottom: '1.25rem', paddingBottom: '1.25rem', borderBottom: '1px solid #ddd' } },
+              (article.thumbnail && article.thumbnail.asset || defaultImage) && React__default.createElement(
+                Link,
+                { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
+                React__default.createElement(
+                  'a',
+                  { className: 'img-wrapper' },
+                  article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3 img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
+                )
+              ),
+              React__default.createElement(
+                Media$1.Body,
+                null,
+                React__default.createElement(
+                  Link,
+                  { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
+                  React__default.createElement(
+                    'a',
+                    null,
+                    article.title && React__default.createElement(
+                      'h4',
+                      { className: 'card-title', style: { fontWeight: '500', color: 'var(--gray-dark)', marginBottom: '.5rem' } },
+                      article.title
+                    )
+                  )
+                ),
+                showPublished && article.published && React__default.createElement(
+                  'p',
+                  { className: 'card-text', style: { color: 'var(--dark)', marginBottom: '.25rem' } },
+                  moment(article.published).format('MMMM DD, YYYY')
+                ),
+                showAuthor && article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index$$1) {
+                  return renderAuthor(authorDetail, index$$1, article.authorMapping.length);
+                }),
+                showCategory && article.contentCategory && React__default.createElement(
+                  'p',
+                  {
+                    style: {
+                      background: 'var(--highlight)',
+                      color: 'var(--highlight-accent)',
+                      marginBottom: '.25rem',
+                      display: 'inline-block',
+                      padding: '0 .25rem',
+                      fontSize: '.8rem'
+                    } },
+                  article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
+                ),
+                article.summary && React__default.createElement(
+                  'p',
+                  { className: 'pt-2 card-text' },
+                  article.summary
+                )
+              )
+            )
+          )
+        ),
+        main_36 && rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && renderMobileAd(index$$1, numberOfItemsBeforeAd, rightItems)
+      );
+    }),
+    React__default.createElement(
+      'style',
+      { jsx: true },
+      '\n          .img-wrapper img {\n            max-height: 200px;\n            width: 100%;\n            object-fit: cover;\n          }\n          @media only screen and (min-width: 768px) {\n            .img-wrapper {\n              width: 42%;\n            }\n            .img-wrapper > img {\n              padding-right: 1em;\n            }\n          }\n          @media only screen and (max-width: 767px) {\n            .img-wrapper {\n              width: 100%;\n            }\n            .img-wrapper img {\n              padding-bottom: 1em;\n            }\n            .media {\n              flex-direction: column;\n            }\n          }\n        '
+    )
+  );
+};
+
+var renderMobileAd = function renderMobileAd(index$$1, numberOfItemsBeforeAd, rightItems) {
+  var i = ((index$$1 + 1) / numberOfItemsBeforeAd - 1) % rightItems.length;
+  return React__default.createElement(
+    'div',
+    null,
+    rightItems[i].component
+  );
+};
+
 var renderManualPagination = function renderManualPagination(currentPage) {
   return React__default.createElement(
     'div',
@@ -12119,7 +12219,8 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
       showAuthor = props.showAuthor,
       showCategory = props.showCategory,
       imageHeight = props.imageHeight,
-      imageWidth = props.imageWidth;
+      imageWidth = props.imageWidth,
+      rightItems = props.rightItems;
   var initialCurrentPage = props.currentPage,
       showPublished = props.showPublished;
 
@@ -12163,102 +12264,6 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
     }
   }, [values, prevValues, query, client, params, setData, setScrolling, pointer, pointerArray]);
 
-  var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth) {
-    var numberOfItemsBeforeAd = 6;
-    return React__default.createElement(
-      'div',
-      null,
-      data && data.map(function (article, index$$1) {
-        var pageNumber = article.pageNumber || values.page;
-        var contentCategoryName = article.contentCategory ? article.contentCategory.name : 'Articles';
-        return React__default.createElement(
-          React__default.Fragment,
-          { key: article._id ? article._id : index$$1 },
-          React__default.createElement(
-            VisibilitySensor,
-            {
-              key: article._id ? article._id : index$$1,
-              onChange: function onChange(isVisible) {
-                isVisible && changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage);
-              } },
-            React__default.createElement(
-              React__default.Fragment,
-              null,
-              React__default.createElement(
-                Media$1,
-                { key: article._id ? article._id : index$$1, style: { marginBottom: '1.25rem', paddingBottom: '1.25rem', borderBottom: '1px solid #ddd' } },
-                React__default.createElement(
-                  Link,
-                  { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
-                  React__default.createElement(
-                    'a',
-                    null,
-                    article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
-                  )
-                ),
-                React__default.createElement(
-                  Media$1.Body,
-                  null,
-                  React__default.createElement(
-                    Link,
-                    { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
-                    React__default.createElement(
-                      'a',
-                      null,
-                      article.title && React__default.createElement(
-                        'h4',
-                        { className: 'card-title', style: { fontWeight: '500', color: 'var(--gray-dark)', marginBottom: '.5rem' } },
-                        article.title
-                      )
-                    )
-                  ),
-                  showPublished && article.published && React__default.createElement(
-                    'p',
-                    { className: 'card-text', style: { color: 'var(--dark)', marginBottom: '.25rem' } },
-                    moment(article.published).format('MMMM DD, YYYY')
-                  ),
-                  showAuthor && article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index$$1) {
-                    return renderAuthor(authorDetail, index$$1, article.authorMapping.length);
-                  }),
-                  showCategory && article.contentCategory && React__default.createElement(
-                    'p',
-                    {
-                      style: {
-                        background: 'var(--highlight)',
-                        color: 'var(--highlight-accent)',
-                        marginBottom: '.25rem',
-                        display: 'inline-block',
-                        padding: '0 .25rem',
-                        fontSize: '.8rem'
-                      } },
-                    article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
-                  ),
-                  article.summary && React__default.createElement(
-                    'p',
-                    { className: 'pt-2 card-text' },
-                    article.summary
-                  )
-                )
-              )
-            )
-          ),
-          main_36 && props.rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && renderMobileAd(index$$1, numberOfItemsBeforeAd)
-        );
-      })
-    );
-  };
-
-  var renderMobileAd = function renderMobileAd(index$$1, numberOfItemsBeforeAd) {
-    var rightItems = props.rightItems;
-
-    var i = ((index$$1 + 1) / numberOfItemsBeforeAd - 1) % rightItems.length;
-    return React__default.createElement(
-      'div',
-      null,
-      rightItems[i].component
-    );
-  };
-
   return React__default.createElement(
     'div',
     null,
@@ -12273,7 +12278,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
         React__default.createElement(
           Container$1,
           null,
-          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth)
+          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems)
         )
       ),
       React__default.createElement(
@@ -12287,7 +12292,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
       React__default.createElement(
         Container$1,
         null,
-        cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory)
+        cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, rightItems)
       ),
       React__default.createElement(
         'div',
@@ -13448,342 +13453,11 @@ var NavFooter = function NavFooter(props) {
   );
 };
 
-/*!
- * cookie
- * Copyright(c) 2012-2014 Roman Shtylman
- * Copyright(c) 2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/**
- * Module exports.
- * @public
- */
-
-var parse_1 = parse;
-var serialize_1 = serialize;
-
-/**
- * Module variables.
- * @private
- */
-
-var decode = decodeURIComponent;
-var encode = encodeURIComponent;
-var pairSplitRegExp = /; */;
-
-/**
- * RegExp to match field-content in RFC 7230 sec 3.2
- *
- * field-content = field-vchar [ 1*( SP / HTAB ) field-vchar ]
- * field-vchar   = VCHAR / obs-text
- * obs-text      = %x80-FF
- */
-
-var fieldContentRegExp = /^[\u0009\u0020-\u007e\u0080-\u00ff]+$/;
-
-/**
- * Parse a cookie header.
- *
- * Parse the given cookie header string into an object
- * The object has the various cookies as keys(names) => values
- *
- * @param {string} str
- * @param {object} [options]
- * @return {object}
- * @public
- */
-
-function parse(str, options) {
-  if (typeof str !== 'string') {
-    throw new TypeError('argument str must be a string');
-  }
-
-  var obj = {};
-  var opt = options || {};
-  var pairs = str.split(pairSplitRegExp);
-  var dec = opt.decode || decode;
-
-  for (var i = 0; i < pairs.length; i++) {
-    var pair = pairs[i];
-    var eq_idx = pair.indexOf('=');
-
-    // skip things that don't look like key=value
-    if (eq_idx < 0) {
-      continue;
-    }
-
-    var key = pair.substr(0, eq_idx).trim();
-    var val = pair.substr(++eq_idx, pair.length).trim();
-
-    // quoted values
-    if ('"' == val[0]) {
-      val = val.slice(1, -1);
-    }
-
-    // only assign once
-    if (undefined == obj[key]) {
-      obj[key] = tryDecode(val, dec);
-    }
-  }
-
-  return obj;
-}
-
-/**
- * Serialize data into a cookie header.
- *
- * Serialize the a name value pair into a cookie string suitable for
- * http headers. An optional options object specified cookie parameters.
- *
- * serialize('foo', 'bar', { httpOnly: true })
- *   => "foo=bar; httpOnly"
- *
- * @param {string} name
- * @param {string} val
- * @param {object} [options]
- * @return {string}
- * @public
- */
-
-function serialize(name, val, options) {
-  var opt = options || {};
-  var enc = opt.encode || encode;
-
-  if (typeof enc !== 'function') {
-    throw new TypeError('option encode is invalid');
-  }
-
-  if (!fieldContentRegExp.test(name)) {
-    throw new TypeError('argument name is invalid');
-  }
-
-  var value = enc(val);
-
-  if (value && !fieldContentRegExp.test(value)) {
-    throw new TypeError('argument val is invalid');
-  }
-
-  var str = name + '=' + value;
-
-  if (null != opt.maxAge) {
-    var maxAge = opt.maxAge - 0;
-    if (isNaN(maxAge)) throw new Error('maxAge should be a Number');
-    str += '; Max-Age=' + Math.floor(maxAge);
-  }
-
-  if (opt.domain) {
-    if (!fieldContentRegExp.test(opt.domain)) {
-      throw new TypeError('option domain is invalid');
-    }
-
-    str += '; Domain=' + opt.domain;
-  }
-
-  if (opt.path) {
-    if (!fieldContentRegExp.test(opt.path)) {
-      throw new TypeError('option path is invalid');
-    }
-
-    str += '; Path=' + opt.path;
-  }
-
-  if (opt.expires) {
-    if (typeof opt.expires.toUTCString !== 'function') {
-      throw new TypeError('option expires is invalid');
-    }
-
-    str += '; Expires=' + opt.expires.toUTCString();
-  }
-
-  if (opt.httpOnly) {
-    str += '; HttpOnly';
-  }
-
-  if (opt.secure) {
-    str += '; Secure';
-  }
-
-  if (opt.sameSite) {
-    var sameSite = typeof opt.sameSite === 'string'
-      ? opt.sameSite.toLowerCase() : opt.sameSite;
-
-    switch (sameSite) {
-      case true:
-        str += '; SameSite=Strict';
-        break;
-      case 'lax':
-        str += '; SameSite=Lax';
-        break;
-      case 'strict':
-        str += '; SameSite=Strict';
-        break;
-      case 'none':
-        str += '; SameSite=None';
-        break;
-      default:
-        throw new TypeError('option sameSite is invalid');
-    }
-  }
-
-  return str;
-}
-
-/**
- * Try decoding a string using a decoding function.
- *
- * @param {string} str
- * @param {function} decode
- * @private
- */
-
-function tryDecode(str, decode) {
-  try {
-    return decode(str);
-  } catch (e) {
-    return str;
-  }
-}
-
-function hasDocumentCookie() {
-    // Can we get/set cookies on document.cookie?
-    return typeof document === 'object' && typeof document.cookie === 'string';
-}
-function parseCookies(cookies, options) {
-    if (typeof cookies === 'string') {
-        return parse_1(cookies, options);
-    }
-    else if (typeof cookies === 'object' && cookies !== null) {
-        return cookies;
-    }
-    else {
-        return {};
-    }
-}
-function isParsingCookie(value, doNotParse) {
-    if (typeof doNotParse === 'undefined') {
-        // We guess if the cookie start with { or [, it has been serialized
-        doNotParse =
-            !value || (value[0] !== '{' && value[0] !== '[' && value[0] !== '"');
-    }
-    return !doNotParse;
-}
-function readCookie(value, options) {
-    if (options === void 0) { options = {}; }
-    var cleanValue = cleanupCookieValue(value);
-    if (isParsingCookie(cleanValue, options.doNotParse)) {
-        try {
-            return JSON.parse(cleanValue);
-        }
-        catch (e) {
-            // At least we tried
-        }
-    }
-    // Ignore clean value if we failed the deserialization
-    // It is not relevant anymore to trim those values
-    return value;
-}
-function cleanupCookieValue(value) {
-    // express prepend j: before serializing a cookie
-    if (value && value[0] === 'j' && value[1] === ':') {
-        return value.substr(2);
-    }
-    return value;
-}
-
-// We can't please Rollup and TypeScript at the same time
-// Only way to make both of them work
-var objectAssign = require('object-assign');
-var Cookies = /** @class */ (function () {
-    function Cookies(cookies, options) {
-        var _this = this;
-        this.changeListeners = [];
-        this.HAS_DOCUMENT_COOKIE = false;
-        this.cookies = parseCookies(cookies, options);
-        new Promise(function () {
-            _this.HAS_DOCUMENT_COOKIE = hasDocumentCookie();
-        }).catch(function () { });
-    }
-    Cookies.prototype._updateBrowserValues = function (parseOptions) {
-        if (!this.HAS_DOCUMENT_COOKIE) {
-            return;
-        }
-        this.cookies = parse_1(document.cookie, parseOptions);
-    };
-    Cookies.prototype._emitChange = function (params) {
-        for (var i = 0; i < this.changeListeners.length; ++i) {
-            this.changeListeners[i](params);
-        }
-    };
-    Cookies.prototype.get = function (name, options, parseOptions) {
-        if (options === void 0) { options = {}; }
-        this._updateBrowserValues(parseOptions);
-        return readCookie(this.cookies[name], options);
-    };
-    Cookies.prototype.getAll = function (options, parseOptions) {
-        if (options === void 0) { options = {}; }
-        this._updateBrowserValues(parseOptions);
-        var result = {};
-        for (var name_1 in this.cookies) {
-            result[name_1] = readCookie(this.cookies[name_1], options);
-        }
-        return result;
-    };
-    Cookies.prototype.set = function (name, value, options) {
-        var _a;
-        if (typeof value === 'object') {
-            value = JSON.stringify(value);
-        }
-        this.cookies = objectAssign({}, this.cookies, (_a = {}, _a[name] = value, _a));
-        if (this.HAS_DOCUMENT_COOKIE) {
-            document.cookie = serialize_1(name, value, options);
-        }
-        this._emitChange({ name: name, value: value, options: options });
-    };
-    Cookies.prototype.remove = function (name, options) {
-        var finalOptions = (options = objectAssign({}, options, {
-            expires: new Date(1970, 1, 1, 0, 0, 1),
-            maxAge: 0
-        }));
-        this.cookies = objectAssign({}, this.cookies);
-        delete this.cookies[name];
-        if (this.HAS_DOCUMENT_COOKIE) {
-            document.cookie = serialize_1(name, '', finalOptions);
-        }
-        this._emitChange({ name: name, value: undefined, options: options });
-    };
-    Cookies.prototype.addChangeListener = function (callback) {
-        this.changeListeners.push(callback);
-    };
-    Cookies.prototype.removeChangeListener = function (callback) {
-        var idx = this.changeListeners.indexOf(callback);
-        if (idx >= 0) {
-            this.changeListeners.splice(idx, 1);
-        }
-    };
-    return Cookies;
-}());
-
-var Cookies$1 = Cookies;
-// we seem to sometimes get the ES6 version despite requesting cjs here, not sure why
-// this isn't the ideal fix, but it'll do for now
-Cookies$1 = Cookies$1.default || Cookies$1;
-
-function nextCookies(ctx, options) {
-  // Note: Next.js Static export sets ctx.req to a fake request with no headers
-  var header = ctx.req && ctx.req.headers && ctx.req.headers.cookie;
-  var uc = new Cookies$1(header);
-  return uc.getAll(options);
-}
-
-var nextCookies_1 = nextCookies;
-
 var NavMagazine = function NavMagazine(props) {
   /*
   Example Nav with acceptable props
    <MagazineNav
      showLogin
-     loginState={true}
      logo={props.settings.logo}
      dataObject={props.cache.mainNavCache}
      website={website}
@@ -13798,7 +13472,7 @@ var NavMagazine = function NavMagazine(props) {
       website = props.website,
       _props$showLogin = props.showLogin,
       showLogin = _props$showLogin === undefined ? false : _props$showLogin,
-      allCookies = props.allCookies;
+      _props$userData = props.userData;
 
   var navRef = useRef(null);
 
@@ -13812,13 +13486,6 @@ var NavMagazine = function NavMagazine(props) {
       screenWidth = _useState4[0],
       setScreenWidth = _useState4[1];
 
-  var initialLoginState = allCookies.loggedIn;
-
-  var _useState5 = useState(initialLoginState),
-      _useState6 = slicedToArray(_useState5, 2),
-      loginState = _useState6[0],
-      setLoginState = _useState6[1];
-
   useEffect(function () {
     document.addEventListener('scroll', trackScrolling);
     return function () {
@@ -13831,50 +13498,6 @@ var NavMagazine = function NavMagazine(props) {
     setScreenWidth(parseInt(window.innerWidth));
   }, []);
 
-  useLayoutEffect(function () {
-    if (typeof GCN !== 'undefined') {
-      GCN.on('init').then(function (data) {
-        console.log('GCN init...');
-        setLoginState(data.loggedin);
-        if (data.loggedIn) {
-          console.log(' - logged in status');
-          document.cookie = 'loggedIn=' + data.loggedIn + '; path=/';
-        } else {
-          console.log(' - logged out status');
-          document.cookie = 'loggedIn=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT';
-        }
-      });
-
-      GCN.on('login').then(function (data) {
-        setLoginState(data.loggedin);
-        console.log('GCN login...');
-        document.cookie = 'loggedIn=' + data.loggedIn + '; path=/';
-      });
-
-      GCN.on('logout').then(function (data) {
-        setLoginState(data.loggedin);
-        console.log('GCN logout...');
-        document.cookie = 'loggedIn=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT';
-      });
-    } else {
-      console.error('GCN not defined for GCN events');
-    }
-  }, []);
-
-  useEffect(function () {
-    toggleLogin();
-  }, [loginState]);
-
-  var toggleLogin = function toggleLogin() {
-    if (loginState) {
-      document.getElementsByClassName('logged-in').style.display = '';
-      document.getElementsByClassName('logged-out').style.display = 'none';
-    } else {
-      document.getElementsByClassName('logged-in').style.display = 'none';
-      document.getElementsByClassName('logged-out').style.display = '';
-    }
-  };
-
   var trackScrolling = function trackScrolling() {
     var offsetTop = navRef.current.getBoundingClientRect().top;
 
@@ -13887,13 +13510,7 @@ var NavMagazine = function NavMagazine(props) {
 
   var handleLogin = function handleLogin(e) {
     if (typeof GCN !== 'undefined' && GCN && GCN.onecount) {
-      GCN.onecount.login().then(function (result) {
-        console.log('login result: ', result);
-        setLoginState(GCN.onecount.isLoggedIn());
-      }).catch(function (error) {
-        console.log('login error:', error);
-        setLoginState(GCN.onecount.isLoggedIn());
-      });
+      GCN.onecount.login();
     } else {
       console.error('GCN not defined');
     }
@@ -13901,13 +13518,7 @@ var NavMagazine = function NavMagazine(props) {
 
   var handleLogout = function handleLogout(e) {
     if (typeof GCN !== 'undefined' && GCN && GCN.onecount) {
-      GCN.onecount.logout().then(function (result) {
-        console.log('logout result:', result);
-        setLoginState(GCN.onecount.isLoggedIn());
-      }).catch(function (error) {
-        console.log('logout error:', error);
-        setLoginState(GCN.onecount.isLoggedIn());
-      });
+      GCN.onecount.logout();
     } else {
       console.error('GCN not defined');
     }
@@ -13927,7 +13538,7 @@ var NavMagazine = function NavMagazine(props) {
           { id: 'navbar-top', className: 'justify-content-center navbar-top', style: { margin: '0 auto' } },
           showLogin && React__default.createElement(
             Nav.Item,
-            { id: 'nav-mobile-register', className: 'logged-out', style: { display: loginState ? 'none' : '' } },
+            { id: 'nav-mobile-register', className: 'hide-on-login', style: { display: 'none' } },
             React__default.createElement(
               'div',
               { className: 'px-2 py-2', onClick: function onClick(e) {
@@ -13952,7 +13563,7 @@ var NavMagazine = function NavMagazine(props) {
           ),
           showLogin && React__default.createElement(
             Nav.Item,
-            { id: 'nav-mobile-login', className: 'logged-out', style: { display: loginState ? 'none' : '' } },
+            { id: 'nav-mobile-login', className: 'hide-on-login', style: { display: 'none' } },
             React__default.createElement(
               'div',
               { className: 'px-2 py-2 ', onClick: function onClick(e) {
@@ -13964,10 +13575,10 @@ var NavMagazine = function NavMagazine(props) {
           ),
           showLogin && React__default.createElement(
             React__default.Fragment,
-            { className: 'logged-in', style: { display: !loginState ? 'none' : '' } },
+            null,
             React__default.createElement(
               Nav.Item,
-              { id: 'nav-mobile-logout' },
+              { id: 'nav-mobile-logout', className: 'hide-on-logout', style: { display: 'none' } },
               React__default.createElement(
                 'div',
                 { className: 'pl-2 pr-3 py-2 text-right', onClick: function onClick(e) {
@@ -13984,10 +13595,10 @@ var NavMagazine = function NavMagazine(props) {
           { style: { position: 'absolute', right: '15px' }, className: 'justify-content-end rightHeader' },
           showLogin && React__default.createElement(
             React__default.Fragment,
-            { className: 'logged-out', style: { display: loginState ? 'none' : '' } },
+            null,
             React__default.createElement(
               Nav.Item,
-              null,
+              { className: 'hide-on-login', style: { display: 'none' } },
               React__default.createElement(
                 'div',
                 { className: 'px-2 py-2 mr-2', id: 'nav-register', onClick: function onClick(e) {
@@ -13999,7 +13610,7 @@ var NavMagazine = function NavMagazine(props) {
             ),
             React__default.createElement(
               Nav.Item,
-              null,
+              { className: 'hide-on-login', style: { display: 'none' } },
               React__default.createElement(
                 'div',
                 { className: 'px-2 py-2', id: 'nav-login', onClick: function onClick(e) {
@@ -14012,10 +13623,10 @@ var NavMagazine = function NavMagazine(props) {
           ),
           showLogin && React__default.createElement(
             React__default.Fragment,
-            { className: 'logged-in', style: { display: !loginState ? 'none' : '' } },
+            null,
             React__default.createElement(
               Nav.Item,
-              null,
+              { className: 'hide-on-logout', style: { display: 'none' } },
               React__default.createElement(
                 'div',
                 { className: 'px-2 py-2', id: 'nav-logout', onClick: function onClick(e) {
@@ -14154,12 +13765,6 @@ var NavMagazine = function NavMagazine(props) {
   );
 };
 
-NavMagazine.getInitialProps = function (ctx) {
-  return {
-    allCookies: nextCookies_1(ctx)
-  };
-};
-
 var NavNative = function NavNative(props) {
   var logo = props.logo,
       dataObject = props.dataObject,
@@ -15133,7 +14738,7 @@ var ms = function(val, options) {
   options = options || {};
   var type = typeof val;
   if (type === 'string' && val.length > 0) {
-    return parse$1(val);
+    return parse(val);
   } else if (type === 'number' && isNaN(val) === false) {
     return options.long ? fmtLong(val) : fmtShort(val);
   }
@@ -15151,7 +14756,7 @@ var ms = function(val, options) {
  * @api private
  */
 
-function parse$1(str) {
+function parse(str) {
   str = String(str);
   if (str.length > 100) {
     return;
@@ -17566,7 +17171,7 @@ function shouldUseNative() {
 	}
 }
 
-var objectAssign$1 = shouldUseNative() ? Object.assign : function (target, source) {
+var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
 	var from;
 	var to = toObject(target);
 	var symbols;
@@ -17641,7 +17246,7 @@ var buildUrl = function buildUrl(props) {
     throw new Error('Invalid image reference in block, no `_ref` found on `asset`');
   }
 
-  return node(objectAssign$1({
+  return node(objectAssign({
     projectId: projectId,
     dataset: dataset
   }, options.imageOptions || {})).image(node$$1).toString();
@@ -17781,7 +17386,7 @@ var serializers = function (h, serializerOpts) {
       };
     }
 
-    var serializedNode = objectAssign$1({}, span, children);
+    var serializedNode = objectAssign({}, span, children);
     return h(serializers.span, {
       key: span._key || "span-".concat(index),
       node: serializedNode,
@@ -18019,7 +17624,7 @@ function nestLists(blocks) {
         // will mutate the input, and we don't want to blindly clone the entire tree.
         // Clone the last child while adding our new list as the last child of it
         var lastListItem = lastChild(currentList);
-        var newLastChild = objectAssign$1({}, lastListItem, {
+        var newLastChild = objectAssign({}, lastListItem, {
           children: lastListItem.children.concat(newList)
         }); // Swap the last child
 
@@ -18121,7 +17726,7 @@ var generateKeys = function (blocks) {
       return block;
     }
 
-    return objectAssign$1({
+    return objectAssign({
       _key: getStaticKey(block)
     }, block);
   });
@@ -18165,7 +17770,7 @@ var mergeSerializers = function mergeSerializers(defaultSerializers, userSeriali
     if (type === 'function') {
       acc[key] = isDefined(userSerializers[key]) ? userSerializers[key] : defaultSerializers[key];
     } else if (type === 'object') {
-      acc[key] = objectAssign$1({}, defaultSerializers[key], userSerializers[key]);
+      acc[key] = objectAssign({}, defaultSerializers[key], userSerializers[key]);
     } else {
       acc[key] = typeof userSerializers[key] === 'undefined' ? defaultSerializers[key] : userSerializers[key];
     }
@@ -18188,7 +17793,7 @@ var defaults$1 = {
 };
 
 function blocksToNodes(h, properties, defaultSerializers, serializeSpan) {
-  var props = objectAssign$1({}, defaults$1, properties);
+  var props = objectAssign({}, defaults$1, properties);
   var rawBlocks = Array.isArray(props.blocks) ? props.blocks : [props.blocks];
   var keyedBlocks = generateKeys(rawBlocks);
   var blocks = nestLists_1(keyedBlocks, props.listNestMode);
@@ -18672,7 +18277,7 @@ function removeEventListener(type, listener) {
     }
 }
 
-var serialize$1 = serializeNode;
+var serialize = serializeNode;
 
 var voidElements = ["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"];
 
@@ -18974,7 +18579,7 @@ DOMElement.prototype.focus = function _Element_focus() {
 };
 
 DOMElement.prototype.toString = function _Element_toString() {
-    return serialize$1(this)
+    return serialize(this)
 };
 
 DOMElement.prototype.getElementsByClassName = function _Element_getElementsByClassName(classNames) {
@@ -20766,22 +20371,31 @@ var Video = function Video(_ref) {
 var Audio = function Audio(_ref) {
   var node = _ref.node;
 
-  return React__default.createElement(
-    'div',
-    { className: 'd-block text-center mb-3' },
-    React__default.createElement(
-      'audio',
-      { controls: true, controlsList: 'nodownload' },
-      React__default.createElement('source', { src: node.uploadAudio ? node.uploadAudio.asset.url : node.audioFilePth, type: 'audio/ogg' }),
-      React__default.createElement('source', { src: node.uploadAudio ? node.uploadAudio.asset.url : node.audioFilePth, type: 'audio/mpeg' }),
-      'Your browser does not support the audio element.'
-    ),
-    node.caption && React__default.createElement(
-      'p',
-      null,
-      node.caption
-    )
-  );
+  if (node.uploadAudio) {
+    return React__default.createElement(
+      'div',
+      { className: 'audio d-block text-center mb-3' },
+      React__default.createElement(
+        'audio',
+        { controls: true, controlsList: 'nodownload', className: 'audio' },
+        React__default.createElement('source', { src: node.uploadAudio.asset.url, type: 'audio/ogg' }),
+        React__default.createElement('source', { src: node.uploadAudio.asset.url, type: 'audio/mpeg' }),
+        'Your browser does not support the audio element.'
+      )
+    );
+  } else if (node.audioFilePth) {
+    var hostname = new URL(node.audioFilePth).hostname;
+    if (hostname === 'embeds.audioboom.com') {
+      return React__default.createElement('iframe', { src: node.audioFilePth, width: '100%', height: '300', className: 'audio', style: { border: 'none' } });
+    }
+    return React__default.createElement(
+      'div',
+      { className: 'audio' },
+      React__default.createElement(ReactPlayer, { url: node.audioFilePth, controls: true, width: '100%', height: '100%' })
+    );
+  }
+
+  return null;
 };
 
 var YouTubeGallery = function YouTubeGallery(_ref) {