@mjhls/mjh-framework 1.0.445 → 1.0.447

package/dist/cjs/View.js

@@ -0,0 +1,1156 @@
+'use strict';
+
+var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
+require('./_to-object-329a650b.js');
+require('./core.get-iterator-method-41e87ec1.js');
+require('./_library-dd23b178.js');
+require('./_iter-detect-4d0352f8.js');
+require('./from-ea347372.js');
+var toConsumableArray = require('./toConsumableArray-ca04303b.js');
+require('./_object-pie-68c5bcbc.js');
+var _extends = require('./extends-60837c34.js');
+require('./_object-sap-5e74ba08.js');
+var inherits = require('./inherits-4a2f1cc3.js');
+require('./web.dom.iterable-43c3e277.js');
+require('./typeof-583cdc4b.js');
+require('./_is-array-754e012d.js');
+var React = require('react');
+var index = require('./index-b2448ff6.js');
+require('prop-types');
+var moment = require('./moment-66a6a284.js');
+require('next/router');
+require('./isSymbol-488934a7.js');
+require('./debounce-32e57002.js');
+var index_es = require('./index.es-44c8e726.js');
+require('react-dom');
+require('./index-be0c82be.js');
+require('./index-8a3fb0bc.js');
+var main = require('./main-d76cde9c.js');
+require('./entities-310b46ee.js');
+var slicedToArray = require('./slicedToArray-8063ee51.js');
+var stringify = require('./stringify-7c5aff47.js');
+var asyncToGenerator = require('./asyncToGenerator-db08763c.js');
+require('./_set-species-4458e975.js');
+require('./promise-074978a7.js');
+require('./Beam.js');
+require('./Segment.js');
+var AdSlot = require('./AdSlot.js');
+require('./_arrayMap-3b4a0f75.js');
+var BlockContent = require('./BlockContent-80608595.js');
+require('./smoothscroll-95231a70.js');
+require('./GroupDeck.js');
+require('react-bootstrap');
+var Button = require('react-bootstrap/Button');
+var Head = require('next/head');
+require('react-share');
+var SocialShare = require('./SocialShare.js');
+var Form = require('react-bootstrap/Form');
+var FormControl = require('react-bootstrap/FormControl');
+var keys = require('./keys-a586b7a0.js');
+var Dropdown = require('react-bootstrap/Dropdown');
+require('./brightcove-react-player-loader.es-4ba0d3d5.js');
+var InscreenSensor = require('./InscreenSensor-04a70c60.js');
+var getSerializers = require('./getSerializers.js');
+require('./util-f2c1b65b.js');
+require('react-bootstrap/Pagination');
+require('next/dynamic');
+var getTargeting = require('./getTargeting-3ced038f.js');
+var urlFor = require('./urlFor.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Head__default = /*#__PURE__*/_interopDefaultLegacy(Head);
+var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
+var FormControl__default = /*#__PURE__*/_interopDefaultLegacy(FormControl);
+var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
+
+var renderAuthor = function renderAuthor(authorName, authorURL, index, length) {
+  var defaultUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'authors';
+
+  if (authorName && authorURL) {
+    return React__default['default'].createElement(
+      'span',
+      null,
+      React__default['default'].createElement(
+        'a',
+        { href: '/' + defaultUrl + '/' + authorURL.current, key: index },
+        authorName
+      ),
+      length !== index + 1 && ' , '
+    );
+  } else if (authorName) {
+    return React__default['default'].createElement(
+      'span',
+      { key: index },
+      authorName,
+      length !== index + 1 && ' , '
+    );
+  }
+};
+
+var getArticleSummary = function getArticleSummary(article) {
+  if (article.summary && article.summary.length > 0) {
+    return article.summary;
+  } else {
+    var _article$body = article.body,
+        body = _article$body === undefined ? [] : _article$body;
+
+    var desc = '';
+    body.some(function (children) {
+      children.children && children.children.some(function (item) {
+        if (item.text && String(item.text).trim().length > 0 && desc === '') {
+          desc = String(item.text);
+          return true;
+        }
+      });
+      if (desc !== '') {
+        return true;
+      }
+    });
+    return desc;
+  }
+};
+
+var getDocumentGroupUrl = function getDocumentGroupUrl(docGroup) {
+  if (!docGroup) {
+    return null;
+  }
+  var url = void 0;
+  if (docGroup.path.includes('/')) {
+    return "/" + docGroup.path;
+  }
+
+  if (docGroup.parent) {
+    url = '/' + docGroup.parent.identifier.current;
+    if (docGroup.parent.parent && docGroup.parent.parent.name) {
+      url = '/' + docGroup.parent.parent.identifier.current + url;
+    }
+  }
+
+  if (!docGroup.thumbnail) ;
+  url = url + '/' + docGroup.path;
+
+  return url;
+};
+
+var getDocumentGroupName = function getDocumentGroupName(docGroup) {
+  var name = void 0;
+  if (!docGroup) {
+    return null;
+  }
+
+  if (docGroup.parent) {
+    name = docGroup.parent.name;
+
+    if (docGroup.parent.parent && docGroup.parent.parent.name) {
+      name = docGroup.parent.parent.name + ' | ' + name;
+    }
+  }
+
+  if (!docGroup.thumbnail) {
+    name = name + ' | <b>' + docGroup.name + '</b>';
+  }
+
+  return name;
+};
+
+var DocumentGroup = function DocumentGroup(_ref) {
+  var article = _ref.article,
+      client = _ref.client;
+
+  if (!article.documentGroup) {
+    return null;
+  }
+  var name = getDocumentGroupName(article.documentGroup);
+  var url = getDocumentGroupUrl(article.documentGroup);
+  var thumbnailUrl = false;
+
+  if (article.documentGroup.thumbnail) {
+    thumbnailUrl = urlFor(client, article.documentGroup.thumbnail).url();
+  }
+
+  return React__default['default'].createElement(
+    'a',
+    {
+      href: url,
+      className: 'doc-group',
+      style: { display: 'flex', flexDirection: 'column', padding: '0 1rem', justifyContent: thumbnailUrl ? 'center' : 'flex-start', alignItems: 'center' } },
+    thumbnailUrl && React__default['default'].createElement('img', { style: { maxWidth: '220px', maxHeight: '100px', marginTop: '1rem' }, src: thumbnailUrl, alt: name }),
+    React__default['default'].createElement('p', {
+      style: { maxWidth: '315px', margin: '0', color: 'var(--primary)', textAlign: thumbnailUrl ? 'center' : main.main_36 ? 'left' : 'right', marginTop: '.25rem' },
+      dangerouslySetInnerHTML: { __html: name } }),
+    main.main_36 && !thumbnailUrl && React__default['default'].createElement(
+      'style',
+      { jsx: 'true' },
+      '\n          a.doc-group {\n            display: block !important;\n            padding: 0!important;\n          }\n        '
+    )
+  );
+};
+
+var Article = function Article(props) {
+  var onVote = function () {
+    var _ref = asyncToGenerator._asyncToGenerator( /*#__PURE__*/asyncToGenerator.regenerator.mark(function _callee(nodeKey, selectedChoice) {
+      var response, result;
+      return asyncToGenerator.regenerator.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return fetch('/api/polls/vote', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: stringify._JSON$stringify({ articleId: props.article._id, nodeKey: nodeKey, selectedChoice: selectedChoice, body: articleBody })
+              });
+
+            case 2:
+              response = _context.sent;
+
+              if (!response.ok) {
+                _context.next = 11;
+                break;
+              }
+
+              _context.next = 6;
+              return response.json();
+
+            case 6:
+              result = _context.sent;
+
+              setShowVotes(true);
+
+              console.log('Voted successfully');
+              _context.next = 12;
+              break;
+
+            case 11:
+              console.log('Unable to vote!');
+
+            case 12:
+            case 'end':
+              return _context.stop();
+          }
+        }
+      }, _callee, this);
+    }));
+
+    return function onVote(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var article = props.article;
+  var client = props.client,
+      pageview = props.pageview,
+      videoAccountIDs = props.videoAccountIDs,
+      drupalLeadSettings = props.drupalLeadSettings,
+      currentPage = props.currentPage,
+      _props$article = props.article,
+      title = _props$article.title,
+      _props$article$passwo = _props$article.passwordLock,
+      passwordLock = _props$article$passwo === undefined ? false : _props$article$passwo,
+      authorDetails = _props$article.authorDetails,
+      pageNumber = _props$article.pageNumber,
+      published = _props$article.published,
+      articleBody = _props$article.body,
+      thumbnail = _props$article.thumbnail,
+      content_placement = _props$article.content_placement,
+      _props$article$url = _props$article.url;
+  _props$article$url = _props$article$url === undefined ? {
+    current: ''
+  } : _props$article$url;
+  var url = _props$article$url.current,
+      issue = _props$article.issue,
+      source = _props$article.source,
+      documentGroup = _props$article.documentGroup,
+      regionalPages = props.regionalPages,
+      nationalPage = props.nationalPage,
+      ISIContent = props.ISIContent,
+      shareOptions = props.shareOptions,
+      cpModificationRequired = props.cpModificationRequired,
+      authorPrefix = props.authorPrefix;
+  var changeUrl = props.changeUrl;
+
+  var _useState = React.useState(null),
+      _useState2 = slicedToArray._slicedToArray(_useState, 2),
+      contextualADFlag = _useState2[0],
+      setContextualADFlag = _useState2[1];
+
+  var summary = getArticleSummary(props.article);
+
+  var _useState3 = React.useState(1),
+      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+      auth = _useState4[0],
+      setAuth = _useState4[1];
+
+  var _useState5 = React.useState(''),
+      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
+      passwordKey = _useState6[0],
+      setPasswordKey = _useState6[1];
+
+  var _useState7 = React.useState(false),
+      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
+      showVotes = _useState8[0],
+      setShowVotes = _useState8[1];
+
+  var isCutomPage = function isCutomPage(article) {
+    var url = article.url.current;
+
+    if (regionalPages || nationalPage) {
+      return regionalPages.includes(url) || nationalPage === url;
+    } else {
+      return false;
+    }
+  };
+
+  var renderIsiContent = function renderIsiContent(article) {
+    var url = article.url.current;
+
+    if (regionalPages && ISIContent && regionalPages.includes(url)) {
+      return React__default['default'].createElement(ISIContent, null);
+    } else if (nationalPage === url && ISIContent) {
+      return React__default['default'].createElement(ISIContent, { national: true });
+    }
+    return null;
+  };
+
+  var renderRelevantTopicsDropdown = function renderRelevantTopicsDropdown() {
+    if (content_placement && content_placement.length > 0 || documentGroup) {
+      return React__default['default'].createElement(
+        Dropdown__default['default'],
+        null,
+        React__default['default'].createElement(
+          Dropdown__default['default'].Toggle,
+          { variant: 'primary', id: 'partner-dropdown' },
+          'Relevant Topics'
+        ),
+        React__default['default'].createElement(
+          Dropdown__default['default'].Menu,
+          null,
+          documentGroup && documentGroup.parent && React__default['default'].createElement(
+            Dropdown__default['default'].Item,
+            { href: cpModificationRequired ? '/' + documentGroup.parent.identifier.current + '/' + documentGroup.path : '/' + documentGroup.path },
+            documentGroup.name
+          ),
+          content_placement.length > 0 ? content_placement.map(function (cp, index) {
+            var cp_url = cpModificationRequired ? getTargeting.getContentPlacementUrl(cp) : cp.path;
+            var href = '/' + cp_url;
+            return React__default['default'].createElement(
+              Dropdown__default['default'].Item,
+              { key: index, href: href },
+              cp.name
+            );
+          }) : null
+        )
+      );
+    }
+    return null;
+  };
+
+  var form = function form() {
+    return React__default['default'].createElement(
+      React__default['default'].Fragment,
+      null,
+      React__default['default'].createElement(
+        Head__default['default'],
+        null,
+        React__default['default'].createElement('meta', { name: 'googlebot', content: 'noindex' })
+      ),
+      React__default['default'].createElement(
+        'div',
+        { className: 'mt-5', style: { display: 'flex', justifyContent: 'center', alignItems: 'center' } },
+        React__default['default'].createElement(
+          Form__default['default'],
+          {
+            inline: true,
+            onSubmit: function onSubmit(e) {
+              e.preventDefault();
+            } },
+          React__default['default'].createElement(FormControl__default['default'], { type: 'text', className: 'mr-sm-2', value: passwordKey, onChange: function onChange(e) {
+              return setPasswordKey(e.target.value);
+            }, placeholder: 'Password' }),
+          React__default['default'].createElement(
+            Button__default['default'],
+            {
+              variant: 'primary',
+              onClick: function onClick() {
+                if (passwordKey === props.article.password) {
+                  setAuth(2);
+                } else {
+                  alert('Incorrect Password');
+                }
+              } },
+            'Submit'
+          )
+        )
+      )
+    );
+  };
+
+  var renderBlockContent = function renderBlockContent(payload) {
+    var _payload = payload,
+        body = _payload.body;
+
+    var findIndex = function findIndex(arr) {
+      var indexes = [];
+      var _iteratorNormalCompletion = true;
+      var _didIteratorError = false;
+      var _iteratorError = undefined;
+
+      try {
+        for (var _iterator = slicedToArray._getIterator(arr), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var ele = _step.value;
+
+          if (ele['_type'] === 'block' && ele.children.some(function (child) {
+            return child.text.trim().length > 0;
+          }) && ele['listItem'] !== 'bullet' && ele['style'] === 'normal' || ele['_type'] === 'figure') {
+            indexes.push(arr.indexOf(ele));
+          }
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+
+      return indexes;
+    };
+    var indexes = findIndex(body);
+    if (indexes.length >= 2 && body.length > 3 && payload.contextualAD && payload.contextualVideoAD) {
+      payload = _extends._extends({}, payload, {
+        contextualAD: _extends._extends({}, payload.contextualAD, {
+          slotId: (payload.contextualAD.slotId || 'native-ad') + '-' + payload._id
+        }),
+        contextualVideoAD: _extends._extends({}, payload.contextualVideoAD, {
+          slotId: (payload.contextualVideoAD.slotId || 'in-context_video') + '-' + payload._id
+        })
+      });
+      var selectedIndex = indexes[1] + 1;
+
+      var checkIsAdFound = function checkIsAdFound(isFound) {
+        if (!isFound) {
+          var parent = document.getElementById('contextual-native-ad-' + payload._id);
+          parent.style.height = '0%';
+          parent.style.width = '0%';
+          parent.style.display = 'none';
+          setContextualADFlag(false);
+        } else {
+          if (body[0]._type === 'figure' || body[1]._type === 'figure' || body[2]._type === 'figure' || body[3]._type === 'figure') {
+            setContextualADFlag(true);
+          }
+        }
+      };
+
+      var checkIsVideoAdFound = function checkIsVideoAdFound(isFound) {
+        if (!isFound) {
+          var parent = document.getElementById('contextual-video-ad-' + payload._id);
+          parent.style.height = '0%';
+          parent.style.width = '0%';
+          parent.style.display = 'none';
+          setContextualADFlag(false);
+        } else {
+          setContextualADFlag(true);
+        }
+      };
+
+      return React__default['default'].createElement(
+        React__default['default'].Fragment,
+        null,
+        React__default['default'].createElement(BlockContent.BlockContent, _extends._extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, onVote, showVotes, drupalLeadSettings, currentPage, false, contextualADFlag),
+          blocks: [].concat(toConsumableArray._toConsumableArray(body.slice(0, selectedIndex))),
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config())),
+        React__default['default'].createElement('span', { className: 'clearfix' }),
+        React__default['default'].createElement(
+          'div',
+          { id: 'contextual-native-ad-' + payload._id, className: 'contextual-native-ad' },
+          React__default['default'].createElement(AdSlot, _extends._extends({}, payload.contextualAD, { refreshFlag: false, checkIsAdFound: checkIsAdFound }))
+        ),
+        React__default['default'].createElement('span', { className: 'clearfix' }),
+        React__default['default'].createElement(
+          'div',
+          { id: 'contextual-video-ad-' + payload._id, className: 'contextual-video-ad' },
+          React__default['default'].createElement(AdSlot, _extends._extends({}, payload.contextualVideoAD, { refreshFlag: false, checkIsAdFound: checkIsVideoAdFound }))
+        ),
+        React__default['default'].createElement(BlockContent.BlockContent, _extends._extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, onVote, showVotes, drupalLeadSettings, currentPage, false),
+          blocks: [].concat(toConsumableArray._toConsumableArray(body.slice(selectedIndex))),
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config()))
+      );
+    } else if (indexes.length >= 2 && body.length > 3 && payload.contextualAD && !payload.contextualVideoAD) {
+      payload = _extends._extends({}, payload, {
+        contextualAD: _extends._extends({}, payload.contextualAD, {
+          slotId: (payload.contextualAD.slotId || 'native-ad') + '-' + payload._id
+        })
+      });
+      var _selectedIndex = indexes[1] + 1;
+
+      var _checkIsAdFound = function _checkIsAdFound(isFound) {
+        if (!isFound) {
+          var parent = document.getElementById('contextual-native-ad-' + payload._id);
+          parent.style.height = '0%';
+          parent.style.width = '0%';
+          parent.style.display = 'none';
+          setContextualADFlag(false);
+        } else {
+          if (body && body[1] && body[1]._type === 'figure') {
+            setContextualADFlag(true);
+          }
+        }
+      };
+
+      return React__default['default'].createElement(
+        React__default['default'].Fragment,
+        null,
+        React__default['default'].createElement(BlockContent.BlockContent, _extends._extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag),
+          blocks: [].concat(toConsumableArray._toConsumableArray(body.slice(0, _selectedIndex))),
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config())),
+        contextualADFlag && React__default['default'].createElement('span', { className: 'clearfix' }),
+        React__default['default'].createElement(
+          'div',
+          { id: 'contextual-native-ad-' + payload._id, className: 'contextual-native-ad' },
+          React__default['default'].createElement(AdSlot, _extends._extends({}, payload.contextualAD, { refreshFlag: false, checkIsAdFound: _checkIsAdFound }))
+        ),
+        contextualADFlag && React__default['default'].createElement('span', { className: 'clearfix' }),
+        React__default['default'].createElement(BlockContent.BlockContent, _extends._extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false),
+          blocks: [].concat(toConsumableArray._toConsumableArray(body.slice(_selectedIndex))),
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config()))
+      );
+    } else if (indexes.length >= 2 && body.length > 3 && payload.contextualVideoAD && !payload.contextualAD) {
+      payload = _extends._extends({}, payload, {
+        contextualVideoAD: _extends._extends({}, payload.contextualVideoAD, {
+          slotId: (payload.contextualVideoAD.slotId || 'in-context_video') + '-' + payload._id
+        })
+      });
+      var _selectedIndex2 = indexes[1] + 1;
+
+      var _checkIsAdFound2 = function _checkIsAdFound2(isFound) {
+        if (!isFound) {
+          var parent = document.getElementById('contextual-video-ad-' + payload._id);
+          parent.style.height = '0%';
+          parent.style.width = '0%';
+          parent.style.display = 'none';
+          setContextualADFlag(false);
+        } else {
+          if (body && body[1] && body[1]._type === 'figure') {
+            setContextualADFlag(true);
+          }
+        }
+      };
+
+      return React__default['default'].createElement(
+        React__default['default'].Fragment,
+        null,
+        React__default['default'].createElement(BlockContent.BlockContent, _extends._extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, onVote, showVotes, drupalLeadSettings, currentPage, false, contextualADFlag),
+          blocks: [].concat(toConsumableArray._toConsumableArray(body.slice(0, _selectedIndex2))),
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config())),
+        React__default['default'].createElement('span', { className: 'clearfix' }),
+        React__default['default'].createElement(
+          'div',
+          { id: 'contextual-video-ad-' + payload._id, className: 'contextual-video-ad' },
+          React__default['default'].createElement(AdSlot, _extends._extends({}, payload.contextualVideoAD, { refreshFlag: false, checkIsAdFound: _checkIsAdFound2 }))
+        ),
+        React__default['default'].createElement(BlockContent.BlockContent, _extends._extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, onVote, showVotes, drupalLeadSettings, currentPage, false),
+          blocks: [].concat(toConsumableArray._toConsumableArray(body.slice(_selectedIndex2))),
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config()))
+      );
+    } else {
+      return React__default['default'].createElement(BlockContent.BlockContent, _extends._extends({
+        serializers: getSerializers(client, pageview, videoAccountIDs, onVote, showVotes, drupalLeadSettings, currentPage, false),
+        blocks: articleBody,
+        imageOptions: { w: 320, h: 240, fit: 'max' }
+      }, client.config()));
+    }
+  };
+
+  var detail = function detail() {
+    var shareVia = shareOptions.shareVia,
+        shareSubject = shareOptions.shareSubject,
+        twitterSiteName = shareOptions.twitterSiteName,
+        shareImageDefault = shareOptions.shareImageDefault,
+        shareBaseUrl = shareOptions.shareBaseUrl,
+        shareSiteTitle = shareOptions.shareSiteTitle;
+
+    var shareUrl = shareBaseUrl + props.article.url.current;
+    var shareTitle = article.title;
+    var shareSummary = article.summary;
+    var shareImage = thumbnail && thumbnail.asset ? urlFor(props.client, thumbnail.asset).url() : shareImageDefault;
+    var siteName = props.website && props.website.title ? props.website.title : '';
+
+    var meta = {
+      shareTitle: shareTitle,
+      shareSiteName: props.cache.siteSettingCache.name,
+      shareSummary: shareSummary,
+      shareUrl: shareUrl,
+      shareImage: shareImage,
+      shareVia: props.Settings.title
+    };
+    if (!props.infiniteScroll) {
+      changeUrl = function changeUrl() {
+        return null;
+      };
+    }
+
+    return React__default['default'].createElement(
+      React__default['default'].Fragment,
+      null,
+      React__default['default'].createElement(
+        InscreenSensor.InscreenSensor,
+        {
+          offSetTop: 120,
+          className: 'inscreen-wrapper',
+          id: 'article-' + title,
+          onChange: function onChange(visible) {
+            if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
+              changeUrl(url, visible, meta);
+            }
+          } },
+        React__default['default'].createElement(
+          'div',
+          null,
+          React__default['default'].createElement(
+            'div',
+            { className: 'video-detail', style: { marginBottom: isCutomPage(props.article) ? '150px' : 0 } },
+            React__default['default'].createElement(
+              'h1',
+              { className: 'page-title' },
+              title
+            ),
+            React__default['default'].createElement(
+              'div',
+              { className: 'mb-4 doc-group-container', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' } },
+              React__default['default'].createElement(
+                'style',
+                { jsx: 'true' },
+                '\n                  @media screen and (max-width: 468px) {\n                    .video-detail .doc-group-container {\n                      flex-direction: column;\n                      align-items: flex-start !important;\n                    }\n                    .video-detail .doc-group {\n                      margin-top: 2rem;\n                      width: calc(100vw - 45px);\n                      align-items: center;\n                    }\n                    .video-detail .doc-group img,\n                    .doc-group p {\n                      max-width: calc(100vw - 45px) !important;\n                    }\n                  }\n                '
+              ),
+              React__default['default'].createElement(
+                'div',
+                { className: 'left-wrap' },
+                React__default['default'].createElement(
+                  'div',
+                  null,
+                  moment.moment(published).format('LL')
+                ),
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'mb-3' },
+                  authorDetails && authorDetails.map(function (authorDetail, index) {
+                    return React__default['default'].createElement(
+                      'span',
+                      { key: index },
+                      renderAuthor(authorDetail.displayName, authorDetail.url, index, authorDetails.length, authorPrefix)
+                    );
+                  }),
+                  React__default['default'].createElement(
+                    'div',
+                    null,
+                    source && React__default['default'].createElement(
+                      'p',
+                      {
+                        style: {
+                          display: 'inline-block',
+                          padding: '0 .25rem',
+                          color: 'var(--franchise-primary, #484848)',
+                          borderRadius: '2px',
+                          fontWeight: 'bold',
+                          border: '2px solid var(--franchise-primary, #484848)'
+                        },
+                        className: 'source-label' },
+                      source
+                    )
+                  ),
+                  issue && React__default['default'].createElement(
+                    'div',
+                    null,
+                    React__default['default'].createElement(
+                      'div',
+                      { className: 'volume-issue' },
+                      React__default['default'].createElement(
+                        'p',
+                        null,
+                        issue.volume && React__default['default'].createElement(
+                          'span',
+                          null,
+                          'Volume ' + issue.volume,
+                          ','
+                        ),
+                        issue.issueNumber && React__default['default'].createElement(
+                          'span',
+                          null,
+                          ' Issue ' + issue.issueNumber
+                        )
+                      )
+                    )
+                  ),
+                  pageNumber && React__default['default'].createElement(
+                    'div',
+                    { className: 'article-pageNumber' },
+                    'Page Number: ' + pageNumber
+                  )
+                ),
+                React__default['default'].createElement(
+                  'p',
+                  null,
+                  React__default['default'].createElement(SocialShare, {
+                    shareUrl: shareUrl,
+                    shareTitle: shareTitle,
+                    shareVia: shareVia,
+                    shareSummary: shareSummary,
+                    shareSubject: shareSubject,
+                    shareImage: shareImage,
+                    size: 32,
+                    siteName: siteName,
+                    twitterSiteName: twitterSiteName,
+                    disableMeta: true
+                  })
+                ),
+                renderRelevantTopicsDropdown()
+              ),
+              React__default['default'].createElement(
+                'div',
+                null,
+                React__default['default'].createElement(DocumentGroup, { article: props.article, client: props.client })
+              )
+            ),
+            React__default['default'].createElement(
+              'p',
+              null,
+              React__default['default'].createElement(
+                'em',
+                null,
+                summary
+              ),
+              React__default['default'].createElement('br', null),
+              React__default['default'].createElement('br', null)
+            ),
+            React__default['default'].createElement(
+              'div',
+              { className: 'ad-box', style: { textAlign: 'center' } },
+              main.main_36 && props.article.Ads && props.article.Ads.length > 0 && props.article.Ads.map(function (ad, index) {
+                if (index === 0) {
+                  return React__default['default'].createElement(
+                    'div',
+                    {
+                      key: index,
+                      id: 'addid-' + index,
+                      style: {
+                        display: 'flex',
+                        flex: '1 0 auto',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        textAlign: 'center'
+                      } },
+                    ad.component
+                  );
+                }
+              })
+            ),
+            React__default['default'].createElement(
+              'div',
+              { className: 'block-content' },
+              renderBlockContent(props.article),
+              React__default['default'].createElement(
+                'noscript',
+                null,
+                React__default['default'].createElement(
+                  'div',
+                  { style: { display: 'flex', justifyContent: 'center' }, className: 'series-links' },
+                  props.article.seriesDetail && props.article.seriesDetail.prevUrl && React__default['default'].createElement(
+                    'a',
+                    { className: 'mx-3', href: props.article.seriesDetail.prevUrl },
+                    'Previous ',
+                    props.article.seriesDetail.type
+                  ),
+                  props.article.seriesDetail && props.article.seriesDetail.nextUrl && React__default['default'].createElement(
+                    'a',
+                    { className: 'mx-3', href: props.article.seriesDetail.nextUrl },
+                    'Next ',
+                    props.article.seriesDetail.type
+                  )
+                )
+              ),
+              issue && issue.url && React__default['default'].createElement(
+                'a',
+                { href: issue.url, target: '_blank', title: 'Download issue' },
+                React__default['default'].createElement('img', { style: { margin: '1rem', maxHeight: '40px', maxWidth: '40px' }, src: '/download.png', alt: 'download issue' }),
+                'Download Issue : ',
+                issue.name
+              )
+            )
+          ),
+          renderIsiContent(props.article)
+        )
+      ),
+      main.main_36 && props.article.Ads && props.article.Ads.length > 0 && props.article.Ads.map(function (ad, index) {
+        if (index > 0) {
+          return React__default['default'].createElement(
+            'div',
+            { key: index, id: 'addid-' + index, style: { display: 'flex', flex: '1 0 auto' } },
+            ad.component
+          );
+        }
+      }),
+      React__default['default'].createElement('div', { className: 'clearfix', style: { minHeight: '1px' } }),
+      React__default['default'].createElement('hr', { className: 'article-seperater my-5' })
+    );
+  };
+
+  if (passwordLock) {
+    if (auth === 2) {
+      return detail();
+    } else {
+      return form();
+    }
+  } else {
+    return detail();
+  }
+};
+
+var defineProperty = _commonjsHelpers.createCommonjsModule(function (module, exports) {
+
+exports.__esModule = true;
+
+
+
+var _defineProperty2 = _interopRequireDefault(inherits.defineProperty);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = function (obj, key, value) {
+  if (key in obj) {
+    (0, _defineProperty2.default)(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+};
+});
+
+var _defineProperty = _commonjsHelpers.unwrapExports(defineProperty);
+
+var ArticleQueue = function ArticleQueue(props) {
+  var _props$prevUrl = props.prevUrl,
+      prevUrl = _props$prevUrl === undefined ? '/' : _props$prevUrl,
+      Ads = props.Ads,
+      _props$maxListLength = props.maxListLength,
+      maxListLength = _props$maxListLength === undefined ? 10 : _props$maxListLength,
+      _props$sponsoredTaxon = props.sponsoredTaxonomies,
+      sponsoredTaxonomies = _props$sponsoredTaxon === undefined ? [] : _props$sponsoredTaxon,
+      _props$cpModification = props.cpModificationRequired,
+      cpModificationRequired = _props$cpModification === undefined ? false : _props$cpModification,
+      _props$authorPrefix = props.authorPrefix,
+      authorPrefix = _props$authorPrefix === undefined ? 'authors' : _props$authorPrefix;
+
+
+  var firstArticle = function firstArticle() {
+    var article = _extends._Object$assign({}, props.article);
+    var targeting = getTargeting.getTargeting(props);
+    article.Ads = Ads.getRightItems(targeting);
+    return article;
+  };
+
+  var _useState = React.useState([firstArticle()]),
+      _useState2 = slicedToArray._slicedToArray(_useState, 2),
+      queueData = _useState2[0],
+      setQueueData = _useState2[1];
+
+  var refreshAD = function refreshAD(path) {
+    if (!main.main_36) {
+      var activeArticle = queueData.find(function (item) {
+        return item.url.current === path;
+      });
+
+      var targeting = getTargeting.getTargeting({ article: activeArticle, cpModificationRequired: cpModificationRequired, position: props.position, prevUrl: prevUrl });
+
+      index.lib_3.getGoogletag().then(function (googletag) {
+        if (window.googletag && googletag.pubadsReady) {
+          var slots = googletag.pubads().getSlots();
+          slots.forEach(function (slot) {
+            var pos = slot.getTargeting('pos');
+
+            slot.clearTargeting();
+            keys._Object$keys(targeting).forEach(function (key) {
+              slot.setTargeting(key, targeting[key]);
+            });
+            slot.setTargeting('pos', pos);
+          });
+          index.lib_3.refresh();
+        }
+      });
+    }
+  };
+
+  var checkSponseredArticle = function checkSponseredArticle(article) {
+    var _article$taxonomyMapp = article.taxonomyMapping,
+        taxonomyMapping = _article$taxonomyMapp === undefined ? [] : _article$taxonomyMapp;
+
+    if (props.checkSponsered) {
+      return taxonomyMapping.some(function (item) {
+        return InscreenSensor.includes_1(sponsoredTaxonomies, item._ref);
+      });
+    } else {
+      return false;
+    }
+  };
+
+  var preVscroll = 0;
+  var isScrollDown = true;
+
+  var scrollDirectionDetect = function scrollDirectionDetect(e) {
+    var window = e.currentTarget;
+
+    if (preVscroll > window.scrollY) {
+      isScrollDown = false;
+    } else if (preVscroll < window.scrollY) {
+      isScrollDown = true;
+    }
+    preVscroll = window.scrollY;
+  };
+
+  React.useEffect(function () {
+    window.addEventListener('scroll', scrollDirectionDetect);
+    return function () {
+      return window.removeEventListener('scroll', scrollDirectionDetect);
+    };
+  });
+
+  var loadmore = function loadmore() {
+    var query = props.relatedArticleQuery;
+    var params = props.params;
+    if (queueData && queueData.length < maxListLength) {
+      params.index = queueData.length - 1;
+      props.client.fetch(query, params).then(function (article) {
+        if (article && article._id) {
+          var targeting = getTargeting.getTargeting({ article: article, cpModificationRequired: cpModificationRequired, prevUrl: prevUrl });
+          article.Ads = Ads.getRightItems(targeting);
+          setQueueData([].concat(toConsumableArray._toConsumableArray(queueData), [article]));
+        }
+      });
+    }
+  };
+
+  var changeMeta = function changeMeta(meta) {
+    document.title = meta.shareTitle;
+    document.querySelector('meta[name="description"]').setAttribute('content', meta.shareSummary);
+    document.querySelector('meta[property="og:url"]').setAttribute('content', meta.shareUrl);
+    document.querySelector('meta[property="og:title"]').setAttribute('content', meta.shareTitle);
+    document.querySelector('meta[property="og:site_name"]').setAttribute('content', meta.shareVia);
+    document.querySelector('meta[property="og:description"]').setAttribute('content', meta.shareSummary);
+    document.querySelector('meta[name="twitter:title"]').setAttribute('content', meta.shareTitle);
+    document.querySelector('meta[name="twitter:image"]').setAttribute('content', meta.shareImage);
+    document.querySelector('meta[name="twitter:site"]').setAttribute('content', meta.shareVia);
+    document.querySelector('meta[name="twitter:description"]').setAttribute('content', meta.shareSummary);
+  };
+
+  var changeUrl = function changeUrl(path, visibility, meta) {
+    var currentPath = window && window.location && window.location.pathname ? window.location.pathname.replace('/view/', '') : '';
+    var newPath = '/view/' + path;
+    if (currentPath !== path) {
+      if (isScrollDown) {
+        if (visibility === 'top') {
+          // router.push('/view/[url]', newPath, { shallow: true })
+          window.history.pushState({ page: path }, meta.shareTitle, newPath);
+          changeMeta(meta);
+          if (props.pageview) {
+            props.pageview(newPath);
+          }
+          refreshAD(path);
+        }
+      } else {
+        if (visibility === 'bottom') {
+          // router.push('/view/[url]', newPath, { shallow: true })
+          window.history.pushState({ page: path }, meta.shareTitle, newPath);
+          changeMeta(meta);
+          if (props.pageview) {
+            props.pageview(newPath);
+          }
+          refreshAD(path);
+        }
+      }
+      if (visibility === 'small-top') {
+        window.history.pushState({ page: path }, meta.shareTitle, newPath);
+        changeMeta(meta);
+        if (props.pageview) {
+          props.pageview(newPath);
+        }
+        refreshAD(path);
+      }
+    }
+  };
+
+  return React__default['default'].createElement(
+    index_es.InfiniteScroll,
+    { dataLength: queueData.length, next: loadmore, scrollThreshold: '60%', hasMore: true, style: { overflow: 'hidden' } },
+    queueData.map(function (article, index) {
+      if (!checkSponseredArticle(article) && Ads.getVideoContextualAD) {
+        article.contextualVideoAD = Ads.getVideoContextualAD(getTargeting.getTargeting(props));
+      }
+      if (!checkSponseredArticle(article) && Ads.getNativeContextualAD) {
+        article.contextualAD = Ads.getNativeContextualAD(getTargeting.getTargeting(props));
+      }
+      return React__default['default'].createElement(Article, _extends._extends({ key: index }, props, { changeUrl: changeUrl, authorPrfix: authorPrefix, article: article, cpModificationRequired: cpModificationRequired }));
+    })
+  );
+};
+
+var Articles = function Articles(props) {
+  var _extends2;
+
+  var videoAccountIDs = props.videoAccountIDs,
+      Ads = props.Ads,
+      cpModificationRequired = props.cpModificationRequired,
+      Settings = props.Settings,
+      ISIContent = props.ISIContent,
+      prevUrl = props.prevUrl,
+      setActiveArticle = props.setActiveArticle,
+      article = props.article,
+      client = props.client,
+      relatedArticleQuery = props.relatedArticleQuery,
+      Website = props.Website,
+      pageview = props.pageview,
+      shareOptions = props.shareOptions,
+      WAds = props.WAds,
+      regionalPages = props.regionalPages,
+      nationalPage = props.nationalPage;
+  var taxonomyMapping = article.taxonomyMapping,
+      _article$url = article.url;
+  _article$url = _article$url === undefined ? {
+    current: null
+  } : _article$url;
+  var url = _article$url.current,
+      content_placement = article.content_placement;
+
+
+  var taxonomy = [];
+  content_placement.forEach(function (_ref2) {
+    var path = _ref2.path,
+        _id = _ref2._id;
+
+    var prev_url_to_check = prevUrl;
+    if (prev_url_to_check.includes('?')) {
+      prev_url_to_check = prev_url_to_check.split('?')[0];
+    }
+    if (prev_url_to_check.endsWith(path)) taxonomy.push(_id);
+  });
+
+  if (taxonomy.length === 0) {
+    taxonomy = taxonomyMapping.map(function (_ref3) {
+      var _ref = _ref3._ref;
+      return _ref;
+    });
+  }
+
+  var params = {
+    url: url,
+    taxonomy: taxonomy,
+    index: 0
+  };
+
+  return React__default['default'].createElement(ArticleQueue, _extends._extends((_extends2 = {
+    client: client,
+    params: params,
+    relatedArticleQuery: relatedArticleQuery,
+    website: Website,
+    checkSponsered: true,
+    pageview: pageview,
+    shareOptions: shareOptions,
+    Ads: WAds,
+    regionalPages: regionalPages,
+    nationalPage: nationalPage
+  }, _defineProperty(_extends2, 'pageview', pageview), _defineProperty(_extends2, 'onVote', function onVote() {}), _defineProperty(_extends2, 'ISIContent', ISIContent), _defineProperty(_extends2, 'videoAccountIDs', videoAccountIDs), _defineProperty(_extends2, 'sponsoredTaxonomies', []), _defineProperty(_extends2, 'cpModificationRequired', cpModificationRequired), _defineProperty(_extends2, 'Settings', Settings), _extends2), props));
+};
+
+var View = function View(props) {
+  var shareOptions = props.shareOptions,
+      article = props.article;
+  var _props$article = props.article,
+      _props$article$passwo = _props$article.passwordLock,
+      passwordLock = _props$article$passwo === undefined ? false : _props$article$passwo,
+      description = _props$article.description,
+      title = _props$article.title;
+
+  //disable infinite scroll
+
+  var checkVideoSeries = function checkVideoSeries(article) {
+    for (var i = 0; i < article.body.length; i++) {
+      var row = article.body[i];
+      if (typeof row.videos !== 'undefined') {
+        return true;
+      }
+    }
+    return false;
+  };
+  var isVideoSeries = checkVideoSeries(props.article);
+  var needInfiniteScroll = ['Articles', 'Videos', 'Podcasts'].includes(article.category.name) && article.taxonomyMapping && article.passwordLock !== true && !isVideoSeries && !article.ExcludeFromInfiniteScroll;
+
+  if (['Articles', 'Videos', 'Podcasts'].includes(article.category.name)) {
+    description = null;
+    title = null;
+  }
+
+  if (!needInfiniteScroll && !title) {
+    title = props.article ? props.article.title : '';
+  }
+
+  return React__default['default'].createElement(
+    React__default['default'].Fragment,
+    null,
+    React__default['default'].createElement(
+      Head__default['default'],
+      null,
+      React__default['default'].createElement(
+        'title',
+        { key: 'title' },
+        article.title + ' | ' + props.cache.siteSettingCache.name
+      ),
+      React__default['default'].createElement('meta', { name: 'description', key: 'description', content: shareOptions.shareSummary }),
+      passwordLock && React__default['default'].createElement('meta', { name: 'robots', content: 'noindex, nofollow' }),
+      React__default['default'].createElement('meta', { property: 'og:url', content: shareOptions.shareUrl, key: 'og:url' }),
+      React__default['default'].createElement('meta', { property: 'og:title', content: shareOptions.shareTitle, key: 'og:title' }),
+      React__default['default'].createElement('meta', { property: 'og:image', content: shareOptions.shareImage, key: 'og:image' }),
+      React__default['default'].createElement('meta', { property: 'og:site_name', content: props.Settings.title, key: 'og:site_name' }),
+      React__default['default'].createElement('meta', { property: 'og:description', content: shareOptions.shareSummary, key: 'og:description' }),
+      React__default['default'].createElement('meta', { name: 'twitter:card', content: 'summary', key: 'twitter:card' }),
+      React__default['default'].createElement('meta', { name: 'twitter:title', content: shareOptions.shareTitle, key: 'twitter:title' }),
+      React__default['default'].createElement('meta', { name: 'twitter:image', content: shareOptions.shareImage, key: 'twitter:image' }),
+      React__default['default'].createElement('meta', { name: 'twitter:site', content: '@' + props.Settings.title, key: 'twitter:site' }),
+      React__default['default'].createElement('meta', { name: 'twitter:description', content: shareOptions.shareSummary, key: 'twitter:description' }),
+      React__default['default'].createElement(
+        'noscript',
+        null,
+        props.article.seriesDetail && props.article.seriesDetail.prevUrl && React__default['default'].createElement('link', { rel: 'prev', href: props.article.seriesDetail.prevUrl }),
+        props.article.seriesDetail && props.article.seriesDetail.nextUrl && React__default['default'].createElement('link', { rel: 'next', href: props.article.seriesDetail.nextUrl })
+      )
+    ),
+    !needInfiniteScroll ? React__default['default'].createElement(Article, _extends._extends({ infiniteScroll: false }, props)) : React__default['default'].createElement(Articles, _extends._extends({ infiniteScroll: true }, props))
+  );
+};
+
+module.exports = View;