@mjhls/mjh-framework 1.0.342 → 1.0.344

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 CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- # mjh-framework v. 1.0.341
2
+ # mjh-framework v. 1.0.344
3
3
 
4
4
 
5
5
  > Foundation Framework
@@ -40,7 +40,9 @@ var FigureComponent = function FigureComponent(props) {
40
40
  blank = node.blank,
41
41
  link = node.link,
42
42
  _node$alignment = node.alignment,
43
- alignment = _node$alignment === undefined ? 'center' : _node$alignment;
43
+ alignment = _node$alignment === undefined ? 'center' : _node$alignment,
44
+ _node$class_name = node.class_name,
45
+ class_name = _node$class_name === undefined ? 'd-block' : _node$class_name;
44
46
  var _node$widthP = node.widthP,
45
47
  widthP = _node$widthP === undefined ? 'auto' : _node$widthP;
46
48
 
@@ -97,7 +99,7 @@ var FigureComponent = function FigureComponent(props) {
97
99
  null,
98
100
  imageWidth !== null && imageFloat !== null && React__default.createElement(
99
101
  reactBootstrap.Figure,
100
- { className: 'd-block', style: { width: imageWidth, maxWidth: '100%', clear: 'both', float: imageFloat, margin: figureMargin } },
102
+ { className: '' + class_name, style: { width: imageWidth, maxWidth: '100%', clear: 'both', float: imageFloat, margin: figureMargin } },
101
103
  link ? React__default.createElement(
102
104
  'a',
103
105
  { target: blank ? '_blank' : '_self', href: link },
@@ -7,9 +7,6 @@ require('./_to-object-329a650b.js');
7
7
  require('./web.dom.iterable-8b02d65e.js');
8
8
  var React = require('react');
9
9
  var React__default = _interopDefault(React);
10
- require('prop-types');
11
- require('react-dom');
12
- var index$1 = require('./index-fa0fb52c.js');
13
10
  var slicedToArray = require('./slicedToArray-879ab2fb.js');
14
11
  var smoothscroll = require('./smoothscroll-95231a70.js');
15
12
 
@@ -160,11 +157,7 @@ var GroupDeck = function GroupDeck(props) {
160
157
  React__default.createElement(
161
158
  'div',
162
159
  { className: 'tile__media' },
163
- React__default.createElement(
164
- index$1.LazyLoad,
165
- null,
166
- React__default.createElement('img', { className: 'tile__img', src: thumbnail, style: { width: tileSize + 'px' }, alt: '' })
167
- )
160
+ React__default.createElement('img', { className: 'tile__img', src: thumbnail, style: { width: tileSize + 'px' }, alt: '' })
168
161
  ),
169
162
  React__default.createElement(
170
163
  'div',
@@ -199,11 +192,7 @@ var GroupDeck = function GroupDeck(props) {
199
192
  React__default.createElement(
200
193
  'div',
201
194
  { className: 'tile__media' },
202
- React__default.createElement(
203
- index$1.LazyLoad,
204
- null,
205
- React__default.createElement('img', { className: 'tile__img', src: _thumbnail, alt: '', style: { width: tileSize + 'px' } })
206
- )
195
+ React__default.createElement('img', { className: 'tile__img', src: _thumbnail, alt: '', style: { width: tileSize + 'px' } })
207
196
  ),
208
197
  React__default.createElement(
209
198
  'div',
@@ -244,7 +233,7 @@ var GroupDeck = function GroupDeck(props) {
244
233
  React__default.createElement(
245
234
  'style',
246
235
  { jsx: 'true' },
247
- '\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 1.5rem;\n margin-bottom: 2rem;\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,\n #vidHolder {\n max-width: 805px;\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-x: scroll;\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 text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 0.9rem;\n font-weight: bold;\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: 25px 0 55px !important;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n height: 135px;\n\n margin: 0 12px;\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: 15px;\n }\n #vid-slider .tile__img {\n height: 135px;\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 #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\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: -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 max-width: 620px;\n }\n }\n @media screen and (max-width: 1200px) {\n #vid-slider,\n #vidHolder {\n max-width: 580px;\n }\n }\n @media screen and (max-width: 967px) {\n #vid-slider {\n max-width: 100%;\n }\n\n #vid-slider .tile__img {\n height: 85px;\n object-fit: cover;\n }\n }\n\n @media screen and (max-width: 768px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n #vid-slider .tile {\n height: 180px;\n }\n\n #vid-slider .tile__img {\n height: 110px;\n object-fit: cover;\n }\n #vid-slider .row__inner {\n margin: 30px 0 60px;\n }\n }\n @media screen and (max-width: 568px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n #vid-slider .tile {\n height: 180px;\n }\n\n #vid-slider .tile__img {\n height: 180px;\n object-fit: cover;\n }\n #vid-slider .row__inner {\n margin: 30px 0 60px;\n }\n }\n '
236
+ '\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 1.5rem;\n margin-bottom: 2rem;\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,\n #vidHolder {\n max-width: 805px;\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-x: scroll;\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 text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 0.9rem;\n font-weight: bold;\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: 25px 0 55px !important;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n height: 135px;\n\n margin: 0 12px;\n font-size: 20px;\n cursor: pointer;\n transition: 450ms all;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n \n #vid-slider .tile:first-child {\n margin-left: 15px;\n }\n #vid-slider .tile__img {\n height: 135px;\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 #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\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: -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 (min-width: 1399px){\n .block-content #vid-slider .tile__img{\n height: 155px;\n }\n .block-content #vid-slider .tile{\n height: 195px;\n }\n }\n\n \n\n @media screen and (max-width: 1399px) {\n #vid-slider,\n #vidHolder {\n max-width: 620px;\n }\n }\n @media screen and (max-width: 1200px) {\n #vid-slider,\n #vidHolder {\n max-width: 580px;\n }\n }\n @media screen and (max-width: 967px) {\n #vid-slider {\n max-width: 100%;\n }\n\n #vid-slider .tile__img {\n height: 85px;\n object-fit: cover;\n }\n #vid-slider .row__inner {\n margin: 60px 0 50px!important;\n }\n }\n\n @media screen and (max-width: 768px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n #vid-slider .tile {\n height: 180px;\n }\n\n #vid-slider .tile__img {\n height: 110px;\n object-fit: cover;\n }\n \n }\n @media screen and (max-width: 568px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n #vid-slider .tile {\n height: 180px;\n }\n\n #vid-slider .tile__img {\n height: 180px;\n object-fit: cover;\n }\n #vid-slider .row__inner {\n margin: 30px 0 60px;\n }\n }\n '
248
237
  )
249
238
  );
250
239
  };
package/dist/cjs/index.js CHANGED
@@ -6592,17 +6592,17 @@ DocumentFragment.prototype.toString =
6592
6592
  }).join("")
6593
6593
  };
6594
6594
 
6595
- var event$1 = Event$1;
6595
+ var event$1 = Event;
6596
6596
 
6597
- function Event$1(family) {}
6597
+ function Event(family) {}
6598
6598
 
6599
- Event$1.prototype.initEvent = function _Event_initEvent(type, bubbles, cancelable) {
6599
+ Event.prototype.initEvent = function _Event_initEvent(type, bubbles, cancelable) {
6600
6600
  this.type = type;
6601
6601
  this.bubbles = bubbles;
6602
6602
  this.cancelable = cancelable;
6603
6603
  };
6604
6604
 
6605
- Event$1.prototype.preventDefault = function _Event_preventDefault() {
6605
+ Event.prototype.preventDefault = function _Event_preventDefault() {
6606
6606
 
6607
6607
  };
6608
6608
 
@@ -13058,6 +13058,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
13058
13058
  //variables
13059
13059
 
13060
13060
 
13061
+ var get1 = router && router.asPath ? router.asPath.split('/')[0] : '';
13061
13062
  var get2 = router && router.asPath ? router.asPath.split('/')[1] : '';
13062
13063
  var get3 = router && router.asPath ? router.asPath.split('/')[2].split('?')[0] : '';
13063
13064
  // Once component mounts, set the variables
@@ -13120,19 +13121,8 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
13120
13121
 
13121
13122
  // This function is passed to the GroupDeck to change the youtube iframe src
13122
13123
  function setState(url, thumbnail, vidIndex) {
13123
- setVidLoaded(false);
13124
- setTimeout(function () {
13125
- setVidUrl(url);
13126
- setVidThumbnail(thumbnail);
13127
- toggleSeries();
13128
- debounce.lib_3.refresh();
13129
- var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
13130
- var vidState = { vid_id: vidIndex };
13131
- window.history.pushState(vidState, '', newPath);
13132
-
13133
- setSeries(vidIndex);
13134
- setVidLoaded(true);
13135
- }, 100);
13124
+ var newPath = get1 + '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
13125
+ window.location.href = newPath;
13136
13126
  }
13137
13127
 
13138
13128
  var handleOnReady = function handleOnReady(event) {
@@ -13173,19 +13163,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
13173
13163
  nextVid = currentVid + 1;
13174
13164
  }
13175
13165
  // set the new Video URL
13176
- setState(nodes.videos[nextVid].url, nextVid + 1);
13177
- var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + (nextVid + 1));
13178
- var vidState = { vid_id: nextVid + 1 };
13179
- var title = '';
13180
- window.history.pushState(vidState, title, newPath);
13181
- window.dispatchEvent(new Event('urlChange'));
13182
- //Small pause before starting next video
13183
- setTimeout(function () {
13184
- //Youtube API to start video playing automatically
13185
- var id = smoothscroll.getYoutubeId(nodes.videos['' + nextVid].url);
13186
- e.target.loadVideoById(id);
13187
- toggleSeries();
13188
- }, 1000);
13166
+ setState(nodes.videos[nextVid].url, '', nextVid + 1);
13189
13167
  }
13190
13168
 
13191
13169
  var handlePlayPercent = function handlePlayPercent(player) {
@@ -13671,7 +13649,7 @@ var NativeAd = function NativeAd(props) {
13671
13649
  };
13672
13650
 
13673
13651
  var Figure = dynamic(function () {
13674
- return Promise.resolve().then(function () { return require('./Figure-a47ec3a7.js'); });
13652
+ return Promise.resolve().then(function () { return require('./Figure-b308d6a2.js'); });
13675
13653
  }, { ssr: false });
13676
13654
 
13677
13655
  var checkUrlIsExternal = function checkUrlIsExternal(url) {
@@ -35,7 +35,9 @@ var FigureComponent = function FigureComponent(props) {
35
35
  blank = node.blank,
36
36
  link = node.link,
37
37
  _node$alignment = node.alignment,
38
- alignment = _node$alignment === undefined ? 'center' : _node$alignment;
38
+ alignment = _node$alignment === undefined ? 'center' : _node$alignment,
39
+ _node$class_name = node.class_name,
40
+ class_name = _node$class_name === undefined ? 'd-block' : _node$class_name;
39
41
  var _node$widthP = node.widthP,
40
42
  widthP = _node$widthP === undefined ? 'auto' : _node$widthP;
41
43
 
@@ -92,7 +94,7 @@ var FigureComponent = function FigureComponent(props) {
92
94
  null,
93
95
  imageWidth !== null && imageFloat !== null && React__default.createElement(
94
96
  Figure$1,
95
- { className: 'd-block', style: { width: imageWidth, maxWidth: '100%', clear: 'both', float: imageFloat, margin: figureMargin } },
97
+ { className: '' + class_name, style: { width: imageWidth, maxWidth: '100%', clear: 'both', float: imageFloat, margin: figureMargin } },
96
98
  link ? React__default.createElement(
97
99
  'a',
98
100
  { target: blank ? '_blank' : '_self', href: link },
@@ -2,9 +2,6 @@ import './_commonjsHelpers-0c4b6f40.js';
2
2
  import './_to-object-b9b796ec.js';
3
3
  import './web.dom.iterable-7e9bebf9.js';
4
4
  import React__default, { useRef, useState, useEffect } from 'react';
5
- import 'prop-types';
6
- import 'react-dom';
7
- import { L as LazyLoad } from './index-5f9f807a.js';
8
5
  import { _ as _slicedToArray } from './slicedToArray-a47a84a4.js';
9
6
  import { s as smoothscroll, g as getYoutubeId } from './smoothscroll-4b699764.js';
10
7
 
@@ -155,11 +152,7 @@ var GroupDeck = function GroupDeck(props) {
155
152
  React__default.createElement(
156
153
  'div',
157
154
  { className: 'tile__media' },
158
- React__default.createElement(
159
- LazyLoad,
160
- null,
161
- React__default.createElement('img', { className: 'tile__img', src: thumbnail, style: { width: tileSize + 'px' }, alt: '' })
162
- )
155
+ React__default.createElement('img', { className: 'tile__img', src: thumbnail, style: { width: tileSize + 'px' }, alt: '' })
163
156
  ),
164
157
  React__default.createElement(
165
158
  'div',
@@ -194,11 +187,7 @@ var GroupDeck = function GroupDeck(props) {
194
187
  React__default.createElement(
195
188
  'div',
196
189
  { className: 'tile__media' },
197
- React__default.createElement(
198
- LazyLoad,
199
- null,
200
- React__default.createElement('img', { className: 'tile__img', src: _thumbnail, alt: '', style: { width: tileSize + 'px' } })
201
- )
190
+ React__default.createElement('img', { className: 'tile__img', src: _thumbnail, alt: '', style: { width: tileSize + 'px' } })
202
191
  ),
203
192
  React__default.createElement(
204
193
  'div',
@@ -239,7 +228,7 @@ var GroupDeck = function GroupDeck(props) {
239
228
  React__default.createElement(
240
229
  'style',
241
230
  { jsx: 'true' },
242
- '\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 1.5rem;\n margin-bottom: 2rem;\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,\n #vidHolder {\n max-width: 805px;\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-x: scroll;\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 text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 0.9rem;\n font-weight: bold;\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: 25px 0 55px !important;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n height: 135px;\n\n margin: 0 12px;\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: 15px;\n }\n #vid-slider .tile__img {\n height: 135px;\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 #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\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: -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 max-width: 620px;\n }\n }\n @media screen and (max-width: 1200px) {\n #vid-slider,\n #vidHolder {\n max-width: 580px;\n }\n }\n @media screen and (max-width: 967px) {\n #vid-slider {\n max-width: 100%;\n }\n\n #vid-slider .tile__img {\n height: 85px;\n object-fit: cover;\n }\n }\n\n @media screen and (max-width: 768px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n #vid-slider .tile {\n height: 180px;\n }\n\n #vid-slider .tile__img {\n height: 110px;\n object-fit: cover;\n }\n #vid-slider .row__inner {\n margin: 30px 0 60px;\n }\n }\n @media screen and (max-width: 568px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n #vid-slider .tile {\n height: 180px;\n }\n\n #vid-slider .tile__img {\n height: 180px;\n object-fit: cover;\n }\n #vid-slider .row__inner {\n margin: 30px 0 60px;\n }\n }\n '
231
+ '\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 1.5rem;\n margin-bottom: 2rem;\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,\n #vidHolder {\n max-width: 805px;\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-x: scroll;\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 text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 0.9rem;\n font-weight: bold;\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: 25px 0 55px !important;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n height: 135px;\n\n margin: 0 12px;\n font-size: 20px;\n cursor: pointer;\n transition: 450ms all;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n \n #vid-slider .tile:first-child {\n margin-left: 15px;\n }\n #vid-slider .tile__img {\n height: 135px;\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 #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\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: -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 (min-width: 1399px){\n .block-content #vid-slider .tile__img{\n height: 155px;\n }\n .block-content #vid-slider .tile{\n height: 195px;\n }\n }\n\n \n\n @media screen and (max-width: 1399px) {\n #vid-slider,\n #vidHolder {\n max-width: 620px;\n }\n }\n @media screen and (max-width: 1200px) {\n #vid-slider,\n #vidHolder {\n max-width: 580px;\n }\n }\n @media screen and (max-width: 967px) {\n #vid-slider {\n max-width: 100%;\n }\n\n #vid-slider .tile__img {\n height: 85px;\n object-fit: cover;\n }\n #vid-slider .row__inner {\n margin: 60px 0 50px!important;\n }\n }\n\n @media screen and (max-width: 768px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n #vid-slider .tile {\n height: 180px;\n }\n\n #vid-slider .tile__img {\n height: 110px;\n object-fit: cover;\n }\n \n }\n @media screen and (max-width: 568px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n #vid-slider .tile {\n height: 180px;\n }\n\n #vid-slider .tile__img {\n height: 180px;\n object-fit: cover;\n }\n #vid-slider .row__inner {\n margin: 30px 0 60px;\n }\n }\n '
243
232
  )
244
233
  );
245
234
  };
package/dist/esm/index.js CHANGED
@@ -6589,17 +6589,17 @@ DocumentFragment.prototype.toString =
6589
6589
  }).join("")
6590
6590
  };
6591
6591
 
6592
- var event$1 = Event$1;
6592
+ var event$1 = Event;
6593
6593
 
6594
- function Event$1(family) {}
6594
+ function Event(family) {}
6595
6595
 
6596
- Event$1.prototype.initEvent = function _Event_initEvent(type, bubbles, cancelable) {
6596
+ Event.prototype.initEvent = function _Event_initEvent(type, bubbles, cancelable) {
6597
6597
  this.type = type;
6598
6598
  this.bubbles = bubbles;
6599
6599
  this.cancelable = cancelable;
6600
6600
  };
6601
6601
 
6602
- Event$1.prototype.preventDefault = function _Event_preventDefault() {
6602
+ Event.prototype.preventDefault = function _Event_preventDefault() {
6603
6603
 
6604
6604
  };
6605
6605
 
@@ -13055,6 +13055,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
13055
13055
  //variables
13056
13056
 
13057
13057
 
13058
+ var get1 = router && router.asPath ? router.asPath.split('/')[0] : '';
13058
13059
  var get2 = router && router.asPath ? router.asPath.split('/')[1] : '';
13059
13060
  var get3 = router && router.asPath ? router.asPath.split('/')[2].split('?')[0] : '';
13060
13061
  // Once component mounts, set the variables
@@ -13117,19 +13118,8 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
13117
13118
 
13118
13119
  // This function is passed to the GroupDeck to change the youtube iframe src
13119
13120
  function setState(url, thumbnail, vidIndex) {
13120
- setVidLoaded(false);
13121
- setTimeout(function () {
13122
- setVidUrl(url);
13123
- setVidThumbnail(thumbnail);
13124
- toggleSeries();
13125
- lib_3.refresh();
13126
- var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
13127
- var vidState = { vid_id: vidIndex };
13128
- window.history.pushState(vidState, '', newPath);
13129
-
13130
- setSeries(vidIndex);
13131
- setVidLoaded(true);
13132
- }, 100);
13121
+ var newPath = get1 + '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
13122
+ window.location.href = newPath;
13133
13123
  }
13134
13124
 
13135
13125
  var handleOnReady = function handleOnReady(event) {
@@ -13170,19 +13160,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
13170
13160
  nextVid = currentVid + 1;
13171
13161
  }
13172
13162
  // set the new Video URL
13173
- setState(nodes.videos[nextVid].url, nextVid + 1);
13174
- var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + (nextVid + 1));
13175
- var vidState = { vid_id: nextVid + 1 };
13176
- var title = '';
13177
- window.history.pushState(vidState, title, newPath);
13178
- window.dispatchEvent(new Event('urlChange'));
13179
- //Small pause before starting next video
13180
- setTimeout(function () {
13181
- //Youtube API to start video playing automatically
13182
- var id = getYoutubeId(nodes.videos['' + nextVid].url);
13183
- e.target.loadVideoById(id);
13184
- toggleSeries();
13185
- }, 1000);
13163
+ setState(nodes.videos[nextVid].url, '', nextVid + 1);
13186
13164
  }
13187
13165
 
13188
13166
  var handlePlayPercent = function handlePlayPercent(player) {
@@ -13668,7 +13646,7 @@ var NativeAd = function NativeAd(props) {
13668
13646
  };
13669
13647
 
13670
13648
  var Figure = dynamic(function () {
13671
- return import('./Figure-584ac0c8.js');
13649
+ return import('./Figure-6394d22a.js');
13672
13650
  }, { ssr: false });
13673
13651
 
13674
13652
  var checkUrlIsExternal = function checkUrlIsExternal(url) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mjhls/mjh-framework",
3
- "version": "1.0.342",
3
+ "version": "1.0.344",
4
4
  "description": "Foundation Framework",
5
5
  "author": "mjh-framework",
6
6
  "license": "MIT",