@mjhls/mjh-framework 1.0.72 → 1.0.73

package/README.md

@@ -1,4 +1,6 @@
-# mjh-framework v. 1.0.72
+
+# mjh-framework v. 1.0.73
+
 
 > Foundation Framework
 

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React__default, { Component, useState, forwardRef, createElement, createContext } from 'react';
+import React__default, { Component, useState, useEffect, forwardRef, createElement, createContext } from 'react';
 import PropTypes from 'prop-types';
 import reactDom from 'react-dom';
 import Container from 'react-bootstrap/Container';
@@ -5487,10 +5487,11 @@ GROQ query -
   "thumbnail":  thumbnail.asset->url,
 	"url": url.current
 }
-
 */
 var GroupDeck = function GroupDeck(props) {
   // Props should be an array of objects containing Thumbnail, title, and URL
+  var get2 = props.get2 ? '/' + props.get2 + '/' : '/view/';
+
   var variant = props.dark ? 'white' : '#383838';
   function scrollSlider(e, direction) {
     var slide = e.target.parentElement;
@@ -5508,6 +5509,12 @@ var GroupDeck = function GroupDeck(props) {
       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',
@@ -5533,16 +5540,23 @@ var GroupDeck = function GroupDeck(props) {
         'div',
         { className: 'row__inner' },
         props.dataset && props.dataset.map(function (video, index) {
-          var url = '/views/' + video.url;
-          return React__default.createElement(
-            'div',
-            { key: index, className: 'tile' },
-            React__default.createElement(
-              Link,
-              { href: url },
+          // If there is a current prop, means this will overlay a currently playing video
+          if (current !== '') {
+            var url = video.url;
+
+            return React__default.createElement(
+              'div',
+              { key: index, className: 'tile' },
+              current && current === url ? React__default.createElement(
+                'div',
+                { className: 'now-playing' },
+                'Now Playing'
+              ) : '',
               React__default.createElement(
                 'a',
-                null,
+                { onClick: function onClick() {
+                    return handleClick(url, index + 1);
+                  } },
                 React__default.createElement(
                   'div',
                   { className: 'tile__media' },
@@ -5567,15 +5581,53 @@ var GroupDeck = function GroupDeck(props) {
                   video.title
                 )
               )
-            )
-          );
+            );
+          } else {
+            // slider by itself
+            var _url = '' + get2 + video.url;
+            return React__default.createElement(
+              'div',
+              { key: index, className: 'tile' },
+              React__default.createElement(
+                Link,
+                { href: _url },
+                React__default.createElement(
+                  'a',
+                  null,
+                  React__default.createElement(
+                    'div',
+                    { className: 'tile__media' },
+                    React__default.createElement('img', { className: 'tile__img', src: video.thumbnail, 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: variant }, className: 'tile__info' },
+                    video.title
+                  )
+                )
+              )
+            );
+          }
         })
       )
     ),
     React__default.createElement(
       'style',
       { jsx: true },
-      '\n        #vid-slider * {\n          box-sizing: border-box;\n        }\n        #vid-slider {\n          position: relative;\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 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: scroll;\n          width: 100%;\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: 1rem;\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: 55px 0;\n          padding-bottom: 10px;\n          padding-left: 3rem;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          width: 250px;\n          height: 140.625px;\n          margin-right: 10px;\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__img {\n          width: 250px;\n          height: 140.625px;\n          -o-object-fit: cover;\n          object-fit: cover;\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          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: \'\u25B6\';\n          left: 0;\n          width: 100%;\n          font-size: 30px;\n          margin-left: 3px;\n          margin-top: -23px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n        #vid-slider .tile:hover .tile__details {\n          opacity: 1;\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        #vid-slider .row__inner:hover {\n          -webkit-transform: translate3d(-62.5px, 0, 0);\n          transform: translate3d(-62.5px, 0, 0);\n        }\n        #vid-slider .row__inner:hover .tile {\n          opacity: 0.3;\n        }\n        #vid-slider .row__inner:hover .tile:hover {\n          -webkit-transform: scale(1.25);\n          transform: scale(1.25);\n          opacity: 1;\n        }\n        #vid-slider .tile:hover ~ .tile {\n          -webkit-transform: translate3d(62px, 0, 0);\n          transform: translate3d(62px, 0, 0);\n        }\n        #vid-slider .tile:hover .tile__info {\n          opacity: 0;\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: 5;\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-next {\n          right: 0;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding: 0;\n        }\n        #vid-slider .tile:last-child {\n          margin-right: 2rem;\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\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n      '
+      '\n        #vid-slider * {\n          box-sizing: border-box;\n        }\n        #vid-slider {\n          position: relative;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 1rem;\n          left: 1rem;\n          color: white;\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 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: scroll;\n          width: 100%;\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: 1rem;\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: 55px 0;\n          padding-bottom: 10px;\n          padding-left: 3rem;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          width: 250px;\n          height: 140.625px;\n          margin-right: 10px;\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__img {\n          width: 250px;\n          height: 140.625px;\n          -o-object-fit: cover;\n          object-fit: cover;\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          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: \'\u25B6\';\n          left: 0;\n          width: 100%;\n          font-size: 30px;\n          margin-left: 2px;\n          margin-top: -23px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n        #vid-slider .tile:hover .tile__details {\n          opacity: 1;\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        #vid-slider .row__inner:hover {\n          -webkit-transform: translate3d(-62.5px, 0, 0);\n          transform: translate3d(-62.5px, 0, 0);\n        }\n        #vid-slider .row__inner:hover .tile {\n          opacity: 0.3;\n        }\n        #vid-slider .row__inner:hover .tile:hover {\n          -webkit-transform: scale(1.25);\n          transform: scale(1.25);\n          opacity: 1;\n        }\n        #vid-slider .tile:hover ~ .tile {\n          -webkit-transform: translate3d(62px, 0, 0);\n          transform: translate3d(62px, 0, 0);\n        }\n        #vid-slider .tile:hover .tile__info {\n          opacity: 0;\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: 5;\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-next {\n          right: 0;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding: 0;\n        }\n        #vid-slider .tile:last-child {\n          margin-right: 2rem;\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\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n      '
     )
   );
 };
@@ -15519,6 +15571,148 @@ var IFrame = function IFrame(_ref) {
   );
 };
 
+var YouTubeGallery = function YouTubeGallery(_ref) {
+  var nodes = _ref.nodes;
+
+
+  var router = useRouter();
+  var params = void 0;
+  var seriesVid = void 0;
+
+  var _useState = useState(''),
+      _useState2 = slicedToArray(_useState, 2),
+      vidUrl = _useState2[0],
+      setVidUrl = _useState2[1];
+
+  // Once component mounts, set the variables
+
+
+  useEffect(function () {
+    console.log('loaded');
+    params = new URL(document.location).searchParams;
+    seriesVid = params.get('seriesVid') || 1;
+    setVidUrl(nodes.videos['' + (seriesVid - 1)].url);
+  }, []);
+
+  // Series data for the image slider
+  var seriesData = [];
+  nodes.videos.forEach(function (vid) {
+    seriesData.push({ title: vid.title, thumbnail: 'http://img.youtube.com/vi/' + getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
+  });
+
+  // If series vid doesnt exist, go back to first video
+  if (seriesData.length < seriesVid) {
+    seriesVid = 1;
+    var newPath = '/' + get2 + '/' + router.query.url + ('?seriesVid=' + seriesVid);
+    var vidState = { vid_id: seriesVid };
+    window.history.pushState(vidState, '', newPath);
+  }
+  //
+  function toggleSeries() {
+    var series = document.querySelector('.vid-series');
+    if (series.classList.contains('active')) {
+      series.style.bottom = '-100%';
+    } else {
+      series.style.bottom = '6px';
+    }
+    series.classList.toggle('active');
+  }
+  // This function is passed to the GroupDeck to change the youtube iframe src
+  function setState(url, vidIndex) {
+    var get2 = router.asPath.split('/')[1];
+    setVidUrl(url);
+    toggleSeries();
+    lib_3.refresh();
+    var newPath = '/' + get2 + '/' + router.query.url + ('?seriesVid=' + vidIndex);
+    var vidState = { vid_id: vidIndex };
+    window.history.pushState(vidState, '', newPath);
+  }
+
+  // Handle video end
+  function handleOnEnd(e) {
+    var currentVid = void 0;
+    var nextVid = void 0;
+    //Find index of video currently playing
+    seriesData.forEach(function (vid, index$$1) {
+      if (vid.url === vidUrl) {
+        currentVid = index$$1;
+      }
+    });
+    //increment +1, or if at the end of the series list, go back to the beginning
+    if (currentVid + 1 >= seriesData.length) {
+      nextVid = 0;
+    } else {
+      nextVid = currentVid + 1;
+    }
+    var get2 = router.asPath.split('/')[1];
+    // set the new Video URL
+    setState(nodes.videos['' + nextVid].url);
+    var newPath = '/' + get2 + '/' + router.query.url + ('?seriesVid=' + (nextVid + 1));
+    var vidState = { vid_id: nextVid + 1 };
+    var title = '';
+    window.history.pushState(vidState, title, newPath);
+
+    //Small pause before starting next video
+    setTimeout(function () {
+      //Youtube API to start video playing automatically
+      var id = getYoutubeId(nodes.videos['' + nextVid].url);
+      e.target.loadVideoById(id);
+      toggleSeries();
+      lib_3.refresh();
+    }, 1000);
+  }
+  // Youtube Options
+  var opts = {
+    width: '100%',
+    playerVars: {
+      rel: 0
+    }
+  };
+
+  return React__default.createElement(
+    'div',
+    { className: 'video-container', style: { position: 'sticky', top: '60px', marginBottom: '20vh' } },
+    React__default.createElement(
+      'div',
+      { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
+      vidUrl && React__default.createElement(YouTube, { videoId: getYoutubeId(vidUrl), opts: opts, onEnd: function onEnd(e) {
+          return handleOnEnd(e);
+        } }),
+      React__default.createElement(
+        'div',
+        {
+          className: 'vid-series',
+          style: {
+            position: 'absolute',
+            width: '100%',
+            height: '250px',
+            background: 'linear-gradient(to bottom, transparent,black)',
+            bottom: '-100%',
+            transition: 'all .5s ease',
+            padding: '0 1rem',
+            left: '0'
+          } },
+        vidUrl && React__default.createElement(GroupDeck, { dark: true, dataset: seriesData, setState: setState, seriesVid: seriesVid, current: vidUrl })
+      )
+    ),
+    React__default.createElement(
+      'div',
+      { className: 'vid-controls', style: { width: '100%', background: 'transparent', display: 'flex', justifyContent: 'center' } },
+      React__default.createElement('button', {
+        'aria-label': 'Toggles video series',
+        id: 'vid-series-btn',
+        onClick: toggleSeries,
+        className: 'btn btn-block btn-lg btn-secondary ',
+        style: { borderRadius: '0' } })
+    ),
+    React__default.createElement(
+      'style',
+      { jsx: true },
+      '\n        .vid-series .video-detail iframe {\n          height: 415px !important;\n        }\n        span.btn {\n          margin: 0 1rem;\n        }\n      '
+    )
+  );
+};
+
 var getSerializers$1 = function getSerializers(client) {
   return {
     types: {
@@ -15528,32 +15722,37 @@ var getSerializers$1 = function getSerializers(client) {
 
         return React__default.createElement(YouTubePlayer$1, { url: url });
       },
-      figure: function figure(_ref2) {
+      youtubeGallery: function youtubeGallery(_ref2) {
         var node = _ref2.node;
 
-        return React__default.createElement(FigureComponent, { node: node, client: client });
+        return React__default.createElement(YouTubeGallery, { nodes: node });
       },
-      slideshow: function slideshow(_ref3) {
+      figure: function figure(_ref3) {
         var node = _ref3.node;
+
+        return React__default.createElement(FigureComponent, { node: node, client: client });
+      },
+      slideshow: function slideshow(_ref4) {
+        var node = _ref4.node;
         var slides = node.slides;
 
         return React__default.createElement(Slideshow, { slides: slides, client: client });
       },
-      sidebar: function sidebar(_ref4) {
-        var node = _ref4.node;
+      sidebar: function sidebar(_ref5) {
+        var node = _ref5.node;
         var caption = node.caption,
             content = node.content;
 
         return React__default.createElement(Sidebar, { caption: caption, content: content });
       },
-      datatable: function datatable(_ref5) {
-        var node = _ref5.node;
+      datatable: function datatable(_ref6) {
+        var node = _ref6.node;
         var table = node.table;
 
         return React__default.createElement(TableShow, { rows: table.rows });
       },
-      media: function media(_ref6) {
-        var node = _ref6.node;
+      media: function media(_ref7) {
+        var node = _ref7.node;
         var upload_doc = node.upload_doc,
             poster = node.poster,
             caption = node.caption,
@@ -15561,8 +15760,8 @@ var getSerializers$1 = function getSerializers(client) {
 
         return React__default.createElement(Media$1, { uploadDoc: upload_doc, poster: poster, blank: blank, client: client, caption: caption });
       },
-      iframe: function iframe(_ref7) {
-        var node = _ref7.node;
+      iframe: function iframe(_ref8) {
+        var node = _ref8.node;
 
         return React__default.createElement(IFrame, { url: node.url });
       }