@quintype/components 3.8.6-jw-player.0 → 3.8.6-jw-player-integration.0

package/dist/cjs/index.js

@@ -3099,41 +3099,54 @@ function _createSuper$a(Derived) { var hasNativeReflectConstruct = _isNativeRefl
 
 function _isNativeReflectConstruct$a() { 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 StoryElementJwPlayer = /*#__PURE__*/function (_React$Component) {
-  _inherits__default["default"](StoryElementJwPlayer, _React$Component);
+var JWPlayerComponent = /*#__PURE__*/function (_React$Component) {
+  _inherits__default["default"](JWPlayerComponent, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper$a(StoryElementJwPlayer);
+  var _super = /*#__PURE__*/_createSuper$a(JWPlayerComponent);
 
-  function StoryElementJwPlayer(props) {
-    _classCallCheck__default["default"](this, StoryElementJwPlayer);
+  function JWPlayerComponent(props) {
+    _classCallCheck__default["default"](this, JWPlayerComponent);
 
     return _super.call(this, props);
   }
 
-  _createClass__default["default"](StoryElementJwPlayer, [{
+  _createClass__default["default"](JWPlayerComponent, [{
     key: "render",
     value: function render() {
-      var _ref = this.props || {};
+      var _ref = this.props || {},
+          element = _ref.element;
           _ref.loadIframeOnClick;
-          var element = _ref.element;
 
       var _ref2 = element || {},
-          _ref2$url = _ref2.url,
-          url = _ref2$url === void 0 ? '' : _ref2$url;
-
-      if (!url) return null;
-      var srcUrl = url.startsWith("//") ? "https:".concat(url) : url;
-      return /*#__PURE__*/React__default["default"].createElement("video", {
-        controls: true,
-        className: "jw-player"
-      }, /*#__PURE__*/React__default["default"].createElement("source", {
-        src: "".concat(srcUrl),
-        type: "video/mp4"
+          metadata = _ref2.metadata;
+
+      var _ref3 = metadata || {};
+          _ref3["player-id"];
+          _ref3["video-id"];
+          var playerUrl = _ref3["player-url"];
+
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        style: {
+          position: 'relative',
+          width: '100%',
+          paddingTop: '56.25%'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("iframe", {
+        src: playerUrl,
+        allowFullScreen: true,
+        frameBorder: "0",
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%'
+        }
       }));
     }
   }]);
 
-  return StoryElementJwPlayer;
+  return JWPlayerComponent;
 }(React__default["default"].Component);
 
 function _createSuper$9(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$9(); 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); }; }
@@ -3738,7 +3751,7 @@ var DEFAULT_TEMPLATES = {
   "also-read": StoryElementAlsoRead,
   file: StoryElementFile,
   "brightcove-video": StoryElementBrightcove,
-  "jwplayer": StoryElementJwPlayer
+  "jwplayer": JWPlayerComponent
 };
 
 var StoryElementBase = /*#__PURE__*/function (_React$Component2) {

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

@@ -10,41 +10,54 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 
-var StoryElementJwPlayer = /*#__PURE__*/function (_React$Component) {
-  _inherits(StoryElementJwPlayer, _React$Component);
+var JWPlayerComponent = /*#__PURE__*/function (_React$Component) {
+  _inherits(JWPlayerComponent, _React$Component);
 
-  var _super = /*#__PURE__*/_createSuper(StoryElementJwPlayer);
+  var _super = /*#__PURE__*/_createSuper(JWPlayerComponent);
 
-  function StoryElementJwPlayer(props) {
-    _classCallCheck(this, StoryElementJwPlayer);
+  function JWPlayerComponent(props) {
+    _classCallCheck(this, JWPlayerComponent);
 
     return _super.call(this, props);
   }
 
-  _createClass(StoryElementJwPlayer, [{
+  _createClass(JWPlayerComponent, [{
     key: "render",
     value: function render() {
       var _ref = this.props || {},
-          loadIframeOnClick = _ref.loadIframeOnClick,
-          element = _ref.element;
+          element = _ref.element,
+          loadIframeOnClick = _ref.loadIframeOnClick;
 
       var _ref2 = element || {},
-          _ref2$url = _ref2.url,
-          url = _ref2$url === void 0 ? '' : _ref2$url;
-
-      if (!url) return null;
-      var srcUrl = url.startsWith("//") ? "https:".concat(url) : url;
-      return /*#__PURE__*/React.createElement("video", {
-        controls: true,
-        className: "jw-player"
-      }, /*#__PURE__*/React.createElement("source", {
-        src: "".concat(srcUrl),
-        type: "video/mp4"
+          metadata = _ref2.metadata;
+
+      var _ref3 = metadata || {},
+          playerId = _ref3["player-id"],
+          videoId = _ref3["video-id"],
+          playerUrl = _ref3["player-url"];
+
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          position: 'relative',
+          width: '100%',
+          paddingTop: '56.25%'
+        }
+      }, /*#__PURE__*/React.createElement("iframe", {
+        src: playerUrl,
+        allowFullScreen: true,
+        frameBorder: "0",
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%'
+        }
       }));
     }
   }]);
 
-  return StoryElementJwPlayer;
+  return JWPlayerComponent;
 }(React.Component);
 
-export default StoryElementJwPlayer;
+export default JWPlayerComponent;

package/package.json

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