@quintype/components 3.3.1 → 3.3.2-brightcove.0

package/dist/cjs/index.js

@@ -12,7 +12,7 @@ var reactRedux = require('react-redux');
 var wretch = require('wretch');
 var omit = require('@babel/runtime/helpers/objectWithoutProperties');
 var propTypes = require('prop-types');
-var get = require('lodash/get');
+var get$1 = require('lodash/get');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var reactDfp = require('react-dfp');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
@@ -23,7 +23,7 @@ var _extends = require('@babel/runtime/helpers/extends');
 var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
 var classNames = require('classnames');
 var getVideoID = require('get-video-id');
-var getYouTubeID = require('get-youtube-id');
+var getYouTubeID$1 = require('get-youtube-id');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var ReactDOM = require('react-dom');
@@ -56,7 +56,7 @@ var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeO
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var wretch__default = /*#__PURE__*/_interopDefaultLegacy(wretch);
 var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
-var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
+var get__default = /*#__PURE__*/_interopDefaultLegacy(get$1);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
@@ -65,7 +65,7 @@ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var getVideoID__default = /*#__PURE__*/_interopDefaultLegacy(getVideoID);
-var getYouTubeID__default = /*#__PURE__*/_interopDefaultLegacy(getYouTubeID);
+var getYouTubeID__default = /*#__PURE__*/_interopDefaultLegacy(getYouTubeID$1);
 var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
 var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
@@ -2357,6 +2357,130 @@ var WithLazy = /*#__PURE__*/function (_React$Component) {
   return WithLazy;
 }(React__default["default"].Component);
 
+var _this = undefined;
+var Brightcove = null;
+var loaderPromise$2 = null;
+
+var loadLibrary$2 = function loadLibrary() {
+  if (!loaderPromise$2) {
+    loaderPromise$2 = Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+    /* webpackChunkName: "qtc-react-brightcove" */
+    '@brightcove/react-player-loader')); }).then(function (Bc) {
+      Brightcove = Bc["default"];
+    })["catch"](function (err) {
+      console.log('Failed to load @brightcove/react-player-loader', err);
+      return Promise.reject();
+    });
+  }
+
+  return loaderPromise$2;
+};
+
+var isLibraryLoaded$2 = Brightcove !== null;
+
+var CustomElementBrightcove = function CustomElementBrightcove(props) {
+  var _props$element = props.element,
+      element = _props$element === void 0 ? {} : _props$element;
+      props.card;
+      props.story;
+      props.disableAnalytics;
+      var loadIframeOnClick = props.loadIframeOnClick;
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      showVideo = _useState2[0],
+      handleVideoDisplay = _useState2[1];
+
+  useEffect(function () {
+    if (!loadIframeOnClick) {
+      loadLibrary$2();
+    }
+  }, [loadIframeOnClick]); // const triggerQlitics = action => {
+  //   if (disableAnalytics) return false
+  //   const qliticsData = {
+  //     ...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)
+  //   }
+  // }
+  // onPlayCallback = (event) => {
+  //   this.triggerQlitics("play");
+  //   this.props.onPlay === "function" && this.props.onPlay(event);
+  // };
+  // onPauseCallback = (event) => {
+  //   this.triggerQlitics("pause");
+  //   this.props.onPause === "function" && this.props.onPause(event);
+  // };
+  // onEndCallback = (event) => {
+  //   this.triggerQlitics("end");
+  //   this.props.onEnd === "function" && this.props.onEnd(event);
+  // };
+  // onPlayerReady = (event) => {
+  //   event.target.setVolume(100);
+  //   event.target.playVideo();
+  // };
+
+  var brightcoveIframe = function brightcoveIframe() {
+    var updatedOpts = {
+      aspectRatio: '16:9',
+      autoplay: true,
+      muted: true,
+      responsive: true
+    };
+    return /*#__PURE__*/React__default["default"].createElement(Brightcove, {
+      accountId: get(element, ['metadata', 'account-id']),
+      videoId: get(element, ['metadata', 'video-id']),
+      playerId: get(element, ['metadata', 'player-id']),
+      opts: updatedOpts // onPlay={ this.onPlayCallback}
+      // onPause: this.onPauseCallback,
+      // onEnd: this.onEndCallback,
+      // onReady: this.onPlayerReady,
+
+    });
+  };
+
+  var renderVideo = function renderVideo() {
+    loadLibrary$2();
+    handleVideoDisplay(true);
+  };
+
+  if (loadIframeOnClick) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "thumbnail-wrapper"
+    }, !showVideo && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
+      className: "youtube-playBtn",
+      onClick: renderVideo,
+      "aria-label": "Play Video"
+    }), /*#__PURE__*/React__default["default"].createElement("img", {
+      className: "youtube-thumbnail",
+      onClick: renderVideo,
+      src: "https://i.ytimg.com/vi/".concat(getYouTubeID(_this.props.element.url), "/hqdefault.jpg"),
+      alt: "video"
+    })), showVideo && isLibraryLoaded$2 && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "youtube-iframe-wrapper"
+    }, brightcoveIframe()));
+  } else if (!loadIframeOnClick && isLibraryLoaded$2) {
+    return brightcoveIframe();
+  } else return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+};
+
+var StoryElementBrightcove = function StoryElementBrightcove(props) {
+  return /*#__PURE__*/React__default["default"].createElement(WithLazy, {
+    margin: "0px"
+  }, function () {
+    return /*#__PURE__*/React__default["default"].createElement(CustomElementBrightcove, props);
+  });
+};
+
 function _createSuper$c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$c(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
 
 function _isNativeReflectConstruct$c() { 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; } }
@@ -3240,7 +3364,8 @@ var DEFAULT_TEMPLATES = {
   polltype: StoryElementPolltype,
   table: StoryElementTable,
   "also-read": StoryElementAlsoRead,
-  file: StoryElementFile
+  file: StoryElementFile,
+  "brightcove-video": StoryElementBrightcove
 };
 
 var StoryElementBase = /*#__PURE__*/function (_React$Component2) {

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

@@ -22,6 +22,7 @@ import React from "react";
 import { getQliticsSchema } from "../utils";
 import { Link } from "./link";
 import { ResponsiveImage } from "./responsive-image";
+import StoryElementBrightcove from "./story-elements/brightcove";
 import StoryElementDailyMotion from "./story-elements/dailymotion";
 import DailyMotionEmbedScript from "./story-elements/dailymotion-embed-script";
 import JSEmbed from "./story-elements/jsembed";
@@ -227,7 +228,8 @@ var DEFAULT_TEMPLATES = {
   polltype: StoryElementPolltype,
   table: StoryElementTable,
   "also-read": StoryElementAlsoRead,
-  file: StoryElementFile
+  file: StoryElementFile,
+  "brightcove-video": StoryElementBrightcove
 };
 
 var StoryElementBase = /*#__PURE__*/function (_React$Component2) {

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

@@ -0,0 +1,133 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _this = this;
+
+import { bool, func, object } from 'prop-types';
+import React, { useState } from 'react';
+import { WithLazy } from '../with-lazy';
+var Brightcove = null;
+var loaderPromise = null;
+
+var loadLibrary = function loadLibrary() {
+  if (!loaderPromise) {
+    loaderPromise = import(
+    /* webpackChunkName: "qtc-react-brightcove" */
+    '@brightcove/react-player-loader').then(function (Bc) {
+      Brightcove = Bc["default"];
+    })["catch"](function (err) {
+      console.log('Failed to load @brightcove/react-player-loader', err);
+      return Promise.reject();
+    });
+  }
+
+  return loaderPromise;
+};
+
+var isLibraryLoaded = Brightcove !== null;
+
+var CustomElementBrightcove = function CustomElementBrightcove(props) {
+  var _props$element = props.element,
+      element = _props$element === void 0 ? {} : _props$element,
+      _props$card = props.card,
+      card = _props$card === void 0 ? {} : _props$card,
+      _props$story = props.story,
+      story = _props$story === void 0 ? {} : _props$story,
+      disableAnalytics = props.disableAnalytics,
+      loadIframeOnClick = props.loadIframeOnClick;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showVideo = _useState2[0],
+      handleVideoDisplay = _useState2[1];
+
+  useEffect(function () {
+    if (!loadIframeOnClick) {
+      loadLibrary();
+    }
+  }, [loadIframeOnClick]); // const triggerQlitics = action => {
+  //   if (disableAnalytics) return false
+  //   const qliticsData = {
+  //     ...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)
+  //   }
+  // }
+  // onPlayCallback = (event) => {
+  //   this.triggerQlitics("play");
+  //   this.props.onPlay === "function" && this.props.onPlay(event);
+  // };
+  // onPauseCallback = (event) => {
+  //   this.triggerQlitics("pause");
+  //   this.props.onPause === "function" && this.props.onPause(event);
+  // };
+  // onEndCallback = (event) => {
+  //   this.triggerQlitics("end");
+  //   this.props.onEnd === "function" && this.props.onEnd(event);
+  // };
+  // onPlayerReady = (event) => {
+  //   event.target.setVolume(100);
+  //   event.target.playVideo();
+  // };
+
+  var brightcoveIframe = function brightcoveIframe() {
+    var updatedOpts = {
+      aspectRatio: '16:9',
+      autoplay: true,
+      muted: true,
+      responsive: true
+    };
+    return /*#__PURE__*/React.createElement(Brightcove, {
+      accountId: get(element, ['metadata', 'account-id']),
+      videoId: get(element, ['metadata', 'video-id']),
+      playerId: get(element, ['metadata', 'player-id']),
+      opts: updatedOpts // onPlay={ this.onPlayCallback}
+      // onPause: this.onPauseCallback,
+      // onEnd: this.onEndCallback,
+      // onReady: this.onPlayerReady,
+
+    });
+  };
+
+  var renderVideo = function renderVideo() {
+    loadLibrary();
+    handleVideoDisplay(true);
+  };
+
+  if (loadIframeOnClick) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "thumbnail-wrapper"
+    }, !showVideo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+      className: "youtube-playBtn",
+      onClick: renderVideo,
+      "aria-label": "Play Video"
+    }), /*#__PURE__*/React.createElement("img", {
+      className: "youtube-thumbnail",
+      onClick: renderVideo,
+      src: "https://i.ytimg.com/vi/".concat(getYouTubeID(_this.props.element.url), "/hqdefault.jpg"),
+      alt: "video"
+    })), showVideo && isLibraryLoaded && /*#__PURE__*/React.createElement("div", {
+      className: "youtube-iframe-wrapper"
+    }, brightcoveIframe()));
+  } else if (!loadIframeOnClick && isLibraryLoaded) {
+    return brightcoveIframe();
+  } else return /*#__PURE__*/React.createElement(React.Fragment, null);
+};
+
+var StoryElementBrightcove = function StoryElementBrightcove(props) {
+  return /*#__PURE__*/React.createElement(WithLazy, {
+    margin: "0px"
+  }, function () {
+    return /*#__PURE__*/React.createElement(CustomElementBrightcove, props);
+  });
+};
+
+export default StoryElementBrightcove;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/components",
-  "version": "3.3.1",
+  "version": "3.3.2-brightcove.0",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -23,6 +23,7 @@
   "homepage": "https://github.com/quintype/quintype-node-components#readme",
   "dependencies": {
     "@babel/runtime": "^7.16.3",
+    "@brightcove/react-player-loader": "^1.4.2",
     "classnames": "^2.3.1",
     "empty-web-gif": "^1.0.1",
     "get-video-id": "^3.4.3",