@mjhls/mjh-framework 1.0.74 → 1.0.76
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/index.es.js +283 -101
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +283 -100
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/index.es.js
CHANGED
|
@@ -5519,23 +5519,23 @@ var GroupDeck = function GroupDeck(props) {
|
|
|
5519
5519
|
return React__default.createElement(
|
|
5520
5520
|
'div',
|
|
5521
5521
|
{ id: 'vid-slider', className: 'col' },
|
|
5522
|
+
React__default.createElement(
|
|
5523
|
+
'div',
|
|
5524
|
+
{ onClick: function onClick(e) {
|
|
5525
|
+
return scrollSlider(e, 'prev');
|
|
5526
|
+
}, className: 'tile__slider-prev', style: { color: variant } },
|
|
5527
|
+
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
|
|
5528
|
+
),
|
|
5529
|
+
React__default.createElement(
|
|
5530
|
+
'div',
|
|
5531
|
+
{ onClick: function onClick(e) {
|
|
5532
|
+
return scrollSlider(e, 'next');
|
|
5533
|
+
}, className: 'tile__slider-next', style: { color: variant } },
|
|
5534
|
+
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
|
|
5535
|
+
),
|
|
5522
5536
|
React__default.createElement(
|
|
5523
5537
|
'div',
|
|
5524
5538
|
{ className: 'row' },
|
|
5525
|
-
React__default.createElement(
|
|
5526
|
-
'div',
|
|
5527
|
-
{ onClick: function onClick(e) {
|
|
5528
|
-
return scrollSlider(e, 'prev');
|
|
5529
|
-
}, className: 'tile__slider-prev', style: { color: variant } },
|
|
5530
|
-
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
|
|
5531
|
-
),
|
|
5532
|
-
React__default.createElement(
|
|
5533
|
-
'div',
|
|
5534
|
-
{ onClick: function onClick(e) {
|
|
5535
|
-
return scrollSlider(e, 'next');
|
|
5536
|
-
}, className: 'tile__slider-next', style: { color: variant } },
|
|
5537
|
-
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
|
|
5538
|
-
),
|
|
5539
5539
|
React__default.createElement(
|
|
5540
5540
|
'div',
|
|
5541
5541
|
{ className: 'row__inner' },
|
|
@@ -5627,7 +5627,207 @@ var GroupDeck = function GroupDeck(props) {
|
|
|
5627
5627
|
React__default.createElement(
|
|
5628
5628
|
'style',
|
|
5629
5629
|
{ jsx: true },
|
|
5630
|
-
'\n #vid-slider * {\n box-sizing: border-box;\n }\n #vid-slider {\n position: relative;\n }\n #vid-slider .now-playing {\n position: absolute;\n top:
|
|
5630
|
+
'\n #vid-slider * {\n box-sizing: border-box;\n }\n #vid-slider {\n position: relative;\n }\n #vid-slider .now-playing {\n position: absolute;\n top: .5rem;\n left: .5rem;\n color: white;\n padding: 0 1rem;\n background: rgba(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 a:hover {\n color: #7f8c8d;\n text-decoration: underline;\n }\n #vid-slider .contain {\n width: 100%;\n }\n #vid-slider .row {\n overflow: scroll;\n width: 100%;\n }\n #vid-slider .tile__info {\n white-space: normal !important;\n position: absolute;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 1rem;\n transition: opacity 0.25s;\n }\n #vid-slider .row__inner {\n transition: 450ms -webkit-transform;\n transition: 450ms transform;\n transition: 450ms transform, 450ms -webkit-transform;\n font-size: 0;\n white-space: nowrap;\n margin: 55px 0;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n width: 250px;\n height: 140.625px;\n margin-right: 10px;\n font-size: 20px;\n cursor: pointer;\n transition: 450ms all;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n #vid-slider .tile__img {\n width: 250px;\n height: 140.625px;\n -o-object-fit: cover;\n object-fit: cover;\n }\n #vid-slider .tile__details {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n top: 0;\n font-size: 10px;\n opacity: 0;\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n transition: 450ms opacity;\n }\n #vid-slider .tile__details:after,\n #vid-slider .tile__details:before {\n content: \'\';\n position: absolute;\n top: 50%;\n left: 50%;\n display: #000;\n }\n #vid-slider .tile__details:after {\n margin-top: -25px;\n margin-left: -25px;\n width: 50px;\n height: 50px;\n border: 3px solid #ecf0f1;\n line-height: 50px;\n text-align: center;\n border-radius: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1;\n }\n #vid-slider .tile__details:before {\n content: \'\u25B6\';\n left: 0;\n width: 100%;\n font-size: 30px;\n margin-left: 2px;\n margin-top: -23px;\n text-align: center;\n z-index: 2;\n color: white;\n }\n #vid-slider .tile:hover .tile__details {\n opacity: 1;\n }\n #vid-slider .tile__title {\n position: absolute;\n bottom: 0;\n padding: 10px;\n max-width: 250px;\n }\n #vid-slider .tile__title_text {\n position: relative;\n left: 0;\n white-space: normal;\n }\n #vid-slider .row__inner:hover {\n -webkit-transform: translate3d(-62.5px, 0, 0);\n transform: translate3d(-62.5px, 0, 0);\n }\n #vid-slider .row__inner:hover .tile {\n opacity: 0.3;\n }\n #vid-slider .row__inner:hover .tile:hover {\n -webkit-transform: scale(1.25);\n transform: scale(1.25);\n opacity: 1;\n }\n #vid-slider .tile:hover ~ .tile {\n -webkit-transform: translate3d(62px, 0, 0);\n transform: translate3d(62px, 0, 0);\n }\n #vid-slider .tile:hover .tile__info {\n opacity: 0;\n }\n #vid-slider .tile__slider-prev,\n #vid-slider .tile__slider-next {\n width: 30px;\n background: transparent;\n border: none;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 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: -3px;\n }\n #vid-slider .tile__slider-next {\n right: 0;\n }\n #vid-slider,\n #vid-slider .row {\n margin: 0;\n padding: 0 1.2rem;\n }\n #vid-slider .tile:last-child {\n margin-right: 2rem;\n }\n #vid-slider .row::-webkit-scrollbar-thumb {\n background-color: transparent !important;\n }\n #vid-slider i {\n border: solid ' + (props.dark ? 'white' : 'black') + ';\n border-width: 0 4px 4px 0;\n display: inline-block;\n padding: 4px;\n pointer-events: none;\n }\n\n #vid-slider .right {\n transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n }\n\n #vid-slider .left {\n transform: rotate(135deg);\n -webkit-transform: rotate(135deg);\n }\n '
|
|
5631
|
+
)
|
|
5632
|
+
);
|
|
5633
|
+
};
|
|
5634
|
+
|
|
5635
|
+
var getYoutubeId = createCommonjsModule(function (module, exports) {
|
|
5636
|
+
(function (root, factory) {
|
|
5637
|
+
{
|
|
5638
|
+
module.exports = factory();
|
|
5639
|
+
}
|
|
5640
|
+
}(commonjsGlobal, function (exports) {
|
|
5641
|
+
|
|
5642
|
+
return function (url, opts) {
|
|
5643
|
+
if (opts == undefined) {
|
|
5644
|
+
opts = {fuzzy: true};
|
|
5645
|
+
}
|
|
5646
|
+
|
|
5647
|
+
if (/youtu\.?be/.test(url)) {
|
|
5648
|
+
|
|
5649
|
+
// Look first for known patterns
|
|
5650
|
+
var i;
|
|
5651
|
+
var patterns = [
|
|
5652
|
+
/youtu\.be\/([^#\&\?]{11})/, // youtu.be/<id>
|
|
5653
|
+
/\?v=([^#\&\?]{11})/, // ?v=<id>
|
|
5654
|
+
/\&v=([^#\&\?]{11})/, // &v=<id>
|
|
5655
|
+
/embed\/([^#\&\?]{11})/, // embed/<id>
|
|
5656
|
+
/\/v\/([^#\&\?]{11})/ // /v/<id>
|
|
5657
|
+
];
|
|
5658
|
+
|
|
5659
|
+
// If any pattern matches, return the ID
|
|
5660
|
+
for (i = 0; i < patterns.length; ++i) {
|
|
5661
|
+
if (patterns[i].test(url)) {
|
|
5662
|
+
return patterns[i].exec(url)[1];
|
|
5663
|
+
}
|
|
5664
|
+
}
|
|
5665
|
+
|
|
5666
|
+
if (opts.fuzzy) {
|
|
5667
|
+
// If that fails, break it apart by certain characters and look
|
|
5668
|
+
// for the 11 character key
|
|
5669
|
+
var tokens = url.split(/[\/\&\?=#\.\s]/g);
|
|
5670
|
+
for (i = 0; i < tokens.length; ++i) {
|
|
5671
|
+
if (/^[^#\&\?]{11}$/.test(tokens[i])) {
|
|
5672
|
+
return tokens[i];
|
|
5673
|
+
}
|
|
5674
|
+
}
|
|
5675
|
+
}
|
|
5676
|
+
}
|
|
5677
|
+
|
|
5678
|
+
return null;
|
|
5679
|
+
};
|
|
5680
|
+
|
|
5681
|
+
}));
|
|
5682
|
+
});
|
|
5683
|
+
|
|
5684
|
+
/*
|
|
5685
|
+
GROQ query -
|
|
5686
|
+
accepts an array of title, URL
|
|
5687
|
+
`http://img.youtube.com/vi/${getYouTubeId(vid.url)}/hqdefault.jpg`
|
|
5688
|
+
*/
|
|
5689
|
+
var YoutubeGroup = function YoutubeGroup(props) {
|
|
5690
|
+
// Props should be an array of objects containing Thumbnail, title, and URL
|
|
5691
|
+
var get2 = props.get2 ? '/' + props.get2 + '/' : '/view/';
|
|
5692
|
+
|
|
5693
|
+
var variant = props.dark ? 'white' : '#383838';
|
|
5694
|
+
function scrollSlider(e, direction) {
|
|
5695
|
+
var slide = e.target.parentElement;
|
|
5696
|
+
var scrollOffset = slide.scrollLeft;
|
|
5697
|
+
var viewableWidth = slide.clientWidth > 700 ? 3 * (document.querySelector('.tile').scrollWidth + 8) : document.querySelector('.tile').scrollWidth + 8;
|
|
5698
|
+
var scrollDirection = void 0;
|
|
5699
|
+
if (direction === 'next') {
|
|
5700
|
+
scrollDirection = scrollOffset + viewableWidth;
|
|
5701
|
+
}
|
|
5702
|
+
if (direction === 'prev') {
|
|
5703
|
+
scrollDirection = scrollOffset - viewableWidth;
|
|
5704
|
+
}
|
|
5705
|
+
slide.scrollTo({
|
|
5706
|
+
left: scrollDirection,
|
|
5707
|
+
behavior: 'smooth'
|
|
5708
|
+
});
|
|
5709
|
+
}
|
|
5710
|
+
function handleClick(url, vidIndex) {
|
|
5711
|
+
props.setState(url, vidIndex);
|
|
5712
|
+
}
|
|
5713
|
+
var _props$current = props.current,
|
|
5714
|
+
current = _props$current === undefined ? '' : _props$current;
|
|
5715
|
+
|
|
5716
|
+
|
|
5717
|
+
return React__default.createElement(
|
|
5718
|
+
'div',
|
|
5719
|
+
{ id: 'vid-slider', className: 'col' },
|
|
5720
|
+
React__default.createElement(
|
|
5721
|
+
'div',
|
|
5722
|
+
{ onClick: function onClick(e) {
|
|
5723
|
+
return scrollSlider(e, 'prev');
|
|
5724
|
+
}, className: 'tile__slider-prev', style: { color: variant } },
|
|
5725
|
+
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
|
|
5726
|
+
),
|
|
5727
|
+
React__default.createElement(
|
|
5728
|
+
'div',
|
|
5729
|
+
{ onClick: function onClick(e) {
|
|
5730
|
+
return scrollSlider(e, 'next');
|
|
5731
|
+
}, className: 'tile__slider-next', style: { color: variant } },
|
|
5732
|
+
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
|
|
5733
|
+
),
|
|
5734
|
+
React__default.createElement(
|
|
5735
|
+
'div',
|
|
5736
|
+
{ className: 'row' },
|
|
5737
|
+
React__default.createElement(
|
|
5738
|
+
'div',
|
|
5739
|
+
{ className: 'row__inner' },
|
|
5740
|
+
props.dataset && props.dataset.map(function (video, index) {
|
|
5741
|
+
// If there is a current prop, means this will overlay a currently playing video
|
|
5742
|
+
if (current !== '') {
|
|
5743
|
+
var url = video.url;
|
|
5744
|
+
var thumbnail = 'http://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
|
|
5745
|
+
|
|
5746
|
+
return React__default.createElement(
|
|
5747
|
+
'div',
|
|
5748
|
+
{ key: index, className: 'tile' },
|
|
5749
|
+
current && current === url ? React__default.createElement(
|
|
5750
|
+
'div',
|
|
5751
|
+
{ className: 'now-playing' },
|
|
5752
|
+
'Now Playing'
|
|
5753
|
+
) : '',
|
|
5754
|
+
React__default.createElement(
|
|
5755
|
+
'a',
|
|
5756
|
+
{ onClick: function onClick() {
|
|
5757
|
+
return handleClick(url, index + 1);
|
|
5758
|
+
} },
|
|
5759
|
+
React__default.createElement(
|
|
5760
|
+
'div',
|
|
5761
|
+
{ className: 'tile__media' },
|
|
5762
|
+
React__default.createElement('img', { className: 'tile__img', src: thumbnail, alt: '' })
|
|
5763
|
+
),
|
|
5764
|
+
React__default.createElement(
|
|
5765
|
+
'div',
|
|
5766
|
+
{ className: 'tile__details' },
|
|
5767
|
+
React__default.createElement(
|
|
5768
|
+
'div',
|
|
5769
|
+
{ className: 'tile__title' },
|
|
5770
|
+
React__default.createElement(
|
|
5771
|
+
'div',
|
|
5772
|
+
{ style: { color: variant }, className: 'tile__title_text' },
|
|
5773
|
+
video.title
|
|
5774
|
+
)
|
|
5775
|
+
)
|
|
5776
|
+
),
|
|
5777
|
+
React__default.createElement(
|
|
5778
|
+
'div',
|
|
5779
|
+
{ style: { color: variant }, className: 'tile__info' },
|
|
5780
|
+
video.title
|
|
5781
|
+
)
|
|
5782
|
+
)
|
|
5783
|
+
);
|
|
5784
|
+
} else {
|
|
5785
|
+
// slider by itself
|
|
5786
|
+
var _url = '' + video.link;
|
|
5787
|
+
var _thumbnail = 'http://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
|
|
5788
|
+
return React__default.createElement(
|
|
5789
|
+
'div',
|
|
5790
|
+
{ key: index, className: 'tile' },
|
|
5791
|
+
React__default.createElement(
|
|
5792
|
+
Link,
|
|
5793
|
+
{ href: _url },
|
|
5794
|
+
React__default.createElement(
|
|
5795
|
+
'a',
|
|
5796
|
+
null,
|
|
5797
|
+
React__default.createElement(
|
|
5798
|
+
'div',
|
|
5799
|
+
{ className: 'tile__media' },
|
|
5800
|
+
React__default.createElement('img', { className: 'tile__img', src: _thumbnail, alt: '' })
|
|
5801
|
+
),
|
|
5802
|
+
React__default.createElement(
|
|
5803
|
+
'div',
|
|
5804
|
+
{ className: 'tile__details' },
|
|
5805
|
+
React__default.createElement(
|
|
5806
|
+
'div',
|
|
5807
|
+
{ className: 'tile__title' },
|
|
5808
|
+
React__default.createElement(
|
|
5809
|
+
'div',
|
|
5810
|
+
{ style: { color: variant }, className: 'tile__title_text' },
|
|
5811
|
+
video.title
|
|
5812
|
+
)
|
|
5813
|
+
)
|
|
5814
|
+
),
|
|
5815
|
+
React__default.createElement(
|
|
5816
|
+
'div',
|
|
5817
|
+
{ style: { color: variant }, className: 'tile__info' },
|
|
5818
|
+
video.title
|
|
5819
|
+
)
|
|
5820
|
+
)
|
|
5821
|
+
)
|
|
5822
|
+
);
|
|
5823
|
+
}
|
|
5824
|
+
})
|
|
5825
|
+
)
|
|
5826
|
+
),
|
|
5827
|
+
React__default.createElement(
|
|
5828
|
+
'style',
|
|
5829
|
+
{ jsx: true },
|
|
5830
|
+
'\n #vid-slider * {\n box-sizing: border-box;\n }\n #vid-slider {\n position: relative;\n }\n #vid-slider .now-playing {\n position: absolute;\n top: .5rem;\n left: 1rem;\n color: white;\n background: rgba(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 a:hover {\n color: #7f8c8d;\n text-decoration: underline;\n }\n #vid-slider .contain {\n width: 100%;\n }\n #vid-slider .row {\n overflow: scroll;\n width: 100%;\n }\n #vid-slider .tile__info {\n white-space: normal !important;\n position: absolute;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 1rem;\n transition: opacity 0.25s;\n }\n #vid-slider .row__inner {\n transition: 450ms -webkit-transform;\n transition: 450ms transform;\n transition: 450ms transform, 450ms -webkit-transform;\n font-size: 0;\n white-space: nowrap;\n margin: 55px 0;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n width: 250px;\n height: 140.625px;\n margin-right: 10px;\n font-size: 20px;\n cursor: pointer;\n transition: 450ms all;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n #vid-slider .tile__img {\n width: 250px;\n height: 140.625px;\n -o-object-fit: cover;\n object-fit: cover;\n }\n #vid-slider .tile__details {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n top: 0;\n font-size: 10px;\n opacity: 0;\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n transition: 450ms opacity;\n }\n #vid-slider .tile__details:after,\n #vid-slider .tile__details:before {\n content: \'\';\n position: absolute;\n top: 50%;\n left: 50%;\n display: #000;\n }\n #vid-slider .tile__details:after {\n margin-top: -25px;\n margin-left: -25px;\n width: 50px;\n height: 50px;\n border: 3px solid #ecf0f1;\n line-height: 50px;\n text-align: center;\n border-radius: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1;\n }\n #vid-slider .tile__details:before {\n content: \'\u25B6\';\n left: 0;\n width: 100%;\n font-size: 30px;\n margin-left: 2px;\n margin-top: -23px;\n text-align: center;\n z-index: 2;\n color: white;\n }\n #vid-slider .tile:hover .tile__details {\n opacity: 1;\n }\n #vid-slider .tile__title {\n position: absolute;\n bottom: 0;\n padding: 10px;\n max-width: 250px;\n }\n #vid-slider .tile__title_text {\n position: relative;\n left: 0;\n white-space: normal;\n }\n #vid-slider .row__inner:hover {\n -webkit-transform: translate3d(-62.5px, 0, 0);\n transform: translate3d(-62.5px, 0, 0);\n }\n #vid-slider .row__inner:hover .tile {\n opacity: 0.3;\n }\n #vid-slider .row__inner:hover .tile:hover {\n -webkit-transform: scale(1.25);\n transform: scale(1.25);\n opacity: 1;\n }\n #vid-slider .tile:hover ~ .tile {\n -webkit-transform: translate3d(62px, 0, 0);\n transform: translate3d(62px, 0, 0);\n }\n #vid-slider .tile:hover .tile__info {\n opacity: 0;\n }\n #vid-slider .tile__slider-prev,\n #vid-slider .tile__slider-next {\n width: 30px;\n background: transparent;\n border: none;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 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: -3px;\n }\n #vid-slider .tile__slider-next {\n right: 0;\n }\n #vid-slider,\n #vid-slider .row {\n margin: 0;\n padding: 0 1.2rem;\n }\n #vid-slider .tile:last-child {\n margin-right: 2rem;\n }\n #vid-slider .row::-webkit-scrollbar-thumb {\n background-color: transparent !important;\n }\n #vid-slider i {\n border: solid ' + (props.dark ? 'white' : 'black') + ';\n border-width: 0 4px 4px 0;\n display: inline-block;\n padding: 4px;\n pointer-events: none;\n }\n\n #vid-slider .right {\n transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n }\n\n #vid-slider .left {\n transform: rotate(135deg);\n -webkit-transform: rotate(135deg);\n }\n '
|
|
5631
5831
|
)
|
|
5632
5832
|
);
|
|
5633
5833
|
};
|
|
@@ -12696,55 +12896,6 @@ var Slideshow = function Slideshow(_ref) {
|
|
|
12696
12896
|
);
|
|
12697
12897
|
};
|
|
12698
12898
|
|
|
12699
|
-
var getYoutubeId = createCommonjsModule(function (module, exports) {
|
|
12700
|
-
(function (root, factory) {
|
|
12701
|
-
{
|
|
12702
|
-
module.exports = factory();
|
|
12703
|
-
}
|
|
12704
|
-
}(commonjsGlobal, function (exports) {
|
|
12705
|
-
|
|
12706
|
-
return function (url, opts) {
|
|
12707
|
-
if (opts == undefined) {
|
|
12708
|
-
opts = {fuzzy: true};
|
|
12709
|
-
}
|
|
12710
|
-
|
|
12711
|
-
if (/youtu\.?be/.test(url)) {
|
|
12712
|
-
|
|
12713
|
-
// Look first for known patterns
|
|
12714
|
-
var i;
|
|
12715
|
-
var patterns = [
|
|
12716
|
-
/youtu\.be\/([^#\&\?]{11})/, // youtu.be/<id>
|
|
12717
|
-
/\?v=([^#\&\?]{11})/, // ?v=<id>
|
|
12718
|
-
/\&v=([^#\&\?]{11})/, // &v=<id>
|
|
12719
|
-
/embed\/([^#\&\?]{11})/, // embed/<id>
|
|
12720
|
-
/\/v\/([^#\&\?]{11})/ // /v/<id>
|
|
12721
|
-
];
|
|
12722
|
-
|
|
12723
|
-
// If any pattern matches, return the ID
|
|
12724
|
-
for (i = 0; i < patterns.length; ++i) {
|
|
12725
|
-
if (patterns[i].test(url)) {
|
|
12726
|
-
return patterns[i].exec(url)[1];
|
|
12727
|
-
}
|
|
12728
|
-
}
|
|
12729
|
-
|
|
12730
|
-
if (opts.fuzzy) {
|
|
12731
|
-
// If that fails, break it apart by certain characters and look
|
|
12732
|
-
// for the 11 character key
|
|
12733
|
-
var tokens = url.split(/[\/\&\?=#\.\s]/g);
|
|
12734
|
-
for (i = 0; i < tokens.length; ++i) {
|
|
12735
|
-
if (/^[^#\&\?]{11}$/.test(tokens[i])) {
|
|
12736
|
-
return tokens[i];
|
|
12737
|
-
}
|
|
12738
|
-
}
|
|
12739
|
-
}
|
|
12740
|
-
}
|
|
12741
|
-
|
|
12742
|
-
return null;
|
|
12743
|
-
};
|
|
12744
|
-
|
|
12745
|
-
}));
|
|
12746
|
-
});
|
|
12747
|
-
|
|
12748
12899
|
var isArray$3 = Array.isArray;
|
|
12749
12900
|
var keyList = Object.keys;
|
|
12750
12901
|
var hasProp = Object.prototype.hasOwnProperty;
|
|
@@ -15574,42 +15725,54 @@ var IFrame = function IFrame(_ref) {
|
|
|
15574
15725
|
};
|
|
15575
15726
|
|
|
15576
15727
|
var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
15577
|
-
var nodes = _ref.nodes
|
|
15578
|
-
|
|
15728
|
+
var nodes = _ref.nodes,
|
|
15729
|
+
client = _ref.client;
|
|
15579
15730
|
|
|
15580
15731
|
var router = useRouter();
|
|
15581
|
-
|
|
15582
|
-
var seriesVid = void 0;
|
|
15732
|
+
//state
|
|
15583
15733
|
|
|
15584
15734
|
var _useState = useState(''),
|
|
15585
15735
|
_useState2 = slicedToArray(_useState, 2),
|
|
15586
15736
|
vidUrl = _useState2[0],
|
|
15587
15737
|
setVidUrl = _useState2[1];
|
|
15588
15738
|
|
|
15589
|
-
|
|
15739
|
+
var _useState3 = useState(''),
|
|
15740
|
+
_useState4 = slicedToArray(_useState3, 2),
|
|
15741
|
+
series = _useState4[0],
|
|
15742
|
+
setSeries = _useState4[1];
|
|
15743
|
+
|
|
15744
|
+
var _useState5 = useState([]),
|
|
15745
|
+
_useState6 = slicedToArray(_useState5, 2),
|
|
15746
|
+
seriesData = _useState6[0],
|
|
15747
|
+
setData = _useState6[1];
|
|
15748
|
+
//variables
|
|
15590
15749
|
|
|
15591
15750
|
|
|
15751
|
+
var get2 = router.asPath.split('/')[1];
|
|
15752
|
+
var get3 = router.asPath.split('/')[2].split('?')[0];
|
|
15753
|
+
|
|
15754
|
+
// Once component mounts, set the variables
|
|
15592
15755
|
useEffect(function () {
|
|
15593
|
-
|
|
15594
|
-
|
|
15595
|
-
|
|
15596
|
-
|
|
15756
|
+
var params = new URL(document.location).searchParams;
|
|
15757
|
+
var seriesVid = params.get('seriesVid') || 1;
|
|
15758
|
+
var data = [];
|
|
15759
|
+
nodes.videos.forEach(function (vid) {
|
|
15760
|
+
data.push({ title: vid.title, thumbnail: 'http://img.youtube.com/vi/' + getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
|
|
15761
|
+
});
|
|
15762
|
+
// if series number doesn't exist, route back to first vid of series
|
|
15763
|
+
if (data.length < seriesVid) {
|
|
15764
|
+
setSeries(1);
|
|
15765
|
+
setVidUrl(nodes.videos[0].url);
|
|
15766
|
+
var newPath = '/' + get2 + '/' + get3 + '?seriesVid=1';
|
|
15767
|
+
var vidState = { vid_id: seriesVid };
|
|
15768
|
+
window.history.pushState(vidState, '', newPath);
|
|
15769
|
+
} else {
|
|
15770
|
+
setSeries(seriesVid);
|
|
15771
|
+
setVidUrl(nodes.videos[seriesVid - 1].url);
|
|
15772
|
+
}
|
|
15773
|
+
setData(data);
|
|
15597
15774
|
}, []);
|
|
15598
15775
|
|
|
15599
|
-
// Series data for the image slider
|
|
15600
|
-
var seriesData = [];
|
|
15601
|
-
nodes.videos.forEach(function (vid) {
|
|
15602
|
-
seriesData.push({ title: vid.title, thumbnail: 'http://img.youtube.com/vi/' + getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
|
|
15603
|
-
});
|
|
15604
|
-
|
|
15605
|
-
// If series vid doesnt exist, go back to first video
|
|
15606
|
-
if (seriesData.length < seriesVid) {
|
|
15607
|
-
seriesVid = 1;
|
|
15608
|
-
var newPath = '/' + get2 + '/' + router.query.url + ('?seriesVid=' + seriesVid);
|
|
15609
|
-
var vidState = { vid_id: seriesVid };
|
|
15610
|
-
window.history.pushState(vidState, '', newPath);
|
|
15611
|
-
}
|
|
15612
|
-
//
|
|
15613
15776
|
function toggleSeries() {
|
|
15614
15777
|
var series = document.querySelector('.vid-series');
|
|
15615
15778
|
if (series.classList.contains('active')) {
|
|
@@ -15621,13 +15784,13 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15621
15784
|
}
|
|
15622
15785
|
// This function is passed to the GroupDeck to change the youtube iframe src
|
|
15623
15786
|
function setState(url, vidIndex) {
|
|
15624
|
-
var get2 = router.asPath.split('/')[1];
|
|
15625
15787
|
setVidUrl(url);
|
|
15626
15788
|
toggleSeries();
|
|
15627
15789
|
lib_3.refresh();
|
|
15628
|
-
var newPath = '/' + get2 + '/' +
|
|
15790
|
+
var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
|
|
15629
15791
|
var vidState = { vid_id: vidIndex };
|
|
15630
15792
|
window.history.pushState(vidState, '', newPath);
|
|
15793
|
+
setSeries(vidIndex);
|
|
15631
15794
|
}
|
|
15632
15795
|
|
|
15633
15796
|
// Handle video end
|
|
@@ -15646,10 +15809,9 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15646
15809
|
} else {
|
|
15647
15810
|
nextVid = currentVid + 1;
|
|
15648
15811
|
}
|
|
15649
|
-
var get2 = router.asPath.split('/')[1];
|
|
15650
15812
|
// set the new Video URL
|
|
15651
|
-
setState(nodes.videos[
|
|
15652
|
-
var newPath = '/' + get2 + '/' +
|
|
15813
|
+
setState(nodes.videos[nextVid].url, nextVid + 1);
|
|
15814
|
+
var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + (nextVid + 1));
|
|
15653
15815
|
var vidState = { vid_id: nextVid + 1 };
|
|
15654
15816
|
var title = '';
|
|
15655
15817
|
window.history.pushState(vidState, title, newPath);
|
|
@@ -15694,18 +15856,38 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15694
15856
|
padding: '0 1rem',
|
|
15695
15857
|
left: '0'
|
|
15696
15858
|
} },
|
|
15697
|
-
vidUrl && React__default.createElement(GroupDeck, { dark: true, dataset: seriesData, setState: setState, seriesVid:
|
|
15859
|
+
vidUrl && React__default.createElement(GroupDeck, { dark: true, dataset: seriesData, setState: setState, seriesVid: series, current: vidUrl })
|
|
15698
15860
|
)
|
|
15699
15861
|
),
|
|
15700
15862
|
React__default.createElement(
|
|
15701
15863
|
'div',
|
|
15702
15864
|
{ className: 'vid-controls', style: { width: '100%', background: 'transparent', display: 'flex', justifyContent: 'center' } },
|
|
15703
|
-
React__default.createElement(
|
|
15704
|
-
'
|
|
15705
|
-
|
|
15706
|
-
|
|
15707
|
-
|
|
15708
|
-
|
|
15865
|
+
React__default.createElement(
|
|
15866
|
+
'button',
|
|
15867
|
+
{
|
|
15868
|
+
'aria-label': 'Toggles video series',
|
|
15869
|
+
id: 'vid-series-btn',
|
|
15870
|
+
onClick: toggleSeries,
|
|
15871
|
+
className: 'btn btn-block btn-lg ',
|
|
15872
|
+
style: { borderRadius: '0', background: 'rgb(241,185,63)', color: 'white' } },
|
|
15873
|
+
'View Series'
|
|
15874
|
+
)
|
|
15875
|
+
),
|
|
15876
|
+
React__default.createElement(
|
|
15877
|
+
'div',
|
|
15878
|
+
{ className: 'my-5' },
|
|
15879
|
+
series && React__default.createElement(
|
|
15880
|
+
'h3',
|
|
15881
|
+
null,
|
|
15882
|
+
'Episode ',
|
|
15883
|
+
series
|
|
15884
|
+
),
|
|
15885
|
+
nodes.videos[series - 1] && React__default.createElement(
|
|
15886
|
+
'h2',
|
|
15887
|
+
{ className: 'mb-3' },
|
|
15888
|
+
nodes.videos[series - 1].title
|
|
15889
|
+
),
|
|
15890
|
+
nodes.videos[series - 1] && React__default.createElement(BlockContent, _extends({ serializers: getSerializers$1(client), blocks: nodes.videos[series - 1].text, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
|
|
15709
15891
|
),
|
|
15710
15892
|
React__default.createElement(
|
|
15711
15893
|
'style',
|
|
@@ -15727,7 +15909,7 @@ var getSerializers$1 = function getSerializers(client) {
|
|
|
15727
15909
|
youtubeGallery: function youtubeGallery(_ref2) {
|
|
15728
15910
|
var node = _ref2.node;
|
|
15729
15911
|
|
|
15730
|
-
return React__default.createElement(YouTubeGallery, { nodes: node });
|
|
15912
|
+
return React__default.createElement(YouTubeGallery, { nodes: node, client: client });
|
|
15731
15913
|
},
|
|
15732
15914
|
figure: function figure(_ref3) {
|
|
15733
15915
|
var node = _ref3.node;
|
|
@@ -15787,5 +15969,5 @@ var getSerializers$1 = function getSerializers(client) {
|
|
|
15787
15969
|
};
|
|
15788
15970
|
};
|
|
15789
15971
|
|
|
15790
|
-
export { ContentCard as DeckContent, DeckQueue, ThumbnailCard, TaxonomyCard, GroupDeck, Column1, Column2, Column3, Header, LeftNav, AccordionPanel, SocialShare, NavMagazine, NavNative, NavNormal, NavDvm, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers$1 as getSerializers, Search };
|
|
15972
|
+
export { ContentCard as DeckContent, DeckQueue, ThumbnailCard, TaxonomyCard, GroupDeck, YoutubeGroup, Column1, Column2, Column3, Header, LeftNav, AccordionPanel, SocialShare, NavMagazine, NavNative, NavNormal, NavDvm, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers$1 as getSerializers, Search };
|
|
15791
15973
|
//# sourceMappingURL=index.es.js.map
|