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

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