@mjhls/mjh-framework 1.0.343 → 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 +1 -1
- package/dist/cjs/GroupDeck.js +3 -14
- package/dist/cjs/index.js +8 -30
- package/dist/esm/GroupDeck.js +3 -14
- package/dist/esm/index.js +8 -30
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/cjs/GroupDeck.js
CHANGED
|
@@ -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
|
|
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
|
|
6595
|
+
var event$1 = Event;
|
|
6596
6596
|
|
|
6597
|
-
function Event
|
|
6597
|
+
function Event(family) {}
|
|
6598
6598
|
|
|
6599
|
-
Event
|
|
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
|
|
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
|
-
|
|
13124
|
-
|
|
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) {
|
package/dist/esm/GroupDeck.js
CHANGED
|
@@ -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
|
|
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
|
|
6592
|
+
var event$1 = Event;
|
|
6593
6593
|
|
|
6594
|
-
function Event
|
|
6594
|
+
function Event(family) {}
|
|
6595
6595
|
|
|
6596
|
-
Event
|
|
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
|
|
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
|
-
|
|
13121
|
-
|
|
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) {
|