@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/dist/index.js
CHANGED
|
@@ -5526,23 +5526,23 @@ var GroupDeck = function GroupDeck(props) {
|
|
|
5526
5526
|
return React__default.createElement(
|
|
5527
5527
|
'div',
|
|
5528
5528
|
{ id: 'vid-slider', className: 'col' },
|
|
5529
|
+
React__default.createElement(
|
|
5530
|
+
'div',
|
|
5531
|
+
{ onClick: function onClick(e) {
|
|
5532
|
+
return scrollSlider(e, 'prev');
|
|
5533
|
+
}, className: 'tile__slider-prev', style: { color: variant } },
|
|
5534
|
+
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
|
|
5535
|
+
),
|
|
5536
|
+
React__default.createElement(
|
|
5537
|
+
'div',
|
|
5538
|
+
{ onClick: function onClick(e) {
|
|
5539
|
+
return scrollSlider(e, 'next');
|
|
5540
|
+
}, className: 'tile__slider-next', style: { color: variant } },
|
|
5541
|
+
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
|
|
5542
|
+
),
|
|
5529
5543
|
React__default.createElement(
|
|
5530
5544
|
'div',
|
|
5531
5545
|
{ className: 'row' },
|
|
5532
|
-
React__default.createElement(
|
|
5533
|
-
'div',
|
|
5534
|
-
{ onClick: function onClick(e) {
|
|
5535
|
-
return scrollSlider(e, 'prev');
|
|
5536
|
-
}, className: 'tile__slider-prev', style: { color: variant } },
|
|
5537
|
-
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
|
|
5538
|
-
),
|
|
5539
|
-
React__default.createElement(
|
|
5540
|
-
'div',
|
|
5541
|
-
{ onClick: function onClick(e) {
|
|
5542
|
-
return scrollSlider(e, 'next');
|
|
5543
|
-
}, className: 'tile__slider-next', style: { color: variant } },
|
|
5544
|
-
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
|
|
5545
|
-
),
|
|
5546
5546
|
React__default.createElement(
|
|
5547
5547
|
'div',
|
|
5548
5548
|
{ className: 'row__inner' },
|
|
@@ -5634,7 +5634,207 @@ var GroupDeck = function GroupDeck(props) {
|
|
|
5634
5634
|
React__default.createElement(
|
|
5635
5635
|
'style',
|
|
5636
5636
|
{ jsx: true },
|
|
5637
|
-
'\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:
|
|
5637
|
+
'\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 '
|
|
5638
|
+
)
|
|
5639
|
+
);
|
|
5640
|
+
};
|
|
5641
|
+
|
|
5642
|
+
var getYoutubeId = createCommonjsModule(function (module, exports) {
|
|
5643
|
+
(function (root, factory) {
|
|
5644
|
+
{
|
|
5645
|
+
module.exports = factory();
|
|
5646
|
+
}
|
|
5647
|
+
}(commonjsGlobal, function (exports) {
|
|
5648
|
+
|
|
5649
|
+
return function (url, opts) {
|
|
5650
|
+
if (opts == undefined) {
|
|
5651
|
+
opts = {fuzzy: true};
|
|
5652
|
+
}
|
|
5653
|
+
|
|
5654
|
+
if (/youtu\.?be/.test(url)) {
|
|
5655
|
+
|
|
5656
|
+
// Look first for known patterns
|
|
5657
|
+
var i;
|
|
5658
|
+
var patterns = [
|
|
5659
|
+
/youtu\.be\/([^#\&\?]{11})/, // youtu.be/<id>
|
|
5660
|
+
/\?v=([^#\&\?]{11})/, // ?v=<id>
|
|
5661
|
+
/\&v=([^#\&\?]{11})/, // &v=<id>
|
|
5662
|
+
/embed\/([^#\&\?]{11})/, // embed/<id>
|
|
5663
|
+
/\/v\/([^#\&\?]{11})/ // /v/<id>
|
|
5664
|
+
];
|
|
5665
|
+
|
|
5666
|
+
// If any pattern matches, return the ID
|
|
5667
|
+
for (i = 0; i < patterns.length; ++i) {
|
|
5668
|
+
if (patterns[i].test(url)) {
|
|
5669
|
+
return patterns[i].exec(url)[1];
|
|
5670
|
+
}
|
|
5671
|
+
}
|
|
5672
|
+
|
|
5673
|
+
if (opts.fuzzy) {
|
|
5674
|
+
// If that fails, break it apart by certain characters and look
|
|
5675
|
+
// for the 11 character key
|
|
5676
|
+
var tokens = url.split(/[\/\&\?=#\.\s]/g);
|
|
5677
|
+
for (i = 0; i < tokens.length; ++i) {
|
|
5678
|
+
if (/^[^#\&\?]{11}$/.test(tokens[i])) {
|
|
5679
|
+
return tokens[i];
|
|
5680
|
+
}
|
|
5681
|
+
}
|
|
5682
|
+
}
|
|
5683
|
+
}
|
|
5684
|
+
|
|
5685
|
+
return null;
|
|
5686
|
+
};
|
|
5687
|
+
|
|
5688
|
+
}));
|
|
5689
|
+
});
|
|
5690
|
+
|
|
5691
|
+
/*
|
|
5692
|
+
GROQ query -
|
|
5693
|
+
accepts an array of title, URL
|
|
5694
|
+
`http://img.youtube.com/vi/${getYouTubeId(vid.url)}/hqdefault.jpg`
|
|
5695
|
+
*/
|
|
5696
|
+
var YoutubeGroup = function YoutubeGroup(props) {
|
|
5697
|
+
// Props should be an array of objects containing Thumbnail, title, and URL
|
|
5698
|
+
var get2 = props.get2 ? '/' + props.get2 + '/' : '/view/';
|
|
5699
|
+
|
|
5700
|
+
var variant = props.dark ? 'white' : '#383838';
|
|
5701
|
+
function scrollSlider(e, direction) {
|
|
5702
|
+
var slide = e.target.parentElement;
|
|
5703
|
+
var scrollOffset = slide.scrollLeft;
|
|
5704
|
+
var viewableWidth = slide.clientWidth > 700 ? 3 * (document.querySelector('.tile').scrollWidth + 8) : document.querySelector('.tile').scrollWidth + 8;
|
|
5705
|
+
var scrollDirection = void 0;
|
|
5706
|
+
if (direction === 'next') {
|
|
5707
|
+
scrollDirection = scrollOffset + viewableWidth;
|
|
5708
|
+
}
|
|
5709
|
+
if (direction === 'prev') {
|
|
5710
|
+
scrollDirection = scrollOffset - viewableWidth;
|
|
5711
|
+
}
|
|
5712
|
+
slide.scrollTo({
|
|
5713
|
+
left: scrollDirection,
|
|
5714
|
+
behavior: 'smooth'
|
|
5715
|
+
});
|
|
5716
|
+
}
|
|
5717
|
+
function handleClick(url, vidIndex) {
|
|
5718
|
+
props.setState(url, vidIndex);
|
|
5719
|
+
}
|
|
5720
|
+
var _props$current = props.current,
|
|
5721
|
+
current = _props$current === undefined ? '' : _props$current;
|
|
5722
|
+
|
|
5723
|
+
|
|
5724
|
+
return React__default.createElement(
|
|
5725
|
+
'div',
|
|
5726
|
+
{ id: 'vid-slider', className: 'col' },
|
|
5727
|
+
React__default.createElement(
|
|
5728
|
+
'div',
|
|
5729
|
+
{ onClick: function onClick(e) {
|
|
5730
|
+
return scrollSlider(e, 'prev');
|
|
5731
|
+
}, className: 'tile__slider-prev', style: { color: variant } },
|
|
5732
|
+
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
|
|
5733
|
+
),
|
|
5734
|
+
React__default.createElement(
|
|
5735
|
+
'div',
|
|
5736
|
+
{ onClick: function onClick(e) {
|
|
5737
|
+
return scrollSlider(e, 'next');
|
|
5738
|
+
}, className: 'tile__slider-next', style: { color: variant } },
|
|
5739
|
+
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
|
|
5740
|
+
),
|
|
5741
|
+
React__default.createElement(
|
|
5742
|
+
'div',
|
|
5743
|
+
{ className: 'row' },
|
|
5744
|
+
React__default.createElement(
|
|
5745
|
+
'div',
|
|
5746
|
+
{ className: 'row__inner' },
|
|
5747
|
+
props.dataset && props.dataset.map(function (video, index) {
|
|
5748
|
+
// If there is a current prop, means this will overlay a currently playing video
|
|
5749
|
+
if (current !== '') {
|
|
5750
|
+
var url = video.url;
|
|
5751
|
+
var thumbnail = 'http://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
|
|
5752
|
+
|
|
5753
|
+
return React__default.createElement(
|
|
5754
|
+
'div',
|
|
5755
|
+
{ key: index, className: 'tile' },
|
|
5756
|
+
current && current === url ? React__default.createElement(
|
|
5757
|
+
'div',
|
|
5758
|
+
{ className: 'now-playing' },
|
|
5759
|
+
'Now Playing'
|
|
5760
|
+
) : '',
|
|
5761
|
+
React__default.createElement(
|
|
5762
|
+
'a',
|
|
5763
|
+
{ onClick: function onClick() {
|
|
5764
|
+
return handleClick(url, index + 1);
|
|
5765
|
+
} },
|
|
5766
|
+
React__default.createElement(
|
|
5767
|
+
'div',
|
|
5768
|
+
{ className: 'tile__media' },
|
|
5769
|
+
React__default.createElement('img', { className: 'tile__img', src: thumbnail, alt: '' })
|
|
5770
|
+
),
|
|
5771
|
+
React__default.createElement(
|
|
5772
|
+
'div',
|
|
5773
|
+
{ className: 'tile__details' },
|
|
5774
|
+
React__default.createElement(
|
|
5775
|
+
'div',
|
|
5776
|
+
{ className: 'tile__title' },
|
|
5777
|
+
React__default.createElement(
|
|
5778
|
+
'div',
|
|
5779
|
+
{ style: { color: variant }, className: 'tile__title_text' },
|
|
5780
|
+
video.title
|
|
5781
|
+
)
|
|
5782
|
+
)
|
|
5783
|
+
),
|
|
5784
|
+
React__default.createElement(
|
|
5785
|
+
'div',
|
|
5786
|
+
{ style: { color: variant }, className: 'tile__info' },
|
|
5787
|
+
video.title
|
|
5788
|
+
)
|
|
5789
|
+
)
|
|
5790
|
+
);
|
|
5791
|
+
} else {
|
|
5792
|
+
// slider by itself
|
|
5793
|
+
var _url = '' + video.link;
|
|
5794
|
+
var _thumbnail = 'http://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
|
|
5795
|
+
return React__default.createElement(
|
|
5796
|
+
'div',
|
|
5797
|
+
{ key: index, className: 'tile' },
|
|
5798
|
+
React__default.createElement(
|
|
5799
|
+
Link,
|
|
5800
|
+
{ href: _url },
|
|
5801
|
+
React__default.createElement(
|
|
5802
|
+
'a',
|
|
5803
|
+
null,
|
|
5804
|
+
React__default.createElement(
|
|
5805
|
+
'div',
|
|
5806
|
+
{ className: 'tile__media' },
|
|
5807
|
+
React__default.createElement('img', { className: 'tile__img', src: _thumbnail, alt: '' })
|
|
5808
|
+
),
|
|
5809
|
+
React__default.createElement(
|
|
5810
|
+
'div',
|
|
5811
|
+
{ className: 'tile__details' },
|
|
5812
|
+
React__default.createElement(
|
|
5813
|
+
'div',
|
|
5814
|
+
{ className: 'tile__title' },
|
|
5815
|
+
React__default.createElement(
|
|
5816
|
+
'div',
|
|
5817
|
+
{ style: { color: variant }, className: 'tile__title_text' },
|
|
5818
|
+
video.title
|
|
5819
|
+
)
|
|
5820
|
+
)
|
|
5821
|
+
),
|
|
5822
|
+
React__default.createElement(
|
|
5823
|
+
'div',
|
|
5824
|
+
{ style: { color: variant }, className: 'tile__info' },
|
|
5825
|
+
video.title
|
|
5826
|
+
)
|
|
5827
|
+
)
|
|
5828
|
+
)
|
|
5829
|
+
);
|
|
5830
|
+
}
|
|
5831
|
+
})
|
|
5832
|
+
)
|
|
5833
|
+
),
|
|
5834
|
+
React__default.createElement(
|
|
5835
|
+
'style',
|
|
5836
|
+
{ jsx: true },
|
|
5837
|
+
'\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 '
|
|
5638
5838
|
)
|
|
5639
5839
|
);
|
|
5640
5840
|
};
|
|
@@ -12703,55 +12903,6 @@ var Slideshow = function Slideshow(_ref) {
|
|
|
12703
12903
|
);
|
|
12704
12904
|
};
|
|
12705
12905
|
|
|
12706
|
-
var getYoutubeId = createCommonjsModule(function (module, exports) {
|
|
12707
|
-
(function (root, factory) {
|
|
12708
|
-
{
|
|
12709
|
-
module.exports = factory();
|
|
12710
|
-
}
|
|
12711
|
-
}(commonjsGlobal, function (exports) {
|
|
12712
|
-
|
|
12713
|
-
return function (url, opts) {
|
|
12714
|
-
if (opts == undefined) {
|
|
12715
|
-
opts = {fuzzy: true};
|
|
12716
|
-
}
|
|
12717
|
-
|
|
12718
|
-
if (/youtu\.?be/.test(url)) {
|
|
12719
|
-
|
|
12720
|
-
// Look first for known patterns
|
|
12721
|
-
var i;
|
|
12722
|
-
var patterns = [
|
|
12723
|
-
/youtu\.be\/([^#\&\?]{11})/, // youtu.be/<id>
|
|
12724
|
-
/\?v=([^#\&\?]{11})/, // ?v=<id>
|
|
12725
|
-
/\&v=([^#\&\?]{11})/, // &v=<id>
|
|
12726
|
-
/embed\/([^#\&\?]{11})/, // embed/<id>
|
|
12727
|
-
/\/v\/([^#\&\?]{11})/ // /v/<id>
|
|
12728
|
-
];
|
|
12729
|
-
|
|
12730
|
-
// If any pattern matches, return the ID
|
|
12731
|
-
for (i = 0; i < patterns.length; ++i) {
|
|
12732
|
-
if (patterns[i].test(url)) {
|
|
12733
|
-
return patterns[i].exec(url)[1];
|
|
12734
|
-
}
|
|
12735
|
-
}
|
|
12736
|
-
|
|
12737
|
-
if (opts.fuzzy) {
|
|
12738
|
-
// If that fails, break it apart by certain characters and look
|
|
12739
|
-
// for the 11 character key
|
|
12740
|
-
var tokens = url.split(/[\/\&\?=#\.\s]/g);
|
|
12741
|
-
for (i = 0; i < tokens.length; ++i) {
|
|
12742
|
-
if (/^[^#\&\?]{11}$/.test(tokens[i])) {
|
|
12743
|
-
return tokens[i];
|
|
12744
|
-
}
|
|
12745
|
-
}
|
|
12746
|
-
}
|
|
12747
|
-
}
|
|
12748
|
-
|
|
12749
|
-
return null;
|
|
12750
|
-
};
|
|
12751
|
-
|
|
12752
|
-
}));
|
|
12753
|
-
});
|
|
12754
|
-
|
|
12755
12906
|
var isArray$3 = Array.isArray;
|
|
12756
12907
|
var keyList = Object.keys;
|
|
12757
12908
|
var hasProp = Object.prototype.hasOwnProperty;
|
|
@@ -15581,42 +15732,54 @@ var IFrame = function IFrame(_ref) {
|
|
|
15581
15732
|
};
|
|
15582
15733
|
|
|
15583
15734
|
var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
15584
|
-
var nodes = _ref.nodes
|
|
15585
|
-
|
|
15735
|
+
var nodes = _ref.nodes,
|
|
15736
|
+
client = _ref.client;
|
|
15586
15737
|
|
|
15587
15738
|
var router$$1 = router.useRouter();
|
|
15588
|
-
|
|
15589
|
-
var seriesVid = void 0;
|
|
15739
|
+
//state
|
|
15590
15740
|
|
|
15591
15741
|
var _useState = React.useState(''),
|
|
15592
15742
|
_useState2 = slicedToArray(_useState, 2),
|
|
15593
15743
|
vidUrl = _useState2[0],
|
|
15594
15744
|
setVidUrl = _useState2[1];
|
|
15595
15745
|
|
|
15596
|
-
|
|
15746
|
+
var _useState3 = React.useState(''),
|
|
15747
|
+
_useState4 = slicedToArray(_useState3, 2),
|
|
15748
|
+
series = _useState4[0],
|
|
15749
|
+
setSeries = _useState4[1];
|
|
15750
|
+
|
|
15751
|
+
var _useState5 = React.useState([]),
|
|
15752
|
+
_useState6 = slicedToArray(_useState5, 2),
|
|
15753
|
+
seriesData = _useState6[0],
|
|
15754
|
+
setData = _useState6[1];
|
|
15755
|
+
//variables
|
|
15597
15756
|
|
|
15598
15757
|
|
|
15758
|
+
var get2 = router$$1.asPath.split('/')[1];
|
|
15759
|
+
var get3 = router$$1.asPath.split('/')[2].split('?')[0];
|
|
15760
|
+
|
|
15761
|
+
// Once component mounts, set the variables
|
|
15599
15762
|
React.useEffect(function () {
|
|
15600
|
-
|
|
15601
|
-
|
|
15602
|
-
|
|
15603
|
-
|
|
15763
|
+
var params = new URL(document.location).searchParams;
|
|
15764
|
+
var seriesVid = params.get('seriesVid') || 1;
|
|
15765
|
+
var data = [];
|
|
15766
|
+
nodes.videos.forEach(function (vid) {
|
|
15767
|
+
data.push({ title: vid.title, thumbnail: 'http://img.youtube.com/vi/' + getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
|
|
15768
|
+
});
|
|
15769
|
+
// if series number doesn't exist, route back to first vid of series
|
|
15770
|
+
if (data.length < seriesVid) {
|
|
15771
|
+
setSeries(1);
|
|
15772
|
+
setVidUrl(nodes.videos[0].url);
|
|
15773
|
+
var newPath = '/' + get2 + '/' + get3 + '?seriesVid=1';
|
|
15774
|
+
var vidState = { vid_id: seriesVid };
|
|
15775
|
+
window.history.pushState(vidState, '', newPath);
|
|
15776
|
+
} else {
|
|
15777
|
+
setSeries(seriesVid);
|
|
15778
|
+
setVidUrl(nodes.videos[seriesVid - 1].url);
|
|
15779
|
+
}
|
|
15780
|
+
setData(data);
|
|
15604
15781
|
}, []);
|
|
15605
15782
|
|
|
15606
|
-
// Series data for the image slider
|
|
15607
|
-
var seriesData = [];
|
|
15608
|
-
nodes.videos.forEach(function (vid) {
|
|
15609
|
-
seriesData.push({ title: vid.title, thumbnail: 'http://img.youtube.com/vi/' + getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
|
|
15610
|
-
});
|
|
15611
|
-
|
|
15612
|
-
// If series vid doesnt exist, go back to first video
|
|
15613
|
-
if (seriesData.length < seriesVid) {
|
|
15614
|
-
seriesVid = 1;
|
|
15615
|
-
var newPath = '/' + get2 + '/' + router$$1.query.url + ('?seriesVid=' + seriesVid);
|
|
15616
|
-
var vidState = { vid_id: seriesVid };
|
|
15617
|
-
window.history.pushState(vidState, '', newPath);
|
|
15618
|
-
}
|
|
15619
|
-
//
|
|
15620
15783
|
function toggleSeries() {
|
|
15621
15784
|
var series = document.querySelector('.vid-series');
|
|
15622
15785
|
if (series.classList.contains('active')) {
|
|
@@ -15628,13 +15791,13 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15628
15791
|
}
|
|
15629
15792
|
// This function is passed to the GroupDeck to change the youtube iframe src
|
|
15630
15793
|
function setState(url, vidIndex) {
|
|
15631
|
-
var get2 = router$$1.asPath.split('/')[1];
|
|
15632
15794
|
setVidUrl(url);
|
|
15633
15795
|
toggleSeries();
|
|
15634
15796
|
lib_3.refresh();
|
|
15635
|
-
var newPath = '/' + get2 + '/' +
|
|
15797
|
+
var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
|
|
15636
15798
|
var vidState = { vid_id: vidIndex };
|
|
15637
15799
|
window.history.pushState(vidState, '', newPath);
|
|
15800
|
+
setSeries(vidIndex);
|
|
15638
15801
|
}
|
|
15639
15802
|
|
|
15640
15803
|
// Handle video end
|
|
@@ -15653,10 +15816,9 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15653
15816
|
} else {
|
|
15654
15817
|
nextVid = currentVid + 1;
|
|
15655
15818
|
}
|
|
15656
|
-
var get2 = router$$1.asPath.split('/')[1];
|
|
15657
15819
|
// set the new Video URL
|
|
15658
|
-
setState(nodes.videos[
|
|
15659
|
-
var newPath = '/' + get2 + '/' +
|
|
15820
|
+
setState(nodes.videos[nextVid].url, nextVid + 1);
|
|
15821
|
+
var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + (nextVid + 1));
|
|
15660
15822
|
var vidState = { vid_id: nextVid + 1 };
|
|
15661
15823
|
var title = '';
|
|
15662
15824
|
window.history.pushState(vidState, title, newPath);
|
|
@@ -15701,18 +15863,38 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15701
15863
|
padding: '0 1rem',
|
|
15702
15864
|
left: '0'
|
|
15703
15865
|
} },
|
|
15704
|
-
vidUrl && React__default.createElement(GroupDeck, { dark: true, dataset: seriesData, setState: setState, seriesVid:
|
|
15866
|
+
vidUrl && React__default.createElement(GroupDeck, { dark: true, dataset: seriesData, setState: setState, seriesVid: series, current: vidUrl })
|
|
15705
15867
|
)
|
|
15706
15868
|
),
|
|
15707
15869
|
React__default.createElement(
|
|
15708
15870
|
'div',
|
|
15709
15871
|
{ className: 'vid-controls', style: { width: '100%', background: 'transparent', display: 'flex', justifyContent: 'center' } },
|
|
15710
|
-
React__default.createElement(
|
|
15711
|
-
'
|
|
15712
|
-
|
|
15713
|
-
|
|
15714
|
-
|
|
15715
|
-
|
|
15872
|
+
React__default.createElement(
|
|
15873
|
+
'button',
|
|
15874
|
+
{
|
|
15875
|
+
'aria-label': 'Toggles video series',
|
|
15876
|
+
id: 'vid-series-btn',
|
|
15877
|
+
onClick: toggleSeries,
|
|
15878
|
+
className: 'btn btn-block btn-lg ',
|
|
15879
|
+
style: { borderRadius: '0', background: 'rgb(241,185,63)', color: 'white' } },
|
|
15880
|
+
'View Series'
|
|
15881
|
+
)
|
|
15882
|
+
),
|
|
15883
|
+
React__default.createElement(
|
|
15884
|
+
'div',
|
|
15885
|
+
{ className: 'my-5' },
|
|
15886
|
+
series && React__default.createElement(
|
|
15887
|
+
'h3',
|
|
15888
|
+
null,
|
|
15889
|
+
'Episode ',
|
|
15890
|
+
series
|
|
15891
|
+
),
|
|
15892
|
+
nodes.videos[series - 1] && React__default.createElement(
|
|
15893
|
+
'h2',
|
|
15894
|
+
{ className: 'mb-3' },
|
|
15895
|
+
nodes.videos[series - 1].title
|
|
15896
|
+
),
|
|
15897
|
+
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()))
|
|
15716
15898
|
),
|
|
15717
15899
|
React__default.createElement(
|
|
15718
15900
|
'style',
|
|
@@ -15734,7 +15916,7 @@ var getSerializers$1 = function getSerializers(client) {
|
|
|
15734
15916
|
youtubeGallery: function youtubeGallery(_ref2) {
|
|
15735
15917
|
var node = _ref2.node;
|
|
15736
15918
|
|
|
15737
|
-
return React__default.createElement(YouTubeGallery, { nodes: node });
|
|
15919
|
+
return React__default.createElement(YouTubeGallery, { nodes: node, client: client });
|
|
15738
15920
|
},
|
|
15739
15921
|
figure: function figure(_ref3) {
|
|
15740
15922
|
var node = _ref3.node;
|
|
@@ -15799,6 +15981,7 @@ exports.DeckQueue = DeckQueue;
|
|
|
15799
15981
|
exports.ThumbnailCard = ThumbnailCard;
|
|
15800
15982
|
exports.TaxonomyCard = TaxonomyCard;
|
|
15801
15983
|
exports.GroupDeck = GroupDeck;
|
|
15984
|
+
exports.YoutubeGroup = YoutubeGroup;
|
|
15802
15985
|
exports.Column1 = Column1;
|
|
15803
15986
|
exports.Column2 = Column2;
|
|
15804
15987
|
exports.Column3 = Column3;
|