@mjhls/mjh-framework 1.0.1005-next12 → 1.0.1005-next12-0002

package/dist/esm/GridHero-0d17636c.js

@@ -0,0 +1 @@
+import e from"react";import t from"moment";import{u as n}from"./urlFor-649884fa.js";import{c as r}from"./entities-8b138943.js";import a from"react-lazyload";import{A as i}from"./AuthorComponent-f3e14fdd.js";var m=function(m){var o=m.dataRecord[0],l=m.dataRecord.slice(1,3),c=m.client,s=m.topWidth,d=void 0===s?600:s,g=m.subWidth,u=void 0===g?480:g,h=m.subHeight,p=void 0===h?270:h,b="",f=o.title;return o.thumbnail&&o.thumbnail.asset?(b=n({client:c,source:o.thumbnail.asset,imageWidth:d}),f=o.thumbnail.asset.originalFileName):m.thumbnail&&(b=m.thumbnail),e.createElement("div",{className:"article-hero"},e.createElement("div",{className:"grid-top-article"},b&&e.createElement("a",{href:"/view/".concat(o.url.current)},e.createElement("div",{className:"grid-top-article--img"},e.createElement("img",{src:b,alt:f}))),e.createElement("div",{className:"grid-top-article--body"},e.createElement("a",{href:"/view/".concat(o.url.current)},e.createElement("h1",null,o.title)),e.createElement("p",{className:"article-date"},t(o.published).format("MMMM DD, YYYY ")),o.authorMapping&&o.authorMapping.length>0&&e.createElement(a,{height:50},e.createElement(i,{key:o.url.current,index:o.url.current,authors:o.authorMapping})),o.summary&&e.createElement("p",{className:"top-article-summary"},r(o.summary)))),e.createElement("div",{className:"grid-sub-article-container"},l.map((function(o,l){var s="",d=o.title;return o.thumbnail&&o.thumbnail.asset?(s=n({client:c,source:o.thumbnail.asset,imageWidth:u,imageHeight:p}),d=o.thumbnail.asset.originalFileName):m.thumbnail&&(s=m.thumbnail),e.createElement("div",{key:l,className:"grid-sub-article sub-grid-".concat(l+1)},s&&e.createElement("a",{href:"/view/".concat(o.url.current)},e.createElement("img",{src:s,alt:d})),e.createElement("div",{className:"grid-sub-article-body"},e.createElement("a",{href:"/view/".concat(o.url.current)},e.createElement("h2",{className:"grid-sub-article--title"},o.title)),e.createElement("p",{className:"article-date"},t(o.published).format("MMMM DD, YYYY ")),o.authorMapping&&o.authorMapping.length>0&&e.createElement(a,{height:50},e.createElement(i,{key:l.toString(),index:l,authors:o.authorMapping})),o.summary&&e.createElement("p",{className:"sub-article-summary"},r(o.summary))))}))),e.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      "))},o=Object.freeze({__proto__:null,default:m});export{o as G,m as a};

package/dist/esm/GridHero.js

@@ -1,141 +1 @@
-import './_commonjsHelpers-0c4b6f40.js';
-import './core.get-iterator-method-8c71f470.js';
-import './web.dom.iterable-406140e0.js';
-import React from 'react';
-import 'prop-types';
-import { m as moment } from './moment-b6f49411.js';
-import 'react-dom';
-import './slicedToArray-99bcfd93.js';
-import './index-51a80699.js';
-import urlFor from './urlFor.js';
-import { L as LazyLoad } from './index-6c12bdd5.js';
-import { c as clean_html_1 } from './entities-7cc3bf45.js';
-import { A as AuthorComponent } from './AuthorComponent-b0a47123.js';
-
-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.createElement(
-    'div',
-    { className: 'article-hero' },
-    React.createElement(
-      'div',
-      { className: 'grid-top-article' },
-      topArticleThumbnail && React.createElement(
-        'a',
-        { href: '/view/' + topArticle.url.current },
-        React.createElement(
-          'div',
-          { className: 'grid-top-article--img' },
-          React.createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
-        )
-      ),
-      React.createElement(
-        'div',
-        { className: 'grid-top-article--body' },
-        React.createElement(
-          'a',
-          { href: '/view/' + topArticle.url.current },
-          React.createElement(
-            'h1',
-            null,
-            topArticle.title
-          )
-        ),
-        React.createElement(
-          'p',
-          { className: 'article-date' },
-          moment(topArticle.published).format('MMMM DD, YYYY ')
-        ),
-        topArticle.authorMapping && topArticle.authorMapping.length > 0 && React.createElement(
-          LazyLoad,
-          { height: 50 },
-          React.createElement(AuthorComponent, { key: topArticle.url.current, index: topArticle.url.current, authors: topArticle.authorMapping })
-        ),
-        topArticle.summary && React.createElement(
-          'p',
-          { className: 'top-article-summary' },
-          clean_html_1(topArticle.summary)
-        )
-      )
-    ),
-    React.createElement(
-      'div',
-      { className: 'grid-sub-article-container' },
-      subArticles.map(function (article, index) {
-        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.createElement(
-          'div',
-          { key: index, className: 'grid-sub-article sub-grid-' + (index + 1) },
-          articleThumbnail && React.createElement(
-            'a',
-            { href: '/view/' + article.url.current },
-            React.createElement('img', { src: articleThumbnail, alt: articleAltText })
-          ),
-          React.createElement(
-            'div',
-            { className: 'grid-sub-article-body' },
-            React.createElement(
-              'a',
-              { href: '/view/' + article.url.current },
-              React.createElement(
-                'h2',
-                { className: 'grid-sub-article--title' },
-                article.title
-              )
-            ),
-            React.createElement(
-              'p',
-              { className: 'article-date' },
-              moment(article.published).format('MMMM DD, YYYY ')
-            ),
-            article.authorMapping && article.authorMapping.length > 0 && React.createElement(
-              LazyLoad,
-              { height: 50 },
-              React.createElement(AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
-            ),
-            article.summary && React.createElement(
-              'p',
-              { className: 'sub-article-summary' },
-              clean_html_1(article.summary)
-            )
-          )
-        );
-      })
-    ),
-    React.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      '
-    )
-  );
-};
-
-export default GridHero;
+import"react";import"moment";import"./urlFor-649884fa.js";import"./entities-8b138943.js";import"react-lazyload";import"./AuthorComponent-f3e14fdd.js";export{a as default}from"./GridHero-0d17636c.js";import"./slicedToArray-f57adb2c.js";import"./unsupportedIterableToArray-b359dd50.js";import"@sanity/image-url";import"striptags";import"./_commonjsHelpers-57e89916.js";

package/dist/esm/GroupDeck-4c581822.js

@@ -0,0 +1 @@
+import{_ as n}from"./typeof-92b42de1.js";import{_ as e}from"./slicedToArray-f57adb2c.js";import t,{useRef as i,useState as r,useEffect as l}from"react";import a from"get-youtube-id";import o from"smoothscroll-polyfill";import{u as d}from"./urlFor-649884fa.js";var s=function(s){var c=i(null),m=i(null),p=i(null),h=r(0),v=e(h,2),f=v[0],u=v[1],w=r(!1),b=e(w,2),g=b[0],x=b[1],_=r(0),y=e(_,2),E=y[0],k=y[1];l((function(){return o.polyfill(),N(),window.addEventListener("resize",N),function(){return window.removeEventListener("resize",N)}}),[]);var N=function(){var n,e=!1;if(window.innerWidth>1399&&(n=Math.floor(p.current.clientWidth/3-40),s.dataset.length>3&&(e=!0)),window.innerWidth<1399&&window.innerWidth>592&&(n=Math.floor(p.current.clientWidth/2-48),s.dataset.length>2&&(e=!0)),window.innerWidth<592&&(n=Math.floor(p.current.clientWidth/1-64),s.dataset.length>1&&(e=!0)),n!==f){u(n),k(0),x(e);for(var t=document.querySelectorAll("#vid-slider .row"),i=0;i<t.length;i++)t[i].scrollTo({left:0,behavior:"smooth"})}};!s.get2||"/".concat(s.get2,"/");var W=s.dark?"white":"#383838";function z(n,e){var t,i=n.target.parentElement,r=E,l=i.clientWidth,a=Math.floor(m.current.clientWidth+25);"next"===e&&(t=r+a,r+l+25>=c.current.offsetWidth&&(t=0)),"prev"===e&&(t=r-a,0===r&&(window.innerWidth>1399&&(t=c.current.offsetWidth-3*f-70),window.innerWidth<1399&&window.innerWidth>592&&(t=c.current.offsetWidth-2*f-40),window.innerWidth<592&&(t=c.current.offsetWidth-1*f-24))),i.scrollTo({left:t,behavior:"smooth"}),k(t)}var j=s.current,H=void 0===j?"":j,M=s.displayEpisodeNumber,P=void 0!==M&&M;return t.createElement("div",{ref:p,id:"vid-slider",className:"col"},t.createElement("div",{className:"row"},g&&g&&t.createElement("div",{onClick:function(n){return z(n,"prev")},className:"tile__slider-prev",style:{color:W}},t.createElement("i",{style:{border:"solid ".concat(W),borderWidth:"0 4px 4px 0"},className:"arrow left"})),g&&g&&t.createElement("div",{onClick:function(n){return z(n,"next")},className:"tile__slider-next",style:{color:W}},t.createElement("i",{style:{border:"solid ".concat(W),borderWidth:"0 4px 4px 0"},className:"arrow right"})),t.createElement("div",{ref:c,className:"row__inner"},s.dataset&&s.dataset.map((function(e,i){if(""!==H){var r,l=e.url;return r=e.thumbnail&&e.thumbnail.asset?d({source:e.thumbnail,client:s.client}):n("string"==e.thumbnail)?e.thumbnail:"https://img.youtube.com/vi/".concat(a(e.url),"/hqdefault.jpg"),t.createElement("div",{ref:m,key:e.title,className:"tile",style:{width:"".concat(f,"px")}},H&&H===l?t.createElement("div",{className:"now-playing"},"Now Playing"):"",t.createElement("a",{onClick:function(){return function(n,e,t){s.setState(n,e,t)}(l,r,i+1)}},t.createElement("div",{className:"tile__media"},t.createElement("img",{className:"tile__img",src:r,style:{width:"".concat(f,"px")},alt:""})),t.createElement("div",{className:"tile__details"},t.createElement("div",{className:"tile__title"},t.createElement("div",{style:{color:W},className:"tile__title_text"},P?t.createElement("span",null,t.createElement("b",null,"EP. ",i+1,":")," ",e.title):e.title))),t.createElement("div",{style:{color:"#323232"},className:"tile__info"},P?t.createElement("span",null,t.createElement("b",null,"EP. ",i+1,":")," ",e.title):e.title)))}var o,c="".concat(e.link);return o=e.thumbnail&&e.thumbnail.asset?d({source:e.thumbnail,client:s.client}):n("string"==e.thumbnail)?e.thumbnail:"https://img.youtube.com/vi/".concat(a(e.url),"/hqdefault.jpg"),t.createElement("div",{ref:m,key:i,className:"tile",style:{width:"".concat(f,"px")}},t.createElement("a",{href:c},t.createElement("div",{className:"tile__media"},t.createElement("img",{className:"tile__img",src:o,alt:"",style:{width:"".concat(f,"px")}})),t.createElement("div",{className:"tile__details"},t.createElement("div",{className:"tile__title"},t.createElement("div",{style:{color:"#323232"},className:"tile__title_text"},P?t.createElement("span",null,t.createElement("b",null,"EP. ",i+1,":")," ",e.title):e.title))),t.createElement("div",{style:{color:W},className:"tile__info"},P?t.createElement("span",null,t.createElement("b",null,"EP. ",i+1,":")," ",e.title):e.title)))})))),t.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(s.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(s.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(s.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      ")))},c=Object.freeze({__proto__:null,default:s});export{c as G,s as a};

package/dist/esm/GroupDeck.js

@@ -1,308 +1 @@
-import './_commonjsHelpers-0c4b6f40.js';
-import './core.get-iterator-method-8c71f470.js';
-import './_library-528f1934.js';
-import './_object-pie-33c40e79.js';
-import './web.dom.iterable-406140e0.js';
-import { _ as _typeof } from './typeof-d92ed6e0.js';
-import './_is-array-31d40a83.js';
-import React, { useRef, useState, useEffect } from 'react';
-import { _ as _slicedToArray } from './slicedToArray-99bcfd93.js';
-import './index-51a80699.js';
-import urlFor from './urlFor.js';
-import { g as getYoutubeId } from './index-c7e2ac95.js';
-import { s as smoothscroll } from './smoothscroll-0cd4c7a6.js';
-
-var GroupDeck = function GroupDeck(props) {
-  // Props should be an array of objects containing Thumbnail, title, and URL
-  var innerSlider = useRef(null);
-  var tile = useRef(null);
-  var viewableWindow = useRef(null);
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      tileSize = _useState2[0],
-      setTileSize = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showScroller = _useState4[0],
-      setShowScroller = _useState4[1];
-
-  var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      scrollPosition = _useState6[0],
-      setScrollPosition = _useState6[1];
-
-  useEffect(function () {
-    //IE11 Polyfill
-    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.createElement(
-    'div',
-    { ref: viewableWindow, id: 'vid-slider', className: 'col' },
-    React.createElement(
-      'div',
-      { className: 'row' },
-      showScroller && showScroller && React.createElement(
-        'div',
-        { onClick: function onClick(e) {
-            return scrollSlider(e, 'prev');
-          }, className: 'tile__slider-prev', style: { color: variant } },
-        React.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
-      ),
-      showScroller && showScroller && React.createElement(
-        'div',
-        { onClick: function onClick(e) {
-            return scrollSlider(e, 'next');
-          }, className: 'tile__slider-next', style: { color: variant } },
-        React.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
-      ),
-      React.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 = void 0;
-
-            if (video.thumbnail && video.thumbnail.asset) {
-              thumbnail = urlFor({ source: video.thumbnail, client: props.client });
-            } else if (_typeof(video.thumbnail == 'string')) {
-              thumbnail = video.thumbnail;
-            } else {
-              thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
-            }
-
-            return React.createElement(
-              'div',
-              { ref: tile, key: video.title, className: 'tile', style: { width: tileSize + 'px' } },
-              current && current === url ? React.createElement(
-                'div',
-                { className: 'now-playing' },
-                'Now Playing'
-              ) : '',
-              React.createElement(
-                'a',
-                { onClick: function onClick() {
-                    return handleClick(url, thumbnail, index + 1);
-                  } },
-                React.createElement(
-                  'div',
-                  { className: 'tile__media' },
-                  React.createElement('img', { className: 'tile__img', src: thumbnail, style: { width: tileSize + 'px' }, alt: '' })
-                ),
-                React.createElement(
-                  'div',
-                  { className: 'tile__details' },
-                  React.createElement(
-                    'div',
-                    { className: 'tile__title' },
-                    React.createElement(
-                      'div',
-                      { style: { color: variant }, className: 'tile__title_text' },
-                      displayEpisodeNumber ? React.createElement(
-                        'span',
-                        null,
-                        React.createElement(
-                          'b',
-                          null,
-                          'EP. ',
-                          index + 1,
-                          ':'
-                        ),
-                        ' ',
-                        video.title
-                      ) : video.title
-                    )
-                  )
-                ),
-                React.createElement(
-                  'div',
-                  { style: { color: '#323232' }, className: 'tile__info' },
-                  displayEpisodeNumber ? React.createElement(
-                    'span',
-                    null,
-                    React.createElement(
-                      'b',
-                      null,
-                      'EP. ',
-                      index + 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(video.thumbnail == 'string')) {
-              _thumbnail = video.thumbnail;
-            } else {
-              _thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
-            }
-            return React.createElement(
-              'div',
-              { ref: tile, key: index, className: 'tile', style: { width: tileSize + 'px' } },
-              React.createElement(
-                'a',
-                { href: _url },
-                React.createElement(
-                  'div',
-                  { className: 'tile__media' },
-                  React.createElement('img', { className: 'tile__img', src: _thumbnail, alt: '', style: { width: tileSize + 'px' } })
-                ),
-                React.createElement(
-                  'div',
-                  { className: 'tile__details' },
-                  React.createElement(
-                    'div',
-                    { className: 'tile__title' },
-                    React.createElement(
-                      'div',
-                      { style: { color: '#323232' }, className: 'tile__title_text' },
-                      displayEpisodeNumber ? React.createElement(
-                        'span',
-                        null,
-                        React.createElement(
-                          'b',
-                          null,
-                          'EP. ',
-                          index + 1,
-                          ':'
-                        ),
-                        ' ',
-                        video.title
-                      ) : video.title
-                    )
-                  )
-                ),
-                React.createElement(
-                  'div',
-                  { style: { color: variant }, className: 'tile__info' },
-                  displayEpisodeNumber ? React.createElement(
-                    'span',
-                    null,
-                    React.createElement(
-                      'b',
-                      null,
-                      'EP. ',
-                      index + 1,
-                      ':'
-                    ),
-                    ' ',
-                    video.title
-                  ) : video.title
-                )
-              )
-            );
-          }
-        })
-      )
-    ),
-    React.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      '
-    )
-  );
-};
-
-export default GroupDeck;
+import"./typeof-92b42de1.js";import"./slicedToArray-f57adb2c.js";import"react";import"get-youtube-id";import"smoothscroll-polyfill";import"./urlFor-649884fa.js";export{a as default}from"./GroupDeck-4c581822.js";import"./unsupportedIterableToArray-b359dd50.js";import"@sanity/image-url";