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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.116.0",
+  "version": "0.118.0-alpha.3",
   "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.102.0",
-    "@blaze-cms/core-errors": "^0.102.0",
+    "@blaze-cms/core-auth-ui": "^0.118.0-alpha.0",
+    "@blaze-cms/core-errors": "^0.118.0-alpha.0",
     "@blaze-cms/image-cdn-react": "^0.2.0",
-    "@blaze-cms/nextjs-components": "^0.113.0",
+    "@blaze-cms/nextjs-components": "^0.118.0-alpha.0",
     "@blaze-cms/setup-ui": "^0.92.0",
-    "@blaze-cms/utils": "^0.113.0",
+    "@blaze-cms/utils": "^0.118.0-alpha.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": "7e61f8ea829a63a55f795f53299006ee2af46647"
+  "gitHead": "9ce5c14d20fe41c7e6b671fd8e8edd5410d704ce"
 }

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>
 `;