@quintype/components 2.31.4-lazy-iframe.5 → 2.31.4-lazy-load.2

package/dist/cjs/index.js

@@ -46,7 +46,7 @@ var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
 var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
 var classNames = _interopDefault(require('classnames'));
 var getVideoID = _interopDefault(require('get-video-id'));
-require('atob');
+var atob = _interopDefault(require('atob'));
 var getYouTubeID = _interopDefault(require('get-youtube-id'));
 var _asyncToGenerator = _interopDefault(require('@babel/runtime/helpers/asyncToGenerator'));
 var _regeneratorRuntime = _interopDefault(require('@babel/runtime/regenerator'));
@@ -2441,7 +2441,8 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
           opts: _this2.opts,
           onPlay: _this2.onPlayCallback,
           onPause: _this2.onPauseCallback,
-          onEnd: _this2.onEndCallback
+          onEnd: _this2.onEndCallback,
+          autoplay: true
         });
       };
 
@@ -2483,29 +2484,99 @@ var StoryElementDailyMotion = function StoryElementDailyMotion(props) {
   });
 };
 
-var JSEmbed = function JSEmbed(props) {
-  console.log("###props", props);
-  return (
-    /*#__PURE__*/
-    // <WithLazy margin="0px">
-    //   {() => {
-    //     console.log("###lazy loading");
-    //     return <CustomJSEmbed {...props} />;
-    //   }}
-    // </WithLazy>
-    React__default.createElement("div", null, "Lazy")
-  );
-};
-
 function _createSuper$f(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$f(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct$f() { 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; } }
+
+function cloneScriptNode(node) {
+  var script = document.createElement("script");
+  script.text = node.innerHTML;
+
+  for (var i = node.attributes.length - 1; i >= 0; i--) {
+    script.setAttribute(node.attributes[i].name, node.attributes[i].value);
+  }
+
+  return script;
+}
+
+function replaceScriptNodes(node) {
+  if (node.tagName === "SCRIPT") {
+    node.parentNode.replaceChild(cloneScriptNode(node), node);
+    if (window.instgrm) window.instgrm.Embeds.process(); // Temporary fix for instagram element on live blog page.
+  } else {
+    var i = 0;
+    var children = node.childNodes;
+
+    while (i < children.length) {
+      replaceScriptNodes(children[i++]);
+    }
+  }
+}
+
+var CustomJSEmbed = /*#__PURE__*/function (_React$Component) {
+  _inherits(CustomJSEmbed, _React$Component);
+
+  var _super = /*#__PURE__*/_createSuper$f(CustomJSEmbed);
+
+  function CustomJSEmbed(props) {
+    var _this;
+
+    _classCallCheck(this, CustomJSEmbed);
+
+    _this = _super.call(this, props);
+    _this.uniqueId = "anagh";
+    return _this;
+  }
+
+  _createClass(CustomJSEmbed, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      return !(this.props.id === nextProps.id && this.props.embedJS === nextProps.embedJS);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      replaceScriptNodes(this.JSEmbed);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      replaceScriptNodes(this.JSEmbed);
+    }
+  }, {
+    key: "getEmbedJS",
+    value: function getEmbedJS() {
+      var embedjs = this.props.embedJS;
+      return embedjs != null ? atob(embedjs) : null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/React__default.createElement("div", {
+        ref: function ref(jsembed) {
+          _this2.JSEmbed = jsembed;
+        },
+        dangerouslySetInnerHTML: {
+          __html: this.getEmbedJS()
+        }
+      });
+    }
+  }]);
+
+  return CustomJSEmbed;
+}(React__default.Component);
+
+function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct$g() { 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; } }
 var defaultPolltypeHost = 'https://www.polltype.com';
 
 var PolltypeBase = /*#__PURE__*/function (_React$Component) {
   _inherits(PolltypeBase, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$f(PolltypeBase);
+  var _super = /*#__PURE__*/_createSuper$g(PolltypeBase);
 
   function PolltypeBase() {
     _classCallCheck(this, PolltypeBase);
@@ -2551,9 +2622,9 @@ function mapStateToProps$7(state) {
 
 var Polltype = /*#__PURE__*/reactRedux.connect(mapStateToProps$7, {})(PolltypeBase);
 
-function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper$h(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$h(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct$g() { 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; } }
+function _isNativeReflectConstruct$h() { 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; } }
 
 function TableHeader(columns) {
   return /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, columns.map(function (col) {
@@ -2577,7 +2648,7 @@ function TableView(_ref) {
 var Table = /*#__PURE__*/function (_React$Component) {
   _inherits(Table, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$g(Table);
+  var _super = /*#__PURE__*/_createSuper$h(Table);
 
   function Table(props) {
     var _this;
@@ -2665,9 +2736,9 @@ function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if
 
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _createSuper$h(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$h(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper$i(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$i(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct$h() { 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; } }
+function _isNativeReflectConstruct$i() { 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; } }
 var YouTube = null;
 var loaderPromise$1 = null;
 
@@ -2693,7 +2764,7 @@ function isLibraryLoaded$1() {
 var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
   _inherits(CustomStoryElementYoutube, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$h(CustomStoryElementYoutube);
+  var _super = /*#__PURE__*/_createSuper$i(CustomStoryElementYoutube);
 
   function CustomStoryElementYoutube(props) {
     var _this;
@@ -2807,7 +2878,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
       if (this.props.loadIframeOnClick) {
         return /*#__PURE__*/React__default.createElement("div", {
           className: "thumbnail-wrapper"
-        }, !this.state.showVideo && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
+        }, /*#__PURE__*/React__default.createElement("button", {
           className: "youtube-playBtn",
           onClick: this.renderVideo,
           "aria-label": "Play Video"
@@ -2816,7 +2887,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
           onClick: this.renderVideo,
           src: "https://img.youtube.com/vi/".concat(getYouTubeID(this.props.element.url), "/sddefault.jpg"),
           alt: "video"
-        })), this.state.showVideo && isLibraryLoaded$1() && /*#__PURE__*/React__default.createElement("div", {
+        }), this.state.showVideo && isLibraryLoaded$1() && /*#__PURE__*/React__default.createElement("div", {
           className: "youtube-iframe-wrapper"
         }, youtubeIframe()));
       } else if (!this.props.loadIframeOnClick && isLibraryLoaded$1()) {
@@ -2846,9 +2917,9 @@ function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if
 
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _createSuper$i(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$i(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper$j(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$j(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct$i() { 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; } }
+function _isNativeReflectConstruct$j() { 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; } }
 /**
  * This component renders different types of [story elements](https://developers.quintype.com/malibu/terminology#story-elements)
 
@@ -2878,7 +2949,7 @@ function _isNativeReflectConstruct$i() { if (typeof Reflect === "undefined" || !
 var StoryElement = /*#__PURE__*/function (_React$Component) {
   _inherits(StoryElement, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$i(StoryElement);
+  var _super = /*#__PURE__*/_createSuper$j(StoryElement);
 
   function StoryElement(props) {
     var _this;
@@ -3000,12 +3071,10 @@ function StoryElementSoundCloud(_ref5) {
 }
 
 function StoryElementJsembed(_ref6) {
-  var element = _ref6.element,
-      loadEmbed = _ref6.loadEmbed;
-  return /*#__PURE__*/React__default.createElement(JSEmbed, {
+  var element = _ref6.element;
+  return /*#__PURE__*/React__default.createElement(CustomJSEmbed, {
     embedJS: element["embed-js"],
-    id: element["id"],
-    loadEmbed: loadEmbed
+    id: element["id"]
   });
 }
 
@@ -3042,8 +3111,8 @@ var DEFAULT_TEMPLATES = {
   text: StoryElementText,
   image: StoryElementImage,
   title: StoryElementTitle,
-  "youtube-video": StoryElementYoutube,
   "dailymotion-video": StoryElementDailyMotion,
+  "youtube-video": StoryElementYoutube,
   "soundcloud-audio": StoryElementSoundCloud,
   jsembed: StoryElementJsembed,
   polltype: StoryElementPolltype,
@@ -3055,7 +3124,7 @@ var DEFAULT_TEMPLATES = {
 var StoryElementBase = /*#__PURE__*/function (_React$Component2) {
   _inherits(StoryElementBase, _React$Component2);
 
-  var _super2 = /*#__PURE__*/_createSuper$i(StoryElementBase);
+  var _super2 = /*#__PURE__*/_createSuper$j(StoryElementBase);
 
   function StoryElementBase(props) {
     var _this2;
@@ -3169,9 +3238,9 @@ var StoryElementBase = /*#__PURE__*/function (_React$Component2) {
 
 var STORY_ELEMENT_TEMPLATES = DEFAULT_TEMPLATES;
 
-function _createSuper$j(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$j(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper$k(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$k(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct$j() { 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; } }
+function _isNativeReflectConstruct$k() { 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; } }
 
 function getNativeShareHandler(canNativeShare, title, fullUrl) {
   if (!canNativeShare) {
@@ -3189,7 +3258,7 @@ function getNativeShareHandler(canNativeShare, title, fullUrl) {
 var SocialShareBase = /*#__PURE__*/function (_React$Component) {
   _inherits(SocialShareBase, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$j(SocialShareBase);
+  var _super = /*#__PURE__*/_createSuper$k(SocialShareBase);
 
   function SocialShareBase(props) {
     var _this;
@@ -3655,15 +3724,15 @@ LoadMoreButton.defaultProps = {
   text: 'Load more'
 };
 
-function _createSuper$k(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$k(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper$l(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$l(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct$k() { 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; } }
+function _isNativeReflectConstruct$l() { 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; } }
 var loadedMember = false;
 
 var WithMemberBase = /*#__PURE__*/function (_React$Component) {
   _inherits(WithMemberBase, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$k(WithMemberBase);
+  var _super = /*#__PURE__*/_createSuper$l(WithMemberBase);
 
   function WithMemberBase(props) {
     var _this;
@@ -3792,9 +3861,9 @@ function mapDispatchToProps$6(dispatch, ownProps) {
 
 var WithMember = /*#__PURE__*/reactRedux.connect(mapStateToProps$9, mapDispatchToProps$6)(WithMemberBase);
 
-function _createSuper$l(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$l(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper$m(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$m(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct$l() { 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; } }
+function _isNativeReflectConstruct$m() { 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; } }
 /**
  * This higher order function can be used for the home or story page preview. It takes a component, and a function to map the story into props suitable for the component
  * 
@@ -3828,7 +3897,7 @@ function WithPreview(klazz, updateData) {
   return /*#__PURE__*/function (_React$Component) {
     _inherits(WithPreviewWrapper, _React$Component);
 
-    var _super = _createSuper$l(WithPreviewWrapper);
+    var _super = _createSuper$m(WithPreviewWrapper);
 
     function WithPreviewWrapper(props) {
       var _this;
@@ -3876,9 +3945,9 @@ function WithPreview(klazz, updateData) {
   }(React__default.Component);
 }
 
-function _createSuper$m(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$m(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper$n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$n(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct$m() { 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; } }
+function _isNativeReflectConstruct$n() { 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; } }
 /**
  * This is an abstract render props component for logging in with social accounts. The component adds two items to scope: `serverSideLoginPath` for redirecting to server side, and `login` for doing a client side login. Calling `login()` returns a promise which can be used to handle success and failure cases.
  *
@@ -3930,7 +3999,7 @@ function _isNativeReflectConstruct$m() { if (typeof Reflect === "undefined" || !
 var WithSocialLogin = /*#__PURE__*/function (_React$Component) {
   _inherits(WithSocialLogin, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$m(WithSocialLogin);
+  var _super = /*#__PURE__*/_createSuper$n(WithSocialLogin);
 
   function WithSocialLogin(props) {
     var _this;
@@ -4255,9 +4324,9 @@ var loginWithLinkedIn = function loginWithLinkedIn(_ref2) {
   });
 };
 
-function _createSuper$n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$n(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper$o(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$o(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct$n() { 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; } }
+function _isNativeReflectConstruct$o() { 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; } }
 /**
  * This render props component willupdate it's children via props while executing data loaders sent as props to the component.
  *
@@ -4289,7 +4358,7 @@ function _isNativeReflectConstruct$n() { if (typeof Reflect === "undefined" || !
 var UpdateOnInterval = /*#__PURE__*/function (_React$Component) {
   _inherits(UpdateOnInterval, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$n(UpdateOnInterval);
+  var _super = /*#__PURE__*/_createSuper$o(UpdateOnInterval);
 
   function UpdateOnInterval(props) {
     var _this;
@@ -4395,14 +4464,14 @@ function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if
 
 function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _createSuper$o(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$o(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper$p(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$p(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct$o() { 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; } }
+function _isNativeReflectConstruct$p() { 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; } }
 
 var AccessTypeBase = /*#__PURE__*/function (_React$Component) {
   _inherits(AccessTypeBase, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$o(AccessTypeBase);
+  var _super = /*#__PURE__*/_createSuper$p(AccessTypeBase);
 
   function AccessTypeBase(props) {
     var _this;

package/dist/es/components/story-element.js

@@ -177,12 +177,10 @@ function StoryElementSoundCloud(_ref5) {
 }
 
 function StoryElementJsembed(_ref6) {
-  var element = _ref6.element,
-      loadEmbed = _ref6.loadEmbed;
+  var element = _ref6.element;
   return /*#__PURE__*/React.createElement(JSEmbed, {
     embedJS: element["embed-js"],
-    id: element["id"],
-    loadEmbed: loadEmbed
+    id: element["id"]
   });
 }
 
@@ -219,8 +217,8 @@ var DEFAULT_TEMPLATES = {
   text: StoryElementText,
   image: StoryElementImage,
   title: StoryElementTitle,
-  "youtube-video": StoryElementYoutube,
   "dailymotion-video": StoryElementDailyMotion,
+  "youtube-video": StoryElementYoutube,
   "soundcloud-audio": StoryElementSoundCloud,
   jsembed: StoryElementJsembed,
   polltype: StoryElementPolltype,

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

@@ -117,7 +117,8 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
           opts: _this2.opts,
           onPlay: _this2.onPlayCallback,
           onPause: _this2.onPauseCallback,
-          onEnd: _this2.onEndCallback
+          onEnd: _this2.onEndCallback,
+          autoplay: true
         });
       };
 

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

@@ -1,8 +1,18 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+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 atob from "atob";
-import React, { useEffect, useState } from "react";
+import { PropTypes } from "prop-types";
+import React from "react";
 
-var cloneScriptNode = function cloneScriptNode(node) {
+function cloneScriptNode(node) {
   var script = document.createElement("script");
   script.text = node.innerHTML;
 
@@ -11,9 +21,9 @@ var cloneScriptNode = function cloneScriptNode(node) {
   }
 
   return script;
-};
+}
 
-var replaceScriptNodes = function replaceScriptNodes(node) {
+function replaceScriptNodes(node) {
   if (node.tagName === "SCRIPT") {
     node.parentNode.replaceChild(cloneScriptNode(node), node);
     if (window.instgrm) window.instgrm.Embeds.process(); // Temporary fix for instagram element on live blog page.
@@ -25,49 +35,61 @@ var replaceScriptNodes = function replaceScriptNodes(node) {
       replaceScriptNodes(children[i++]);
     }
   }
-};
-
-var CustomJSEmbed = function CustomJSEmbed(props) {
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      JSEmbed = _useState2[0],
-      setJSEmbed = _useState2[1];
-
-  useEffect(function () {
-    JSEmbed && replaceScriptNodes(JSEmbed);
-  }, []);
-  useEffect(function () {
-    JSEmbed && replaceScriptNodes(JSEmbed);
-  }, [JSEmbed]);
-
-  var getEmbedJS = function getEmbedJS() {
-    var embedjs = props.embedJS;
-    var embed = embedjs != null ? atob(embedjs) : null;
-    return embed;
-  };
-
-  return /*#__PURE__*/React.createElement("div", {
-    ref: function ref(jsembed) {
-      setJSEmbed(jsembed);
-    },
-    dangerouslySetInnerHTML: {
-      __html: getEmbedJS()
+}
+
+var CustomJSEmbed = /*#__PURE__*/function (_React$Component) {
+  _inherits(CustomJSEmbed, _React$Component);
+
+  var _super = /*#__PURE__*/_createSuper(CustomJSEmbed);
+
+  function CustomJSEmbed(props) {
+    var _this;
+
+    _classCallCheck(this, CustomJSEmbed);
+
+    _this = _super.call(this, props);
+    _this.uniqueId = "anagh";
+    return _this;
+  }
+
+  _createClass(CustomJSEmbed, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      return !(this.props.id === nextProps.id && this.props.embedJS === nextProps.embedJS);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      replaceScriptNodes(this.JSEmbed);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      replaceScriptNodes(this.JSEmbed);
+    }
+  }, {
+    key: "getEmbedJS",
+    value: function getEmbedJS() {
+      var embedjs = this.props.embedJS;
+      return embedjs != null ? atob(embedjs) : null;
     }
-  });
-};
-
-var JSEmbed = function JSEmbed(props) {
-  console.log("###props", props);
-  return (
-    /*#__PURE__*/
-    // <WithLazy margin="0px">
-    //   {() => {
-    //     console.log("###lazy loading");
-    //     return <CustomJSEmbed {...props} />;
-    //   }}
-    // </WithLazy>
-    React.createElement("div", null, "Lazy")
-  );
-};
-
-export default JSEmbed;
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/React.createElement("div", {
+        ref: function ref(jsembed) {
+          _this2.JSEmbed = jsembed;
+        },
+        dangerouslySetInnerHTML: {
+          __html: this.getEmbedJS()
+        }
+      });
+    }
+  }]);
+
+  return CustomJSEmbed;
+}(React.Component);
+
+export { CustomJSEmbed as default };

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

@@ -158,7 +158,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
       if (this.props.loadIframeOnClick) {
         return /*#__PURE__*/React.createElement("div", {
           className: "thumbnail-wrapper"
-        }, !this.state.showVideo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+        }, /*#__PURE__*/React.createElement("button", {
           className: "youtube-playBtn",
           onClick: this.renderVideo,
           "aria-label": "Play Video"
@@ -167,7 +167,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
           onClick: this.renderVideo,
           src: "https://img.youtube.com/vi/".concat(getYouTubeID(this.props.element.url), "/sddefault.jpg"),
           alt: "video"
-        })), this.state.showVideo && isLibraryLoaded() && /*#__PURE__*/React.createElement("div", {
+        }), this.state.showVideo && isLibraryLoaded() && /*#__PURE__*/React.createElement("div", {
           className: "youtube-iframe-wrapper"
         }, youtubeIframe()));
       } else if (!this.props.loadIframeOnClick && isLibraryLoaded()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/components",
-  "version": "2.31.4-lazy-iframe.5",
+  "version": "2.31.4-lazy-load.2",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",