@mjhls/mjh-framework 1.0.335 → 1.0.337

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.335
+# mjh-framework v. 1.0.337
 
 > Foundation Framework
 

package/dist/cjs/GroupDeck.js

@@ -44,7 +44,6 @@ var GroupDeck = function GroupDeck(props) {
   }, []);
 
   var setThumbSize = function setThumbSize() {
-
     var thumbSize = void 0;
     if (window.innerWidth > 1399) {
       thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 48);
@@ -109,8 +108,8 @@ var GroupDeck = function GroupDeck(props) {
     });
   }
 
-  function handleClick(url, vidIndex) {
-    props.setState(url, vidIndex);
+  function handleClick(url, thumbnail, vidIndex) {
+    props.setState(url, thumbnail, vidIndex);
   }
 
   var _props$current = props.current,
@@ -144,7 +143,7 @@ var GroupDeck = function GroupDeck(props) {
           // If there is a current prop, means this will overlay a currently playing video
           if (current !== '') {
             var url = video.url;
-            var thumbnail = 'https://img.youtube.com/vi/' + smoothscroll.getYoutubeId(video.url) + '/hqdefault.jpg';
+            var thumbnail = video.thumbnail || 'https://img.youtube.com/vi/' + smoothscroll.getYoutubeId(video.url) + '/hqdefault.jpg';
 
             return React__default.createElement(
               'div',
@@ -157,7 +156,7 @@ var GroupDeck = function GroupDeck(props) {
               React__default.createElement(
                 'a',
                 { onClick: function onClick() {
-                    return handleClick(url, index + 1);
+                    return handleClick(url, thumbnail, index + 1);
                   } },
                 React__default.createElement(
                   'div',
@@ -191,7 +190,7 @@ var GroupDeck = function GroupDeck(props) {
           } else {
             // slider by itself
             var _url = '' + video.link;
-            var _thumbnail = 'https://img.youtube.com/vi/' + smoothscroll.getYoutubeId(video.url) + '/hqdefault.jpg';
+            var _thumbnail = video.thumbnail || 'https://img.youtube.com/vi/' + smoothscroll.getYoutubeId(video.url) + '/hqdefault.jpg';
             return React__default.createElement(
               'div',
               { ref: tile, key: index, className: 'tile', style: { width: tileSize + 'px' } },
@@ -246,7 +245,7 @@ var GroupDeck = function GroupDeck(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        #vid-slider * {\n          box-sizing: border-box;\n          -ms-overflow-style: none;\n        }\n        #vid-slider::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider {\n          position: relative;\n          -ms-overflow-style: none;\n          padding: 0 1.5rem;\n          margin-bottom: 2rem;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 1rem;\n          color: white;\n          background: rgba(0, 0, 0, 0.75);\n        }\n        #vid-slider h1,\n        #vid-slider p {\n          text-align: center;\n          width: 100%;\n          max-width: 500px;\n          margin: auto;\n        }\n        #vid-slider,\n        #vidHolder {\n          max-width: 805px;\n        }\n        #vid-slider a:link,\n        #vid-slider a:hover,\n        #vid-slider a:active,\n        #vid-slider a:visited {\n          transition: color 150ms;\n          color: #95a5a6;\n          text-decoration: none;\n        }\n        #vid-slider a:hover {\n          color: #7f8c8d;\n          text-decoration: underline;\n        }\n        #vid-slider .contain {\n          width: 100%;\n        }\n        #vid-slider .row {\n          overflow-x: scroll;\n          width: 100%;\n          -ms-overflow-style: none;\n          overflow-y: hidden !important;\n        }\n        #vid-slider .tile__info {\n          white-space: normal !important;\n          position: absolute;\n          text-align: center;\n          color: ' + (props.dark ? 'white' : '#383838') + ';\n          opacity: 1;\n          font-size: 0.9rem;\n          font-weight: bold;\n          transition: opacity 0.25s;\n        }\n        #vid-slider .row__inner {\n          transition: 450ms -webkit-transform;\n          transition: 450ms transform;\n          transition: 450ms transform, 450ms -webkit-transform;\n          font-size: 0;\n          white-space: nowrap;\n          margin: 25px 0 55px !important;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          height: 135px;\n          \n          margin: 0 12px;\n          font-size: 20px;\n          cursor: pointer;\n          transition: 450ms all;\n          -webkit-transform-origin: center left;\n          transform-origin: center left;\n        }\n        #vid-slider .tile:first-child {\n          margin-left: 15px;\n        }\n        #vid-slider .tile__img {\n          height: 135px;\n          \n          -o-object-fit: cover;\n          object-fit: cover;\n          object-position: center;\n        }\n        #vid-slider .tile__details {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          top: 0;\n          font-size: 10px;\n          opacity: 0;\n          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n          transition: 450ms opacity;\n        }\n        #vid-slider .tile__details:after,\n        #vid-slider .tile__details:before {\n          content: \'\';\n\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          display: #000;\n        }\n        #vid-slider .tile__details:after {\n          margin-top: -25px;\n          margin-left: -25px;\n          width: 50px;\n          height: 50px;\n          border: 3px solid #ecf0f1;\n          line-height: 50px;\n          text-align: center;\n          border-radius: 100%;\n          background: rgba(0, 0, 0, 0.5);\n          z-index: 1;\n        }\n        #vid-slider .tile__details:before {\n          content: \'\';\n          background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n            no-repeat center center;\n          left: 0;\n          width: 100%;\n          height: 3rem;\n          font-size: 30px;\n          margin-right: 12px;\n          margin-top: -24px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n\n        #vid-slider .tile__title {\n          position: absolute;\n          bottom: 0;\n          padding: 10px;\n          max-width: 250px;\n        }\n        #vid-slider .tile__title_text {\n          position: relative;\n          left: 0;\n          white-space: normal;\n        }\n\n        #vid-slider .tile__slider-prev,\n        #vid-slider .tile__slider-next {\n          width: 30px;\n          background: transparent;\n          border: none;\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 99;\n          cursor: pointer;\n          color: ' + (props.dark ? 'white' : 'black') + ';\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 2rem;\n        }\n        #vid-slider .tile__slider-prev {\n          left: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider .tile__slider-next {\n          right: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding-right: 0 1.2rem;\n        }\n\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ' + (props.dark ? 'white' : 'black') + ';\n          border-width: 0 4px 4px 0;\n          display: inline-block;\n          padding: 4px;\n          pointer-events: none;\n        }\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n        @media screen and (max-width: 1399px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 620px;\n          }\n        }\n        @media screen and (max-width: 1200px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 580px;\n          }\n        }\n        @media screen and (max-width: 967px) {\n          #vid-slider {\n            max-width: 100%;\n          }\n       \n\n          #vid-slider .tile__img {\n            height: 85px;\n            object-fit: cover;\n          }\n        }\n\n        @media screen and (max-width: 768px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 180px;\n          }\n\n          #vid-slider .tile__img {\n            height: 110px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner{\n            margin: 30px 0 60px;\n          }\n        }\n        @media screen and (max-width: 568px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 180px;\n          }\n\n          #vid-slider .tile__img {\n            height: 180px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner{\n            margin: 30px 0 60px;\n          }\n        }\n      '
+      '\n        #vid-slider * {\n          box-sizing: border-box;\n          -ms-overflow-style: none;\n        }\n        #vid-slider::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider {\n          position: relative;\n          -ms-overflow-style: none;\n          padding: 0 1.5rem;\n          margin-bottom: 2rem;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 1rem;\n          color: white;\n          background: rgba(0, 0, 0, 0.75);\n        }\n        #vid-slider h1,\n        #vid-slider p {\n          text-align: center;\n          width: 100%;\n          max-width: 500px;\n          margin: auto;\n        }\n        #vid-slider,\n        #vidHolder {\n          max-width: 805px;\n        }\n        #vid-slider a:link,\n        #vid-slider a:hover,\n        #vid-slider a:active,\n        #vid-slider a:visited {\n          transition: color 150ms;\n          color: #95a5a6;\n          text-decoration: none;\n        }\n        #vid-slider a:hover {\n          color: #7f8c8d;\n          text-decoration: underline;\n        }\n        #vid-slider .contain {\n          width: 100%;\n        }\n        #vid-slider .row {\n          overflow-x: scroll;\n          width: 100%;\n          -ms-overflow-style: none;\n          overflow-y: hidden !important;\n        }\n        #vid-slider .tile__info {\n          white-space: normal !important;\n          position: absolute;\n          text-align: center;\n          color: ' + (props.dark ? 'white' : '#383838') + ';\n          opacity: 1;\n          font-size: 0.9rem;\n          font-weight: bold;\n          transition: opacity 0.25s;\n        }\n        #vid-slider .row__inner {\n          transition: 450ms -webkit-transform;\n          transition: 450ms transform;\n          transition: 450ms transform, 450ms -webkit-transform;\n          font-size: 0;\n          white-space: nowrap;\n          margin: 25px 0 55px !important;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          height: 135px;\n\n          margin: 0 12px;\n          font-size: 20px;\n          cursor: pointer;\n          transition: 450ms all;\n          -webkit-transform-origin: center left;\n          transform-origin: center left;\n        }\n        #vid-slider .tile:first-child {\n          margin-left: 15px;\n        }\n        #vid-slider .tile__img {\n          height: 135px;\n\n          -o-object-fit: cover;\n          object-fit: cover;\n          object-position: center;\n        }\n        #vid-slider .tile__details {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          top: 0;\n          font-size: 10px;\n          opacity: 0;\n          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n          transition: 450ms opacity;\n        }\n        #vid-slider .tile__details:after,\n        #vid-slider .tile__details:before {\n          content: \'\';\n\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          display: #000;\n        }\n        #vid-slider .tile__details:after {\n          margin-top: -25px;\n          margin-left: -25px;\n          width: 50px;\n          height: 50px;\n          border: 3px solid #ecf0f1;\n          line-height: 50px;\n          text-align: center;\n          border-radius: 100%;\n          background: rgba(0, 0, 0, 0.5);\n          z-index: 1;\n        }\n        #vid-slider .tile__details:before {\n          content: \'\';\n          background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n            no-repeat center center;\n          left: 0;\n          width: 100%;\n          height: 3rem;\n          font-size: 30px;\n          margin-right: 12px;\n          margin-top: -24px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n\n        #vid-slider .tile__title {\n          position: absolute;\n          bottom: 0;\n          padding: 10px;\n          max-width: 250px;\n        }\n        #vid-slider .tile__title_text {\n          position: relative;\n          left: 0;\n          white-space: normal;\n        }\n\n        #vid-slider .tile__slider-prev,\n        #vid-slider .tile__slider-next {\n          width: 30px;\n          background: transparent;\n          border: none;\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 99;\n          cursor: pointer;\n          color: ' + (props.dark ? 'white' : 'black') + ';\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 2rem;\n        }\n        #vid-slider .tile__slider-prev {\n          left: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider .tile__slider-next {\n          right: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding-right: 0 1.2rem;\n        }\n\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ' + (props.dark ? 'white' : 'black') + ';\n          border-width: 0 4px 4px 0;\n          display: inline-block;\n          padding: 4px;\n          pointer-events: none;\n        }\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n        @media screen and (max-width: 1399px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 620px;\n          }\n        }\n        @media screen and (max-width: 1200px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 580px;\n          }\n        }\n        @media screen and (max-width: 967px) {\n          #vid-slider {\n            max-width: 100%;\n          }\n\n          #vid-slider .tile__img {\n            height: 85px;\n            object-fit: cover;\n          }\n        }\n\n        @media screen and (max-width: 768px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 180px;\n          }\n\n          #vid-slider .tile__img {\n            height: 110px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner {\n            margin: 30px 0 60px;\n          }\n        }\n        @media screen and (max-width: 568px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 180px;\n          }\n\n          #vid-slider .tile__img {\n            height: 180px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner {\n            margin: 30px 0 60px;\n          }\n        }\n      '
     )
   );
 };

package/dist/cjs/{Normal-c85aee96.js → Normal-b3782788.js}

@@ -434,14 +434,14 @@ var Header = function Header(props) {
   return React__default.createElement(
     Head,
     null,
-    React__default.createElement(
+    title && React__default.createElement(
       'title',
       null,
       title
     ),
-    !isLiveSite && React__default.createElement('meta', { name: 'robots', content: 'noindex, nofollow' }),
-    React__default.createElement('meta', { name: 'keywords', content: keyword }),
-    React__default.createElement('meta', { name: 'description', content: description })
+    keyword && React__default.createElement('meta', { name: 'keywords', content: keyword }),
+    description && React__default.createElement('meta', { name: 'description', content: description }),
+    !isLiveSite && React__default.createElement('meta', { name: 'robots', content: 'noindex, nofollow' })
   );
 };
 

package/dist/cjs/QueueDeckExpanded.js

@@ -261,6 +261,11 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
                     showAuthor && article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index) {
                       return renderAuthor(authorDetail, index, article.authorMapping.length);
                     }),
+                    article.publicationSource && React__default.createElement(
+                      'p',
+                      { className: 'p-0 mb-1' },
+                      article.publicationSource
+                    ),
                     showCategory && article.contentCategory && React__default.createElement(
                       'p',
                       {
@@ -336,6 +341,11 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
                     showAuthor && article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index) {
                       return renderAuthor(authorDetail, index, article.authorMapping.length);
                     }),
+                    article.publicationSource && React__default.createElement(
+                      'p',
+                      { className: 'p-0 mb-1' },
+                      article.publicationSource
+                    ),
                     showCategory && article.contentCategory && React__default.createElement(
                       'p',
                       {
@@ -412,6 +422,11 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
                 showAuthor && article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index) {
                   return renderAuthor(authorDetail, index, article.authorMapping.length);
                 }),
+                article.publicationSource && React__default.createElement(
+                  'p',
+                  { className: 'p-0 mb-1' },
+                  article.publicationSource
+                ),
                 showCategory && article.contentCategory && React__default.createElement(
                   'p',
                   {

package/dist/cjs/TemplateNormal.js

@@ -19,7 +19,7 @@ require('./react-social-icons-cd0d9d3b.js');
 require('react-bootstrap');
 require('./index.esm-340d3792.js');
 require('react-bootstrap/Button');
-var TemplateNormal = require('./Normal-c85aee96.js');
+var TemplateNormal = require('./Normal-b3782788.js');
 require('react-bootstrap/ListGroup');
 require('next/head');
 require('react-bootstrap/Nav');

package/dist/cjs/index.js

@@ -53,7 +53,7 @@ var IssueDeck = require('./IssueDeck.js');
 require('react-bootstrap/Badge');
 var IssueContentDeck = require('./IssueContentDeck.js');
 var Spinner = _interopDefault(require('react-bootstrap/Spinner'));
-var TemplateNormal = require('./Normal-c85aee96.js');
+var TemplateNormal = require('./Normal-b3782788.js');
 require('react-bootstrap/ListGroup');
 var Head = _interopDefault(require('next/head'));
 var Accordion = _interopDefault(require('react-bootstrap/Accordion'));
@@ -2774,24 +2774,26 @@ var SocialShare = function SocialShare(props) {
       shareImage = props.shareImage,
       size = props.size,
       siteName = props.siteName,
-      twitterSiteName = props.twitterSiteName;
+      twitterSiteName = props.twitterSiteName,
+      _props$disableMeta = props.disableMeta,
+      disableMeta = _props$disableMeta === undefined ? false : _props$disableMeta;
 
   return React__default.createElement(
     React__default.Fragment,
     null,
-    React__default.createElement(
+    !disableMeta && React__default.createElement(
       Head,
       null,
-      React__default.createElement('meta', { property: 'og:url', content: shareUrl }),
-      React__default.createElement('meta', { property: 'og:title', content: shareTitle }),
-      React__default.createElement('meta', { property: 'og:image', content: shareImage }),
-      React__default.createElement('meta', { property: 'og:site_name', content: siteName }),
-      React__default.createElement('meta', { property: 'og:description', content: shareSummary }),
-      React__default.createElement('meta', { name: 'twitter:card', content: 'summary' }),
-      React__default.createElement('meta', { name: 'twitter:title', content: shareTitle }),
-      React__default.createElement('meta', { name: 'twitter:image', content: shareImage }),
-      React__default.createElement('meta', { name: 'twitter:site', content: twitterSiteName }),
-      React__default.createElement('meta', { name: 'twitter:description', content: shareSummary })
+      React__default.createElement('meta', { property: 'og:url', content: shareUrl, key: 'og:url' }),
+      React__default.createElement('meta', { property: 'og:title', content: shareTitle, key: 'og:title' }),
+      React__default.createElement('meta', { property: 'og:image', content: shareImage, key: 'og:image' }),
+      React__default.createElement('meta', { property: 'og:site_name', content: siteName, key: 'og:site_name' }),
+      React__default.createElement('meta', { property: 'og:description', content: shareSummary, key: 'og:description' }),
+      React__default.createElement('meta', { name: 'twitter:card', content: 'summary', key: 'og:card' }),
+      React__default.createElement('meta', { name: 'twitter:title', content: shareTitle, key: 'og:title' }),
+      React__default.createElement('meta', { name: 'twitter:image', content: shareImage, key: 'og:image' }),
+      React__default.createElement('meta', { name: 'twitter:site', content: twitterSiteName, key: 'og:site' }),
+      React__default.createElement('meta', { name: 'twitter:description', content: shareSummary, key: 'og:description' })
     ),
     React__default.createElement(
       reactShare.FacebookShareButton,
@@ -12884,6 +12886,7 @@ var Audio = function Audio(_ref) {
 
 var VideoMp4 = function VideoMp4(_ref) {
   var url = _ref.url,
+      thumbnail = _ref.thumbnail,
       vidLoaded = _ref.vidLoaded;
 
   var _useState = React.useState(false),
@@ -12971,6 +12974,7 @@ var VideoMp4 = function VideoMp4(_ref) {
     vidLoaded && React__default.createElement(
       'video',
       {
+        poster: thumbnail || '',
         style: { width: '100%' },
         controls: true,
         onCanPlay: function onCanPlay(e) {
@@ -13027,25 +13031,30 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       vidUrl = _useState8[0],
       setVidUrl = _useState8[1];
 
-  var _useState9 = React.useState(false),
+  var _useState9 = React.useState(''),
       _useState10 = slicedToArray._slicedToArray(_useState9, 2),
-      vidLoaded = _useState10[0],
-      setVidLoaded = _useState10[1];
+      vidThumbnail = _useState10[0],
+      setVidThumbnail = _useState10[1];
 
-  var _useState11 = React.useState('youtube'),
+  var _useState11 = React.useState(false),
       _useState12 = slicedToArray._slicedToArray(_useState11, 2),
-      vidType = _useState12[0],
-      setVidType = _useState12[1];
+      vidLoaded = _useState12[0],
+      setVidLoaded = _useState12[1];
 
-  var _useState13 = React.useState(''),
+  var _useState13 = React.useState('youtube'),
       _useState14 = slicedToArray._slicedToArray(_useState13, 2),
-      series = _useState14[0],
-      setSeries = _useState14[1];
+      vidType = _useState14[0],
+      setVidType = _useState14[1];
 
-  var _useState15 = React.useState([]),
+  var _useState15 = React.useState(''),
       _useState16 = slicedToArray._slicedToArray(_useState15, 2),
-      seriesData = _useState16[0],
-      setData = _useState16[1];
+      series = _useState16[0],
+      setSeries = _useState16[1];
+
+  var _useState17 = React.useState([]),
+      _useState18 = slicedToArray._slicedToArray(_useState17, 2),
+      seriesData = _useState18[0],
+      setData = _useState18[1];
   //variables
 
 
@@ -13059,10 +13068,10 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
 
     nodes.videos.forEach(function (vid) {
       if (vid.type == 'mp4') {
-        data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset), url: vid.url });
+        data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset).url(), url: vid.url });
       } else {
         if (vid.thumbnail && vid.thumbnail.asset) {
-          data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset), url: vid.url });
+          data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset).url(), url: vid.url });
         } else {
           data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + smoothscroll.getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
         }
@@ -13073,6 +13082,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     if (data.length < seriesVid) {
       setSeries(1);
       setVidUrl(nodes.videos[0].url);
+      setVidThumbnail(nodes.videos[0].thumbnail && nodes.videos[0].thumbnail.asset ? urlFor(nodes.videos[0].thumbnail.asset).url() : '');
       if (nodes.videos[0].type) {
         setVidType(nodes.videos[0].type);
       }
@@ -13083,7 +13093,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     } else {
       setSeries(seriesVid);
       setVidUrl(nodes.videos[seriesVid - 1].url);
-
+      setVidThumbnail(nodes.videos[seriesVid - 1].thumbnail && nodes.videos[seriesVid - 1].thumbnail.asset ? urlFor(nodes.videos[seriesVid - 1].thumbnail.asset).url() : '');
       if (nodes.videos[0].type) {
         setVidType(nodes.videos[seriesVid - 1].type);
       }
@@ -13109,10 +13119,11 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   }
 
   // This function is passed to the GroupDeck to change the youtube iframe src
-  function setState(url, vidIndex) {
+  function setState(url, thumbnail, vidIndex) {
     setVidLoaded(false);
     setTimeout(function () {
       setVidUrl(url);
+      setVidThumbnail(thumbnail);
       toggleSeries();
       debounce.lib_3.refresh();
       var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
@@ -13233,7 +13244,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
       vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: smoothscroll.getYoutubeId(vidUrl), opts: opts, onReady: handleOnReady, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: function onEnd(e) {
           return handleOnEnd(e);
-        } }) : React__default.createElement(VideoMp4, { url: vidUrl, vidLoaded: vidLoaded }),
+        } }) : React__default.createElement(VideoMp4, { url: vidUrl, thumbnail: vidThumbnail, vidLoaded: vidLoaded }),
       React__default.createElement(
         'div',
         {
@@ -16474,12 +16485,21 @@ var Article = function Article(props) {
       shareBaseUrl = shareOptions.shareBaseUrl,
       shareSiteTitle = shareOptions.shareSiteTitle;
 
-  var shareUrl = shareBaseUrl + props.url;
+  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.createElement(
     React__default.Fragment,
     null,
@@ -16489,7 +16509,7 @@ var Article = function Article(props) {
         offSetTop: 45,
         onChange: function onChange(visible) {
           if (visible !== false) {
-            changeUrl(url, visible);
+            changeUrl(url, visible, meta);
           }
         } },
       React__default.createElement(
@@ -16500,20 +16520,21 @@ var Article = function Article(props) {
           null,
           React__default.createElement(
             'title',
-            null,
+            { key: 'title' },
             shareTitle + ' | ' + props.cache.siteSettingCache.name
           ),
+          React__default.createElement('meta', { name: 'description', key: 'description', content: shareSummary }),
           passwordLock && React__default.createElement('meta', { name: 'robots', content: 'noindex, nofollow' }),
-          React__default.createElement('meta', { property: 'og:url', content: shareUrl }),
-          React__default.createElement('meta', { property: 'og:title', content: shareTitle }),
-          React__default.createElement('meta', { property: 'og:image', content: shareImage }),
-          React__default.createElement('meta', { property: 'og:site_name', content: props.Settings.title }),
-          React__default.createElement('meta', { property: 'og:description', content: shareSummary }),
-          React__default.createElement('meta', { name: 'twitter:card', content: 'summary' }),
-          React__default.createElement('meta', { name: 'twitter:title', content: shareTitle }),
-          React__default.createElement('meta', { name: 'twitter:image', content: shareImage }),
-          React__default.createElement('meta', { name: 'twitter:site', content: '@' + shareSiteTitle }),
-          React__default.createElement('meta', { name: 'twitter:description', content: shareSummary })
+          React__default.createElement('meta', { property: 'og:url', content: shareUrl, key: 'og:url' }),
+          React__default.createElement('meta', { property: 'og:title', content: shareTitle, key: 'og:title' }),
+          React__default.createElement('meta', { property: 'og:image', content: shareImage, key: 'og:image' }),
+          React__default.createElement('meta', { property: 'og:site_name', content: props.Settings.title, key: 'og:site_name' }),
+          React__default.createElement('meta', { property: 'og:description', content: shareSummary, key: 'og:description' }),
+          React__default.createElement('meta', { name: 'twitter:card', content: 'summary', key: 'twitter:card' }),
+          React__default.createElement('meta', { name: 'twitter:title', content: shareTitle, key: 'twitter:title' }),
+          React__default.createElement('meta', { name: 'twitter:image', content: shareImage, key: 'twitter:image' }),
+          React__default.createElement('meta', { name: 'twitter:site', content: '@' + props.Settings.title, key: 'twitter:site' }),
+          React__default.createElement('meta', { name: 'twitter:description', content: shareSummary, key: 'twitter:description' })
         ),
         React__default.createElement(
           'h1',
@@ -16588,7 +16609,8 @@ var Article = function Article(props) {
               shareImage: shareImage,
               size: 32,
               siteName: siteName,
-              twitterSiteName: twitterSiteName
+              twitterSiteName: twitterSiteName,
+              disableMeta: true
             })
           ),
           renderRelevantTopicsDropdown(),
@@ -16719,6 +16741,10 @@ var ArticleQueue = function ArticleQueue(props) {
       }
     }
 
+    if (props.cache.hyperTargeting) {
+      targeting = _extends$2._extends({}, targeting, { campaign_id: props.cache.hyperTargeting });
+    }
+
     return targeting;
   };
 
@@ -16809,7 +16835,20 @@ var ArticleQueue = function ArticleQueue(props) {
     }
   };
 
-  var changeUrl = function changeUrl(path, visibility) {
+  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 newPath = '/view/' + path;
     if (!isScrollDown) {
       if (visibility === 'top') {
@@ -16819,6 +16858,7 @@ var ArticleQueue = function ArticleQueue(props) {
           props.pageview(newPath);
         }
         refreshAD(path);
+        changeMeta(meta);
       }
     } else {
       if (visibility === 'bottom') {
@@ -16828,13 +16868,14 @@ var ArticleQueue = function ArticleQueue(props) {
           props.pageview(newPath);
         }
         refreshAD(path);
+        changeMeta(meta);
       }
     }
   };
 
   return React__default.createElement(
     visibilitySensor.InfiniteScroll,
-    { dataLength: queueData.length, next: loadmore, scrollThreshold: 0.8, hasMore: true },
+    { dataLength: queueData.length, next: loadmore, scrollThreshold: '60%', hasMore: true },
     queueData.map(function (article, index) {
       if (!checkSponseredArticle(article) && Ads.getNativeContextualAD) {
         article.contextualAD = Ads.getNativeContextualAD(getTargeting(article));

package/dist/esm/GroupDeck.js

@@ -39,7 +39,6 @@ var GroupDeck = function GroupDeck(props) {
   }, []);
 
   var setThumbSize = function setThumbSize() {
-
     var thumbSize = void 0;
     if (window.innerWidth > 1399) {
       thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 48);
@@ -104,8 +103,8 @@ var GroupDeck = function GroupDeck(props) {
     });
   }
 
-  function handleClick(url, vidIndex) {
-    props.setState(url, vidIndex);
+  function handleClick(url, thumbnail, vidIndex) {
+    props.setState(url, thumbnail, vidIndex);
   }
 
   var _props$current = props.current,
@@ -139,7 +138,7 @@ var GroupDeck = function GroupDeck(props) {
           // If there is a current prop, means this will overlay a currently playing video
           if (current !== '') {
             var url = video.url;
-            var thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
+            var thumbnail = video.thumbnail || 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
 
             return React__default.createElement(
               'div',
@@ -152,7 +151,7 @@ var GroupDeck = function GroupDeck(props) {
               React__default.createElement(
                 'a',
                 { onClick: function onClick() {
-                    return handleClick(url, index + 1);
+                    return handleClick(url, thumbnail, index + 1);
                   } },
                 React__default.createElement(
                   'div',
@@ -186,7 +185,7 @@ var GroupDeck = function GroupDeck(props) {
           } else {
             // slider by itself
             var _url = '' + video.link;
-            var _thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
+            var _thumbnail = video.thumbnail || 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
             return React__default.createElement(
               'div',
               { ref: tile, key: index, className: 'tile', style: { width: tileSize + 'px' } },
@@ -241,7 +240,7 @@ var GroupDeck = function GroupDeck(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        #vid-slider * {\n          box-sizing: border-box;\n          -ms-overflow-style: none;\n        }\n        #vid-slider::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider {\n          position: relative;\n          -ms-overflow-style: none;\n          padding: 0 1.5rem;\n          margin-bottom: 2rem;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 1rem;\n          color: white;\n          background: rgba(0, 0, 0, 0.75);\n        }\n        #vid-slider h1,\n        #vid-slider p {\n          text-align: center;\n          width: 100%;\n          max-width: 500px;\n          margin: auto;\n        }\n        #vid-slider,\n        #vidHolder {\n          max-width: 805px;\n        }\n        #vid-slider a:link,\n        #vid-slider a:hover,\n        #vid-slider a:active,\n        #vid-slider a:visited {\n          transition: color 150ms;\n          color: #95a5a6;\n          text-decoration: none;\n        }\n        #vid-slider a:hover {\n          color: #7f8c8d;\n          text-decoration: underline;\n        }\n        #vid-slider .contain {\n          width: 100%;\n        }\n        #vid-slider .row {\n          overflow-x: scroll;\n          width: 100%;\n          -ms-overflow-style: none;\n          overflow-y: hidden !important;\n        }\n        #vid-slider .tile__info {\n          white-space: normal !important;\n          position: absolute;\n          text-align: center;\n          color: ' + (props.dark ? 'white' : '#383838') + ';\n          opacity: 1;\n          font-size: 0.9rem;\n          font-weight: bold;\n          transition: opacity 0.25s;\n        }\n        #vid-slider .row__inner {\n          transition: 450ms -webkit-transform;\n          transition: 450ms transform;\n          transition: 450ms transform, 450ms -webkit-transform;\n          font-size: 0;\n          white-space: nowrap;\n          margin: 25px 0 55px !important;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          height: 135px;\n          \n          margin: 0 12px;\n          font-size: 20px;\n          cursor: pointer;\n          transition: 450ms all;\n          -webkit-transform-origin: center left;\n          transform-origin: center left;\n        }\n        #vid-slider .tile:first-child {\n          margin-left: 15px;\n        }\n        #vid-slider .tile__img {\n          height: 135px;\n          \n          -o-object-fit: cover;\n          object-fit: cover;\n          object-position: center;\n        }\n        #vid-slider .tile__details {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          top: 0;\n          font-size: 10px;\n          opacity: 0;\n          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n          transition: 450ms opacity;\n        }\n        #vid-slider .tile__details:after,\n        #vid-slider .tile__details:before {\n          content: \'\';\n\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          display: #000;\n        }\n        #vid-slider .tile__details:after {\n          margin-top: -25px;\n          margin-left: -25px;\n          width: 50px;\n          height: 50px;\n          border: 3px solid #ecf0f1;\n          line-height: 50px;\n          text-align: center;\n          border-radius: 100%;\n          background: rgba(0, 0, 0, 0.5);\n          z-index: 1;\n        }\n        #vid-slider .tile__details:before {\n          content: \'\';\n          background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n            no-repeat center center;\n          left: 0;\n          width: 100%;\n          height: 3rem;\n          font-size: 30px;\n          margin-right: 12px;\n          margin-top: -24px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n\n        #vid-slider .tile__title {\n          position: absolute;\n          bottom: 0;\n          padding: 10px;\n          max-width: 250px;\n        }\n        #vid-slider .tile__title_text {\n          position: relative;\n          left: 0;\n          white-space: normal;\n        }\n\n        #vid-slider .tile__slider-prev,\n        #vid-slider .tile__slider-next {\n          width: 30px;\n          background: transparent;\n          border: none;\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 99;\n          cursor: pointer;\n          color: ' + (props.dark ? 'white' : 'black') + ';\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 2rem;\n        }\n        #vid-slider .tile__slider-prev {\n          left: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider .tile__slider-next {\n          right: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding-right: 0 1.2rem;\n        }\n\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ' + (props.dark ? 'white' : 'black') + ';\n          border-width: 0 4px 4px 0;\n          display: inline-block;\n          padding: 4px;\n          pointer-events: none;\n        }\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n        @media screen and (max-width: 1399px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 620px;\n          }\n        }\n        @media screen and (max-width: 1200px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 580px;\n          }\n        }\n        @media screen and (max-width: 967px) {\n          #vid-slider {\n            max-width: 100%;\n          }\n       \n\n          #vid-slider .tile__img {\n            height: 85px;\n            object-fit: cover;\n          }\n        }\n\n        @media screen and (max-width: 768px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 180px;\n          }\n\n          #vid-slider .tile__img {\n            height: 110px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner{\n            margin: 30px 0 60px;\n          }\n        }\n        @media screen and (max-width: 568px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 180px;\n          }\n\n          #vid-slider .tile__img {\n            height: 180px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner{\n            margin: 30px 0 60px;\n          }\n        }\n      '
+      '\n        #vid-slider * {\n          box-sizing: border-box;\n          -ms-overflow-style: none;\n        }\n        #vid-slider::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider {\n          position: relative;\n          -ms-overflow-style: none;\n          padding: 0 1.5rem;\n          margin-bottom: 2rem;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 1rem;\n          color: white;\n          background: rgba(0, 0, 0, 0.75);\n        }\n        #vid-slider h1,\n        #vid-slider p {\n          text-align: center;\n          width: 100%;\n          max-width: 500px;\n          margin: auto;\n        }\n        #vid-slider,\n        #vidHolder {\n          max-width: 805px;\n        }\n        #vid-slider a:link,\n        #vid-slider a:hover,\n        #vid-slider a:active,\n        #vid-slider a:visited {\n          transition: color 150ms;\n          color: #95a5a6;\n          text-decoration: none;\n        }\n        #vid-slider a:hover {\n          color: #7f8c8d;\n          text-decoration: underline;\n        }\n        #vid-slider .contain {\n          width: 100%;\n        }\n        #vid-slider .row {\n          overflow-x: scroll;\n          width: 100%;\n          -ms-overflow-style: none;\n          overflow-y: hidden !important;\n        }\n        #vid-slider .tile__info {\n          white-space: normal !important;\n          position: absolute;\n          text-align: center;\n          color: ' + (props.dark ? 'white' : '#383838') + ';\n          opacity: 1;\n          font-size: 0.9rem;\n          font-weight: bold;\n          transition: opacity 0.25s;\n        }\n        #vid-slider .row__inner {\n          transition: 450ms -webkit-transform;\n          transition: 450ms transform;\n          transition: 450ms transform, 450ms -webkit-transform;\n          font-size: 0;\n          white-space: nowrap;\n          margin: 25px 0 55px !important;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          height: 135px;\n\n          margin: 0 12px;\n          font-size: 20px;\n          cursor: pointer;\n          transition: 450ms all;\n          -webkit-transform-origin: center left;\n          transform-origin: center left;\n        }\n        #vid-slider .tile:first-child {\n          margin-left: 15px;\n        }\n        #vid-slider .tile__img {\n          height: 135px;\n\n          -o-object-fit: cover;\n          object-fit: cover;\n          object-position: center;\n        }\n        #vid-slider .tile__details {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          top: 0;\n          font-size: 10px;\n          opacity: 0;\n          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n          transition: 450ms opacity;\n        }\n        #vid-slider .tile__details:after,\n        #vid-slider .tile__details:before {\n          content: \'\';\n\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          display: #000;\n        }\n        #vid-slider .tile__details:after {\n          margin-top: -25px;\n          margin-left: -25px;\n          width: 50px;\n          height: 50px;\n          border: 3px solid #ecf0f1;\n          line-height: 50px;\n          text-align: center;\n          border-radius: 100%;\n          background: rgba(0, 0, 0, 0.5);\n          z-index: 1;\n        }\n        #vid-slider .tile__details:before {\n          content: \'\';\n          background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n            no-repeat center center;\n          left: 0;\n          width: 100%;\n          height: 3rem;\n          font-size: 30px;\n          margin-right: 12px;\n          margin-top: -24px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n\n        #vid-slider .tile__title {\n          position: absolute;\n          bottom: 0;\n          padding: 10px;\n          max-width: 250px;\n        }\n        #vid-slider .tile__title_text {\n          position: relative;\n          left: 0;\n          white-space: normal;\n        }\n\n        #vid-slider .tile__slider-prev,\n        #vid-slider .tile__slider-next {\n          width: 30px;\n          background: transparent;\n          border: none;\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 99;\n          cursor: pointer;\n          color: ' + (props.dark ? 'white' : 'black') + ';\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 2rem;\n        }\n        #vid-slider .tile__slider-prev {\n          left: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider .tile__slider-next {\n          right: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding-right: 0 1.2rem;\n        }\n\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ' + (props.dark ? 'white' : 'black') + ';\n          border-width: 0 4px 4px 0;\n          display: inline-block;\n          padding: 4px;\n          pointer-events: none;\n        }\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n        @media screen and (max-width: 1399px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 620px;\n          }\n        }\n        @media screen and (max-width: 1200px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 580px;\n          }\n        }\n        @media screen and (max-width: 967px) {\n          #vid-slider {\n            max-width: 100%;\n          }\n\n          #vid-slider .tile__img {\n            height: 85px;\n            object-fit: cover;\n          }\n        }\n\n        @media screen and (max-width: 768px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 180px;\n          }\n\n          #vid-slider .tile__img {\n            height: 110px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner {\n            margin: 30px 0 60px;\n          }\n        }\n        @media screen and (max-width: 568px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 180px;\n          }\n\n          #vid-slider .tile__img {\n            height: 180px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner {\n            margin: 30px 0 60px;\n          }\n        }\n      '
     )
   );
 };

package/dist/esm/{Normal-cbddc3c0.js → Normal-e07e4324.js}

@@ -429,14 +429,14 @@ var Header = function Header(props) {
   return React__default.createElement(
     Head,
     null,
-    React__default.createElement(
+    title && React__default.createElement(
       'title',
       null,
       title
     ),
-    !isLiveSite && React__default.createElement('meta', { name: 'robots', content: 'noindex, nofollow' }),
-    React__default.createElement('meta', { name: 'keywords', content: keyword }),
-    React__default.createElement('meta', { name: 'description', content: description })
+    keyword && React__default.createElement('meta', { name: 'keywords', content: keyword }),
+    description && React__default.createElement('meta', { name: 'description', content: description }),
+    !isLiveSite && React__default.createElement('meta', { name: 'robots', content: 'noindex, nofollow' })
   );
 };
 

package/dist/esm/QueueDeckExpanded.js

@@ -255,6 +255,11 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
                     showAuthor && article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index) {
                       return renderAuthor(authorDetail, index, article.authorMapping.length);
                     }),
+                    article.publicationSource && React__default.createElement(
+                      'p',
+                      { className: 'p-0 mb-1' },
+                      article.publicationSource
+                    ),
                     showCategory && article.contentCategory && React__default.createElement(
                       'p',
                       {
@@ -330,6 +335,11 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
                     showAuthor && article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index) {
                       return renderAuthor(authorDetail, index, article.authorMapping.length);
                     }),
+                    article.publicationSource && React__default.createElement(
+                      'p',
+                      { className: 'p-0 mb-1' },
+                      article.publicationSource
+                    ),
                     showCategory && article.contentCategory && React__default.createElement(
                       'p',
                       {
@@ -406,6 +416,11 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
                 showAuthor && article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index) {
                   return renderAuthor(authorDetail, index, article.authorMapping.length);
                 }),
+                article.publicationSource && React__default.createElement(
+                  'p',
+                  { className: 'p-0 mb-1' },
+                  article.publicationSource
+                ),
                 showCategory && article.contentCategory && React__default.createElement(
                   'p',
                   {

package/dist/esm/TemplateNormal.js

@@ -17,7 +17,7 @@ import './react-social-icons-a7d5c5c7.js';
 import 'react-bootstrap';
 import './index.esm-536609db.js';
 import 'react-bootstrap/Button';
-export { T as default } from './Normal-cbddc3c0.js';
+export { T as default } from './Normal-e07e4324.js';
 import 'react-bootstrap/ListGroup';
 import 'next/head';
 import 'react-bootstrap/Nav';

package/dist/esm/index.js

@@ -48,8 +48,8 @@ export { default as IssueDeck } from './IssueDeck.js';
 import 'react-bootstrap/Badge';
 export { default as IssueContentDeck } from './IssueContentDeck.js';
 import Spinner from 'react-bootstrap/Spinner';
-import { M as MdPictureAsPdf } from './Normal-cbddc3c0.js';
-export { A as AD728x90, C as Column1, a as Column2, b as Column3, f as HamMagazine, H as Header, L as LeftNav, e as NavDvm, c as NavMagazine, N as NavNative, d as NavNormal, P as PageFilter, S as Search, g as SideFooter, T as TemplateNormal } from './Normal-cbddc3c0.js';
+import { M as MdPictureAsPdf } from './Normal-e07e4324.js';
+export { A as AD728x90, C as Column1, a as Column2, b as Column3, f as HamMagazine, H as Header, L as LeftNav, e as NavDvm, c as NavMagazine, N as NavNative, d as NavNormal, P as PageFilter, S as Search, g as SideFooter, T as TemplateNormal } from './Normal-e07e4324.js';
 import 'react-bootstrap/ListGroup';
 import Head from 'next/head';
 import Accordion from 'react-bootstrap/Accordion';
@@ -2771,24 +2771,26 @@ var SocialShare = function SocialShare(props) {
       shareImage = props.shareImage,
       size = props.size,
       siteName = props.siteName,
-      twitterSiteName = props.twitterSiteName;
+      twitterSiteName = props.twitterSiteName,
+      _props$disableMeta = props.disableMeta,
+      disableMeta = _props$disableMeta === undefined ? false : _props$disableMeta;
 
   return React__default.createElement(
     React__default.Fragment,
     null,
-    React__default.createElement(
+    !disableMeta && React__default.createElement(
       Head,
       null,
-      React__default.createElement('meta', { property: 'og:url', content: shareUrl }),
-      React__default.createElement('meta', { property: 'og:title', content: shareTitle }),
-      React__default.createElement('meta', { property: 'og:image', content: shareImage }),
-      React__default.createElement('meta', { property: 'og:site_name', content: siteName }),
-      React__default.createElement('meta', { property: 'og:description', content: shareSummary }),
-      React__default.createElement('meta', { name: 'twitter:card', content: 'summary' }),
-      React__default.createElement('meta', { name: 'twitter:title', content: shareTitle }),
-      React__default.createElement('meta', { name: 'twitter:image', content: shareImage }),
-      React__default.createElement('meta', { name: 'twitter:site', content: twitterSiteName }),
-      React__default.createElement('meta', { name: 'twitter:description', content: shareSummary })
+      React__default.createElement('meta', { property: 'og:url', content: shareUrl, key: 'og:url' }),
+      React__default.createElement('meta', { property: 'og:title', content: shareTitle, key: 'og:title' }),
+      React__default.createElement('meta', { property: 'og:image', content: shareImage, key: 'og:image' }),
+      React__default.createElement('meta', { property: 'og:site_name', content: siteName, key: 'og:site_name' }),
+      React__default.createElement('meta', { property: 'og:description', content: shareSummary, key: 'og:description' }),
+      React__default.createElement('meta', { name: 'twitter:card', content: 'summary', key: 'og:card' }),
+      React__default.createElement('meta', { name: 'twitter:title', content: shareTitle, key: 'og:title' }),
+      React__default.createElement('meta', { name: 'twitter:image', content: shareImage, key: 'og:image' }),
+      React__default.createElement('meta', { name: 'twitter:site', content: twitterSiteName, key: 'og:site' }),
+      React__default.createElement('meta', { name: 'twitter:description', content: shareSummary, key: 'og:description' })
     ),
     React__default.createElement(
       FacebookShareButton,
@@ -12881,6 +12883,7 @@ var Audio = function Audio(_ref) {
 
 var VideoMp4 = function VideoMp4(_ref) {
   var url = _ref.url,
+      thumbnail = _ref.thumbnail,
       vidLoaded = _ref.vidLoaded;
 
   var _useState = useState(false),
@@ -12968,6 +12971,7 @@ var VideoMp4 = function VideoMp4(_ref) {
     vidLoaded && React__default.createElement(
       'video',
       {
+        poster: thumbnail || '',
         style: { width: '100%' },
         controls: true,
         onCanPlay: function onCanPlay(e) {
@@ -13024,25 +13028,30 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       vidUrl = _useState8[0],
       setVidUrl = _useState8[1];
 
-  var _useState9 = useState(false),
+  var _useState9 = useState(''),
       _useState10 = _slicedToArray(_useState9, 2),
-      vidLoaded = _useState10[0],
-      setVidLoaded = _useState10[1];
+      vidThumbnail = _useState10[0],
+      setVidThumbnail = _useState10[1];
 
-  var _useState11 = useState('youtube'),
+  var _useState11 = useState(false),
       _useState12 = _slicedToArray(_useState11, 2),
-      vidType = _useState12[0],
-      setVidType = _useState12[1];
+      vidLoaded = _useState12[0],
+      setVidLoaded = _useState12[1];
 
-  var _useState13 = useState(''),
+  var _useState13 = useState('youtube'),
       _useState14 = _slicedToArray(_useState13, 2),
-      series = _useState14[0],
-      setSeries = _useState14[1];
+      vidType = _useState14[0],
+      setVidType = _useState14[1];
 
-  var _useState15 = useState([]),
+  var _useState15 = useState(''),
       _useState16 = _slicedToArray(_useState15, 2),
-      seriesData = _useState16[0],
-      setData = _useState16[1];
+      series = _useState16[0],
+      setSeries = _useState16[1];
+
+  var _useState17 = useState([]),
+      _useState18 = _slicedToArray(_useState17, 2),
+      seriesData = _useState18[0],
+      setData = _useState18[1];
   //variables
 
 
@@ -13056,10 +13065,10 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
 
     nodes.videos.forEach(function (vid) {
       if (vid.type == 'mp4') {
-        data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset), url: vid.url });
+        data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset).url(), url: vid.url });
       } else {
         if (vid.thumbnail && vid.thumbnail.asset) {
-          data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset), url: vid.url });
+          data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset).url(), url: vid.url });
         } else {
           data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
         }
@@ -13070,6 +13079,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     if (data.length < seriesVid) {
       setSeries(1);
       setVidUrl(nodes.videos[0].url);
+      setVidThumbnail(nodes.videos[0].thumbnail && nodes.videos[0].thumbnail.asset ? urlFor(nodes.videos[0].thumbnail.asset).url() : '');
       if (nodes.videos[0].type) {
         setVidType(nodes.videos[0].type);
       }
@@ -13080,7 +13090,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     } else {
       setSeries(seriesVid);
       setVidUrl(nodes.videos[seriesVid - 1].url);
-
+      setVidThumbnail(nodes.videos[seriesVid - 1].thumbnail && nodes.videos[seriesVid - 1].thumbnail.asset ? urlFor(nodes.videos[seriesVid - 1].thumbnail.asset).url() : '');
       if (nodes.videos[0].type) {
         setVidType(nodes.videos[seriesVid - 1].type);
       }
@@ -13106,10 +13116,11 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   }
 
   // This function is passed to the GroupDeck to change the youtube iframe src
-  function setState(url, vidIndex) {
+  function setState(url, thumbnail, vidIndex) {
     setVidLoaded(false);
     setTimeout(function () {
       setVidUrl(url);
+      setVidThumbnail(thumbnail);
       toggleSeries();
       lib_3.refresh();
       var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
@@ -13230,7 +13241,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
       vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: getYoutubeId(vidUrl), opts: opts, onReady: handleOnReady, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: function onEnd(e) {
           return handleOnEnd(e);
-        } }) : React__default.createElement(VideoMp4, { url: vidUrl, vidLoaded: vidLoaded }),
+        } }) : React__default.createElement(VideoMp4, { url: vidUrl, thumbnail: vidThumbnail, vidLoaded: vidLoaded }),
       React__default.createElement(
         'div',
         {
@@ -16471,12 +16482,21 @@ var Article = function Article(props) {
       shareBaseUrl = shareOptions.shareBaseUrl,
       shareSiteTitle = shareOptions.shareSiteTitle;
 
-  var shareUrl = shareBaseUrl + props.url;
+  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.createElement(
     React__default.Fragment,
     null,
@@ -16486,7 +16506,7 @@ var Article = function Article(props) {
         offSetTop: 45,
         onChange: function onChange(visible) {
           if (visible !== false) {
-            changeUrl(url, visible);
+            changeUrl(url, visible, meta);
           }
         } },
       React__default.createElement(
@@ -16497,20 +16517,21 @@ var Article = function Article(props) {
           null,
           React__default.createElement(
             'title',
-            null,
+            { key: 'title' },
             shareTitle + ' | ' + props.cache.siteSettingCache.name
           ),
+          React__default.createElement('meta', { name: 'description', key: 'description', content: shareSummary }),
           passwordLock && React__default.createElement('meta', { name: 'robots', content: 'noindex, nofollow' }),
-          React__default.createElement('meta', { property: 'og:url', content: shareUrl }),
-          React__default.createElement('meta', { property: 'og:title', content: shareTitle }),
-          React__default.createElement('meta', { property: 'og:image', content: shareImage }),
-          React__default.createElement('meta', { property: 'og:site_name', content: props.Settings.title }),
-          React__default.createElement('meta', { property: 'og:description', content: shareSummary }),
-          React__default.createElement('meta', { name: 'twitter:card', content: 'summary' }),
-          React__default.createElement('meta', { name: 'twitter:title', content: shareTitle }),
-          React__default.createElement('meta', { name: 'twitter:image', content: shareImage }),
-          React__default.createElement('meta', { name: 'twitter:site', content: '@' + shareSiteTitle }),
-          React__default.createElement('meta', { name: 'twitter:description', content: shareSummary })
+          React__default.createElement('meta', { property: 'og:url', content: shareUrl, key: 'og:url' }),
+          React__default.createElement('meta', { property: 'og:title', content: shareTitle, key: 'og:title' }),
+          React__default.createElement('meta', { property: 'og:image', content: shareImage, key: 'og:image' }),
+          React__default.createElement('meta', { property: 'og:site_name', content: props.Settings.title, key: 'og:site_name' }),
+          React__default.createElement('meta', { property: 'og:description', content: shareSummary, key: 'og:description' }),
+          React__default.createElement('meta', { name: 'twitter:card', content: 'summary', key: 'twitter:card' }),
+          React__default.createElement('meta', { name: 'twitter:title', content: shareTitle, key: 'twitter:title' }),
+          React__default.createElement('meta', { name: 'twitter:image', content: shareImage, key: 'twitter:image' }),
+          React__default.createElement('meta', { name: 'twitter:site', content: '@' + props.Settings.title, key: 'twitter:site' }),
+          React__default.createElement('meta', { name: 'twitter:description', content: shareSummary, key: 'twitter:description' })
         ),
         React__default.createElement(
           'h1',
@@ -16585,7 +16606,8 @@ var Article = function Article(props) {
               shareImage: shareImage,
               size: 32,
               siteName: siteName,
-              twitterSiteName: twitterSiteName
+              twitterSiteName: twitterSiteName,
+              disableMeta: true
             })
           ),
           renderRelevantTopicsDropdown(),
@@ -16716,6 +16738,10 @@ var ArticleQueue = function ArticleQueue(props) {
       }
     }
 
+    if (props.cache.hyperTargeting) {
+      targeting = _extends$2({}, targeting, { campaign_id: props.cache.hyperTargeting });
+    }
+
     return targeting;
   };
 
@@ -16806,7 +16832,20 @@ var ArticleQueue = function ArticleQueue(props) {
     }
   };
 
-  var changeUrl = function changeUrl(path, visibility) {
+  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 newPath = '/view/' + path;
     if (!isScrollDown) {
       if (visibility === 'top') {
@@ -16816,6 +16855,7 @@ var ArticleQueue = function ArticleQueue(props) {
           props.pageview(newPath);
         }
         refreshAD(path);
+        changeMeta(meta);
       }
     } else {
       if (visibility === 'bottom') {
@@ -16825,13 +16865,14 @@ var ArticleQueue = function ArticleQueue(props) {
           props.pageview(newPath);
         }
         refreshAD(path);
+        changeMeta(meta);
       }
     }
   };
 
   return React__default.createElement(
     InfiniteScroll,
-    { dataLength: queueData.length, next: loadmore, scrollThreshold: 0.8, hasMore: true },
+    { dataLength: queueData.length, next: loadmore, scrollThreshold: '60%', hasMore: true },
     queueData.map(function (article, index) {
       if (!checkSponseredArticle(article) && Ads.getNativeContextualAD) {
         article.contextualAD = Ads.getNativeContextualAD(getTargeting(article));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.335",
+  "version": "1.0.337",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",