@mjhls/mjh-framework 1.0.321 → 1.0.323

package/dist/esm/YoutubeGroup-13d88f43.js

@@ -1,687 +0,0 @@
-import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-0c4b6f40.js';
-import React__default, { useRef, useEffect } from 'react';
-import 'next/link';
-import { L as LazyLoad } from './index-5f9f807a.js';
-
-var getYoutubeId = createCommonjsModule(function (module, exports) {
-(function (root, factory) {
-  {
-    module.exports = factory();
-  }
-}(commonjsGlobal, function (exports) {
-
-  return function (url, opts) {
-    if (opts == undefined) {
-      opts = {fuzzy: true};
-    }
-
-    if (/youtu\.?be/.test(url)) {
-
-      // Look first for known patterns
-      var i;
-      var patterns = [
-        /youtu\.be\/([^#\&\?]{11})/,  // youtu.be/<id>
-        /\?v=([^#\&\?]{11})/,         // ?v=<id>
-        /\&v=([^#\&\?]{11})/,         // &v=<id>
-        /embed\/([^#\&\?]{11})/,      // embed/<id>
-        /\/v\/([^#\&\?]{11})/         // /v/<id>
-      ];
-
-      // If any pattern matches, return the ID
-      for (i = 0; i < patterns.length; ++i) {
-        if (patterns[i].test(url)) {
-          return patterns[i].exec(url)[1];
-        }
-      }
-
-      if (opts.fuzzy) {
-        // If that fails, break it apart by certain characters and look 
-        // for the 11 character key
-        var tokens = url.split(/[\/\&\?=#\.\s]/g);
-        for (i = 0; i < tokens.length; ++i) {
-          if (/^[^#\&\?]{11}$/.test(tokens[i])) {
-            return tokens[i];
-          }
-        }
-      }
-    }
-
-    return null;
-  };
-
-}));
-});
-
-var smoothscroll = createCommonjsModule(function (module, exports) {
-/* smoothscroll v0.4.4 - 2019 - Dustan Kasten, Jeremias Menichelli - MIT License */
-(function () {
-
-  // polyfill
-  function polyfill() {
-    // aliases
-    var w = window;
-    var d = document;
-
-    // return if scroll behavior is supported and polyfill is not forced
-    if (
-      'scrollBehavior' in d.documentElement.style &&
-      w.__forceSmoothScrollPolyfill__ !== true
-    ) {
-      return;
-    }
-
-    // globals
-    var Element = w.HTMLElement || w.Element;
-    var SCROLL_TIME = 468;
-
-    // object gathering original scroll methods
-    var original = {
-      scroll: w.scroll || w.scrollTo,
-      scrollBy: w.scrollBy,
-      elementScroll: Element.prototype.scroll || scrollElement,
-      scrollIntoView: Element.prototype.scrollIntoView
-    };
-
-    // define timing method
-    var now =
-      w.performance && w.performance.now
-        ? w.performance.now.bind(w.performance)
-        : Date.now;
-
-    /**
-     * indicates if a the current browser is made by Microsoft
-     * @method isMicrosoftBrowser
-     * @param {String} userAgent
-     * @returns {Boolean}
-     */
-    function isMicrosoftBrowser(userAgent) {
-      var userAgentPatterns = ['MSIE ', 'Trident/', 'Edge/'];
-
-      return new RegExp(userAgentPatterns.join('|')).test(userAgent);
-    }
-
-    /*
-     * IE has rounding bug rounding down clientHeight and clientWidth and
-     * rounding up scrollHeight and scrollWidth causing false positives
-     * on hasScrollableSpace
-     */
-    var ROUNDING_TOLERANCE = isMicrosoftBrowser(w.navigator.userAgent) ? 1 : 0;
-
-    /**
-     * changes scroll position inside an element
-     * @method scrollElement
-     * @param {Number} x
-     * @param {Number} y
-     * @returns {undefined}
-     */
-    function scrollElement(x, y) {
-      this.scrollLeft = x;
-      this.scrollTop = y;
-    }
-
-    /**
-     * returns result of applying ease math function to a number
-     * @method ease
-     * @param {Number} k
-     * @returns {Number}
-     */
-    function ease(k) {
-      return 0.5 * (1 - Math.cos(Math.PI * k));
-    }
-
-    /**
-     * indicates if a smooth behavior should be applied
-     * @method shouldBailOut
-     * @param {Number|Object} firstArg
-     * @returns {Boolean}
-     */
-    function shouldBailOut(firstArg) {
-      if (
-        firstArg === null ||
-        typeof firstArg !== 'object' ||
-        firstArg.behavior === undefined ||
-        firstArg.behavior === 'auto' ||
-        firstArg.behavior === 'instant'
-      ) {
-        // first argument is not an object/null
-        // or behavior is auto, instant or undefined
-        return true;
-      }
-
-      if (typeof firstArg === 'object' && firstArg.behavior === 'smooth') {
-        // first argument is an object and behavior is smooth
-        return false;
-      }
-
-      // throw error when behavior is not supported
-      throw new TypeError(
-        'behavior member of ScrollOptions ' +
-          firstArg.behavior +
-          ' is not a valid value for enumeration ScrollBehavior.'
-      );
-    }
-
-    /**
-     * indicates if an element has scrollable space in the provided axis
-     * @method hasScrollableSpace
-     * @param {Node} el
-     * @param {String} axis
-     * @returns {Boolean}
-     */
-    function hasScrollableSpace(el, axis) {
-      if (axis === 'Y') {
-        return el.clientHeight + ROUNDING_TOLERANCE < el.scrollHeight;
-      }
-
-      if (axis === 'X') {
-        return el.clientWidth + ROUNDING_TOLERANCE < el.scrollWidth;
-      }
-    }
-
-    /**
-     * indicates if an element has a scrollable overflow property in the axis
-     * @method canOverflow
-     * @param {Node} el
-     * @param {String} axis
-     * @returns {Boolean}
-     */
-    function canOverflow(el, axis) {
-      var overflowValue = w.getComputedStyle(el, null)['overflow' + axis];
-
-      return overflowValue === 'auto' || overflowValue === 'scroll';
-    }
-
-    /**
-     * indicates if an element can be scrolled in either axis
-     * @method isScrollable
-     * @param {Node} el
-     * @param {String} axis
-     * @returns {Boolean}
-     */
-    function isScrollable(el) {
-      var isScrollableY = hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y');
-      var isScrollableX = hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
-
-      return isScrollableY || isScrollableX;
-    }
-
-    /**
-     * finds scrollable parent of an element
-     * @method findScrollableParent
-     * @param {Node} el
-     * @returns {Node} el
-     */
-    function findScrollableParent(el) {
-      while (el !== d.body && isScrollable(el) === false) {
-        el = el.parentNode || el.host;
-      }
-
-      return el;
-    }
-
-    /**
-     * self invoked function that, given a context, steps through scrolling
-     * @method step
-     * @param {Object} context
-     * @returns {undefined}
-     */
-    function step(context) {
-      var time = now();
-      var value;
-      var currentX;
-      var currentY;
-      var elapsed = (time - context.startTime) / SCROLL_TIME;
-
-      // avoid elapsed times higher than one
-      elapsed = elapsed > 1 ? 1 : elapsed;
-
-      // apply easing to elapsed time
-      value = ease(elapsed);
-
-      currentX = context.startX + (context.x - context.startX) * value;
-      currentY = context.startY + (context.y - context.startY) * value;
-
-      context.method.call(context.scrollable, currentX, currentY);
-
-      // scroll more if we have not reached our destination
-      if (currentX !== context.x || currentY !== context.y) {
-        w.requestAnimationFrame(step.bind(w, context));
-      }
-    }
-
-    /**
-     * scrolls window or element with a smooth behavior
-     * @method smoothScroll
-     * @param {Object|Node} el
-     * @param {Number} x
-     * @param {Number} y
-     * @returns {undefined}
-     */
-    function smoothScroll(el, x, y) {
-      var scrollable;
-      var startX;
-      var startY;
-      var method;
-      var startTime = now();
-
-      // define scroll context
-      if (el === d.body) {
-        scrollable = w;
-        startX = w.scrollX || w.pageXOffset;
-        startY = w.scrollY || w.pageYOffset;
-        method = original.scroll;
-      } else {
-        scrollable = el;
-        startX = el.scrollLeft;
-        startY = el.scrollTop;
-        method = scrollElement;
-      }
-
-      // scroll looping over a frame
-      step({
-        scrollable: scrollable,
-        method: method,
-        startTime: startTime,
-        startX: startX,
-        startY: startY,
-        x: x,
-        y: y
-      });
-    }
-
-    // ORIGINAL METHODS OVERRIDES
-    // w.scroll and w.scrollTo
-    w.scroll = w.scrollTo = function() {
-      // avoid action when no arguments are passed
-      if (arguments[0] === undefined) {
-        return;
-      }
-
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0]) === true) {
-        original.scroll.call(
-          w,
-          arguments[0].left !== undefined
-            ? arguments[0].left
-            : typeof arguments[0] !== 'object'
-              ? arguments[0]
-              : w.scrollX || w.pageXOffset,
-          // use top prop, second argument if present or fallback to scrollY
-          arguments[0].top !== undefined
-            ? arguments[0].top
-            : arguments[1] !== undefined
-              ? arguments[1]
-              : w.scrollY || w.pageYOffset
-        );
-
-        return;
-      }
-
-      // LET THE SMOOTHNESS BEGIN!
-      smoothScroll.call(
-        w,
-        d.body,
-        arguments[0].left !== undefined
-          ? ~~arguments[0].left
-          : w.scrollX || w.pageXOffset,
-        arguments[0].top !== undefined
-          ? ~~arguments[0].top
-          : w.scrollY || w.pageYOffset
-      );
-    };
-
-    // w.scrollBy
-    w.scrollBy = function() {
-      // avoid action when no arguments are passed
-      if (arguments[0] === undefined) {
-        return;
-      }
-
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0])) {
-        original.scrollBy.call(
-          w,
-          arguments[0].left !== undefined
-            ? arguments[0].left
-            : typeof arguments[0] !== 'object' ? arguments[0] : 0,
-          arguments[0].top !== undefined
-            ? arguments[0].top
-            : arguments[1] !== undefined ? arguments[1] : 0
-        );
-
-        return;
-      }
-
-      // LET THE SMOOTHNESS BEGIN!
-      smoothScroll.call(
-        w,
-        d.body,
-        ~~arguments[0].left + (w.scrollX || w.pageXOffset),
-        ~~arguments[0].top + (w.scrollY || w.pageYOffset)
-      );
-    };
-
-    // Element.prototype.scroll and Element.prototype.scrollTo
-    Element.prototype.scroll = Element.prototype.scrollTo = function() {
-      // avoid action when no arguments are passed
-      if (arguments[0] === undefined) {
-        return;
-      }
-
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0]) === true) {
-        // if one number is passed, throw error to match Firefox implementation
-        if (typeof arguments[0] === 'number' && arguments[1] === undefined) {
-          throw new SyntaxError('Value could not be converted');
-        }
-
-        original.elementScroll.call(
-          this,
-          // use left prop, first number argument or fallback to scrollLeft
-          arguments[0].left !== undefined
-            ? ~~arguments[0].left
-            : typeof arguments[0] !== 'object' ? ~~arguments[0] : this.scrollLeft,
-          // use top prop, second argument or fallback to scrollTop
-          arguments[0].top !== undefined
-            ? ~~arguments[0].top
-            : arguments[1] !== undefined ? ~~arguments[1] : this.scrollTop
-        );
-
-        return;
-      }
-
-      var left = arguments[0].left;
-      var top = arguments[0].top;
-
-      // LET THE SMOOTHNESS BEGIN!
-      smoothScroll.call(
-        this,
-        this,
-        typeof left === 'undefined' ? this.scrollLeft : ~~left,
-        typeof top === 'undefined' ? this.scrollTop : ~~top
-      );
-    };
-
-    // Element.prototype.scrollBy
-    Element.prototype.scrollBy = function() {
-      // avoid action when no arguments are passed
-      if (arguments[0] === undefined) {
-        return;
-      }
-
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0]) === true) {
-        original.elementScroll.call(
-          this,
-          arguments[0].left !== undefined
-            ? ~~arguments[0].left + this.scrollLeft
-            : ~~arguments[0] + this.scrollLeft,
-          arguments[0].top !== undefined
-            ? ~~arguments[0].top + this.scrollTop
-            : ~~arguments[1] + this.scrollTop
-        );
-
-        return;
-      }
-
-      this.scroll({
-        left: ~~arguments[0].left + this.scrollLeft,
-        top: ~~arguments[0].top + this.scrollTop,
-        behavior: arguments[0].behavior
-      });
-    };
-
-    // Element.prototype.scrollIntoView
-    Element.prototype.scrollIntoView = function() {
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0]) === true) {
-        original.scrollIntoView.call(
-          this,
-          arguments[0] === undefined ? true : arguments[0]
-        );
-
-        return;
-      }
-
-      // LET THE SMOOTHNESS BEGIN!
-      var scrollableParent = findScrollableParent(this);
-      var parentRects = scrollableParent.getBoundingClientRect();
-      var clientRects = this.getBoundingClientRect();
-
-      if (scrollableParent !== d.body) {
-        // reveal element inside parent
-        smoothScroll.call(
-          this,
-          scrollableParent,
-          scrollableParent.scrollLeft + clientRects.left - parentRects.left,
-          scrollableParent.scrollTop + clientRects.top - parentRects.top
-        );
-
-        // reveal parent in viewport unless is fixed
-        if (w.getComputedStyle(scrollableParent).position !== 'fixed') {
-          w.scrollBy({
-            left: parentRects.left,
-            top: parentRects.top,
-            behavior: 'smooth'
-          });
-        }
-      } else {
-        // reveal element in viewport
-        w.scrollBy({
-          left: clientRects.left,
-          top: clientRects.top,
-          behavior: 'smooth'
-        });
-      }
-    };
-  }
-
-  {
-    // commonjs
-    module.exports = { polyfill: polyfill };
-  }
-
-}());
-});
-var smoothscroll_1 = smoothscroll.polyfill;
-
-// kick off the polyfill!
-
-/*
-GROQ query -
-    accepts an array of title, URL
-`https://img.youtube.com/vi/${getYouTubeId(vid.url)}/hqdefault.jpg`
-*/
-var YoutubeGroup = function YoutubeGroup(props) {
-  // Props should be an array of objects containing Thumbnail, title, and URL
-  var innerSlider = useRef(null);
-  var tile = useRef(null);
-
-  useEffect(function () {
-    //IE11 Polyfill
-    smoothscroll.polyfill();
-  }, []);
-
-  var get2 = props.get2 ? '/' + props.get2 + '/' : '/view/';
-  var variant = props.dark ? 'white' : '#383838';
-  function scrollSlider(e, direction) {
-    var slide = e.target.parentElement;
-    var scrollOffset = slide.scrollLeft;
-    var viewableWidth = slide.clientWidth;
-
-    //calculate viewable size / slide
-    var numberOfSlidesToScroll = Math.floor(viewableWidth / (tile.current.offsetWidth + 20)); //width of the tile plus margin
-    var sliderMargin = numberOfSlidesToScroll * 10;
-    numberOfSlidesToScroll = numberOfSlidesToScroll * tile.current.offsetWidth + sliderMargin;
-
-    // console.log('numberOfSlidestoScrol: ',numberOfSlidesToScroll )
-    // console.log('tile.current.offsetWidth: ',tile.current.offsetWidth )
-    // console.log('viewableWidth: ',viewableWidth )
-
-    var scrollDirection = void 0;
-
-    if (direction === 'next') {
-      scrollDirection = scrollOffset + numberOfSlidesToScroll;
-      // console.log('(scrollOffset + viewableWidth + 10): ',(scrollOffset + viewableWidth + 10) )
-      //    console.log('innerSlider.current.offsetWidth ',innerSlider.current.offsetWidth )
-      //the +10 is for the margin on the last time
-      if (scrollOffset + viewableWidth + 10 >= innerSlider.current.offsetWidth) {
-        scrollDirection = 0;
-      }
-    }
-    if (direction === 'prev') {
-      scrollDirection = scrollOffset - numberOfSlidesToScroll;
-
-      if (scrollOffset === 0) {
-        scrollDirection = innerSlider.current.offsetWidth;
-      }
-    }
-    slide.scrollTo({
-      left: scrollDirection,
-      behavior: 'smooth'
-    });
-  }
-
-  function handleClick(url, vidIndex) {
-    props.setState(url, vidIndex);
-  }
-
-  var _props$current = props.current,
-      current = _props$current === undefined ? '' : _props$current;
-
-
-  return React__default.createElement(
-    'div',
-    { id: 'vid-slider', className: 'col' },
-    React__default.createElement(
-      'div',
-      { className: 'row' },
-      React__default.createElement(
-        'div',
-        { onClick: function onClick(e) {
-            return scrollSlider(e, 'prev');
-          }, className: 'tile__slider-prev', style: { color: variant } },
-        React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
-      ),
-      React__default.createElement(
-        'div',
-        { onClick: function onClick(e) {
-            return scrollSlider(e, 'next');
-          }, className: 'tile__slider-next', style: { color: variant } },
-        React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
-      ),
-      React__default.createElement(
-        'div',
-        { ref: innerSlider, className: 'row__inner' },
-        props.dataset && props.dataset.map(function (video, index) {
-          // If there is a current prop, means this will overlay a currently playing video
-          if (current !== '') {
-            var url = video.url;
-            var thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
-
-            return React__default.createElement(
-              'div',
-              { ref: tile, key: index, className: 'tile' },
-              current && current === url ? React__default.createElement(
-                'div',
-                { className: 'now-playing' },
-                'Now Playing'
-              ) : '',
-              React__default.createElement(
-                'a',
-                { onClick: function onClick() {
-                    return handleClick(url, index + 1);
-                  } },
-                React__default.createElement(
-                  'div',
-                  { className: 'tile__media' },
-                  React__default.createElement(
-                    LazyLoad,
-                    null,
-                    React__default.createElement('img', { className: 'tile__img', src: thumbnail, alt: '' })
-                  )
-                ),
-                React__default.createElement(
-                  'div',
-                  { className: 'tile__details' },
-                  React__default.createElement(
-                    'div',
-                    { className: 'tile__title' },
-                    React__default.createElement(
-                      'div',
-                      { style: { color: variant }, className: 'tile__title_text' },
-                      video.title
-                    )
-                  )
-                ),
-                React__default.createElement(
-                  'div',
-                  { style: { color: '#fff' }, className: 'tile__info' },
-                  video.title
-                )
-              )
-            );
-          } else {
-            // slider by itself
-            var _url = '' + video.link;
-            var _thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
-            return React__default.createElement(
-              'div',
-              { ref: tile, key: index, className: 'tile' },
-              React__default.createElement(
-                'a',
-                { href: _url },
-                React__default.createElement(
-                  'div',
-                  { className: 'tile__media' },
-                  React__default.createElement(
-                    LazyLoad,
-                    null,
-                    React__default.createElement('img', { className: 'tile__img', src: _thumbnail, alt: '' })
-                  )
-                ),
-                React__default.createElement(
-                  'div',
-                  { className: 'tile__details' },
-                  React__default.createElement(
-                    'div',
-                    { className: 'tile__title' },
-                    React__default.createElement(
-                      'div',
-                      { style: { color: '#fff' }, className: 'tile__title_text' },
-                      video.title
-                    )
-                  )
-                ),
-                React__default.createElement(
-                  'div',
-                  { style: { color: variant }, className: 'tile__info' },
-                  props.displayEpisodeNumber ? React__default.createElement(
-                    'span',
-                    null,
-                    React__default.createElement(
-                      'span',
-                      { style: { fontWeight: 'bold' } },
-                      'Ep. ',
-                      index + 1,
-                      ':'
-                    ),
-                    ' ',
-                    video.title
-                  ) : video.title
-                )
-              )
-            );
-          }
-        })
-      )
-    ),
-    React__default.createElement(
-      'style',
-      { jsx: 'true' },
-      '\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          padding: 0 1.5rem;\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>")\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        #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.15);\n          transform: scale(1.15);\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: -.5rem;\n          padding: 1rem;\n        }\n        #vid-slider .tile__slider-next {\n          right: -.5rem;\n          padding: 1rem;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding-right: 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      '
-    )
-  );
-};
-
-export { YoutubeGroup as Y, getYoutubeId as g };