@mjhls/mjh-framework 1.0.290 → 1.0.291

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.290
+# mjh-framework v. 1.0.291
 
 > Foundation Framework
 

package/dist/cjs/{Figure-a7cd5161.js → Figure-0681dd7d.js}

@@ -135,7 +135,7 @@ var FigureComponent = function FigureComponent(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        figure-caption {\n          font-size: 90%;\n          color: #6c757d;\n        }\n        /*Eliminates padding, centers the thumbnail */\n\n        /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n        .lightbox-target {\n          position: fixed;\n          top: -100%;\n          width: 100%;\n          background: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          opacity: 0;\n          -webkit-transition: opacity 0.5s ease-in-out;\n          -moz-transition: opacity 0.5s ease-in-out;\n          -o-transition: opacity 0.5s ease-in-out;\n          transition: opacity 0.5s ease-in-out;\n          overflow: hidden;\n        }\n\n        .lightbox-target.close {\n          opacity: 0;\n        }\n\n        /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n        .lightbox-target img {\n          margin: auto;\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          max-height: 0%;\n          max-width: 0%;\n          border: 3px solid white;\n          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n          box-sizing: border-box;\n          -webkit-transition: 0.5s ease-in-out;\n          -moz-transition: 0.5s ease-in-out;\n          -o-transition: 0.5s ease-in-out;\n          transition: 0.5s ease-in-out;\n        }\n\n        /* Styles the close link, adds the slide down transition */\n\n        a.lightbox-close {\n          display: block;\n          width: 50px;\n          height: 50px;\n          box-sizing: border-box;\n          background: white;\n          color: black;\n          text-decoration: none;\n          position: absolute;\n          top: -80px;\n          right: 0;\n          -webkit-transition: 0.5s ease-in-out;\n          -moz-transition: 0.5s ease-in-out;\n          -o-transition: 0.5s ease-in-out;\n          transition: 0.5s ease-in-out;\n        }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        a.lightbox-close:before {\n          content: \'\';\n          display: block;\n          height: 30px;\n          width: 1px;\n          background: black;\n          position: absolute;\n          left: 26px;\n          top: 10px;\n          -webkit-transform: rotate(45deg);\n          -moz-transform: rotate(45deg);\n          -o-transform: rotate(45deg);\n          transform: rotate(45deg);\n        }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        a.lightbox-close:after {\n          content: \'\';\n          display: block;\n          height: 30px;\n          width: 1px;\n          background: black;\n          position: absolute;\n          left: 26px;\n          top: 10px;\n          -webkit-transform: rotate(-45deg);\n          -moz-transform: rotate(-45deg);\n          -o-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n        }\n\n        /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n        .lightbox-target.open {\n          opacity: 1;\n          top: 0;\n          bottom: 0;\n          right: 0;\n          z-index: 9999;\n        }\n\n        .lightbox-target.open img {\n          max-height: 100%;\n          max-width: 100%;\n        }\n\n        .lightbox-target.open a.lightbox-close {\n          top: 0px;\n        }\n      '
+      '\n        figure-caption {\n          font-size: 90%;\n          color: #6c757d;\n        }\n        /*Eliminates padding, centers the thumbnail */\n\n        /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n        .lightbox-target {\n          position: fixed;\n          top: -100%;\n          width: 100%;\n          background: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          opacity: 0;\n          -webkit-transition: opacity 0.5s ease-in-out;\n          -moz-transition: opacity 0.5s ease-in-out;\n          -o-transition: opacity 0.5s ease-in-out;\n          transition: opacity 0.5s ease-in-out;\n          overflow: hidden;\n        }\n\n        .lightbox-target.close {\n          opacity: 0;\n        }\n\n        /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n        .lightbox-target img {\n          margin: auto;\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          max-height: 0%;\n          max-width: 0%;\n          border: 3px solid white;\n          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n          box-sizing: border-box;\n          -webkit-transition: 0.5s ease-in-out;\n          -moz-transition: 0.5s ease-in-out;\n          -o-transition: 0.5s ease-in-out;\n          transition: 0.5s ease-in-out;\n        }\n\n        /* Styles the close link, adds the slide down transition */\n\n        a.lightbox-close {\n          display: block;\n          width: 50px;\n          height: 50px;\n          box-sizing: border-box;\n          background: white;\n          color: black;\n          text-decoration: none;\n          position: absolute;\n          top: -80px;\n          right: 0;\n          -webkit-transition: 0.5s ease-in-out;\n          -moz-transition: 0.5s ease-in-out;\n          -o-transition: 0.5s ease-in-out;\n          transition: 0.5s ease-in-out;\n        }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        a.lightbox-close:before {\n          content: \'\';\n          display: block;\n          height: 30px;\n          width: 1px;\n          background: black;\n          position: absolute;\n          left: 26px;\n          top: 10px;\n          -webkit-transform: rotate(45deg);\n          -moz-transform: rotate(45deg);\n          -o-transform: rotate(45deg);\n          transform: rotate(45deg);\n        }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        a.lightbox-close:after {\n          content: \'\';\n          display: block;\n          height: 30px;\n          width: 1px;\n          background: black;\n          position: absolute;\n          left: 26px;\n          top: 10px;\n          -webkit-transform: rotate(-45deg);\n          -moz-transform: rotate(-45deg);\n          -o-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n        }\n\n        /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n        .lightbox-target.open {\n          opacity: 1;\n          top: 0;\n          bottom: 0;\n          right: 0;\n          z-index: 99999;\n        }\n\n        .lightbox-target.open img {\n          max-height: 100%;\n          max-width: 100%;\n        }\n\n        .lightbox-target.open a.lightbox-close {\n          top: 0px;\n        }\n      '
     )
   );
 };

package/dist/cjs/index.js

@@ -1981,30 +1981,35 @@ var EventsDeck = function EventsDeck(_ref) {
   };
 
   var renderRegisterButton = function renderRegisterButton(links, closeAfter, timezone) {
-    var now = momentTimezone$1().tz(timezone);
-    closeAfter = momentTimezone$1(closeAfter).tz(timezone);
-    var isRegister = momentTimezone$1(now).isBefore(closeAfter);
-    if (isRegister) {
-      return React__default.createElement(
-        'a',
-        { href: links.registration.href || '#', target: '_blank' },
-        React__default.createElement(
-          Button,
-          { size: 'sm', className: 'event-registration-button' },
-          'Register Now'
-        )
-      );
-    } else {
-      return React__default.createElement(
-        'a',
-        { href: links.summary.href || '#', target: '_blank' },
-        React__default.createElement(
-          Button,
-          { size: 'sm', className: 'event-registration-button' },
-          'Learn more'
-        )
-      );
-    }
+    return React__default.createElement(
+      'a',
+      { href: links.summary.href || '#', target: '_blank' },
+      React__default.createElement(
+        Button,
+        { size: 'sm', className: 'event-registration-button' },
+        'Register Now'
+      )
+    );
+    // const now = moment().tz(timezone)
+    // closeAfter = moment(closeAfter).tz(timezone)
+    // const isRegister = moment(now).isBefore(closeAfter)
+    // if (isRegister) {
+    //   return (
+    //     <a href={links.registration.href || '#'} target='_blank'>
+    //       <Button size='sm' className='event-registration-button'>
+    //         Register Now
+    //       </Button>
+    //     </a>
+    //   )
+    // } else {
+    //   return (
+    //     <a href={links.summary.href || '#'} target='_blank'>
+    //       <Button size='sm' className='event-registration-button'>
+    //         Learn more
+    //       </Button>
+    //     </a>
+    //   )
+    // }
   };
 
   var cardLoader = function cardLoader() {
@@ -2015,12 +2020,14 @@ var EventsDeck = function EventsDeck(_ref) {
       data && data.map(function (row, index) {
         var description = row.description,
             start = row.start,
+            end = row.end,
             venues = row.venues,
             _links = row._links,
             virtual = row.virtual,
-            timezone = row.timezone,
-            closeAfter = row.closeAfter;
+            timezone = row.timezone;
 
+        var now = momentTimezone$1().tz(timezone);
+        var isRegister = momentTimezone$1(now).isBefore(end);
         var discussionTopic = row.customFields.reduce(function (result, item) {
           if (item.name === 'Discussion Topic' && item.value) {
             result = item.value[0];
@@ -2088,7 +2095,7 @@ var EventsDeck = function EventsDeck(_ref) {
                 React__default.createElement(
                   Col,
                   { xs: 12, sm: 3 },
-                  renderRegisterButton(_links, closeAfter, timezone)
+                  isRegister && renderRegisterButton(_links)
                 )
               ),
               description && React__default.createElement(
@@ -2911,28 +2918,35 @@ var ADFloatingFooter = function ADFloatingFooter(_ref) {
       networkID = floatingAd.networkID,
       sizes = floatingAd.sizes;
 
-  var adt = _extends$2._extends({}, targeting, { pos: position });
 
-  var _useState = React.useState(adt),
+  var adTargeting = {
+    content_placement: targeting.content_placement,
+    tags: targeting.tags,
+    document_group: targeting.document_group,
+    document_url: targeting.document_url,
+    pos: position
+  };
+
+  var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
-      adTargeting = _useState2[0],
-      setTargeting = _useState2[1];
+      showAd = _useState2[0],
+      setShowAd = _useState2[1];
 
-  var _useState3 = React.useState(false),
+  var _useState3 = React.useState(true),
       _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      showAd = _useState4[0],
-      setShowAd = _useState4[1];
+      widthFlag = _useState4[0],
+      setWidthFlag = _useState4[1];
 
   React.useEffect(function () {
-    if (window && window.innerWidth >= minScreenWidth) {
-      setShowAd(true);
+    if (window && window.innerWidth < minScreenWidth) {
+      setWidthFlag(false);
     }
   }, [minScreenWidth]);
 
   return React__default.createElement(
     React__default.Fragment,
     null,
-    showAd && React__default.createElement(
+    showAd && widthFlag && React__default.createElement(
       'div',
       { className: 'floating-ad-wrapper ' + title },
       React__default.createElement(AdSlot.DFPAdSlot, { className: className, slotId: slotId, networkID: networkID, sizes: sizes, adUnit: adUnit, targeting: adTargeting, refreshFlag: false, setShowAd: setShowAd }),
@@ -2967,29 +2981,30 @@ var ADGutter = function ADGutter(_ref) {
       sizes = gutterAd.sizes;
 
 
-  var adt = _extends$2._extends({}, targeting, { pos: position });
+  var adTargeting = {
+    content_placement: targeting.content_placement,
+    tags: targeting.tags,
+    document_group: targeting.document_group,
+    document_url: targeting.document_url,
+    pos: position
+  };
 
-  var _useState = React.useState(adt),
+  var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
-      adTargeting = _useState2[0],
-      setTargeting = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      showAd = _useState4[0],
-      setShowAd = _useState4[1];
+      widthFlag = _useState2[0],
+      setWidthFlag = _useState2[1];
 
   React.useEffect(function () {
     if (window && window.innerWidth >= minScreenWidth) {
-      setShowAd(true);
+      setWidthFlag(true);
     }
   }, [minScreenWidth]);
 
-  if (showAd) {
+  if (widthFlag) {
     return React__default.createElement(
       React__default.Fragment,
       null,
-      showAd && React__default.createElement(
+      widthFlag && React__default.createElement(
         'div',
         { className: 'gutter-ad-wrapper ' + title },
         React__default.createElement(
@@ -3023,28 +3038,28 @@ var ADWelcome = function ADWelcome(_ref) {
       networkID = welcomeAd.networkID,
       sizes = welcomeAd.sizes;
 
-  var adt = _extends$2._extends({}, targeting, { pos: position });
-
-  var _useState = React.useState(adt),
-      _useState2 = slicedToArray._slicedToArray(_useState, 2),
-      adTargeting = _useState2[0],
-      setTargeting = _useState2[1];
-
+  var adTargeting = {
+    content_placement: targeting.content_placement,
+    tags: targeting.tags,
+    document_group: targeting.document_group,
+    document_url: targeting.document_url,
+    pos: position
+  };
   var adRef = React.useRef(null);
 
-  var _useState3 = React.useState(),
-      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      showAd = _useState4[0],
-      setShowAd = _useState4[1];
+  var _useState = React.useState(),
+      _useState2 = slicedToArray._slicedToArray(_useState, 2),
+      showAd = _useState2[0],
+      setShowAd = _useState2[1];
 
   var calculateTimeLeft = function calculateTimeLeft(timeLeft) {
     return --timeLeft;
   };
 
-  var _useState5 = React.useState(calculateTimeLeft(counter + 1)),
-      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
-      timeLeft = _useState6[0],
-      setTimeLeft = _useState6[1];
+  var _useState3 = React.useState(calculateTimeLeft(counter + 1)),
+      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+      timeLeft = _useState4[0],
+      setTimeLeft = _useState4[1];
 
   React.useEffect(function () {
     if (timeLeft > 0) {
@@ -8164,16 +8179,18 @@ var Video = function Video(_ref) {
     } else if (experienceID) {
       return React__default.createElement(
         'div',
-        { className: 'playlist-player', style: { position: 'relative', display: 'block', margin: '0px auto', minHeight: '380px' } },
-        React__default.createElement('iframe', {
-          src: 'https://players.brightcove.net/' + accountIDs.brightcove.accountId + '/experience_' + experienceID + '/index.html',
-          allowFullScreen: 'true',
-          webkitallowfullscreen: 'true',
-          mozallowfullscreen: 'true',
-          frameBorder: 'none',
-          scrolling: 'no',
-          style: { border: 'none', top: '0px', right: '0px', bottom: '0px', left: '0px', width: '100%', height: '100%' }
-        })
+        { className: 'brightcove-playlist', style: { position: 'relative', display: 'block', margin: '0px auto' } },
+        React__default.createElement(
+          'div',
+          { style: { paddingTop: '56.25%' } },
+          React__default.createElement('iframe', {
+            src: 'https://players.brightcove.net/' + accountIDs.brightcove.accountId + '/experience_' + experienceID + '/index.html',
+            allowFullScreen: 'true',
+            webkitallowfullscreen: 'true',
+            mozallowfullscreen: 'true',
+            style: { border: 'none', position: 'absolute', top: '0px', right: '0px', bottom: '0px', left: '0px', width: '100%', height: '100%' }
+          })
+        )
       );
     }
     return null;
@@ -13507,7 +13524,7 @@ var NativeAd = function NativeAd(props) {
 };
 
 var Figure = dynamic(function () {
-  return new Promise(function (resolve) { resolve(require('./Figure-a7cd5161.js')); });
+  return new Promise(function (resolve) { resolve(require('./Figure-0681dd7d.js')); });
 }, { ssr: false });
 
 var checkUrlIsExternal = function checkUrlIsExternal(url) {
@@ -14203,40 +14220,59 @@ var ArticleDetailDropdown = function ArticleDetailDropdown(props) {
 var HighlightenVideo = function HighlightenVideo(_ref) {
   var highlightVideoOptions = _ref.highlightVideoOptions;
   var accountId = highlightVideoOptions.accountId,
-      experienceId = highlightVideoOptions.experienceId;
+      experienceId = highlightVideoOptions.experienceId,
+      playerId = highlightVideoOptions.playerId,
+      playlistId = highlightVideoOptions.playlistId,
+      videoId = highlightVideoOptions.videoId;
 
-  return React__default.createElement(
-    React__default.Fragment,
-    null,
-    accountId && experienceId && React__default.createElement(
-      'div',
-      { className: 'brightcove-single-player' },
-      React__default.createElement(
-        'p',
-        { style: { width: '100%' } },
-        'Highlighted Videos'
-      ),
+  if (accountId && experienceId) {
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
       React__default.createElement(
         'div',
-        { className: 'playlist-player', style: { position: 'relative', display: 'block', margin: '0px auto' } },
+        { className: 'brightcove-experience-player' },
+        React__default.createElement(
+          'p',
+          { style: { width: '100%' } },
+          'Highlighted Videos'
+        ),
         React__default.createElement(
           'div',
-          { style: { paddingTop: '56.25%' } },
-          React__default.createElement('iframe', {
-            src: 'https://players.brightcove.net/' + accountId + '/' + experienceId + '/share.html',
-            allowFullScreen: true,
-            allow: 'encrypted-media',
-            style: { border: 'none', position: 'absolute', top: '0px', right: '0px', bottom: '0px', left: '0px', width: '100%', height: '100%' }
-          })
+          { className: 'playlist-player', style: { position: 'relative', display: 'block', margin: '0px auto' } },
+          React__default.createElement(
+            'div',
+            { style: { paddingTop: '56.25%' } },
+            React__default.createElement('iframe', {
+              src: 'https://players.brightcove.net/' + accountId + '/' + experienceId + '/share.html',
+              allowFullScreen: true,
+              allow: 'encrypted-media',
+              style: { border: 'none', position: 'absolute', top: '0px', right: '0px', bottom: '0px', left: '0px', width: '100%', height: '100%' }
+            })
+          )
         )
+      ),
+      React__default.createElement(
+        'style',
+        { jsx: 'true' },
+        '\n          @media (min-width: 320px) {\n            .playlist-player {\n              height: 290px;\n            }\n          }\n          @media (min-width: 360px) {\n            .playlist-player {\n              height: 340px;\n            }\n          }\n          @media (min-width: 480px) {\n            .playlist-player {\n              height: 400px;\n            }\n          }\n          @media (min-width: 560px) {\n            .playlist-player {\n              height: 300px;\n            }\n          }\n          @media (min-width: 768px) {\n            .playlist-player {\n              height: 400px;\n            }\n          }\n          @media (min-width: 968px) {\n            .playlist-player {\n              height: 300px;\n            }\n          }\n          @media (min-width: 992px) {\n            .playlist-player {\n              height: 350px;\n            }\n          }\n          @media (min-width: 1192px) {\n            .playlist-player {\n              height: 300px;\n            }\n          }\n          @media (min-width: 1400px) {\n            .playlist-player {\n              height: 400px;\n            }\n          }\n          .brightcove-experience-player {\n            margin-bottom: 10px;\n            width: 100%;\n          }\n          .brightcove-experience-player p {\n            padding: 10px;\n            margin: 0;\n            color: #fff;\n            text-transform: uppercase;\n            text-align: center;\n            font-size: 1.5em;\n            font-weight: 400;\n            margin-bottom: 10px;\n          }\n        '
       )
-    ),
-    React__default.createElement(
-      'style',
-      { jsx: 'true' },
-      '\n        @media (min-width: 320px) {\n          .playlist-player {\n            height: 290px;\n          }\n        }\n        @media (min-width: 360px) {\n          .playlist-player {\n            height: 340px;\n          }\n        }\n        @media (min-width: 480px) {\n          .playlist-player {\n            height: 400px;\n          }\n        }\n        @media (min-width: 560px) {\n          .playlist-player {\n            height: 300px;\n          }\n        }\n        @media (min-width: 768px) {\n          .playlist-player {\n            height: 400px;\n          }\n        }\n        @media (min-width: 968px) {\n          .playlist-player {\n            height: 300px;\n          }\n        }\n        @media (min-width: 992px) {\n          .playlist-player {\n            height: 350px;\n          }\n        }\n        @media (min-width: 1192px) {\n          .playlist-player {\n            height: 300px;\n          }\n        }\n        @media (min-width: 1400px) {\n          .playlist-player {\n            height: 400px;\n          }\n        }\n        .brightcove-single-player {\n          margin-bottom: 10px;\n          width: 100%;\n        }\n        .brightcove-single-player p {\n          padding: 10px;\n          margin: 0;\n          color: #fff;\n          text-transform: uppercase;\n          text-align: center;\n          font-size: 1.5em;\n          font-weight: 400;\n          margin-bottom: 10px;\n        }\n      '
-    )
-  );
+    );
+  } else if (accountId && playerId && playlistId) {
+    return React__default.createElement(
+      'div',
+      { className: 'brightcove-playlist-player' },
+      React__default.createElement(ReactPlayerLoader, { accountId: accountId, playerId: playerId, playlistId: playlistId, attrs: { className: 'brightcove' } })
+    );
+  } else if (accountId && playerId && videoId) {
+    return React__default.createElement(
+      'div',
+      { className: 'brightcove-video-player' },
+      React__default.createElement(ReactPlayerLoader, { accountId: accountId, playerId: playerId, videoId: videoId, attrs: { className: 'brightcove' } })
+    );
+  } else {
+    return null;
+  }
 };
 
 var fbsHero = function fbsHero(props) {

package/dist/esm/{Figure-d6e22818.js → Figure-cff72982.js}

@@ -130,7 +130,7 @@ var FigureComponent = function FigureComponent(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        figure-caption {\n          font-size: 90%;\n          color: #6c757d;\n        }\n        /*Eliminates padding, centers the thumbnail */\n\n        /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n        .lightbox-target {\n          position: fixed;\n          top: -100%;\n          width: 100%;\n          background: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          opacity: 0;\n          -webkit-transition: opacity 0.5s ease-in-out;\n          -moz-transition: opacity 0.5s ease-in-out;\n          -o-transition: opacity 0.5s ease-in-out;\n          transition: opacity 0.5s ease-in-out;\n          overflow: hidden;\n        }\n\n        .lightbox-target.close {\n          opacity: 0;\n        }\n\n        /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n        .lightbox-target img {\n          margin: auto;\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          max-height: 0%;\n          max-width: 0%;\n          border: 3px solid white;\n          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n          box-sizing: border-box;\n          -webkit-transition: 0.5s ease-in-out;\n          -moz-transition: 0.5s ease-in-out;\n          -o-transition: 0.5s ease-in-out;\n          transition: 0.5s ease-in-out;\n        }\n\n        /* Styles the close link, adds the slide down transition */\n\n        a.lightbox-close {\n          display: block;\n          width: 50px;\n          height: 50px;\n          box-sizing: border-box;\n          background: white;\n          color: black;\n          text-decoration: none;\n          position: absolute;\n          top: -80px;\n          right: 0;\n          -webkit-transition: 0.5s ease-in-out;\n          -moz-transition: 0.5s ease-in-out;\n          -o-transition: 0.5s ease-in-out;\n          transition: 0.5s ease-in-out;\n        }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        a.lightbox-close:before {\n          content: \'\';\n          display: block;\n          height: 30px;\n          width: 1px;\n          background: black;\n          position: absolute;\n          left: 26px;\n          top: 10px;\n          -webkit-transform: rotate(45deg);\n          -moz-transform: rotate(45deg);\n          -o-transform: rotate(45deg);\n          transform: rotate(45deg);\n        }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        a.lightbox-close:after {\n          content: \'\';\n          display: block;\n          height: 30px;\n          width: 1px;\n          background: black;\n          position: absolute;\n          left: 26px;\n          top: 10px;\n          -webkit-transform: rotate(-45deg);\n          -moz-transform: rotate(-45deg);\n          -o-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n        }\n\n        /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n        .lightbox-target.open {\n          opacity: 1;\n          top: 0;\n          bottom: 0;\n          right: 0;\n          z-index: 9999;\n        }\n\n        .lightbox-target.open img {\n          max-height: 100%;\n          max-width: 100%;\n        }\n\n        .lightbox-target.open a.lightbox-close {\n          top: 0px;\n        }\n      '
+      '\n        figure-caption {\n          font-size: 90%;\n          color: #6c757d;\n        }\n        /*Eliminates padding, centers the thumbnail */\n\n        /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n        .lightbox-target {\n          position: fixed;\n          top: -100%;\n          width: 100%;\n          background: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          opacity: 0;\n          -webkit-transition: opacity 0.5s ease-in-out;\n          -moz-transition: opacity 0.5s ease-in-out;\n          -o-transition: opacity 0.5s ease-in-out;\n          transition: opacity 0.5s ease-in-out;\n          overflow: hidden;\n        }\n\n        .lightbox-target.close {\n          opacity: 0;\n        }\n\n        /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n        .lightbox-target img {\n          margin: auto;\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          max-height: 0%;\n          max-width: 0%;\n          border: 3px solid white;\n          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n          box-sizing: border-box;\n          -webkit-transition: 0.5s ease-in-out;\n          -moz-transition: 0.5s ease-in-out;\n          -o-transition: 0.5s ease-in-out;\n          transition: 0.5s ease-in-out;\n        }\n\n        /* Styles the close link, adds the slide down transition */\n\n        a.lightbox-close {\n          display: block;\n          width: 50px;\n          height: 50px;\n          box-sizing: border-box;\n          background: white;\n          color: black;\n          text-decoration: none;\n          position: absolute;\n          top: -80px;\n          right: 0;\n          -webkit-transition: 0.5s ease-in-out;\n          -moz-transition: 0.5s ease-in-out;\n          -o-transition: 0.5s ease-in-out;\n          transition: 0.5s ease-in-out;\n        }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        a.lightbox-close:before {\n          content: \'\';\n          display: block;\n          height: 30px;\n          width: 1px;\n          background: black;\n          position: absolute;\n          left: 26px;\n          top: 10px;\n          -webkit-transform: rotate(45deg);\n          -moz-transform: rotate(45deg);\n          -o-transform: rotate(45deg);\n          transform: rotate(45deg);\n        }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        a.lightbox-close:after {\n          content: \'\';\n          display: block;\n          height: 30px;\n          width: 1px;\n          background: black;\n          position: absolute;\n          left: 26px;\n          top: 10px;\n          -webkit-transform: rotate(-45deg);\n          -moz-transform: rotate(-45deg);\n          -o-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n        }\n\n        /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n        .lightbox-target.open {\n          opacity: 1;\n          top: 0;\n          bottom: 0;\n          right: 0;\n          z-index: 99999;\n        }\n\n        .lightbox-target.open img {\n          max-height: 100%;\n          max-width: 100%;\n        }\n\n        .lightbox-target.open a.lightbox-close {\n          top: 0px;\n        }\n      '
     )
   );
 };

package/dist/esm/index.js

@@ -1979,30 +1979,35 @@ var EventsDeck = function EventsDeck(_ref) {
   };
 
   var renderRegisterButton = function renderRegisterButton(links, closeAfter, timezone) {
-    var now = momentTimezone$1().tz(timezone);
-    closeAfter = momentTimezone$1(closeAfter).tz(timezone);
-    var isRegister = momentTimezone$1(now).isBefore(closeAfter);
-    if (isRegister) {
-      return React__default.createElement(
-        'a',
-        { href: links.registration.href || '#', target: '_blank' },
-        React__default.createElement(
-          Button,
-          { size: 'sm', className: 'event-registration-button' },
-          'Register Now'
-        )
-      );
-    } else {
-      return React__default.createElement(
-        'a',
-        { href: links.summary.href || '#', target: '_blank' },
-        React__default.createElement(
-          Button,
-          { size: 'sm', className: 'event-registration-button' },
-          'Learn more'
-        )
-      );
-    }
+    return React__default.createElement(
+      'a',
+      { href: links.summary.href || '#', target: '_blank' },
+      React__default.createElement(
+        Button,
+        { size: 'sm', className: 'event-registration-button' },
+        'Register Now'
+      )
+    );
+    // const now = moment().tz(timezone)
+    // closeAfter = moment(closeAfter).tz(timezone)
+    // const isRegister = moment(now).isBefore(closeAfter)
+    // if (isRegister) {
+    //   return (
+    //     <a href={links.registration.href || '#'} target='_blank'>
+    //       <Button size='sm' className='event-registration-button'>
+    //         Register Now
+    //       </Button>
+    //     </a>
+    //   )
+    // } else {
+    //   return (
+    //     <a href={links.summary.href || '#'} target='_blank'>
+    //       <Button size='sm' className='event-registration-button'>
+    //         Learn more
+    //       </Button>
+    //     </a>
+    //   )
+    // }
   };
 
   var cardLoader = function cardLoader() {
@@ -2013,12 +2018,14 @@ var EventsDeck = function EventsDeck(_ref) {
       data && data.map(function (row, index) {
         var description = row.description,
             start = row.start,
+            end = row.end,
             venues = row.venues,
             _links = row._links,
             virtual = row.virtual,
-            timezone = row.timezone,
-            closeAfter = row.closeAfter;
+            timezone = row.timezone;
 
+        var now = momentTimezone$1().tz(timezone);
+        var isRegister = momentTimezone$1(now).isBefore(end);
         var discussionTopic = row.customFields.reduce(function (result, item) {
           if (item.name === 'Discussion Topic' && item.value) {
             result = item.value[0];
@@ -2086,7 +2093,7 @@ var EventsDeck = function EventsDeck(_ref) {
                 React__default.createElement(
                   Col,
                   { xs: 12, sm: 3 },
-                  renderRegisterButton(_links, closeAfter, timezone)
+                  isRegister && renderRegisterButton(_links)
                 )
               ),
               description && React__default.createElement(
@@ -2909,28 +2916,35 @@ var ADFloatingFooter = function ADFloatingFooter(_ref) {
       networkID = floatingAd.networkID,
       sizes = floatingAd.sizes;
 
-  var adt = _extends$2({}, targeting, { pos: position });
 
-  var _useState = useState(adt),
+  var adTargeting = {
+    content_placement: targeting.content_placement,
+    tags: targeting.tags,
+    document_group: targeting.document_group,
+    document_url: targeting.document_url,
+    pos: position
+  };
+
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      adTargeting = _useState2[0],
-      setTargeting = _useState2[1];
+      showAd = _useState2[0],
+      setShowAd = _useState2[1];
 
-  var _useState3 = useState(false),
+  var _useState3 = useState(true),
       _useState4 = _slicedToArray(_useState3, 2),
-      showAd = _useState4[0],
-      setShowAd = _useState4[1];
+      widthFlag = _useState4[0],
+      setWidthFlag = _useState4[1];
 
   useEffect(function () {
-    if (window && window.innerWidth >= minScreenWidth) {
-      setShowAd(true);
+    if (window && window.innerWidth < minScreenWidth) {
+      setWidthFlag(false);
     }
   }, [minScreenWidth]);
 
   return React__default.createElement(
     React__default.Fragment,
     null,
-    showAd && React__default.createElement(
+    showAd && widthFlag && React__default.createElement(
       'div',
       { className: 'floating-ad-wrapper ' + title },
       React__default.createElement(DFPAdSlot, { className: className, slotId: slotId, networkID: networkID, sizes: sizes, adUnit: adUnit, targeting: adTargeting, refreshFlag: false, setShowAd: setShowAd }),
@@ -2965,29 +2979,30 @@ var ADGutter = function ADGutter(_ref) {
       sizes = gutterAd.sizes;
 
 
-  var adt = _extends$2({}, targeting, { pos: position });
+  var adTargeting = {
+    content_placement: targeting.content_placement,
+    tags: targeting.tags,
+    document_group: targeting.document_group,
+    document_url: targeting.document_url,
+    pos: position
+  };
 
-  var _useState = useState(adt),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      adTargeting = _useState2[0],
-      setTargeting = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showAd = _useState4[0],
-      setShowAd = _useState4[1];
+      widthFlag = _useState2[0],
+      setWidthFlag = _useState2[1];
 
   useEffect(function () {
     if (window && window.innerWidth >= minScreenWidth) {
-      setShowAd(true);
+      setWidthFlag(true);
     }
   }, [minScreenWidth]);
 
-  if (showAd) {
+  if (widthFlag) {
     return React__default.createElement(
       React__default.Fragment,
       null,
-      showAd && React__default.createElement(
+      widthFlag && React__default.createElement(
         'div',
         { className: 'gutter-ad-wrapper ' + title },
         React__default.createElement(
@@ -3021,28 +3036,28 @@ var ADWelcome = function ADWelcome(_ref) {
       networkID = welcomeAd.networkID,
       sizes = welcomeAd.sizes;
 
-  var adt = _extends$2({}, targeting, { pos: position });
-
-  var _useState = useState(adt),
-      _useState2 = _slicedToArray(_useState, 2),
-      adTargeting = _useState2[0],
-      setTargeting = _useState2[1];
-
+  var adTargeting = {
+    content_placement: targeting.content_placement,
+    tags: targeting.tags,
+    document_group: targeting.document_group,
+    document_url: targeting.document_url,
+    pos: position
+  };
   var adRef = useRef(null);
 
-  var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showAd = _useState4[0],
-      setShowAd = _useState4[1];
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      showAd = _useState2[0],
+      setShowAd = _useState2[1];
 
   var calculateTimeLeft = function calculateTimeLeft(timeLeft) {
     return --timeLeft;
   };
 
-  var _useState5 = useState(calculateTimeLeft(counter + 1)),
-      _useState6 = _slicedToArray(_useState5, 2),
-      timeLeft = _useState6[0],
-      setTimeLeft = _useState6[1];
+  var _useState3 = useState(calculateTimeLeft(counter + 1)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      timeLeft = _useState4[0],
+      setTimeLeft = _useState4[1];
 
   useEffect(function () {
     if (timeLeft > 0) {
@@ -8162,16 +8177,18 @@ var Video = function Video(_ref) {
     } else if (experienceID) {
       return React__default.createElement(
         'div',
-        { className: 'playlist-player', style: { position: 'relative', display: 'block', margin: '0px auto', minHeight: '380px' } },
-        React__default.createElement('iframe', {
-          src: 'https://players.brightcove.net/' + accountIDs.brightcove.accountId + '/experience_' + experienceID + '/index.html',
-          allowFullScreen: 'true',
-          webkitallowfullscreen: 'true',
-          mozallowfullscreen: 'true',
-          frameBorder: 'none',
-          scrolling: 'no',
-          style: { border: 'none', top: '0px', right: '0px', bottom: '0px', left: '0px', width: '100%', height: '100%' }
-        })
+        { className: 'brightcove-playlist', style: { position: 'relative', display: 'block', margin: '0px auto' } },
+        React__default.createElement(
+          'div',
+          { style: { paddingTop: '56.25%' } },
+          React__default.createElement('iframe', {
+            src: 'https://players.brightcove.net/' + accountIDs.brightcove.accountId + '/experience_' + experienceID + '/index.html',
+            allowFullScreen: 'true',
+            webkitallowfullscreen: 'true',
+            mozallowfullscreen: 'true',
+            style: { border: 'none', position: 'absolute', top: '0px', right: '0px', bottom: '0px', left: '0px', width: '100%', height: '100%' }
+          })
+        )
       );
     }
     return null;
@@ -13505,7 +13522,7 @@ var NativeAd = function NativeAd(props) {
 };
 
 var Figure = dynamic(function () {
-  return import('./Figure-d6e22818.js');
+  return import('./Figure-cff72982.js');
 }, { ssr: false });
 
 var checkUrlIsExternal = function checkUrlIsExternal(url) {
@@ -14201,40 +14218,59 @@ var ArticleDetailDropdown = function ArticleDetailDropdown(props) {
 var HighlightenVideo = function HighlightenVideo(_ref) {
   var highlightVideoOptions = _ref.highlightVideoOptions;
   var accountId = highlightVideoOptions.accountId,
-      experienceId = highlightVideoOptions.experienceId;
+      experienceId = highlightVideoOptions.experienceId,
+      playerId = highlightVideoOptions.playerId,
+      playlistId = highlightVideoOptions.playlistId,
+      videoId = highlightVideoOptions.videoId;
 
-  return React__default.createElement(
-    React__default.Fragment,
-    null,
-    accountId && experienceId && React__default.createElement(
-      'div',
-      { className: 'brightcove-single-player' },
-      React__default.createElement(
-        'p',
-        { style: { width: '100%' } },
-        'Highlighted Videos'
-      ),
+  if (accountId && experienceId) {
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
       React__default.createElement(
         'div',
-        { className: 'playlist-player', style: { position: 'relative', display: 'block', margin: '0px auto' } },
+        { className: 'brightcove-experience-player' },
+        React__default.createElement(
+          'p',
+          { style: { width: '100%' } },
+          'Highlighted Videos'
+        ),
         React__default.createElement(
           'div',
-          { style: { paddingTop: '56.25%' } },
-          React__default.createElement('iframe', {
-            src: 'https://players.brightcove.net/' + accountId + '/' + experienceId + '/share.html',
-            allowFullScreen: true,
-            allow: 'encrypted-media',
-            style: { border: 'none', position: 'absolute', top: '0px', right: '0px', bottom: '0px', left: '0px', width: '100%', height: '100%' }
-          })
+          { className: 'playlist-player', style: { position: 'relative', display: 'block', margin: '0px auto' } },
+          React__default.createElement(
+            'div',
+            { style: { paddingTop: '56.25%' } },
+            React__default.createElement('iframe', {
+              src: 'https://players.brightcove.net/' + accountId + '/' + experienceId + '/share.html',
+              allowFullScreen: true,
+              allow: 'encrypted-media',
+              style: { border: 'none', position: 'absolute', top: '0px', right: '0px', bottom: '0px', left: '0px', width: '100%', height: '100%' }
+            })
+          )
         )
+      ),
+      React__default.createElement(
+        'style',
+        { jsx: 'true' },
+        '\n          @media (min-width: 320px) {\n            .playlist-player {\n              height: 290px;\n            }\n          }\n          @media (min-width: 360px) {\n            .playlist-player {\n              height: 340px;\n            }\n          }\n          @media (min-width: 480px) {\n            .playlist-player {\n              height: 400px;\n            }\n          }\n          @media (min-width: 560px) {\n            .playlist-player {\n              height: 300px;\n            }\n          }\n          @media (min-width: 768px) {\n            .playlist-player {\n              height: 400px;\n            }\n          }\n          @media (min-width: 968px) {\n            .playlist-player {\n              height: 300px;\n            }\n          }\n          @media (min-width: 992px) {\n            .playlist-player {\n              height: 350px;\n            }\n          }\n          @media (min-width: 1192px) {\n            .playlist-player {\n              height: 300px;\n            }\n          }\n          @media (min-width: 1400px) {\n            .playlist-player {\n              height: 400px;\n            }\n          }\n          .brightcove-experience-player {\n            margin-bottom: 10px;\n            width: 100%;\n          }\n          .brightcove-experience-player p {\n            padding: 10px;\n            margin: 0;\n            color: #fff;\n            text-transform: uppercase;\n            text-align: center;\n            font-size: 1.5em;\n            font-weight: 400;\n            margin-bottom: 10px;\n          }\n        '
       )
-    ),
-    React__default.createElement(
-      'style',
-      { jsx: 'true' },
-      '\n        @media (min-width: 320px) {\n          .playlist-player {\n            height: 290px;\n          }\n        }\n        @media (min-width: 360px) {\n          .playlist-player {\n            height: 340px;\n          }\n        }\n        @media (min-width: 480px) {\n          .playlist-player {\n            height: 400px;\n          }\n        }\n        @media (min-width: 560px) {\n          .playlist-player {\n            height: 300px;\n          }\n        }\n        @media (min-width: 768px) {\n          .playlist-player {\n            height: 400px;\n          }\n        }\n        @media (min-width: 968px) {\n          .playlist-player {\n            height: 300px;\n          }\n        }\n        @media (min-width: 992px) {\n          .playlist-player {\n            height: 350px;\n          }\n        }\n        @media (min-width: 1192px) {\n          .playlist-player {\n            height: 300px;\n          }\n        }\n        @media (min-width: 1400px) {\n          .playlist-player {\n            height: 400px;\n          }\n        }\n        .brightcove-single-player {\n          margin-bottom: 10px;\n          width: 100%;\n        }\n        .brightcove-single-player p {\n          padding: 10px;\n          margin: 0;\n          color: #fff;\n          text-transform: uppercase;\n          text-align: center;\n          font-size: 1.5em;\n          font-weight: 400;\n          margin-bottom: 10px;\n        }\n      '
-    )
-  );
+    );
+  } else if (accountId && playerId && playlistId) {
+    return React__default.createElement(
+      'div',
+      { className: 'brightcove-playlist-player' },
+      React__default.createElement(ReactPlayerLoader, { accountId: accountId, playerId: playerId, playlistId: playlistId, attrs: { className: 'brightcove' } })
+    );
+  } else if (accountId && playerId && videoId) {
+    return React__default.createElement(
+      'div',
+      { className: 'brightcove-video-player' },
+      React__default.createElement(ReactPlayerLoader, { accountId: accountId, playerId: playerId, videoId: videoId, attrs: { className: 'brightcove' } })
+    );
+  } else {
+    return null;
+  }
 };
 
 var fbsHero = function fbsHero(props) {

package/package.json

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