@mjhls/mjh-framework 1.0.445 → 1.0.446

package/dist/esm/ArticleQueue.js

@@ -0,0 +1,855 @@
+import './_commonjsHelpers-0c4b6f40.js';
+import './_to-object-16fd8b46.js';
+import './core.get-iterator-method-f5c0d66a.js';
+import './_library-528f1934.js';
+import './_iter-detect-6e099a34.js';
+import './from-2c0a5f49.js';
+import { _ as _toConsumableArray } from './toConsumableArray-8712d678.js';
+import './_object-pie-33c40e79.js';
+import { _ as _extends, a as _Object$assign } from './extends-6e00b262.js';
+import './_object-sap-56bb8073.js';
+import './inherits-2758cc14.js';
+import './web.dom.iterable-46c95e52.js';
+import './typeof-7e72fee0.js';
+import './_is-array-dd5523d6.js';
+import React, { useState, useEffect } from 'react';
+import { l as lib_3 } from './index-fb49124c.js';
+import 'prop-types';
+import { m as moment } from './moment-12415288.js';
+import 'next/router';
+import './isSymbol-c1b9be80.js';
+import './debounce-8cd9e09c.js';
+import { I as InfiniteScroll } from './index.es-27d0bae9.js';
+import 'react-dom';
+import { i as imageUrlBuilder } from './index-73819142.js';
+import './index-c5fd0af5.js';
+import { m as main_36 } from './main-8c8784b8.js';
+import './entities-7cc3bf45.js';
+import { _ as _slicedToArray, a as _getIterator } from './slicedToArray-f1e40361.js';
+import { _ as _JSON$stringify } from './stringify-e30bc114.js';
+import './asyncToGenerator-204b5a5c.js';
+import './_set-species-6f64f1c1.js';
+import './promise-53143c9a.js';
+import './Beam.js';
+import './Segment.js';
+import DFPAdSlot from './AdSlot.js';
+import './_arrayMap-a8dd2b2c.js';
+import { B as BlockContent } from './BlockContent-4af2feb9.js';
+import './smoothscroll-4b699764.js';
+import './GroupDeck.js';
+import 'react-bootstrap';
+import 'react-bootstrap/Button';
+import Head from 'next/head';
+import 'react-share';
+import SocialShare from './SocialShare.js';
+import { _ as _Object$keys } from './keys-04cdec91.js';
+import Dropdown from 'react-bootstrap/Dropdown';
+import './brightcove-react-player-loader.es-e1c6b0f2.js';
+import { I as InscreenSensor, i as includes_1 } from './InscreenSensor-b7f931bf.js';
+import getSerializers from './getSerializers.js';
+import './util-7700fc59.js';
+import 'react-bootstrap/Pagination';
+import 'next/dynamic';
+
+var renderAuthor = function renderAuthor(authorName, authorURL, index, length) {
+  var defaultUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'authors';
+
+  if (authorName && authorURL) {
+    return React.createElement(
+      'span',
+      null,
+      React.createElement(
+        'a',
+        { href: '/' + defaultUrl + '/' + authorURL.current, key: index },
+        authorName
+      ),
+      length !== index + 1 && ', '
+    );
+  } else if (authorName) {
+    return React.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 = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      contextualADFlag = _useState2[0],
+      setContextualADFlag = _useState2[1];
+
+  var summary = getArticleSummary(props.article);
+
+  var urlFor = function urlFor(source) {
+    return 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.createElement(ISIContent, null);
+    } else if (nationalPage === url) {
+      return React.createElement(ISIContent, { national: true });
+    }
+    return null;
+  };
+
+  var renderRelevantTopicsDropdown = function renderRelevantTopicsDropdown() {
+    if (content_placement && content_placement.length > 0) {
+      return React.createElement(
+        Dropdown,
+        { style: { marginBottom: '1rem' } },
+        React.createElement(
+          Dropdown.Toggle,
+          { variant: 'primary', id: 'partner-dropdown' },
+          'Relevant Topics'
+        ),
+        React.createElement(
+          Dropdown.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.createElement(
+              Dropdown.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 = _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({}, payload, {
+        contextualAD: _extends({}, payload.contextualAD, {
+          slotId: (payload.contextualAD.slotId || 'contextual_ad') + '-' + payload._id
+        }),
+        contextualVideoAD: _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.createElement(
+        React.Fragment,
+        null,
+        React.createElement(BlockContent, _extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag, articleId),
+          blocks: [].concat(_toConsumableArray(body.slice(0, selectedIndex))),
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config())),
+        React.createElement('span', { className: 'clearfix' }),
+        React.createElement(
+          'div',
+          { id: 'contextual-native-ad-' + payload._id, className: 'contextual-native-ad' },
+          React.createElement(DFPAdSlot, _extends({}, payload.contextualAD, { refreshFlag: false, checkIsAdFound: checkIsAdFound }))
+        ),
+        React.createElement('span', { className: 'clearfix' }),
+        React.createElement(
+          'div',
+          { id: 'contextual-video-ad-' + payload._id, className: 'contextual-video-ad' },
+          React.createElement(DFPAdSlot, _extends({}, payload.contextualVideoAD, { refreshFlag: false, checkIsAdFound: checkIsVideoAdFound }))
+        ),
+        React.createElement(BlockContent, _extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
+          blocks: [].concat(_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({}, payload, {
+        contextualAD: _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 _JSON$stringify(size) === _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.createElement(
+        React.Fragment,
+        null,
+        React.createElement(BlockContent, _extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
+          blocks: [].concat(_toConsumableArray(body.slice(0, _selectedIndex))),
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config())),
+        contextualADFlag && React.createElement('span', { className: 'clearfix' }),
+        React.createElement(
+          'div',
+          { id: 'contextual-native-ad-' + payload._id, className: 'contextual-native-ad' },
+          React.createElement(DFPAdSlot, _extends({}, payload.contextualAD, { refreshFlag: false, checkIsAdFound: _checkIsAdFound }))
+        ),
+        contextualADFlag && React.createElement('span', { className: 'clearfix' }),
+        React.createElement(BlockContent, _extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
+          blocks: [].concat(_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({}, payload, {
+        contextualVideoAD: _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.createElement(
+        React.Fragment,
+        null,
+        React.createElement(BlockContent, _extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag, articleId),
+          blocks: [].concat(_toConsumableArray(body.slice(0, _selectedIndex2))),
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config())),
+        React.createElement('span', { className: 'clearfix' }),
+        React.createElement(
+          'div',
+          { id: 'contextual-video-ad-' + payload._id, className: 'contextual-video-ad' },
+          React.createElement(DFPAdSlot, _extends({}, payload.contextualVideoAD, { refreshFlag: false, checkIsAdFound: _checkIsAdFound2 }))
+        ),
+        React.createElement(BlockContent, _extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
+          blocks: [].concat(_toConsumableArray(body.slice(_selectedIndex2))),
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config()))
+      );
+    } else {
+      return React.createElement(BlockContent, _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.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      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.createElement(
+        'div',
+        null,
+        queueData && queueData.length === 1 && React.createElement(
+          Head,
+          null,
+          React.createElement(
+            'title',
+            { key: 'title' },
+            '' + shareTitle
+          ),
+          React.createElement('meta', { name: 'description', key: 'description', content: shareSummary }),
+          passwordLock && React.createElement('meta', { name: 'robots', content: 'noindex, nofollow' }),
+          React.createElement('meta', { property: 'og:url', content: shareUrl, key: 'og:url' }),
+          React.createElement('meta', { property: 'og:title', content: shareTitle, key: 'og:title' }),
+          React.createElement('meta', { property: 'og:image', content: shareImage, key: 'og:image' }),
+          React.createElement('meta', { property: 'og:site_name', content: props.Settings.title, key: 'og:site_name' }),
+          React.createElement('meta', { property: 'og:description', content: shareSummary, key: 'og:description' }),
+          React.createElement('meta', { name: 'twitter:card', content: 'summary', key: 'twitter:card' }),
+          React.createElement('meta', { name: 'twitter:title', content: shareTitle, key: 'twitter:title' }),
+          React.createElement('meta', { name: 'twitter:image', content: shareImage, key: 'twitter:image' }),
+          React.createElement('meta', { name: 'twitter:site', content: '@' + props.Settings.title, key: 'twitter:site' }),
+          React.createElement('meta', { name: 'twitter:description', content: shareSummary, key: 'twitter:description' })
+        ),
+        React.createElement(
+          'h1',
+          { className: 'page-title' },
+          title
+        ),
+        React.createElement(
+          'div',
+          { className: 'video-detail', style: { marginBottom: isCutomPage(props.article) ? '150px' : 0 } },
+          React.createElement(
+            'div',
+            null,
+            moment(published).format('LL')
+          ),
+          React.createElement(
+            'div',
+            { className: 'mb-3' },
+            authorDetails && authorDetails.map(function (authorDetail, index) {
+              return React.createElement(
+                'span',
+                { key: index },
+                renderAuthor(authorDetail.displayName, authorDetail.url, index, authorDetails.length, authorPrefix)
+              );
+            }),
+            props.article.source && React.createElement(
+              'div',
+              { className: 'sanityDisplayLabel' },
+              props.article.source
+            ),
+            issue && React.createElement(
+              'div',
+              null,
+              React.createElement(
+                'div',
+                { className: 'volume-issue' },
+                React.createElement(
+                  'p',
+                  null,
+                  issue.volume && React.createElement(
+                    'span',
+                    null,
+                    'Volume ' + issue.volume,
+                    ','
+                  ),
+                  issue.issueNumber && React.createElement(
+                    'span',
+                    null,
+                    ' Issue ' + issue.issueNumber
+                  )
+                )
+              )
+            ),
+            pageNumber && React.createElement(
+              'div',
+              { className: 'article-pageNumber' },
+              'Page Number: ' + pageNumber
+            )
+          ),
+          React.createElement(
+            'p',
+            null,
+            React.createElement(SocialShare, {
+              shareUrl: shareUrl,
+              shareTitle: shareTitle,
+              shareVia: shareVia,
+              shareSummary: shareSummary,
+              shareSubject: shareSubject,
+              shareImage: shareImage,
+              size: 32,
+              siteName: siteName,
+              twitterSiteName: twitterSiteName,
+              disableMeta: true
+            })
+          ),
+          renderRelevantTopicsDropdown(),
+          React.createElement(
+            'p',
+            null,
+            React.createElement(
+              'em',
+              null,
+              summary
+            ),
+            React.createElement('br', null),
+            React.createElement('br', null)
+          ),
+          main_36 && props.article.Ads.map(function (ad, index) {
+            if (index === 0) {
+              return React.createElement(
+                'div',
+                { key: index, id: 'addid-' + index, style: { display: 'flex', flex: '1 0 auto', marginTop: '-1rem', marginBottom: '1rem' } },
+                ad.component
+              );
+            }
+          }),
+          React.createElement(
+            'div',
+            { className: 'block-content' },
+            renderBlockContent(props.article),
+            issue && issue.url && React.createElement(
+              'a',
+              { href: issue.url, target: '_blank', title: 'Download issue' },
+              React.createElement('img', { style: { margin: '1rem', maxHeight: '40px', maxWidth: '40px' }, src: '/download.png', alt: 'download issue' }),
+              'Download Issue : ',
+              issue.name
+            )
+          )
+        ),
+        renderIsiContent(props.article)
+      )
+    ),
+    main_36 && props.article.Ads.map(function (ad, index) {
+      if (index > 0) {
+        return React.createElement(
+          'div',
+          { key: index, id: 'addid-' + index, style: { display: 'flex', flex: '1 0 auto' } },
+          ad.component
+        );
+      }
+    }),
+    React.createElement('div', { className: 'clearfix', style: { minHeight: '1px' } }),
+    React.createElement('hr', { className: 'article-seperater' }),
+    React.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 (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(internalTag), _toConsumableArray(userDefinedTag), _toConsumableArray(SponsorshipTag), _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({}, targeting, { campaign_id: props.cache.hyperTargeting });
+    }
+
+    if (position && position.length) {
+      targeting['pos'] = position;
+    }
+    return targeting;
+  };
+
+  var firstArticle = function firstArticle() {
+    var article = _Object$assign({}, props.article);
+    var targeting = getTargeting(props.article);
+    article.Ads = Ads.getRightItems(targeting);
+    return article;
+  };
+
+  var _useState3 = useState([firstArticle()]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      queueData = _useState4[0],
+      setQueueData = _useState4[1];
+
+  var refreshAD = function refreshAD(path) {
+    if (!main_36) {
+      var activeArticle = queueData.find(function (item) {
+        return item.url.current === path;
+      });
+      var targeting = getTargeting(activeArticle);
+      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();
+            _Object$keys(targeting).forEach(function (key) {
+              slot.setTargeting(key, targeting[key]);
+            });
+            slot.setTargeting('pos', pos);
+          });
+          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 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;
+  };
+
+  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(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.createElement(
+    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.createElement(Article, _extends({
+        key: index
+      }, props, {
+        changeUrl: changeUrl,
+        authorPrfix: authorPrefix,
+        article: article,
+        cpModificationRequired: cpModificationRequired,
+        queueData: queueData
+      }));
+    })
+  );
+};
+
+export default ArticleQueue;