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

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
 
 

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

@@ -35,8 +35,6 @@ var _customHooks = require("@blaze-react/utils/lib/customHooks");
 
 var _constants = require("../../../../constants");
 
-var _this = void 0;
-
 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; }
@@ -58,7 +56,8 @@ var YoutubeEmbeded = function YoutubeEmbeded(_ref) {
       onIframeAdded = _ref.onIframeAdded,
       muted = _ref.muted,
       adNetwork = _ref.adNetwork,
-      iframeClass = _ref.iframeClass;
+      iframeClass = _ref.iframeClass,
+      priority = _ref.priority;
 
   var _useInView = (0, _customHooks.useInView)(_constants.IN_VIEW_CONFIG),
       _useInView2 = (0, _slicedToArray2["default"])(_useInView, 2),
@@ -77,7 +76,7 @@ var YoutubeEmbeded = function YoutubeEmbeded(_ref) {
 
   var _useState5 = (0, _react.useState)({
     imageSize: poster,
-    displayImage: false
+    displayImage: priority
   }),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
       _useState6$ = _useState6[0],
@@ -96,12 +95,12 @@ var YoutubeEmbeded = function YoutubeEmbeded(_ref) {
   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 (!isIntersecting || imageSize === YT_HQ_FORMAT) return;
-    var img = new Image();
+    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;
+      if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;
       setImageDetails({
         imageSize: newImageSize,
         displayImage: true
@@ -109,7 +108,7 @@ var YoutubeEmbeded = function YoutubeEmbeded(_ref) {
     };
 
     img.src = posterUrl;
-  }, [imageSize, isIntersecting, posterUrl]);
+  }, [imageSize, isIntersecting, posterUrl, priority]);
 
   var warmConnections = function warmConnections() {
     if (preconnected) return;
@@ -163,6 +162,7 @@ var YoutubeEmbeded = function YoutubeEmbeded(_ref) {
 };
 
 YoutubeEmbeded.propTypes = {
+  priority: _propTypes["default"].bool,
   onIframeAdded: _propTypes["default"].func,
   adNetwork: _propTypes["default"].bool,
   autoplay: _propTypes["default"].bool,
@@ -179,6 +179,7 @@ YoutubeEmbeded.propTypes = {
   videoTitle: _propTypes["default"].string
 };
 YoutubeEmbeded.defaultProps = {
+  priority: true,
   onIframeAdded: function onIframeAdded() {},
   adNetwork: false,
   autoplay: false,

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

@@ -1 +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","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","func","bool","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}) => {\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: false\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 (!isIntersecting || imageSize === YT_HQ_FORMAT) return;\n\n      const img = new Image();\n      img.onload = () => {\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]\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  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  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"}
+{"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/Video/providers/YouTube/YoutubeEmbeded.js

@@ -19,7 +19,8 @@ const YoutubeEmbeded = ({
   onIframeAdded,
   muted,
   adNetwork,
-  iframeClass
+  iframeClass,
+  priority
 }) => {
   const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
   const [preconnected, setPreconnected] = useState(false);
@@ -29,7 +30,7 @@ const YoutubeEmbeded = ({
     displayImage
   }, setImageDetails] = useState({
     imageSize: poster,
-    displayImage: false
+    displayImage: priority
   });
   const encodedId = encodeURIComponent(videoId);
   const videoPlaylisCovertId = typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null;
@@ -42,10 +43,10 @@ const YoutubeEmbeded = ({
   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 (!isIntersecting || imageSize === YT_HQ_FORMAT) return;
-    const img = new Image();
+    if (!priority && !isIntersecting || imageSize === YT_HQ_FORMAT) return;
+    const img = new Image(); // eslint-disable-next-line func-names
 
-    img.onload = () => {
+    img.onload = function () {
       let newImageSize = imageSize;
       if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;
       setImageDetails({
@@ -55,7 +56,7 @@ const YoutubeEmbeded = ({
     };
 
     img.src = posterUrl;
-  }, [imageSize, isIntersecting, posterUrl]);
+  }, [imageSize, isIntersecting, posterUrl, priority]);
 
   const warmConnections = () => {
     if (preconnected) return;
@@ -109,6 +110,7 @@ const YoutubeEmbeded = ({
 };
 
 YoutubeEmbeded.propTypes = {
+  priority: PropTypes.bool,
   onIframeAdded: PropTypes.func,
   adNetwork: PropTypes.bool,
   autoplay: PropTypes.bool,
@@ -125,6 +127,7 @@ YoutubeEmbeded.propTypes = {
   videoTitle: PropTypes.string
 };
 YoutubeEmbeded.defaultProps = {
+  priority: true,
   onIframeAdded: () => {},
   adNetwork: false,
   autoplay: false,

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

@@ -1 +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","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","func","bool","string","defaultProps"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,EAA0BC,SAA1B,QAA2C,OAA3C;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,SAAT,QAA0B,oCAA1B;AACA,SAASC,cAAT,QAA+B,uBAA/B;AAEA,MAAMC,YAAY,GAAG,WAArB;AACA,MAAMC,YAAY,GAAG,qBAArB;;AAEA,MAAMC,cAAc,GAAG,CAAC;AACtBC,EAAAA,QADsB;AAEtBC,EAAAA,OAFsB;AAGtBC,EAAAA,eAHsB;AAItBC,EAAAA,UAJsB;AAKtBC,EAAAA,MALsB;AAMtBC,EAAAA,WANsB;AAOtBC,EAAAA,QAPsB;AAQtBC,EAAAA,QARsB;AAStBC,EAAAA,IATsB;AAUtBC,EAAAA,QAVsB;AAWtBC,EAAAA,aAXsB;AAYtBC,EAAAA,KAZsB;AAatBC,EAAAA,SAbsB;AActBC,EAAAA;AAdsB,CAAD,KAejB;AACJ,QAAM,CAACC,cAAD,EAAiBC,QAAjB,IAA6BpB,SAAS,CAACC,cAAD,CAA5C;AACA,QAAM,CAACoB,YAAD,EAAeC,eAAf,IAAkCzB,QAAQ,CAAC,KAAD,CAAhD;AACA,QAAM,CAAC0B,YAAD,EAAeC,eAAf,IAAkC3B,QAAQ,CAAC,CAAC,CAACQ,QAAH,CAAhD;AACA,QAAM,CAAC;AAAEoB,IAAAA,SAAF;AAAaC,IAAAA;AAAb,GAAD,EAA8BC,eAA9B,IAAiD9B,QAAQ,CAAC;AAC9D4B,IAAAA,SAAS,EAAEhB,MADmD;AAE9DiB,IAAAA,YAAY,EAAE;AAFgD,GAAD,CAA/D;AAKA,QAAME,SAAS,GAAGC,kBAAkB,CAACvB,OAAD,CAApC;AACA,QAAMwB,oBAAoB,GACxB,OAAOvB,eAAP,KAA2B,QAA3B,GAAsCsB,kBAAkB,CAACtB,eAAD,CAAxD,GAA4E,IAD9E;AAEA,QAAMwB,SAAS,GAAGrB,WAAW,GAAI,IAAGA,WAAY,EAAnB,GAAuB,EAApD;AACA,QAAMsB,MAAM,GAAGnB,IAAI,GAAG,MAAH,GAAY,KAA/B;AACA,QAAMoB,EAAE,GAAGpB,IAAI,GAAG,SAAH,GAAe,IAA9B;AACA,QAAMqB,SAAS,GAAG,CAACpB,QAAD,GACb,GAAEX,YAAa,IAAG8B,EAAG,IAAGL,SAAU,IAAGH,SAAU,IAAGO,MAAO,EAD5C,GAEb,GAAE7B,YAAa,IAAG8B,EAAG,IAAGH,oBAAqB,IAAGL,SAAU,IAAGO,MAAO,EAFzE;AAGA,QAAMG,KAAK,GAAGvB,QAAQ,GAAG,kCAAH,GAAwC,yBAA9D;AAEA,QAAMwB,UAAU,GAAGpB,KAAK,GAAG,SAAH,GAAe,EAAvC;AACA,QAAMqB,SAAS,GAAG,CAACvB,QAAD,GACb,GAAEqB,KAAM,UAASP,SAAU,cAAaQ,UAAW,GAAEL,SAAU,EADlD,GAEb,GAAEI,KAAM,gCAA+BC,UAAW,SAAQR,SAAU,GAAEG,SAAU,EAFrF;AAGA,QAAMO,sBAAsB,GAAI,aAAYf,YAAY,GAAG,cAAH,GAAoB,EAAG,EAA/E;AAEAzB,EAAAA,SAAS,CACP,MAAM;AACJ,QAAI,CAACqB,cAAD,IAAmBM,SAAS,KAAKvB,YAArC,EAAmD;AAEnD,UAAMqC,GAAG,GAAG,IAAIC,KAAJ,EAAZ;;AACAD,IAAAA,GAAG,CAACE,MAAJ,GAAa,MAAM;AACjB,UAAIC,YAAY,GAAGjB,SAAnB;AACA,UAAI,QAAQ,KAAKkB,KAAL,KAAe,GAA3B,EAAgCD,YAAY,GAAGxC,YAAf;AAChCyB,MAAAA,eAAe,CAAC;AAAEF,QAAAA,SAAS,EAAEiB,YAAb;AAA2BhB,QAAAA,YAAY,EAAE;AAAzC,OAAD,CAAf;AACD,KAJD;;AAMAa,IAAAA,GAAG,CAACK,GAAJ,GAAUV,SAAV;AACD,GAZM,EAaP,CAACT,SAAD,EAAYN,cAAZ,EAA4Be,SAA5B,CAbO,CAAT;;AAgBA,QAAMW,eAAe,GAAG,MAAM;AAC5B,QAAIxB,YAAJ,EAAkB;AAClBC,IAAAA,eAAe,CAAC,IAAD,CAAf;AACD,GAHD;;AAKA,QAAMwB,SAAS,GAAG,MAAM;AACtB,QAAIvB,YAAJ,EAAkB;AAClBR,IAAAA,aAAa;AACbS,IAAAA,eAAe,CAAC,IAAD,CAAf;AACD,GAJD;;AAMA,sBACE,0CACGH,YAAY,iBACX,uDACE;AAAM,IAAA,GAAG,EAAC,YAAV;AAAuB,IAAA,IAAI,EAAElB;AAA7B,IADF,eAEE;AAAM,IAAA,GAAG,EAAC,YAAV;AAAuB,IAAA,IAAI,EAAEgC;AAA7B,IAFF,eAGE;AAAM,IAAA,GAAG,EAAC,YAAV;AAAuB,IAAA,IAAI,EAAC;AAA5B,IAHF,EAIGlB,SAAS,iBACR,uDACE;AAAM,IAAA,GAAG,EAAC,YAAV;AAAuB,IAAA,IAAI,EAAC;AAA5B,IADF,eAEE;AAAM,IAAA,GAAG,EAAC,YAAV;AAAuB,IAAA,IAAI,EAAC;AAA5B,IAFF,CALJ,CAFJ,eAcE;AACE,IAAA,GAAG,EAAEG,QADP;AAEE,IAAA,IAAI,EAAC,QAFP;AAGE,IAAA,aAAa,EAAEyB,eAHjB;AAIE,IAAA,OAAO,EAAEC,SAJX;AAKE,IAAA,SAAS,EAAER,sBALb;AAME,kBAAY9B,UANd;AAOE,IAAA,KAAK,EAAE;AACLuC,MAAAA,eAAe,EAAG,OAAMrB,YAAY,GAAGQ,SAAH,GAAe,EAAG;AADjD;AAPT,kBAUE;AACE,IAAA,IAAI,EAAC,QADP;AAEE,IAAA,SAAS,EAAC,0BAFZ;AAGE,kBAAa,GAAEvB,QAAS,IAAGH,UAAW;AAHxC,kBAIE;AAAK,IAAA,SAAS,EAAC;AAAf,IAJF,CAVF,EAgBGe,YAAY,iBACX;AACE,IAAA,SAAS,EAAEL,WADb;AAEE,IAAA,KAAK,EAAEV,UAFT;AAGE,IAAA,KAAK,EAAC,yEAHR;AAIE,IAAA,eAAe,MAJjB;AAKE,IAAA,GAAG,EAAE6B;AALP,IAjBJ,CAdF,CADF;AA2CD,CA/GD;;AAiHAjC,cAAc,CAAC4C,SAAf,GAA2B;AACzBjC,EAAAA,aAAa,EAAEhB,SAAS,CAACkD,IADA;AAEzBhC,EAAAA,SAAS,EAAElB,SAAS,CAACmD,IAFI;AAGzB7C,EAAAA,QAAQ,EAAEN,SAAS,CAACmD,IAHK;AAIzBpC,EAAAA,QAAQ,EAAEf,SAAS,CAACmD,IAJK;AAKzBlC,EAAAA,KAAK,EAAEjB,SAAS,CAACmD,IALQ;AAMzBrC,EAAAA,IAAI,EAAEd,SAAS,CAACmD,IANS;AAOzBtC,EAAAA,QAAQ,EAAEb,SAAS,CAACmD,IAPK;AAQzB5C,EAAAA,OAAO,EAAEP,SAAS,CAACoD,MARM;AASzBjC,EAAAA,WAAW,EAAEnB,SAAS,CAACoD,MATE;AAUzB1C,EAAAA,MAAM,EAAEV,SAAS,CAACoD,MAVO;AAWzBxC,EAAAA,QAAQ,EAAEZ,SAAS,CAACoD,MAXK;AAYzB5C,EAAAA,eAAe,EAAER,SAAS,CAACoD,MAZF;AAazBzC,EAAAA,WAAW,EAAEX,SAAS,CAACoD,MAbE;AAczB3C,EAAAA,UAAU,EAAET,SAAS,CAACoD;AAdG,CAA3B;AAiBA/C,cAAc,CAACgD,YAAf,GAA8B;AAC5BrC,EAAAA,aAAa,EAAE,MAAM,CAAE,CADK;AAE5BE,EAAAA,SAAS,EAAE,KAFiB;AAG5BZ,EAAAA,QAAQ,EAAE,KAHkB;AAI5BS,EAAAA,QAAQ,EAAE,KAJkB;AAK5BE,EAAAA,KAAK,EAAE,KALqB;AAM5BH,EAAAA,IAAI,EAAE,KANsB;AAO5BD,EAAAA,QAAQ,EAAE,KAPkB;AAQ5BM,EAAAA,WAAW,EAAE,EARe;AAS5BT,EAAAA,MAAM,EAAE,WAToB;AAU5BE,EAAAA,QAAQ,EAAE,OAVkB;AAW5BL,EAAAA,OAAO,EAAE,EAXmB;AAY5BC,EAAAA,eAAe,EAAE,EAZW;AAa5BG,EAAAA,WAAW,EAAE,EAbe;AAc5BF,EAAAA,UAAU,EAAE;AAdgB,CAA9B;AAiBA,eAAeJ,cAAf","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}) => {\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: false\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 (!isIntersecting || imageSize === YT_HQ_FORMAT) return;\n\n      const img = new Image();\n      img.onload = () => {\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]\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  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  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"}
+{"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.1",
+  "version": "0.118.0-alpha.2",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -87,5 +87,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "77636925f8908f07201713b948324b8cbb62eaa3"
+  "gitHead": "04cc8794eb8f3b5291270ec6cb14d9efd916bc9b"
 }

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

@@ -20,14 +20,15 @@ const YoutubeEmbeded = ({
   onIframeAdded,
   muted,
   adNetwork,
-  iframeClass
+  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: false
+    displayImage: priority
   });
 
   const encodedId = encodeURIComponent(videoId);
@@ -49,10 +50,11 @@ const YoutubeEmbeded = ({
 
   useEffect(
     () => {
-      if (!isIntersecting || imageSize === YT_HQ_FORMAT) return;
+      if ((!priority && !isIntersecting) || imageSize === YT_HQ_FORMAT) return;
 
       const img = new Image();
-      img.onload = () => {
+      // 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 });
@@ -60,7 +62,7 @@ const YoutubeEmbeded = ({
 
       img.src = posterUrl;
     },
-    [imageSize, isIntersecting, posterUrl]
+    [imageSize, isIntersecting, posterUrl, priority]
   );
 
   const warmConnections = () => {
@@ -120,6 +122,7 @@ const YoutubeEmbeded = ({
 };
 
 YoutubeEmbeded.propTypes = {
+  priority: PropTypes.bool,
   onIframeAdded: PropTypes.func,
   adNetwork: PropTypes.bool,
   autoplay: PropTypes.bool,
@@ -137,6 +140,7 @@ YoutubeEmbeded.propTypes = {
 };
 
 YoutubeEmbeded.defaultProps = {
+  priority: true,
   onIframeAdded: () => {},
   adNetwork: false,
   autoplay: false,

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

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