@mjhls/mjh-framework 1.0.444 → 1.0.446

package/dist/cjs/ArticleQueue.js

@@ -0,0 +1,863 @@
+'use strict';
+
+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');
+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$1 = 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');
+var index = 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');
+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');
+require('react-bootstrap/Button');
+var Head = require('next/head');
+require('react-share');
+var SocialShare = require('./SocialShare.js');
+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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Head__default = /*#__PURE__*/_interopDefaultLegacy(Head);
+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 get_content_placement_url = function get_content_placement_url(cp) {
+  var cp_url = '';
+  if (cp.ancestor && typeof cp.ancestor === 'string') {
+    cp_url += (cp_url === '' ? '' : '/') + cp.ancestor;
+  }
+
+  if (!cp.ancestor && cp.parent && typeof cp.parent === 'string') {
+    cp_url += (cp_url === '' ? '' : '/') + cp.parent;
+  }
+
+  cp_url += (cp_url === '' ? '' : '/') + cp.path;
+  return cp_url;
+};
+
+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 Article = function Article(props) {
+  var client = props.client,
+      pageview = props.pageview,
+      videoAccountIDs = props.videoAccountIDs,
+      drupalLeadSettings = props.drupalLeadSettings,
+      currentPage = props.currentPage,
+      _props$article = props.article,
+      articleId = _props$article._id,
+      title = _props$article.title,
+      passwordLock = _props$article.passwordLock,
+      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,
+      regionalPages = props.regionalPages,
+      nationalPage = props.nationalPage,
+      ISIContent = props.ISIContent,
+      changeUrl = props.changeUrl,
+      shareOptions = props.shareOptions,
+      cpModificationRequired = props.cpModificationRequired,
+      authorPrefix = props.authorPrefix,
+      _props$lgContextAd = props.lgContextAd,
+      lgContextAd = _props$lgContextAd === undefined ? false : _props$lgContextAd,
+      queueData = props.queueData;
+
+  var _useState = React.useState(null),
+      _useState2 = slicedToArray._slicedToArray(_useState, 2),
+      contextualADFlag = _useState2[0],
+      setContextualADFlag = _useState2[1];
+
+  var summary = getArticleSummary(props.article);
+
+  var urlFor = function urlFor(source) {
+    return index.imageUrlBuilder(client).image(source);
+  };
+
+  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 && regionalPages.includes(url)) {
+      return React__default['default'].createElement(ISIContent, null);
+    } else if (nationalPage === url) {
+      return React__default['default'].createElement(ISIContent, { national: true });
+    }
+    return null;
+  };
+
+  var renderRelevantTopicsDropdown = function renderRelevantTopicsDropdown() {
+    if (content_placement && content_placement.length > 0) {
+      return React__default['default'].createElement(
+        Dropdown__default['default'],
+        { style: { marginBottom: '1rem' } },
+        React__default['default'].createElement(
+          Dropdown__default['default'].Toggle,
+          { variant: 'primary', id: 'partner-dropdown' },
+          'Relevant Topics'
+        ),
+        React__default['default'].createElement(
+          Dropdown__default['default'].Menu,
+          null,
+          content_placement.length > 0 ? content_placement.map(function (cp, index) {
+            var cp_url = cpModificationRequired ? get_content_placement_url(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 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 || 'contextual_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 {
+          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, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag, articleId),
+          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, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
+          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 || 'contextual_ad') + '-' + payload._id,
+          className: 'ADFluid',
+          // Adding new ad size for large contextual ad for desktop screen width >= 1400
+          sizes: lgContextAd ? [[728, 90], 'fluid', [300, 100]] : ['fluid', [300, 100]],
+          sizeMapping: lgContextAd ? [{
+            viewport: [1400, 0],
+            sizes: [[728, 90], 'fluid', [300, 100]]
+          }, { viewport: [0, 0], sizes: ['fluid', [300, 100]] }] : ['fluid', [300, 100]]
+        })
+      });
+      var _selectedIndex = indexes[1] + 1;
+      var _checkIsAdFound = function _checkIsAdFound(isFound, adData) {
+        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 {
+          var _parent = document.getElementById('contextual-native-ad-' + payload._id);
+          if (adData && adData.event && adData.event.size && _parent) {
+            // Adding fix for fluid contextual ad to avoid from collapsing when size is [0,0]
+            var fluidSizes = [[0, 0]];
+            var checkAdSize = function checkAdSize(size) {
+              return stringify._JSON$stringify(size) === stringify._JSON$stringify(adData.event.size);
+            };
+            if (!fluidSizes.some(checkAdSize)) {
+              _parent.style.width = adData.event.size[0] + 'px';
+              _parent.style.height = adData.event.size[1] + 'px';
+            }
+            _parent.style.margin = 'auto';
+          }
+          if (body[0]._type === 'figure' || body[1]._type === 'figure' || body[2]._type === 'figure' || body[3]._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, undefined, articleId),
+          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, undefined, articleId),
+          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, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag, articleId),
+          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, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
+          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, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
+        blocks: articleBody,
+        imageOptions: { w: 320, h: 240, fit: 'max' }
+      }, client.config()));
+    }
+  };
+
+  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 = title;
+  var shareSummary = summary;
+  var shareImage = thumbnail && thumbnail.asset ? urlFor(thumbnail.asset).url() : shareImageDefault;
+  var siteName = props.website.title;
+
+  var meta = {
+    shareTitle: shareTitle,
+    shareSiteName: props.cache.siteSettingCache.name,
+    shareSummary: shareSummary,
+    shareUrl: shareUrl,
+    shareImage: shareImage,
+    shareVia: props.Settings.title
+  };
+  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,
+        queueData && queueData.length === 1 && React__default['default'].createElement(
+          Head__default['default'],
+          null,
+          React__default['default'].createElement(
+            'title',
+            { key: 'title' },
+            '' + shareTitle
+          ),
+          React__default['default'].createElement('meta', { name: 'description', key: 'description', content: shareSummary }),
+          passwordLock && React__default['default'].createElement('meta', { name: 'robots', content: 'noindex, nofollow' }),
+          React__default['default'].createElement('meta', { property: 'og:url', content: shareUrl, key: 'og:url' }),
+          React__default['default'].createElement('meta', { property: 'og:title', content: shareTitle, key: 'og:title' }),
+          React__default['default'].createElement('meta', { property: 'og:image', content: 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: 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: shareTitle, key: 'twitter:title' }),
+          React__default['default'].createElement('meta', { name: 'twitter:image', content: 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: shareSummary, key: 'twitter:description' })
+        ),
+        React__default['default'].createElement(
+          'h1',
+          { className: 'page-title' },
+          title
+        ),
+        React__default['default'].createElement(
+          'div',
+          { className: 'video-detail', style: { marginBottom: isCutomPage(props.article) ? '150px' : 0 } },
+          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)
+              );
+            }),
+            props.article.source && React__default['default'].createElement(
+              'div',
+              { className: 'sanityDisplayLabel' },
+              props.article.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(
+            'p',
+            null,
+            React__default['default'].createElement(
+              'em',
+              null,
+              summary
+            ),
+            React__default['default'].createElement('br', null),
+            React__default['default'].createElement('br', null)
+          ),
+          main.main_36 && 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', marginTop: '-1rem', marginBottom: '1rem' } },
+                ad.component
+              );
+            }
+          }),
+          React__default['default'].createElement(
+            'div',
+            { className: 'block-content' },
+            renderBlockContent(props.article),
+            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.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' }),
+    React__default['default'].createElement(
+      'style',
+      { jsx: 'true' },
+      '\n        .sanityDisplayLabel {\n          margin: 0.5rem 0;\n          border: 1px solid black;\n          width: fit-content;\n          padding: 5px;\n        }\n      '
+    )
+  );
+};
+
+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 getTargeting = function getTargeting(article, position) {
+    var _article$internalTag = article.internalTag,
+        internalTag = _article$internalTag === undefined ? [] : _article$internalTag,
+        _article$userDefinedT = article.userDefinedTag,
+        userDefinedTag = _article$userDefinedT === undefined ? [] : _article$userDefinedT,
+        _article$SponsorshipT = article.SponsorshipTag,
+        SponsorshipTag = _article$SponsorshipT === undefined ? [] : _article$SponsorshipT,
+        _article$seoTag = article.seoTag,
+        seoTag = _article$seoTag === undefined ? [] : _article$seoTag,
+        _article$url = article.url;
+    _article$url = _article$url === undefined ? {
+      current: ''
+    } : _article$url;
+    var url = _article$url.current,
+        _article$documentGrou = article.documentGroup;
+    _article$documentGrou = _article$documentGrou === undefined ? {
+      path: ''
+    } : _article$documentGrou;
+    var document_group = _article$documentGrou.path,
+        content_placement = article.content_placement;
+
+    var context = url;
+    var localHistory = props.historyCookie ? JSON.parse(props.historyCookie) : [];
+    if (!context && localHistory) {
+      context = localHistory[localHistory.length - 1];
+    }
+    context = context && context.split('?')[0];
+    context = context && context.split('&')[0];
+    var content_placement_urls = [];
+    if (content_placement && prevUrl && prevUrl.length) {
+      content_placement.forEach(function (item) {
+        var path = item.path;
+        if (cpModificationRequired) {
+          path = get_content_placement_url(item);
+        }
+
+        if (InscreenSensor.includes_1(prevUrl, path)) {
+          content_placement_urls.push(path);
+        }
+      });
+    }
+
+    if (content_placement) {
+      if (content_placement_urls.length === 0) {
+        content_placement_urls = content_placement.map(function (item) {
+          return cpModificationRequired ? get_content_placement_url(item) : item.path;
+        });
+      }
+    } else {
+      content_placement_urls = ['/'];
+    }
+    var articleKeywords = [].concat(toConsumableArray._toConsumableArray(internalTag), toConsumableArray._toConsumableArray(userDefinedTag), toConsumableArray._toConsumableArray(SponsorshipTag), toConsumableArray._toConsumableArray(seoTag));
+    var targeting = {
+      tags: articleKeywords,
+      document_group: [document_group],
+      document_url: [url],
+      content_placement: content_placement_urls
+    };
+
+    if (article.issue && article.issue.path) {
+      targeting.issue_url = [article.issue.path];
+      if (article.issue.publication && article.issue.publication.path) {
+        targeting.publication_url = [article.issue.publication.path];
+      }
+    }
+
+    if (props.cache.hyperTargeting) {
+      targeting = _extends._extends({}, targeting, { campaign_id: props.cache.hyperTargeting });
+    }
+
+    if (position && position.length) {
+      targeting['pos'] = position;
+    }
+    return targeting;
+  };
+
+  var firstArticle = function firstArticle() {
+    var article = _extends._Object$assign({}, props.article);
+    var targeting = getTargeting(props.article);
+    article.Ads = Ads.getRightItems(targeting);
+    return article;
+  };
+
+  var _useState3 = React.useState([firstArticle()]),
+      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+      queueData = _useState4[0],
+      setQueueData = _useState4[1];
+
+  var refreshAD = function refreshAD(path) {
+    if (!main.main_36) {
+      var activeArticle = queueData.find(function (item) {
+        return item.url.current === path;
+      });
+      var targeting = getTargeting(activeArticle);
+      index$1.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$1.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(article);
+          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(article, 'in-context_video'));
+      }
+      if (!checkSponseredArticle(article) && Ads.getNativeContextualAD) {
+        article.contextualAD = Ads.getNativeContextualAD(getTargeting(article, 'native-ad'));
+      }
+      return React__default['default'].createElement(Article, _extends._extends({
+        key: index
+      }, props, {
+        changeUrl: changeUrl,
+        authorPrfix: authorPrefix,
+        article: article,
+        cpModificationRequired: cpModificationRequired,
+        queueData: queueData
+      }));
+    })
+  );
+};
+
+module.exports = ArticleQueue;