@mjhls/mjh-framework 1.0.471 → 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 (8) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/GroupDeck.js +33 -15
  3. package/dist/cjs/QueueDeckExpanded.js +34 -20
  4. package/dist/cjs/getSerializers.js +17 -33
  5. package/dist/esm/GroupDeck.js +33 -15
  6. package/dist/esm/QueueDeckExpanded.js +34 -20
  7. package/dist/esm/getSerializers.js +17 -33
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- # mjh-framework v. 1.0.471
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/QueueDeckExpanded.js CHANGED
@@ -160,8 +160,14 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
160
160
  return [].concat(toConsumableArray._toConsumableArray(arr.slice(0, index)), [newElement], toConsumableArray._toConsumableArray(arr.slice(index)));
161
161
  };
162
162
 
163
+ var _useState = React.useState(false),
164
+ _useState2 = slicedToArray._slicedToArray(_useState, 2),
165
+ dataRemapped = _useState2[0],
166
+ setDataRemapped = _useState2[1];
163
167
  // Need to pass flag "lgInfeedAd={true}" along with brandInsightAd from site level for large infeed-ad to render
164
168
  // Checking window and lgInfeedAd flag in desktop view ( window >= 1400px ).
169
+
170
+
165
171
  if (lgInfeedAd && brandInsightAd && typeof window !== 'undefined' && window.innerWidth >= 1400) {
166
172
  var lgInfeed = {
167
173
  _type: 'lg-infeed',
@@ -190,8 +196,16 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
190
196
  return lodash.lodash.flattenDeep(set);
191
197
  });
192
198
  data = lodash.lodash.flatten(chunks);
199
+ !dataRemapped && setDataRemapped(true); // To detect if appending of insights ads are completed
193
200
  }
194
201
 
202
+ // set dataRemap to true as there are no infeed or BI ads or window width is less than limit
203
+ React.useEffect(function () {
204
+ if (typeof window !== 'undefined' && (!lgInfeedAd || !brandInsightAd || window.innerWidth < 1400) && !dataRemapped) {
205
+ setDataRemapped(true);
206
+ }
207
+ }, []);
208
+
195
209
  if (showBI && brandInsightAd) {
196
210
  // Checking window and lgInfeedAd flag in desktop view ( window >= 1400px ).
197
211
  if (lgInfeedAd && typeof window !== 'undefined' && window.innerWidth >= 1400) brandInsightAd.interval = 8;
@@ -240,7 +254,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
240
254
  return React__default.createElement(
241
255
  'div',
242
256
  null,
243
- data && data.length > 0 ? data.map(function (article, index) {
257
+ data && dataRemapped && data.length > 0 ? data.map(function (article, index) {
244
258
  var pageNumber = article.pageNumber || values.page;
245
259
  var contentCategoryName = article.contentCategory ? article.contentCategory.name : 'Articles';
246
260
 
@@ -660,33 +674,33 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
660
674
 
661
675
  var builder = index$1.imageUrlBuilder(client);
662
676
 
663
- var _useState = React.useState(initialData),
664
- _useState2 = slicedToArray._slicedToArray(_useState, 2),
665
- data = _useState2[0],
666
- setData = _useState2[1];
667
-
668
- var _useState3 = React.useState(true),
677
+ var _useState3 = React.useState(initialData),
669
678
  _useState4 = slicedToArray._slicedToArray(_useState3, 2),
670
- scrolling = _useState4[0],
671
- setScrolling = _useState4[1];
679
+ data = _useState4[0],
680
+ setData = _useState4[1];
672
681
 
673
- var _useState5 = React.useState(params ? params.to : 0),
674
- _useState6 = slicedToArray._slicedToArray(_useState5, 1),
675
- per = _useState6[0];
682
+ var _useState5 = React.useState(true),
683
+ _useState6 = slicedToArray._slicedToArray(_useState5, 2),
684
+ scrolling = _useState6[0],
685
+ setScrolling = _useState6[1];
676
686
 
677
- var _useState7 = React.useState(initialCurrentPage || 1),
678
- _useState8 = slicedToArray._slicedToArray(_useState7, 2),
679
- currentPage = _useState8[0],
680
- setCurrentPage = _useState8[1];
687
+ var _useState7 = React.useState(params ? params.to : 0),
688
+ _useState8 = slicedToArray._slicedToArray(_useState7, 1),
689
+ per = _useState8[0];
681
690
 
682
- var _useState9 = React.useState({
691
+ var _useState9 = React.useState(initialCurrentPage || 1),
692
+ _useState10 = slicedToArray._slicedToArray(_useState9, 2),
693
+ currentPage = _useState10[0],
694
+ setCurrentPage = _useState10[1];
695
+
696
+ var _useState11 = React.useState({
683
697
  from: params ? params.from : 0,
684
698
  to: params ? params.to : 0,
685
699
  page: 1
686
700
  }),
687
- _useState10 = slicedToArray._slicedToArray(_useState9, 2),
688
- values = _useState10[0],
689
- setValues = _useState10[1];
701
+ _useState12 = slicedToArray._slicedToArray(_useState11, 2),
702
+ values = _useState12[0],
703
+ setValues = _useState12[1];
690
704
 
691
705
  var itemsPerPage = params && params.itemsPerPage ? params.itemsPerPage : 10;
692
706
 
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/QueueDeckExpanded.js CHANGED
@@ -154,8 +154,14 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
154
154
  return [].concat(_toConsumableArray(arr.slice(0, index)), [newElement], _toConsumableArray(arr.slice(index)));
155
155
  };
156
156
 
157
+ var _useState = useState(false),
158
+ _useState2 = _slicedToArray(_useState, 2),
159
+ dataRemapped = _useState2[0],
160
+ setDataRemapped = _useState2[1];
157
161
  // Need to pass flag "lgInfeedAd={true}" along with brandInsightAd from site level for large infeed-ad to render
158
162
  // Checking window and lgInfeedAd flag in desktop view ( window >= 1400px ).
163
+
164
+
159
165
  if (lgInfeedAd && brandInsightAd && typeof window !== 'undefined' && window.innerWidth >= 1400) {
160
166
  var lgInfeed = {
161
167
  _type: 'lg-infeed',
@@ -184,8 +190,16 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
184
190
  return lodash.flattenDeep(set);
185
191
  });
186
192
  data = lodash.flatten(chunks);
193
+ !dataRemapped && setDataRemapped(true); // To detect if appending of insights ads are completed
187
194
  }
188
195
 
196
+ // set dataRemap to true as there are no infeed or BI ads or window width is less than limit
197
+ useEffect(function () {
198
+ if (typeof window !== 'undefined' && (!lgInfeedAd || !brandInsightAd || window.innerWidth < 1400) && !dataRemapped) {
199
+ setDataRemapped(true);
200
+ }
201
+ }, []);
202
+
189
203
  if (showBI && brandInsightAd) {
190
204
  // Checking window and lgInfeedAd flag in desktop view ( window >= 1400px ).
191
205
  if (lgInfeedAd && typeof window !== 'undefined' && window.innerWidth >= 1400) brandInsightAd.interval = 8;
@@ -234,7 +248,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
234
248
  return React__default.createElement(
235
249
  'div',
236
250
  null,
237
- data && data.length > 0 ? data.map(function (article, index) {
251
+ data && dataRemapped && data.length > 0 ? data.map(function (article, index) {
238
252
  var pageNumber = article.pageNumber || values.page;
239
253
  var contentCategoryName = article.contentCategory ? article.contentCategory.name : 'Articles';
240
254
 
@@ -654,33 +668,33 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
654
668
 
655
669
  var builder = imageUrlBuilder(client);
656
670
 
657
- var _useState = useState(initialData),
658
- _useState2 = _slicedToArray(_useState, 2),
659
- data = _useState2[0],
660
- setData = _useState2[1];
661
-
662
- var _useState3 = useState(true),
671
+ var _useState3 = useState(initialData),
663
672
  _useState4 = _slicedToArray(_useState3, 2),
664
- scrolling = _useState4[0],
665
- setScrolling = _useState4[1];
673
+ data = _useState4[0],
674
+ setData = _useState4[1];
666
675
 
667
- var _useState5 = useState(params ? params.to : 0),
668
- _useState6 = _slicedToArray(_useState5, 1),
669
- per = _useState6[0];
676
+ var _useState5 = useState(true),
677
+ _useState6 = _slicedToArray(_useState5, 2),
678
+ scrolling = _useState6[0],
679
+ setScrolling = _useState6[1];
670
680
 
671
- var _useState7 = useState(initialCurrentPage || 1),
672
- _useState8 = _slicedToArray(_useState7, 2),
673
- currentPage = _useState8[0],
674
- setCurrentPage = _useState8[1];
681
+ var _useState7 = useState(params ? params.to : 0),
682
+ _useState8 = _slicedToArray(_useState7, 1),
683
+ per = _useState8[0];
675
684
 
676
- var _useState9 = useState({
685
+ var _useState9 = useState(initialCurrentPage || 1),
686
+ _useState10 = _slicedToArray(_useState9, 2),
687
+ currentPage = _useState10[0],
688
+ setCurrentPage = _useState10[1];
689
+
690
+ var _useState11 = useState({
677
691
  from: params ? params.from : 0,
678
692
  to: params ? params.to : 0,
679
693
  page: 1
680
694
  }),
681
- _useState10 = _slicedToArray(_useState9, 2),
682
- values = _useState10[0],
683
- setValues = _useState10[1];
695
+ _useState12 = _slicedToArray(_useState11, 2),
696
+ values = _useState12[0],
697
+ setValues = _useState12[1];
684
698
 
685
699
  var itemsPerPage = params && params.itemsPerPage ? params.itemsPerPage : 10;
686
700
 
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.471",
3
+ "version": "1.0.473",
4
4
  "description": "Foundation Framework",
5
5
  "author": "mjh-framework",
6
6
  "license": "MIT",