@quintype/components 3.4.4-debug.0 → 3.4.4-infiniteScroll-videos.2

package/dist/cjs/index.js

@@ -2381,6 +2381,23 @@ 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(null),
+      _useState8 = _slicedToArray__default["default"](_useState7, 2),
+      observer = _useState8[0],
+      setObserver = _useState8[1];
+
+  var _useState9 = React.useState(false),
+      _useState10 = _slicedToArray__default["default"](_useState9, 2),
+      thumbnailClicked = _useState10[0],
+      setThumbnailClicked = _useState10[1];
+
+  var videoRef = React.useRef();
+
   var loadLibrary = function loadLibrary() {
     var _window;
 
@@ -2404,11 +2421,34 @@ var BrightcoveElement = function BrightcoveElement(props) {
       loadLibrary();
     }
   }, [loadIframeOnClick]);
+  React.useEffect(function () {
+    if (!myPlayer) return;
+    myPlayer.on("play", startObserver);
+    if (thumbnailClicked) myPlayer.play();
+    return function () {
+      myPlayer && myPlayer.off("play");
+      observer && observer.disconnect();
+    };
+  }, [myPlayer, thumbnailClicked]);
+
+  function handleIntersection(entries) {
+    if (!(entries !== null && entries !== void 0 && entries[0])) return;
+    if (entries[0].isIntersecting) myPlayer.play();else myPlayer.pause();
+  }
+
+  function startObserver() {
+    var intersectionObserver = new IntersectionObserver(function (entries) {
+      return handleIntersection(entries);
+    }, {
+      threshold: 0.75
+    });
+    intersectionObserver.observe(videoRef.current);
+    setObserver(intersectionObserver);
+  }
 
   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 +2458,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");
@@ -2482,26 +2516,30 @@ var BrightcoveElement = function BrightcoveElement(props) {
     }
 
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "brightcove-wrapper"
+      className: "brightcove-wrapper",
+      ref: videoRef
     }, !showVideo && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
       className: "brightcove-playBtn",
       onClick: function onClick() {
-        return loadLibrary();
+        loadLibrary();
+        setThumbnailClicked(true);
       },
       "aria-label": "Play Video"
     }), posterImage ? /*#__PURE__*/React__default["default"].createElement("img", {
       className: "brightcove-poster",
       onClick: function onClick() {
-        return loadLibrary();
+        loadLibrary();
+        setThumbnailClicked(true);
       },
       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) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "brightcove-wrapper"
+      className: "brightcove-wrapper",
+      ref: videoRef
     }, brightcoveIframe());
   } else {
     return null;
@@ -2553,8 +2591,23 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onAdStart", function (event) {
+      _this.startObserver(event);
+    });
+
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onPlayCallback", function (event) {
       _this.props.onPlay === "function" && _this.props.onPlay(event);
+
+      if (!_this.state.observerInitialized) {
+        _this.startObserver(event);
+      }
+    });
+
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "handleIntersection", function (entries) {
+      var _this$videoRef;
+
+      if (!((_this$videoRef = _this.videoRef) !== null && _this$videoRef !== void 0 && _this$videoRef.current)) return;
+      if (entries !== null && entries !== void 0 && entries[0].isIntersecting) _this.videoRef.current.play();else _this.videoRef.current.pause();
     });
 
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onPauseCallback", function (event) {
@@ -2586,13 +2639,15 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
     });
 
     _this.state = {
-      showVideo: false
+      showVideo: false,
+      observerInitialized: false
     };
     _this.opts = {
       playerVars: {
         autoplay: 0
       }
     };
+    _this.videoRef = /*#__PURE__*/React__default["default"].createRef();
     return _this;
   }
 
@@ -2607,6 +2662,20 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._isMounted = false;
+
+      if (this.intersectionObserver) {
+        this.intersectionObserver.disconnect();
+      }
+    }
+  }, {
+    key: "startObserver",
+    value: function startObserver(event) {
+      this.videoRef.current = event.target;
+      this.intersectionObserver = new IntersectionObserver(this.handleIntersection, {
+        threshold: 0.75
+      });
+      this.intersectionObserver.observe(this.videoRef.current);
+      this.state.observerInitialized = true;
     }
   }, {
     key: "render",
@@ -2623,7 +2692,9 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
           onPlay: _this2.onPlayCallback,
           onPause: _this2.onPauseCallback,
           onEnd: _this2.onEndCallback,
-          autoplay: true
+          onAdStart: _this2.onAdStart,
+          autoplay: true,
+          ref: _this2.videoRef
         });
       };
 
@@ -2648,7 +2719,10 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
           opts: this.opts,
           onPlay: this.onPlayCallback,
           onPause: this.onPauseCallback,
-          onEnd: this.onEndCallback
+          onEnd: this.onEndCallback,
+          onAdStart: this.onAdStart,
+          autoplay: false,
+          ref: this.videoRef
         });
       } else return /*#__PURE__*/React__default["default"].createElement("div", null);
     }
@@ -2689,6 +2763,10 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
       });
     });
 
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "handleIntersection", function (entries) {
+      if (entries !== null && entries !== void 0 && entries[0].isIntersecting) _this.state.dmPlayer.play();else _this.state.dmPlayer.pause();
+    });
+
     _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"],
@@ -2698,11 +2776,31 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
       script.dataset.video = videoId;
 
       _this.containerRef.current.appendChild(script);
+
+      script.onload = function () {
+        _this.setState({
+          scriptLoaded: true
+        });
+
+        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.state = {
-      showVideo: false
+      showVideo: false,
+      scriptLoaded: false,
+      dmPlayer: null
     };
     return _this;
   }
@@ -2714,6 +2812,31 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
         this.addScript();
       }
     }
+  }, {
+    key: "startObserver",
+    value: function startObserver() {
+      this.intersectionObserver = new IntersectionObserver(this.handleIntersection, {
+        threshold: 0.75
+      });
+      this.intersectionObserver.observe(this.observerRef.current);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _this2 = this;
+
+      if (!this.observerRef.current) return;
+      if (!this.state.dmPlayer) return;
+      if (!this.state.scriptLoaded) return;
+      this.state.dmPlayer.on("start", function () {
+        return _this2.startObserver();
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.observerRef.current) this.intersectionObserver.disconnect();
+    }
   }, {
     key: "render",
     value: function render() {
@@ -2732,14 +2855,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)
+        }));
       }
     }
   }]);
@@ -3104,6 +3233,19 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onPlayerReady", function (event) {
       event.target.setVolume(100);
       event.target.playVideo();
+      _this.videoRef.current = event.target;
+      _this.intersectionObserver = new IntersectionObserver(_this.handleIntersection, {
+        threshold: 0.75
+      });
+
+      _this.intersectionObserver.observe(_this.videoRef.current.getIframe());
+    });
+
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "handleIntersection", function (entries) {
+      var _this$videoRef;
+
+      if (!((_this$videoRef = _this.videoRef) !== null && _this$videoRef !== void 0 && _this$videoRef.current)) return;
+      if (entries !== null && entries !== void 0 && entries[0].isIntersecting) _this.videoRef.current.playVideo();else _this.videoRef.current.pauseVideo();
     });
 
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "renderVideo", function () {
@@ -3122,6 +3264,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
         autoplay: 0
       }
     };
+    _this.videoRef = /*#__PURE__*/React__default["default"].createRef();
     return _this;
   }
 
@@ -3136,6 +3279,10 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._isMounted = false;
+
+      if (this.intersectionObserver) {
+        this.intersectionObserver.disconnect();
+      }
     }
   }, {
     key: "render",
@@ -3149,7 +3296,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
         });
       };
 
@@ -3174,7 +3322,8 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
           opts: this.opts,
           onPlay: this.onPlayCallback,
           onPause: this.onPauseCallback,
-          onEnd: this.onEndCallback
+          onEnd: this.onEndCallback,
+          ref: this.videoRef
         });
       } else return /*#__PURE__*/React__default["default"].createElement("div", null);
     }
@@ -5163,11 +5312,10 @@ var AccessTypeBase = /*#__PURE__*/function (_React$Component) {
 
             case 3:
               jwtResponse = _context8.sent;
-              console.log("\n\n*** jwtResponse >> ", jwtResponse, "\n\n");
-              _context8.next = 7;
+              _context8.next = 6;
               return awaitHelper(_this.setUser(_this.props.email, _this.props.phone, jwtResponse.headers.get("x-integration-token"), !!jwtResponse.headers.get("x-integration-token")));
 
-            case 7:
+            case 6:
               _yield$awaitHelper7 = _context8.sent;
               error = _yield$awaitHelper7.error;
 
@@ -5196,7 +5344,7 @@ var AccessTypeBase = /*#__PURE__*/function (_React$Component) {
                 }
               }
 
-            case 10:
+            case 9:
             case "end":
               return _context8.stop();
           }

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

@@ -433,11 +433,10 @@ var AccessTypeBase = /*#__PURE__*/function (_React$Component) {
 
             case 3:
               jwtResponse = _context8.sent;
-              console.log("\n\n*** jwtResponse >> ", jwtResponse, "\n\n");
-              _context8.next = 7;
+              _context8.next = 6;
               return awaitHelper(_this.setUser(_this.props.email, _this.props.phone, jwtResponse.headers.get("x-integration-token"), !!jwtResponse.headers.get("x-integration-token")));
 
-            case 7:
+            case 6:
               _yield$awaitHelper7 = _context8.sent;
               error = _yield$awaitHelper7.error;
 
@@ -466,7 +465,7 @@ var AccessTypeBase = /*#__PURE__*/function (_React$Component) {
                 }
               }
 
-            case 10:
+            case 9:
             case "end":
               return _context8.stop();
           }

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

@@ -3,7 +3,7 @@ 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 { WithLazy } from "../with-lazy";
 
 var BrightcoveElement = function BrightcoveElement(props) {
@@ -30,6 +30,23 @@ 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(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      observer = _useState8[0],
+      setObserver = _useState8[1];
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      thumbnailClicked = _useState10[0],
+      setThumbnailClicked = _useState10[1];
+
+  var videoRef = useRef();
+
   var loadLibrary = function loadLibrary() {
     var _window;
 
@@ -53,11 +70,34 @@ var BrightcoveElement = function BrightcoveElement(props) {
       loadLibrary();
     }
   }, [loadIframeOnClick]);
+  useEffect(function () {
+    if (!myPlayer) return;
+    myPlayer.on("play", startObserver);
+    if (thumbnailClicked) myPlayer.play();
+    return function () {
+      myPlayer && myPlayer.off("play");
+      observer && observer.disconnect();
+    };
+  }, [myPlayer, thumbnailClicked]);
+
+  function handleIntersection(entries) {
+    if (!(entries !== null && entries !== void 0 && entries[0])) return;
+    if (entries[0].isIntersecting) myPlayer.play();else myPlayer.pause();
+  }
+
+  function startObserver() {
+    var intersectionObserver = new IntersectionObserver(function (entries) {
+      return handleIntersection(entries);
+    }, {
+      threshold: 0.75
+    });
+    intersectionObserver.observe(videoRef.current);
+    setObserver(intersectionObserver);
+  }
 
   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 +107,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");
@@ -131,17 +165,20 @@ var BrightcoveElement = function BrightcoveElement(props) {
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: "brightcove-wrapper"
+      className: "brightcove-wrapper",
+      ref: videoRef
     }, !showVideo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
       className: "brightcove-playBtn",
       onClick: function onClick() {
-        return loadLibrary();
+        loadLibrary();
+        setThumbnailClicked(true);
       },
       "aria-label": "Play Video"
     }), posterImage ? /*#__PURE__*/React.createElement("img", {
       className: "brightcove-poster",
       onClick: function onClick() {
-        return loadLibrary();
+        loadLibrary();
+        setThumbnailClicked(true);
       },
       src: posterImage,
       alt: "video"
@@ -150,7 +187,8 @@ var BrightcoveElement = function BrightcoveElement(props) {
     })), showVideo && ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.BrightcovePlayerLoader) && brightcoveIframe(true));
   } else if (!loadIframeOnClick && (_window4 = window) !== null && _window4 !== void 0 && _window4.BrightcovePlayerLoader) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "brightcove-wrapper"
+      className: "brightcove-wrapper",
+      ref: videoRef
     }, brightcoveIframe());
   } else {
     return null;

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

@@ -33,6 +33,10 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleIntersection", function (entries) {
+      if (entries !== null && entries !== void 0 && entries[0].isIntersecting) _this.state.dmPlayer.play();else _this.state.dmPlayer.pause();
+    });
+
     _defineProperty(_assertThisInitialized(_this), "addScript", function () {
       var _this$props$element$m = _this.props.element.metadata,
           videoId = _this$props$element$m["video-id"],
@@ -42,11 +46,31 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
       script.dataset.video = videoId;
 
       _this.containerRef.current.appendChild(script);
+
+      script.onload = function () {
+        _this.setState({
+          scriptLoaded: true
+        });
+
+        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.state = {
-      showVideo: false
+      showVideo: false,
+      scriptLoaded: false,
+      dmPlayer: null
     };
     return _this;
   }
@@ -58,6 +82,31 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
         this.addScript();
       }
     }
+  }, {
+    key: "startObserver",
+    value: function startObserver() {
+      this.intersectionObserver = new IntersectionObserver(this.handleIntersection, {
+        threshold: 0.75
+      });
+      this.intersectionObserver.observe(this.observerRef.current);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _this2 = this;
+
+      if (!this.observerRef.current) return;
+      if (!this.state.dmPlayer) return;
+      if (!this.state.scriptLoaded) return;
+      this.state.dmPlayer.on("start", function () {
+        return _this2.startObserver();
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.observerRef.current) this.intersectionObserver.disconnect();
+    }
   }, {
     key: "render",
     value: function render() {
@@ -76,14 +125,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

@@ -48,8 +48,23 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
+    _defineProperty(_assertThisInitialized(_this), "onAdStart", function (event) {
+      _this.startObserver(event);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onPlayCallback", function (event) {
       _this.props.onPlay === "function" && _this.props.onPlay(event);
+
+      if (!_this.state.observerInitialized) {
+        _this.startObserver(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleIntersection", function (entries) {
+      var _this$videoRef;
+
+      if (!((_this$videoRef = _this.videoRef) !== null && _this$videoRef !== void 0 && _this$videoRef.current)) return;
+      if (entries !== null && entries !== void 0 && entries[0].isIntersecting) _this.videoRef.current.play();else _this.videoRef.current.pause();
     });
 
     _defineProperty(_assertThisInitialized(_this), "onPauseCallback", function (event) {
@@ -81,13 +96,15 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
     });
 
     _this.state = {
-      showVideo: false
+      showVideo: false,
+      observerInitialized: false
     };
     _this.opts = {
       playerVars: {
         autoplay: 0
       }
     };
+    _this.videoRef = /*#__PURE__*/React.createRef();
     return _this;
   }
 
@@ -102,6 +119,20 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._isMounted = false;
+
+      if (this.intersectionObserver) {
+        this.intersectionObserver.disconnect();
+      }
+    }
+  }, {
+    key: "startObserver",
+    value: function startObserver(event) {
+      this.videoRef.current = event.target;
+      this.intersectionObserver = new IntersectionObserver(this.handleIntersection, {
+        threshold: 0.75
+      });
+      this.intersectionObserver.observe(this.videoRef.current);
+      this.state.observerInitialized = true;
     }
   }, {
     key: "render",
@@ -118,7 +149,9 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
           onPlay: _this2.onPlayCallback,
           onPause: _this2.onPauseCallback,
           onEnd: _this2.onEndCallback,
-          autoplay: true
+          onAdStart: _this2.onAdStart,
+          autoplay: true,
+          ref: _this2.videoRef
         });
       };
 
@@ -143,7 +176,10 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
           opts: this.opts,
           onPlay: this.onPlayCallback,
           onPause: this.onPauseCallback,
-          onEnd: this.onEndCallback
+          onEnd: this.onEndCallback,
+          onAdStart: this.onAdStart,
+          autoplay: false,
+          ref: this.videoRef
         });
       } else return /*#__PURE__*/React.createElement("div", null);
     }

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

@@ -106,6 +106,19 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onPlayerReady", function (event) {
       event.target.setVolume(100);
       event.target.playVideo();
+      _this.videoRef.current = event.target;
+      _this.intersectionObserver = new IntersectionObserver(_this.handleIntersection, {
+        threshold: 0.75
+      });
+
+      _this.intersectionObserver.observe(_this.videoRef.current.getIframe());
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleIntersection", function (entries) {
+      var _this$videoRef;
+
+      if (!((_this$videoRef = _this.videoRef) !== null && _this$videoRef !== void 0 && _this$videoRef.current)) return;
+      if (entries !== null && entries !== void 0 && entries[0].isIntersecting) _this.videoRef.current.playVideo();else _this.videoRef.current.pauseVideo();
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderVideo", function () {
@@ -124,6 +137,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
         autoplay: 0
       }
     };
+    _this.videoRef = /*#__PURE__*/React.createRef();
     return _this;
   }
 
@@ -138,6 +152,10 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._isMounted = false;
+
+      if (this.intersectionObserver) {
+        this.intersectionObserver.disconnect();
+      }
     }
   }, {
     key: "render",
@@ -151,7 +169,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
         });
       };
 
@@ -176,7 +195,8 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
           opts: this.opts,
           onPlay: this.onPlayCallback,
           onPause: this.onPauseCallback,
-          onEnd: this.onEndCallback
+          onEnd: this.onEndCallback,
+          ref: this.videoRef
         });
       } else return /*#__PURE__*/React.createElement("div", null);
     }

package/package.json

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