@mjhls/mjh-framework 1.0.1005-next12-0001 → 1.0.1005-next12-0003

package/dist/cjs/GridHero-80338231.js

@@ -0,0 +1 @@
+"use strict";var e=require("react"),t=require("moment"),n=require("./urlFor-ca017581.js"),a=require("./entities-6106638a.js"),r=require("react-lazyload"),i=require("./AuthorComponent-91032070.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=l(e),o=l(t),c=l(r),d=function(e){var t=e.dataRecord[0],r=e.dataRecord.slice(1,3),l=e.client,d=e.topWidth,u=void 0===d?600:d,s=e.subWidth,g=void 0===s?480:s,h=e.subHeight,p=void 0===h?270:h,b="",f=t.title;return t.thumbnail&&t.thumbnail.asset?(b=n.urlFor({client:l,source:t.thumbnail.asset,imageWidth:u}),f=t.thumbnail.asset.originalFileName):e.thumbnail&&(b=e.thumbnail),m.default.createElement("div",{className:"article-hero"},m.default.createElement("div",{className:"grid-top-article"},b&&m.default.createElement("a",{href:"/view/".concat(t.url.current)},m.default.createElement("div",{className:"grid-top-article--img"},m.default.createElement("img",{src:b,alt:f}))),m.default.createElement("div",{className:"grid-top-article--body"},m.default.createElement("a",{href:"/view/".concat(t.url.current)},m.default.createElement("h1",null,t.title)),m.default.createElement("p",{className:"article-date"},o.default(t.published).format("MMMM DD, YYYY ")),t.authorMapping&&t.authorMapping.length>0&&m.default.createElement(c.default,{height:50},m.default.createElement(i.AuthorComponent,{key:t.url.current,index:t.url.current,authors:t.authorMapping})),t.summary&&m.default.createElement("p",{className:"top-article-summary"},a.clean_html_1(t.summary)))),m.default.createElement("div",{className:"grid-sub-article-container"},r.map((function(t,r){var d="",u=t.title;return t.thumbnail&&t.thumbnail.asset?(d=n.urlFor({client:l,source:t.thumbnail.asset,imageWidth:g,imageHeight:p}),u=t.thumbnail.asset.originalFileName):e.thumbnail&&(d=e.thumbnail),m.default.createElement("div",{key:r,className:"grid-sub-article sub-grid-".concat(r+1)},d&&m.default.createElement("a",{href:"/view/".concat(t.url.current)},m.default.createElement("img",{src:d,alt:u})),m.default.createElement("div",{className:"grid-sub-article-body"},m.default.createElement("a",{href:"/view/".concat(t.url.current)},m.default.createElement("h2",{className:"grid-sub-article--title"},t.title)),m.default.createElement("p",{className:"article-date"},o.default(t.published).format("MMMM DD, YYYY ")),t.authorMapping&&t.authorMapping.length>0&&m.default.createElement(c.default,{height:50},m.default.createElement(i.AuthorComponent,{key:r.toString(),index:r,authors:t.authorMapping})),t.summary&&m.default.createElement("p",{className:"sub-article-summary"},a.clean_html_1(t.summary))))}))),m.default.createElement("style",{jsx:"true"},"\n        .article-hero {\n          margin-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n          padding-bottom: 0.5rem;\n          margin-left: 15px;\n          margin-right: 15px;\n        }\n        .grid-top-article {\n          width: 100%;\n          margin-bottom: 1rem;\n          padding-bottom: 1rem;\n          border-bottom: 5px solid var(--primary);\n          box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2);\n        }\n        .grid-top-article img {\n          width: 100%;\n\n          max-height: 300px;\n          min-height: 275px;\n          object-fit: cover;\n          height: 112.5px;\n        }\n\n        .grid-top-article--body {\n          padding: 1.25rem;\n        }\n        .grid-top-article--body h1 {\n          color: #373a3c !important;\n          margin-bottom: 0.25rem !important;\n          font-weight: 600 !important;\n          font-size: 1.6rem;\n          font-size: 1.40625rem;\n          line-height: 1.2;\n        }\n        .grid-top-article--body p {\n          margin-bottom: 0;\n          color: #252525;\n        }\n\n        .grid-sub-article-container {\n          display: flex;\n          flex-direction: row;\n          padding-top: 1rem;\n        }\n        .grid-sub-article {\n          width: 48%;\n          margin-bottom: 1.75rem;\n        }\n        .grid-sub-article-body {\n          padding: 1.25rem;\n        }\n        @media screen and (min-width: 992px) {\n          .sub-grid-1 {\n            margin-right: 2%;\n          }\n          .sub-grid-2 {\n            margin-left: 2%;\n          }\n        }\n        .grid-sub-article img {\n          margin-right: 1rem;\n          width: 100%;\n          max-height: 240px;\n          object-fit: contain;\n        }\n        .grid-sub-article p {\n          margin-bottom: 0;\n\n          color: #373a3c;\n        }\n        .grid-sub-article .grid-sub-article--title {\n          color: #373a3c !important;\n          margin-bottom: 0.25rem !important;\n          font-weight: 600 !important;\n          font-size: 1.6rem;\n          font-size: 1.40625rem;\n          line-height: 1.2;\n        }\n        .author-text {\n          font-size: 0.9375rem;\n          font-weight: 400;\n          line-height: 1.5;\n        }\n        .author-text > span {\n          color: #868e96 !important;\n        }\n        .article-date {\n          font-style: italic;\n        }\n        .top-article-summary,\n        .sub-article-summary {\n          margin-top: 0.5rem;\n        }\n\n        @media screen and (max-width: 992px) {\n          .grid-sub-article-container {\n            flex-direction: column;\n          }\n          .grid-sub-article {\n            width: 100%;\n          }\n        }\n      "))},u=Object.freeze({__proto__:null,default:d});exports.GridHero=u,exports.GridHero$1=d;

package/dist/cjs/GridHero.js

@@ -1,147 +1 @@
-'use strict';
-
-require('./_commonjsHelpers-06173234.js');
-require('./core.get-iterator-method-f3c44602.js');
-require('./web.dom.iterable-e34bf324.js');
-var React = require('react');
-require('prop-types');
-var moment = require('./moment-ca3bd9fb.js');
-require('react-dom');
-require('./slicedToArray-f6d4eaa8.js');
-require('./index-b5eb3ff8.js');
-var urlFor = require('./urlFor.js');
-var index = require('./index-9d365128.js');
-var entities = require('./entities-310b46ee.js');
-var AuthorComponent = require('./AuthorComponent-17e1c62b.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var GridHero = function GridHero(props) {
-  var topArticle = props.dataRecord[0];
-  var subArticles = props.dataRecord.slice(1, 3);
-
-  var client = props.client,
-      _props$topWidth = props.topWidth,
-      topWidth = _props$topWidth === undefined ? 600 : _props$topWidth,
-      _props$subWidth = props.subWidth,
-      subWidth = _props$subWidth === undefined ? 480 : _props$subWidth,
-      _props$subHeight = props.subHeight,
-      subHeight = _props$subHeight === undefined ? 270 : _props$subHeight;
-
-
-  var topArticleThumbnail = '';
-  var topArticleAltText = topArticle.title;
-  if (topArticle.thumbnail && topArticle.thumbnail.asset) {
-    topArticleThumbnail = urlFor({ client: client, source: topArticle.thumbnail.asset, imageWidth: topWidth });
-    topArticleAltText = topArticle.thumbnail.asset.originalFileName;
-  } else if (props.thumbnail) {
-    topArticleThumbnail = props.thumbnail;
-  }
-
-  return React__default['default'].createElement(
-    'div',
-    { className: 'article-hero' },
-    React__default['default'].createElement(
-      'div',
-      { className: 'grid-top-article' },
-      topArticleThumbnail && React__default['default'].createElement(
-        'a',
-        { href: '/view/' + topArticle.url.current },
-        React__default['default'].createElement(
-          'div',
-          { className: 'grid-top-article--img' },
-          React__default['default'].createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
-        )
-      ),
-      React__default['default'].createElement(
-        'div',
-        { className: 'grid-top-article--body' },
-        React__default['default'].createElement(
-          'a',
-          { href: '/view/' + topArticle.url.current },
-          React__default['default'].createElement(
-            'h1',
-            null,
-            topArticle.title
-          )
-        ),
-        React__default['default'].createElement(
-          'p',
-          { className: 'article-date' },
-          moment.moment(topArticle.published).format('MMMM DD, YYYY ')
-        ),
-        topArticle.authorMapping && topArticle.authorMapping.length > 0 && React__default['default'].createElement(
-          index.LazyLoad,
-          { height: 50 },
-          React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: topArticle.url.current, index: topArticle.url.current, authors: topArticle.authorMapping })
-        ),
-        topArticle.summary && React__default['default'].createElement(
-          'p',
-          { className: 'top-article-summary' },
-          entities.clean_html_1(topArticle.summary)
-        )
-      )
-    ),
-    React__default['default'].createElement(
-      'div',
-      { className: 'grid-sub-article-container' },
-      subArticles.map(function (article, index$1) {
-        var articleThumbnail = '';
-        var articleAltText = article.title;
-        if (article.thumbnail && article.thumbnail.asset) {
-          articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: subWidth, imageHeight: subHeight });
-          articleAltText = article.thumbnail.asset.originalFileName;
-        } else if (props.thumbnail) {
-          articleThumbnail = props.thumbnail;
-        }
-
-        return React__default['default'].createElement(
-          'div',
-          { key: index$1, className: 'grid-sub-article sub-grid-' + (index$1 + 1) },
-          articleThumbnail && React__default['default'].createElement(
-            'a',
-            { href: '/view/' + article.url.current },
-            React__default['default'].createElement('img', { src: articleThumbnail, alt: articleAltText })
-          ),
-          React__default['default'].createElement(
-            'div',
-            { className: 'grid-sub-article-body' },
-            React__default['default'].createElement(
-              'a',
-              { href: '/view/' + article.url.current },
-              React__default['default'].createElement(
-                'h2',
-                { className: 'grid-sub-article--title' },
-                article.title
-              )
-            ),
-            React__default['default'].createElement(
-              'p',
-              { className: 'article-date' },
-              moment.moment(article.published).format('MMMM DD, YYYY ')
-            ),
-            article.authorMapping && article.authorMapping.length > 0 && React__default['default'].createElement(
-              index.LazyLoad,
-              { height: 50 },
-              React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: article.authorMapping })
-            ),
-            article.summary && React__default['default'].createElement(
-              'p',
-              { className: 'sub-article-summary' },
-              entities.clean_html_1(article.summary)
-            )
-          )
-        );
-      })
-    ),
-    React__default['default'].createElement(
-      'style',
-      { jsx: 'true' },
-      '\n        .article-hero {\n          margin-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n          padding-bottom: 0.5rem;\n          margin-left: 15px;\n          margin-right: 15px;\n        }\n        .grid-top-article {\n          width: 100%;\n          margin-bottom: 1rem;\n          padding-bottom: 1rem;\n          border-bottom: 5px solid var(--primary);\n          box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2);\n        }\n        .grid-top-article img {\n          width: 100%;\n\n          max-height: 300px;\n          min-height: 275px;\n          object-fit: cover;\n          height: 112.5px;\n        }\n\n        .grid-top-article--body {\n          padding: 1.25rem;\n        }\n        .grid-top-article--body h1 {\n          color: #373a3c !important;\n          margin-bottom: 0.25rem !important;\n          font-weight: 600 !important;\n          font-size: 1.6rem;\n          font-size: 1.40625rem;\n          line-height: 1.2;\n        }\n        .grid-top-article--body p {\n          margin-bottom: 0;\n          color: #252525;\n        }\n\n        .grid-sub-article-container {\n          display: flex;\n          flex-direction: row;\n          padding-top: 1rem;\n        }\n        .grid-sub-article {\n          width: 48%;\n          margin-bottom: 1.75rem;\n        }\n        .grid-sub-article-body {\n          padding: 1.25rem;\n        }\n        @media screen and (min-width: 992px) {\n          .sub-grid-1 {\n            margin-right: 2%;\n          }\n          .sub-grid-2 {\n            margin-left: 2%;\n          }\n        }\n        .grid-sub-article img {\n          margin-right: 1rem;\n          width: 100%;\n          max-height: 240px;\n          object-fit: contain;\n        }\n        .grid-sub-article p {\n          margin-bottom: 0;\n\n          color: #373a3c;\n        }\n        .grid-sub-article .grid-sub-article--title {\n          color: #373a3c !important;\n          margin-bottom: 0.25rem !important;\n          font-weight: 600 !important;\n          font-size: 1.6rem;\n          font-size: 1.40625rem;\n          line-height: 1.2;\n        }\n        .author-text {\n          font-size: 0.9375rem;\n          font-weight: 400;\n          line-height: 1.5;\n        }\n        .author-text > span {\n          color: #868e96 !important;\n        }\n        .article-date {\n          font-style: italic;\n        }\n        .top-article-summary,\n        .sub-article-summary {\n          margin-top: 0.5rem;\n        }\n\n        @media screen and (max-width: 992px) {\n          .grid-sub-article-container {\n            flex-direction: column;\n          }\n          .grid-sub-article {\n            width: 100%;\n          }\n        }\n      '
-    )
-  );
-};
-
-module.exports = GridHero;
+"use strict";require("react"),require("moment"),require("./urlFor-ca017581.js"),require("./entities-6106638a.js"),require("react-lazyload"),require("./AuthorComponent-91032070.js");var r=require("./GridHero-80338231.js");require("./slicedToArray-e6d9072a.js"),require("./unsupportedIterableToArray-a6f9513d.js"),require("@sanity/image-url"),require("striptags"),require("./_commonjsHelpers-0a7b82d9.js"),module.exports=r.GridHero$1;

package/dist/cjs/GroupDeck-f3b67f3d.js

@@ -0,0 +1 @@
+"use strict";var e=require("./typeof-5f2c4427.js"),n=require("./slicedToArray-e6d9072a.js"),t=require("react"),i=require("get-youtube-id"),r=require("smoothscroll-polyfill"),l=require("./urlFor-ca017581.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=a(t),o=a(i),s=a(r),c=function(i){var r=t.useRef(null),a=t.useRef(null),c=t.useRef(null),m=t.useState(0),u=n.slicedToArray(m,2),f=u[0],p=u[1],v=t.useState(!1),h=n.slicedToArray(v,2),w=h[0],b=h[1],g=t.useState(0),x=n.slicedToArray(g,2),_=x[0],y=x[1];t.useEffect((function(){return s.default.polyfill(),E(),window.addEventListener("resize",E),function(){return window.removeEventListener("resize",E)}}),[]);var E=function(){var e,n=!1;if(window.innerWidth>1399&&(e=Math.floor(c.current.clientWidth/3-40),i.dataset.length>3&&(n=!0)),window.innerWidth<1399&&window.innerWidth>592&&(e=Math.floor(c.current.clientWidth/2-48),i.dataset.length>2&&(n=!0)),window.innerWidth<592&&(e=Math.floor(c.current.clientWidth/1-64),i.dataset.length>1&&(n=!0)),e!==f){p(e),y(0),b(n);for(var t=document.querySelectorAll("#vid-slider .row"),r=0;r<t.length;r++)t[r].scrollTo({left:0,behavior:"smooth"})}};!i.get2||"/".concat(i.get2,"/");var k=i.dark?"white":"#383838";function N(e,n){var t,i=e.target.parentElement,l=_,d=i.clientWidth,o=Math.floor(a.current.clientWidth+25);"next"===n&&(t=l+o,l+d+25>=r.current.offsetWidth&&(t=0)),"prev"===n&&(t=l-o,0===l&&(window.innerWidth>1399&&(t=r.current.offsetWidth-3*f-70),window.innerWidth<1399&&window.innerWidth>592&&(t=r.current.offsetWidth-2*f-40),window.innerWidth<592&&(t=r.current.offsetWidth-1*f-24))),i.scrollTo({left:t,behavior:"smooth"}),y(t)}var W=i.current,z=void 0===W?"":W,j=i.displayEpisodeNumber,q=void 0!==j&&j;return d.default.createElement("div",{ref:c,id:"vid-slider",className:"col"},d.default.createElement("div",{className:"row"},w&&w&&d.default.createElement("div",{onClick:function(e){return N(e,"prev")},className:"tile__slider-prev",style:{color:k}},d.default.createElement("i",{style:{border:"solid ".concat(k),borderWidth:"0 4px 4px 0"},className:"arrow left"})),w&&w&&d.default.createElement("div",{onClick:function(e){return N(e,"next")},className:"tile__slider-next",style:{color:k}},d.default.createElement("i",{style:{border:"solid ".concat(k),borderWidth:"0 4px 4px 0"},className:"arrow right"})),d.default.createElement("div",{ref:r,className:"row__inner"},i.dataset&&i.dataset.map((function(n,t){if(""!==z){var r,s=n.url;return r=n.thumbnail&&n.thumbnail.asset?l.urlFor({source:n.thumbnail,client:i.client}):e._typeof("string"==n.thumbnail)?n.thumbnail:"https://img.youtube.com/vi/".concat(o.default(n.url),"/hqdefault.jpg"),d.default.createElement("div",{ref:a,key:n.title,className:"tile",style:{width:"".concat(f,"px")}},z&&z===s?d.default.createElement("div",{className:"now-playing"},"Now Playing"):"",d.default.createElement("a",{onClick:function(){return function(e,n,t){i.setState(e,n,t)}(s,r,t+1)}},d.default.createElement("div",{className:"tile__media"},d.default.createElement("img",{className:"tile__img",src:r,style:{width:"".concat(f,"px")},alt:""})),d.default.createElement("div",{className:"tile__details"},d.default.createElement("div",{className:"tile__title"},d.default.createElement("div",{style:{color:k},className:"tile__title_text"},q?d.default.createElement("span",null,d.default.createElement("b",null,"EP. ",t+1,":")," ",n.title):n.title))),d.default.createElement("div",{style:{color:"#323232"},className:"tile__info"},q?d.default.createElement("span",null,d.default.createElement("b",null,"EP. ",t+1,":")," ",n.title):n.title)))}var c,m="".concat(n.link);return c=n.thumbnail&&n.thumbnail.asset?l.urlFor({source:n.thumbnail,client:i.client}):e._typeof("string"==n.thumbnail)?n.thumbnail:"https://img.youtube.com/vi/".concat(o.default(n.url),"/hqdefault.jpg"),d.default.createElement("div",{ref:a,key:t,className:"tile",style:{width:"".concat(f,"px")}},d.default.createElement("a",{href:m},d.default.createElement("div",{className:"tile__media"},d.default.createElement("img",{className:"tile__img",src:c,alt:"",style:{width:"".concat(f,"px")}})),d.default.createElement("div",{className:"tile__details"},d.default.createElement("div",{className:"tile__title"},d.default.createElement("div",{style:{color:"#323232"},className:"tile__title_text"},q?d.default.createElement("span",null,d.default.createElement("b",null,"EP. ",t+1,":")," ",n.title):n.title))),d.default.createElement("div",{style:{color:k},className:"tile__info"},q?d.default.createElement("span",null,d.default.createElement("b",null,"EP. ",t+1,":")," ",n.title):n.title)))})))),d.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: 0 !important;\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: ".concat(i.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 70px !important;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\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\n        #vid-slider .tile:first-child {\n          margin-left: 15px;\n        }\n        #vid-slider .tile__img {\n          height: auto;\n          -o-object-fit: contain;\n          object-fit: contain;\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: ").concat(i.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        }\n\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ").concat(i.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 (min-width: 1399px) {\n          .block-content #vid-slider .tile__img {\n            height: auto;\n          }\n          .block-content #vid-slider .tile {\n            height: auto;\n          }\n        }\n\n        @media screen and (max-width: 1399px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 620px;\n          }\n        }\n        @media screen and (max-width: 1200px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 580px;\n          }\n        }\n        @media screen and (max-width: 967px) {\n          #vid-slider {\n            max-width: 100%;\n          }\n\n          #vid-slider .row__inner {\n            margin: 60px 0 50px !important;\n          }\n        }\n\n        @media screen and (max-width: 768px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n        }\n        @media screen and (max-width: 568px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n\n          #vid-slider .row__inner {\n            margin: 30px 0 70px;\n          }\n        }\n      ")))},m=Object.freeze({__proto__:null,default:c});exports.GroupDeck=m,exports.GroupDeck$1=c;

package/dist/cjs/GroupDeck.js

@@ -1,314 +1 @@
-'use strict';
-
-require('./_commonjsHelpers-06173234.js');
-require('./core.get-iterator-method-f3c44602.js');
-require('./_library-dd23b178.js');
-require('./_object-pie-68c5bcbc.js');
-require('./web.dom.iterable-e34bf324.js');
-var _typeof = require('./typeof-ec08d471.js');
-require('./_is-array-aa52fa1e.js');
-var React = require('react');
-var slicedToArray = require('./slicedToArray-f6d4eaa8.js');
-require('./index-b5eb3ff8.js');
-var urlFor = require('./urlFor.js');
-var index = require('./index-187c967e.js');
-var smoothscroll = require('./smoothscroll-5054361f.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var GroupDeck = function GroupDeck(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];
-
-  var _useState3 = React.useState(false),
-      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      showScroller = _useState4[0],
-      setShowScroller = _useState4[1];
-
-  var _useState5 = React.useState(0),
-      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
-      scrollPosition = _useState6[0],
-      setScrollPosition = _useState6[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;
-    var scrollerVisible = false;
-    if (window.innerWidth > 1399) {
-      thumbSize = Math.floor(viewableWindow.current.clientWidth / 3 - 40);
-      if (props.dataset.length > 3) {
-        scrollerVisible = true;
-      }
-    }
-    if (window.innerWidth < 1399 && window.innerWidth > 592) {
-      thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 48);
-      if (props.dataset.length > 2) {
-        scrollerVisible = true;
-      }
-    }
-    if (window.innerWidth < 592) {
-      thumbSize = Math.floor(viewableWindow.current.clientWidth / 1 - 64);
-      if (props.dataset.length > 1) {
-        scrollerVisible = true;
-      }
-    }
-    if (thumbSize !== tileSize) {
-      setTileSize(thumbSize);
-      setScrollPosition(0);
-      setShowScroller(scrollerVisible);
-      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 = scrollPosition;
-    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'
-    });
-    setScrollPosition(scrollDirection);
-  }
-
-  function handleClick(url, thumbnail, vidIndex) {
-    props.setState(url, thumbnail, vidIndex);
-  }
-
-  var _props$current = props.current,
-      current = _props$current === undefined ? '' : _props$current,
-      _props$displayEpisode = props.displayEpisodeNumber,
-      displayEpisodeNumber = _props$displayEpisode === undefined ? false : _props$displayEpisode;
-
-
-  return React__default['default'].createElement(
-    'div',
-    { ref: viewableWindow, id: 'vid-slider', className: 'col' },
-    React__default['default'].createElement(
-      'div',
-      { className: 'row' },
-      showScroller && showScroller && React__default['default'].createElement(
-        'div',
-        { onClick: function onClick(e) {
-            return scrollSlider(e, 'prev');
-          }, className: 'tile__slider-prev', style: { color: variant } },
-        React__default['default'].createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
-      ),
-      showScroller && showScroller && React__default['default'].createElement(
-        'div',
-        { onClick: function onClick(e) {
-            return scrollSlider(e, 'next');
-          }, className: 'tile__slider-next', style: { color: variant } },
-        React__default['default'].createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
-      ),
-      React__default['default'].createElement(
-        'div',
-        { ref: innerSlider, className: 'row__inner' },
-        props.dataset && props.dataset.map(function (video, index$1) {
-          // If there is a current prop, means this will overlay a currently playing video
-          if (current !== '') {
-            var url = video.url;
-            var thumbnail = void 0;
-
-            if (video.thumbnail && video.thumbnail.asset) {
-              thumbnail = urlFor({ source: video.thumbnail, client: props.client });
-            } else if (_typeof._typeof(video.thumbnail == 'string')) {
-              thumbnail = video.thumbnail;
-            } else {
-              thumbnail = 'https://img.youtube.com/vi/' + index.getYoutubeId(video.url) + '/hqdefault.jpg';
-            }
-
-            return React__default['default'].createElement(
-              'div',
-              { ref: tile, key: video.title, className: 'tile', style: { width: tileSize + 'px' } },
-              current && current === url ? React__default['default'].createElement(
-                'div',
-                { className: 'now-playing' },
-                'Now Playing'
-              ) : '',
-              React__default['default'].createElement(
-                'a',
-                { onClick: function onClick() {
-                    return handleClick(url, thumbnail, index$1 + 1);
-                  } },
-                React__default['default'].createElement(
-                  'div',
-                  { className: 'tile__media' },
-                  React__default['default'].createElement('img', { className: 'tile__img', src: thumbnail, style: { width: tileSize + 'px' }, alt: '' })
-                ),
-                React__default['default'].createElement(
-                  'div',
-                  { className: 'tile__details' },
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'tile__title' },
-                    React__default['default'].createElement(
-                      'div',
-                      { style: { color: variant }, className: 'tile__title_text' },
-                      displayEpisodeNumber ? React__default['default'].createElement(
-                        'span',
-                        null,
-                        React__default['default'].createElement(
-                          'b',
-                          null,
-                          'EP. ',
-                          index$1 + 1,
-                          ':'
-                        ),
-                        ' ',
-                        video.title
-                      ) : video.title
-                    )
-                  )
-                ),
-                React__default['default'].createElement(
-                  'div',
-                  { style: { color: '#323232' }, className: 'tile__info' },
-                  displayEpisodeNumber ? React__default['default'].createElement(
-                    'span',
-                    null,
-                    React__default['default'].createElement(
-                      'b',
-                      null,
-                      'EP. ',
-                      index$1 + 1,
-                      ':'
-                    ),
-                    ' ',
-                    video.title
-                  ) : video.title
-                )
-              )
-            );
-          } else {
-            // slider by itself
-            var _url = '' + video.link;
-            var _thumbnail = void 0;
-            if (video.thumbnail && video.thumbnail.asset) {
-              _thumbnail = urlFor({ source: video.thumbnail, client: props.client });
-            } else if (_typeof._typeof(video.thumbnail == 'string')) {
-              _thumbnail = video.thumbnail;
-            } else {
-              _thumbnail = 'https://img.youtube.com/vi/' + index.getYoutubeId(video.url) + '/hqdefault.jpg';
-            }
-            return React__default['default'].createElement(
-              'div',
-              { ref: tile, key: index$1, className: 'tile', style: { width: tileSize + 'px' } },
-              React__default['default'].createElement(
-                'a',
-                { href: _url },
-                React__default['default'].createElement(
-                  'div',
-                  { className: 'tile__media' },
-                  React__default['default'].createElement('img', { className: 'tile__img', src: _thumbnail, alt: '', style: { width: tileSize + 'px' } })
-                ),
-                React__default['default'].createElement(
-                  'div',
-                  { className: 'tile__details' },
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'tile__title' },
-                    React__default['default'].createElement(
-                      'div',
-                      { style: { color: '#323232' }, className: 'tile__title_text' },
-                      displayEpisodeNumber ? React__default['default'].createElement(
-                        'span',
-                        null,
-                        React__default['default'].createElement(
-                          'b',
-                          null,
-                          'EP. ',
-                          index$1 + 1,
-                          ':'
-                        ),
-                        ' ',
-                        video.title
-                      ) : video.title
-                    )
-                  )
-                ),
-                React__default['default'].createElement(
-                  'div',
-                  { style: { color: variant }, className: 'tile__info' },
-                  displayEpisodeNumber ? React__default['default'].createElement(
-                    'span',
-                    null,
-                    React__default['default'].createElement(
-                      'b',
-                      null,
-                      'EP. ',
-                      index$1 + 1,
-                      ':'
-                    ),
-                    ' ',
-                    video.title
-                  ) : video.title
-                )
-              )
-            );
-          }
-        })
-      )
-    ),
-    React__default['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: 0 !important;\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 70px !important;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\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\n        #vid-slider .tile:first-child {\n          margin-left: 15px;\n        }\n        #vid-slider .tile__img {\n          height: auto;\n          -o-object-fit: contain;\n          object-fit: contain;\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        }\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 (min-width: 1399px) {\n          .block-content #vid-slider .tile__img {\n            height: auto;\n          }\n          .block-content #vid-slider .tile {\n            height: auto;\n          }\n        }\n\n        @media screen and (max-width: 1399px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 620px;\n          }\n        }\n        @media screen and (max-width: 1200px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 580px;\n          }\n        }\n        @media screen and (max-width: 967px) {\n          #vid-slider {\n            max-width: 100%;\n          }\n\n          #vid-slider .row__inner {\n            margin: 60px 0 50px !important;\n          }\n        }\n\n        @media screen and (max-width: 768px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n        }\n        @media screen and (max-width: 568px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n\n          #vid-slider .row__inner {\n            margin: 30px 0 70px;\n          }\n        }\n      '
-    )
-  );
-};
-
-module.exports = GroupDeck;
+"use strict";require("./typeof-5f2c4427.js"),require("./slicedToArray-e6d9072a.js"),require("react"),require("get-youtube-id"),require("smoothscroll-polyfill"),require("./urlFor-ca017581.js");var r=require("./GroupDeck-f3b67f3d.js");require("./unsupportedIterableToArray-a6f9513d.js"),require("@sanity/image-url"),module.exports=r.GroupDeck$1;