@mjhls/mjh-framework 1.0.472 → 1.0.473

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/GroupDeck.js +33 -15
  3. package/dist/cjs/getSerializers.js +17 -33
  4. package/dist/esm/GroupDeck.js +33 -15
  5. package/dist/esm/getSerializers.js +17 -33
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- # mjh-framework v. 1.0.472
2
+ # mjh-framework v. 1.0.473
3
3
 
4
4
  > Foundation Framework
5
5
 
package/dist/cjs/GroupDeck.js CHANGED
@@ -33,6 +33,16 @@ var GroupDeck = function GroupDeck(props) {
33
33
  tileSize = _useState2[0],
34
34
  setTileSize = _useState2[1];
35
35
 
36
+ var _useState3 = React.useState(false),
37
+ _useState4 = slicedToArray._slicedToArray(_useState3, 2),
38
+ showScroller = _useState4[0],
39
+ setShowScroller = _useState4[1];
40
+
41
+ var _useState5 = React.useState(0),
42
+ _useState6 = slicedToArray._slicedToArray(_useState5, 2),
43
+ scrollPosition = _useState6[0],
44
+ setScrollPosition = _useState6[1];
45
+
36
46
  var urlFor = function urlFor(source, client) {
37
47
  var builder = index$1.imageUrlBuilder(client);
38
48
  return builder.image(source).auto('format');
@@ -52,17 +62,29 @@ var GroupDeck = function GroupDeck(props) {
52
62
 
53
63
  var setThumbSize = function setThumbSize() {
54
64
  var thumbSize = void 0;
65
+ var scrollerVisible = false;
55
66
  if (window.innerWidth > 1399) {
56
- thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 48);
67
+ thumbSize = Math.floor(viewableWindow.current.clientWidth / 3 - 40);
68
+ if (props.dataset.length > 3) {
69
+ scrollerVisible = true;
70
+ }
57
71
  }
58
72
  if (window.innerWidth < 1399 && window.innerWidth > 592) {
59
73
  thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 48);
74
+ if (props.dataset.length > 2) {
75
+ scrollerVisible = true;
76
+ }
60
77
  }
61
78
  if (window.innerWidth < 592) {
62
- thumbSize = Math.floor(viewableWindow.current.clientWidth / 1.5 - 24);
79
+ thumbSize = Math.floor(viewableWindow.current.clientWidth / 1 - 64);
80
+ if (props.dataset.length > 1) {
81
+ scrollerVisible = true;
82
+ }
63
83
  }
64
84
  if (thumbSize !== tileSize) {
65
85
  setTileSize(thumbSize);
86
+ setScrollPosition(0);
87
+ setShowScroller(scrollerVisible);
66
88
  var videoRows = document.querySelectorAll('#vid-slider .row');
67
89
  for (var i = 0; i < videoRows.length; i++) {
68
90
  videoRows[i].scrollTo({
@@ -79,33 +101,28 @@ var GroupDeck = function GroupDeck(props) {
79
101
 
80
102
  function scrollSlider(e, direction) {
81
103
  var slide = e.target.parentElement;
82
- var scrollOffset = slide.scrollLeft;
104
+ var scrollOffset = scrollPosition;
83
105
  var viewableWidth = slide.clientWidth;
84
-
85
- //calculate viewable size / slide
86
- var numberOfSlidesToScroll = Math.floor(tile.current.clientWidth + 25); //width of the tile plus margin
87
-
106
+ //calculate viewable size / slide
107
+ var numberOfSlidesToScroll = Math.floor(tile.current.clientWidth + 25); //width of the tile plus margin
88
108
  var scrollDirection = void 0;
89
-
90
109
  if (direction === 'next') {
91
110
  scrollDirection = scrollOffset + numberOfSlidesToScroll;
92
-
93
111
  if (scrollOffset + viewableWidth + 25 >= innerSlider.current.offsetWidth) {
94
112
  scrollDirection = 0;
95
113
  }
96
114
  }
97
115
  if (direction === 'prev') {
98
116
  scrollDirection = scrollOffset - numberOfSlidesToScroll;
99
-
100
117
  if (scrollOffset === 0) {
101
118
  if (window.innerWidth > 1399) {
102
- scrollDirection = innerSlider.current.offsetWidth - tileSize * 2 - 40;
119
+ scrollDirection = innerSlider.current.offsetWidth - tileSize * 3 - 70;
103
120
  }
104
121
  if (window.innerWidth < 1399 && window.innerWidth > 592) {
105
122
  scrollDirection = innerSlider.current.offsetWidth - tileSize * 2 - 40;
106
123
  }
107
124
  if (window.innerWidth < 592) {
108
- scrollDirection = innerSlider.current.offsetWidth - tileSize * 1.5 - 24;
125
+ scrollDirection = innerSlider.current.offsetWidth - tileSize * 1 - 24;
109
126
  }
110
127
  }
111
128
  }
@@ -113,6 +130,7 @@ var GroupDeck = function GroupDeck(props) {
113
130
  left: scrollDirection,
114
131
  behavior: 'smooth'
115
132
  });
133
+ setScrollPosition(scrollDirection);
116
134
  }
117
135
 
118
136
  function handleClick(url, thumbnail, vidIndex) {
@@ -193,7 +211,7 @@ var GroupDeck = function GroupDeck(props) {
193
211
  ),
194
212
  React__default.createElement(
195
213
  'div',
196
- { style: { color: '#fff' }, className: 'tile__info' },
214
+ { style: { color: '#323232' }, className: 'tile__info' },
197
215
  video.title
198
216
  )
199
217
  )
@@ -228,7 +246,7 @@ var GroupDeck = function GroupDeck(props) {
228
246
  { className: 'tile__title' },
229
247
  React__default.createElement(
230
248
  'div',
231
- { style: { color: '#fff' }, className: 'tile__title_text' },
249
+ { style: { color: '#323232' }, className: 'tile__title_text' },
232
250
  video.title
233
251
  )
234
252
  )
@@ -259,7 +277,7 @@ var GroupDeck = function GroupDeck(props) {
259
277
  React__default.createElement(
260
278
  'style',
261
279
  { jsx: 'true' },
262
- '\n #vid-slider * {\n box-sizing: border-box;\n -ms-overflow-style: none;\n }\n #vid-slider::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider {\n position: relative;\n -ms-overflow-style: none;\n padding: 0 1.5rem;\n margin-bottom: 2rem;\n }\n #vid-slider .now-playing {\n position: absolute;\n top: 0.5rem;\n left: 1rem;\n color: white;\n background: rgba(0, 0, 0, 0.75);\n }\n #vid-slider h1,\n #vid-slider p {\n text-align: center;\n width: 100%;\n max-width: 500px;\n margin: auto;\n }\n #vid-slider,\n #vidHolder {\n max-width: 805px;\n }\n #vid-slider a:link,\n #vid-slider a:hover,\n #vid-slider a:active,\n #vid-slider a:visited {\n transition: color 150ms;\n color: #95a5a6;\n text-decoration: none;\n }\n #vid-slider a:hover {\n color: #7f8c8d;\n text-decoration: underline;\n }\n #vid-slider .contain {\n width: 100%;\n }\n #vid-slider .row {\n overflow-x: scroll;\n width: 100%;\n -ms-overflow-style: none;\n overflow-y: hidden !important;\n }\n #vid-slider .tile__info {\n white-space: normal !important;\n position: absolute;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 0.9rem;\n font-weight: bold;\n transition: opacity 0.25s;\n }\n #vid-slider .row__inner {\n transition: 450ms -webkit-transform;\n transition: 450ms transform;\n transition: 450ms transform, 450ms -webkit-transform;\n font-size: 0;\n white-space: nowrap;\n margin: 25px 0 55px !important;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n height: 135px;\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: 135px;\n -o-object-fit: cover;\n object-fit: cover;\n object-position: center;\n }\n #vid-slider .tile__details {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n top: 0;\n font-size: 10px;\n opacity: 0;\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n transition: 450ms opacity;\n }\n #vid-slider .tile__details:after,\n #vid-slider .tile__details:before {\n content: \'\';\n\n position: absolute;\n top: 50%;\n left: 50%;\n display: #000;\n }\n #vid-slider .tile__details:after {\n margin-top: -25px;\n margin-left: -25px;\n width: 50px;\n height: 50px;\n border: 3px solid #ecf0f1;\n line-height: 50px;\n text-align: center;\n border-radius: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1;\n }\n #vid-slider .tile__details:before {\n content: \'\';\n background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n no-repeat center center;\n left: 0;\n width: 100%;\n height: 3rem;\n font-size: 30px;\n margin-right: 12px;\n margin-top: -24px;\n text-align: center;\n z-index: 2;\n color: white;\n }\n\n #vid-slider .tile__title {\n position: absolute;\n bottom: 0;\n padding: 10px;\n max-width: 250px;\n }\n #vid-slider .tile__title_text {\n position: relative;\n left: 0;\n white-space: normal;\n }\n\n #vid-slider .tile__slider-prev,\n #vid-slider .tile__slider-next {\n width: 30px;\n background: transparent;\n border: none;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 99;\n cursor: pointer;\n color: ' + (props.dark ? 'white' : 'black') + ';\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 2rem;\n }\n #vid-slider .tile__slider-prev {\n left: -0.5rem;\n padding: 1rem;\n }\n #vid-slider .tile__slider-next {\n right: -0.5rem;\n padding: 1rem;\n }\n #vid-slider,\n #vid-slider .row {\n margin: 0;\n padding-right: 0 1.2rem;\n }\n\n #vid-slider .row::-webkit-scrollbar-thumb {\n background-color: transparent !important;\n }\n #vid-slider i {\n border: solid ' + (props.dark ? 'white' : 'black') + ';\n border-width: 0 4px 4px 0;\n display: inline-block;\n padding: 4px;\n pointer-events: none;\n }\n #vid-slider .right {\n transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n }\n #vid-slider .left {\n transform: rotate(135deg);\n -webkit-transform: rotate(135deg);\n }\n @media screen and (min-width: 1399px) {\n .block-content #vid-slider .tile__img {\n height: 195px;\n }\n .block-content #vid-slider .tile {\n height: 195px;\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 .tile__img {\n height: 85px;\n object-fit: cover;\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 #vid-slider .tile {\n height: 130px;\n }\n\n #vid-slider .tile__img {\n height: 130px;\n object-fit: cover;\n }\n }\n @media screen and (max-width: 568px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n #vid-slider .tile {\n height: 140px;\n }\n\n #vid-slider .tile__img {\n height: 160px;\n object-fit: cover;\n }\n #vid-slider .row__inner {\n margin: 30px 0 60px;\n }\n }\n @media screen and (max-width: 468px) {\n #vid-slider .tile {\n height: 130px;\n }\n #vid-slider .tile__img {\n height: 130px;\n }\n }\n @media screen and (max-width: 386px) {\n #vid-slider .tile {\n height: 100px;\n }\n #vid-slider .tile__img {\n height: 100px;\n }\n }\n '
280
+ '\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 75px !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\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 \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\n \n }\n @media screen and (max-width: 568px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n \n\n \n #vid-slider .row__inner {\n margin: 30px 0 70px;\n }\n }\n \n '
263
281
  )
264
282
  );
265
283
  };
package/dist/cjs/getSerializers.js CHANGED
@@ -7126,16 +7126,6 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
7126
7126
  }
7127
7127
  }, [vidLoaded]);
7128
7128
 
7129
- function toggleSeries() {
7130
- var series = document.querySelector('.vid-series');
7131
- if (series.classList.contains('active')) {
7132
- series.style.bottom = '-100%';
7133
- } else {
7134
- series.style.bottom = '2px';
7135
- }
7136
- series.classList.toggle('active');
7137
- }
7138
-
7139
7129
  // This function is passed to the GroupDeck to change the youtube iframe src
7140
7130
  function setState(url, thumbnail, vidIndex) {
7141
7131
  var newPath = get1 + '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
@@ -7280,38 +7270,32 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
7280
7270
  }),
7281
7271
  vidUrl && vidType == 'mp4' && React__default.createElement(VideoMp4, { url: vidUrl, thumbnail: vidThumbnail, vidLoaded: vidLoaded }),
7282
7272
  vidUrl && vidType == 'brightcove' && React__default.createElement(Video, { autoplay: true, node: { videoID: vidUrl, source: 'brightcove' }, accountIDs: accountIDs, autoplayNextVideo: autoplayNextVideo }),
7283
- React__default.createElement(
7273
+ React__default.createElement('hr', { style: { marginTop: '1.5rem', borderTop: '2px solid rgba(0,0,0,.35)' } }),
7274
+ series && React__default.createElement(
7284
7275
  'div',
7285
7276
  {
7286
7277
  className: 'vid-series',
7287
7278
  style: {
7288
- position: 'absolute',
7289
7279
  width: '100%',
7290
- height: '270px',
7280
+ height: '100%',
7291
7281
  maxHeight: '100%',
7292
- background: 'linear-gradient(to bottom, transparent,black)',
7293
- bottom: '-100%',
7294
- transition: 'all .5s ease',
7295
- padding: '0 1rem',
7296
- left: '0'
7282
+ paddingBottom: '0'
7297
7283
  } },
7298
- vidUrl && React__default.createElement(GroupDeck, { dark: true, dataset: seriesData, setState: setState, seriesVid: series, current: vidUrl, client: client })
7299
- )
7300
- ),
7301
- React__default.createElement(
7302
- 'div',
7303
- { className: 'vid-controls', style: { width: '100%', background: 'transparent', display: 'flex', justifyContent: 'center' } },
7304
- React__default.createElement(
7305
- 'button',
7306
- {
7307
- 'aria-label': 'Toggles video series',
7308
- id: 'vid-series-btn',
7309
- onClick: toggleSeries,
7310
- className: 'btn btn-block btn-lg ',
7311
- style: { borderRadius: '0', background: 'rgb(241,185,63)', color: 'white' } },
7312
- 'View Series'
7284
+ React__default.createElement(
7285
+ 'p',
7286
+ { style: { color: '#484848', marginBottom: '0' } },
7287
+ React__default.createElement(
7288
+ 'b',
7289
+ { style: { fontSize: '1.25em' } },
7290
+ 'Now Playing:'
7291
+ ),
7292
+ ' ',
7293
+ seriesData[series ? series - 1 : 0].title
7294
+ ),
7295
+ vidUrl && React__default.createElement(GroupDeck, { dataset: seriesData, setState: setState, seriesVid: series, current: vidUrl, client: client })
7313
7296
  )
7314
7297
  ),
7298
+ React__default.createElement('div', { className: 'vid-controls', style: { width: '100%', background: 'transparent', display: 'flex', justifyContent: 'center' } }),
7315
7299
  React__default.createElement(
7316
7300
  'div',
7317
7301
  { className: 'my-5' },
package/dist/esm/GroupDeck.js CHANGED
@@ -28,6 +28,16 @@ var GroupDeck = function GroupDeck(props) {
28
28
  tileSize = _useState2[0],
29
29
  setTileSize = _useState2[1];
30
30
 
31
+ var _useState3 = useState(false),
32
+ _useState4 = _slicedToArray(_useState3, 2),
33
+ showScroller = _useState4[0],
34
+ setShowScroller = _useState4[1];
35
+
36
+ var _useState5 = useState(0),
37
+ _useState6 = _slicedToArray(_useState5, 2),
38
+ scrollPosition = _useState6[0],
39
+ setScrollPosition = _useState6[1];
40
+
31
41
  var urlFor = function urlFor(source, client) {
32
42
  var builder = imageUrlBuilder(client);
33
43
  return builder.image(source).auto('format');
@@ -47,17 +57,29 @@ var GroupDeck = function GroupDeck(props) {
47
57
 
48
58
  var setThumbSize = function setThumbSize() {
49
59
  var thumbSize = void 0;
60
+ var scrollerVisible = false;
50
61
  if (window.innerWidth > 1399) {
51
- thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 48);
62
+ thumbSize = Math.floor(viewableWindow.current.clientWidth / 3 - 40);
63
+ if (props.dataset.length > 3) {
64
+ scrollerVisible = true;
65
+ }
52
66
  }
53
67
  if (window.innerWidth < 1399 && window.innerWidth > 592) {
54
68
  thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 48);
69
+ if (props.dataset.length > 2) {
70
+ scrollerVisible = true;
71
+ }
55
72
  }
56
73
  if (window.innerWidth < 592) {
57
- thumbSize = Math.floor(viewableWindow.current.clientWidth / 1.5 - 24);
74
+ thumbSize = Math.floor(viewableWindow.current.clientWidth / 1 - 64);
75
+ if (props.dataset.length > 1) {
76
+ scrollerVisible = true;
77
+ }
58
78
  }
59
79
  if (thumbSize !== tileSize) {
60
80
  setTileSize(thumbSize);
81
+ setScrollPosition(0);
82
+ setShowScroller(scrollerVisible);
61
83
  var videoRows = document.querySelectorAll('#vid-slider .row');
62
84
  for (var i = 0; i < videoRows.length; i++) {
63
85
  videoRows[i].scrollTo({
@@ -74,33 +96,28 @@ var GroupDeck = function GroupDeck(props) {
74
96
 
75
97
  function scrollSlider(e, direction) {
76
98
  var slide = e.target.parentElement;
77
- var scrollOffset = slide.scrollLeft;
99
+ var scrollOffset = scrollPosition;
78
100
  var viewableWidth = slide.clientWidth;
79
-
80
- //calculate viewable size / slide
81
- var numberOfSlidesToScroll = Math.floor(tile.current.clientWidth + 25); //width of the tile plus margin
82
-
101
+ //calculate viewable size / slide
102
+ var numberOfSlidesToScroll = Math.floor(tile.current.clientWidth + 25); //width of the tile plus margin
83
103
  var scrollDirection = void 0;
84
-
85
104
  if (direction === 'next') {
86
105
  scrollDirection = scrollOffset + numberOfSlidesToScroll;
87
-
88
106
  if (scrollOffset + viewableWidth + 25 >= innerSlider.current.offsetWidth) {
89
107
  scrollDirection = 0;
90
108
  }
91
109
  }
92
110
  if (direction === 'prev') {
93
111
  scrollDirection = scrollOffset - numberOfSlidesToScroll;
94
-
95
112
  if (scrollOffset === 0) {
96
113
  if (window.innerWidth > 1399) {
97
- scrollDirection = innerSlider.current.offsetWidth - tileSize * 2 - 40;
114
+ scrollDirection = innerSlider.current.offsetWidth - tileSize * 3 - 70;
98
115
  }
99
116
  if (window.innerWidth < 1399 && window.innerWidth > 592) {
100
117
  scrollDirection = innerSlider.current.offsetWidth - tileSize * 2 - 40;
101
118
  }
102
119
  if (window.innerWidth < 592) {
103
- scrollDirection = innerSlider.current.offsetWidth - tileSize * 1.5 - 24;
120
+ scrollDirection = innerSlider.current.offsetWidth - tileSize * 1 - 24;
104
121
  }
105
122
  }
106
123
  }
@@ -108,6 +125,7 @@ var GroupDeck = function GroupDeck(props) {
108
125
  left: scrollDirection,
109
126
  behavior: 'smooth'
110
127
  });
128
+ setScrollPosition(scrollDirection);
111
129
  }
112
130
 
113
131
  function handleClick(url, thumbnail, vidIndex) {
@@ -188,7 +206,7 @@ var GroupDeck = function GroupDeck(props) {
188
206
  ),
189
207
  React__default.createElement(
190
208
  'div',
191
- { style: { color: '#fff' }, className: 'tile__info' },
209
+ { style: { color: '#323232' }, className: 'tile__info' },
192
210
  video.title
193
211
  )
194
212
  )
@@ -223,7 +241,7 @@ var GroupDeck = function GroupDeck(props) {
223
241
  { className: 'tile__title' },
224
242
  React__default.createElement(
225
243
  'div',
226
- { style: { color: '#fff' }, className: 'tile__title_text' },
244
+ { style: { color: '#323232' }, className: 'tile__title_text' },
227
245
  video.title
228
246
  )
229
247
  )
@@ -254,7 +272,7 @@ var GroupDeck = function GroupDeck(props) {
254
272
  React__default.createElement(
255
273
  'style',
256
274
  { jsx: 'true' },
257
- '\n #vid-slider * {\n box-sizing: border-box;\n -ms-overflow-style: none;\n }\n #vid-slider::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider {\n position: relative;\n -ms-overflow-style: none;\n padding: 0 1.5rem;\n margin-bottom: 2rem;\n }\n #vid-slider .now-playing {\n position: absolute;\n top: 0.5rem;\n left: 1rem;\n color: white;\n background: rgba(0, 0, 0, 0.75);\n }\n #vid-slider h1,\n #vid-slider p {\n text-align: center;\n width: 100%;\n max-width: 500px;\n margin: auto;\n }\n #vid-slider,\n #vidHolder {\n max-width: 805px;\n }\n #vid-slider a:link,\n #vid-slider a:hover,\n #vid-slider a:active,\n #vid-slider a:visited {\n transition: color 150ms;\n color: #95a5a6;\n text-decoration: none;\n }\n #vid-slider a:hover {\n color: #7f8c8d;\n text-decoration: underline;\n }\n #vid-slider .contain {\n width: 100%;\n }\n #vid-slider .row {\n overflow-x: scroll;\n width: 100%;\n -ms-overflow-style: none;\n overflow-y: hidden !important;\n }\n #vid-slider .tile__info {\n white-space: normal !important;\n position: absolute;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 0.9rem;\n font-weight: bold;\n transition: opacity 0.25s;\n }\n #vid-slider .row__inner {\n transition: 450ms -webkit-transform;\n transition: 450ms transform;\n transition: 450ms transform, 450ms -webkit-transform;\n font-size: 0;\n white-space: nowrap;\n margin: 25px 0 55px !important;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n height: 135px;\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: 135px;\n -o-object-fit: cover;\n object-fit: cover;\n object-position: center;\n }\n #vid-slider .tile__details {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n top: 0;\n font-size: 10px;\n opacity: 0;\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n transition: 450ms opacity;\n }\n #vid-slider .tile__details:after,\n #vid-slider .tile__details:before {\n content: \'\';\n\n position: absolute;\n top: 50%;\n left: 50%;\n display: #000;\n }\n #vid-slider .tile__details:after {\n margin-top: -25px;\n margin-left: -25px;\n width: 50px;\n height: 50px;\n border: 3px solid #ecf0f1;\n line-height: 50px;\n text-align: center;\n border-radius: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1;\n }\n #vid-slider .tile__details:before {\n content: \'\';\n background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n no-repeat center center;\n left: 0;\n width: 100%;\n height: 3rem;\n font-size: 30px;\n margin-right: 12px;\n margin-top: -24px;\n text-align: center;\n z-index: 2;\n color: white;\n }\n\n #vid-slider .tile__title {\n position: absolute;\n bottom: 0;\n padding: 10px;\n max-width: 250px;\n }\n #vid-slider .tile__title_text {\n position: relative;\n left: 0;\n white-space: normal;\n }\n\n #vid-slider .tile__slider-prev,\n #vid-slider .tile__slider-next {\n width: 30px;\n background: transparent;\n border: none;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 99;\n cursor: pointer;\n color: ' + (props.dark ? 'white' : 'black') + ';\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 2rem;\n }\n #vid-slider .tile__slider-prev {\n left: -0.5rem;\n padding: 1rem;\n }\n #vid-slider .tile__slider-next {\n right: -0.5rem;\n padding: 1rem;\n }\n #vid-slider,\n #vid-slider .row {\n margin: 0;\n padding-right: 0 1.2rem;\n }\n\n #vid-slider .row::-webkit-scrollbar-thumb {\n background-color: transparent !important;\n }\n #vid-slider i {\n border: solid ' + (props.dark ? 'white' : 'black') + ';\n border-width: 0 4px 4px 0;\n display: inline-block;\n padding: 4px;\n pointer-events: none;\n }\n #vid-slider .right {\n transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n }\n #vid-slider .left {\n transform: rotate(135deg);\n -webkit-transform: rotate(135deg);\n }\n @media screen and (min-width: 1399px) {\n .block-content #vid-slider .tile__img {\n height: 195px;\n }\n .block-content #vid-slider .tile {\n height: 195px;\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 .tile__img {\n height: 85px;\n object-fit: cover;\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 #vid-slider .tile {\n height: 130px;\n }\n\n #vid-slider .tile__img {\n height: 130px;\n object-fit: cover;\n }\n }\n @media screen and (max-width: 568px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n #vid-slider .tile {\n height: 140px;\n }\n\n #vid-slider .tile__img {\n height: 160px;\n object-fit: cover;\n }\n #vid-slider .row__inner {\n margin: 30px 0 60px;\n }\n }\n @media screen and (max-width: 468px) {\n #vid-slider .tile {\n height: 130px;\n }\n #vid-slider .tile__img {\n height: 130px;\n }\n }\n @media screen and (max-width: 386px) {\n #vid-slider .tile {\n height: 100px;\n }\n #vid-slider .tile__img {\n height: 100px;\n }\n }\n '
275
+ '\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 75px !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\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 \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\n \n }\n @media screen and (max-width: 568px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n \n\n \n #vid-slider .row__inner {\n margin: 30px 0 70px;\n }\n }\n \n '
258
276
  )
259
277
  );
260
278
  };
package/dist/esm/getSerializers.js CHANGED
@@ -7120,16 +7120,6 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
7120
7120
  }
7121
7121
  }, [vidLoaded]);
7122
7122
 
7123
- function toggleSeries() {
7124
- var series = document.querySelector('.vid-series');
7125
- if (series.classList.contains('active')) {
7126
- series.style.bottom = '-100%';
7127
- } else {
7128
- series.style.bottom = '2px';
7129
- }
7130
- series.classList.toggle('active');
7131
- }
7132
-
7133
7123
  // This function is passed to the GroupDeck to change the youtube iframe src
7134
7124
  function setState(url, thumbnail, vidIndex) {
7135
7125
  var newPath = get1 + '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
@@ -7274,38 +7264,32 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
7274
7264
  }),
7275
7265
  vidUrl && vidType == 'mp4' && React__default.createElement(VideoMp4, { url: vidUrl, thumbnail: vidThumbnail, vidLoaded: vidLoaded }),
7276
7266
  vidUrl && vidType == 'brightcove' && React__default.createElement(Video, { autoplay: true, node: { videoID: vidUrl, source: 'brightcove' }, accountIDs: accountIDs, autoplayNextVideo: autoplayNextVideo }),
7277
- React__default.createElement(
7267
+ React__default.createElement('hr', { style: { marginTop: '1.5rem', borderTop: '2px solid rgba(0,0,0,.35)' } }),
7268
+ series && React__default.createElement(
7278
7269
  'div',
7279
7270
  {
7280
7271
  className: 'vid-series',
7281
7272
  style: {
7282
- position: 'absolute',
7283
7273
  width: '100%',
7284
- height: '270px',
7274
+ height: '100%',
7285
7275
  maxHeight: '100%',
7286
- background: 'linear-gradient(to bottom, transparent,black)',
7287
- bottom: '-100%',
7288
- transition: 'all .5s ease',
7289
- padding: '0 1rem',
7290
- left: '0'
7276
+ paddingBottom: '0'
7291
7277
  } },
7292
- vidUrl && React__default.createElement(GroupDeck, { dark: true, dataset: seriesData, setState: setState, seriesVid: series, current: vidUrl, client: client })
7293
- )
7294
- ),
7295
- React__default.createElement(
7296
- 'div',
7297
- { className: 'vid-controls', style: { width: '100%', background: 'transparent', display: 'flex', justifyContent: 'center' } },
7298
- React__default.createElement(
7299
- 'button',
7300
- {
7301
- 'aria-label': 'Toggles video series',
7302
- id: 'vid-series-btn',
7303
- onClick: toggleSeries,
7304
- className: 'btn btn-block btn-lg ',
7305
- style: { borderRadius: '0', background: 'rgb(241,185,63)', color: 'white' } },
7306
- 'View Series'
7278
+ React__default.createElement(
7279
+ 'p',
7280
+ { style: { color: '#484848', marginBottom: '0' } },
7281
+ React__default.createElement(
7282
+ 'b',
7283
+ { style: { fontSize: '1.25em' } },
7284
+ 'Now Playing:'
7285
+ ),
7286
+ ' ',
7287
+ seriesData[series ? series - 1 : 0].title
7288
+ ),
7289
+ vidUrl && React__default.createElement(GroupDeck, { dataset: seriesData, setState: setState, seriesVid: series, current: vidUrl, client: client })
7307
7290
  )
7308
7291
  ),
7292
+ React__default.createElement('div', { className: 'vid-controls', style: { width: '100%', background: 'transparent', display: 'flex', justifyContent: 'center' } }),
7309
7293
  React__default.createElement(
7310
7294
  'div',
7311
7295
  { className: 'my-5' },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mjhls/mjh-framework",
3
- "version": "1.0.472",
3
+ "version": "1.0.473",
4
4
  "description": "Foundation Framework",
5
5
  "author": "mjh-framework",
6
6
  "license": "MIT",