@mjhls/mjh-framework 1.0.121 → 1.0.122

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.121
+# mjh-framework v. 1.0.122
 
 
 > Foundation Framework

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React__default, { Component, useState, useEffect, useRef, createContext, createElement } from 'react';
+import React__default, { Component, useState, useEffect, useRef, createElement, createContext } from 'react';
 import PropTypes from 'prop-types';
 import reactDom from 'react-dom';
 import Container from 'react-bootstrap/Container';
@@ -21,6 +21,7 @@ import FormControl from 'react-bootstrap/FormControl';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import NavDropdown from 'react-bootstrap/NavDropdown';
+import ReactPlayer from 'react-player';
 import Pagination from 'react-bootstrap/Pagination';
 import Carousel$1 from 'react-bootstrap/Carousel';
 import Breadcrumb from 'react-bootstrap/Breadcrumb';
@@ -9506,7 +9507,7 @@ var DeckContent = function (_React$Component) {
                 React__default.createElement(
                   Card,
                   { className: 'content-card', style: { flexDirection: mode } },
-                  React__default.createElement(
+                  (row.thumbnail && row.thumbnail.asset || _this.props.defaultImage) && React__default.createElement(
                     Link,
                     { href: _this.mapping[contentCategoryName] + '/[url]', as: _this.mapping[contentCategoryName] + '/' + row.url.current },
                     React__default.createElement(
@@ -10982,7 +10983,7 @@ var GridContent = function (_React$Component) {
                 React__default.createElement(
                   Card,
                   { className: 'content-card', style: { flexDirection: index$$1 === 0 || index$$1 % 4 === 0 ? 'top' : 'row' } },
-                  React__default.createElement(
+                  (row.thumbnail && row.thumbnail.asset || _this2.props.defaultImage) && React__default.createElement(
                     Link,
                     { href: _this2.mapping[contentCategoryName] + '/[url]', as: _this2.mapping[contentCategoryName] + '/' + row.url.current },
                     React__default.createElement(
@@ -11304,7 +11305,7 @@ var DeckQueue = function (_React$Component) {
                   React__default.createElement(
                     Row,
                     { style: { flexDirection: mode } },
-                    React__default.createElement(
+                    (row.thumbnail && row.thumbnail.asset || _this2.props.defaultImage) && React__default.createElement(
                       Col,
                       { md: 12, lg: 4 },
                       React__default.createElement(
@@ -12078,6 +12079,105 @@ var renderAuthor = function renderAuthor(authorDetail, index$$1, length) {
   } else return null;
 };
 
+var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems) {
+  var numberOfItemsBeforeAd = 6;
+  return React__default.createElement(
+    'div',
+    null,
+    data && data.map(function (article, index$$1) {
+      var pageNumber = article.pageNumber || values.page;
+      var contentCategoryName = article.contentCategory ? article.contentCategory.name : 'Articles';
+      return React__default.createElement(
+        React__default.Fragment,
+        { key: article._id ? article._id : index$$1 },
+        React__default.createElement(
+          VisibilitySensor,
+          {
+            key: article._id ? article._id : index$$1,
+            onChange: function onChange(isVisible) {
+              isVisible && changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage);
+            } },
+          React__default.createElement(
+            React__default.Fragment,
+            null,
+            React__default.createElement(
+              Media$1,
+              { key: article._id ? article._id : index$$1, style: { marginBottom: '1.25rem', paddingBottom: '1.25rem', borderBottom: '1px solid #ddd' } },
+              (article.thumbnail && article.thumbnail.asset || defaultImage) && React__default.createElement(
+                Link,
+                { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
+                React__default.createElement(
+                  'a',
+                  { className: 'img-wrapper' },
+                  article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3 img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
+                )
+              ),
+              React__default.createElement(
+                Media$1.Body,
+                null,
+                React__default.createElement(
+                  Link,
+                  { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
+                  React__default.createElement(
+                    'a',
+                    null,
+                    article.title && React__default.createElement(
+                      'h4',
+                      { className: 'card-title', style: { fontWeight: '500', color: 'var(--gray-dark)', marginBottom: '.5rem' } },
+                      article.title
+                    )
+                  )
+                ),
+                showPublished && article.published && React__default.createElement(
+                  'p',
+                  { className: 'card-text', style: { color: 'var(--dark)', marginBottom: '.25rem' } },
+                  moment(article.published).format('MMMM DD, YYYY')
+                ),
+                showAuthor && article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index$$1) {
+                  return renderAuthor(authorDetail, index$$1, article.authorMapping.length);
+                }),
+                showCategory && article.contentCategory && React__default.createElement(
+                  'p',
+                  {
+                    style: {
+                      background: 'var(--highlight)',
+                      color: 'var(--highlight-accent)',
+                      marginBottom: '.25rem',
+                      display: 'inline-block',
+                      padding: '0 .25rem',
+                      fontSize: '.8rem'
+                    } },
+                  article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
+                ),
+                article.summary && React__default.createElement(
+                  'p',
+                  { className: 'pt-2 card-text' },
+                  article.summary
+                )
+              )
+            )
+          )
+        ),
+        main_36 && rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && renderMobileAd(index$$1, numberOfItemsBeforeAd, rightItems)
+      );
+    }),
+    React__default.createElement(
+      'style',
+      { jsx: true },
+      '\n          .img-wrapper img {\n            max-height: 200px;\n            width: 100%;\n            object-fit: cover;\n          }\n          @media only screen and (min-width: 768px) {\n            .img-wrapper {\n              width: 42%;\n            }\n            .img-wrapper > img {\n              padding-right: 1em;\n            }\n          }\n          @media only screen and (max-width: 767px) {\n            .img-wrapper {\n              width: 100%;\n            }\n            .img-wrapper img {\n              padding-bottom: 1em;\n            }\n            .media {\n              flex-direction: column;\n            }\n          }\n        '
+    )
+  );
+};
+
+var renderMobileAd = function renderMobileAd(index$$1, numberOfItemsBeforeAd, rightItems) {
+  var i = ((index$$1 + 1) / numberOfItemsBeforeAd - 1) % rightItems.length;
+  return React__default.createElement(
+    'div',
+    null,
+    rightItems[i].component
+  );
+};
+
 var renderManualPagination = function renderManualPagination(currentPage) {
   return React__default.createElement(
     'div',
@@ -12119,7 +12219,8 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
       showAuthor = props.showAuthor,
       showCategory = props.showCategory,
       imageHeight = props.imageHeight,
-      imageWidth = props.imageWidth;
+      imageWidth = props.imageWidth,
+      rightItems = props.rightItems;
   var initialCurrentPage = props.currentPage,
       showPublished = props.showPublished;
 
@@ -12163,102 +12264,6 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
     }
   }, [values, prevValues, query, client, params, setData, setScrolling, pointer, pointerArray]);
 
-  var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth) {
-    var numberOfItemsBeforeAd = 6;
-    return React__default.createElement(
-      'div',
-      null,
-      data && data.map(function (article, index$$1) {
-        var pageNumber = article.pageNumber || values.page;
-        var contentCategoryName = article.contentCategory ? article.contentCategory.name : 'Articles';
-        return React__default.createElement(
-          React__default.Fragment,
-          { key: article._id ? article._id : index$$1 },
-          React__default.createElement(
-            VisibilitySensor,
-            {
-              key: article._id ? article._id : index$$1,
-              onChange: function onChange(isVisible) {
-                isVisible && changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage);
-              } },
-            React__default.createElement(
-              React__default.Fragment,
-              null,
-              React__default.createElement(
-                Media$1,
-                { key: article._id ? article._id : index$$1, style: { marginBottom: '1.25rem', paddingBottom: '1.25rem', borderBottom: '1px solid #ddd' } },
-                React__default.createElement(
-                  Link,
-                  { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
-                  React__default.createElement(
-                    'a',
-                    null,
-                    article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
-                  )
-                ),
-                React__default.createElement(
-                  Media$1.Body,
-                  null,
-                  React__default.createElement(
-                    Link,
-                    { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
-                    React__default.createElement(
-                      'a',
-                      null,
-                      article.title && React__default.createElement(
-                        'h4',
-                        { className: 'card-title', style: { fontWeight: '500', color: 'var(--gray-dark)', marginBottom: '.5rem' } },
-                        article.title
-                      )
-                    )
-                  ),
-                  showPublished && article.published && React__default.createElement(
-                    'p',
-                    { className: 'card-text', style: { color: 'var(--dark)', marginBottom: '.25rem' } },
-                    moment(article.published).format('MMMM DD, YYYY')
-                  ),
-                  showAuthor && article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index$$1) {
-                    return renderAuthor(authorDetail, index$$1, article.authorMapping.length);
-                  }),
-                  showCategory && article.contentCategory && React__default.createElement(
-                    'p',
-                    {
-                      style: {
-                        background: 'var(--highlight)',
-                        color: 'var(--highlight-accent)',
-                        marginBottom: '.25rem',
-                        display: 'inline-block',
-                        padding: '0 .25rem',
-                        fontSize: '.8rem'
-                      } },
-                    article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
-                  ),
-                  article.summary && React__default.createElement(
-                    'p',
-                    { className: 'pt-2 card-text' },
-                    article.summary
-                  )
-                )
-              )
-            )
-          ),
-          main_36 && props.rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && renderMobileAd(index$$1, numberOfItemsBeforeAd)
-        );
-      })
-    );
-  };
-
-  var renderMobileAd = function renderMobileAd(index$$1, numberOfItemsBeforeAd) {
-    var rightItems = props.rightItems;
-
-    var i = ((index$$1 + 1) / numberOfItemsBeforeAd - 1) % rightItems.length;
-    return React__default.createElement(
-      'div',
-      null,
-      rightItems[i].component
-    );
-  };
-
   return React__default.createElement(
     'div',
     null,
@@ -12273,7 +12278,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
         React__default.createElement(
           Container$1,
           null,
-          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth)
+          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems)
         )
       ),
       React__default.createElement(
@@ -12287,7 +12292,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
       React__default.createElement(
         Container$1,
         null,
-        cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory)
+        cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, rightItems)
       ),
       React__default.createElement(
         'div',
@@ -20366,22 +20371,31 @@ var Video = function Video(_ref) {
 var Audio = function Audio(_ref) {
   var node = _ref.node;
 
-  return React__default.createElement(
-    'div',
-    { className: 'd-block text-center mb-3' },
-    React__default.createElement(
-      'audio',
-      { controls: true, controlsList: 'nodownload' },
-      React__default.createElement('source', { src: node.uploadAudio ? node.uploadAudio.asset.url : node.audioFilePth, type: 'audio/ogg' }),
-      React__default.createElement('source', { src: node.uploadAudio ? node.uploadAudio.asset.url : node.audioFilePth, type: 'audio/mpeg' }),
-      'Your browser does not support the audio element.'
-    ),
-    node.caption && React__default.createElement(
-      'p',
-      null,
-      node.caption
-    )
-  );
+  if (node.uploadAudio) {
+    return React__default.createElement(
+      'div',
+      { className: 'audio d-block text-center mb-3' },
+      React__default.createElement(
+        'audio',
+        { controls: true, controlsList: 'nodownload', className: 'audio' },
+        React__default.createElement('source', { src: node.uploadAudio.asset.url, type: 'audio/ogg' }),
+        React__default.createElement('source', { src: node.uploadAudio.asset.url, type: 'audio/mpeg' }),
+        'Your browser does not support the audio element.'
+      )
+    );
+  } else if (node.audioFilePth) {
+    var hostname = new URL(node.audioFilePth).hostname;
+    if (hostname === 'embeds.audioboom.com') {
+      return React__default.createElement('iframe', { src: node.audioFilePth, width: '100%', height: '300', className: 'audio', style: { border: 'none' } });
+    }
+    return React__default.createElement(
+      'div',
+      { className: 'audio' },
+      React__default.createElement(ReactPlayer, { url: node.audioFilePth, controls: true, width: '100%', height: '100%' })
+    );
+  }
+
+  return null;
 };
 
 var YouTubeGallery = function YouTubeGallery(_ref) {