@mjhls/mjh-framework 1.0.864 → 1.0.865
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.
- package/README.md +1 -1
- package/dist/cjs/ArticleCarousel.js +2 -5
- package/dist/cjs/HorizontalArticleListing.js +5 -5
- package/dist/cjs/YoutubeGroup.js +20 -26
- package/dist/esm/ArticleCarousel.js +2 -5
- package/dist/esm/HorizontalArticleListing.js +5 -5
- package/dist/esm/YoutubeGroup.js +20 -26
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# mjh-framework v. 1.0.
|
|
1
|
+
# mjh-framework v. 1.0.865
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/mjh-framework) [](https://standardjs.com)
|
|
4
4
|
|
|
@@ -6,12 +6,9 @@ var YoutubeGroup = require('./YoutubeGroup.js');
|
|
|
6
6
|
require('./_commonjsHelpers-06173234.js');
|
|
7
7
|
require('./_to-object-6de10e57.js');
|
|
8
8
|
require('./_object-pie-083f2dd6.js');
|
|
9
|
-
require('./typeof-88a668c5.js');
|
|
10
|
-
require('./es6.string.iterator-c2573ffd.js');
|
|
11
|
-
require('./web.dom.iterable-46657b5c.js');
|
|
12
|
-
require('./_is-array-6128bd56.js');
|
|
13
|
-
require('./_library-dd23b178.js');
|
|
14
9
|
require('./slicedToArray-5d1bc3b3.js');
|
|
10
|
+
require('./web.dom.iterable-46657b5c.js');
|
|
11
|
+
require('./es6.string.iterator-c2573ffd.js');
|
|
15
12
|
require('./core.get-iterator-method-f474eacc.js');
|
|
16
13
|
require('./index-187c967e.js');
|
|
17
14
|
require('./index-eadd5035.js');
|
|
@@ -10,12 +10,9 @@ require('./_commonjsHelpers-06173234.js');
|
|
|
10
10
|
require('./_to-object-6de10e57.js');
|
|
11
11
|
require('./_object-pie-083f2dd6.js');
|
|
12
12
|
require('./YoutubeGroup.js');
|
|
13
|
-
require('./typeof-88a668c5.js');
|
|
14
|
-
require('./es6.string.iterator-c2573ffd.js');
|
|
15
|
-
require('./web.dom.iterable-46657b5c.js');
|
|
16
|
-
require('./_is-array-6128bd56.js');
|
|
17
|
-
require('./_library-dd23b178.js');
|
|
18
13
|
require('./slicedToArray-5d1bc3b3.js');
|
|
14
|
+
require('./web.dom.iterable-46657b5c.js');
|
|
15
|
+
require('./es6.string.iterator-c2573ffd.js');
|
|
19
16
|
require('./core.get-iterator-method-f474eacc.js');
|
|
20
17
|
require('./index-187c967e.js');
|
|
21
18
|
require('./index-eadd5035.js');
|
|
@@ -33,8 +30,11 @@ require('./util-6f784d85.js');
|
|
|
33
30
|
require('./Beam.js');
|
|
34
31
|
require('./stringify-c9ac1214.js');
|
|
35
32
|
require('./asyncToGenerator-58c289d9.js');
|
|
33
|
+
require('./_library-dd23b178.js');
|
|
36
34
|
require('./_iter-detect-55a5657a.js');
|
|
37
35
|
require('./Segment.js');
|
|
36
|
+
require('./typeof-88a668c5.js');
|
|
37
|
+
require('./_is-array-6128bd56.js');
|
|
38
38
|
require('./brightcove-react-player-loader.es-a195642e.js');
|
|
39
39
|
require('./GroupDeck.js');
|
|
40
40
|
require('./moment-aca40de1.js');
|
package/dist/cjs/YoutubeGroup.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var _typeof = require('./typeof-88a668c5.js');
|
|
4
3
|
var slicedToArray = require('./slicedToArray-5d1bc3b3.js');
|
|
5
4
|
var React = require('react');
|
|
6
5
|
var index = require('./index-187c967e.js');
|
|
@@ -9,12 +8,9 @@ var smoothscroll = require('./smoothscroll-99df7f93.js');
|
|
|
9
8
|
var urlFor = require('./urlFor.js');
|
|
10
9
|
var main = require('./main-f1c77adb.js');
|
|
11
10
|
require('./_commonjsHelpers-06173234.js');
|
|
11
|
+
require('./web.dom.iterable-46657b5c.js');
|
|
12
12
|
require('./es6.string.iterator-c2573ffd.js');
|
|
13
13
|
require('./_to-object-6de10e57.js');
|
|
14
|
-
require('./web.dom.iterable-46657b5c.js');
|
|
15
|
-
require('./_is-array-6128bd56.js');
|
|
16
|
-
require('./_object-pie-083f2dd6.js');
|
|
17
|
-
require('./_library-dd23b178.js');
|
|
18
14
|
require('./core.get-iterator-method-f474eacc.js');
|
|
19
15
|
require('react-dom');
|
|
20
16
|
require('prop-types');
|
|
@@ -58,7 +54,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
58
54
|
setTileHeight = _useState8[1];
|
|
59
55
|
|
|
60
56
|
React.useEffect(function () {
|
|
61
|
-
//IE11 Polyfill
|
|
57
|
+
// IE11 Polyfill
|
|
62
58
|
smoothscroll.smoothscroll.polyfill();
|
|
63
59
|
if (viewableWindow.current) {
|
|
64
60
|
setThumbSize();
|
|
@@ -144,43 +140,43 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
144
140
|
var slide = e.target.parentElement;
|
|
145
141
|
var scrollOffset = scrollPosition;
|
|
146
142
|
var viewableWidth = slide.clientWidth;
|
|
143
|
+
var innerSliderScrollWidth = innerSlider.current.scrollWidth;
|
|
147
144
|
|
|
148
|
-
//calculate viewable size / slide
|
|
149
|
-
var numberOfSlidesToScroll = Math.floor(tileArray.current[0].clientWidth + 8); //width of the tile plus margin
|
|
145
|
+
// calculate viewable size / slide
|
|
146
|
+
var numberOfSlidesToScroll = Math.floor(tileArray.current[0].clientWidth + 8); // width of the tile plus margin
|
|
150
147
|
|
|
151
148
|
var scrollDirection = void 0;
|
|
152
149
|
|
|
153
150
|
if (direction === 'next') {
|
|
154
151
|
scrollDirection = scrollOffset + numberOfSlidesToScroll;
|
|
155
152
|
|
|
156
|
-
if (scrollOffset + viewableWidth + 8 >=
|
|
153
|
+
if (scrollOffset + viewableWidth + 8 >= innerSliderScrollWidth) {
|
|
157
154
|
scrollDirection = 0;
|
|
158
155
|
}
|
|
159
156
|
}
|
|
160
157
|
if (direction === 'prev') {
|
|
161
158
|
scrollDirection = scrollOffset - numberOfSlidesToScroll;
|
|
162
|
-
|
|
163
159
|
if (scrollOffset <= 0) {
|
|
164
160
|
if (viewableWindow.current.offsetWidth > 1399) {
|
|
165
|
-
scrollDirection =
|
|
161
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 5;
|
|
166
162
|
}
|
|
167
|
-
if (viewableWindow.current.offsetWidth < 1399 &&
|
|
168
|
-
scrollDirection =
|
|
163
|
+
if (viewableWindow.current.offsetWidth < 1399 && innerSliderScrollWidth > 992) {
|
|
164
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 5;
|
|
169
165
|
}
|
|
170
|
-
if (viewableWindow.current.offsetWidth < 992 &&
|
|
171
|
-
scrollDirection =
|
|
166
|
+
if (viewableWindow.current.offsetWidth < 992 && innerSliderScrollWidth > 768) {
|
|
167
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 3;
|
|
172
168
|
}
|
|
173
|
-
if (viewableWindow.current.offsetWidth < 768 &&
|
|
174
|
-
scrollDirection =
|
|
169
|
+
if (viewableWindow.current.offsetWidth < 768 && innerSliderScrollWidth > 604) {
|
|
170
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 2;
|
|
175
171
|
}
|
|
176
172
|
if (viewableWindow.current.offsetWidth < 604) {
|
|
177
|
-
scrollDirection =
|
|
173
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 2;
|
|
178
174
|
}
|
|
179
175
|
if (main.main_49) {
|
|
180
|
-
scrollDirection =
|
|
176
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 2;
|
|
181
177
|
}
|
|
182
178
|
if (main.main_43) {
|
|
183
|
-
scrollDirection =
|
|
179
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 1;
|
|
184
180
|
}
|
|
185
181
|
}
|
|
186
182
|
}
|
|
@@ -216,7 +212,6 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
216
212
|
className: 'tile__slider-prev',
|
|
217
213
|
style: {
|
|
218
214
|
color: '#fff',
|
|
219
|
-
background: 'var(--primary)',
|
|
220
215
|
width: '35px',
|
|
221
216
|
height: '35px',
|
|
222
217
|
borderRadius: '50%',
|
|
@@ -233,7 +228,6 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
233
228
|
className: 'tile__slider-next',
|
|
234
229
|
style: {
|
|
235
230
|
color: '#fff',
|
|
236
|
-
background: 'var(--primary)',
|
|
237
231
|
width: '35px',
|
|
238
232
|
height: '35px',
|
|
239
233
|
borderRadius: '50%',
|
|
@@ -251,7 +245,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
251
245
|
var thumbnail = void 0;
|
|
252
246
|
if (video.thumbnail && video.thumbnail.asset) {
|
|
253
247
|
thumbnail = urlFor({ source: video.thumbnail, client: props.client });
|
|
254
|
-
} else if (
|
|
248
|
+
} else if (typeof video.thumbnail === 'string') {
|
|
255
249
|
thumbnail = video.thumbnail;
|
|
256
250
|
} else {
|
|
257
251
|
thumbnail = 'https://img.youtube.com/vi/' + index.getYoutubeId(video.url) + '/hqdefault.jpg';
|
|
@@ -261,7 +255,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
261
255
|
'div',
|
|
262
256
|
{ ref: function ref(ele) {
|
|
263
257
|
return tileArray.current[index$2] = ele;
|
|
264
|
-
}, key: index$2, className: 'tile', style: { width: tileSize + 'px' } },
|
|
258
|
+
}, key: index$2, className: 'tile', style: { flex: '0 0 ' + tileSize + 'px', width: tileSize + 'px' } },
|
|
265
259
|
current && current === url ? React__default['default'].createElement(
|
|
266
260
|
'div',
|
|
267
261
|
{ className: 'now-playing' },
|
|
@@ -313,7 +307,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
313
307
|
'div',
|
|
314
308
|
{ ref: function ref(ele) {
|
|
315
309
|
return tileArray.current[index$2] = ele;
|
|
316
|
-
}, key: index$2, style: { width: tileSize + 'px' }, className: 'tile' },
|
|
310
|
+
}, key: index$2, style: { flex: '0 0 ' + tileSize + 'px', width: tileSize + 'px' }, className: 'tile' },
|
|
317
311
|
React__default['default'].createElement(
|
|
318
312
|
'a',
|
|
319
313
|
{ href: _url },
|
|
@@ -352,7 +346,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
352
346
|
React__default['default'].createElement(
|
|
353
347
|
'style',
|
|
354
348
|
{ jsx: 'true' },
|
|
355
|
-
'\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 2.5rem;\n margin-bottom: 2rem;\n }\n #vid-slider.col {\n padding: 0 2.5rem;\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 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 .contain {\n width: 100%;\n }\n #vid-slider .row {\n overflow-x: hidden;\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 width: 100%;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 0.9rem;\n font-weight: normal;\n transition: opacity 0.25s;\n }\n #vid-slider .row__inner {\n display: flex;\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-top: 1.5rem !important;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n height: 100%;\n margin-right: 0.5rem;\n font-size: 20px;\n cursor: pointer;\n transition: 450ms all;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n #vid-slider .tile:first-child {\n margin-left: 0;\n }\n #vid-slider .tile__img {\n height: auto;\n\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 .tile__media {\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n }\n\n #vid-slider .tile__title {\n white-space: normal !important;\n max-width: ' + tileSize + 'px;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: ' + (main.main_42 ? '0.75rem' : '0.9rem') + ';\n font-weight: normal;\n transition: opacity 0.25s;\n -webkit-font-smoothing: antialiased;\n }\n\n #vid-slider .tile__slider-prev,\n #vid-slider .tile__slider-next {\n width: 30px;\n background:
|
|
349
|
+
'\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 2.5rem;\n margin-bottom: 2rem;\n }\n #vid-slider.col {\n padding: 0 2.5rem;\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 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 .contain {\n width: 100%;\n }\n #vid-slider .row {\n flex-wrap: nowrap;\n overflow-x: hidden;\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 width: 100%;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 0.9rem;\n font-weight: normal;\n transition: opacity 0.25s;\n }\n #vid-slider .row__inner {\n display: flex;\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-top: 1.5rem !important;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n height: 100%;\n margin-right: 0.5rem;\n font-size: 20px;\n cursor: pointer;\n transition: 450ms all;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n #vid-slider .tile:first-child {\n margin-left: 0;\n }\n #vid-slider .tile__img {\n height: auto;\n\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 .tile__media {\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n }\n\n #vid-slider .tile__title {\n white-space: normal !important;\n max-width: ' + tileSize + 'px;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: ' + (main.main_42 ? '0.75rem' : '0.9rem') + ';\n font-weight: normal;\n transition: opacity 0.25s;\n -webkit-font-smoothing: antialiased;\n }\n\n #vid-slider .tile__slider-prev,\n #vid-slider .tile__slider-next {\n width: 30px;\n background: black;\n background: var(--primary);\n border: none;\n position: absolute;\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 (max-width: 1399px) {\n #vid-slider,\n #vidHolder {\n }\n #vid-slider .tile__img {\n }\n }\n @media screen and (max-width: 1200px) {\n #vid-slider,\n #vidHolder {\n }\n }\n @media screen and (max-width: 967px) {\n #vid-slider {\n max-width: 100%;\n }\n #vid-slider .tile__img {\n }\n }\n\n @media screen and (max-width: 768px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n\n #vid-slider .tile__img {\n }\n #vid-slider .row__inner {\n margin-top: 1.5rem !important;\n }\n }\n\n @media screen and (max-width: 590px) {\n #vid-slider .tile__img {\n }\n }\n '
|
|
356
350
|
)
|
|
357
351
|
);
|
|
358
352
|
};
|
|
@@ -4,12 +4,9 @@ import YoutubeGroup from './YoutubeGroup.js';
|
|
|
4
4
|
import './_commonjsHelpers-0c4b6f40.js';
|
|
5
5
|
import './_to-object-b50e61c3.js';
|
|
6
6
|
import './_object-pie-133f504a.js';
|
|
7
|
-
import './typeof-a286cf0c.js';
|
|
8
|
-
import './es6.string.iterator-bc33758b.js';
|
|
9
|
-
import './web.dom.iterable-4109ff68.js';
|
|
10
|
-
import './_is-array-3e99e06e.js';
|
|
11
|
-
import './_library-528f1934.js';
|
|
12
7
|
import './slicedToArray-be2f7a22.js';
|
|
8
|
+
import './web.dom.iterable-4109ff68.js';
|
|
9
|
+
import './es6.string.iterator-bc33758b.js';
|
|
13
10
|
import './core.get-iterator-method-133dfacd.js';
|
|
14
11
|
import './index-c7e2ac95.js';
|
|
15
12
|
import './index-755f2cc2.js';
|
|
@@ -8,12 +8,9 @@ import './_commonjsHelpers-0c4b6f40.js';
|
|
|
8
8
|
import './_to-object-b50e61c3.js';
|
|
9
9
|
import './_object-pie-133f504a.js';
|
|
10
10
|
import './YoutubeGroup.js';
|
|
11
|
-
import './typeof-a286cf0c.js';
|
|
12
|
-
import './es6.string.iterator-bc33758b.js';
|
|
13
|
-
import './web.dom.iterable-4109ff68.js';
|
|
14
|
-
import './_is-array-3e99e06e.js';
|
|
15
|
-
import './_library-528f1934.js';
|
|
16
11
|
import './slicedToArray-be2f7a22.js';
|
|
12
|
+
import './web.dom.iterable-4109ff68.js';
|
|
13
|
+
import './es6.string.iterator-bc33758b.js';
|
|
17
14
|
import './core.get-iterator-method-133dfacd.js';
|
|
18
15
|
import './index-c7e2ac95.js';
|
|
19
16
|
import './index-755f2cc2.js';
|
|
@@ -31,8 +28,11 @@ import './util-3ab476bf.js';
|
|
|
31
28
|
import './Beam.js';
|
|
32
29
|
import './stringify-59c8f690.js';
|
|
33
30
|
import './asyncToGenerator-7f8f9219.js';
|
|
31
|
+
import './_library-528f1934.js';
|
|
34
32
|
import './_iter-detect-7e5e5ce2.js';
|
|
35
33
|
import './Segment.js';
|
|
34
|
+
import './typeof-a286cf0c.js';
|
|
35
|
+
import './_is-array-3e99e06e.js';
|
|
36
36
|
import './brightcove-react-player-loader.es-57a70a56.js';
|
|
37
37
|
import './GroupDeck.js';
|
|
38
38
|
import './moment-bc12cb97.js';
|
package/dist/esm/YoutubeGroup.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { _ as _typeof } from './typeof-a286cf0c.js';
|
|
2
1
|
import { _ as _slicedToArray } from './slicedToArray-be2f7a22.js';
|
|
3
2
|
import React__default, { useRef, useState, useEffect } from 'react';
|
|
4
3
|
import { g as getYoutubeId } from './index-c7e2ac95.js';
|
|
@@ -7,12 +6,9 @@ import { s as smoothscroll } from './smoothscroll-fa4e3f8c.js';
|
|
|
7
6
|
import urlFor from './urlFor.js';
|
|
8
7
|
import { m as main_43, a as main_49, b as main_42 } from './main-d4165069.js';
|
|
9
8
|
import './_commonjsHelpers-0c4b6f40.js';
|
|
9
|
+
import './web.dom.iterable-4109ff68.js';
|
|
10
10
|
import './es6.string.iterator-bc33758b.js';
|
|
11
11
|
import './_to-object-b50e61c3.js';
|
|
12
|
-
import './web.dom.iterable-4109ff68.js';
|
|
13
|
-
import './_is-array-3e99e06e.js';
|
|
14
|
-
import './_object-pie-133f504a.js';
|
|
15
|
-
import './_library-528f1934.js';
|
|
16
12
|
import './core.get-iterator-method-133dfacd.js';
|
|
17
13
|
import 'react-dom';
|
|
18
14
|
import 'prop-types';
|
|
@@ -52,7 +48,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
52
48
|
setTileHeight = _useState8[1];
|
|
53
49
|
|
|
54
50
|
useEffect(function () {
|
|
55
|
-
//IE11 Polyfill
|
|
51
|
+
// IE11 Polyfill
|
|
56
52
|
smoothscroll.polyfill();
|
|
57
53
|
if (viewableWindow.current) {
|
|
58
54
|
setThumbSize();
|
|
@@ -138,43 +134,43 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
138
134
|
var slide = e.target.parentElement;
|
|
139
135
|
var scrollOffset = scrollPosition;
|
|
140
136
|
var viewableWidth = slide.clientWidth;
|
|
137
|
+
var innerSliderScrollWidth = innerSlider.current.scrollWidth;
|
|
141
138
|
|
|
142
|
-
//calculate viewable size / slide
|
|
143
|
-
var numberOfSlidesToScroll = Math.floor(tileArray.current[0].clientWidth + 8); //width of the tile plus margin
|
|
139
|
+
// calculate viewable size / slide
|
|
140
|
+
var numberOfSlidesToScroll = Math.floor(tileArray.current[0].clientWidth + 8); // width of the tile plus margin
|
|
144
141
|
|
|
145
142
|
var scrollDirection = void 0;
|
|
146
143
|
|
|
147
144
|
if (direction === 'next') {
|
|
148
145
|
scrollDirection = scrollOffset + numberOfSlidesToScroll;
|
|
149
146
|
|
|
150
|
-
if (scrollOffset + viewableWidth + 8 >=
|
|
147
|
+
if (scrollOffset + viewableWidth + 8 >= innerSliderScrollWidth) {
|
|
151
148
|
scrollDirection = 0;
|
|
152
149
|
}
|
|
153
150
|
}
|
|
154
151
|
if (direction === 'prev') {
|
|
155
152
|
scrollDirection = scrollOffset - numberOfSlidesToScroll;
|
|
156
|
-
|
|
157
153
|
if (scrollOffset <= 0) {
|
|
158
154
|
if (viewableWindow.current.offsetWidth > 1399) {
|
|
159
|
-
scrollDirection =
|
|
155
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 5;
|
|
160
156
|
}
|
|
161
|
-
if (viewableWindow.current.offsetWidth < 1399 &&
|
|
162
|
-
scrollDirection =
|
|
157
|
+
if (viewableWindow.current.offsetWidth < 1399 && innerSliderScrollWidth > 992) {
|
|
158
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 5;
|
|
163
159
|
}
|
|
164
|
-
if (viewableWindow.current.offsetWidth < 992 &&
|
|
165
|
-
scrollDirection =
|
|
160
|
+
if (viewableWindow.current.offsetWidth < 992 && innerSliderScrollWidth > 768) {
|
|
161
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 3;
|
|
166
162
|
}
|
|
167
|
-
if (viewableWindow.current.offsetWidth < 768 &&
|
|
168
|
-
scrollDirection =
|
|
163
|
+
if (viewableWindow.current.offsetWidth < 768 && innerSliderScrollWidth > 604) {
|
|
164
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 2;
|
|
169
165
|
}
|
|
170
166
|
if (viewableWindow.current.offsetWidth < 604) {
|
|
171
|
-
scrollDirection =
|
|
167
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 2;
|
|
172
168
|
}
|
|
173
169
|
if (main_49) {
|
|
174
|
-
scrollDirection =
|
|
170
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 2;
|
|
175
171
|
}
|
|
176
172
|
if (main_43) {
|
|
177
|
-
scrollDirection =
|
|
173
|
+
scrollDirection = innerSliderScrollWidth - numberOfSlidesToScroll * 1;
|
|
178
174
|
}
|
|
179
175
|
}
|
|
180
176
|
}
|
|
@@ -210,7 +206,6 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
210
206
|
className: 'tile__slider-prev',
|
|
211
207
|
style: {
|
|
212
208
|
color: '#fff',
|
|
213
|
-
background: 'var(--primary)',
|
|
214
209
|
width: '35px',
|
|
215
210
|
height: '35px',
|
|
216
211
|
borderRadius: '50%',
|
|
@@ -227,7 +222,6 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
227
222
|
className: 'tile__slider-next',
|
|
228
223
|
style: {
|
|
229
224
|
color: '#fff',
|
|
230
|
-
background: 'var(--primary)',
|
|
231
225
|
width: '35px',
|
|
232
226
|
height: '35px',
|
|
233
227
|
borderRadius: '50%',
|
|
@@ -245,7 +239,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
245
239
|
var thumbnail = void 0;
|
|
246
240
|
if (video.thumbnail && video.thumbnail.asset) {
|
|
247
241
|
thumbnail = urlFor({ source: video.thumbnail, client: props.client });
|
|
248
|
-
} else if (
|
|
242
|
+
} else if (typeof video.thumbnail === 'string') {
|
|
249
243
|
thumbnail = video.thumbnail;
|
|
250
244
|
} else {
|
|
251
245
|
thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
|
|
@@ -255,7 +249,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
255
249
|
'div',
|
|
256
250
|
{ ref: function ref(ele) {
|
|
257
251
|
return tileArray.current[index] = ele;
|
|
258
|
-
}, key: index, className: 'tile', style: { width: tileSize + 'px' } },
|
|
252
|
+
}, key: index, className: 'tile', style: { flex: '0 0 ' + tileSize + 'px', width: tileSize + 'px' } },
|
|
259
253
|
current && current === url ? React__default.createElement(
|
|
260
254
|
'div',
|
|
261
255
|
{ className: 'now-playing' },
|
|
@@ -307,7 +301,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
307
301
|
'div',
|
|
308
302
|
{ ref: function ref(ele) {
|
|
309
303
|
return tileArray.current[index] = ele;
|
|
310
|
-
}, key: index, style: { width: tileSize + 'px' }, className: 'tile' },
|
|
304
|
+
}, key: index, style: { flex: '0 0 ' + tileSize + 'px', width: tileSize + 'px' }, className: 'tile' },
|
|
311
305
|
React__default.createElement(
|
|
312
306
|
'a',
|
|
313
307
|
{ href: _url },
|
|
@@ -346,7 +340,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
346
340
|
React__default.createElement(
|
|
347
341
|
'style',
|
|
348
342
|
{ jsx: 'true' },
|
|
349
|
-
'\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 2.5rem;\n margin-bottom: 2rem;\n }\n #vid-slider.col {\n padding: 0 2.5rem;\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 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 .contain {\n width: 100%;\n }\n #vid-slider .row {\n overflow-x: hidden;\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 width: 100%;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 0.9rem;\n font-weight: normal;\n transition: opacity 0.25s;\n }\n #vid-slider .row__inner {\n display: flex;\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-top: 1.5rem !important;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n height: 100%;\n margin-right: 0.5rem;\n font-size: 20px;\n cursor: pointer;\n transition: 450ms all;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n #vid-slider .tile:first-child {\n margin-left: 0;\n }\n #vid-slider .tile__img {\n height: auto;\n\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 .tile__media {\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n }\n\n #vid-slider .tile__title {\n white-space: normal !important;\n max-width: ' + tileSize + 'px;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: ' + (main_42 ? '0.75rem' : '0.9rem') + ';\n font-weight: normal;\n transition: opacity 0.25s;\n -webkit-font-smoothing: antialiased;\n }\n\n #vid-slider .tile__slider-prev,\n #vid-slider .tile__slider-next {\n width: 30px;\n background:
|
|
343
|
+
'\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 2.5rem;\n margin-bottom: 2rem;\n }\n #vid-slider.col {\n padding: 0 2.5rem;\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 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 .contain {\n width: 100%;\n }\n #vid-slider .row {\n flex-wrap: nowrap;\n overflow-x: hidden;\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 width: 100%;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 0.9rem;\n font-weight: normal;\n transition: opacity 0.25s;\n }\n #vid-slider .row__inner {\n display: flex;\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-top: 1.5rem !important;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n height: 100%;\n margin-right: 0.5rem;\n font-size: 20px;\n cursor: pointer;\n transition: 450ms all;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n #vid-slider .tile:first-child {\n margin-left: 0;\n }\n #vid-slider .tile__img {\n height: auto;\n\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 .tile__media {\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n }\n\n #vid-slider .tile__title {\n white-space: normal !important;\n max-width: ' + tileSize + 'px;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: ' + (main_42 ? '0.75rem' : '0.9rem') + ';\n font-weight: normal;\n transition: opacity 0.25s;\n -webkit-font-smoothing: antialiased;\n }\n\n #vid-slider .tile__slider-prev,\n #vid-slider .tile__slider-next {\n width: 30px;\n background: black;\n background: var(--primary);\n border: none;\n position: absolute;\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 (max-width: 1399px) {\n #vid-slider,\n #vidHolder {\n }\n #vid-slider .tile__img {\n }\n }\n @media screen and (max-width: 1200px) {\n #vid-slider,\n #vidHolder {\n }\n }\n @media screen and (max-width: 967px) {\n #vid-slider {\n max-width: 100%;\n }\n #vid-slider .tile__img {\n }\n }\n\n @media screen and (max-width: 768px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n\n #vid-slider .tile__img {\n }\n #vid-slider .row__inner {\n margin-top: 1.5rem !important;\n }\n }\n\n @media screen and (max-width: 590px) {\n #vid-slider .tile__img {\n }\n }\n '
|
|
350
344
|
)
|
|
351
345
|
);
|
|
352
346
|
};
|