@quintype/components 2.31.4-lazy-iframe.1 → 2.31.4-lazy-iframe.5

package/dist/cjs/index.js

@@ -45,7 +45,8 @@ var quintypeJs = require('quintype-js');
 var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
 var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
 var classNames = _interopDefault(require('classnames'));
-var atob = _interopDefault(require('atob'));
+var getVideoID = _interopDefault(require('get-video-id'));
+require('atob');
 var getYouTubeID = _interopDefault(require('get-youtube-id'));
 var _asyncToGenerator = _interopDefault(require('@babel/runtime/helpers/asyncToGenerator'));
 var _regeneratorRuntime = _interopDefault(require('@babel/runtime/regenerator'));
@@ -2249,107 +2250,105 @@ var SearchPageBase = /*#__PURE__*/function (_React$Component) {
 function _createSuper$d(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$d(); 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$d() { 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 can be used to load some DOM just before it scrolls into the screen. Currently, it does not support unloading. The `margin` prop is passed to `IntersectionObserver`.
+ *
+ * Example
+ * ```javascript
+ * import { WithLazy } from '@quintype/components';
+ *
+ * <WithLazy margin="50px">{() =>
+ *   <SomeHeavyComponent />
+ * }</WithLazy>
+ * ```
+ * @component
+ * @hideconstructor
+ * @category Other
+ */
 
-function cloneScriptNode(node) {
-  var script = document.createElement("script");
-  script.text = node.innerHTML;
-
-  for (var i = node.attributes.length - 1; i >= 0; i--) {
-    setTimeout(function () {
-      script.setAttribute(node.attributes[i].name, node.attributes[i].value);
-    }, 3000);
-  }
-
-  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 JSEmbed = /*#__PURE__*/function (_React$Component) {
-  _inherits(JSEmbed, _React$Component);
+var WithLazy = /*#__PURE__*/function (_React$Component) {
+  _inherits(WithLazy, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$d(JSEmbed);
+  var _super = /*#__PURE__*/_createSuper$d(WithLazy);
 
-  function JSEmbed(props) {
+  function WithLazy(props) {
     var _this;
 
-    _classCallCheck(this, JSEmbed);
+    _classCallCheck(this, WithLazy);
 
     _this = _super.call(this, props);
-    _this.uniqueId = "anagh";
+    _this.state = {
+      loaded: false
+    };
+    _this.observerRef = /*#__PURE__*/React__default.createRef();
     return _this;
   }
 
-  _createClass(JSEmbed, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      return !(this.props.id === nextProps.id && this.props.embedJS === nextProps.embedJS);
+  _createClass(WithLazy, [{
+    key: "render",
+    value: function render() {
+      if (this.state.loaded) {
+        return this.props.children();
+      } else {
+        return /*#__PURE__*/React__default.createElement("div", {
+          style: {
+            height: this.props.height || 50
+          },
+          ref: this.observerRef
+        });
+      }
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      replaceScriptNodes(this.JSEmbed);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      replaceScriptNodes(this.JSEmbed);
+      var _this2 = this;
+
+      this.observer = new global.IntersectionObserver(function (entries, observer) {
+        return _this2.observerCallback(entries, observer);
+      }, {
+        rootMargin: this.props.margin || "160px"
+      });
+      this.observer.observe(this.observerRef.current);
     }
   }, {
-    key: "getEmbedJS",
-    value: function getEmbedJS() {
-      var embedjs = this.props.embedJS;
-      return embedjs != null ? atob(embedjs) : null;
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.observer.disconnect();
     }
   }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+    key: "observerCallback",
+    value: function observerCallback(entries, observer) {
+      var _this3 = this;
 
-      return /*#__PURE__*/React__default.createElement("div", {
-        ref: function ref(jsembed) {
-          _this2.JSEmbed = jsembed;
-        },
-        dangerouslySetInnerHTML: {
-          __html: this.getEmbedJS()
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting || entry.isIntersecting === undefined) {
+          _this3.setState({
+            loaded: true
+          });
+
+          observer.disconnect();
         }
       });
     }
   }]);
 
-  return JSEmbed;
+  return WithLazy;
 }(React__default.Component);
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-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$e(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$e(); 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$e() { 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 DailyMotion = null;
 var loaderPromise = null;
 
 function loadLibrary() {
   if (loaderPromise === null) {
     loaderPromise = new Promise(function (resolve) { resolve(_interopNamespace(require(
-    /* webpackChunkName: "qtc-react-youtube" */
-    'react-youtube'))); }).then(function (YT) {
-      YouTube = YT["default"];
+    /* webpackChunkName: "qtc-react-dailymotion" */
+    'react-dailymotion'))); }).then(function (DM) {
+      DailyMotion = DM["default"];
     })["catch"](function (err) {
-      console.log("Failed to load react-youtube", err);
+      console.log("Failed to load react-dailymotion", err);
       return Promise.reject();
     });
   }
@@ -2358,61 +2357,30 @@ function loadLibrary() {
 }
 
 function isLibraryLoaded() {
-  return YouTube !== null;
+  return DailyMotion !== null;
 }
 
-var StoryElementYoutube = /*#__PURE__*/function (_React$Component) {
-  _inherits(StoryElementYoutube, _React$Component);
+var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
+  _inherits(CustomStoryElementDailyMotion, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$e(StoryElementYoutube);
+  var _super = /*#__PURE__*/_createSuper$e(CustomStoryElementDailyMotion);
 
-  function StoryElementYoutube(props) {
+  function CustomStoryElementDailyMotion(props) {
     var _this;
 
-    _classCallCheck(this, StoryElementYoutube);
+    _classCallCheck(this, CustomStoryElementDailyMotion);
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "triggerQlitics", function (action) {
-      if (_this.props.disableAnalytics === true) return false;
-      var _this$props = _this.props,
-          _this$props$story = _this$props.story,
-          story = _this$props$story === void 0 ? {} : _this$props$story,
-          _this$props$card = _this$props.card,
-          card = _this$props$card === void 0 ? {} : _this$props$card,
-          _this$props$element = _this$props.element,
-          element = _this$props$element === void 0 ? {} : _this$props$element;
-
-      var qliticsData = _objectSpread$4(_objectSpread$4({}, getQliticsSchema(story, card, element)), {
-        "story-element-action": action
-      });
-
-      if (global.qlitics) {
-        global.qlitics("track", "story-element-action", qliticsData);
-      } else {
-        global.qlitics = global.qlitics || function () {
-          (qlitics.q = qlitics.q || []).push(arguments);
-        };
-
-        qlitics.qlitics.q.push("track", "story-element-action", qliticsData);
-      }
-    });
-
     _defineProperty(_assertThisInitialized(_this), "onPlayCallback", function (event) {
-      _this.triggerQlitics("play");
-
       _this.props.onPlay === "function" && _this.props.onPlay(event);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onPauseCallback", function (event) {
-      _this.triggerQlitics("pause");
-
       _this.props.onPause === "function" && _this.props.onPause(event);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onEndCallback", function (event) {
-      _this.triggerQlitics("end");
-
       _this.props.onEnd === "function" && _this.props.onEnd(event);
     });
 
@@ -2447,7 +2415,7 @@ var StoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(StoryElementYoutube, [{
+  _createClass(CustomStoryElementDailyMotion, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       if (!this.props.loadIframeOnClick) {
@@ -2464,35 +2432,37 @@ var StoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var youtubeIframe = function youtubeIframe() {
-        return /*#__PURE__*/React__default.createElement(YouTube, {
-          videoId: getYouTubeID(_this2.props.element.url),
+      var _getVideoID = getVideoID(this.props.element.metadata["dailymotion-url"]),
+          videoId = _getVideoID.id;
+
+      var dailymotionIframe = function dailymotionIframe() {
+        return /*#__PURE__*/React__default.createElement(DailyMotion, {
+          video: videoId,
           opts: _this2.opts,
           onPlay: _this2.onPlayCallback,
           onPause: _this2.onPauseCallback,
-          onEnd: _this2.onEndCallback,
-          onReady: _this2.onPlayerReady
+          onEnd: _this2.onEndCallback
         });
       };
 
       if (this.props.loadIframeOnClick) {
         return /*#__PURE__*/React__default.createElement("div", {
           className: "thumbnail-wrapper"
-        }, /*#__PURE__*/React__default.createElement("button", {
-          className: "youtube-playBtn",
+        }, !this.state.showVideo && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
+          className: "dailymotion-playBtn",
           onClick: this.renderVideo,
           "aria-label": "Play Video"
-        }), !this.state.showVideo && /*#__PURE__*/React__default.createElement("img", {
-          className: "youtube-thumbnail",
+        }), /*#__PURE__*/React__default.createElement("img", {
+          className: "dailymotion-thumbnail",
           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__default.createElement("div", {
-          className: "youtube-iframe-wrapper"
-        }, youtubeIframe()));
+          src: "https://www.dailymotion.com/thumbnail/video/".concat(videoId),
+          alt: "daily-motion-video"
+        })), this.state.showVideo && isLibraryLoaded() && /*#__PURE__*/React__default.createElement("div", {
+          className: "dailymotion-iframe-wrapper"
+        }, dailymotionIframe()));
       } else if (!this.props.loadIframeOnClick && isLibraryLoaded()) {
-        return /*#__PURE__*/React__default.createElement(YouTube, {
-          videoId: getYouTubeID(this.props.element.url),
+        return /*#__PURE__*/React__default.createElement(DailyMotion, {
+          video: videoId,
           opts: this.opts,
           onPlay: this.onPlayCallback,
           onPause: this.onPauseCallback,
@@ -2502,9 +2472,31 @@ var StoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return StoryElementYoutube;
+  return CustomStoryElementDailyMotion;
 }(React__default.Component);
 
+var StoryElementDailyMotion = function StoryElementDailyMotion(props) {
+  return /*#__PURE__*/React__default.createElement(WithLazy, {
+    margin: "0px"
+  }, function () {
+    return /*#__PURE__*/React__default.createElement(CustomStoryElementDailyMotion, 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; } }
@@ -2669,13 +2661,194 @@ var Table = /*#__PURE__*/function (_React$Component) {
   return Table;
 }(React__default.Component);
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-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 _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 _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; } }
+var YouTube = null;
+var loaderPromise$1 = null;
+
+function loadLibrary$1() {
+  if (loaderPromise$1 === null) {
+    loaderPromise$1 = new Promise(function (resolve) { resolve(_interopNamespace(require(
+    /* webpackChunkName: "qtc-react-youtube" */
+    'react-youtube'))); }).then(function (YT) {
+      YouTube = YT["default"];
+    })["catch"](function (err) {
+      console.log("Failed to load react-youtube", err);
+      return Promise.reject();
+    });
+  }
+
+  return loaderPromise$1;
+}
+
+function isLibraryLoaded$1() {
+  return YouTube !== null;
+}
+
+var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
+  _inherits(CustomStoryElementYoutube, _React$Component);
+
+  var _super = /*#__PURE__*/_createSuper$h(CustomStoryElementYoutube);
+
+  function CustomStoryElementYoutube(props) {
+    var _this;
+
+    _classCallCheck(this, CustomStoryElementYoutube);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "triggerQlitics", function (action) {
+      if (_this.props.disableAnalytics === true) return false;
+      var _this$props = _this.props,
+          _this$props$story = _this$props.story,
+          story = _this$props$story === void 0 ? {} : _this$props$story,
+          _this$props$card = _this$props.card,
+          card = _this$props$card === void 0 ? {} : _this$props$card,
+          _this$props$element = _this$props.element,
+          element = _this$props$element === void 0 ? {} : _this$props$element;
+
+      var qliticsData = _objectSpread$4(_objectSpread$4({}, getQliticsSchema(story, card, element)), {
+        "story-element-action": action
+      });
+
+      if (global.qlitics) {
+        global.qlitics("track", "story-element-action", qliticsData);
+      } else {
+        global.qlitics = global.qlitics || function () {
+          (qlitics.q = qlitics.q || []).push(arguments);
+        };
+
+        qlitics.qlitics.q.push("track", "story-element-action", qliticsData);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onPlayCallback", function (event) {
+      _this.triggerQlitics("play");
+
+      _this.props.onPlay === "function" && _this.props.onPlay(event);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onPauseCallback", function (event) {
+      _this.triggerQlitics("pause");
+
+      _this.props.onPause === "function" && _this.props.onPause(event);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onEndCallback", function (event) {
+      _this.triggerQlitics("end");
+
+      _this.props.onEnd === "function" && _this.props.onEnd(event);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "triggerIframe", function () {
+      _this._isMounted = true;
+      loadLibrary$1().then(function () {
+        return _this._isMounted && _this.forceUpdate();
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onPlayerReady", function (event) {
+      event.target.setVolume(100);
+      event.target.playVideo();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderVideo", function () {
+      _this.triggerIframe();
+
+      _this.setState({
+        showVideo: true
+      });
+    });
+
+    _this.state = {
+      showVideo: false
+    };
+    _this.opts = {
+      playerVars: {
+        autoplay: 0
+      }
+    };
+    return _this;
+  }
+
+  _createClass(CustomStoryElementYoutube, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (!this.props.loadIframeOnClick) {
+        this.triggerIframe();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this._isMounted = false;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var youtubeIframe = function youtubeIframe() {
+        return /*#__PURE__*/React__default.createElement(YouTube, {
+          videoId: getYouTubeID(_this2.props.element.url),
+          opts: _this2.opts,
+          onPlay: _this2.onPlayCallback,
+          onPause: _this2.onPauseCallback,
+          onEnd: _this2.onEndCallback,
+          onReady: _this2.onPlayerReady
+        });
+      };
+
+      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", {
+          className: "youtube-playBtn",
+          onClick: this.renderVideo,
+          "aria-label": "Play Video"
+        }), /*#__PURE__*/React__default.createElement("img", {
+          className: "youtube-thumbnail",
+          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", {
+          className: "youtube-iframe-wrapper"
+        }, youtubeIframe()));
+      } else if (!this.props.loadIframeOnClick && isLibraryLoaded$1()) {
+        return /*#__PURE__*/React__default.createElement(YouTube, {
+          videoId: getYouTubeID(this.props.element.url),
+          opts: this.opts,
+          onPlay: this.onPlayCallback,
+          onPause: this.onPauseCallback,
+          onEnd: this.onEndCallback
+        });
+      } else return /*#__PURE__*/React__default.createElement("div", null);
+    }
+  }]);
+
+  return CustomStoryElementYoutube;
+}(React__default.Component);
+
+var StoryElementYoutube = function StoryElementYoutube(props) {
+  return /*#__PURE__*/React__default.createElement(WithLazy, {
+    margin: "0px"
+  }, function () {
+    return /*#__PURE__*/React__default.createElement(CustomStoryElementYoutube, props);
+  });
+};
+
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+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 _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; } }
 /**
  * This component renders different types of [story elements](https://developers.quintype.com/malibu/terminology#story-elements)
 
@@ -2705,7 +2878,7 @@ function _isNativeReflectConstruct$h() { if (typeof Reflect === "undefined" || !
 var StoryElement = /*#__PURE__*/function (_React$Component) {
   _inherits(StoryElement, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$h(StoryElement);
+  var _super = /*#__PURE__*/_createSuper$i(StoryElement);
 
   function StoryElement(props) {
     var _this;
@@ -2827,10 +3000,12 @@ function StoryElementSoundCloud(_ref5) {
 }
 
 function StoryElementJsembed(_ref6) {
-  var element = _ref6.element;
+  var element = _ref6.element,
+      loadEmbed = _ref6.loadEmbed;
   return /*#__PURE__*/React__default.createElement(JSEmbed, {
     embedJS: element["embed-js"],
-    id: element["id"]
+    id: element["id"],
+    loadEmbed: loadEmbed
   });
 }
 
@@ -2868,6 +3043,7 @@ var DEFAULT_TEMPLATES = {
   image: StoryElementImage,
   title: StoryElementTitle,
   "youtube-video": StoryElementYoutube,
+  "dailymotion-video": StoryElementDailyMotion,
   "soundcloud-audio": StoryElementSoundCloud,
   jsembed: StoryElementJsembed,
   polltype: StoryElementPolltype,
@@ -2879,7 +3055,7 @@ var DEFAULT_TEMPLATES = {
 var StoryElementBase = /*#__PURE__*/function (_React$Component2) {
   _inherits(StoryElementBase, _React$Component2);
 
-  var _super2 = /*#__PURE__*/_createSuper$h(StoryElementBase);
+  var _super2 = /*#__PURE__*/_createSuper$i(StoryElementBase);
 
   function StoryElementBase(props) {
     var _this2;
@@ -2993,9 +3169,9 @@ var StoryElementBase = /*#__PURE__*/function (_React$Component2) {
 
 var STORY_ELEMENT_TEMPLATES = DEFAULT_TEMPLATES;
 
-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; } }
 
 function getNativeShareHandler(canNativeShare, title, fullUrl) {
   if (!canNativeShare) {
@@ -3013,7 +3189,7 @@ function getNativeShareHandler(canNativeShare, title, fullUrl) {
 var SocialShareBase = /*#__PURE__*/function (_React$Component) {
   _inherits(SocialShareBase, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$i(SocialShareBase);
+  var _super = /*#__PURE__*/_createSuper$j(SocialShareBase);
 
   function SocialShareBase(props) {
     var _this;
@@ -3479,15 +3655,15 @@ LoadMoreButton.defaultProps = {
   text: 'Load more'
 };
 
-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; } }
 var loadedMember = false;
 
 var WithMemberBase = /*#__PURE__*/function (_React$Component) {
   _inherits(WithMemberBase, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$j(WithMemberBase);
+  var _super = /*#__PURE__*/_createSuper$k(WithMemberBase);
 
   function WithMemberBase(props) {
     var _this;
@@ -3616,9 +3792,9 @@ function mapDispatchToProps$6(dispatch, ownProps) {
 
 var WithMember = /*#__PURE__*/reactRedux.connect(mapStateToProps$9, mapDispatchToProps$6)(WithMemberBase);
 
-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; } }
 /**
  * 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
  * 
@@ -3652,7 +3828,7 @@ function WithPreview(klazz, updateData) {
   return /*#__PURE__*/function (_React$Component) {
     _inherits(WithPreviewWrapper, _React$Component);
 
-    var _super = _createSuper$k(WithPreviewWrapper);
+    var _super = _createSuper$l(WithPreviewWrapper);
 
     function WithPreviewWrapper(props) {
       var _this;
@@ -3700,9 +3876,9 @@ function WithPreview(klazz, updateData) {
   }(React__default.Component);
 }
 
-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 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.
  *
@@ -3754,7 +3930,7 @@ function _isNativeReflectConstruct$l() { if (typeof Reflect === "undefined" || !
 var WithSocialLogin = /*#__PURE__*/function (_React$Component) {
   _inherits(WithSocialLogin, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$l(WithSocialLogin);
+  var _super = /*#__PURE__*/_createSuper$m(WithSocialLogin);
 
   function WithSocialLogin(props) {
     var _this;
@@ -4079,9 +4255,9 @@ var loginWithLinkedIn = function loginWithLinkedIn(_ref2) {
   });
 };
 
-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 render props component willupdate it's children via props while executing data loaders sent as props to the component.
  *
@@ -4113,7 +4289,7 @@ function _isNativeReflectConstruct$m() { if (typeof Reflect === "undefined" || !
 var UpdateOnInterval = /*#__PURE__*/function (_React$Component) {
   _inherits(UpdateOnInterval, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$m(UpdateOnInterval);
+  var _super = /*#__PURE__*/_createSuper$n(UpdateOnInterval);
 
   function UpdateOnInterval(props) {
     var _this;
@@ -4219,14 +4395,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$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; } }
 
 var AccessTypeBase = /*#__PURE__*/function (_React$Component) {
   _inherits(AccessTypeBase, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$n(AccessTypeBase);
+  var _super = /*#__PURE__*/_createSuper$o(AccessTypeBase);
 
   function AccessTypeBase(props) {
     var _this;
@@ -5362,94 +5538,6 @@ function mapDispatchToProps$8(dispatch) {
 
 var WithHostUrl = /*#__PURE__*/reactRedux.connect(mapStateToProps$b, mapDispatchToProps$8)(WithHostUrlBase);
 
-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$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 component can be used to load some DOM just before it scrolls into the screen. Currently, it does not support unloading. The `margin` prop is passed to `IntersectionObserver`.
- *
- * Example
- * ```javascript
- * import { WithLazy } from '@quintype/components';
- *
- * <WithLazy margin="50px">{() =>
- *   <SomeHeavyComponent />
- * }</WithLazy>
- * ```
- * @component
- * @hideconstructor
- * @category Other
- */
-
-var WithLazy = /*#__PURE__*/function (_React$Component) {
-  _inherits(WithLazy, _React$Component);
-
-  var _super = /*#__PURE__*/_createSuper$o(WithLazy);
-
-  function WithLazy(props) {
-    var _this;
-
-    _classCallCheck(this, WithLazy);
-
-    _this = _super.call(this, props);
-    _this.state = {
-      loaded: false
-    };
-    _this.observerRef = /*#__PURE__*/React__default.createRef();
-    return _this;
-  }
-
-  _createClass(WithLazy, [{
-    key: "render",
-    value: function render() {
-      if (this.state.loaded) {
-        return this.props.children();
-      } else {
-        return /*#__PURE__*/React__default.createElement("div", {
-          style: {
-            height: this.props.height || 50
-          },
-          ref: this.observerRef
-        });
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      this.observer = new global.IntersectionObserver(function (entries, observer) {
-        return _this2.observerCallback(entries, observer);
-      }, {
-        rootMargin: this.props.margin || "160px"
-      });
-      this.observer.observe(this.observerRef.current);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.observer.disconnect();
-    }
-  }, {
-    key: "observerCallback",
-    value: function observerCallback(entries, observer) {
-      var _this3 = this;
-
-      entries.forEach(function (entry) {
-        if (entry.isIntersecting || entry.isIntersecting === undefined) {
-          _this3.setState({
-            loaded: true
-          });
-
-          observer.disconnect();
-        }
-      });
-    }
-  }]);
-
-  return WithLazy;
-}(React__default.Component);
-
 /**
  * This component calls the render prop with `clientSideRendered` = true if the client side is completely loaded, and false during SSR and initial bootup.
  *

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

@@ -15,16 +15,17 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from "react";
 import classNames from "classnames";
-import JSEmbed from "./story-elements/jsembed";
-import StoryElementYoutube from "./story-elements/youtube";
+import get from "lodash/get";
+import React from "react";
+import { getQliticsSchema } from "../utils";
+import { Link } from "./link";
 import { ResponsiveImage } from "./responsive-image";
+import StoryElementDailyMotion from "./story-elements/dailymotion";
+import JSEmbed from "./story-elements/jsembed";
 import Polltype from "./story-elements/polltype";
 import { Table } from "./story-elements/table";
-import { Link } from "./link";
-import get from "lodash/get";
-import { getQliticsSchema } from "../utils";
+import StoryElementYoutube from "./story-elements/youtube";
 /**
  * This component renders different types of [story elements](https://developers.quintype.com/malibu/terminology#story-elements)
 
@@ -176,10 +177,12 @@ function StoryElementSoundCloud(_ref5) {
 }
 
 function StoryElementJsembed(_ref6) {
-  var element = _ref6.element;
+  var element = _ref6.element,
+      loadEmbed = _ref6.loadEmbed;
   return /*#__PURE__*/React.createElement(JSEmbed, {
     embedJS: element["embed-js"],
-    id: element["id"]
+    id: element["id"],
+    loadEmbed: loadEmbed
   });
 }
 
@@ -217,6 +220,7 @@ var DEFAULT_TEMPLATES = {
   image: StoryElementImage,
   title: StoryElementTitle,
   "youtube-video": StoryElementYoutube,
+  "dailymotion-video": StoryElementDailyMotion,
   "soundcloud-audio": StoryElementSoundCloud,
   jsembed: StoryElementJsembed,
   polltype: StoryElementPolltype,

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

@@ -0,0 +1,162 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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 getVideoID from "get-video-id";
+import { PropTypes } from "prop-types";
+import React from "react";
+import { WithLazy } from "../with-lazy";
+var DailyMotion = null;
+var loaderPromise = null;
+
+function loadLibrary() {
+  if (loaderPromise === null) {
+    loaderPromise = import(
+    /* webpackChunkName: "qtc-react-dailymotion" */
+    "react-dailymotion").then(function (DM) {
+      DailyMotion = DM["default"];
+    })["catch"](function (err) {
+      console.log("Failed to load react-dailymotion", err);
+      return Promise.reject();
+    });
+  }
+
+  return loaderPromise;
+}
+
+function isLibraryLoaded() {
+  return DailyMotion !== null;
+}
+
+var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
+  _inherits(CustomStoryElementDailyMotion, _React$Component);
+
+  var _super = /*#__PURE__*/_createSuper(CustomStoryElementDailyMotion);
+
+  function CustomStoryElementDailyMotion(props) {
+    var _this;
+
+    _classCallCheck(this, CustomStoryElementDailyMotion);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "onPlayCallback", function (event) {
+      _this.props.onPlay === "function" && _this.props.onPlay(event);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onPauseCallback", function (event) {
+      _this.props.onPause === "function" && _this.props.onPause(event);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onEndCallback", function (event) {
+      _this.props.onEnd === "function" && _this.props.onEnd(event);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "triggerIframe", function () {
+      _this._isMounted = true;
+      loadLibrary().then(function () {
+        return _this._isMounted && _this.forceUpdate();
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onPlayerReady", function (event) {
+      event.target.setVolume(100);
+      event.target.playVideo();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderVideo", function () {
+      _this.triggerIframe();
+
+      _this.setState({
+        showVideo: true
+      });
+    });
+
+    _this.state = {
+      showVideo: false
+    };
+    _this.opts = {
+      playerVars: {
+        autoplay: 0
+      }
+    };
+    return _this;
+  }
+
+  _createClass(CustomStoryElementDailyMotion, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (!this.props.loadIframeOnClick) {
+        this.triggerIframe();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this._isMounted = false;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _getVideoID = getVideoID(this.props.element.metadata["dailymotion-url"]),
+          videoId = _getVideoID.id;
+
+      var dailymotionIframe = function dailymotionIframe() {
+        return /*#__PURE__*/React.createElement(DailyMotion, {
+          video: videoId,
+          opts: _this2.opts,
+          onPlay: _this2.onPlayCallback,
+          onPause: _this2.onPauseCallback,
+          onEnd: _this2.onEndCallback
+        });
+      };
+
+      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", {
+          className: "dailymotion-playBtn",
+          onClick: this.renderVideo,
+          "aria-label": "Play Video"
+        }), /*#__PURE__*/React.createElement("img", {
+          className: "dailymotion-thumbnail",
+          onClick: this.renderVideo,
+          src: "https://www.dailymotion.com/thumbnail/video/".concat(videoId),
+          alt: "daily-motion-video"
+        })), this.state.showVideo && isLibraryLoaded() && /*#__PURE__*/React.createElement("div", {
+          className: "dailymotion-iframe-wrapper"
+        }, dailymotionIframe()));
+      } else if (!this.props.loadIframeOnClick && isLibraryLoaded()) {
+        return /*#__PURE__*/React.createElement(DailyMotion, {
+          video: videoId,
+          opts: this.opts,
+          onPlay: this.onPlayCallback,
+          onPause: this.onPauseCallback,
+          onEnd: this.onEndCallback
+        });
+      } else return /*#__PURE__*/React.createElement("div", null);
+    }
+  }]);
+
+  return CustomStoryElementDailyMotion;
+}(React.Component);
+
+var StoryElementDailyMotion = function StoryElementDailyMotion(props) {
+  return /*#__PURE__*/React.createElement(WithLazy, {
+    margin: "0px"
+  }, function () {
+    return /*#__PURE__*/React.createElement(CustomStoryElementDailyMotion, props);
+  });
+};
+
+export default StoryElementDailyMotion;

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

@@ -1,31 +1,19 @@
-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 _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import atob from "atob";
-import { PropTypes } from "prop-types";
-import React from "react";
+import React, { useEffect, useState } from "react";
 
-function cloneScriptNode(node) {
+var cloneScriptNode = function cloneScriptNode(node) {
   var script = document.createElement("script");
   script.text = node.innerHTML;
 
   for (var i = node.attributes.length - 1; i >= 0; i--) {
-    setTimeout(function () {
-      script.setAttribute(node.attributes[i].name, node.attributes[i].value);
-    }, 3000);
+    script.setAttribute(node.attributes[i].name, node.attributes[i].value);
   }
 
   return script;
-}
+};
 
-function replaceScriptNodes(node) {
+var replaceScriptNodes = 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.
@@ -37,61 +25,49 @@ function replaceScriptNodes(node) {
       replaceScriptNodes(children[i++]);
     }
   }
-}
-
-var JSEmbed = /*#__PURE__*/function (_React$Component) {
-  _inherits(JSEmbed, _React$Component);
-
-  var _super = /*#__PURE__*/_createSuper(JSEmbed);
-
-  function JSEmbed(props) {
-    var _this;
-
-    _classCallCheck(this, JSEmbed);
-
-    _this = _super.call(this, props);
-    _this.uniqueId = "anagh";
-    return _this;
-  }
-
-  _createClass(JSEmbed, [{
-    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 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()
     }
-  }, {
-    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 JSEmbed;
-}(React.Component);
-
-export { JSEmbed as default };
+  });
+};
+
+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;

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

@@ -18,6 +18,7 @@ import getYouTubeID from "get-youtube-id";
 import { PropTypes } from "prop-types";
 import React from "react";
 import { getQliticsSchema } from "../../utils";
+import { WithLazy } from "../with-lazy";
 var YouTube = null;
 var loaderPromise = null;
 
@@ -40,15 +41,15 @@ function isLibraryLoaded() {
   return YouTube !== null;
 }
 
-var StoryElementYoutube = /*#__PURE__*/function (_React$Component) {
-  _inherits(StoryElementYoutube, _React$Component);
+var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
+  _inherits(CustomStoryElementYoutube, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper(StoryElementYoutube);
+  var _super = /*#__PURE__*/_createSuper(CustomStoryElementYoutube);
 
-  function StoryElementYoutube(props) {
+  function CustomStoryElementYoutube(props) {
     var _this;
 
-    _classCallCheck(this, StoryElementYoutube);
+    _classCallCheck(this, CustomStoryElementYoutube);
 
     _this = _super.call(this, props);
 
@@ -126,7 +127,7 @@ var StoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(StoryElementYoutube, [{
+  _createClass(CustomStoryElementYoutube, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       if (!this.props.loadIframeOnClick) {
@@ -157,16 +158,16 @@ var StoryElementYoutube = /*#__PURE__*/function (_React$Component) {
       if (this.props.loadIframeOnClick) {
         return /*#__PURE__*/React.createElement("div", {
           className: "thumbnail-wrapper"
-        }, /*#__PURE__*/React.createElement("button", {
+        }, !this.state.showVideo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
           className: "youtube-playBtn",
           onClick: this.renderVideo,
           "aria-label": "Play Video"
-        }), !this.state.showVideo && /*#__PURE__*/React.createElement("img", {
+        }), /*#__PURE__*/React.createElement("img", {
           className: "youtube-thumbnail",
           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()) {
@@ -181,7 +182,15 @@ var StoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return StoryElementYoutube;
+  return CustomStoryElementYoutube;
 }(React.Component);
 
-export { StoryElementYoutube as default };
+var StoryElementYoutube = function StoryElementYoutube(props) {
+  return /*#__PURE__*/React.createElement(WithLazy, {
+    margin: "0px"
+  }, function () {
+    return /*#__PURE__*/React.createElement(CustomStoryElementYoutube, props);
+  });
+};
+
+export default StoryElementYoutube;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/components",
-  "version": "2.31.4-lazy-iframe.1",
+  "version": "2.31.4-lazy-iframe.5",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -26,11 +26,13 @@
     "atob": "^2.1.2",
     "classnames": "^2.2.6",
     "empty-web-gif": "^1.0.1",
+    "get-video-id": "^3.4.1",
     "get-youtube-id": "^1.0.1",
     "papaparse": "^5.2.0",
     "prop-types": "^15.7.2",
     "quintype-js": "^1.2.0",
     "react": "^16.8.6",
+    "react-dailymotion": "^0.4.1",
     "react-dfp": "quintype/react-dfp",
     "react-redux": "^7.0.3",
     "react-youtube": "^7.9.0",