@mjhls/mjh-framework 1.0.880-beta.0 → 1.0.881-beta.0

package/dist/cjs/{index-17c6af5a.js → index-bf60a71c.js}

@@ -19,16 +19,17 @@ var moment = require('./moment-575fe24c.js');
 var Router = require('next/router');
 var Router__default = _interopDefault(Router);
 var slicedToArray = require('./slicedToArray-f6d4eaa8.js');
-var urlFor = require('./urlFor-3a61226f.js');
-var index$1 = require('./index-96b3db50.js');
+var urlFor = require('./urlFor.js');
+var index$2 = require('./index-96b3db50.js');
 var main = require('./main-02daeefe.js');
 var entities = require('./entities-310b46ee.js');
+var asyncToGenerator = require('./asyncToGenerator-df19209d.js');
 var Segment = require('./Segment.js');
 require('./Beam.js');
 var AdSlot = require('./AdSlot.js');
 var Button = _interopDefault(require('react-bootstrap/Button'));
-var BlockContent = require('./BlockContent-9c6b07ad.js');
-var index$2 = require('./index-187c967e.js');
+var BlockContent = require('./BlockContent-091a991f.js');
+var index$3 = require('./index-187c967e.js');
 var GroupDeck = require('./GroupDeck.js');
 var reactBootstrap = require('react-bootstrap');
 var index_esm = require('./index.esm-90433435.js');
@@ -91,10 +92,10 @@ var Slideshow = function Slideshow(_ref) {
           React__default.createElement(
             'picture',
             null,
-            React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor.urlFor({ source: slide.asset, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-            React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor.urlFor({ source: slide.asset, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-            React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor.urlFor({ source: slide.asset, client: client, imageWidth: 500, imageFit: 'max' }) }),
-            React__default.createElement('img', { src: urlFor.urlFor({ source: slide.asset, client: client }), alt: slide.alt || '', style: { width: '100%' } })
+            React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+            React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+            React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 500, imageFit: 'max' }) }),
+            React__default.createElement('img', { src: urlFor({ source: slide.asset, client: client }), alt: slide.alt || '', style: { width: '100%' } })
           ),
           slide.caption && React__default.createElement(
             'p',
@@ -1930,7 +1931,7 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
   var url = _ref.url,
       autoplay = _ref.autoplay;
 
-  var id = index$2.getYoutubeId(url);
+  var id = index$3.getYoutubeId(url);
 
   var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
@@ -2204,15 +2205,15 @@ var Media = function Media(_ref) {
         'a',
         { href: urlForFile({ asset: uploadDoc.asset }), target: blank ? '_blank' : '_self' },
         React__default.createElement(
-          index$1.LazyLoad,
+          index$2.LazyLoad,
           { once: true },
           React__default.createElement(
             'picture',
             null,
-            React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor.urlFor({ source: poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-            React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor.urlFor({ source: poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-            React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor.urlFor({ source: poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
-            React__default.createElement('img', _extends$1._extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor.urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
+            React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+            React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+            React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
+            React__default.createElement('img', _extends$1._extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
           )
         ),
         caption && React__default.createElement(
@@ -2407,6 +2408,8 @@ var Video = function Video(_ref) {
     }
     // this is video ready
     player.on('loadedmetadata', function (evt) {
+      var _this = this;
+
       //console.log('loadedmetadata:', evt)
       console.log('mediainfo:', player.mediainfo); // get the duration from here
       var duration = player.mediainfo.duration;
@@ -2414,17 +2417,41 @@ var Video = function Video(_ref) {
       var queue = Math.floor(duration / 10);
       var segment = Math.floor(current / queue);
 
-      // try to auto play first with no-mute
+      var autoPlayVideo = function () {
+        var _ref2 = asyncToGenerator._asyncToGenerator( /*#__PURE__*/asyncToGenerator.regenerator.mark(function _callee() {
+          return asyncToGenerator.regenerator.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.prev = 0;
+                  _context.next = 3;
+                  return player.play();
+
+                case 3:
+                  _context.next = 8;
+                  break;
+
+                case 5:
+                  _context.prev = 5;
+                  _context.t0 = _context['catch'](0);
+
+                  console.log('could not autoplay video', _context.t0);
+
+                case 8:
+                case 'end':
+                  return _context.stop();
+              }
+            }
+          }, _callee, _this, [[0, 5]]);
+        }));
+
+        return function autoPlayVideo() {
+          return _ref2.apply(this, arguments);
+        };
+      }();
+
       if (autoplay) {
-        player.play().then(function () {
-          player.muted(false);
-        }).catch(function (error) {
-          // then try to auto play with mute
-          player.muted(true);
-          player.play();
-        });
-      } else {
-        player.pause();
+        autoPlayVideo();
       }
 
       //Beam.report_beam_video('Ready', deviceType, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID)
@@ -2510,7 +2537,7 @@ var Video = function Video(_ref) {
         React__default.createElement(
           'style',
           { jsx: 'true' },
-          '\n                 .brightcove-fluid {\n                  position: relative;\n                  padding-bottom: 56.25%; /* 16:9 */\n                  height: 0;\n                  width: 100%;\n                  margin-bottom: 1rem;\n                }\n                .brightcove-fluid .video-js {\n                  height: 100%;\n                  width: 100%;\n                  position: absolute;\n                  top: 0;\n                  left: 0;\n                  right: 0;\n                  bottom: 0;\n                }\n            '
+          '\n              .brightcove-fluid {\n                position: relative;\n                padding-bottom: 56.25%; /* 16:9 */\n                height: 0;\n                width: 100%;\n                margin-bottom: 1rem;\n              }\n              .brightcove-fluid .video-js {\n                height: 100%;\n                width: 100%;\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                bottom: 0;\n              }\n            '
         )
       );
     } else if (playlistID) {
@@ -7235,12 +7262,12 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
 
     Videos.forEach(function (vid) {
       if (vid.type == 'mp4') {
-        data.push({ title: vid.title, thumbnail: urlFor.urlFor({ client: client, source: vid.thumbnail.asset }), url: vid.url });
+        data.push({ title: vid.title, thumbnail: urlFor({ client: client, source: vid.thumbnail.asset }), url: vid.url });
       } else {
         if (vid.thumbnail && vid.thumbnail.asset) {
-          data.push({ title: vid.title, thumbnail: urlFor.urlFor({ client: client, source: vid.thumbnail.asset }), url: vid.url });
+          data.push({ title: vid.title, thumbnail: urlFor({ client: client, source: vid.thumbnail.asset }), url: vid.url });
         } else {
-          data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + index$2.getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
+          data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + index$3.getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
         }
       }
     });
@@ -7249,7 +7276,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     if (data.length < seriesVid || !seriesVid) {
       setSeries(1);
       setVidUrl(Videos[0].url);
-      setVidThumbnail(Videos[0].thumbnail && Videos[0].thumbnail.asset ? urlFor.urlFor({ client: client, source: Videos[0].thumbnail.asset }) : '');
+      setVidThumbnail(Videos[0].thumbnail && Videos[0].thumbnail.asset ? urlFor({ client: client, source: Videos[0].thumbnail.asset }) : '');
       if (Videos[0].type) {
         setVidType(Videos[0].type);
       }
@@ -7260,7 +7287,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     } else {
       setSeries(seriesVid);
       setVidUrl(Videos[seriesVid - 1].url);
-      setVidThumbnail(Videos[seriesVid - 1].thumbnail && Videos[seriesVid - 1].thumbnail.asset ? urlFor.urlFor({ client: client, source: Videos[seriesVid - 1].thumbnail.asset }) : '');
+      setVidThumbnail(Videos[seriesVid - 1].thumbnail && Videos[seriesVid - 1].thumbnail.asset ? urlFor({ client: client, source: Videos[seriesVid - 1].thumbnail.asset }) : '');
       if (Videos[0].type) {
         setVidType(Videos[seriesVid - 1].type);
       }
@@ -7300,7 +7327,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     //Small pause before starting next video
     setTimeout(function () {
       //Youtube API to start video playing automatically
-      var id = index$2.getYoutubeId(vidUrl);
+      var id = index$3.getYoutubeId(vidUrl);
       event.target.loadVideoById(id);
     }, 1500);
   };
@@ -7440,7 +7467,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
           return React__default.createElement(
             'span',
             { key: index },
-            renderAuthor(authorDetail.displayName, authorDetail.url, index, article.authorDetails.length, authorPrefix, '', authorDetail.profileImage && urlFor.urlFor({ client: client, source: authorDetail.profileImage, imageHeight: authorImgHeight }))
+            renderAuthor(authorDetail.displayName, authorDetail.url, index, article.authorDetails.length, authorPrefix, '', authorDetail.profileImage && urlFor({ client: client, source: authorDetail.profileImage, imageHeight: authorImgHeight }))
           );
         })
       ),
@@ -7477,7 +7504,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       { id: 'fluid-video-container', className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
       vidUrl && vidType == 'youtube' && React__default.createElement(YouTube, {
         className: 'fluid-iframe',
-        videoId: index$2.getYoutubeId(vidUrl),
+        videoId: index$3.getYoutubeId(vidUrl),
         opts: opts,
         onReady: handleOnReady,
         onPlay: handleOnPlay,
@@ -8184,15 +8211,15 @@ var Slideshow$1 = function Slideshow(_ref) {
                 'div',
                 { style: { textAlign: 'center' }, className: '' },
                 React__default.createElement(
-                  index$1.LazyLoad,
+                  index$2.LazyLoad,
                   null,
                   React__default.createElement(
                     'picture',
                     null,
-                    React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor.urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-                    React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor.urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-                    React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor.urlFor({ source: slide.slideshowImage, client: client, imageWidth: 500, imageFit: 'max' }) }),
-                    React__default.createElement('img', { src: urlFor.urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', className: 'embed-item-img' })
+                    React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+                    React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+                    React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 500, imageFit: 'max' }) }),
+                    React__default.createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', className: 'embed-item-img' })
                   )
                 )
               )
@@ -8287,15 +8314,15 @@ var MultiMedia = function MultiMedia(props) {
                 'div',
                 { className: 'multi-media-image-container' },
                 imageBox && React__default.createElement(
-                  index$1.LazyLoad,
+                  index$2.LazyLoad,
                   { once: true },
                   React__default.createElement(
                     'picture',
                     null,
-                    React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor.urlFor({ source: media.poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-                    React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor.urlFor({ source: media.poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-                    React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor.urlFor({ source: media.poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
-                    React__default.createElement('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor.urlFor({ source: media.poster, client: client }), alt: media.alt || '' })
+                    React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+                    React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+                    React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
+                    React__default.createElement('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor({ source: media.poster, client: client }), alt: media.alt || '' })
                   )
                 ),
                 media.caption && React__default.createElement(
@@ -8512,7 +8539,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
           React__default.createElement(
             'div',
             { className: 'prevNext-thumbnail' },
-            React__default.createElement('img', { src: urlFor.urlFor({ client: client, source: article.thumbnail.asset }) }),
+            React__default.createElement('img', { src: urlFor({ client: client, source: article.thumbnail.asset }) }),
             React__default.createElement(
               'div',
               { className: 'prevNext-reading ' + showReading },
@@ -8582,7 +8609,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
 
   React.useEffect(function () {
     if (articleClicked === true) {
-      onChangeArticle(Articles[articleIndex].param.current, 'top', Articles[articleIndex].title, Articles[articleIndex].summary, urlFor.urlFor({ client: client, source: Articles[articleIndex].thumbnail.asset }));
+      onChangeArticle(Articles[articleIndex].param.current, 'top', Articles[articleIndex].title, Articles[articleIndex].summary, urlFor({ client: client, source: Articles[articleIndex].thumbnail.asset }));
     }
   }, [articleClicked]);
 
@@ -8720,7 +8747,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
       setCurrentTitle(title);
       if (rootArticle) {
         setCurrentSummary(rootArticle.summary ? rootArticle.summary : '');
-        setCurrentThumbnail(urlFor.urlFor({ client: client, source: rootArticle.thumbnail.asset }));
+        setCurrentThumbnail(urlFor({ client: client, source: rootArticle.thumbnail.asset }));
       } else {
         setCurrentSummary('');
         setCurrentThumbnail('');
@@ -8806,7 +8833,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
               onChange: function onChange(visible) {
                 if (upArrowClicked === false && articleClicked === false) {
                   if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
-                    onChangeArticle(article.param.current, visible, article.title, article.summary, urlFor.urlFor({ client: client, source: article.thumbnail.asset }));
+                    onChangeArticle(article.param.current, visible, article.title, article.summary, urlFor({ client: client, source: article.thumbnail.asset }));
                   }
                 }
               } },
@@ -8842,7 +8869,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
                   return React__default.createElement(
                     'span',
                     { key: index },
-                    renderAuthor(authorDetail.displayName, authorDetail.url, index, article.authorDetails.length, authorPrefix, authorDetail.biography && renderAuthorBiography(authorDetail.biography[0]), authorDetail.profileImage && urlFor.urlFor({ client: client, source: authorDetail.profileImage }))
+                    renderAuthor(authorDetail.displayName, authorDetail.url, index, article.authorDetails.length, authorPrefix, authorDetail.biography && renderAuthorBiography(authorDetail.biography[0]), authorDetail.profileImage && urlFor({ client: client, source: authorDetail.profileImage }))
                   );
                 })
               ),
@@ -8969,13 +8996,13 @@ var FigureImage = React__default.memo(function (_ref2) {
   return React__default.createElement(
     'picture',
     null,
-    React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor.urlFor({ source: node, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-    React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor.urlFor({ source: node, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-    React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor.urlFor({ source: node, client: client, imageWidth: 500, imageFit: 'max' }) }),
+    React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: node, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+    React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: node, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+    React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: node, client: client, imageWidth: 500, imageFit: 'max' }) }),
     React__default.createElement('img', _extends$1._extends({
       style: figureImageStyle,
       className: 'figure-image',
-      src: urlFor.urlFor({ source: node, client: client }),
+      src: urlFor({ source: node, client: client }),
       alt: imgAlt ? imgAlt : 'figure image'
     }, !link && {
       onClick: function onClick() {
@@ -9059,13 +9086,13 @@ var FigureComponent = function FigureComponent(props) {
     return React__default.createElement(
       'picture',
       null,
-      React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor.urlFor({ source: node, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-      React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor.urlFor({ source: node, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-      React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor.urlFor({ source: node, client: client, imageWidth: 500, imageFit: 'max' }) }),
+      React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: node, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+      React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: node, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+      React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: node, client: client, imageWidth: 500, imageFit: 'max' }) }),
       main.main_35 && link ? React__default.createElement('img', _extends$1._extends({
         style: figureImageStyle,
         className: 'figure-image',
-        src: urlFor.urlFor({ source: node, client: client }),
+        src: urlFor({ source: node, client: client }),
         alt: imgAlt ? imgAlt : 'figure image'
       }, !link && !main.main_35 && {
         onClick: function onClick() {
@@ -9077,7 +9104,7 @@ var FigureComponent = function FigureComponent(props) {
         React__default.createElement('img', _extends$1._extends({
           style: figureImageStyle,
           className: 'figure-image',
-          src: urlFor.urlFor({ source: node, client: client }),
+          src: urlFor({ source: node, client: client }),
           alt: imgAlt ? imgAlt : 'figure image'
         }, !link && !main.main_35 && {
           onClick: function onClick() {
@@ -9147,7 +9174,7 @@ var FigureComponent = function FigureComponent(props) {
   };
 
   var handleClickFigure = React.useCallback(function (node, client) {
-    setLightboxImgSrc(urlFor.urlFor({ source: node, client: client }));
+    setLightboxImgSrc(urlFor({ source: node, client: client }));
     setShowLightbox(true);
   }, [node, client]);
 
@@ -9235,13 +9262,13 @@ var FigureImage$1 = React__default.memo(function (_ref) {
   return React__default.createElement(
     'picture',
     null,
-    React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor.urlFor({ source: image, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-    React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor.urlFor({ source: image, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-    React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor.urlFor({ source: image, client: client, imageWidth: 500, imageFit: 'max' }) }),
+    React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+    React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+    React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 500, imageFit: 'max' }) }),
     React__default.createElement('img', _extends$1._extends({
       'images-count': imagesCount,
       className: 'multi-figure-image',
-      src: urlFor.urlFor({ source: image, client: client }),
+      src: urlFor({ source: image, client: client }),
       alt: imgAlt ? imgAlt : 'multi figure'
     }, !link && {
       onClick: function onClick() {
@@ -9286,7 +9313,7 @@ var MultiFigure = function MultiFigure(props) {
   };
 
   var handleClickFigure = React.useCallback(function (image, client) {
-    setOpenImgSrc(urlFor.urlFor({ source: image, client: client }));
+    setOpenImgSrc(urlFor({ source: image, client: client }));
     setOpenImg(true);
   }, [client]);
 
@@ -9303,13 +9330,13 @@ var MultiFigure = function MultiFigure(props) {
     return React__default.createElement(
       'picture',
       null,
-      React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor.urlFor({ source: image, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-      React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor.urlFor({ source: image, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-      React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor.urlFor({ source: image, client: client, imageWidth: 500, imageFit: 'max' }) }),
+      React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+      React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+      React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 500, imageFit: 'max' }) }),
       main.main_35 && link ? React__default.createElement('img', _extends$1._extends({
         'images-count': imagesCount,
         className: 'multi-figure-image',
-        src: urlFor.urlFor({ source: image, client: client }),
+        src: urlFor({ source: image, client: client }),
         alt: imgAlt ? imgAlt : 'multi figure'
       }, !link && !main.main_35 && {
         onClick: function onClick() {
@@ -9321,7 +9348,7 @@ var MultiFigure = function MultiFigure(props) {
         React__default.createElement('img', _extends$1._extends({
           'images-count': imagesCount,
           className: 'multi-figure-image',
-          src: urlFor.urlFor({ source: image, client: client }),
+          src: urlFor({ source: image, client: client }),
           alt: imgAlt ? imgAlt : 'multi figure'
         }, !link && !main.main_35 && {
           onClick: function onClick() {
@@ -9376,7 +9403,7 @@ var MultiFigure = function MultiFigure(props) {
                   'div',
                   { className: 'multi-figure-image-container' },
                   React__default.createElement(
-                    index$1.LazyLoad,
+                    index$2.LazyLoad,
                     { once: true },
                     React__default.createElement(FigureImageWOverLay, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, link: image.link })
                   ),
@@ -9386,7 +9413,7 @@ var MultiFigure = function MultiFigure(props) {
                 'div',
                 { className: 'multi-figure-image-container' },
                 React__default.createElement(
-                  index$1.LazyLoad,
+                  index$2.LazyLoad,
                   { once: true },
                   React__default.createElement(FigureImageWOverLay, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, handleClickFigure: handleClickFigure })
                 ),
@@ -9404,7 +9431,7 @@ var MultiFigure = function MultiFigure(props) {
                   'div',
                   { className: 'multi-figure-image-container' },
                   React__default.createElement(
-                    index$1.LazyLoad,
+                    index$2.LazyLoad,
                     { once: true },
                     React__default.createElement(FigureImage$1, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, link: image.link })
                   ),
@@ -9414,7 +9441,7 @@ var MultiFigure = function MultiFigure(props) {
                 'div',
                 { className: 'multi-figure-image-container' },
                 React__default.createElement(
-                  index$1.LazyLoad,
+                  index$2.LazyLoad,
                   { once: true },
                   React__default.createElement(FigureImage$1, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, handleClickFigure: handleClickFigure })
                 ),

package/dist/cjs/index.js

@@ -35,8 +35,9 @@ require('./index.es-9110add6.js');
 require('react-dom');
 require('./visibility-sensor-ad5e3116.js');
 require('./slicedToArray-f6d4eaa8.js');
-var urlFor = require('./urlFor-3a61226f.js');
-var index$1 = require('./index-96b3db50.js');
+require('./index-be0c82be.js');
+var urlFor = require('./urlFor.js');
+var index$2 = require('./index-96b3db50.js');
 require('./main-02daeefe.js');
 require('./entities-310b46ee.js');
 require('./stringify-bbc68047.js');
@@ -55,10 +56,12 @@ var AD = require('./AD.js');
 require('./AuthorComponent-02e827ae.js');
 require('react-bootstrap/Button');
 var GridContent = require('./GridContent.js');
+require('react-bootstrap/Spinner');
+require('./Pagination-d6a59f99.js');
 var DeckQueue = require('./DeckQueue.js');
 require('react-bootstrap/Media');
 var ThumbnailCard = require('./ThumbnailCard.js');
-require('./BlockContent-9c6b07ad.js');
+require('./BlockContent-091a991f.js');
 require('./react-social-icons-f7f48f71.js');
 var TaxonomyCard = require('./TaxonomyCard.js');
 var RolesDeck = require('./RolesDeck.js');
@@ -68,14 +71,13 @@ var GroupDeck = require('./GroupDeck.js');
 var YoutubeGroup = require('./YoutubeGroup.js');
 require('react-bootstrap');
 require('./timeDifferenceCalc.js');
-require('./Pagination-9cb60fba.js');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
 var VideoSeriesListing = require('./VideoSeriesListing.js');
 var ArticleSeriesListing = require('./ArticleSeriesListing.js');
 var ArticleCarousel = require('./ArticleCarousel.js');
-var getSerializers = require('./index-17c6af5a.js');
+var getSerializers = require('./index-bf60a71c.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('next/head');
@@ -88,7 +90,6 @@ require('react-bootstrap/OverlayTrigger');
 require('react-bootstrap/Tooltip');
 require('react-bootstrap/Popover');
 var HorizontalArticleListing = require('./HorizontalArticleListing.js');
-require('react-bootstrap/Spinner');
 var MasterDeck = require('./MasterDeck.js');
 var PublicationDeck = require('./PublicationDeck.js');
 var IssueDeck = require('./IssueDeck.js');
@@ -183,7 +184,7 @@ var Auth = require('./Auth.js');
 require('passport-local');
 require('mysql');
 require('./md5-5039b1a6.js');
-require('./SeriesSlider-ec146338.js');
+require('./SeriesSlider-49b81b0b.js');
 var getTargeting = require('./getTargeting-8874437b.js');
 var View = require('./View.js');
 var getKeywords = require('./getKeywords.js');
@@ -237,9 +238,9 @@ var FeatureArticles = function FeatureArticles(props) {
                 'figure',
                 { style: { marginTop: '1rem' } },
                 React__default.createElement(
-                  index$1.LazyLoad,
+                  index$2.LazyLoad,
                   { height: imageHeight },
-                  React__default.createElement('img', { style: { width: '100%', borderRadius: '10px' }, src: article.feature_img ? urlFor.urlFor({ client: client, source: article.feature_img, imageWidth: imageWidth, imageHeight: imageHeight }) : defaultImage })
+                  React__default.createElement('img', { style: { width: '100%', borderRadius: '10px' }, src: article.feature_img ? urlFor({ client: client, source: article.feature_img, imageWidth: imageWidth, imageHeight: imageHeight }) : defaultImage })
                 )
               )
             )
@@ -274,7 +275,7 @@ var FeatureArticles = function FeatureArticles(props) {
   );
 };
 
-exports.urlFor = urlFor.urlFor;
+exports.urlFor = urlFor;
 exports.Segment = Segment;
 exports.Beam = Beam;
 exports.AdSlot = AdSlot;

package/dist/cjs/urlFor.js

@@ -3,9 +3,63 @@
 require('./_commonjsHelpers-06173234.js');
 require('./core.get-iterator-method-f3c44602.js');
 require('./web.dom.iterable-e34bf324.js');
-require('./slicedToArray-f6d4eaa8.js');
-var urlFor = require('./urlFor-3a61226f.js');
+var slicedToArray = require('./slicedToArray-f6d4eaa8.js');
+var index$1 = require('./index-be0c82be.js');
 
+// Sanity image auto formating
 
+function urlFor(_ref) {
+  var client = _ref.client,
+      source = _ref.source,
+      _ref$imageWidth = _ref.imageWidth,
+      imageWidth = _ref$imageWidth === undefined ? null : _ref$imageWidth,
+      _ref$imageHeight = _ref.imageHeight,
+      imageHeight = _ref$imageHeight === undefined ? null : _ref$imageHeight,
+      _ref$imageMaxHeight = _ref.imageMaxHeight,
+      imageMaxHeight = _ref$imageMaxHeight === undefined ? null : _ref$imageMaxHeight,
+      _ref$imageFit = _ref.imageFit,
+      imageFit = _ref$imageFit === undefined ? 'crop' : _ref$imageFit;
 
-module.exports = urlFor.urlFor;
+
+  // when imageFit value = null and it's specifically provided, it's value not gets defaulted to 'crop'
+  if (!imageFit) {
+    imageFit = 'crop';
+  }
+
+  //checks for old usage so it wont break view pages
+  //All view pages are using  urlFor(client, thumbnail.asset).url()
+  //will need to update to urlFor({client, source: thumbnail.asset})
+  //All framework components are using new format
+  if (arguments[1] && arguments[1]._ref) {
+    return index$1.imageUrlBuilder(client).image(source).auto('format');
+  }
+
+  if (imageWidth && imageHeight) {
+    imageMaxHeight = imageHeight;
+    imageHeight = null;
+  }
+
+  var builder = index$1.imageUrlBuilder(client);
+  var url = builder.image(source);
+  if (imageWidth) url = url.width(imageWidth);
+  if (imageHeight) url = url.height(imageHeight);
+  if (imageMaxHeight) url = url.maxHeight(imageMaxHeight);
+  if (imageFit) url = url.fit(imageFit);
+  url = url.auto('format').url();
+
+  // Appending file name in URL
+  var originalFilename = source && source.originalFilename ? source.originalFilename : source && source.asset && source.asset.originalFilename && source.asset.originalFilename;
+  if (originalFilename) {
+    var _url$split = url.split('?'),
+        _url$split2 = slicedToArray._slicedToArray(_url$split, 2),
+        path = _url$split2[0],
+        queryString = _url$split2[1];
+
+    originalFilename = encodeURIComponent(originalFilename);
+    url = queryString ? path + '/' + originalFilename + '?' + queryString : path + '/' + originalFilename;
+  }
+
+  return url;
+}
+
+module.exports = urlFor;

package/dist/esm/AlgoliaSearch.js

@@ -15,7 +15,8 @@ import PropTypes from 'prop-types';
 import { m as moment } from './moment-e2f9b20c.js';
 import 'react-dom';
 import './slicedToArray-67a08c9c.js';
-import { u as urlFor } from './urlFor-23b2244b.js';
+import './index-73819142.js';
+import urlFor from './urlFor.js';
 import { L as LazyLoad } from './index-5f7e79e7.js';
 import { DropdownButton } from 'react-bootstrap';
 import { _ as _objectWithoutPropertiesLoose$1, a as _extends, c as classnames } from './index-aaa2dae0.js';

package/dist/esm/ArticleCarousel.js

@@ -7,7 +7,8 @@ import React__default from 'react';
 import 'prop-types';
 import 'react-dom';
 import './slicedToArray-67a08c9c.js';
-import './urlFor-23b2244b.js';
+import './index-73819142.js';
+import './urlFor.js';
 import './index-5f7e79e7.js';
 import './main-c0612122.js';
 import './index-c7e2ac95.js';

package/dist/esm/ArticleProgramLandingPage.js

@@ -27,7 +27,8 @@ import './index.es-29c1cef5.js';
 import 'react-dom';
 import './visibility-sensor-72fd8f8b.js';
 import { _ as _slicedToArray } from './slicedToArray-67a08c9c.js';
-import './urlFor-23b2244b.js';
+import './index-73819142.js';
+import './urlFor.js';
 import './index-5f7e79e7.js';
 import './main-c0612122.js';
 import './entities-7cc3bf45.js';
@@ -37,7 +38,7 @@ import './Segment.js';
 import './Beam.js';
 import './AdSlot.js';
 import 'react-bootstrap/Button';
-import { B as BlockContent } from './BlockContent-f4515898.js';
+import { B as BlockContent } from './BlockContent-e9b4ddcf.js';
 import './index-c7e2ac95.js';
 import './smoothscroll-0cd4c7a6.js';
 import './GroupDeck.js';
@@ -46,7 +47,7 @@ import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
 import ArticleSeriesListing from './ArticleSeriesListing.js';
-import { g as getSerializers } from './index-a35a5c39.js';
+import { g as getSerializers } from './index-e495ac6f.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'next/head';