@blaze-cms/react-page-builder 0.146.0-alpha.13 → 0.146.0-alpha.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.146.0-alpha.13",
+  "version": "0.146.0-alpha.15",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -90,5 +90,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "169de01b9b9e3f4ea64ac0b4b14a846ebdb02021"
+  "gitHead": "127d2d79d4908d1456fe83639fe606236114d60a"
 }

package/src/components/MenuItem/MenuEntitiesItem.js

@@ -134,6 +134,8 @@ const MenuEntitiesItem = ({ entities, parent, ...props }) => {
     filterOperator
   });
 
+  variables.limit = props.limit || undefined;
+
   const hasNoItemsToDisplayOrFilter = !updatedItemsToDisplay.length && !updatedFilterBy;
 
   const { data = {} } = useQuery(action, {

package/src/components/Video/Video.js

@@ -43,7 +43,7 @@ const Video = ({
   });
 
   return (
-    <Wrapper className="video" modifiers={modifiers}>
+    <Wrapper className="video" modifiers={modifiers} key={url}>
       {playInModal ? (
         <VideoModal
           url={url}

package/src/components/Video/VideoContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const VideoContext = createContext({});
+const VideoContextProvider = VideoContext.Provider;
+const VideoContextConsumer = VideoContext.Consumer;
+
+export { VideoContext, VideoContextProvider, VideoContextConsumer };

package/src/components/Video/VideoRender.js

@@ -1,15 +1,40 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import getProvider from './providers';
 import { withTitle } from '../../HOC';
+import { VideoContextProvider } from './VideoContext';
+import emitGtmEvent from './helpers/emit-gtm-event';
 
 const VideoRender = ({ provider, ...props }) => {
+  const ref = useRef(0);
   const Provider = getProvider(provider);
-  return <Provider {...props} />;
+  const { gtmEventName: propEventName } = props;
+  const gtmEventName = propEventName || process.env.BLAZE_VIDEO_EVENT_NAME;
+  const emitEvent = gtmEventName
+    ? ({ action, videoId }) =>
+        emitGtmEvent({
+          gtmEventName,
+          provider,
+          action,
+          videoId,
+          playCounter: ref
+        })
+    : null;
+
+  return (
+    <VideoContextProvider value={{ emitEvent }}>
+      <Provider {...props} />
+    </VideoContextProvider>
+  );
 };
 
 VideoRender.propTypes = {
-  provider: PropTypes.string.isRequired
+  provider: PropTypes.string.isRequired,
+  gtmEventName: PropTypes.string
+};
+
+VideoRender.defaultProps = {
+  gtmEventName: ''
 };
 
 export default withTitle(VideoRender);

package/src/components/Video/constants.js

@@ -0,0 +1,6 @@
+export const EVENT_ACTIONS = {
+  START: 'start',
+  PLAYING: 'playing',
+  PAUSED: 'paused',
+  ENDED: 'ended'
+};

package/src/components/Video/helpers/emit-gtm-event.js

@@ -0,0 +1,25 @@
+import { EVENT_ACTIONS } from '../constants';
+
+const emitGtmEvent = ({ gtmEventName, provider, action, videoId, playCounter }) => {
+  if (!window.dataLayer || !action) return;
+
+  const actionToUse =
+    action === EVENT_ACTIONS.PLAYING && playCounter.current < 1 ? EVENT_ACTIONS.START : action;
+
+  if (action === EVENT_ACTIONS.PLAYING) {
+    // eslint-disable-next-line no-param-reassign
+    playCounter.current += 1;
+  }
+
+  const playCount = playCounter.current;
+
+  window.dataLayer.push({
+    event: gtmEventName,
+    video_action: actionToUse,
+    video_provider: provider,
+    video_id: videoId,
+    video_play_count: playCount
+  });
+};
+
+export default emitGtmEvent;

package/src/components/Video/providers/JWPlayer/JWPlayerController.js

@@ -2,10 +2,13 @@
   Custom controller to extend and scale the 'react-jw-player' library for future updates.
 */
 
+import { EVENT_ACTIONS } from '../../constants';
+
 class JWPlayerController {
-  constructor() {
+  constructor({ emitEvent }) {
     this.player = null;
     this.error = null;
+    this.emitEvent = emitEvent;
   }
 
   setPlayer = player => {
@@ -24,11 +27,25 @@ class JWPlayerController {
     this.error = message;
   };
 
-  onComplete = event => {};
+  doEmitEvent = action => {
+    const { emitEvent } = this;
+    if (emitEvent) {
+      const { mediaid: videoId } = this.player.getPlaylistItem();
+      emitEvent({ action, videoId });
+    }
+  };
+
+  onComplete = event => {
+    this.doEmitEvent(EVENT_ACTIONS.ENDED);
+  };
 
-  onPause = event => {};
+  onPause = event => {
+    this.doEmitEvent(EVENT_ACTIONS.PAUSED);
+  };
 
-  onPlay = event => {};
+  onPlay = event => {
+    this.doEmitEvent(EVENT_ACTIONS.PLAYING);
+  };
 
   get events() {
     return {

package/src/components/Video/providers/JWPlayer/JWPlayerProvider.js

@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
 import ReactJWPlayer from 'react-jw-player';
 import { JW_PLAYER_TYPE_FILE, VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';
 import JWPlayerController from './JWPlayerController';
-
-const PlayerController = new JWPlayerController();
+import { VideoContext } from '../../VideoContext';
 
 const JWPlayerProvider = ({
   url,
@@ -17,15 +16,18 @@ const JWPlayerProvider = ({
   imageData,
   loop: repeat
 }) => {
+  const { emitEvent } = useContext(VideoContext);
+  const PlayerController = useRef(new JWPlayerController({ emitEvent }));
+
   const handleOnReady = () => {
     const jwPlayer = window.jwplayer(name);
     if (jwPlayer) {
-      PlayerController.setPlayer(jwPlayer);
+      PlayerController.current.setPlayer(jwPlayer);
     }
   };
 
   const getJWPlayerProps = () => {
-    const { events } = PlayerController;
+    const { events } = PlayerController.current;
 
     const props = {
       customProps: { repeat, controls, events },

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

@@ -1,8 +1,12 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useInView } from '@blaze-react/utils/lib/customHooks';
 import { IN_VIEW_CONFIG } from '../../../../constants';
 import { getPosterUrl, YT_HQ_FORMAT, YT_IMAGE_URL } from './helpers';
+import { VideoContext } from '../../VideoContext';
+import { EVENT_ACTIONS } from '../../constants';
+
+const SCRIPT_ID = 'youtube-iframe-api';
 
 const YoutubeEmbeded = ({
   autoplay,
@@ -23,6 +27,9 @@ const YoutubeEmbeded = ({
   placeholderOnly,
   imageData
 }) => {
+  const ref = useRef(null);
+  const playerRef = useRef(null);
+  const { emitEvent } = useContext(VideoContext);
   const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
   const [preconnected, setPreconnected] = useState(false);
   const [renderIframe, setRenderIframe] = useState(!!autoplay);
@@ -43,10 +50,62 @@ const YoutubeEmbeded = ({
     webp
   });
   const mutedValue = muted ? '&mute=1' : '';
-  const iframeSrc = !playlist
+  let iframeSrc = !playlist
     ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}`
     : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;
+  if (emitEvent) iframeSrc += `&enablejsapi=1&origin=${window.location.origin}`;
+
   const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;
+  const iframeId = `yt-iframe-${videoId}`;
+
+  useEffect(
+    () => {
+      if (!emitEvent || !renderIframe) return;
+
+      if (!document.getElementById(SCRIPT_ID)) {
+        // if script not already loaded
+        const tag = document.createElement('script');
+        tag.id = SCRIPT_ID;
+        tag.src = 'https://www.youtube.com/iframe_api';
+        const firstScriptTag = document.getElementsByTagName('script')[0];
+        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+      }
+
+      const onStateChange = event => {
+        let action = '';
+        if (event.data === window.YT.PlayerState.ENDED) {
+          action = EVENT_ACTIONS.ENDED;
+        } else if (event.data === window.YT.PlayerState.PAUSED) {
+          action = EVENT_ACTIONS.PAUSED;
+        } else if (event.data === window.YT.PlayerState.PLAYING) {
+          action = EVENT_ACTIONS.PLAYING;
+        }
+
+        emitEvent({ action, videoId });
+      };
+
+      if (window.YT) {
+        // if script already loaded then attach player
+        window.YT.ready(() => {
+          playerRef.current = new window.YT.Player(iframeId, {
+            events: {
+              onStateChange
+            }
+          });
+        });
+      } else {
+        // called on script load
+        window.onYouTubeIframeAPIReady = () => {
+          playerRef.current = new window.YT.Player(ref.current, {
+            events: {
+              onStateChange
+            }
+          });
+        };
+      }
+    },
+    [emitEvent, iframeId, renderIframe, videoId]
+  );
 
   useEffect(
     () => {
@@ -114,6 +173,8 @@ const YoutubeEmbeded = ({
         </div>
         {renderIframe && (
           <iframe
+            ref={ref}
+            id={iframeId}
             className={iframeClass}
             title={videoTitle}
             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"