@quintype/components 3.4.7-test-version.0 → 3.5.1-jsembed-playerid-issue.0

package/dist/cjs/index.js

@@ -1055,6 +1055,21 @@ function _isNativeReflectConstruct$l() { if (typeof Reflect === "undefined" || !
  *                      onItemFocus={(item) => console.log(`Story In View: ${item.story.headline}`)}
  *                      doNotChangeUrl={true} />
  * ```
+ *
+ * #### Configuring the the url to change
+ * When a story is focussed, the url is changed to the original slug of the story by default. To configure this, pass a prop called changeUrlTo as a function which returns the desired url.
+ * This is typically used when you want to change the url but not to the original slug.
+ *
+ * Example:
+ * ```javascript
+ *   <InfiniteStoryBase {...props}
+ *                      render={StoryPageBase}
+ *                      loadItems={storyPageLoadItems}
+ *                      onItemFocus={(item) => console.log(`Story In View: ${item.story.headline}`)}
+                        changeUrlTo={(item) => item.currentPath || props.currentPath}
+ *                      doNotChangeUrl={true} />
+ * ```
+ *
  * @component
  * @category Story Page
  */
@@ -1095,7 +1110,8 @@ var InfiniteStoryBase = /*#__PURE__*/function (_React$Component) {
         var storyPath = item.story.url ? new URL(item.story.url).pathname : "/" + item.story.slug;
         var metaTitle = get__default["default"](item, ['story', 'seo', 'meta-title'], item.story.headline);
         var title = get__default["default"](item, ["customSeo", "title"], metaTitle);
-        global.app.maybeSetUrl(storyPath, title);
+        var path = this.props.changeUrlTo ? this.props.changeUrlTo(item) : storyPath;
+        global.app.maybeSetUrl(path, title);
       }
 
       this.props.onItemFocus && this.props.onItemFocus(item, index);
@@ -2718,7 +2734,11 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
   _createClass__default["default"](CustomStoryElementDailyMotion, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (!this.props.loadIframeOnClick) {
+      var _this$props, _this$props$element;
+
+      var metadata = ((_this$props = this.props) === null || _this$props === void 0 ? void 0 : (_this$props$element = _this$props.element) === null || _this$props$element === void 0 ? void 0 : _this$props$element.metadata) || {};
+
+      if (!this.props.loadIframeOnClick && metadata["player-id"]) {
         this.triggerIframe();
       }
     }
@@ -2728,6 +2748,19 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
       this._isMounted = false;
       disconnectObserver(this.intersectionObserver);
     }
+  }, {
+    key: "getEmbedJS",
+    value: function getEmbedJS() {
+      var embedJs = this.props.element["embed-js"];
+      console.log("Embed JS Logs 555: ", embedJs);
+      if (!embedJs) return null;
+
+      if (global) {
+        return decodeURIComponent(escape(global.atob(embedJs)));
+      }
+
+      return Buffer.from(embedJs, "base64").toString("utf-8");
+    }
   }, {
     key: "render",
     value: function render() {
@@ -2770,7 +2803,14 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
         }, dailymotionIframe()));
       } else if (!this.props.loadIframeOnClick && isLibraryLoaded$1()) {
         return dailymotionIframe();
-      } else return /*#__PURE__*/React__default["default"].createElement("div", null);
+      } else {
+        var embedJs = this.getEmbedJS();
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          dangerouslySetInnerHTML: {
+            __html: embedJs
+          }
+        });
+      }
     }
   }]);
 

package/dist/es/components/infinite-story-base.js

@@ -56,6 +56,21 @@ import { removeDuplicateStories } from '../utils';
  *                      onItemFocus={(item) => console.log(`Story In View: ${item.story.headline}`)}
  *                      doNotChangeUrl={true} />
  * ```
+ *
+ * #### Configuring the the url to change
+ * When a story is focussed, the url is changed to the original slug of the story by default. To configure this, pass a prop called changeUrlTo as a function which returns the desired url.
+ * This is typically used when you want to change the url but not to the original slug.
+ *
+ * Example:
+ * ```javascript
+ *   <InfiniteStoryBase {...props}
+ *                      render={StoryPageBase}
+ *                      loadItems={storyPageLoadItems}
+ *                      onItemFocus={(item) => console.log(`Story In View: ${item.story.headline}`)}
+                        changeUrlTo={(item) => item.currentPath || props.currentPath}
+ *                      doNotChangeUrl={true} />
+ * ```
+ *
  * @component
  * @category Story Page
  */
@@ -96,7 +111,8 @@ export var InfiniteStoryBase = /*#__PURE__*/function (_React$Component) {
         var storyPath = item.story.url ? new URL(item.story.url).pathname : "/" + item.story.slug;
         var metaTitle = get(item, ['story', 'seo', 'meta-title'], item.story.headline);
         var title = get(item, ["customSeo", "title"], metaTitle);
-        global.app.maybeSetUrl(storyPath, title);
+        var path = this.props.changeUrlTo ? this.props.changeUrlTo(item) : storyPath;
+        global.app.maybeSetUrl(path, title);
       }
 
       this.props.onItemFocus && this.props.onItemFocus(item, index);

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

@@ -138,7 +138,11 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
   _createClass(CustomStoryElementDailyMotion, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (!this.props.loadIframeOnClick) {
+      var _this$props, _this$props$element;
+
+      var metadata = ((_this$props = this.props) === null || _this$props === void 0 ? void 0 : (_this$props$element = _this$props.element) === null || _this$props$element === void 0 ? void 0 : _this$props$element.metadata) || {};
+
+      if (!this.props.loadIframeOnClick && metadata["player-id"]) {
         this.triggerIframe();
       }
     }
@@ -148,6 +152,19 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
       this._isMounted = false;
       disconnectObserver(this.intersectionObserver);
     }
+  }, {
+    key: "getEmbedJS",
+    value: function getEmbedJS() {
+      var embedJs = this.props.element["embed-js"];
+      console.log("Embed JS Logs 555: ", embedJs);
+      if (!embedJs) return null;
+
+      if (global) {
+        return decodeURIComponent(escape(global.atob(embedJs)));
+      }
+
+      return Buffer.from(embedJs, "base64").toString("utf-8");
+    }
   }, {
     key: "render",
     value: function render() {
@@ -190,7 +207,14 @@ var CustomStoryElementDailyMotion = /*#__PURE__*/function (_React$Component) {
         }, dailymotionIframe()));
       } else if (!this.props.loadIframeOnClick && isLibraryLoaded()) {
         return dailymotionIframe();
-      } else return /*#__PURE__*/React.createElement("div", null);
+      } else {
+        var embedJs = this.getEmbedJS();
+        return /*#__PURE__*/React.createElement("div", {
+          dangerouslySetInnerHTML: {
+            __html: embedJs
+          }
+        });
+      }
     }
   }]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/components",
-  "version": "3.4.7-test-version.0",
+  "version": "3.5.1-jsembed-playerid-issue.0",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",