@blaze-cms/react-page-builder 0.118.0-alpha.0 → 0.118.0

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.118.0](https://github.com/thebyte9/blaze/compare/v0.118.0-alpha.3...v0.118.0) (2022-01-25)
+
+**Note:** Version bump only for package @blaze-cms/react-page-builder
+
+
+
+
+
+# [0.118.0-alpha.3](https://github.com/thebyte9/blaze/compare/v0.118.0-alpha.2...v0.118.0-alpha.3) (2022-01-24)
+
+**Note:** Version bump only for package @blaze-cms/react-page-builder
+
+
+
+
+
+# [0.118.0-alpha.2](https://github.com/thebyte9/blaze/compare/v0.118.0-alpha.1...v0.118.0-alpha.2) (2022-01-14)
+
+
+### Bug Fixes
+
+* set correct funciton type for video image onload ([6df1060](https://github.com/thebyte9/blaze/commit/6df1060a7a3d0ba18f49d6d7e757ae1c79a7509d))
+
+
+
+
+
+# [0.118.0-alpha.1](https://github.com/thebyte9/blaze/compare/v0.118.0-alpha.0...v0.118.0-alpha.1) (2022-01-14)
+
+
+### Bug Fixes
+
+* added youtube facade lazy loading ([#3243](https://github.com/thebyte9/blaze/issues/3243)) ([7f2bef9](https://github.com/thebyte9/blaze/commit/7f2bef9269333aa7c248dce18e06a459ad7a3572))
+
+
+
+
+
 # [0.118.0-alpha.0](https://github.com/thebyte9/blaze/compare/v0.117.0...v0.118.0-alpha.0) (2022-01-13)
 
 **Note:** Version bump only for package @blaze-cms/react-page-builder

package/lib/components/Menu/Menu.js

@@ -27,6 +27,8 @@ require("core-js/modules/es.array.concat.js");
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -39,6 +41,8 @@ var _hooks = require("../../hooks");
 
 var _constants = require("../../constants");
 
+var _excluded = ["children", "collapse", "modifier", "mobileMenuModifier", "mobileMenuChildrenModifier", "mobileIconAlignment", "mobileButtonModifier", "hamburgerIconModifier", "closeIconModifier"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -46,7 +50,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Menu = function Menu(_ref) {
   var children = _ref.children,
       collapse = _ref.collapse,
-      modifier = _ref.modifier;
+      modifier = _ref.modifier,
+      mobileMenuModifier = _ref.mobileMenuModifier,
+      mobileMenuChildrenModifier = _ref.mobileMenuChildrenModifier,
+      mobileIconAlignment = _ref.mobileIconAlignment,
+      mobileButtonModifier = _ref.mobileButtonModifier,
+      hamburgerIconModifier = _ref.hamburgerIconModifier,
+      closeIconModifier = _ref.closeIconModifier,
+      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var isMobile = (0, _hooks.useCheckMobileScreen)();
 
   var _useState = (0, _react.useState)(false),
@@ -55,25 +66,47 @@ var Menu = function Menu(_ref) {
       setShowMobileMenu = _useState2[1];
 
   var shouldDisplayCollapsed = collapse && isMobile;
-  var mobileButtonClass = shouldDisplayCollapsed && isMobile ? '' : _constants.HIDDEN;
+  var mobileButtonClass = shouldDisplayCollapsed && isMobile ? mobileButtonModifier : _constants.HIDDEN;
   var shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;
-  var childrenDisplayClass = shouldDisplayChildren ? modifier : "".concat(modifier, " ").concat(_constants.HIDDEN);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, collapse && /*#__PURE__*/_react["default"].createElement(_button["default"], {
+  var childrenDesktopModifier = shouldDisplayChildren && !isMobile ? modifier : "".concat(modifier, " ").concat(_constants.HIDDEN);
+  var childrenMobileModifier = shouldDisplayChildren && isMobile ? "".concat(mobileMenuChildrenModifier) : " ".concat(_constants.HIDDEN);
+  var isMobileMenuExpanded = showMobileMenu ? "".concat(mobileMenuModifier) : '';
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, collapse && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "top-0 absolute z-50"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex w-screen z-50 justify-".concat(mobileIconAlignment, " ").concat(isMobileMenuExpanded)
+  }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
     className: mobileButtonClass,
     onClick: function onClick() {
       return setShowMobileMenu(!showMobileMenu);
     }
-  }, /*#__PURE__*/_react["default"].createElement("i", null, /*#__PURE__*/_react["default"].createElement(_md.MdMenu, null))), /*#__PURE__*/_react["default"].createElement("ul", {
-    className: childrenDisplayClass
+  }, /*#__PURE__*/_react["default"].createElement("i", null, showMobileMenu ? /*#__PURE__*/_react["default"].createElement(_md.MdClose, {
+    className: closeIconModifier
+  }) : /*#__PURE__*/_react["default"].createElement(_md.MdMenu, {
+    className: hamburgerIconModifier
+  }))))), /*#__PURE__*/_react["default"].createElement("ul", {
+    className: isMobile ? childrenMobileModifier : childrenDesktopModifier
   }, children));
 };
 
 Menu.propTypes = {
   collapse: _propTypes["default"].bool.isRequired,
+  hamburgerIconModifier: _propTypes["default"].string,
+  closeIconModifier: _propTypes["default"].string,
+  mobileButtonModifier: _propTypes["default"].string,
+  mobileMenuModifier: _propTypes["default"].string,
+  mobileMenuChildrenModifier: _propTypes["default"].string,
   modifier: _propTypes["default"].string,
+  mobileIconAlignment: _propTypes["default"].string,
   children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node])
 };
 Menu.defaultProps = {
+  hamburgerIconModifier: '',
+  closeIconModifier: '',
+  mobileButtonModifier: '',
+  mobileIconAlignment: '',
+  mobileMenuModifier: '',
+  mobileMenuChildrenModifier: '',
   modifier: '',
   children: []
 };

package/lib/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Menu/Menu.js"],"names":["Menu","children","collapse","modifier","isMobile","showMobileMenu","setShowMobileMenu","shouldDisplayCollapsed","mobileButtonClass","HIDDEN","shouldDisplayChildren","childrenDisplayClass","propTypes","PropTypes","bool","isRequired","string","oneOfType","arrayOf","node","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAAsC;AAAA,MAAnCC,QAAmC,QAAnCA,QAAmC;AAAA,MAAzBC,QAAyB,QAAzBA,QAAyB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACjD,MAAMC,QAAQ,GAAG,kCAAjB;;AACA,kBAA4C,qBAAS,KAAT,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AAEA,MAAMC,sBAAsB,GAAGL,QAAQ,IAAIE,QAA3C;AACA,MAAMI,iBAAiB,GAAGD,sBAAsB,IAAIH,QAA1B,GAAqC,EAArC,GAA0CK,iBAApE;AACA,MAAMC,qBAAqB,GAAGH,sBAAsB,GAAGF,cAAH,GAAoB,IAAxE;AACA,MAAMM,oBAAoB,GAAGD,qBAAqB,GAAGP,QAAH,aAAiBA,QAAjB,cAA6BM,iBAA7B,CAAlD;AAEA,sBACE,kEACGP,QAAQ,iBACP,gCAAC,kBAAD;AACE,IAAA,SAAS,EAAEM,iBADb;AAEE,IAAA,OAAO,EAAE;AAAA,aAAMF,iBAAiB,CAAC,CAACD,cAAF,CAAvB;AAAA;AAFX,kBAGE,wDACE,gCAAC,UAAD,OADF,CAHF,CAFJ,eAUE;AAAI,IAAA,SAAS,EAAEM;AAAf,KAAsCV,QAAtC,CAVF,CADF;AAcD,CAvBD;;AAyBAD,IAAI,CAACY,SAAL,GAAiB;AACfV,EAAAA,QAAQ,EAAEW,sBAAUC,IAAV,CAAeC,UADV;AAEfZ,EAAAA,QAAQ,EAAEU,sBAAUG,MAFL;AAGff,EAAAA,QAAQ,EAAEY,sBAAUI,SAAV,CAAoB,CAACJ,sBAAUK,OAAV,CAAkBL,sBAAUM,IAA5B,CAAD,EAAoCN,sBAAUM,IAA9C,CAApB;AAHK,CAAjB;AAMAnB,IAAI,CAACoB,YAAL,GAAoB;AAClBjB,EAAAA,QAAQ,EAAE,EADQ;AAElBF,EAAAA,QAAQ,EAAE;AAFQ,CAApB;eAKeD,I","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport BlazeButton from '@blaze-react/button';\nimport { MdMenu } from 'react-icons/md';\nimport { useCheckMobileScreen } from '../../hooks';\nimport { HIDDEN } from '../../constants';\n\nconst Menu = ({ children, collapse, modifier }) => {\n  const isMobile = useCheckMobileScreen();\n  const [showMobileMenu, setShowMobileMenu] = useState(false);\n\n  const shouldDisplayCollapsed = collapse && isMobile;\n  const mobileButtonClass = shouldDisplayCollapsed && isMobile ? '' : HIDDEN;\n  const shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;\n  const childrenDisplayClass = shouldDisplayChildren ? modifier : `${modifier} ${HIDDEN}`;\n\n  return (\n    <>\n      {collapse && (\n        <BlazeButton\n          className={mobileButtonClass}\n          onClick={() => setShowMobileMenu(!showMobileMenu)}>\n          <i>\n            <MdMenu />\n          </i>\n        </BlazeButton>\n      )}\n      <ul className={childrenDisplayClass}>{children}</ul>\n    </>\n  );\n};\n\nMenu.propTypes = {\n  collapse: PropTypes.bool.isRequired,\n  modifier: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n\nMenu.defaultProps = {\n  modifier: '',\n  children: []\n};\n\nexport default Menu;\n"],"file":"Menu.js"}
+{"version":3,"sources":["../../../src/components/Menu/Menu.js"],"names":["Menu","children","collapse","modifier","mobileMenuModifier","mobileMenuChildrenModifier","mobileIconAlignment","mobileButtonModifier","hamburgerIconModifier","closeIconModifier","rest","isMobile","showMobileMenu","setShowMobileMenu","shouldDisplayCollapsed","mobileButtonClass","HIDDEN","shouldDisplayChildren","childrenDesktopModifier","childrenMobileModifier","isMobileMenuExpanded","propTypes","PropTypes","bool","isRequired","string","oneOfType","arrayOf","node","defaultProps"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport BlazeButton from '@blaze-react/button';\nimport { MdMenu, MdClose } from 'react-icons/md';\nimport { useCheckMobileScreen } from '../../hooks';\nimport { HIDDEN } from '../../constants';\n\nconst Menu = ({\n  children,\n  collapse,\n  modifier,\n  mobileMenuModifier,\n  mobileMenuChildrenModifier,\n  mobileIconAlignment,\n  mobileButtonModifier,\n  hamburgerIconModifier,\n  closeIconModifier,\n  ...rest\n}) => {\n  const isMobile = useCheckMobileScreen();\n  const [showMobileMenu, setShowMobileMenu] = useState(false);\n\n  const shouldDisplayCollapsed = collapse && isMobile;\n  const mobileButtonClass = shouldDisplayCollapsed && isMobile ? mobileButtonModifier : HIDDEN;\n  const shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;\n  const childrenDesktopModifier =\n    shouldDisplayChildren && !isMobile ? modifier : `${modifier} ${HIDDEN}`;\n\n  const childrenMobileModifier =\n    shouldDisplayChildren && isMobile ? `${mobileMenuChildrenModifier}` : ` ${HIDDEN}`;\n\n  const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';\n\n  return (\n    <>\n      {collapse && (\n        <div className=\"top-0 absolute z-50\">\n          <div\n            className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>\n            <BlazeButton\n              className={mobileButtonClass}\n              onClick={() => setShowMobileMenu(!showMobileMenu)}>\n              <i>\n                {showMobileMenu ? (\n                  <MdClose className={closeIconModifier} />\n                ) : (\n                  <MdMenu className={hamburgerIconModifier} />\n                )}\n              </i>\n            </BlazeButton>\n          </div>\n        </div>\n      )}\n      <ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>{children}</ul>\n    </>\n  );\n};\n\nMenu.propTypes = {\n  collapse: PropTypes.bool.isRequired,\n  hamburgerIconModifier: PropTypes.string,\n  closeIconModifier: PropTypes.string,\n  mobileButtonModifier: PropTypes.string,\n  mobileMenuModifier: PropTypes.string,\n  mobileMenuChildrenModifier: PropTypes.string,\n  modifier: PropTypes.string,\n  mobileIconAlignment: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n\nMenu.defaultProps = {\n  hamburgerIconModifier: '',\n  closeIconModifier: '',\n  mobileButtonModifier: '',\n  mobileIconAlignment: '',\n  mobileMenuModifier: '',\n  mobileMenuChildrenModifier: '',\n  modifier: '',\n  children: []\n};\n\nexport default Menu;\n"],"file":"Menu.js"}

package/lib/components/Video/providers/YouTube/YouTubeProvider.js

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactYoutube = _interopRequireDefault(require("react-youtube"));
+var _YoutubeEmbeded = _interopRequireDefault(require("./YoutubeEmbeded"));
 
 var _helpers = require("./helpers");
 
@@ -25,17 +25,14 @@ var YouTubeProvider = function YouTubeProvider(_ref) {
       loop = _ref.loop;
   var videoId = (0, _helpers.getYouTubeID)(url);
   if (!videoId) return null;
-  var opts = {
-    playerVars: {
-      autoplay: (0, _helpers.booleanToNumber)(autoplay),
-      loop: (0, _helpers.booleanToNumber)(loop)
-    }
-  };
-  return /*#__PURE__*/_react["default"].createElement(_reactYoutube["default"], {
+  var params = "loop=".concat((0, _helpers.booleanToNumber)(loop));
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _constants.VIDEO_WRAPPER_CLASS_NAME
+  }, /*#__PURE__*/_react["default"].createElement(_YoutubeEmbeded["default"], {
+    autoplay: autoplay,
     videoId: videoId,
-    containerClassName: _constants.VIDEO_WRAPPER_CLASS_NAME,
-    opts: opts
-  });
+    params: params
+  }));
 };
 
 YouTubeProvider.propTypes = {

package/lib/components/Video/providers/YouTube/YouTubeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Video/providers/YouTube/YouTubeProvider.js"],"names":["YouTubeProvider","url","autoplay","loop","videoId","opts","playerVars","VIDEO_WRAPPER_CLASS_NAME","propTypes","PropTypes","string","isRequired","bool","defaultProps"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,OAA6B;AAAA,MAA1BC,GAA0B,QAA1BA,GAA0B;AAAA,MAArBC,QAAqB,QAArBA,QAAqB;AAAA,MAAXC,IAAW,QAAXA,IAAW;AACnD,MAAMC,OAAO,GAAG,2BAAaH,GAAb,CAAhB;AAEA,MAAI,CAACG,OAAL,EAAc,OAAO,IAAP;AAEd,MAAMC,IAAI,GAAG;AACXC,IAAAA,UAAU,EAAE;AACVJ,MAAAA,QAAQ,EAAE,8BAAgBA,QAAhB,CADA;AAEVC,MAAAA,IAAI,EAAE,8BAAgBA,IAAhB;AAFI;AADD,GAAb;AAOA,sBAAO,gCAAC,wBAAD;AAAS,IAAA,OAAO,EAAEC,OAAlB;AAA2B,IAAA,kBAAkB,EAAEG,mCAA/C;AAAyE,IAAA,IAAI,EAAEF;AAA/E,IAAP;AACD,CAbD;;AAeAL,eAAe,CAACQ,SAAhB,GAA4B;AAC1BP,EAAAA,GAAG,EAAEQ,sBAAUC,MAAV,CAAiBC,UADI;AAE1BT,EAAAA,QAAQ,EAAEO,sBAAUG,IAFM;AAG1BT,EAAAA,IAAI,EAAEM,sBAAUG;AAHU,CAA5B;AAMAZ,eAAe,CAACa,YAAhB,GAA+B;AAC7BX,EAAAA,QAAQ,EAAE,KADmB;AAE7BC,EAAAA,IAAI,EAAE;AAFuB,CAA/B;eAKeH,e","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport YouTube from 'react-youtube';\nimport { getYouTubeID, booleanToNumber } from './helpers';\nimport { VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';\n\nconst YouTubeProvider = ({ url, autoplay, loop }) => {\n  const videoId = getYouTubeID(url);\n\n  if (!videoId) return null;\n\n  const opts = {\n    playerVars: {\n      autoplay: booleanToNumber(autoplay),\n      loop: booleanToNumber(loop)\n    }\n  };\n\n  return <YouTube videoId={videoId} containerClassName={VIDEO_WRAPPER_CLASS_NAME} opts={opts} />;\n};\n\nYouTubeProvider.propTypes = {\n  url: PropTypes.string.isRequired,\n  autoplay: PropTypes.bool,\n  loop: PropTypes.bool\n};\n\nYouTubeProvider.defaultProps = {\n  autoplay: false,\n  loop: false\n};\n\nexport default YouTubeProvider;\n"],"file":"YouTubeProvider.js"}
+{"version":3,"sources":["../../../../../src/components/Video/providers/YouTube/YouTubeProvider.js"],"names":["YouTubeProvider","url","autoplay","loop","videoId","params","VIDEO_WRAPPER_CLASS_NAME","propTypes","PropTypes","string","isRequired","bool","defaultProps"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,OAA6B;AAAA,MAA1BC,GAA0B,QAA1BA,GAA0B;AAAA,MAArBC,QAAqB,QAArBA,QAAqB;AAAA,MAAXC,IAAW,QAAXA,IAAW;AACnD,MAAMC,OAAO,GAAG,2BAAaH,GAAb,CAAhB;AAEA,MAAI,CAACG,OAAL,EAAc,OAAO,IAAP;AACd,MAAMC,MAAM,kBAAW,8BAAgBF,IAAhB,CAAX,CAAZ;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEG;AAAhB,kBACE,gCAAC,0BAAD;AAAgB,IAAA,QAAQ,EAAEJ,QAA1B;AAAoC,IAAA,OAAO,EAAEE,OAA7C;AAAsD,IAAA,MAAM,EAAEC;AAA9D,IADF,CADF;AAKD,CAXD;;AAaAL,eAAe,CAACO,SAAhB,GAA4B;AAC1BN,EAAAA,GAAG,EAAEO,sBAAUC,MAAV,CAAiBC,UADI;AAE1BR,EAAAA,QAAQ,EAAEM,sBAAUG,IAFM;AAG1BR,EAAAA,IAAI,EAAEK,sBAAUG;AAHU,CAA5B;AAMAX,eAAe,CAACY,YAAhB,GAA+B;AAC7BV,EAAAA,QAAQ,EAAE,KADmB;AAE7BC,EAAAA,IAAI,EAAE;AAFuB,CAA/B;eAKeH,e","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport YoutubeEmbeded from './YoutubeEmbeded';\nimport { getYouTubeID, booleanToNumber } from './helpers';\nimport { VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';\n\nconst YouTubeProvider = ({ url, autoplay, loop }) => {\n  const videoId = getYouTubeID(url);\n\n  if (!videoId) return null;\n  const params = `loop=${booleanToNumber(loop)}`;\n\n  return (\n    <div className={VIDEO_WRAPPER_CLASS_NAME}>\n      <YoutubeEmbeded autoplay={autoplay} videoId={videoId} params={params} />\n    </div>\n  );\n};\n\nYouTubeProvider.propTypes = {\n  url: PropTypes.string.isRequired,\n  autoplay: PropTypes.bool,\n  loop: PropTypes.bool\n};\n\nYouTubeProvider.defaultProps = {\n  autoplay: false,\n  loop: false\n};\n\nexport default YouTubeProvider;\n"],"file":"YouTubeProvider.js"}

package/lib/components/Video/providers/YouTube/YoutubeEmbeded.js

@@ -0,0 +1,200 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.define-property.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("core-js/modules/es.array.concat.js");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _customHooks = require("@blaze-react/utils/lib/customHooks");
+
+var _constants = require("../../../../constants");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var YT_HQ_FORMAT = 'hqdefault';
+var YT_IMAGE_URL = 'https://i.ytimg.com';
+
+var YoutubeEmbeded = function YoutubeEmbeded(_ref) {
+  var autoplay = _ref.autoplay,
+      videoId = _ref.videoId,
+      playlistCoverId = _ref.playlistCoverId,
+      videoTitle = _ref.videoTitle,
+      poster = _ref.poster,
+      videoParams = _ref.videoParams,
+      announce = _ref.announce,
+      noCookie = _ref.noCookie,
+      webp = _ref.webp,
+      playlist = _ref.playlist,
+      onIframeAdded = _ref.onIframeAdded,
+      muted = _ref.muted,
+      adNetwork = _ref.adNetwork,
+      iframeClass = _ref.iframeClass,
+      priority = _ref.priority;
+
+  var _useInView = (0, _customHooks.useInView)(_constants.IN_VIEW_CONFIG),
+      _useInView2 = (0, _slicedToArray2["default"])(_useInView, 2),
+      isIntersecting = _useInView2[0],
+      outerRef = _useInView2[1];
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      preconnected = _useState2[0],
+      setPreconnected = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(!!autoplay),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      renderIframe = _useState4[0],
+      setRenderIframe = _useState4[1];
+
+  var _useState5 = (0, _react.useState)({
+    imageSize: poster,
+    displayImage: priority
+  }),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      _useState6$ = _useState6[0],
+      imageSize = _useState6$.imageSize,
+      displayImage = _useState6$.displayImage,
+      setImageDetails = _useState6[1];
+
+  var encodedId = encodeURIComponent(videoId);
+  var videoPlaylisCovertId = typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null;
+  var paramsImp = videoParams ? "&".concat(videoParams) : '';
+  var format = webp ? 'webp' : 'jpg';
+  var vi = webp ? 'vi_webp' : 'vi';
+  var posterUrl = !playlist ? "".concat(YT_IMAGE_URL, "/").concat(vi, "/").concat(encodedId, "/").concat(imageSize, ".").concat(format) : "".concat(YT_IMAGE_URL, "/").concat(vi, "/").concat(videoPlaylisCovertId, "/").concat(imageSize, ".").concat(format);
+  var ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
+  var mutedValue = muted ? '&mute=1' : '';
+  var iframeSrc = !playlist ? "".concat(ytUrl, "/embed/").concat(encodedId, "?autoplay=1").concat(mutedValue).concat(paramsImp) : "".concat(ytUrl, "/embed/videoseries?autoplay=1").concat(mutedValue, "&list=").concat(encodedId).concat(paramsImp);
+  var parsedWrapperClassname = "yt-facade ".concat(renderIframe ? 'yt-activated' : '');
+  (0, _react.useEffect)(function () {
+    if (!priority && !isIntersecting || imageSize === YT_HQ_FORMAT) return;
+    var img = new Image(); // eslint-disable-next-line func-names
+
+    img.onload = function () {
+      var newImageSize = imageSize;
+      if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;
+      setImageDetails({
+        imageSize: newImageSize,
+        displayImage: true
+      });
+    };
+
+    img.src = posterUrl;
+  }, [imageSize, isIntersecting, posterUrl, priority]);
+
+  var warmConnections = function warmConnections() {
+    if (preconnected) return;
+    setPreconnected(true);
+  };
+
+  var addIframe = function addIframe() {
+    if (renderIframe) return;
+    onIframeAdded();
+    setRenderIframe(true);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, preconnected && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("link", {
+    rel: "preconnect",
+    href: YT_IMAGE_URL
+  }), /*#__PURE__*/_react["default"].createElement("link", {
+    rel: "preconnect",
+    href: ytUrl
+  }), /*#__PURE__*/_react["default"].createElement("link", {
+    rel: "preconnect",
+    href: "https://www.google.com"
+  }), adNetwork && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("link", {
+    rel: "preconnect",
+    href: "https://static.doubleclick.net"
+  }), /*#__PURE__*/_react["default"].createElement("link", {
+    rel: "preconnect",
+    href: "https://googleads.g.doubleclick.net"
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    ref: outerRef,
+    role: "button",
+    onPointerOver: warmConnections,
+    onClick: addIframe,
+    className: parsedWrapperClassname,
+    "data-title": videoTitle,
+    style: {
+      backgroundImage: "url(".concat(displayImage ? posterUrl : '', ")")
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    type: "button",
+    className: "yt-facade-button-wrapper",
+    "aria-label": "".concat(announce, " ").concat(videoTitle)
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "yt-facade-button"
+  })), renderIframe && /*#__PURE__*/_react["default"].createElement("iframe", {
+    className: iframeClass,
+    title: videoTitle,
+    allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+    allowFullScreen: true,
+    src: iframeSrc
+  })));
+};
+
+YoutubeEmbeded.propTypes = {
+  priority: _propTypes["default"].bool,
+  onIframeAdded: _propTypes["default"].func,
+  adNetwork: _propTypes["default"].bool,
+  autoplay: _propTypes["default"].bool,
+  playlist: _propTypes["default"].bool,
+  muted: _propTypes["default"].bool,
+  webp: _propTypes["default"].bool,
+  noCookie: _propTypes["default"].bool,
+  videoId: _propTypes["default"].string,
+  iframeClass: _propTypes["default"].string,
+  poster: _propTypes["default"].string,
+  announce: _propTypes["default"].string,
+  playlistCoverId: _propTypes["default"].string,
+  videoParams: _propTypes["default"].string,
+  videoTitle: _propTypes["default"].string
+};
+YoutubeEmbeded.defaultProps = {
+  priority: true,
+  onIframeAdded: function onIframeAdded() {},
+  adNetwork: false,
+  autoplay: false,
+  playlist: false,
+  muted: false,
+  webp: false,
+  noCookie: false,
+  iframeClass: '',
+  poster: 'sddefault',
+  announce: 'Watch',
+  videoId: '',
+  playlistCoverId: '',
+  videoParams: '',
+  videoTitle: ''
+};
+var _default = YoutubeEmbeded;
+exports["default"] = _default;
+//# sourceMappingURL=YoutubeEmbeded.js.map

package/lib/components/Video/providers/YouTube/YoutubeEmbeded.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Video/providers/YouTube/YoutubeEmbeded.js"],"names":["YT_HQ_FORMAT","YT_IMAGE_URL","YoutubeEmbeded","autoplay","videoId","playlistCoverId","videoTitle","poster","videoParams","announce","noCookie","webp","playlist","onIframeAdded","muted","adNetwork","iframeClass","priority","IN_VIEW_CONFIG","isIntersecting","outerRef","preconnected","setPreconnected","renderIframe","setRenderIframe","imageSize","displayImage","setImageDetails","encodedId","encodeURIComponent","videoPlaylisCovertId","paramsImp","format","vi","posterUrl","ytUrl","mutedValue","iframeSrc","parsedWrapperClassname","img","Image","onload","newImageSize","width","src","warmConnections","addIframe","backgroundImage","propTypes","PropTypes","bool","func","string","defaultProps"],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useInView } from '@blaze-react/utils/lib/customHooks';\nimport { IN_VIEW_CONFIG } from '../../../../constants';\n\nconst YT_HQ_FORMAT = 'hqdefault';\nconst YT_IMAGE_URL = 'https://i.ytimg.com';\n\nconst YoutubeEmbeded = ({\n  autoplay,\n  videoId,\n  playlistCoverId,\n  videoTitle,\n  poster,\n  videoParams,\n  announce,\n  noCookie,\n  webp,\n  playlist,\n  onIframeAdded,\n  muted,\n  adNetwork,\n  iframeClass,\n  priority\n}) => {\n  const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);\n  const [preconnected, setPreconnected] = useState(false);\n  const [renderIframe, setRenderIframe] = useState(!!autoplay);\n  const [{ imageSize, displayImage }, setImageDetails] = useState({\n    imageSize: poster,\n    displayImage: priority\n  });\n\n  const encodedId = encodeURIComponent(videoId);\n  const videoPlaylisCovertId =\n    typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null;\n  const paramsImp = videoParams ? `&${videoParams}` : '';\n  const format = webp ? 'webp' : 'jpg';\n  const vi = webp ? 'vi_webp' : 'vi';\n  const posterUrl = !playlist\n    ? `${YT_IMAGE_URL}/${vi}/${encodedId}/${imageSize}.${format}`\n    : `${YT_IMAGE_URL}/${vi}/${videoPlaylisCovertId}/${imageSize}.${format}`;\n  const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';\n\n  const mutedValue = muted ? '&mute=1' : '';\n  const iframeSrc = !playlist\n    ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}`\n    : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;\n  const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;\n\n  useEffect(\n    () => {\n      if ((!priority && !isIntersecting) || imageSize === YT_HQ_FORMAT) return;\n\n      const img = new Image();\n      // eslint-disable-next-line func-names\n      img.onload = function() {\n        let newImageSize = imageSize;\n        if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;\n        setImageDetails({ imageSize: newImageSize, displayImage: true });\n      };\n\n      img.src = posterUrl;\n    },\n    [imageSize, isIntersecting, posterUrl, priority]\n  );\n\n  const warmConnections = () => {\n    if (preconnected) return;\n    setPreconnected(true);\n  };\n\n  const addIframe = () => {\n    if (renderIframe) return;\n    onIframeAdded();\n    setRenderIframe(true);\n  };\n\n  return (\n    <>\n      {preconnected && (\n        <>\n          <link rel=\"preconnect\" href={YT_IMAGE_URL} />\n          <link rel=\"preconnect\" href={ytUrl} />\n          <link rel=\"preconnect\" href=\"https://www.google.com\" />\n          {adNetwork && (\n            <>\n              <link rel=\"preconnect\" href=\"https://static.doubleclick.net\" />\n              <link rel=\"preconnect\" href=\"https://googleads.g.doubleclick.net\" />\n            </>\n          )}\n        </>\n      )}\n      <div\n        ref={outerRef}\n        role=\"button\"\n        onPointerOver={warmConnections}\n        onClick={addIframe}\n        className={parsedWrapperClassname}\n        data-title={videoTitle}\n        style={{\n          backgroundImage: `url(${displayImage ? posterUrl : ''})`\n        }}>\n        <div\n          type=\"button\"\n          className=\"yt-facade-button-wrapper\"\n          aria-label={`${announce} ${videoTitle}`}>\n          <div className=\"yt-facade-button\" />\n        </div>\n        {renderIframe && (\n          <iframe\n            className={iframeClass}\n            title={videoTitle}\n            allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            src={iframeSrc}\n          />\n        )}\n      </div>\n    </>\n  );\n};\n\nYoutubeEmbeded.propTypes = {\n  priority: PropTypes.bool,\n  onIframeAdded: PropTypes.func,\n  adNetwork: PropTypes.bool,\n  autoplay: PropTypes.bool,\n  playlist: PropTypes.bool,\n  muted: PropTypes.bool,\n  webp: PropTypes.bool,\n  noCookie: PropTypes.bool,\n  videoId: PropTypes.string,\n  iframeClass: PropTypes.string,\n  poster: PropTypes.string,\n  announce: PropTypes.string,\n  playlistCoverId: PropTypes.string,\n  videoParams: PropTypes.string,\n  videoTitle: PropTypes.string\n};\n\nYoutubeEmbeded.defaultProps = {\n  priority: true,\n  onIframeAdded: () => {},\n  adNetwork: false,\n  autoplay: false,\n  playlist: false,\n  muted: false,\n  webp: false,\n  noCookie: false,\n  iframeClass: '',\n  poster: 'sddefault',\n  announce: 'Watch',\n  videoId: '',\n  playlistCoverId: '',\n  videoParams: '',\n  videoTitle: ''\n};\n\nexport default YoutubeEmbeded;\n"],"file":"YoutubeEmbeded.js"}

package/lib-es/components/Menu/Menu.js

@@ -1,35 +1,68 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["children", "collapse", "modifier", "mobileMenuModifier", "mobileMenuChildrenModifier", "mobileIconAlignment", "mobileButtonModifier", "hamburgerIconModifier", "closeIconModifier"];
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import BlazeButton from '@blaze-react/button';
-import { MdMenu } from 'react-icons/md';
+import { MdMenu, MdClose } from 'react-icons/md';
 import { useCheckMobileScreen } from '../../hooks';
 import { HIDDEN } from '../../constants';
 
-const Menu = ({
-  children,
-  collapse,
-  modifier
-}) => {
+const Menu = _ref => {
+  let {
+    children,
+    collapse,
+    modifier,
+    mobileMenuModifier,
+    mobileMenuChildrenModifier,
+    mobileIconAlignment,
+    mobileButtonModifier,
+    hamburgerIconModifier,
+    closeIconModifier
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   const isMobile = useCheckMobileScreen();
   const [showMobileMenu, setShowMobileMenu] = useState(false);
   const shouldDisplayCollapsed = collapse && isMobile;
-  const mobileButtonClass = shouldDisplayCollapsed && isMobile ? '' : HIDDEN;
+  const mobileButtonClass = shouldDisplayCollapsed && isMobile ? mobileButtonModifier : HIDDEN;
   const shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;
-  const childrenDisplayClass = shouldDisplayChildren ? modifier : `${modifier} ${HIDDEN}`;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, collapse && /*#__PURE__*/React.createElement(BlazeButton, {
+  const childrenDesktopModifier = shouldDisplayChildren && !isMobile ? modifier : `${modifier} ${HIDDEN}`;
+  const childrenMobileModifier = shouldDisplayChildren && isMobile ? `${mobileMenuChildrenModifier}` : ` ${HIDDEN}`;
+  const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';
+  return /*#__PURE__*/React.createElement(React.Fragment, null, collapse && /*#__PURE__*/React.createElement("div", {
+    className: "top-0 absolute z-50"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`
+  }, /*#__PURE__*/React.createElement(BlazeButton, {
     className: mobileButtonClass,
     onClick: () => setShowMobileMenu(!showMobileMenu)
-  }, /*#__PURE__*/React.createElement("i", null, /*#__PURE__*/React.createElement(MdMenu, null))), /*#__PURE__*/React.createElement("ul", {
-    className: childrenDisplayClass
+  }, /*#__PURE__*/React.createElement("i", null, showMobileMenu ? /*#__PURE__*/React.createElement(MdClose, {
+    className: closeIconModifier
+  }) : /*#__PURE__*/React.createElement(MdMenu, {
+    className: hamburgerIconModifier
+  }))))), /*#__PURE__*/React.createElement("ul", {
+    className: isMobile ? childrenMobileModifier : childrenDesktopModifier
   }, children));
 };
 
 Menu.propTypes = {
   collapse: PropTypes.bool.isRequired,
+  hamburgerIconModifier: PropTypes.string,
+  closeIconModifier: PropTypes.string,
+  mobileButtonModifier: PropTypes.string,
+  mobileMenuModifier: PropTypes.string,
+  mobileMenuChildrenModifier: PropTypes.string,
   modifier: PropTypes.string,
+  mobileIconAlignment: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 Menu.defaultProps = {
+  hamburgerIconModifier: '',
+  closeIconModifier: '',
+  mobileButtonModifier: '',
+  mobileIconAlignment: '',
+  mobileMenuModifier: '',
+  mobileMenuChildrenModifier: '',
   modifier: '',
   children: []
 };

package/lib-es/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Menu/Menu.js"],"names":["React","useState","PropTypes","BlazeButton","MdMenu","useCheckMobileScreen","HIDDEN","Menu","children","collapse","modifier","isMobile","showMobileMenu","setShowMobileMenu","shouldDisplayCollapsed","mobileButtonClass","shouldDisplayChildren","childrenDisplayClass","propTypes","bool","isRequired","string","oneOfType","arrayOf","node","defaultProps"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,WAAP,MAAwB,qBAAxB;AACA,SAASC,MAAT,QAAuB,gBAAvB;AACA,SAASC,oBAAT,QAAqC,aAArC;AACA,SAASC,MAAT,QAAuB,iBAAvB;;AAEA,MAAMC,IAAI,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,QAAZ;AAAsBC,EAAAA;AAAtB,CAAD,KAAsC;AACjD,QAAMC,QAAQ,GAAGN,oBAAoB,EAArC;AACA,QAAM,CAACO,cAAD,EAAiBC,iBAAjB,IAAsCZ,QAAQ,CAAC,KAAD,CAApD;AAEA,QAAMa,sBAAsB,GAAGL,QAAQ,IAAIE,QAA3C;AACA,QAAMI,iBAAiB,GAAGD,sBAAsB,IAAIH,QAA1B,GAAqC,EAArC,GAA0CL,MAApE;AACA,QAAMU,qBAAqB,GAAGF,sBAAsB,GAAGF,cAAH,GAAoB,IAAxE;AACA,QAAMK,oBAAoB,GAAGD,qBAAqB,GAAGN,QAAH,GAAe,GAAEA,QAAS,IAAGJ,MAAO,EAAtF;AAEA,sBACE,0CACGG,QAAQ,iBACP,oBAAC,WAAD;AACE,IAAA,SAAS,EAAEM,iBADb;AAEE,IAAA,OAAO,EAAE,MAAMF,iBAAiB,CAAC,CAACD,cAAF;AAFlC,kBAGE,4CACE,oBAAC,MAAD,OADF,CAHF,CAFJ,eAUE;AAAI,IAAA,SAAS,EAAEK;AAAf,KAAsCT,QAAtC,CAVF,CADF;AAcD,CAvBD;;AAyBAD,IAAI,CAACW,SAAL,GAAiB;AACfT,EAAAA,QAAQ,EAAEP,SAAS,CAACiB,IAAV,CAAeC,UADV;AAEfV,EAAAA,QAAQ,EAAER,SAAS,CAACmB,MAFL;AAGfb,EAAAA,QAAQ,EAAEN,SAAS,CAACoB,SAAV,CAAoB,CAACpB,SAAS,CAACqB,OAAV,CAAkBrB,SAAS,CAACsB,IAA5B,CAAD,EAAoCtB,SAAS,CAACsB,IAA9C,CAApB;AAHK,CAAjB;AAMAjB,IAAI,CAACkB,YAAL,GAAoB;AAClBf,EAAAA,QAAQ,EAAE,EADQ;AAElBF,EAAAA,QAAQ,EAAE;AAFQ,CAApB;AAKA,eAAeD,IAAf","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport BlazeButton from '@blaze-react/button';\nimport { MdMenu } from 'react-icons/md';\nimport { useCheckMobileScreen } from '../../hooks';\nimport { HIDDEN } from '../../constants';\n\nconst Menu = ({ children, collapse, modifier }) => {\n  const isMobile = useCheckMobileScreen();\n  const [showMobileMenu, setShowMobileMenu] = useState(false);\n\n  const shouldDisplayCollapsed = collapse && isMobile;\n  const mobileButtonClass = shouldDisplayCollapsed && isMobile ? '' : HIDDEN;\n  const shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;\n  const childrenDisplayClass = shouldDisplayChildren ? modifier : `${modifier} ${HIDDEN}`;\n\n  return (\n    <>\n      {collapse && (\n        <BlazeButton\n          className={mobileButtonClass}\n          onClick={() => setShowMobileMenu(!showMobileMenu)}>\n          <i>\n            <MdMenu />\n          </i>\n        </BlazeButton>\n      )}\n      <ul className={childrenDisplayClass}>{children}</ul>\n    </>\n  );\n};\n\nMenu.propTypes = {\n  collapse: PropTypes.bool.isRequired,\n  modifier: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n\nMenu.defaultProps = {\n  modifier: '',\n  children: []\n};\n\nexport default Menu;\n"],"file":"Menu.js"}
+{"version":3,"sources":["../../../src/components/Menu/Menu.js"],"names":["React","useState","PropTypes","BlazeButton","MdMenu","MdClose","useCheckMobileScreen","HIDDEN","Menu","children","collapse","modifier","mobileMenuModifier","mobileMenuChildrenModifier","mobileIconAlignment","mobileButtonModifier","hamburgerIconModifier","closeIconModifier","rest","isMobile","showMobileMenu","setShowMobileMenu","shouldDisplayCollapsed","mobileButtonClass","shouldDisplayChildren","childrenDesktopModifier","childrenMobileModifier","isMobileMenuExpanded","propTypes","bool","isRequired","string","oneOfType","arrayOf","node","defaultProps"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport BlazeButton from '@blaze-react/button';\nimport { MdMenu, MdClose } from 'react-icons/md';\nimport { useCheckMobileScreen } from '../../hooks';\nimport { HIDDEN } from '../../constants';\n\nconst Menu = ({\n  children,\n  collapse,\n  modifier,\n  mobileMenuModifier,\n  mobileMenuChildrenModifier,\n  mobileIconAlignment,\n  mobileButtonModifier,\n  hamburgerIconModifier,\n  closeIconModifier,\n  ...rest\n}) => {\n  const isMobile = useCheckMobileScreen();\n  const [showMobileMenu, setShowMobileMenu] = useState(false);\n\n  const shouldDisplayCollapsed = collapse && isMobile;\n  const mobileButtonClass = shouldDisplayCollapsed && isMobile ? mobileButtonModifier : HIDDEN;\n  const shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;\n  const childrenDesktopModifier =\n    shouldDisplayChildren && !isMobile ? modifier : `${modifier} ${HIDDEN}`;\n\n  const childrenMobileModifier =\n    shouldDisplayChildren && isMobile ? `${mobileMenuChildrenModifier}` : ` ${HIDDEN}`;\n\n  const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';\n\n  return (\n    <>\n      {collapse && (\n        <div className=\"top-0 absolute z-50\">\n          <div\n            className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>\n            <BlazeButton\n              className={mobileButtonClass}\n              onClick={() => setShowMobileMenu(!showMobileMenu)}>\n              <i>\n                {showMobileMenu ? (\n                  <MdClose className={closeIconModifier} />\n                ) : (\n                  <MdMenu className={hamburgerIconModifier} />\n                )}\n              </i>\n            </BlazeButton>\n          </div>\n        </div>\n      )}\n      <ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>{children}</ul>\n    </>\n  );\n};\n\nMenu.propTypes = {\n  collapse: PropTypes.bool.isRequired,\n  hamburgerIconModifier: PropTypes.string,\n  closeIconModifier: PropTypes.string,\n  mobileButtonModifier: PropTypes.string,\n  mobileMenuModifier: PropTypes.string,\n  mobileMenuChildrenModifier: PropTypes.string,\n  modifier: PropTypes.string,\n  mobileIconAlignment: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n\nMenu.defaultProps = {\n  hamburgerIconModifier: '',\n  closeIconModifier: '',\n  mobileButtonModifier: '',\n  mobileIconAlignment: '',\n  mobileMenuModifier: '',\n  mobileMenuChildrenModifier: '',\n  modifier: '',\n  children: []\n};\n\nexport default Menu;\n"],"file":"Menu.js"}

package/lib-es/components/Video/providers/YouTube/YouTubeProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import YouTube from 'react-youtube';
+import YoutubeEmbeded from './YoutubeEmbeded';
 import { getYouTubeID, booleanToNumber } from './helpers';
 import { VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';
 
@@ -11,17 +11,14 @@ const YouTubeProvider = ({
 }) => {
   const videoId = getYouTubeID(url);
   if (!videoId) return null;
-  const opts = {
-    playerVars: {
-      autoplay: booleanToNumber(autoplay),
-      loop: booleanToNumber(loop)
-    }
-  };
-  return /*#__PURE__*/React.createElement(YouTube, {
+  const params = `loop=${booleanToNumber(loop)}`;
+  return /*#__PURE__*/React.createElement("div", {
+    className: VIDEO_WRAPPER_CLASS_NAME
+  }, /*#__PURE__*/React.createElement(YoutubeEmbeded, {
+    autoplay: autoplay,
     videoId: videoId,
-    containerClassName: VIDEO_WRAPPER_CLASS_NAME,
-    opts: opts
-  });
+    params: params
+  }));
 };
 
 YouTubeProvider.propTypes = {

package/lib-es/components/Video/providers/YouTube/YouTubeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Video/providers/YouTube/YouTubeProvider.js"],"names":["React","PropTypes","YouTube","getYouTubeID","booleanToNumber","VIDEO_WRAPPER_CLASS_NAME","YouTubeProvider","url","autoplay","loop","videoId","opts","playerVars","propTypes","string","isRequired","bool","defaultProps"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,OAAP,MAAoB,eAApB;AACA,SAASC,YAAT,EAAuBC,eAAvB,QAA8C,WAA9C;AACA,SAASC,wBAAT,QAAyC,uBAAzC;;AAEA,MAAMC,eAAe,GAAG,CAAC;AAAEC,EAAAA,GAAF;AAAOC,EAAAA,QAAP;AAAiBC,EAAAA;AAAjB,CAAD,KAA6B;AACnD,QAAMC,OAAO,GAAGP,YAAY,CAACI,GAAD,CAA5B;AAEA,MAAI,CAACG,OAAL,EAAc,OAAO,IAAP;AAEd,QAAMC,IAAI,GAAG;AACXC,IAAAA,UAAU,EAAE;AACVJ,MAAAA,QAAQ,EAAEJ,eAAe,CAACI,QAAD,CADf;AAEVC,MAAAA,IAAI,EAAEL,eAAe,CAACK,IAAD;AAFX;AADD,GAAb;AAOA,sBAAO,oBAAC,OAAD;AAAS,IAAA,OAAO,EAAEC,OAAlB;AAA2B,IAAA,kBAAkB,EAAEL,wBAA/C;AAAyE,IAAA,IAAI,EAAEM;AAA/E,IAAP;AACD,CAbD;;AAeAL,eAAe,CAACO,SAAhB,GAA4B;AAC1BN,EAAAA,GAAG,EAAEN,SAAS,CAACa,MAAV,CAAiBC,UADI;AAE1BP,EAAAA,QAAQ,EAAEP,SAAS,CAACe,IAFM;AAG1BP,EAAAA,IAAI,EAAER,SAAS,CAACe;AAHU,CAA5B;AAMAV,eAAe,CAACW,YAAhB,GAA+B;AAC7BT,EAAAA,QAAQ,EAAE,KADmB;AAE7BC,EAAAA,IAAI,EAAE;AAFuB,CAA/B;AAKA,eAAeH,eAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport YouTube from 'react-youtube';\nimport { getYouTubeID, booleanToNumber } from './helpers';\nimport { VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';\n\nconst YouTubeProvider = ({ url, autoplay, loop }) => {\n  const videoId = getYouTubeID(url);\n\n  if (!videoId) return null;\n\n  const opts = {\n    playerVars: {\n      autoplay: booleanToNumber(autoplay),\n      loop: booleanToNumber(loop)\n    }\n  };\n\n  return <YouTube videoId={videoId} containerClassName={VIDEO_WRAPPER_CLASS_NAME} opts={opts} />;\n};\n\nYouTubeProvider.propTypes = {\n  url: PropTypes.string.isRequired,\n  autoplay: PropTypes.bool,\n  loop: PropTypes.bool\n};\n\nYouTubeProvider.defaultProps = {\n  autoplay: false,\n  loop: false\n};\n\nexport default YouTubeProvider;\n"],"file":"YouTubeProvider.js"}
+{"version":3,"sources":["../../../../../src/components/Video/providers/YouTube/YouTubeProvider.js"],"names":["React","PropTypes","YoutubeEmbeded","getYouTubeID","booleanToNumber","VIDEO_WRAPPER_CLASS_NAME","YouTubeProvider","url","autoplay","loop","videoId","params","propTypes","string","isRequired","bool","defaultProps"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,SAASC,YAAT,EAAuBC,eAAvB,QAA8C,WAA9C;AACA,SAASC,wBAAT,QAAyC,uBAAzC;;AAEA,MAAMC,eAAe,GAAG,CAAC;AAAEC,EAAAA,GAAF;AAAOC,EAAAA,QAAP;AAAiBC,EAAAA;AAAjB,CAAD,KAA6B;AACnD,QAAMC,OAAO,GAAGP,YAAY,CAACI,GAAD,CAA5B;AAEA,MAAI,CAACG,OAAL,EAAc,OAAO,IAAP;AACd,QAAMC,MAAM,GAAI,QAAOP,eAAe,CAACK,IAAD,CAAO,EAA7C;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEJ;AAAhB,kBACE,oBAAC,cAAD;AAAgB,IAAA,QAAQ,EAAEG,QAA1B;AAAoC,IAAA,OAAO,EAAEE,OAA7C;AAAsD,IAAA,MAAM,EAAEC;AAA9D,IADF,CADF;AAKD,CAXD;;AAaAL,eAAe,CAACM,SAAhB,GAA4B;AAC1BL,EAAAA,GAAG,EAAEN,SAAS,CAACY,MAAV,CAAiBC,UADI;AAE1BN,EAAAA,QAAQ,EAAEP,SAAS,CAACc,IAFM;AAG1BN,EAAAA,IAAI,EAAER,SAAS,CAACc;AAHU,CAA5B;AAMAT,eAAe,CAACU,YAAhB,GAA+B;AAC7BR,EAAAA,QAAQ,EAAE,KADmB;AAE7BC,EAAAA,IAAI,EAAE;AAFuB,CAA/B;AAKA,eAAeH,eAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport YoutubeEmbeded from './YoutubeEmbeded';\nimport { getYouTubeID, booleanToNumber } from './helpers';\nimport { VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';\n\nconst YouTubeProvider = ({ url, autoplay, loop }) => {\n  const videoId = getYouTubeID(url);\n\n  if (!videoId) return null;\n  const params = `loop=${booleanToNumber(loop)}`;\n\n  return (\n    <div className={VIDEO_WRAPPER_CLASS_NAME}>\n      <YoutubeEmbeded autoplay={autoplay} videoId={videoId} params={params} />\n    </div>\n  );\n};\n\nYouTubeProvider.propTypes = {\n  url: PropTypes.string.isRequired,\n  autoplay: PropTypes.bool,\n  loop: PropTypes.bool\n};\n\nYouTubeProvider.defaultProps = {\n  autoplay: false,\n  loop: false\n};\n\nexport default YouTubeProvider;\n"],"file":"YouTubeProvider.js"}

package/lib-es/components/Video/providers/YouTube/YoutubeEmbeded.js

@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useInView } from '@blaze-react/utils/lib/customHooks';
+import { IN_VIEW_CONFIG } from '../../../../constants';
+const YT_HQ_FORMAT = 'hqdefault';
+const YT_IMAGE_URL = 'https://i.ytimg.com';
+
+const YoutubeEmbeded = ({
+  autoplay,
+  videoId,
+  playlistCoverId,
+  videoTitle,
+  poster,
+  videoParams,
+  announce,
+  noCookie,
+  webp,
+  playlist,
+  onIframeAdded,
+  muted,
+  adNetwork,
+  iframeClass,
+  priority
+}) => {
+  const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
+  const [preconnected, setPreconnected] = useState(false);
+  const [renderIframe, setRenderIframe] = useState(!!autoplay);
+  const [{
+    imageSize,
+    displayImage
+  }, setImageDetails] = useState({
+    imageSize: poster,
+    displayImage: priority
+  });
+  const encodedId = encodeURIComponent(videoId);
+  const videoPlaylisCovertId = typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null;
+  const paramsImp = videoParams ? `&${videoParams}` : '';
+  const format = webp ? 'webp' : 'jpg';
+  const vi = webp ? 'vi_webp' : 'vi';
+  const posterUrl = !playlist ? `${YT_IMAGE_URL}/${vi}/${encodedId}/${imageSize}.${format}` : `${YT_IMAGE_URL}/${vi}/${videoPlaylisCovertId}/${imageSize}.${format}`;
+  const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
+  const mutedValue = muted ? '&mute=1' : '';
+  const iframeSrc = !playlist ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}` : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;
+  const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;
+  useEffect(() => {
+    if (!priority && !isIntersecting || imageSize === YT_HQ_FORMAT) return;
+    const img = new Image(); // eslint-disable-next-line func-names
+
+    img.onload = function () {
+      let newImageSize = imageSize;
+      if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;
+      setImageDetails({
+        imageSize: newImageSize,
+        displayImage: true
+      });
+    };
+
+    img.src = posterUrl;
+  }, [imageSize, isIntersecting, posterUrl, priority]);
+
+  const warmConnections = () => {
+    if (preconnected) return;
+    setPreconnected(true);
+  };
+
+  const addIframe = () => {
+    if (renderIframe) return;
+    onIframeAdded();
+    setRenderIframe(true);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, preconnected && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("link", {
+    rel: "preconnect",
+    href: YT_IMAGE_URL
+  }), /*#__PURE__*/React.createElement("link", {
+    rel: "preconnect",
+    href: ytUrl
+  }), /*#__PURE__*/React.createElement("link", {
+    rel: "preconnect",
+    href: "https://www.google.com"
+  }), adNetwork && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("link", {
+    rel: "preconnect",
+    href: "https://static.doubleclick.net"
+  }), /*#__PURE__*/React.createElement("link", {
+    rel: "preconnect",
+    href: "https://googleads.g.doubleclick.net"
+  }))), /*#__PURE__*/React.createElement("div", {
+    ref: outerRef,
+    role: "button",
+    onPointerOver: warmConnections,
+    onClick: addIframe,
+    className: parsedWrapperClassname,
+    "data-title": videoTitle,
+    style: {
+      backgroundImage: `url(${displayImage ? posterUrl : ''})`
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    type: "button",
+    className: "yt-facade-button-wrapper",
+    "aria-label": `${announce} ${videoTitle}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yt-facade-button"
+  })), renderIframe && /*#__PURE__*/React.createElement("iframe", {
+    className: iframeClass,
+    title: videoTitle,
+    allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+    allowFullScreen: true,
+    src: iframeSrc
+  })));
+};
+
+YoutubeEmbeded.propTypes = {
+  priority: PropTypes.bool,
+  onIframeAdded: PropTypes.func,
+  adNetwork: PropTypes.bool,
+  autoplay: PropTypes.bool,
+  playlist: PropTypes.bool,
+  muted: PropTypes.bool,
+  webp: PropTypes.bool,
+  noCookie: PropTypes.bool,
+  videoId: PropTypes.string,
+  iframeClass: PropTypes.string,
+  poster: PropTypes.string,
+  announce: PropTypes.string,
+  playlistCoverId: PropTypes.string,
+  videoParams: PropTypes.string,
+  videoTitle: PropTypes.string
+};
+YoutubeEmbeded.defaultProps = {
+  priority: true,
+  onIframeAdded: () => {},
+  adNetwork: false,
+  autoplay: false,
+  playlist: false,
+  muted: false,
+  webp: false,
+  noCookie: false,
+  iframeClass: '',
+  poster: 'sddefault',
+  announce: 'Watch',
+  videoId: '',
+  playlistCoverId: '',
+  videoParams: '',
+  videoTitle: ''
+};
+export default YoutubeEmbeded;
+//# sourceMappingURL=YoutubeEmbeded.js.map

package/lib-es/components/Video/providers/YouTube/YoutubeEmbeded.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Video/providers/YouTube/YoutubeEmbeded.js"],"names":["React","useState","useEffect","PropTypes","useInView","IN_VIEW_CONFIG","YT_HQ_FORMAT","YT_IMAGE_URL","YoutubeEmbeded","autoplay","videoId","playlistCoverId","videoTitle","poster","videoParams","announce","noCookie","webp","playlist","onIframeAdded","muted","adNetwork","iframeClass","priority","isIntersecting","outerRef","preconnected","setPreconnected","renderIframe","setRenderIframe","imageSize","displayImage","setImageDetails","encodedId","encodeURIComponent","videoPlaylisCovertId","paramsImp","format","vi","posterUrl","ytUrl","mutedValue","iframeSrc","parsedWrapperClassname","img","Image","onload","newImageSize","width","src","warmConnections","addIframe","backgroundImage","propTypes","bool","func","string","defaultProps"],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useInView } from '@blaze-react/utils/lib/customHooks';\nimport { IN_VIEW_CONFIG } from '../../../../constants';\n\nconst YT_HQ_FORMAT = 'hqdefault';\nconst YT_IMAGE_URL = 'https://i.ytimg.com';\n\nconst YoutubeEmbeded = ({\n  autoplay,\n  videoId,\n  playlistCoverId,\n  videoTitle,\n  poster,\n  videoParams,\n  announce,\n  noCookie,\n  webp,\n  playlist,\n  onIframeAdded,\n  muted,\n  adNetwork,\n  iframeClass,\n  priority\n}) => {\n  const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);\n  const [preconnected, setPreconnected] = useState(false);\n  const [renderIframe, setRenderIframe] = useState(!!autoplay);\n  const [{ imageSize, displayImage }, setImageDetails] = useState({\n    imageSize: poster,\n    displayImage: priority\n  });\n\n  const encodedId = encodeURIComponent(videoId);\n  const videoPlaylisCovertId =\n    typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null;\n  const paramsImp = videoParams ? `&${videoParams}` : '';\n  const format = webp ? 'webp' : 'jpg';\n  const vi = webp ? 'vi_webp' : 'vi';\n  const posterUrl = !playlist\n    ? `${YT_IMAGE_URL}/${vi}/${encodedId}/${imageSize}.${format}`\n    : `${YT_IMAGE_URL}/${vi}/${videoPlaylisCovertId}/${imageSize}.${format}`;\n  const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';\n\n  const mutedValue = muted ? '&mute=1' : '';\n  const iframeSrc = !playlist\n    ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}`\n    : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;\n  const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;\n\n  useEffect(\n    () => {\n      if ((!priority && !isIntersecting) || imageSize === YT_HQ_FORMAT) return;\n\n      const img = new Image();\n      // eslint-disable-next-line func-names\n      img.onload = function() {\n        let newImageSize = imageSize;\n        if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;\n        setImageDetails({ imageSize: newImageSize, displayImage: true });\n      };\n\n      img.src = posterUrl;\n    },\n    [imageSize, isIntersecting, posterUrl, priority]\n  );\n\n  const warmConnections = () => {\n    if (preconnected) return;\n    setPreconnected(true);\n  };\n\n  const addIframe = () => {\n    if (renderIframe) return;\n    onIframeAdded();\n    setRenderIframe(true);\n  };\n\n  return (\n    <>\n      {preconnected && (\n        <>\n          <link rel=\"preconnect\" href={YT_IMAGE_URL} />\n          <link rel=\"preconnect\" href={ytUrl} />\n          <link rel=\"preconnect\" href=\"https://www.google.com\" />\n          {adNetwork && (\n            <>\n              <link rel=\"preconnect\" href=\"https://static.doubleclick.net\" />\n              <link rel=\"preconnect\" href=\"https://googleads.g.doubleclick.net\" />\n            </>\n          )}\n        </>\n      )}\n      <div\n        ref={outerRef}\n        role=\"button\"\n        onPointerOver={warmConnections}\n        onClick={addIframe}\n        className={parsedWrapperClassname}\n        data-title={videoTitle}\n        style={{\n          backgroundImage: `url(${displayImage ? posterUrl : ''})`\n        }}>\n        <div\n          type=\"button\"\n          className=\"yt-facade-button-wrapper\"\n          aria-label={`${announce} ${videoTitle}`}>\n          <div className=\"yt-facade-button\" />\n        </div>\n        {renderIframe && (\n          <iframe\n            className={iframeClass}\n            title={videoTitle}\n            allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            src={iframeSrc}\n          />\n        )}\n      </div>\n    </>\n  );\n};\n\nYoutubeEmbeded.propTypes = {\n  priority: PropTypes.bool,\n  onIframeAdded: PropTypes.func,\n  adNetwork: PropTypes.bool,\n  autoplay: PropTypes.bool,\n  playlist: PropTypes.bool,\n  muted: PropTypes.bool,\n  webp: PropTypes.bool,\n  noCookie: PropTypes.bool,\n  videoId: PropTypes.string,\n  iframeClass: PropTypes.string,\n  poster: PropTypes.string,\n  announce: PropTypes.string,\n  playlistCoverId: PropTypes.string,\n  videoParams: PropTypes.string,\n  videoTitle: PropTypes.string\n};\n\nYoutubeEmbeded.defaultProps = {\n  priority: true,\n  onIframeAdded: () => {},\n  adNetwork: false,\n  autoplay: false,\n  playlist: false,\n  muted: false,\n  webp: false,\n  noCookie: false,\n  iframeClass: '',\n  poster: 'sddefault',\n  announce: 'Watch',\n  videoId: '',\n  playlistCoverId: '',\n  videoParams: '',\n  videoTitle: ''\n};\n\nexport default YoutubeEmbeded;\n"],"file":"YoutubeEmbeded.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.118.0-alpha.0",
+  "version": "0.118.0",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,12 +27,12 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/core-auth-ui": "^0.118.0-alpha.0",
-    "@blaze-cms/core-errors": "^0.118.0-alpha.0",
+    "@blaze-cms/core-auth-ui": "^0.118.0",
+    "@blaze-cms/core-errors": "^0.118.0",
     "@blaze-cms/image-cdn-react": "^0.2.0",
-    "@blaze-cms/nextjs-components": "^0.118.0-alpha.0",
+    "@blaze-cms/nextjs-components": "^0.118.0",
     "@blaze-cms/setup-ui": "^0.92.0",
-    "@blaze-cms/utils": "^0.118.0-alpha.0",
+    "@blaze-cms/utils": "^0.118.0",
     "@blaze-react/button": "0.5.19",
     "@blaze-react/checkboxes": "0.5.31",
     "@blaze-react/input": "0.5.30",
@@ -58,7 +58,6 @@
     "react-html-parser": "2.0.2",
     "react-jw-player": "^1.19.1",
     "react-waypoint": "^9.0.2",
-    "react-youtube": "7.11.3",
     "regenerator-runtime": "^0.13.3",
     "uuid": "^3.3.3",
     "video-react": "0.14.1"
@@ -88,5 +87,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "f12d8141dc829f454e5ed5712ba4901b038447db"
+  "gitHead": "6814f1366b463d508604959b0f688c9dc170ccf8"
 }

package/src/components/Menu/Menu.js

@@ -1,42 +1,80 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import BlazeButton from '@blaze-react/button';
-import { MdMenu } from 'react-icons/md';
+import { MdMenu, MdClose } from 'react-icons/md';
 import { useCheckMobileScreen } from '../../hooks';
 import { HIDDEN } from '../../constants';
 
-const Menu = ({ children, collapse, modifier }) => {
+const Menu = ({
+  children,
+  collapse,
+  modifier,
+  mobileMenuModifier,
+  mobileMenuChildrenModifier,
+  mobileIconAlignment,
+  mobileButtonModifier,
+  hamburgerIconModifier,
+  closeIconModifier,
+  ...rest
+}) => {
   const isMobile = useCheckMobileScreen();
   const [showMobileMenu, setShowMobileMenu] = useState(false);
 
   const shouldDisplayCollapsed = collapse && isMobile;
-  const mobileButtonClass = shouldDisplayCollapsed && isMobile ? '' : HIDDEN;
+  const mobileButtonClass = shouldDisplayCollapsed && isMobile ? mobileButtonModifier : HIDDEN;
   const shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;
-  const childrenDisplayClass = shouldDisplayChildren ? modifier : `${modifier} ${HIDDEN}`;
+  const childrenDesktopModifier =
+    shouldDisplayChildren && !isMobile ? modifier : `${modifier} ${HIDDEN}`;
+
+  const childrenMobileModifier =
+    shouldDisplayChildren && isMobile ? `${mobileMenuChildrenModifier}` : ` ${HIDDEN}`;
+
+  const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';
 
   return (
     <>
       {collapse && (
-        <BlazeButton
-          className={mobileButtonClass}
-          onClick={() => setShowMobileMenu(!showMobileMenu)}>
-          <i>
-            <MdMenu />
-          </i>
-        </BlazeButton>
+        <div className="top-0 absolute z-50">
+          <div
+            className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>
+            <BlazeButton
+              className={mobileButtonClass}
+              onClick={() => setShowMobileMenu(!showMobileMenu)}>
+              <i>
+                {showMobileMenu ? (
+                  <MdClose className={closeIconModifier} />
+                ) : (
+                  <MdMenu className={hamburgerIconModifier} />
+                )}
+              </i>
+            </BlazeButton>
+          </div>
+        </div>
       )}
-      <ul className={childrenDisplayClass}>{children}</ul>
+      <ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>{children}</ul>
     </>
   );
 };
 
 Menu.propTypes = {
   collapse: PropTypes.bool.isRequired,
+  hamburgerIconModifier: PropTypes.string,
+  closeIconModifier: PropTypes.string,
+  mobileButtonModifier: PropTypes.string,
+  mobileMenuModifier: PropTypes.string,
+  mobileMenuChildrenModifier: PropTypes.string,
   modifier: PropTypes.string,
+  mobileIconAlignment: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 
 Menu.defaultProps = {
+  hamburgerIconModifier: '',
+  closeIconModifier: '',
+  mobileButtonModifier: '',
+  mobileIconAlignment: '',
+  mobileMenuModifier: '',
+  mobileMenuChildrenModifier: '',
   modifier: '',
   children: []
 };

package/src/components/Video/providers/YouTube/YouTubeProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import YouTube from 'react-youtube';
+import YoutubeEmbeded from './YoutubeEmbeded';
 import { getYouTubeID, booleanToNumber } from './helpers';
 import { VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';
 
@@ -8,15 +8,13 @@ const YouTubeProvider = ({ url, autoplay, loop }) => {
   const videoId = getYouTubeID(url);
 
   if (!videoId) return null;
+  const params = `loop=${booleanToNumber(loop)}`;
 
-  const opts = {
-    playerVars: {
-      autoplay: booleanToNumber(autoplay),
-      loop: booleanToNumber(loop)
-    }
-  };
-
-  return <YouTube videoId={videoId} containerClassName={VIDEO_WRAPPER_CLASS_NAME} opts={opts} />;
+  return (
+    <div className={VIDEO_WRAPPER_CLASS_NAME}>
+      <YoutubeEmbeded autoplay={autoplay} videoId={videoId} params={params} />
+    </div>
+  );
 };
 
 YouTubeProvider.propTypes = {

package/src/components/Video/providers/YouTube/YoutubeEmbeded.js

@@ -0,0 +1,160 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useInView } from '@blaze-react/utils/lib/customHooks';
+import { IN_VIEW_CONFIG } from '../../../../constants';
+
+const YT_HQ_FORMAT = 'hqdefault';
+const YT_IMAGE_URL = 'https://i.ytimg.com';
+
+const YoutubeEmbeded = ({
+  autoplay,
+  videoId,
+  playlistCoverId,
+  videoTitle,
+  poster,
+  videoParams,
+  announce,
+  noCookie,
+  webp,
+  playlist,
+  onIframeAdded,
+  muted,
+  adNetwork,
+  iframeClass,
+  priority
+}) => {
+  const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
+  const [preconnected, setPreconnected] = useState(false);
+  const [renderIframe, setRenderIframe] = useState(!!autoplay);
+  const [{ imageSize, displayImage }, setImageDetails] = useState({
+    imageSize: poster,
+    displayImage: priority
+  });
+
+  const encodedId = encodeURIComponent(videoId);
+  const videoPlaylisCovertId =
+    typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null;
+  const paramsImp = videoParams ? `&${videoParams}` : '';
+  const format = webp ? 'webp' : 'jpg';
+  const vi = webp ? 'vi_webp' : 'vi';
+  const posterUrl = !playlist
+    ? `${YT_IMAGE_URL}/${vi}/${encodedId}/${imageSize}.${format}`
+    : `${YT_IMAGE_URL}/${vi}/${videoPlaylisCovertId}/${imageSize}.${format}`;
+  const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
+
+  const mutedValue = muted ? '&mute=1' : '';
+  const iframeSrc = !playlist
+    ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}`
+    : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;
+  const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;
+
+  useEffect(
+    () => {
+      if ((!priority && !isIntersecting) || imageSize === YT_HQ_FORMAT) return;
+
+      const img = new Image();
+      // eslint-disable-next-line func-names
+      img.onload = function() {
+        let newImageSize = imageSize;
+        if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;
+        setImageDetails({ imageSize: newImageSize, displayImage: true });
+      };
+
+      img.src = posterUrl;
+    },
+    [imageSize, isIntersecting, posterUrl, priority]
+  );
+
+  const warmConnections = () => {
+    if (preconnected) return;
+    setPreconnected(true);
+  };
+
+  const addIframe = () => {
+    if (renderIframe) return;
+    onIframeAdded();
+    setRenderIframe(true);
+  };
+
+  return (
+    <>
+      {preconnected && (
+        <>
+          <link rel="preconnect" href={YT_IMAGE_URL} />
+          <link rel="preconnect" href={ytUrl} />
+          <link rel="preconnect" href="https://www.google.com" />
+          {adNetwork && (
+            <>
+              <link rel="preconnect" href="https://static.doubleclick.net" />
+              <link rel="preconnect" href="https://googleads.g.doubleclick.net" />
+            </>
+          )}
+        </>
+      )}
+      <div
+        ref={outerRef}
+        role="button"
+        onPointerOver={warmConnections}
+        onClick={addIframe}
+        className={parsedWrapperClassname}
+        data-title={videoTitle}
+        style={{
+          backgroundImage: `url(${displayImage ? posterUrl : ''})`
+        }}>
+        <div
+          type="button"
+          className="yt-facade-button-wrapper"
+          aria-label={`${announce} ${videoTitle}`}>
+          <div className="yt-facade-button" />
+        </div>
+        {renderIframe && (
+          <iframe
+            className={iframeClass}
+            title={videoTitle}
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+            src={iframeSrc}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+YoutubeEmbeded.propTypes = {
+  priority: PropTypes.bool,
+  onIframeAdded: PropTypes.func,
+  adNetwork: PropTypes.bool,
+  autoplay: PropTypes.bool,
+  playlist: PropTypes.bool,
+  muted: PropTypes.bool,
+  webp: PropTypes.bool,
+  noCookie: PropTypes.bool,
+  videoId: PropTypes.string,
+  iframeClass: PropTypes.string,
+  poster: PropTypes.string,
+  announce: PropTypes.string,
+  playlistCoverId: PropTypes.string,
+  videoParams: PropTypes.string,
+  videoTitle: PropTypes.string
+};
+
+YoutubeEmbeded.defaultProps = {
+  priority: true,
+  onIframeAdded: () => {},
+  adNetwork: false,
+  autoplay: false,
+  playlist: false,
+  muted: false,
+  webp: false,
+  noCookie: false,
+  iframeClass: '',
+  poster: 'sddefault',
+  announce: 'Watch',
+  videoId: '',
+  playlistCoverId: '',
+  videoParams: '',
+  videoTitle: ''
+};
+
+export default YoutubeEmbeded;

package/tests/unit/src/components/Video/providers/YouTube/YouTubeProvider.test.js

@@ -5,10 +5,6 @@ import YouTubeProvider from '../../../../../../../src/components/Video/providers
 describe('YouTubeProvider component', () => {
   const props = { url: 'https://www.youtube.com/watch?v=mockedID', modifier: 'mocked-modifier' };
 
-  it('should be defined', () => {
-    expect(YouTubeProvider).toBeDefined();
-  });
-
   it('should render without throwing error and match snapshot', async () => {
     const { asFragment } = render(YouTubeProvider, props);
     expect(asFragment()).toMatchSnapshot();

package/tests/unit/src/components/Video/providers/YouTube/__snapshots__/YouTubeProvider.test.js.snap

@@ -5,7 +5,22 @@ exports[`YouTubeProvider component should render without throwing error and matc
   <div
     class="video__wrapper"
   >
-    <div />
+    <div
+      class="yt-facade "
+      data-title=""
+      role="button"
+      style="background-image: url(https://i.ytimg.com/vi/mockedID/sddefault.jpg);"
+    >
+      <div
+        aria-label="Watch "
+        class="yt-facade-button-wrapper"
+        type="button"
+      >
+        <div
+          class="yt-facade-button"
+        />
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;