@quintype/components 3.4.4-test-4.0 → 3.4.4

package/dist/cjs/index.js

@@ -929,7 +929,7 @@ function removeDuplicateStories(existingStories, newStories) {
 }
 function getAssociatedTemplate(_ref) {
   var associatedMetadata = _ref["associated-metadata"];
-  return associatedMetadata ? associatedMetadata.layout : 'default';
+  return associatedMetadata ? associatedMetadata.layout : "default";
 } // FIXME: TEST THIS
 
 function replaceAllStoriesInCollection(collection, story) {
@@ -973,12 +973,12 @@ var getQliticsSchema = function getQliticsSchema() {
   }); //Display warning to make debugging easier
 
   return {
-    'story-content-id': story['story-content-id'],
-    'story-version-id': story['story-version-id'],
-    'card-content-id': card['content-id'],
-    'card-version-id': card['content-version-id'],
-    'story-element-id': element.id,
-    'story-element-type': element.subtype || element.type
+    "story-content-id": story["story-content-id"],
+    "story-version-id": story["story-version-id"],
+    "card-content-id": card["content-id"],
+    "card-version-id": card["content-version-id"],
+    "story-element-id": element.id,
+    "story-element-type": element.subtype || element.type
   };
 };
 var computeAccess = function computeAccess(previousState, currentState) {
@@ -997,6 +997,16 @@ var computeAccess = function computeAccess(previousState, currentState) {
 
   return _objectSpread$6(_objectSpread$6({}, previousState), currentAccess);
 };
+function initiateNewObserver(targetElement, intersectionCallBack) {
+  var intersectionObserver = new IntersectionObserver(intersectionCallBack, {
+    threshold: 0.75
+  });
+  intersectionObserver.observe(targetElement);
+  return intersectionObserver;
+}
+function disconnectObserver(observer) {
+  if (observer) observer.disconnect();
+}
 
 function _createSuper$l(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$l(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
 
@@ -2381,6 +2391,21 @@ var BrightcoveElement = function BrightcoveElement(props) {
       posterImage = _useState4[0],
       setPosterImage = _useState4[1];
 
+  var _useState5 = React.useState(null),
+      _useState6 = _slicedToArray__default["default"](_useState5, 2),
+      myPlayer = _useState6[0],
+      setMyPlayer = _useState6[1];
+
+  var _useState7 = React.useState(false),
+      _useState8 = _slicedToArray__default["default"](_useState7, 2),
+      thumbnailClicked = _useState8[0],
+      setThumbnailClicked = _useState8[1];
+
+  var videoRef = React.useRef();
+  var videoPausedByObserver = React.useRef(); // To check if the video is not click paused by user but paused by intersection observer, Its implemented this way because we cannot capture the click-pause event as videos are playing in iframe
+
+  var observerRef = React.useRef(); // To Observe video element for intersection
+
   var loadLibrary = function loadLibrary() {
     var _window;
 
@@ -2404,11 +2429,53 @@ var BrightcoveElement = function BrightcoveElement(props) {
       loadLibrary();
     }
   }, [loadIframeOnClick]);
+  React.useEffect(function () {
+    if (!myPlayer) return;
+    myPlayer.on("play", startObserver);
+    myPlayer.on("pause", handleVideoPause);
+    if (thumbnailClicked) myPlayer.play();
+    return function () {
+      myPlayer && myPlayer.off("play");
+      myPlayer && myPlayer.off("pause");
+      observerRef.current && disconnectObserver(observerRef.current);
+    };
+  }, [myPlayer, thumbnailClicked]);
+
+  function intersectionCallback(entries) {
+    var videoInViewPort = entries === null || entries === void 0 ? void 0 : entries[0].isIntersecting;
+    if (videoInViewPort) myPlayer.play();else {
+      videoPausedByObserver.current = true; // before the below line fires the pause event we set the videoPausedByObserver Ref to true, this lets the pause events callback to know that the video is not click-paused by the user but paused by the intersection observer
+
+      myPlayer.pause();
+    }
+  }
+
+  function startObserver() {
+    var targetElement = videoRef.current;
+    var observer = observerRef.current;
+
+    if (observer) {
+      observer.observe(targetElement);
+    } else {
+      var intersectionObserver = initiateNewObserver(targetElement, intersectionCallback);
+      observerRef.current = intersectionObserver;
+    }
+  }
+
+  function handleVideoPause() {
+    var observer = observerRef.current;
+    var isVideoPausedByObserver = videoPausedByObserver.current;
+
+    if (isVideoPausedByObserver) {
+      videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
+    } else {
+      disconnectObserver(observer);
+    }
+  }
 
   var brightcoveIframe = function brightcoveIframe() {
     var _window2;
 
-    var autoplay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     var BrightcovePlayerLoader = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.BrightcovePlayerLoader;
     return /*#__PURE__*/React__default["default"].createElement(BrightcovePlayerLoader, {
       accountId: accountId,
@@ -2418,13 +2485,7 @@ var BrightcoveElement = function BrightcoveElement(props) {
         className: "brightcove-player"
       },
       onSuccess: function onSuccess(success) {
-        if (autoplay) {
-          var myPlayer = success.ref;
-          myPlayer.ready(function () {
-            myPlayer.muted(true);
-            myPlayer.play();
-          });
-        }
+        return setMyPlayer(success.ref);
       },
       onFailure: function onFailure() {
         return console.log("brightcove failed to load");
@@ -2440,31 +2501,28 @@ var BrightcoveElement = function BrightcoveElement(props) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              console.log("accountId", accountId, videoId);
-              console.log("policyKey", policyKey);
-
               if (posterImage) {
-                _context.next = 10;
+                _context.next = 8;
                 break;
               }
 
-              _context.next = 5;
+              _context.next = 3;
               return fetch("https://edge.api.brightcove.com/playback/v1/accounts/".concat(accountId, "/videos?q=id:").concat(videoId), {
                 headers: {
                   "BCOV-Policy": policyKey
                 }
               });
 
-            case 5:
-              _context.next = 7;
+            case 3:
+              _context.next = 5;
               return _context.sent.json();
 
-            case 7:
+            case 5:
               _yield$yield$fetch$js = _context.sent;
               videos = _yield$yield$fetch$js.videos;
               setPosterImage(videos[0].poster || "");
 
-            case 10:
+            case 8:
             case "end":
               return _context.stop();
           }
@@ -2480,37 +2538,48 @@ var BrightcoveElement = function BrightcoveElement(props) {
   if (loadIframeOnClick) {
     var _window3;
 
-    console.log("coming in if");
-
     if (!showVideo) {
       getPoster();
     }
 
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "brightcove-wrapper"
-    }, !showVideo && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
+      className: "brightcove-wrapper",
+      ref: videoRef
+    }, !showVideo && /*#__PURE__*/React__default["default"].createElement("div", {
+      onClick: /*#__PURE__*/_asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee2() {
+        return _regeneratorRuntime__default["default"].wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return loadLibrary();
+
+              case 2:
+                setThumbnailClicked(true);
+
+              case 3:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }))
+    }, /*#__PURE__*/React__default["default"].createElement("button", {
       className: "brightcove-playBtn",
-      onClick: function onClick() {
-        return loadLibrary();
-      },
       "aria-label": "Play Video"
     }), posterImage ? /*#__PURE__*/React__default["default"].createElement("img", {
       className: "brightcove-poster",
-      onClick: function onClick() {
-        return loadLibrary();
-      },
       src: posterImage,
       alt: "video"
     }) : /*#__PURE__*/React__default["default"].createElement("div", {
       className: "brightcove-poster-fallback"
-    })), showVideo && ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.BrightcovePlayerLoader) && brightcoveIframe(true));
+    })), showVideo && ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.BrightcovePlayerLoader) && brightcoveIframe());
   } else if (!loadIframeOnClick && (_window4 = window) !== null && _window4 !== void 0 && _window4.BrightcovePlayerLoader) {
-    console.log("coming in else if");
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "brightcove-wrapper"
+      className: "brightcove-wrapper",
+      ref: videoRef
     }, brightcoveIframe());
   } else {
-    console.log("coming in else");
     return null;
   }
 };
@@ -2560,12 +2629,57 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "startObserver", function (targetElement) {
+      if (_this.intersectionObserver) {
+        _this.intersectionObserver.observe(targetElement);
+      } else {
+        _this.intersectionObserver = initiateNewObserver(targetElement, _this.intersectionCallback);
+      }
+    });
+
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onAdPlayCallback", function (event) {
+      var targetElement = event.target;
+      _this.videoRef.current = targetElement;
+
+      _this.startObserver(targetElement);
+    });
+
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onPlayCallback", function (event) {
       _this.props.onPlay === "function" && _this.props.onPlay(event);
+      var targetElement = event.target;
+      _this.videoRef.current = targetElement;
+
+      _this.startObserver(targetElement);
+    });
+
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "handleVideoPause", function () {
+      var videoPausedByObserver = _this.videoPausedByObserver.current;
+
+      if (videoPausedByObserver) {
+        _this.videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
+      } else {
+        disconnectObserver(_this.intersectionObserver);
+      }
+    });
+
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "intersectionCallback", function (entries) {
+      var player = _this.videoRef.current;
+      var videoInVewPort = entries === null || entries === void 0 ? void 0 : entries[0].isIntersecting;
+      if (videoInVewPort) player.play();else {
+        _this.videoPausedByObserver.current = true; // before the below line fires the pause event we set the videoPausedByObserver Ref to true, this lets the pause events callback to know that the video is not click-paused by the user but paused by the intersection observer
+
+        player.pause();
+      }
     });
 
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onPauseCallback", function (event) {
       _this.props.onPause === "function" && _this.props.onPause(event);
+
+      _this.handleVideoPause();
+    });
+
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onAdPauseCallback", function () {
+      _this.handleVideoPause();
     });
 
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onEndCallback", function (event) {
@@ -2579,11 +2693,6 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onPlayerReady", function (event) {
-      event.target.setVolume(100);
-      event.target.playVideo();
-    });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "renderVideo", function () {
       _this.triggerIframe();
 
@@ -2600,6 +2709,9 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
         autoplay: 0
       }
     };
+    _this.videoRef = /*#__PURE__*/React__default["default"].createRef();
+    _this.videoPausedByObserver = /*#__PURE__*/React__default["default"].createRef(); // To check if the video is not click paused by user but paused by intersection observer, Its implemented this way because we cannot capture the click-pause event as videos are playing in iframe
+
     return _this;
   }
 
@@ -2614,6 +2726,7 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._isMounted = false;
+      disconnectObserver(this.intersectionObserver);
     }
   }, {
     key: "render",
@@ -2624,13 +2737,19 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
           videoId = _getVideoID.id;
 
       var dailymotionIframe = function dailymotionIframe() {
+        var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false,
+            autoplay = _ref.autoplay;
+
         return /*#__PURE__*/React__default["default"].createElement(DailyMotion$1, {
           video: videoId,
           opts: _this2.opts,
           onPlay: _this2.onPlayCallback,
           onPause: _this2.onPauseCallback,
           onEnd: _this2.onEndCallback,
-          autoplay: true
+          onAdPlay: _this2.onAdPlayCallback,
+          onAdPause: _this2.onAdPauseCallback,
+          autoplay: autoplay,
+          ref: _this2.videoRef
         });
       };
 
@@ -2650,13 +2769,7 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
           className: "dailymotion-iframe-wrapper"
         }, dailymotionIframe()));
       } else if (!this.props.loadIframeOnClick && isLibraryLoaded$1()) {
-        return /*#__PURE__*/React__default["default"].createElement(DailyMotion$1, {
-          video: videoId,
-          opts: this.opts,
-          onPlay: this.onPlayCallback,
-          onPause: this.onPauseCallback,
-          onEnd: this.onEndCallback
-        });
+        return dailymotionIframe();
       } else return /*#__PURE__*/React__default["default"].createElement("div", null);
     }
   }]);
@@ -2696,6 +2809,36 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
       });
     });
 
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "intersectionCallback", function (entries) {
+      var videoInVewPort = entries === null || entries === void 0 ? void 0 : entries[0].isIntersecting;
+      var player = _this.state.dmPlayer;
+      if (videoInVewPort) player.play();else {
+        _this.videoPausedByObserver.current = true; // before the below line fires the pause event we set the videoPausedByObserver Ref to true, this lets the pause events callback to know that the video is not click-paused by the user but paused by the intersection observer
+
+        player.pause();
+      }
+    });
+
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "startObserver", function () {
+      var targetElement = _this.observerRef.current;
+
+      if (_this.intersectionObserver) {
+        _this.intersectionObserver.observe(targetElement);
+      } else {
+        _this.intersectionObserver = initiateNewObserver(targetElement, _this.intersectionCallback);
+      }
+    });
+
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "handleVideoPause", function () {
+      var isVideoPausedByObserver = _this.videoPausedByObserver.current;
+
+      if (isVideoPausedByObserver) {
+        _this.videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
+      } else {
+        disconnectObserver(_this.intersectionObserver);
+      }
+    });
+
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "addScript", function () {
       var _this$props$element$m = _this.props.element.metadata,
           videoId = _this$props$element$m["video-id"],
@@ -2705,11 +2848,28 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
       script.dataset.video = videoId;
 
       _this.containerRef.current.appendChild(script);
+
+      script.onload = function () {
+        window.dailymotion.createPlayer(_this.containerRef.current.id, {
+          video: videoId,
+          player: playerId
+        }).then(function (player) {
+          _this.setState({
+            dmPlayer: player
+          });
+        })["catch"](function (e) {
+          return console.error("dm--error", e);
+        });
+      };
     });
 
     _this.containerRef = /*#__PURE__*/React__default["default"].createRef();
+    _this.observerRef = /*#__PURE__*/React__default["default"].createRef();
+    _this.videoPausedByObserver = /*#__PURE__*/React__default["default"].createRef(); // To check if the video is not click paused by user but paused by intersection observer, Its implemented this way because we cannot capture the click-pause event as videos are playing in iframe
+
     _this.state = {
-      showVideo: false
+      showVideo: false,
+      dmPlayer: null
     };
     return _this;
   }
@@ -2721,6 +2881,22 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
         this.addScript();
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var player = this.state.dmPlayer;
+      if (!player) return;
+      if (!this.observerRef.current) return;
+      player.on("ad_play", this.startObserver);
+      player.on("ad_pause", this.handleVideoPause);
+      player.on("play", this.startObserver);
+      player.on("pause", this.handleVideoPause);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      disconnectObserver(this.intersectionObserver);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -2739,14 +2915,20 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
           src: "https://www.dailymotion.com/thumbnail/video/".concat(videoId),
           alt: "daily-motion-video"
         })), this.state.showVideo && /*#__PURE__*/React__default["default"].createElement("div", {
+          ref: this.observerRef
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "dailymotion-embed-wrapper dm-embed-integration",
-          ref: this.containerRef
-        }));
+          ref: this.containerRef,
+          id: "dm-embed-container-id-".concat(videoId)
+        })));
       } else if (!this.props.loadIframeOnClick) {
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          ref: this.observerRef
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "dailymotion-embed-wrapper dm-embed-integration",
-          ref: this.containerRef
-        });
+          ref: this.containerRef,
+          id: "dm-embed-container-id-".concat(videoId)
+        }));
       }
     }
   }]);
@@ -3058,6 +3240,16 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "initiateObserver", function (targetElement) {
+      _this.removeObserverIfExists();
+
+      _this.intersectionObserver = new IntersectionObserver(_this.intersectionCallback, {
+        threshold: 0.75
+      });
+
+      _this.intersectionObserver.observe(targetElement);
+    });
+
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "triggerQlitics", function (action) {
       if (_this.props.disableAnalytics === true) return false;
       var _this$props = _this.props,
@@ -3087,12 +3279,38 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
       _this.triggerQlitics("play");
 
       _this.props.onPlay === "function" && _this.props.onPlay(event);
+      _this.videoRef.current = event.target;
+
+      var targetElement = _this.videoRef.current.getIframe();
+
+      if (_this.intersectionObserver) {
+        _this.intersectionObserver.observe(targetElement);
+      } else {
+        _this.intersectionObserver = initiateNewObserver(targetElement, _this.intersectionCallback);
+      }
+    });
+
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "intersectionCallback", function (entries) {
+      var videoInVewPort = entries === null || entries === void 0 ? void 0 : entries[0].isIntersecting;
+      var player = _this.videoRef.current;
+      if (videoInVewPort) player.playVideo();else {
+        _this.videoPausedByObserver.current = true; // before the below line fires the pause event we set the videoPausedByObserver Ref to true, this lets the pause events callback to know that the video is not click-paused by the user but paused by the intersection observer
+
+        player.pauseVideo();
+      }
     });
 
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onPauseCallback", function (event) {
       _this.triggerQlitics("pause");
 
       _this.props.onPause === "function" && _this.props.onPause(event);
+      var videoPausedByObserver = _this.videoPausedByObserver.current;
+
+      if (videoPausedByObserver) {
+        _this.videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
+      } else {
+        disconnectObserver(_this.intersectionObserver);
+      }
     });
 
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onEndCallback", function (event) {
@@ -3129,6 +3347,9 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
         autoplay: 0
       }
     };
+    _this.videoRef = /*#__PURE__*/React__default["default"].createRef();
+    _this.videoPausedByObserver = /*#__PURE__*/React__default["default"].createRef(); // To check if the video is not click paused by user but paused by intersection observer, Its implemented this way because we cannot capture the click-pause event as videos are playing in iframe
+
     return _this;
   }
 
@@ -3143,6 +3364,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._isMounted = false;
+      disconnectObserver(this.intersectionObserver);
     }
   }, {
     key: "render",
@@ -3156,7 +3378,8 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
           onPlay: _this2.onPlayCallback,
           onPause: _this2.onPauseCallback,
           onEnd: _this2.onEndCallback,
-          onReady: _this2.onPlayerReady
+          onReady: _this2.onPlayerReady,
+          ref: _this2.videoRef
         });
       };
 
@@ -3176,13 +3399,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
           className: "youtube-iframe-wrapper"
         }, youtubeIframe()));
       } else if (!this.props.loadIframeOnClick && isLibraryLoaded()) {
-        return /*#__PURE__*/React__default["default"].createElement(YouTube, {
-          videoId: getYouTubeID__default["default"](this.props.element.url),
-          opts: this.opts,
-          onPlay: this.onPlayCallback,
-          onPause: this.onPauseCallback,
-          onEnd: this.onEndCallback
-        });
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, youtubeIframe());
       } else return /*#__PURE__*/React__default["default"].createElement("div", null);
     }
   }]);
@@ -5217,39 +5434,34 @@ var AccessTypeBase = /*#__PURE__*/function (_React$Component) {
         while (1) {
           switch (_context9.prev = _context9.next) {
             case 0:
-              console.log("getSubscriptionForUser");
-
               if (global.AccessType) {
-                _context9.next = 3;
+                _context9.next = 2;
                 break;
               }
 
               return _context9.abrupt("return", {});
 
-            case 3:
-              console.log("accesstype available");
-              _context9.next = 6;
+            case 2:
+              _context9.next = 4;
               return awaitHelper(global.AccessType.getSubscriptions());
 
-            case 6:
+            case 4:
               _yield$awaitHelper8 = _context9.sent;
               error = _yield$awaitHelper8.error;
               _yield$awaitHelper8$d = _yield$awaitHelper8.data;
               subscriptions = _yield$awaitHelper8$d === void 0 ? [] : _yield$awaitHelper8$d;
 
               if (!error) {
-                _context9.next = 13;
+                _context9.next = 10;
                 break;
               }
 
-              console.log("coming in error", error);
               return _context9.abrupt("return", error);
 
-            case 13:
-              console.log("coming in subscriptions", subscriptions);
+            case 10:
               return _context9.abrupt("return", subscriptions);
 
-            case 15:
+            case 11:
             case "end":
               return _context9.stop();
           }
@@ -6443,8 +6655,10 @@ exports.awaitHelper = awaitHelper;
 exports.collectionToStories = collectionToStories;
 exports.computeAccess = computeAccess;
 exports.createDfpAdComponent = createDfpAdComponent;
+exports.disconnectObserver = disconnectObserver;
 exports.getAssociatedTemplate = getAssociatedTemplate;
 exports.getQliticsSchema = getQliticsSchema;
+exports.initiateNewObserver = initiateNewObserver;
 exports.refreshDfpAds = refreshDfpAds;
 exports.removeDuplicateStories = removeDuplicateStories;
 exports.replaceAllStoriesInCollection = replaceAllStoriesInCollection;

package/dist/es/components/access-type.js

@@ -480,39 +480,34 @@ var AccessTypeBase = /*#__PURE__*/function (_React$Component) {
         while (1) {
           switch (_context9.prev = _context9.next) {
             case 0:
-              console.log("getSubscriptionForUser");
-
               if (global.AccessType) {
-                _context9.next = 3;
+                _context9.next = 2;
                 break;
               }
 
               return _context9.abrupt("return", {});
 
-            case 3:
-              console.log("accesstype available");
-              _context9.next = 6;
+            case 2:
+              _context9.next = 4;
               return awaitHelper(global.AccessType.getSubscriptions());
 
-            case 6:
+            case 4:
               _yield$awaitHelper8 = _context9.sent;
               error = _yield$awaitHelper8.error;
               _yield$awaitHelper8$d = _yield$awaitHelper8.data;
               subscriptions = _yield$awaitHelper8$d === void 0 ? [] : _yield$awaitHelper8$d;
 
               if (!error) {
-                _context9.next = 13;
+                _context9.next = 10;
                 break;
               }
 
-              console.log("coming in error", error);
               return _context9.abrupt("return", error);
 
-            case 13:
-              console.log("coming in subscriptions", subscriptions);
+            case 10:
               return _context9.abrupt("return", subscriptions);
 
-            case 15:
+            case 11:
             case "end":
               return _context9.stop();
           }

package/dist/es/components/story-elements/brightcove.js

@@ -3,7 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import get from "lodash/get";
 import { bool, object } from "prop-types";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { disconnectObserver, initiateNewObserver } from "../../utils";
 import { WithLazy } from "../with-lazy";
 
 var BrightcoveElement = function BrightcoveElement(props) {
@@ -30,6 +31,21 @@ var BrightcoveElement = function BrightcoveElement(props) {
       posterImage = _useState4[0],
       setPosterImage = _useState4[1];
 
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      myPlayer = _useState6[0],
+      setMyPlayer = _useState6[1];
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      thumbnailClicked = _useState8[0],
+      setThumbnailClicked = _useState8[1];
+
+  var videoRef = useRef();
+  var videoPausedByObserver = useRef(); // To check if the video is not click paused by user but paused by intersection observer, Its implemented this way because we cannot capture the click-pause event as videos are playing in iframe
+
+  var observerRef = useRef(); // To Observe video element for intersection
+
   var loadLibrary = function loadLibrary() {
     var _window;
 
@@ -53,11 +69,53 @@ var BrightcoveElement = function BrightcoveElement(props) {
       loadLibrary();
     }
   }, [loadIframeOnClick]);
+  useEffect(function () {
+    if (!myPlayer) return;
+    myPlayer.on("play", startObserver);
+    myPlayer.on("pause", handleVideoPause);
+    if (thumbnailClicked) myPlayer.play();
+    return function () {
+      myPlayer && myPlayer.off("play");
+      myPlayer && myPlayer.off("pause");
+      observerRef.current && disconnectObserver(observerRef.current);
+    };
+  }, [myPlayer, thumbnailClicked]);
+
+  function intersectionCallback(entries) {
+    var videoInViewPort = entries === null || entries === void 0 ? void 0 : entries[0].isIntersecting;
+    if (videoInViewPort) myPlayer.play();else {
+      videoPausedByObserver.current = true; // before the below line fires the pause event we set the videoPausedByObserver Ref to true, this lets the pause events callback to know that the video is not click-paused by the user but paused by the intersection observer
+
+      myPlayer.pause();
+    }
+  }
+
+  function startObserver() {
+    var targetElement = videoRef.current;
+    var observer = observerRef.current;
+
+    if (observer) {
+      observer.observe(targetElement);
+    } else {
+      var intersectionObserver = initiateNewObserver(targetElement, intersectionCallback);
+      observerRef.current = intersectionObserver;
+    }
+  }
+
+  function handleVideoPause() {
+    var observer = observerRef.current;
+    var isVideoPausedByObserver = videoPausedByObserver.current;
+
+    if (isVideoPausedByObserver) {
+      videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
+    } else {
+      disconnectObserver(observer);
+    }
+  }
 
   var brightcoveIframe = function brightcoveIframe() {
     var _window2;
 
-    var autoplay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     var BrightcovePlayerLoader = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.BrightcovePlayerLoader;
     return /*#__PURE__*/React.createElement(BrightcovePlayerLoader, {
       accountId: accountId,
@@ -67,13 +125,7 @@ var BrightcoveElement = function BrightcoveElement(props) {
         className: "brightcove-player"
       },
       onSuccess: function onSuccess(success) {
-        if (autoplay) {
-          var myPlayer = success.ref;
-          myPlayer.ready(function () {
-            myPlayer.muted(true);
-            myPlayer.play();
-          });
-        }
+        return setMyPlayer(success.ref);
       },
       onFailure: function onFailure() {
         return console.log("brightcove failed to load");
@@ -89,31 +141,28 @@ var BrightcoveElement = function BrightcoveElement(props) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              console.log("accountId", accountId, videoId);
-              console.log("policyKey", policyKey);
-
               if (posterImage) {
-                _context.next = 10;
+                _context.next = 8;
                 break;
               }
 
-              _context.next = 5;
+              _context.next = 3;
               return fetch("https://edge.api.brightcove.com/playback/v1/accounts/".concat(accountId, "/videos?q=id:").concat(videoId), {
                 headers: {
                   "BCOV-Policy": policyKey
                 }
               });
 
-            case 5:
-              _context.next = 7;
+            case 3:
+              _context.next = 5;
               return _context.sent.json();
 
-            case 7:
+            case 5:
               _yield$yield$fetch$js = _context.sent;
               videos = _yield$yield$fetch$js.videos;
               setPosterImage(videos[0].poster || "");
 
-            case 10:
+            case 8:
             case "end":
               return _context.stop();
           }
@@ -129,37 +178,48 @@ var BrightcoveElement = function BrightcoveElement(props) {
   if (loadIframeOnClick) {
     var _window3;
 
-    console.log("coming in if");
-
     if (!showVideo) {
       getPoster();
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: "brightcove-wrapper"
-    }, !showVideo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+      className: "brightcove-wrapper",
+      ref: videoRef
+    }, !showVideo && /*#__PURE__*/React.createElement("div", {
+      onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return loadLibrary();
+
+              case 2:
+                setThumbnailClicked(true);
+
+              case 3:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }))
+    }, /*#__PURE__*/React.createElement("button", {
       className: "brightcove-playBtn",
-      onClick: function onClick() {
-        return loadLibrary();
-      },
       "aria-label": "Play Video"
     }), posterImage ? /*#__PURE__*/React.createElement("img", {
       className: "brightcove-poster",
-      onClick: function onClick() {
-        return loadLibrary();
-      },
       src: posterImage,
       alt: "video"
     }) : /*#__PURE__*/React.createElement("div", {
       className: "brightcove-poster-fallback"
     })), showVideo && ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.BrightcovePlayerLoader) && brightcoveIframe(true));
   } else if (!loadIframeOnClick && (_window4 = window) !== null && _window4 !== void 0 && _window4.BrightcovePlayerLoader) {
-    console.log("coming in else if");
     return /*#__PURE__*/React.createElement("div", {
-      className: "brightcove-wrapper"
+      className: "brightcove-wrapper",
+      ref: videoRef
     }, brightcoveIframe());
   } else {
-    console.log("coming in else");
     return null;
   }
 };

package/dist/es/components/story-elements/dailymotion-embed-script.js

@@ -11,6 +11,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from "react";
+import { disconnectObserver, initiateNewObserver } from "../../utils";
 import { WithLazy } from "../with-lazy";
 
 var DailyMotion = /*#__PURE__*/function (_React$Component) {
@@ -33,6 +34,36 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "intersectionCallback", function (entries) {
+      var videoInVewPort = entries === null || entries === void 0 ? void 0 : entries[0].isIntersecting;
+      var player = _this.state.dmPlayer;
+      if (videoInVewPort) player.play();else {
+        _this.videoPausedByObserver.current = true; // before the below line fires the pause event we set the videoPausedByObserver Ref to true, this lets the pause events callback to know that the video is not click-paused by the user but paused by the intersection observer
+
+        player.pause();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "startObserver", function () {
+      var targetElement = _this.observerRef.current;
+
+      if (_this.intersectionObserver) {
+        _this.intersectionObserver.observe(targetElement);
+      } else {
+        _this.intersectionObserver = initiateNewObserver(targetElement, _this.intersectionCallback);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleVideoPause", function () {
+      var isVideoPausedByObserver = _this.videoPausedByObserver.current;
+
+      if (isVideoPausedByObserver) {
+        _this.videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
+      } else {
+        disconnectObserver(_this.intersectionObserver);
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "addScript", function () {
       var _this$props$element$m = _this.props.element.metadata,
           videoId = _this$props$element$m["video-id"],
@@ -42,11 +73,28 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
       script.dataset.video = videoId;
 
       _this.containerRef.current.appendChild(script);
+
+      script.onload = function () {
+        window.dailymotion.createPlayer(_this.containerRef.current.id, {
+          video: videoId,
+          player: playerId
+        }).then(function (player) {
+          _this.setState({
+            dmPlayer: player
+          });
+        })["catch"](function (e) {
+          return console.error("dm--error", e);
+        });
+      };
     });
 
     _this.containerRef = /*#__PURE__*/React.createRef();
+    _this.observerRef = /*#__PURE__*/React.createRef();
+    _this.videoPausedByObserver = /*#__PURE__*/React.createRef(); // To check if the video is not click paused by user but paused by intersection observer, Its implemented this way because we cannot capture the click-pause event as videos are playing in iframe
+
     _this.state = {
-      showVideo: false
+      showVideo: false,
+      dmPlayer: null
     };
     return _this;
   }
@@ -58,6 +106,22 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
         this.addScript();
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var player = this.state.dmPlayer;
+      if (!player) return;
+      if (!this.observerRef.current) return;
+      player.on("ad_play", this.startObserver);
+      player.on("ad_pause", this.handleVideoPause);
+      player.on("play", this.startObserver);
+      player.on("pause", this.handleVideoPause);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      disconnectObserver(this.intersectionObserver);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -76,14 +140,20 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
           src: "https://www.dailymotion.com/thumbnail/video/".concat(videoId),
           alt: "daily-motion-video"
         })), this.state.showVideo && /*#__PURE__*/React.createElement("div", {
+          ref: this.observerRef
+        }, /*#__PURE__*/React.createElement("div", {
           className: "dailymotion-embed-wrapper dm-embed-integration",
-          ref: this.containerRef
-        }));
+          ref: this.containerRef,
+          id: "dm-embed-container-id-".concat(videoId)
+        })));
       } else if (!this.props.loadIframeOnClick) {
         return /*#__PURE__*/React.createElement("div", {
+          ref: this.observerRef
+        }, /*#__PURE__*/React.createElement("div", {
           className: "dailymotion-embed-wrapper dm-embed-integration",
-          ref: this.containerRef
-        });
+          ref: this.containerRef,
+          id: "dm-embed-container-id-".concat(videoId)
+        }));
       }
     }
   }]);

package/dist/es/components/story-elements/dailymotion.js

@@ -13,6 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import getVideoID from "get-video-id";
 import { bool, func, object } from "prop-types";
 import React from "react";
+import { disconnectObserver, initiateNewObserver } from "../../utils";
 import { WithLazy } from "../with-lazy";
 var DailyMotion = null;
 var loaderPromise = null;
@@ -48,12 +49,57 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
+    _defineProperty(_assertThisInitialized(_this), "startObserver", function (targetElement) {
+      if (_this.intersectionObserver) {
+        _this.intersectionObserver.observe(targetElement);
+      } else {
+        _this.intersectionObserver = initiateNewObserver(targetElement, _this.intersectionCallback);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onAdPlayCallback", function (event) {
+      var targetElement = event.target;
+      _this.videoRef.current = targetElement;
+
+      _this.startObserver(targetElement);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onPlayCallback", function (event) {
       _this.props.onPlay === "function" && _this.props.onPlay(event);
+      var targetElement = event.target;
+      _this.videoRef.current = targetElement;
+
+      _this.startObserver(targetElement);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleVideoPause", function () {
+      var videoPausedByObserver = _this.videoPausedByObserver.current;
+
+      if (videoPausedByObserver) {
+        _this.videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
+      } else {
+        disconnectObserver(_this.intersectionObserver);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "intersectionCallback", function (entries) {
+      var player = _this.videoRef.current;
+      var videoInVewPort = entries === null || entries === void 0 ? void 0 : entries[0].isIntersecting;
+      if (videoInVewPort) player.play();else {
+        _this.videoPausedByObserver.current = true; // before the below line fires the pause event we set the videoPausedByObserver Ref to true, this lets the pause events callback to know that the video is not click-paused by the user but paused by the intersection observer
+
+        player.pause();
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onPauseCallback", function (event) {
       _this.props.onPause === "function" && _this.props.onPause(event);
+
+      _this.handleVideoPause();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onAdPauseCallback", function () {
+      _this.handleVideoPause();
     });
 
     _defineProperty(_assertThisInitialized(_this), "onEndCallback", function (event) {
@@ -67,11 +113,6 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onPlayerReady", function (event) {
-      event.target.setVolume(100);
-      event.target.playVideo();
-    });
-
     _defineProperty(_assertThisInitialized(_this), "renderVideo", function () {
       _this.triggerIframe();
 
@@ -88,6 +129,9 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
         autoplay: 0
       }
     };
+    _this.videoRef = /*#__PURE__*/React.createRef();
+    _this.videoPausedByObserver = /*#__PURE__*/React.createRef(); // To check if the video is not click paused by user but paused by intersection observer, Its implemented this way because we cannot capture the click-pause event as videos are playing in iframe
+
     return _this;
   }
 
@@ -102,6 +146,7 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._isMounted = false;
+      disconnectObserver(this.intersectionObserver);
     }
   }, {
     key: "render",
@@ -112,13 +157,19 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
           videoId = _getVideoID.id;
 
       var dailymotionIframe = function dailymotionIframe() {
+        var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false,
+            autoplay = _ref.autoplay;
+
         return /*#__PURE__*/React.createElement(DailyMotion, {
           video: videoId,
           opts: _this2.opts,
           onPlay: _this2.onPlayCallback,
           onPause: _this2.onPauseCallback,
           onEnd: _this2.onEndCallback,
-          autoplay: true
+          onAdPlay: _this2.onAdPlayCallback,
+          onAdPause: _this2.onAdPauseCallback,
+          autoplay: autoplay,
+          ref: _this2.videoRef
         });
       };
 
@@ -138,13 +189,7 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
           className: "dailymotion-iframe-wrapper"
         }, dailymotionIframe()));
       } else if (!this.props.loadIframeOnClick && isLibraryLoaded()) {
-        return /*#__PURE__*/React.createElement(DailyMotion, {
-          video: videoId,
-          opts: this.opts,
-          onPlay: this.onPlayCallback,
-          onPause: this.onPauseCallback,
-          onEnd: this.onEndCallback
-        });
+        return dailymotionIframe();
       } else return /*#__PURE__*/React.createElement("div", null);
     }
   }]);

package/dist/es/components/story-elements/youtube.js

@@ -17,7 +17,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import getYouTubeID from "get-youtube-id";
 import { bool, func, object } from "prop-types";
 import React from "react";
-import { getQliticsSchema } from "../../utils";
+import { disconnectObserver, getQliticsSchema, initiateNewObserver } from "../../utils";
 import { WithLazy } from "../with-lazy";
 var YouTube = null;
 var loaderPromise = null;
@@ -53,6 +53,16 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
+    _defineProperty(_assertThisInitialized(_this), "initiateObserver", function (targetElement) {
+      _this.removeObserverIfExists();
+
+      _this.intersectionObserver = new IntersectionObserver(_this.intersectionCallback, {
+        threshold: 0.75
+      });
+
+      _this.intersectionObserver.observe(targetElement);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "triggerQlitics", function (action) {
       if (_this.props.disableAnalytics === true) return false;
       var _this$props = _this.props,
@@ -82,12 +92,38 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
       _this.triggerQlitics("play");
 
       _this.props.onPlay === "function" && _this.props.onPlay(event);
+      _this.videoRef.current = event.target;
+
+      var targetElement = _this.videoRef.current.getIframe();
+
+      if (_this.intersectionObserver) {
+        _this.intersectionObserver.observe(targetElement);
+      } else {
+        _this.intersectionObserver = initiateNewObserver(targetElement, _this.intersectionCallback);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "intersectionCallback", function (entries) {
+      var videoInVewPort = entries === null || entries === void 0 ? void 0 : entries[0].isIntersecting;
+      var player = _this.videoRef.current;
+      if (videoInVewPort) player.playVideo();else {
+        _this.videoPausedByObserver.current = true; // before the below line fires the pause event we set the videoPausedByObserver Ref to true, this lets the pause events callback to know that the video is not click-paused by the user but paused by the intersection observer
+
+        player.pauseVideo();
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onPauseCallback", function (event) {
       _this.triggerQlitics("pause");
 
       _this.props.onPause === "function" && _this.props.onPause(event);
+      var videoPausedByObserver = _this.videoPausedByObserver.current;
+
+      if (videoPausedByObserver) {
+        _this.videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
+      } else {
+        disconnectObserver(_this.intersectionObserver);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onEndCallback", function (event) {
@@ -124,6 +160,9 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
         autoplay: 0
       }
     };
+    _this.videoRef = /*#__PURE__*/React.createRef();
+    _this.videoPausedByObserver = /*#__PURE__*/React.createRef(); // To check if the video is not click paused by user but paused by intersection observer, Its implemented this way because we cannot capture the click-pause event as videos are playing in iframe
+
     return _this;
   }
 
@@ -138,6 +177,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._isMounted = false;
+      disconnectObserver(this.intersectionObserver);
     }
   }, {
     key: "render",
@@ -151,7 +191,8 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
           onPlay: _this2.onPlayCallback,
           onPause: _this2.onPauseCallback,
           onEnd: _this2.onEndCallback,
-          onReady: _this2.onPlayerReady
+          onReady: _this2.onPlayerReady,
+          ref: _this2.videoRef
         });
       };
 
@@ -171,13 +212,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
           className: "youtube-iframe-wrapper"
         }, youtubeIframe()));
       } else if (!this.props.loadIframeOnClick && isLibraryLoaded()) {
-        return /*#__PURE__*/React.createElement(YouTube, {
-          videoId: getYouTubeID(this.props.element.url),
-          opts: this.opts,
-          onPlay: this.onPlayCallback,
-          onPause: this.onPauseCallback,
-          onEnd: this.onEndCallback
-        });
+        return /*#__PURE__*/React.createElement(React.Fragment, null, youtubeIframe());
       } else return /*#__PURE__*/React.createElement("div", null);
     }
   }]);

package/dist/es/utils.js

@@ -17,7 +17,7 @@ export function removeDuplicateStories(existingStories, newStories) {
 }
 export function getAssociatedTemplate(_ref) {
   var associatedMetadata = _ref["associated-metadata"];
-  return associatedMetadata ? associatedMetadata.layout : 'default';
+  return associatedMetadata ? associatedMetadata.layout : "default";
 } // FIXME: TEST THIS
 
 export function replaceAllStoriesInCollection(collection, story) {
@@ -61,12 +61,12 @@ export var getQliticsSchema = function getQliticsSchema() {
   }); //Display warning to make debugging easier
 
   return {
-    'story-content-id': story['story-content-id'],
-    'story-version-id': story['story-version-id'],
-    'card-content-id': card['content-id'],
-    'card-version-id': card['content-version-id'],
-    'story-element-id': element.id,
-    'story-element-type': element.subtype || element.type
+    "story-content-id": story["story-content-id"],
+    "story-version-id": story["story-version-id"],
+    "card-content-id": card["content-id"],
+    "card-version-id": card["content-version-id"],
+    "story-element-id": element.id,
+    "story-element-type": element.subtype || element.type
   };
 };
 export var computeAccess = function computeAccess(previousState, currentState) {
@@ -84,4 +84,14 @@ export var computeAccess = function computeAccess(previousState, currentState) {
   }
 
   return _objectSpread(_objectSpread({}, previousState), currentAccess);
-};
+};
+export function initiateNewObserver(targetElement, intersectionCallBack) {
+  var intersectionObserver = new IntersectionObserver(intersectionCallBack, {
+    threshold: 0.75
+  });
+  intersectionObserver.observe(targetElement);
+  return intersectionObserver;
+}
+export function disconnectObserver(observer) {
+  if (observer) observer.disconnect();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/components",
-  "version": "3.4.4-test-4.0",
+  "version": "3.4.4",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",