@quintype/components 3.4.4-infiniteScroll-videos.5 → 3.4.4

package/dist/cjs/index.js

@@ -2402,8 +2402,9 @@ var BrightcoveElement = function BrightcoveElement(props) {
       setThumbnailClicked = _useState8[1];
 
   var videoRef = React.useRef();
-  var videoPausedByObserver = React.useRef();
-  var observerRef = 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;
@@ -2443,7 +2444,8 @@ var BrightcoveElement = function BrightcoveElement(props) {
   function intersectionCallback(entries) {
     var videoInViewPort = entries === null || entries === void 0 ? void 0 : entries[0].isIntersecting;
     if (videoInViewPort) myPlayer.play();else {
-      videoPausedByObserver.current = true;
+      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();
     }
   }
@@ -2465,7 +2467,7 @@ var BrightcoveElement = function BrightcoveElement(props) {
     var isVideoPausedByObserver = videoPausedByObserver.current;
 
     if (isVideoPausedByObserver) {
-      videoPausedByObserver.current = false;
+      videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
     } else {
       disconnectObserver(observer);
     }
@@ -2654,7 +2656,7 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
       var videoPausedByObserver = _this.videoPausedByObserver.current;
 
       if (videoPausedByObserver) {
-        _this.videoPausedByObserver.current = false;
+        _this.videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
       } else {
         disconnectObserver(_this.intersectionObserver);
       }
@@ -2664,7 +2666,8 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
       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;
+        _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();
       }
     });
@@ -2707,7 +2710,8 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
       }
     };
     _this.videoRef = /*#__PURE__*/React__default["default"].createRef();
-    _this.videoPausedByObserver = /*#__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;
   }
 
@@ -2809,7 +2813,8 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
       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;
+        _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();
       }
     });
@@ -2828,7 +2833,7 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
       var isVideoPausedByObserver = _this.videoPausedByObserver.current;
 
       if (isVideoPausedByObserver) {
-        _this.videoPausedByObserver.current = false;
+        _this.videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
       } else {
         disconnectObserver(_this.intersectionObserver);
       }
@@ -2860,7 +2865,8 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
 
     _this.containerRef = /*#__PURE__*/React__default["default"].createRef();
     _this.observerRef = /*#__PURE__*/React__default["default"].createRef();
-    _this.videoPausedByObserver = /*#__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,
       dmPlayer: null
@@ -3288,7 +3294,8 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
       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;
+        _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();
       }
     });
@@ -3300,7 +3307,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
       var videoPausedByObserver = _this.videoPausedByObserver.current;
 
       if (videoPausedByObserver) {
-        _this.videoPausedByObserver.current = false;
+        _this.videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
       } else {
         disconnectObserver(_this.intersectionObserver);
       }
@@ -3341,7 +3348,8 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
       }
     };
     _this.videoRef = /*#__PURE__*/React__default["default"].createRef();
-    _this.videoPausedByObserver = /*#__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;
   }
 

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

@@ -42,8 +42,9 @@ var BrightcoveElement = function BrightcoveElement(props) {
       setThumbnailClicked = _useState8[1];
 
   var videoRef = useRef();
-  var videoPausedByObserver = useRef();
-  var observerRef = 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;
@@ -83,7 +84,8 @@ var BrightcoveElement = function BrightcoveElement(props) {
   function intersectionCallback(entries) {
     var videoInViewPort = entries === null || entries === void 0 ? void 0 : entries[0].isIntersecting;
     if (videoInViewPort) myPlayer.play();else {
-      videoPausedByObserver.current = true;
+      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();
     }
   }
@@ -105,7 +107,7 @@ var BrightcoveElement = function BrightcoveElement(props) {
     var isVideoPausedByObserver = videoPausedByObserver.current;
 
     if (isVideoPausedByObserver) {
-      videoPausedByObserver.current = false;
+      videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
     } else {
       disconnectObserver(observer);
     }

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

@@ -38,7 +38,8 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
       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;
+        _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();
       }
     });
@@ -57,7 +58,7 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
       var isVideoPausedByObserver = _this.videoPausedByObserver.current;
 
       if (isVideoPausedByObserver) {
-        _this.videoPausedByObserver.current = false;
+        _this.videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
       } else {
         disconnectObserver(_this.intersectionObserver);
       }
@@ -89,7 +90,8 @@ var DailyMotion = /*#__PURE__*/function (_React$Component) {
 
     _this.containerRef = /*#__PURE__*/React.createRef();
     _this.observerRef = /*#__PURE__*/React.createRef();
-    _this.videoPausedByObserver = /*#__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,
       dmPlayer: null

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

@@ -76,7 +76,7 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
       var videoPausedByObserver = _this.videoPausedByObserver.current;
 
       if (videoPausedByObserver) {
-        _this.videoPausedByObserver.current = false;
+        _this.videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
       } else {
         disconnectObserver(_this.intersectionObserver);
       }
@@ -86,7 +86,8 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
       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;
+        _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();
       }
     });
@@ -129,7 +130,8 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
       }
     };
     _this.videoRef = /*#__PURE__*/React.createRef();
-    _this.videoPausedByObserver = /*#__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;
   }
 

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

@@ -107,7 +107,8 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
       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;
+        _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();
       }
     });
@@ -119,7 +120,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
       var videoPausedByObserver = _this.videoPausedByObserver.current;
 
       if (videoPausedByObserver) {
-        _this.videoPausedByObserver.current = false;
+        _this.videoPausedByObserver.current = false; // This is a clean up to set videoPausedByObserver back to false
       } else {
         disconnectObserver(_this.intersectionObserver);
       }
@@ -160,7 +161,8 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
       }
     };
     _this.videoRef = /*#__PURE__*/React.createRef();
-    _this.videoPausedByObserver = /*#__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;
   }
 

package/package.json

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