@quintype/components 3.8.2 → 3.8.3-youtube-button.0

package/dist/cjs/index.js

@@ -3272,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();
     });
   }
@@ -3284,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);
 
@@ -3317,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();
@@ -3357,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) {
@@ -3370,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 () {
@@ -3442,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/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.2",
+  "version": "3.8.3-youtube-button.0",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",