@mjhls/mjh-framework 1.0.309 → 1.0.311

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.309
+# mjh-framework v. 1.0.311
 
 > Foundation Framework
 

package/dist/cjs/VideoSeriesListing.js

@@ -18,7 +18,7 @@ var Router = require('next/router');
 var Router__default = _interopDefault(Router);
 require('react-dom');
 require('./index-fa0fb52c.js');
-var YoutubeGroup = require('./YoutubeGroup-98ffbc57.js');
+var YoutubeGroup = require('./YoutubeGroup-93aa7a6c.js');
 var index_esm = require('./index.esm-340d3792.js');
 
 var VideoSeriesListing = function (_React$Component) {

package/dist/cjs/{YoutubeGroup-98ffbc57.js → YoutubeGroup-93aa7a6c.js}

@@ -499,6 +499,7 @@ GROQ query -
 */
 var YoutubeGroup = function YoutubeGroup(props) {
   // Props should be an array of objects containing Thumbnail, title, and URL
+  var innerSlider = React.useRef(null);
 
   React.useEffect(function () {
     //IE11 Polyfill
@@ -510,22 +511,33 @@ var YoutubeGroup = function YoutubeGroup(props) {
   function scrollSlider(e, direction) {
     var slide = e.target.parentElement;
     var scrollOffset = slide.scrollLeft;
-    var viewableWidth = slide.clientWidth > 700 ? 3 * (document.querySelector('.tile').scrollWidth + 8) : document.querySelector('.tile').scrollWidth + 8;
+    var viewableWidth = slide.clientWidth;
     var scrollDirection = void 0;
+
     if (direction === 'next') {
       scrollDirection = scrollOffset + viewableWidth;
+
+      if (scrollDirection > innerSlider.current.offsetWidth) {
+        scrollDirection = 0;
+      }
     }
     if (direction === 'prev') {
       scrollDirection = scrollOffset - viewableWidth;
+
+      if (scrollOffset === 0) {
+        scrollDirection = innerSlider.current.offsetWidth;
+      }
     }
     slide.scrollTo({
       left: scrollDirection,
       behavior: 'smooth'
     });
   }
+
   function handleClick(url, vidIndex) {
     props.setState(url, vidIndex);
   }
+
   var _props$current = props.current,
       current = _props$current === undefined ? '' : _props$current;
 
@@ -552,7 +564,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
       ),
       React__default.createElement(
         'div',
-        { className: 'row__inner' },
+        { 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 !== '') {

package/dist/cjs/YoutubeGroup.js

@@ -6,7 +6,7 @@ require('prop-types');
 require('next/link');
 require('react-dom');
 require('./index-fa0fb52c.js');
-var YoutubeGroup = require('./YoutubeGroup-98ffbc57.js');
+var YoutubeGroup = require('./YoutubeGroup-93aa7a6c.js');
 
 
 

package/dist/cjs/index.js

@@ -41,7 +41,7 @@ var ThumbnailCard = require('./ThumbnailCard.js');
 var TaxonomyCard = require('./TaxonomyCard-a8a64f98.js');
 require('./react-social-icons-cd0d9d3b.js');
 var GroupDeck = require('./GroupDeck.js');
-var YoutubeGroup = require('./YoutubeGroup-98ffbc57.js');
+var YoutubeGroup = require('./YoutubeGroup-93aa7a6c.js');
 var reactBootstrap = require('react-bootstrap');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 var index_esm = require('./index.esm-340d3792.js');

package/dist/esm/VideoSeriesListing.js

@@ -12,7 +12,7 @@ import 'next/link';
 import { withRouter } from 'next/router';
 import 'react-dom';
 import './index-5f9f807a.js';
-import { Y as YoutubeGroup } from './YoutubeGroup-562ed456.js';
+import { Y as YoutubeGroup } from './YoutubeGroup-e7e16d0e.js';
 import { a as IoIosArrowForward } from './index.esm-536609db.js';
 
 var VideoSeriesListing = function (_React$Component) {

package/dist/esm/{YoutubeGroup-562ed456.js → YoutubeGroup-e7e16d0e.js}

@@ -1,5 +1,5 @@
 import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-0c4b6f40.js';
-import React__default, { useEffect } from 'react';
+import React__default, { useRef, useEffect } from 'react';
 import 'next/link';
 import { L as LazyLoad } from './index-5f9f807a.js';
 
@@ -494,6 +494,7 @@ GROQ query -
 */
 var YoutubeGroup = function YoutubeGroup(props) {
   // Props should be an array of objects containing Thumbnail, title, and URL
+  var innerSlider = useRef(null);
 
   useEffect(function () {
     //IE11 Polyfill
@@ -505,22 +506,33 @@ var YoutubeGroup = function YoutubeGroup(props) {
   function scrollSlider(e, direction) {
     var slide = e.target.parentElement;
     var scrollOffset = slide.scrollLeft;
-    var viewableWidth = slide.clientWidth > 700 ? 3 * (document.querySelector('.tile').scrollWidth + 8) : document.querySelector('.tile').scrollWidth + 8;
+    var viewableWidth = slide.clientWidth;
     var scrollDirection = void 0;
+
     if (direction === 'next') {
       scrollDirection = scrollOffset + viewableWidth;
+
+      if (scrollDirection > innerSlider.current.offsetWidth) {
+        scrollDirection = 0;
+      }
     }
     if (direction === 'prev') {
       scrollDirection = scrollOffset - viewableWidth;
+
+      if (scrollOffset === 0) {
+        scrollDirection = innerSlider.current.offsetWidth;
+      }
     }
     slide.scrollTo({
       left: scrollDirection,
       behavior: 'smooth'
     });
   }
+
   function handleClick(url, vidIndex) {
     props.setState(url, vidIndex);
   }
+
   var _props$current = props.current,
       current = _props$current === undefined ? '' : _props$current;
 
@@ -547,7 +559,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
       ),
       React__default.createElement(
         'div',
-        { className: 'row__inner' },
+        { 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 !== '') {

package/dist/esm/YoutubeGroup.js

@@ -4,4 +4,4 @@ import 'prop-types';
 import 'next/link';
 import 'react-dom';
 import './index-5f9f807a.js';
-export { Y as default } from './YoutubeGroup-562ed456.js';
+export { Y as default } from './YoutubeGroup-e7e16d0e.js';

package/dist/esm/index.js

@@ -36,8 +36,8 @@ export { T as TaxonomyCard } from './TaxonomyCard-ea494c28.js';
 import './react-social-icons-a7d5c5c7.js';
 import GroupDeck from './GroupDeck.js';
 export { default as GroupDeck } from './GroupDeck.js';
-import { g as getYoutubeId } from './YoutubeGroup-562ed456.js';
-export { Y as YoutubeGroup } from './YoutubeGroup-562ed456.js';
+import { g as getYoutubeId } from './YoutubeGroup-e7e16d0e.js';
+export { Y as YoutubeGroup } from './YoutubeGroup-e7e16d0e.js';
 import { Spinner as Spinner$1, Container as Container$1, Row as Row$1, Col as Col$1, Carousel, Table, Figure as Figure$1, Button as Button$1, ProgressBar, Card, Form } from 'react-bootstrap';
 export { default as QueueDeckExpanded } from './QueueDeckExpanded.js';
 import { I as IoMdArrowDropdown } from './index.esm-536609db.js';

package/package.json

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