@mjhls/mjh-framework 1.0.321 → 1.0.323

package/dist/cjs/Ustream.js

@@ -2,12 +2,11 @@
 
 require('./_commonjsHelpers-06173234.js');
 require('./_to-object-329a650b.js');
-require('./web.dom.iterable-0998bdc3.js');
-require('./core.get-iterator-method-e049ca4a.js');
+require('./web.dom.iterable-8b02d65e.js');
 require('react');
-require('./slicedToArray-bed4d943.js');
+require('./slicedToArray-879ab2fb.js');
 require('./index.esm-340d3792.js');
-var Ustream = require('./Ustream-3a3c56b8.js');
+var Ustream = require('./Ustream-f5f53782.js');
 
 
 

package/dist/cjs/VideoSeriesListing.js

@@ -4,10 +4,10 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 require('./_commonjsHelpers-06173234.js');
 require('./_to-object-329a650b.js');
-require('./web.dom.iterable-0998bdc3.js');
+require('./web.dom.iterable-8b02d65e.js');
 var debounce = require('./debounce-528ad412.js');
 var _extends$2 = require('./extends-e94dbea5.js');
-var inherits$2 = require('./inherits-be59e8ae.js');
+var inherits$2 = require('./inherits-37d5840f.js');
 var React = require('react');
 var React__default = _interopDefault(React);
 require('prop-types');
@@ -18,7 +18,9 @@ var Router = require('next/router');
 var Router__default = _interopDefault(Router);
 require('react-dom');
 require('./index-fa0fb52c.js');
-var YoutubeGroup = require('./YoutubeGroup-24ec8af9.js');
+require('./slicedToArray-879ab2fb.js');
+require('./smoothscroll-95231a70.js');
+var YoutubeGroup = require('./YoutubeGroup.js');
 var index_esm = require('./index.esm-340d3792.js');
 
 var VideoSeriesListing = function (_React$Component) {
@@ -203,7 +205,7 @@ var VideoSeriesListing = function (_React$Component) {
                 )
               )
             ),
-            docSeries.body.length > 0 && docSeries.body[0].videos ? React__default.createElement(YoutubeGroup.YoutubeGroup, _extends$2._extends({ key: index, dataset: docSeries.body[0].videos }, _this.props)) : React__default.createElement(
+            docSeries.body.length > 0 && docSeries.body[0].videos ? React__default.createElement(YoutubeGroup, _extends$2._extends({ key: index, dataset: docSeries.body[0].videos }, _this.props)) : React__default.createElement(
               'p',
               null,
               'No Video Found.'

package/dist/cjs/YoutubeGroup.js

@@ -1,13 +1,253 @@
 'use strict';
 
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
 require('./_commonjsHelpers-06173234.js');
-require('react');
+require('./_to-object-329a650b.js');
+require('./web.dom.iterable-8b02d65e.js');
+var React = require('react');
+var React__default = _interopDefault(React);
 require('prop-types');
 require('next/link');
 require('react-dom');
-require('./index-fa0fb52c.js');
-var YoutubeGroup = require('./YoutubeGroup-24ec8af9.js');
+var index$1 = require('./index-fa0fb52c.js');
+var slicedToArray = require('./slicedToArray-879ab2fb.js');
+var smoothscroll = require('./smoothscroll-95231a70.js');
+
+/*
+GROQ query -
+    accepts an array of title, URL
+`https://img.youtube.com/vi/${getYouTubeId(vid.url)}/hqdefault.jpg`
+*/
+
+var YoutubeGroup = function YoutubeGroup(props) {
+  // Props should be an array of objects containing Thumbnail, title, and URL
+  var innerSlider = React.useRef(null);
+  var tile = React.useRef(null);
+  var viewableWindow = React.useRef(null);
+
+  var _useState = React.useState(0),
+      _useState2 = slicedToArray._slicedToArray(_useState, 2),
+      tileSize = _useState2[0],
+      setTileSize = _useState2[1];
+
+  React.useEffect(function () {
+    //IE11 Polyfill
+    smoothscroll.smoothscroll.polyfill();
+    setThumbSize();
+
+    window.addEventListener('resize', setThumbSize);
+
+    return function () {
+      return window.removeEventListener('resize', setThumbSize);
+    };
+  }, []);
+
+  var setThumbSize = function setThumbSize() {
+    var thumbSize = void 0;
+    if (window.innerWidth > 1399) {
+      thumbSize = Math.floor(viewableWindow.current.clientWidth / 3 - 40);
+    }
+    if (window.innerWidth < 1399 && window.innerWidth > 592) {
+      thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 48);
+    }
+    if (window.innerWidth < 592) {
+      thumbSize = Math.floor(viewableWindow.current.clientWidth / 1 - 64);
+    }
+    if (thumbSize !== tileSize) {
+      setTileSize(thumbSize);
+      var videoRows = document.querySelectorAll('#vid-slider .row');
+      for (var i = 0; i < videoRows.length; i++) {
+        videoRows[i].scrollTo({
+          left: 0,
+          behavior: 'smooth'
+        });
+      }
+    }
+  };
+
+  var get2 = props.get2 ? '/' + props.get2 + '/' : '/view/';
+
+  var variant = props.dark ? 'white' : '#383838';
+
+  function scrollSlider(e, direction) {
+    var slide = e.target.parentElement;
+    var scrollOffset = slide.scrollLeft;
+    var viewableWidth = slide.clientWidth;
+
+    //calculate viewable size / slide
+    var numberOfSlidesToScroll = Math.floor(tile.current.clientWidth + 25); //width of the tile plus margin
+
+    var scrollDirection = void 0;
+
+    if (direction === 'next') {
+      scrollDirection = scrollOffset + numberOfSlidesToScroll;
+
+      if (scrollOffset + viewableWidth + 25 >= innerSlider.current.offsetWidth) {
+        scrollDirection = 0;
+      }
+    }
+    if (direction === 'prev') {
+      scrollDirection = scrollOffset - numberOfSlidesToScroll;
+
+      if (scrollOffset === 0) {
+        if (window.innerWidth > 1399) {
+          scrollDirection = innerSlider.current.offsetWidth - tileSize * 3 - 70;
+        }
+        if (window.innerWidth < 1399 && window.innerWidth > 592) {
+          scrollDirection = innerSlider.current.offsetWidth - tileSize * 2 - 40;
+        }
+        if (window.innerWidth < 592) {
+          scrollDirection = innerSlider.current.offsetWidth - tileSize * 1 - 24;
+        }
+      }
+    }
+    slide.scrollTo({
+      left: scrollDirection,
+      behavior: 'smooth'
+    });
+  }
+
+  function handleClick(url, vidIndex) {
+    props.setState(url, vidIndex);
+  }
+
+  var _props$current = props.current,
+      current = _props$current === undefined ? '' : _props$current;
+
 
+  return React__default.createElement(
+    'div',
+    { ref: viewableWindow, id: 'vid-slider', className: 'col' },
+    React__default.createElement(
+      'div',
+      { className: 'row' },
+      React__default.createElement(
+        'div',
+        { onClick: function onClick(e) {
+            return scrollSlider(e, 'prev');
+          }, className: 'tile__slider-prev', style: { color: variant } },
+        React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
+      ),
+      React__default.createElement(
+        'div',
+        { onClick: function onClick(e) {
+            return scrollSlider(e, 'next');
+          }, className: 'tile__slider-next', style: { color: variant } },
+        React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
+      ),
+      React__default.createElement(
+        'div',
+        { ref: innerSlider, className: 'row__inner' },
+        props.dataset && props.dataset.map(function (video, index) {
+          // If there is a current prop, means this will overlay a currently playing video
+          if (current !== '') {
+            var url = video.url;
+            var thumbnail = 'https://img.youtube.com/vi/' + smoothscroll.getYoutubeId(video.url) + '/hqdefault.jpg';
 
+            return React__default.createElement(
+              'div',
+              { ref: tile, key: index, className: 'tile', style: { width: tileSize + 'px' } },
+              current && current === url ? React__default.createElement(
+                'div',
+                { className: 'now-playing' },
+                'Now Playing'
+              ) : '',
+              React__default.createElement(
+                'a',
+                { onClick: function onClick() {
+                    return handleClick(url, index + 1);
+                  } },
+                React__default.createElement(
+                  'div',
+                  { className: 'tile__media' },
+                  React__default.createElement(
+                    index$1.LazyLoad,
+                    null,
+                    React__default.createElement('img', { className: 'tile__img', src: thumbnail, style: { width: tileSize + 'px' }, alt: '' })
+                  )
+                ),
+                React__default.createElement(
+                  'div',
+                  { className: 'tile__details' },
+                  React__default.createElement(
+                    'div',
+                    { className: 'tile__title' },
+                    React__default.createElement(
+                      'div',
+                      { style: { color: variant }, className: 'tile__title_text' },
+                      video.title
+                    )
+                  )
+                ),
+                React__default.createElement(
+                  'div',
+                  { style: { color: '#fff' }, className: 'tile__info' },
+                  video.title
+                )
+              )
+            );
+          } else {
+            // slider by itself
+            var _url = '' + video.link;
+            var _thumbnail = 'https://img.youtube.com/vi/' + smoothscroll.getYoutubeId(video.url) + '/hqdefault.jpg';
+            return React__default.createElement(
+              'div',
+              { ref: tile, key: index, className: 'tile', style: { width: tileSize + 'px' } },
+              React__default.createElement(
+                'a',
+                { href: _url },
+                React__default.createElement(
+                  'div',
+                  { className: 'tile__media' },
+                  React__default.createElement(
+                    index$1.LazyLoad,
+                    null,
+                    React__default.createElement('img', { className: 'tile__img', src: _thumbnail, alt: '', style: { width: tileSize + 'px' } })
+                  )
+                ),
+                React__default.createElement(
+                  'div',
+                  { className: 'tile__details' },
+                  React__default.createElement(
+                    'div',
+                    { className: 'tile__title' },
+                    React__default.createElement(
+                      'div',
+                      { style: { color: '#fff' }, className: 'tile__title_text' },
+                      video.title
+                    )
+                  )
+                ),
+                React__default.createElement(
+                  'div',
+                  { style: { color: variant }, className: 'tile__info' },
+                  props.displayEpisodeNumber ? React__default.createElement(
+                    'span',
+                    null,
+                    React__default.createElement(
+                      'span',
+                      { style: { fontWeight: 'bold' } },
+                      'Ep. ',
+                      index + 1,
+                      ':'
+                    ),
+                    ' ',
+                    video.title
+                  ) : video.title
+                )
+              )
+            );
+          }
+        })
+      )
+    ),
+    React__default.createElement(
+      'style',
+      { jsx: 'true' },
+      '\n        #vid-slider * {\n          box-sizing: border-box;\n          -ms-overflow-style: none;\n        }\n        #vid-slider::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider {\n          position: relative;\n          -ms-overflow-style: none;\n          padding: 0 1.5rem;\n          margin-bottom: 2rem;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 1rem;\n          color: white;\n          background: rgba(0, 0, 0, 0.75);\n        }\n        #vid-slider h1,\n        #vid-slider p {\n          text-align: center;\n          width: 100%;\n          max-width: 500px;\n          margin: auto;\n        }\n        #vid-slider,\n        #vidHolder {\n          max-width: 805px;\n        }\n        #vid-slider a:link,\n        #vid-slider a:hover,\n        #vid-slider a:active,\n        #vid-slider a:visited {\n          transition: color 150ms;\n          color: #95a5a6;\n          text-decoration: none;\n        }\n        #vid-slider a:hover {\n          color: #7f8c8d;\n          text-decoration: underline;\n        }\n        #vid-slider .contain {\n          width: 100%;\n        }\n        #vid-slider .row {\n          overflow-x: scroll;\n          width: 100%;\n          -ms-overflow-style: none;\n          overflow-y: hidden !important;\n        }\n        #vid-slider .tile__info {\n          white-space: normal !important;\n          position: absolute;\n          text-align: center;\n          color: ' + (props.dark ? 'white' : '#383838') + ';\n          opacity: 1;\n          font-size: 0.9rem;\n          font-weight: bold;\n          transition: opacity 0.25s;\n        }\n        #vid-slider .row__inner {\n          transition: 450ms -webkit-transform;\n          transition: 450ms transform;\n          transition: 450ms transform, 450ms -webkit-transform;\n          font-size: 0;\n          white-space: nowrap;\n          margin: 25px 0 55px !important;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          height: 100%;\n\n          margin: 0 12px;\n          font-size: 20px;\n          cursor: pointer;\n          transition: 450ms all;\n          -webkit-transform-origin: center left;\n          transform-origin: center left;\n        }\n        #vid-slider .tile:first-child {\n          margin-left: 15px;\n        }\n        #vid-slider .tile__img {\n          height: 135px;\n\n          -o-object-fit: cover;\n          object-fit: cover;\n          object-position: center;\n        }\n        #vid-slider .tile__details {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          top: 0;\n          font-size: 10px;\n          opacity: 0;\n          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n          transition: 450ms opacity;\n        }\n        #vid-slider .tile__details:after,\n        #vid-slider .tile__details:before {\n          content: \'\';\n\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          display: #000;\n        }\n        #vid-slider .tile__details:after {\n          margin-top: -25px;\n          margin-left: -25px;\n          width: 50px;\n          height: 50px;\n          border: 3px solid #ecf0f1;\n          line-height: 50px;\n          text-align: center;\n          border-radius: 100%;\n          background: rgba(0, 0, 0, 0.5);\n          z-index: 1;\n        }\n        #vid-slider .tile__details:before {\n          content: \'\';\n          background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n            no-repeat center center;\n          left: 0;\n          width: 100%;\n          height: 3rem;\n          font-size: 30px;\n          margin-right: 12px;\n          margin-top: -24px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n\n        #vid-slider .tile__title {\n          position: absolute;\n          bottom: 0;\n          padding: 10px;\n          max-width: 250px;\n        }\n        #vid-slider .tile__title_text {\n          position: relative;\n          left: 0;\n          white-space: normal;\n        }\n\n        #vid-slider .tile__slider-prev,\n        #vid-slider .tile__slider-next {\n          width: 30px;\n          background: transparent;\n          border: none;\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 99;\n          cursor: pointer;\n          color: ' + (props.dark ? 'white' : 'black') + ';\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 2rem;\n        }\n        #vid-slider .tile__slider-prev {\n          left: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider .tile__slider-next {\n          right: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding-right: 0 1.2rem;\n        }\n\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ' + (props.dark ? 'white' : 'black') + ';\n          border-width: 0 4px 4px 0;\n          display: inline-block;\n          padding: 4px;\n          pointer-events: none;\n        }\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n        @media screen and (max-width: 1399px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 620px;\n          }\n          #vid-slider .tile__img {\n            height: 155px;\n          }\n        }\n        @media screen and (max-width: 1200px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 580px;\n          }\n        }\n        @media screen and (max-width: 967px) {\n          #vid-slider {\n            max-width: 100%;\n          }\n          #vid-slider .tile__img {\n            height: 175px;\n          }\n        }\n\n        @media screen and (max-width: 768px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n\n          #vid-slider .tile__img {\n            height: 118px;\n          }\n          #vid-slider .row__inner {\n            margin: 30px 0 60px;\n          }\n        }\n\n        @media screen and (max-width: 568px) {\n          #vid-slider .tile__img {\n            height: 180px;\n          }\n        }\n      '
+    )
+  );
+};
 
-module.exports = YoutubeGroup.YoutubeGroup;
+module.exports = YoutubeGroup;

package/dist/cjs/index.js

@@ -6,13 +6,12 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
 var _toObject = require('./_to-object-329a650b.js');
-require('./web.dom.iterable-0998bdc3.js');
+require('./web.dom.iterable-8b02d65e.js');
 var debounce = require('./debounce-528ad412.js');
-var main = require('./main-753fb093.js');
-var toConsumableArray = require('./toConsumableArray-18281c61.js');
-require('./core.get-iterator-method-e049ca4a.js');
+var main = require('./main-987c23c6.js');
+var toConsumableArray = require('./toConsumableArray-34b5e9a7.js');
 var _extends$2 = require('./extends-e94dbea5.js');
-var inherits$2 = require('./inherits-be59e8ae.js');
+var inherits$2 = require('./inherits-37d5840f.js');
 var React = require('react');
 var React__default = _interopDefault(React);
 var PropTypes = _interopDefault(require('prop-types'));
@@ -28,20 +27,21 @@ require('react-dom');
 var index = require('./index-b5eb3ff8.js');
 require('./index-fa0fb52c.js');
 var entities = require('./entities-310b46ee.js');
-var slicedToArray = require('./slicedToArray-bed4d943.js');
-var AdSlot = require('./AdSlot-fef815e9.js');
-require('./promise-e50b2d19.js');
-require('./ADInfeed-a7a5e9f3.js');
+var slicedToArray = require('./slicedToArray-879ab2fb.js');
+var AdSlot = require('./AdSlot-c5bff604.js');
+require('./promise-3b44b2a3.js');
+require('./ADInfeed-b042a194.js');
 var DeckContent = require('./DeckContent.js');
 var get$1 = require('./get-3b23d857.js');
-var GridContent = require('./GridContent-98e9ab78.js');
+var GridContent = require('./GridContent-139bbe70.js');
 var DeckQueue = require('./DeckQueue.js');
 require('react-bootstrap/Media');
 var ThumbnailCard = require('./ThumbnailCard.js');
-var TaxonomyCard = require('./TaxonomyCard-22b72261.js');
+var TaxonomyCard = require('./TaxonomyCard-d8eed035.js');
 require('./react-social-icons-cd0d9d3b.js');
+var smoothscroll = require('./smoothscroll-95231a70.js');
 var GroupDeck = require('./GroupDeck.js');
-var YoutubeGroup = require('./YoutubeGroup-24ec8af9.js');
+var YoutubeGroup = require('./YoutubeGroup.js');
 var reactBootstrap = require('react-bootstrap');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 var index_esm = require('./index.esm-340d3792.js');
@@ -53,7 +53,7 @@ var IssueDeck = require('./IssueDeck.js');
 require('react-bootstrap/Badge');
 var IssueContentDeck = require('./IssueContentDeck.js');
 var Spinner = _interopDefault(require('react-bootstrap/Spinner'));
-var TemplateNormal = require('./Normal-972b1cc8.js');
+var TemplateNormal = require('./Normal-e7423a52.js');
 require('react-bootstrap/ListGroup');
 var Head = _interopDefault(require('next/head'));
 var Accordion = _interopDefault(require('react-bootstrap/Accordion'));
@@ -70,7 +70,7 @@ var Carousel = _interopDefault(require('react-bootstrap/Carousel'));
 var Breadcrumb = _interopDefault(require('react-bootstrap/Breadcrumb'));
 var DropdownButton = _interopDefault(require('react-bootstrap/DropdownButton'));
 var Dropdown = _interopDefault(require('react-bootstrap/Dropdown'));
-var Ustream = require('./Ustream-3a3c56b8.js');
+var Ustream = require('./Ustream-f5f53782.js');
 var useSWR = _interopDefault(require('swr'));
 var Local = _interopDefault(require('passport-local'));
 var mysql = _interopDefault(require('mysql'));
@@ -5646,7 +5646,7 @@ YouTube.defaultProps = {
 var YouTubePlayer = function YouTubePlayer(_ref) {
   var url = _ref.url;
 
-  var id = YoutubeGroup.getYoutubeId(url);
+  var id = smoothscroll.getYoutubeId(url);
 
   var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
@@ -13027,7 +13027,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
         if (vid.thumbnail && vid.thumbnail.asset) {
           data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset), url: vid.url });
         } else {
-          data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + YoutubeGroup.getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
+          data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + smoothscroll.getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
         }
       }
     });
@@ -13134,7 +13134,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     //Small pause before starting next video
     setTimeout(function () {
       //Youtube API to start video playing automatically
-      var id = YoutubeGroup.getYoutubeId(nodes.videos['' + nextVid].url);
+      var id = smoothscroll.getYoutubeId(nodes.videos['' + nextVid].url);
       e.target.loadVideoById(id);
       toggleSeries();
     }, 1000);
@@ -13194,7 +13194,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     React__default.createElement(
       'div',
       { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
-      vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: YoutubeGroup.getYoutubeId(vidUrl), opts: opts, onReady: handleOnReady, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: function onEnd(e) {
+      vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: smoothscroll.getYoutubeId(vidUrl), opts: opts, onReady: handleOnReady, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: function onEnd(e) {
           return handleOnEnd(e);
         } }) : React__default.createElement(VideoMp4, { url: vidUrl, vidLoaded: vidLoaded }),
       React__default.createElement(
@@ -13618,7 +13618,7 @@ var NativeAd = function NativeAd(props) {
 };
 
 var Figure = dynamic(function () {
-  return Promise.resolve().then(function () { return require('./Figure-36e6957e.js'); });
+  return Promise.resolve().then(function () { return require('./Figure-a47ec3a7.js'); });
 }, { ssr: false });
 
 var checkUrlIsExternal = function checkUrlIsExternal(url) {
@@ -16400,7 +16400,39 @@ var Article = function Article(props) {
                 { key: index },
                 renderAuthor(authorDetail.displayName, authorDetail.url, index, authorDetails.length)
               );
-            })
+            }),
+            issue && React__default.createElement(
+              'div',
+              null,
+              React__default.createElement(
+                'div',
+                null,
+                issue.articleSource && React__default.createElement(
+                  'p',
+                  null,
+                  'Source: ' + issue.articleSource
+                )
+              ),
+              React__default.createElement(
+                'div',
+                { className: 'volume-issue' },
+                React__default.createElement(
+                  'p',
+                  null,
+                  issue.issueNumber && React__default.createElement(
+                    'span',
+                    null,
+                    'Issue ' + issue.issueNumber,
+                    ','
+                  ),
+                  issue.volume && React__default.createElement(
+                    'span',
+                    null,
+                    'Volume ' + issue.volume
+                  )
+                )
+              )
+            )
           ),
           React__default.createElement(
             'p',
@@ -20770,7 +20802,7 @@ exports.DeckQueue = DeckQueue;
 exports.ThumbnailCard = ThumbnailCard;
 exports.TaxonomyCard = TaxonomyCard.TaxonomyCard;
 exports.GroupDeck = GroupDeck;
-exports.YoutubeGroup = YoutubeGroup.YoutubeGroup;
+exports.YoutubeGroup = YoutubeGroup;
 exports.QueueDeckExpanded = QueueDeckExpanded;
 exports.VideoSeriesListing = VideoSeriesListing;
 exports.MasterDeck = MasterDeck;

package/dist/cjs/{inherits-be59e8ae.js → inherits-37d5840f.js}

@@ -2,7 +2,7 @@
 
 var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
 var _toObject = require('./_to-object-329a650b.js');
-var web_dom_iterable = require('./web.dom.iterable-0998bdc3.js');
+var web_dom_iterable = require('./web.dom.iterable-8b02d65e.js');
 var debounce = require('./debounce-528ad412.js');
 var _extends$2 = require('./extends-e94dbea5.js');
 

package/dist/cjs/{main-753fb093.js → main-987c23c6.js}

@@ -4,7 +4,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
 var _toObject = require('./_to-object-329a650b.js');
-var web_dom_iterable = require('./web.dom.iterable-0998bdc3.js');
+var web_dom_iterable = require('./web.dom.iterable-8b02d65e.js');
 var React = require('react');
 var React__default = _interopDefault(React);
 

package/dist/cjs/{promise-e50b2d19.js → promise-3b44b2a3.js}

@@ -2,10 +2,9 @@
 
 var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
 var _toObject = require('./_to-object-329a650b.js');
-var web_dom_iterable = require('./web.dom.iterable-0998bdc3.js');
+var web_dom_iterable = require('./web.dom.iterable-8b02d65e.js');
 var debounce = require('./debounce-528ad412.js');
-var main = require('./main-753fb093.js');
-var core_getIteratorMethod = require('./core.get-iterator-method-e049ca4a.js');
+var main = require('./main-987c23c6.js');
 
 var _anInstance = function (it, Constructor, name, forbiddenField) {
   if (!(it instanceof Constructor) || (forbiddenField !== undefined && forbiddenField in it)) {
@@ -17,7 +16,7 @@ var _forOf = _commonjsHelpers.createCommonjsModule(function (module) {
 var BREAK = {};
 var RETURN = {};
 var exports = module.exports = function (iterable, entries, fn, that, ITERATOR) {
-  var iterFn = ITERATOR ? function () { return iterable; } : core_getIteratorMethod.core_getIteratorMethod(iterable);
+  var iterFn = ITERATOR ? function () { return iterable; } : web_dom_iterable.core_getIteratorMethod(iterable);
   var f = _toObject._ctx(fn, that, entries ? 2 : 1);
   var index = 0;
   var length, step, iterator, result;
@@ -283,7 +282,7 @@ var process$2 = _toObject._global.process;
 var versions = process$2 && process$2.versions;
 var v8 = versions && versions.v8 || '';
 var $Promise = _toObject._global[PROMISE];
-var isNode$1 = core_getIteratorMethod._classof(process$2) == 'process';
+var isNode$1 = web_dom_iterable._classof(process$2) == 'process';
 var empty = function () { /* empty */ };
 var Internal, newGenericPromiseCapability, OwnPromiseCapability, Wrapper;
 var newPromiseCapability = newGenericPromiseCapability = _newPromiseCapability.f;

package/dist/cjs/{slicedToArray-bed4d943.js → slicedToArray-879ab2fb.js}

@@ -2,8 +2,7 @@
 
 var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
 var _toObject = require('./_to-object-329a650b.js');
-var web_dom_iterable = require('./web.dom.iterable-0998bdc3.js');
-var core_getIteratorMethod = require('./core.get-iterator-method-e049ca4a.js');
+var web_dom_iterable = require('./web.dom.iterable-8b02d65e.js');
 
 var ITERATOR = web_dom_iterable._wks('iterator');
 
@@ -12,7 +11,7 @@ var core_isIterable = _toObject._core.isIterable = function (it) {
   return O[ITERATOR] !== undefined
     || '@@iterator' in O
     // eslint-disable-next-line no-prototype-builtins
-    || web_dom_iterable._iterators.hasOwnProperty(core_getIteratorMethod._classof(O));
+    || web_dom_iterable._iterators.hasOwnProperty(web_dom_iterable._classof(O));
 };
 
 var isIterable = core_isIterable;
@@ -24,7 +23,7 @@ module.exports = { "default": isIterable, __esModule: true };
 _commonjsHelpers.unwrapExports(isIterable$1);
 
 var core_getIterator = _toObject._core.getIterator = function (it) {
-  var iterFn = core_getIteratorMethod.core_getIteratorMethod(it);
+  var iterFn = web_dom_iterable.core_getIteratorMethod(it);
   if (typeof iterFn != 'function') throw TypeError(it + ' is not iterable!');
   return _toObject._anObject(iterFn.call(it));
 };