@mjhls/mjh-framework 1.0.75 → 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 +40 -35
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +40 -35
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -5634,7 +5634,7 @@ 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
5638
|
)
|
|
5639
5639
|
);
|
|
5640
5640
|
};
|
|
@@ -5834,7 +5834,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
5834
5834
|
React__default.createElement(
|
|
5835
5835
|
'style',
|
|
5836
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,.
|
|
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 '
|
|
5838
5838
|
)
|
|
5839
5839
|
);
|
|
5840
5840
|
};
|
|
@@ -15735,10 +15735,8 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15735
15735
|
var nodes = _ref.nodes,
|
|
15736
15736
|
client = _ref.client;
|
|
15737
15737
|
|
|
15738
|
-
|
|
15739
15738
|
var router$$1 = router.useRouter();
|
|
15740
|
-
|
|
15741
|
-
var seriesVid = void 0;
|
|
15739
|
+
//state
|
|
15742
15740
|
|
|
15743
15741
|
var _useState = React.useState(''),
|
|
15744
15742
|
_useState2 = slicedToArray(_useState, 2),
|
|
@@ -15749,31 +15747,39 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15749
15747
|
_useState4 = slicedToArray(_useState3, 2),
|
|
15750
15748
|
series = _useState4[0],
|
|
15751
15749
|
setSeries = _useState4[1];
|
|
15752
|
-
// Once component mounts, set the variables
|
|
15753
15750
|
|
|
15751
|
+
var _useState5 = React.useState([]),
|
|
15752
|
+
_useState6 = slicedToArray(_useState5, 2),
|
|
15753
|
+
seriesData = _useState6[0],
|
|
15754
|
+
setData = _useState6[1];
|
|
15755
|
+
//variables
|
|
15754
15756
|
|
|
15755
|
-
React.useEffect(function () {
|
|
15756
15757
|
|
|
15757
|
-
|
|
15758
|
-
|
|
15759
|
-
setSeries(seriesVid);
|
|
15760
|
-
setVidUrl(nodes.videos['' + (seriesVid - 1)].url);
|
|
15761
|
-
}, []);
|
|
15758
|
+
var get2 = router$$1.asPath.split('/')[1];
|
|
15759
|
+
var get3 = router$$1.asPath.split('/')[2].split('?')[0];
|
|
15762
15760
|
|
|
15763
|
-
//
|
|
15764
|
-
|
|
15765
|
-
|
|
15766
|
-
|
|
15767
|
-
|
|
15761
|
+
// Once component mounts, set the variables
|
|
15762
|
+
React.useEffect(function () {
|
|
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);
|
|
15781
|
+
}, []);
|
|
15768
15782
|
|
|
15769
|
-
// If series vid doesnt exist, go back to first video
|
|
15770
|
-
if (seriesData.length < seriesVid) {
|
|
15771
|
-
seriesVid = 1;
|
|
15772
|
-
var newPath = '/' + get2 + '/' + router$$1.query.url + ('?seriesVid=' + seriesVid);
|
|
15773
|
-
var vidState = { vid_id: seriesVid };
|
|
15774
|
-
window.history.pushState(vidState, '', newPath);
|
|
15775
|
-
}
|
|
15776
|
-
//
|
|
15777
15783
|
function toggleSeries() {
|
|
15778
15784
|
var series = document.querySelector('.vid-series');
|
|
15779
15785
|
if (series.classList.contains('active')) {
|
|
@@ -15785,13 +15791,13 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15785
15791
|
}
|
|
15786
15792
|
// This function is passed to the GroupDeck to change the youtube iframe src
|
|
15787
15793
|
function setState(url, vidIndex) {
|
|
15788
|
-
var get2 = router$$1.asPath.split('/')[1];
|
|
15789
15794
|
setVidUrl(url);
|
|
15790
15795
|
toggleSeries();
|
|
15791
15796
|
lib_3.refresh();
|
|
15792
|
-
var newPath = '/' + get2 + '/' +
|
|
15797
|
+
var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
|
|
15793
15798
|
var vidState = { vid_id: vidIndex };
|
|
15794
15799
|
window.history.pushState(vidState, '', newPath);
|
|
15800
|
+
setSeries(vidIndex);
|
|
15795
15801
|
}
|
|
15796
15802
|
|
|
15797
15803
|
// Handle video end
|
|
@@ -15810,10 +15816,9 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15810
15816
|
} else {
|
|
15811
15817
|
nextVid = currentVid + 1;
|
|
15812
15818
|
}
|
|
15813
|
-
var get2 = router$$1.asPath.split('/')[1];
|
|
15814
15819
|
// set the new Video URL
|
|
15815
|
-
setState(nodes.videos[
|
|
15816
|
-
var newPath = '/' + get2 + '/' +
|
|
15820
|
+
setState(nodes.videos[nextVid].url, nextVid + 1);
|
|
15821
|
+
var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + (nextVid + 1));
|
|
15817
15822
|
var vidState = { vid_id: nextVid + 1 };
|
|
15818
15823
|
var title = '';
|
|
15819
15824
|
window.history.pushState(vidState, title, newPath);
|
|
@@ -15870,8 +15875,8 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15870
15875
|
'aria-label': 'Toggles video series',
|
|
15871
15876
|
id: 'vid-series-btn',
|
|
15872
15877
|
onClick: toggleSeries,
|
|
15873
|
-
className: 'btn btn-block btn-lg
|
|
15874
|
-
style: { borderRadius: '0' } },
|
|
15878
|
+
className: 'btn btn-block btn-lg ',
|
|
15879
|
+
style: { borderRadius: '0', background: 'rgb(241,185,63)', color: 'white' } },
|
|
15875
15880
|
'View Series'
|
|
15876
15881
|
)
|
|
15877
15882
|
),
|
|
@@ -15884,12 +15889,12 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15884
15889
|
'Episode ',
|
|
15885
15890
|
series
|
|
15886
15891
|
),
|
|
15887
|
-
nodes.videos[
|
|
15892
|
+
nodes.videos[series - 1] && React__default.createElement(
|
|
15888
15893
|
'h2',
|
|
15889
15894
|
{ className: 'mb-3' },
|
|
15890
|
-
nodes.videos[
|
|
15895
|
+
nodes.videos[series - 1].title
|
|
15891
15896
|
),
|
|
15892
|
-
nodes.videos[
|
|
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()))
|
|
15893
15898
|
),
|
|
15894
15899
|
React__default.createElement(
|
|
15895
15900
|
'style',
|