@mjhls/mjh-framework 1.0.262 → 1.0.264

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.
Files changed (16) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/{Normal-0cd03739.js → Normal-d5d437f2.js} +25 -0
  3. package/dist/cjs/TemplateNormal.js +1 -1
  4. package/dist/cjs/VideoSeriesListing.js +1 -1
  5. package/dist/cjs/YoutubeGroup-94e6efea.js +668 -0
  6. package/dist/cjs/YoutubeGroup.js +1 -1
  7. package/dist/cjs/index.js +2 -2
  8. package/dist/esm/{Normal-e2c3ca60.js → Normal-e86a38cf.js} +25 -0
  9. package/dist/esm/TemplateNormal.js +1 -1
  10. package/dist/esm/VideoSeriesListing.js +1 -1
  11. package/dist/esm/YoutubeGroup-f59297bb.js +662 -0
  12. package/dist/esm/YoutubeGroup.js +1 -1
  13. package/dist/esm/index.js +4 -4
  14. package/package.json +2 -1
  15. package/dist/cjs/YoutubeGroup-5f480446.js +0 -228
  16. package/dist/esm/YoutubeGroup-78d93d44.js +0 -222
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mjhls/mjh-framework",
3
- "version": "1.0.262",
3
+ "version": "1.0.264",
4
4
  "description": "Foundation Framework",
5
5
  "author": "mjh-framework",
6
6
  "license": "MIT",
@@ -96,6 +96,7 @@
96
96
  "next-cookies": "^2.0.3",
97
97
  "react-cookies": "^0.1.1",
98
98
  "shortid": "^2.2.15",
99
+ "smoothscroll-polyfill": "^0.4.4",
99
100
  "striptags": "^3.1.1",
100
101
  "superagent": "^5.2.2"
101
102
  }
package/dist/cjs/YoutubeGroup-5f480446.js DELETED
@@ -1,228 +0,0 @@
1
- 'use strict';
2
-
3
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
4
-
5
- var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
6
- var React = require('react');
7
- var React__default = _interopDefault(React);
8
- require('next/link');
9
- var index$2 = require('./index-fa0fb52c.js');
10
-
11
- var getYoutubeId = _commonjsHelpers.createCommonjsModule(function (module, exports) {
12
- (function (root, factory) {
13
- {
14
- module.exports = factory();
15
- }
16
- }(_commonjsHelpers.commonjsGlobal, function (exports) {
17
-
18
- return function (url, opts) {
19
- if (opts == undefined) {
20
- opts = {fuzzy: true};
21
- }
22
-
23
- if (/youtu\.?be/.test(url)) {
24
-
25
- // Look first for known patterns
26
- var i;
27
- var patterns = [
28
- /youtu\.be\/([^#\&\?]{11})/, // youtu.be/<id>
29
- /\?v=([^#\&\?]{11})/, // ?v=<id>
30
- /\&v=([^#\&\?]{11})/, // &v=<id>
31
- /embed\/([^#\&\?]{11})/, // embed/<id>
32
- /\/v\/([^#\&\?]{11})/ // /v/<id>
33
- ];
34
-
35
- // If any pattern matches, return the ID
36
- for (i = 0; i < patterns.length; ++i) {
37
- if (patterns[i].test(url)) {
38
- return patterns[i].exec(url)[1];
39
- }
40
- }
41
-
42
- if (opts.fuzzy) {
43
- // If that fails, break it apart by certain characters and look
44
- // for the 11 character key
45
- var tokens = url.split(/[\/\&\?=#\.\s]/g);
46
- for (i = 0; i < tokens.length; ++i) {
47
- if (/^[^#\&\?]{11}$/.test(tokens[i])) {
48
- return tokens[i];
49
- }
50
- }
51
- }
52
- }
53
-
54
- return null;
55
- };
56
-
57
- }));
58
- });
59
-
60
- /*
61
- GROQ query -
62
- accepts an array of title, URL
63
- `https://img.youtube.com/vi/${getYouTubeId(vid.url)}/hqdefault.jpg`
64
- */
65
- var YoutubeGroup = function YoutubeGroup(props) {
66
- // Props should be an array of objects containing Thumbnail, title, and URL
67
- var get2 = props.get2 ? '/' + props.get2 + '/' : '/view/';
68
-
69
- var variant = props.dark ? 'white' : '#383838';
70
- function scrollSlider(e, direction) {
71
- var slide = e.target.parentElement;
72
- var scrollOffset = slide.scrollLeft;
73
- var viewableWidth = slide.clientWidth > 700 ? 3 * (document.querySelector('.tile').scrollWidth + 8) : document.querySelector('.tile').scrollWidth + 8;
74
- var scrollDirection = void 0;
75
- if (direction === 'next') {
76
- scrollDirection = scrollOffset + viewableWidth;
77
- }
78
- if (direction === 'prev') {
79
- scrollDirection = scrollOffset - viewableWidth;
80
- }
81
- slide.scrollTo({
82
- left: scrollDirection,
83
- behavior: 'smooth'
84
- });
85
- }
86
- function handleClick(url, vidIndex) {
87
- props.setState(url, vidIndex);
88
- }
89
- var _props$current = props.current,
90
- current = _props$current === undefined ? '' : _props$current;
91
-
92
-
93
- return React__default.createElement(
94
- 'div',
95
- { id: 'vid-slider', className: 'col' },
96
- React__default.createElement(
97
- 'div',
98
- { className: 'row' },
99
- React__default.createElement(
100
- 'div',
101
- { onClick: function onClick(e) {
102
- return scrollSlider(e, 'prev');
103
- }, className: 'tile__slider-prev', style: { color: variant } },
104
- React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
105
- ),
106
- React__default.createElement(
107
- 'div',
108
- { onClick: function onClick(e) {
109
- return scrollSlider(e, 'next');
110
- }, className: 'tile__slider-next', style: { color: variant } },
111
- React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
112
- ),
113
- React__default.createElement(
114
- 'div',
115
- { className: 'row__inner' },
116
- props.dataset && props.dataset.map(function (video, index) {
117
- // If there is a current prop, means this will overlay a currently playing video
118
- if (current !== '') {
119
- var url = video.url;
120
- var thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
121
-
122
- return React__default.createElement(
123
- 'div',
124
- { key: index, className: 'tile' },
125
- current && current === url ? React__default.createElement(
126
- 'div',
127
- { className: 'now-playing' },
128
- 'Now Playing'
129
- ) : '',
130
- React__default.createElement(
131
- 'a',
132
- { onClick: function onClick() {
133
- return handleClick(url, index + 1);
134
- } },
135
- React__default.createElement(
136
- 'div',
137
- { className: 'tile__media' },
138
- React__default.createElement(
139
- index$2.LazyLoad,
140
- null,
141
- React__default.createElement('img', { className: 'tile__img', src: thumbnail, alt: '' })
142
- )
143
- ),
144
- React__default.createElement(
145
- 'div',
146
- { className: 'tile__details' },
147
- React__default.createElement(
148
- 'div',
149
- { className: 'tile__title' },
150
- React__default.createElement(
151
- 'div',
152
- { style: { color: variant }, className: 'tile__title_text' },
153
- video.title
154
- )
155
- )
156
- ),
157
- React__default.createElement(
158
- 'div',
159
- { style: { color: variant }, className: 'tile__info' },
160
- video.title
161
- )
162
- )
163
- );
164
- } else {
165
- // slider by itself
166
- var _url = '' + video.link;
167
- var _thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
168
- return React__default.createElement(
169
- 'div',
170
- { key: index, className: 'tile' },
171
- React__default.createElement(
172
- 'a',
173
- { href: _url },
174
- React__default.createElement(
175
- 'div',
176
- { className: 'tile__media' },
177
- React__default.createElement(
178
- index$2.LazyLoad,
179
- null,
180
- React__default.createElement('img', { className: 'tile__img', src: _thumbnail, alt: '' })
181
- )
182
- ),
183
- React__default.createElement(
184
- 'div',
185
- { className: 'tile__details' },
186
- React__default.createElement(
187
- 'div',
188
- { className: 'tile__title' },
189
- React__default.createElement(
190
- 'div',
191
- { style: { color: variant }, className: 'tile__title_text' },
192
- video.title
193
- )
194
- )
195
- ),
196
- React__default.createElement(
197
- 'div',
198
- { style: { color: variant }, className: 'tile__info' },
199
- props.displayEpisodeNumber ? React__default.createElement(
200
- 'span',
201
- null,
202
- React__default.createElement(
203
- 'span',
204
- { style: { fontWeight: 'bold' } },
205
- 'Ep. ',
206
- index + 1,
207
- ':'
208
- ),
209
- ' ',
210
- video.title
211
- ) : video.title
212
- )
213
- )
214
- );
215
- }
216
- })
217
- )
218
- ),
219
- React__default.createElement(
220
- 'style',
221
- { jsx: 'true' },
222
- '\n #vid-slider * {\n box-sizing: border-box;\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 }\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 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 -ms-overflow-style: none;\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\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>") no-repeat center center;\n left: 0;\n width: 100%;\n height: 3rem;\n font-size: 30px;\n margin-right: 12px;\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 #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 '
223
- )
224
- );
225
- };
226
-
227
- exports.YoutubeGroup = YoutubeGroup;
228
- exports.getYoutubeId = getYoutubeId;
package/dist/esm/YoutubeGroup-78d93d44.js DELETED
@@ -1,222 +0,0 @@
1
- import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-0c4b6f40.js';
2
- import React__default from 'react';
3
- import 'next/link';
4
- import { L as LazyLoad } from './index-5f9f807a.js';
5
-
6
- var getYoutubeId = createCommonjsModule(function (module, exports) {
7
- (function (root, factory) {
8
- {
9
- module.exports = factory();
10
- }
11
- }(commonjsGlobal, function (exports) {
12
-
13
- return function (url, opts) {
14
- if (opts == undefined) {
15
- opts = {fuzzy: true};
16
- }
17
-
18
- if (/youtu\.?be/.test(url)) {
19
-
20
- // Look first for known patterns
21
- var i;
22
- var patterns = [
23
- /youtu\.be\/([^#\&\?]{11})/, // youtu.be/<id>
24
- /\?v=([^#\&\?]{11})/, // ?v=<id>
25
- /\&v=([^#\&\?]{11})/, // &v=<id>
26
- /embed\/([^#\&\?]{11})/, // embed/<id>
27
- /\/v\/([^#\&\?]{11})/ // /v/<id>
28
- ];
29
-
30
- // If any pattern matches, return the ID
31
- for (i = 0; i < patterns.length; ++i) {
32
- if (patterns[i].test(url)) {
33
- return patterns[i].exec(url)[1];
34
- }
35
- }
36
-
37
- if (opts.fuzzy) {
38
- // If that fails, break it apart by certain characters and look
39
- // for the 11 character key
40
- var tokens = url.split(/[\/\&\?=#\.\s]/g);
41
- for (i = 0; i < tokens.length; ++i) {
42
- if (/^[^#\&\?]{11}$/.test(tokens[i])) {
43
- return tokens[i];
44
- }
45
- }
46
- }
47
- }
48
-
49
- return null;
50
- };
51
-
52
- }));
53
- });
54
-
55
- /*
56
- GROQ query -
57
- accepts an array of title, URL
58
- `https://img.youtube.com/vi/${getYouTubeId(vid.url)}/hqdefault.jpg`
59
- */
60
- var YoutubeGroup = function YoutubeGroup(props) {
61
- // Props should be an array of objects containing Thumbnail, title, and URL
62
- var get2 = props.get2 ? '/' + props.get2 + '/' : '/view/';
63
-
64
- var variant = props.dark ? 'white' : '#383838';
65
- function scrollSlider(e, direction) {
66
- var slide = e.target.parentElement;
67
- var scrollOffset = slide.scrollLeft;
68
- var viewableWidth = slide.clientWidth > 700 ? 3 * (document.querySelector('.tile').scrollWidth + 8) : document.querySelector('.tile').scrollWidth + 8;
69
- var scrollDirection = void 0;
70
- if (direction === 'next') {
71
- scrollDirection = scrollOffset + viewableWidth;
72
- }
73
- if (direction === 'prev') {
74
- scrollDirection = scrollOffset - viewableWidth;
75
- }
76
- slide.scrollTo({
77
- left: scrollDirection,
78
- behavior: 'smooth'
79
- });
80
- }
81
- function handleClick(url, vidIndex) {
82
- props.setState(url, vidIndex);
83
- }
84
- var _props$current = props.current,
85
- current = _props$current === undefined ? '' : _props$current;
86
-
87
-
88
- return React__default.createElement(
89
- 'div',
90
- { id: 'vid-slider', className: 'col' },
91
- React__default.createElement(
92
- 'div',
93
- { className: 'row' },
94
- React__default.createElement(
95
- 'div',
96
- { onClick: function onClick(e) {
97
- return scrollSlider(e, 'prev');
98
- }, className: 'tile__slider-prev', style: { color: variant } },
99
- React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
100
- ),
101
- React__default.createElement(
102
- 'div',
103
- { onClick: function onClick(e) {
104
- return scrollSlider(e, 'next');
105
- }, className: 'tile__slider-next', style: { color: variant } },
106
- React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
107
- ),
108
- React__default.createElement(
109
- 'div',
110
- { className: 'row__inner' },
111
- props.dataset && props.dataset.map(function (video, index) {
112
- // If there is a current prop, means this will overlay a currently playing video
113
- if (current !== '') {
114
- var url = video.url;
115
- var thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
116
-
117
- return React__default.createElement(
118
- 'div',
119
- { key: index, className: 'tile' },
120
- current && current === url ? React__default.createElement(
121
- 'div',
122
- { className: 'now-playing' },
123
- 'Now Playing'
124
- ) : '',
125
- React__default.createElement(
126
- 'a',
127
- { onClick: function onClick() {
128
- return handleClick(url, index + 1);
129
- } },
130
- React__default.createElement(
131
- 'div',
132
- { className: 'tile__media' },
133
- React__default.createElement(
134
- LazyLoad,
135
- null,
136
- React__default.createElement('img', { className: 'tile__img', src: thumbnail, alt: '' })
137
- )
138
- ),
139
- React__default.createElement(
140
- 'div',
141
- { className: 'tile__details' },
142
- React__default.createElement(
143
- 'div',
144
- { className: 'tile__title' },
145
- React__default.createElement(
146
- 'div',
147
- { style: { color: variant }, className: 'tile__title_text' },
148
- video.title
149
- )
150
- )
151
- ),
152
- React__default.createElement(
153
- 'div',
154
- { style: { color: variant }, className: 'tile__info' },
155
- video.title
156
- )
157
- )
158
- );
159
- } else {
160
- // slider by itself
161
- var _url = '' + video.link;
162
- var _thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
163
- return React__default.createElement(
164
- 'div',
165
- { key: index, className: 'tile' },
166
- React__default.createElement(
167
- 'a',
168
- { href: _url },
169
- React__default.createElement(
170
- 'div',
171
- { className: 'tile__media' },
172
- React__default.createElement(
173
- LazyLoad,
174
- null,
175
- React__default.createElement('img', { className: 'tile__img', src: _thumbnail, alt: '' })
176
- )
177
- ),
178
- React__default.createElement(
179
- 'div',
180
- { className: 'tile__details' },
181
- React__default.createElement(
182
- 'div',
183
- { className: 'tile__title' },
184
- React__default.createElement(
185
- 'div',
186
- { style: { color: variant }, className: 'tile__title_text' },
187
- video.title
188
- )
189
- )
190
- ),
191
- React__default.createElement(
192
- 'div',
193
- { style: { color: variant }, className: 'tile__info' },
194
- props.displayEpisodeNumber ? React__default.createElement(
195
- 'span',
196
- null,
197
- React__default.createElement(
198
- 'span',
199
- { style: { fontWeight: 'bold' } },
200
- 'Ep. ',
201
- index + 1,
202
- ':'
203
- ),
204
- ' ',
205
- video.title
206
- ) : video.title
207
- )
208
- )
209
- );
210
- }
211
- })
212
- )
213
- ),
214
- React__default.createElement(
215
- 'style',
216
- { jsx: 'true' },
217
- '\n #vid-slider * {\n box-sizing: border-box;\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 }\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 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 -ms-overflow-style: none;\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\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>") no-repeat center center;\n left: 0;\n width: 100%;\n height: 3rem;\n font-size: 30px;\n margin-right: 12px;\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 #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 '
218
- )
219
- );
220
- };
221
-
222
- export { YoutubeGroup as Y, getYoutubeId as g };