@quintype/components 3.4.3 → 3.4.4-infiniteScroll-videos.1

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);
     }
@@ -3104,6 +3178,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 +3209,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
         autoplay: 0
       }
     };
+    _this.videoRef = /*#__PURE__*/React__default["default"].createRef();
     return _this;
   }
 
@@ -3136,6 +3224,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 +3241,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 +3267,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);
     }

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.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.3",
+  "version": "3.4.4-infiniteScroll-videos.1",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",