@quintype/components 3.8.3-test-branch.0 → 3.8.3

package/dist/cjs/index.js

@@ -1106,12 +1106,11 @@ var InfiniteStoryBase = /*#__PURE__*/function (_React$Component) {
       var _this2 = this;
 
       var item = this.allItems()[index];
-      console.log('aa--!this.props.doNotChangeUrl', !this.props.doNotChangeUrl);
 
       if (!this.props.doNotChangeUrl) {
-        var storyPath = item.story.url ? new URL(item.story.url).pathname : '/' + item.story.slug;
+        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);
+        var title = get__default["default"](item, ["customSeo", "title"], metaTitle);
         var path = this.props.changeUrlTo ? this.props.changeUrlTo(item) : storyPath;
         global.app.maybeSetUrl(path, title);
       }
@@ -3273,7 +3272,7 @@ function loadLibrary() {
     'react-youtube')); }).then(function (YT) {
       YouTube = YT["default"];
     })["catch"](function (err) {
-      console.log("Failed to load react-youtube", err);
+      console.log('Failed to load react-youtube', err);
       return Promise.reject();
     });
   }
@@ -3285,6 +3284,26 @@ function isLibraryLoaded() {
   return YouTube !== null;
 }
 
+function getYoutubeButton(onClick) {
+  return /*#__PURE__*/React__default["default"].createElement("button", {
+    onClick: onClick,
+    className: "youtube-playBtn",
+    "aria-label": "Play Video"
+  }, /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "68",
+    height: "48",
+    viewBox: "0 0 68 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M66.52 7.74C65.74 4.81 64.03 2.33 61.1 1.55C55.79 0.13 34 0 34 0C34 0 12.21 0.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74C0.0600001 13.05 0 24 0 24C0 24 0.0600001 34.95 1.48 40.26C2.26 43.19 3.97 45.67 6.9 46.45C12.21 47.87 34 48 34 48C34 48 55.79 47.87 61.1 46.45C64.03 45.67 65.74 43.19 66.52 40.26C67.94 34.95 68 24 68 24C68 24 67.94 13.05 66.52 7.74Z",
+    fill: "#FF0000"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M43 24L25 14V34",
+    fill: "white"
+  })));
+}
+
 var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
   _inherits__default["default"](CustomStoryElementYoutube, _React$Component);
 
@@ -3318,24 +3337,24 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
           element = _this$props$element === void 0 ? {} : _this$props$element;
 
       var qliticsData = _objectSpread$3(_objectSpread$3({}, getQliticsSchema(story, card, element)), {
-        "story-element-action": action
+        'story-element-action': action
       });
 
       if (global.qlitics) {
-        global.qlitics("track", "story-element-action", qliticsData);
+        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);
+        qlitics.qlitics.q.push('track', 'story-element-action', qliticsData);
       }
     });
 
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onPlayCallback", function (event) {
-      _this.triggerQlitics("play");
+      _this.triggerQlitics('play');
 
-      _this.props.onPlay === "function" && _this.props.onPlay(event);
+      _this.props.onPlay === 'function' && _this.props.onPlay(event);
       _this.videoRef.current = event.target;
 
       var targetElement = _this.videoRef.current.getIframe();
@@ -3358,9 +3377,9 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onPauseCallback", function (event) {
-      _this.triggerQlitics("pause");
+      _this.triggerQlitics('pause');
 
-      _this.props.onPause === "function" && _this.props.onPause(event);
+      _this.props.onPause === 'function' && _this.props.onPause(event);
       var videoPausedByObserver = _this.videoPausedByObserver.current;
 
       if (videoPausedByObserver) {
@@ -3371,9 +3390,9 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "onEndCallback", function (event) {
-      _this.triggerQlitics("end");
+      _this.triggerQlitics('end');
 
-      _this.props.onEnd === "function" && _this.props.onEnd(event);
+      _this.props.onEnd === 'function' && _this.props.onEnd(event);
     });
 
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "triggerIframe", function () {
@@ -3443,11 +3462,7 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
       if (this.props.loadIframeOnClick) {
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "thumbnail-wrapper"
-        }, !this.state.showVideo && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
-          className: "youtube-playBtn",
-          onClick: this.renderVideo,
-          "aria-label": "Play Video"
-        }), /*#__PURE__*/React__default["default"].createElement("img", {
+        }, !this.state.showVideo && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, getYoutubeButton(this.renderVideo), /*#__PURE__*/React__default["default"].createElement("img", {
           className: "youtube-thumbnail",
           onClick: this.renderVideo,
           src: "https://i.ytimg.com/vi/".concat(getYouTubeID__default["default"](this.props.element.url), "/hqdefault.jpg"),

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

@@ -8,10 +8,10 @@ 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 get from 'lodash/get';
-import React from 'react';
+import React from "react";
+import get from "lodash/get";
+import { InfiniteScroll } from "./infinite-scroll.js";
 import { removeDuplicateStories } from '../utils';
-import { InfiniteScroll } from './infinite-scroll.js';
 /**
  * This component can be used to implement InfiniteScroll on the story page. You will need to specify the function which renders the story (which will recieve props.index and props.story), and functions for triggering analytics.
  *
@@ -106,12 +106,11 @@ export var InfiniteStoryBase = /*#__PURE__*/function (_React$Component) {
       var _this2 = this;
 
       var item = this.allItems()[index];
-      console.log('aa--!this.props.doNotChangeUrl', !this.props.doNotChangeUrl);
 
       if (!this.props.doNotChangeUrl) {
-        var storyPath = item.story.url ? new URL(item.story.url).pathname : '/' + item.story.slug;
+        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);
+        var title = get(item, ["customSeo", "title"], metaTitle);
         var path = this.props.changeUrlTo ? this.props.changeUrlTo(item) : storyPath;
         global.app.maybeSetUrl(path, title);
       }

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

@@ -14,11 +14,11 @@ 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 getYouTubeID from "get-youtube-id";
-import { bool, func, object } from "prop-types";
-import React from "react";
-import { disconnectObserver, getQliticsSchema, initiateNewObserver } from "../../utils";
-import { WithLazy } from "../with-lazy";
+import getYouTubeID from 'get-youtube-id';
+import { bool, func, object } from 'prop-types';
+import React from 'react';
+import { disconnectObserver, getQliticsSchema, initiateNewObserver } from '../../utils';
+import { WithLazy } from '../with-lazy';
 var YouTube = null;
 var loaderPromise = null;
 
@@ -26,10 +26,10 @@ function loadLibrary() {
   if (loaderPromise === null) {
     loaderPromise = import(
     /* webpackChunkName: "qtc-react-youtube" */
-    "react-youtube").then(function (YT) {
+    'react-youtube').then(function (YT) {
       YouTube = YT["default"];
     })["catch"](function (err) {
-      console.log("Failed to load react-youtube", err);
+      console.log('Failed to load react-youtube', err);
       return Promise.reject();
     });
   }
@@ -41,6 +41,26 @@ function isLibraryLoaded() {
   return YouTube !== null;
 }
 
+function getYoutubeButton(onClick) {
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: onClick,
+    className: "youtube-playBtn",
+    "aria-label": "Play Video"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "68",
+    height: "48",
+    viewBox: "0 0 68 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M66.52 7.74C65.74 4.81 64.03 2.33 61.1 1.55C55.79 0.13 34 0 34 0C34 0 12.21 0.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74C0.0600001 13.05 0 24 0 24C0 24 0.0600001 34.95 1.48 40.26C2.26 43.19 3.97 45.67 6.9 46.45C12.21 47.87 34 48 34 48C34 48 55.79 47.87 61.1 46.45C64.03 45.67 65.74 43.19 66.52 40.26C67.94 34.95 68 24 68 24C68 24 67.94 13.05 66.52 7.74Z",
+    fill: "#FF0000"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M43 24L25 14V34",
+    fill: "white"
+  })));
+}
+
 var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
   _inherits(CustomStoryElementYoutube, _React$Component);
 
@@ -74,24 +94,24 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
           element = _this$props$element === void 0 ? {} : _this$props$element;
 
       var qliticsData = _objectSpread(_objectSpread({}, getQliticsSchema(story, card, element)), {
-        "story-element-action": action
+        'story-element-action': action
       });
 
       if (global.qlitics) {
-        global.qlitics("track", "story-element-action", qliticsData);
+        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);
+        qlitics.qlitics.q.push('track', 'story-element-action', qliticsData);
       }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onPlayCallback", function (event) {
-      _this.triggerQlitics("play");
+      _this.triggerQlitics('play');
 
-      _this.props.onPlay === "function" && _this.props.onPlay(event);
+      _this.props.onPlay === 'function' && _this.props.onPlay(event);
       _this.videoRef.current = event.target;
 
       var targetElement = _this.videoRef.current.getIframe();
@@ -114,9 +134,9 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onPauseCallback", function (event) {
-      _this.triggerQlitics("pause");
+      _this.triggerQlitics('pause');
 
-      _this.props.onPause === "function" && _this.props.onPause(event);
+      _this.props.onPause === 'function' && _this.props.onPause(event);
       var videoPausedByObserver = _this.videoPausedByObserver.current;
 
       if (videoPausedByObserver) {
@@ -127,9 +147,9 @@ var CustomStoryElementYoutube = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onEndCallback", function (event) {
-      _this.triggerQlitics("end");
+      _this.triggerQlitics('end');
 
-      _this.props.onEnd === "function" && _this.props.onEnd(event);
+      _this.props.onEnd === 'function' && _this.props.onEnd(event);
     });
 
     _defineProperty(_assertThisInitialized(_this), "triggerIframe", function () {
@@ -199,11 +219,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", {
-          className: "youtube-playBtn",
-          onClick: this.renderVideo,
-          "aria-label": "Play Video"
-        }), /*#__PURE__*/React.createElement("img", {
+        }, !this.state.showVideo && /*#__PURE__*/React.createElement(React.Fragment, null, getYoutubeButton(this.renderVideo), /*#__PURE__*/React.createElement("img", {
           className: "youtube-thumbnail",
           onClick: this.renderVideo,
           src: "https://i.ytimg.com/vi/".concat(getYouTubeID(this.props.element.url), "/hqdefault.jpg"),

package/package.json

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