@mjhls/mjh-framework 1.0.75 → 1.0.77
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 +52 -35
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +52 -35
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/index.es.js
CHANGED
|
@@ -5627,7 +5627,7 @@ 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
5631
|
)
|
|
5632
5632
|
);
|
|
5633
5633
|
};
|
|
@@ -5827,7 +5827,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
5827
5827
|
React__default.createElement(
|
|
5828
5828
|
'style',
|
|
5829
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,.
|
|
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 '
|
|
5831
5831
|
)
|
|
5832
5832
|
);
|
|
5833
5833
|
};
|
|
@@ -15728,10 +15728,8 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15728
15728
|
var nodes = _ref.nodes,
|
|
15729
15729
|
client = _ref.client;
|
|
15730
15730
|
|
|
15731
|
-
|
|
15732
15731
|
var router = useRouter();
|
|
15733
|
-
|
|
15734
|
-
var seriesVid = void 0;
|
|
15732
|
+
//state
|
|
15735
15733
|
|
|
15736
15734
|
var _useState = useState(''),
|
|
15737
15735
|
_useState2 = slicedToArray(_useState, 2),
|
|
@@ -15742,31 +15740,39 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15742
15740
|
_useState4 = slicedToArray(_useState3, 2),
|
|
15743
15741
|
series = _useState4[0],
|
|
15744
15742
|
setSeries = _useState4[1];
|
|
15745
|
-
// Once component mounts, set the variables
|
|
15746
15743
|
|
|
15744
|
+
var _useState5 = useState([]),
|
|
15745
|
+
_useState6 = slicedToArray(_useState5, 2),
|
|
15746
|
+
seriesData = _useState6[0],
|
|
15747
|
+
setData = _useState6[1];
|
|
15748
|
+
//variables
|
|
15747
15749
|
|
|
15748
|
-
useEffect(function () {
|
|
15749
15750
|
|
|
15750
|
-
|
|
15751
|
-
|
|
15752
|
-
setSeries(seriesVid);
|
|
15753
|
-
setVidUrl(nodes.videos['' + (seriesVid - 1)].url);
|
|
15754
|
-
}, []);
|
|
15751
|
+
var get2 = router.asPath.split('/')[1];
|
|
15752
|
+
var get3 = router.asPath.split('/')[2].split('?')[0];
|
|
15755
15753
|
|
|
15756
|
-
//
|
|
15757
|
-
|
|
15758
|
-
|
|
15759
|
-
|
|
15760
|
-
|
|
15754
|
+
// Once component mounts, set the variables
|
|
15755
|
+
useEffect(function () {
|
|
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);
|
|
15774
|
+
}, []);
|
|
15761
15775
|
|
|
15762
|
-
// If series vid doesnt exist, go back to first video
|
|
15763
|
-
if (seriesData.length < seriesVid) {
|
|
15764
|
-
seriesVid = 1;
|
|
15765
|
-
var newPath = '/' + get2 + '/' + router.query.url + ('?seriesVid=' + seriesVid);
|
|
15766
|
-
var vidState = { vid_id: seriesVid };
|
|
15767
|
-
window.history.pushState(vidState, '', newPath);
|
|
15768
|
-
}
|
|
15769
|
-
//
|
|
15770
15776
|
function toggleSeries() {
|
|
15771
15777
|
var series = document.querySelector('.vid-series');
|
|
15772
15778
|
if (series.classList.contains('active')) {
|
|
@@ -15778,13 +15784,13 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15778
15784
|
}
|
|
15779
15785
|
// This function is passed to the GroupDeck to change the youtube iframe src
|
|
15780
15786
|
function setState(url, vidIndex) {
|
|
15781
|
-
var get2 = router.asPath.split('/')[1];
|
|
15782
15787
|
setVidUrl(url);
|
|
15783
15788
|
toggleSeries();
|
|
15784
15789
|
lib_3.refresh();
|
|
15785
|
-
var newPath = '/' + get2 + '/' +
|
|
15790
|
+
var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
|
|
15786
15791
|
var vidState = { vid_id: vidIndex };
|
|
15787
15792
|
window.history.pushState(vidState, '', newPath);
|
|
15793
|
+
setSeries(vidIndex);
|
|
15788
15794
|
}
|
|
15789
15795
|
|
|
15790
15796
|
// Handle video end
|
|
@@ -15803,10 +15809,9 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15803
15809
|
} else {
|
|
15804
15810
|
nextVid = currentVid + 1;
|
|
15805
15811
|
}
|
|
15806
|
-
var get2 = router.asPath.split('/')[1];
|
|
15807
15812
|
// set the new Video URL
|
|
15808
|
-
setState(nodes.videos[
|
|
15809
|
-
var newPath = '/' + get2 + '/' +
|
|
15813
|
+
setState(nodes.videos[nextVid].url, nextVid + 1);
|
|
15814
|
+
var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + (nextVid + 1));
|
|
15810
15815
|
var vidState = { vid_id: nextVid + 1 };
|
|
15811
15816
|
var title = '';
|
|
15812
15817
|
window.history.pushState(vidState, title, newPath);
|
|
@@ -15863,8 +15868,8 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15863
15868
|
'aria-label': 'Toggles video series',
|
|
15864
15869
|
id: 'vid-series-btn',
|
|
15865
15870
|
onClick: toggleSeries,
|
|
15866
|
-
className: 'btn btn-block btn-lg
|
|
15867
|
-
style: { borderRadius: '0' } },
|
|
15871
|
+
className: 'btn btn-block btn-lg ',
|
|
15872
|
+
style: { borderRadius: '0', background: 'rgb(241,185,63)', color: 'white' } },
|
|
15868
15873
|
'View Series'
|
|
15869
15874
|
)
|
|
15870
15875
|
),
|
|
@@ -15877,12 +15882,12 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
|
|
|
15877
15882
|
'Episode ',
|
|
15878
15883
|
series
|
|
15879
15884
|
),
|
|
15880
|
-
nodes.videos[
|
|
15885
|
+
nodes.videos[series - 1] && React__default.createElement(
|
|
15881
15886
|
'h2',
|
|
15882
15887
|
{ className: 'mb-3' },
|
|
15883
|
-
nodes.videos[
|
|
15888
|
+
nodes.videos[series - 1].title
|
|
15884
15889
|
),
|
|
15885
|
-
nodes.videos[
|
|
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()))
|
|
15886
15891
|
),
|
|
15887
15892
|
React__default.createElement(
|
|
15888
15893
|
'style',
|
|
@@ -15959,6 +15964,18 @@ var getSerializers$1 = function getSerializers(client) {
|
|
|
15959
15964
|
null,
|
|
15960
15965
|
props.children
|
|
15961
15966
|
);
|
|
15967
|
+
},
|
|
15968
|
+
link: function link(props) {
|
|
15969
|
+
var children = props.children,
|
|
15970
|
+
_props$mark = props.mark,
|
|
15971
|
+
href = _props$mark.href,
|
|
15972
|
+
blank = _props$mark.blank;
|
|
15973
|
+
|
|
15974
|
+
return React__default.createElement(
|
|
15975
|
+
'a',
|
|
15976
|
+
{ href: href, target: blank ? '_blank' : '_self' },
|
|
15977
|
+
children
|
|
15978
|
+
);
|
|
15962
15979
|
}
|
|
15963
15980
|
}
|
|
15964
15981
|
};
|