@pie-lib/editable-html 10.0.0-beta.7 → 10.0.0

package/lib/plugins/media/media-dialog.js

@@ -1,61 +1,101 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.MediaDialog = void 0;
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _debug = _interopRequireDefault(require("debug"));
+
 var _renderUi = require("@pie-lib/render-ui");
+
 var _styles = require("@material-ui/core/styles");
+
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
 var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+
 var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
+
 var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
+
 var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+
 var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
 var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));
+
 var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
 var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
 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; } }
+
 var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:media:dialog');
+
 var matchYoutubeUrl = function matchYoutubeUrl(url) {
   if (!url) {
     return false;
   }
+
   var p = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
+
   if (url.match(p)) {
     return url.match(p)[1];
   }
+
   return false;
 };
+
 var matchVimeoUrl = function matchVimeoUrl(url) {
   return url && /(http|https)?:\/\/(www\.)?(player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(video\/)?(\d+)(?:|\/\?)/.test(url);
 };
+
 var matchSoundCloudUrl = function matchSoundCloudUrl(url) {
   if (!url) {
     return false;
   }
+
   var regexp = /^https?:\/\/(soundcloud\.com|snd\.sc)\/(.*)$/;
   return url.match(regexp) && url.match(regexp)[2];
 };
+
 var makeApiRequest = function makeApiRequest(url) {
   return new Promise(function (resolve) {
     try {
@@ -75,57 +115,71 @@ var makeApiRequest = function makeApiRequest(url) {
     }
   });
 };
+
 var typeMap = {
   video: 'Video',
   audio: 'Audio'
 };
+
 var MediaDialog = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(MediaDialog, _React$Component);
+
   var _super = _createSuper(MediaDialog);
+
   function MediaDialog(props) {
     var _this;
+
     (0, _classCallCheck2["default"])(this, MediaDialog);
     _this = _super.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "formatUrl", function () {
       var _this$state = _this.state,
-        url = _this$state.url,
-        urlToUse = _this$state.urlToUse,
-        starts = _this$state.starts,
-        ends = _this$state.ends;
+          url = _this$state.url,
+          urlToUse = _this$state.urlToUse,
+          starts = _this$state.starts,
+          ends = _this$state.ends;
       var isYoutube = matchYoutubeUrl(url);
       var isVimeo = matchVimeoUrl(url);
-      var formattedUrl = urlToUse || '';
+      var formattedUrl = urlToUse;
+
       if ((isYoutube || isVimeo) && urlToUse) {
         var params = [];
         var paramName;
         var paramStart;
+
         switch (true) {
           case isVimeo:
             paramName = 't';
             paramStart = '#';
             break;
+
           case isYoutube:
             paramName = 'start';
             paramStart = '?';
             break;
+
           default:
             paramName = 'start';
             paramStart = '?';
         }
+
         if (starts) {
           params.push("".concat(paramName, "=").concat(starts));
         }
+
         if (ends) {
           params.push("end=".concat(ends));
         }
+
         formattedUrl = "".concat(urlToUse).concat(params.length ? paramStart : '').concat(params.join('&'));
       }
+
       var callback = function callback() {
         return _this.setState({
           formattedUrl: formattedUrl,
           updating: false
         });
       };
+
       _this.setState({
         formattedUrl: null,
         updating: true
@@ -136,15 +190,17 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "urlChange", function (e) {
       var _ref = e.target || {},
-        value = _ref.value;
+          value = _ref.value;
+
       var type = _this.props.type;
+
       if (type && type === 'audio') {
         if (matchSoundCloudUrl(value)) {
           makeApiRequest(value).then(function (urlToUse) {
             _this.handleStateChange({
               urlToUse: urlToUse,
               invalid: !urlToUse,
-              url: value || ''
+              url: value
             });
           })["catch"](log);
           return;
@@ -156,29 +212,37 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
           var id = match[2];
           var urlToUse = "https://youtube.com/embed/".concat(id);
           log('is youtube');
+
           _this.handleStateChange({
             urlToUse: urlToUse,
-            url: value || '',
+            url: value,
             invalid: false
           });
+
           return;
         }
+
         if (matchVimeoUrl(value)) {
           var _id = value.replace(/.*vimeo.com\/(.*)/g, '$1');
+
           var _urlToUse2 = "https://player.vimeo.com/video/".concat(_id);
+
           log('is vimeo');
+
           _this.handleStateChange({
             urlToUse: _urlToUse2,
-            url: value || '',
+            url: value,
             ends: null,
             invalid: false
           });
+
           return;
         }
       }
+
       _this.handleStateChange({
-        urlToUse: '',
-        url: '',
+        urlToUse: null,
+        url: null,
         invalid: true
       });
     });
@@ -190,23 +254,25 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDone", function (val) {
       var handleClose = _this.props.handleClose;
       var _this$state2 = _this.state,
-        tabValue = _this$state2.tabValue,
-        fileUpload = _this$state2.fileUpload;
+          tabValue = _this$state2.tabValue,
+          fileUpload = _this$state2.fileUpload;
       var isInsertURL = tabValue === 0;
+
       if (!val) {
         if (fileUpload.url) {
           _this.handleRemoveFile();
         }
+
         handleClose(val);
       } else if (isInsertURL) {
         var _this$state3 = _this.state,
-          ends = _this$state3.ends,
-          height = _this$state3.height,
-          url = _this$state3.url,
-          urlToUse = _this$state3.urlToUse,
-          formattedUrl = _this$state3.formattedUrl,
-          starts = _this$state3.starts,
-          width = _this$state3.width;
+            ends = _this$state3.ends,
+            height = _this$state3.height,
+            url = _this$state3.url,
+            urlToUse = _this$state3.urlToUse,
+            formattedUrl = _this$state3.formattedUrl,
+            starts = _this$state3.starts,
+            width = _this$state3.width;
         handleClose(val, {
           tag: 'iframe',
           ends: ends,
@@ -228,106 +294,121 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
       var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
         var fileChosen, reader;
         return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              e.preventDefault();
-              _this.setState({
-                fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
-                  error: null,
-                  loading: true
-                })
-              });
-              fileChosen = e.target.files[0];
-              reader = new FileReader();
-              reader.onload = function () {
-                var dataURL = reader.result;
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                e.preventDefault();
+
                 _this.setState({
                   fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
-                    url: dataURL
+                    error: null,
+                    loading: true
                   })
                 });
-              };
-              reader.readAsDataURL(fileChosen);
-              _this.props.uploadSoundSupport.add({
-                fileChosen: fileChosen,
-                done: function done(err, src) {
-                  log('done: err:', err);
-                  if (err) {
-                    //eslint-disable-next-line
-                    console.log(err);
-                    _this.setState({
-                      fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
-                        loading: false,
-                        error: err
-                      })
-                    });
-                  } else {
-                    _this.setState({
-                      fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
-                        loading: false,
-                        url: src
-                      })
-                    });
+
+                fileChosen = e.target.files[0];
+                reader = new FileReader();
+
+                reader.onload = function () {
+                  var dataURL = reader.result;
+
+                  _this.setState({
+                    fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
+                      url: dataURL
+                    })
+                  });
+                };
+
+                reader.readAsDataURL(fileChosen);
+
+                _this.props.uploadSoundSupport.add({
+                  fileChosen: fileChosen,
+                  done: function done(err, src) {
+                    log('done: err:', err);
+
+                    if (err) {
+                      //eslint-disable-next-line
+                      console.log(err);
+
+                      _this.setState({
+                        fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
+                          loading: false,
+                          error: err
+                        })
+                      });
+                    } else {
+                      _this.setState({
+                        fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
+                          loading: false,
+                          url: src
+                        })
+                      });
+                    }
                   }
-                }
-              });
-            case 7:
-            case "end":
-              return _context.stop();
+                });
+
+              case 7:
+              case "end":
+                return _context.stop();
+            }
           }
         }, _callee);
       }));
+
       return function (_x) {
         return _ref2.apply(this, arguments);
       };
     }());
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleRemoveFile", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
       return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _this.props.uploadSoundSupport["delete"](_this.state.fileUpload.url, function (err) {
-              if (err) {
-                //eslint-disable-next-line
-                console.log(err);
-                _this.setState({
-                  fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
-                    error: err
-                  })
-                });
-              }
-            });
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _this.props.uploadSoundSupport["delete"](_this.state.fileUpload.url, function (err) {
+                if (err) {
+                  //eslint-disable-next-line
+                  console.log(err);
 
-            // we should put it inside uploadSoundSupport.delete but we can leave it here for testing purposes
-            _this.setState({
-              fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
-                loading: false,
-                url: ''
-              })
-            });
-          case 2:
-          case "end":
-            return _context2.stop();
+                  _this.setState({
+                    fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
+                      error: err
+                    })
+                  });
+                }
+              }); // we should put it inside uploadSoundSupport.delete but we can leave it here for testing purposes
+
+
+              _this.setState({
+                fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
+                  loading: false,
+                  url: ''
+                })
+              });
+
+            case 2:
+            case "end":
+              return _context2.stop();
+          }
         }
       }, _callee2);
     })));
     var _src = props.src,
-      _starts = props.starts,
-      _ends = props.ends,
-      _height = props.height,
-      _url = props.url,
-      _urlToUse = props.urlToUse,
-      _width = props.width;
+        _starts = props.starts,
+        _ends = props.ends,
+        _height = props.height,
+        _url = props.url,
+        _urlToUse = props.urlToUse,
+        _width = props.width;
     _this.state = {
       ends: _ends || 0,
-      url: _url || '',
-      urlToUse: _urlToUse || '',
-      formattedUrl: _src || '',
+      url: _url,
+      urlToUse: _urlToUse,
+      formattedUrl: _src,
       height: _height || 315,
       invalid: false,
       starts: _starts || 0,
       width: _width || 560,
       tabValue: 0,
-      updating: false,
       fileUpload: {
         loading: false,
         url: '',
@@ -336,6 +417,7 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
+
   (0, _createClass2["default"])(MediaDialog, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -351,24 +433,25 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
+
       var _this$props = this.props,
-        classes = _this$props.classes,
-        open = _this$props.open,
-        disablePortal = _this$props.disablePortal,
-        type = _this$props.type,
-        edit = _this$props.edit,
-        uploadSoundSupport = _this$props.uploadSoundSupport;
+          classes = _this$props.classes,
+          open = _this$props.open,
+          disablePortal = _this$props.disablePortal,
+          type = _this$props.type,
+          edit = _this$props.edit,
+          uploadSoundSupport = _this$props.uploadSoundSupport;
       var _this$state4 = this.state,
-        ends = _this$state4.ends,
-        height = _this$state4.height,
-        invalid = _this$state4.invalid,
-        starts = _this$state4.starts,
-        width = _this$state4.width,
-        url = _this$state4.url,
-        formattedUrl = _this$state4.formattedUrl,
-        updating = _this$state4.updating,
-        tabValue = _this$state4.tabValue,
-        fileUpload = _this$state4.fileUpload;
+          ends = _this$state4.ends,
+          height = _this$state4.height,
+          invalid = _this$state4.invalid,
+          starts = _this$state4.starts,
+          width = _this$state4.width,
+          url = _this$state4.url,
+          formattedUrl = _this$state4.formattedUrl,
+          updating = _this$state4.updating,
+          tabValue = _this$state4.tabValue,
+          fileUpload = _this$state4.fileUpload;
       var isYoutube = matchYoutubeUrl(url);
       var isInsertURL = tabValue === 0;
       var isUploadMedia = tabValue === 1;
@@ -501,6 +584,7 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
   }]);
   return MediaDialog;
 }(_react["default"].Component);
+
 exports.MediaDialog = MediaDialog;
 (0, _defineProperty2["default"])(MediaDialog, "propTypes", {
   classes: _propTypes["default"].object.isRequired,
@@ -521,6 +605,7 @@ exports.MediaDialog = MediaDialog;
   height: _propTypes["default"].number,
   width: _propTypes["default"].number
 });
+
 var styles = function styles(theme) {
   return {
     paper: {
@@ -553,6 +638,8 @@ var styles = function styles(theme) {
     }
   };
 };
+
 var _default = (0, _styles.withStyles)(styles)(MediaDialog);
+
 exports["default"] = _default;
 //# sourceMappingURL=media-dialog.js.map