@pie-lib/editable-html 12.1.0-next.2 → 12.1.0-next.30

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

@@ -0,0 +1,612 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.reflect.construct.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.join.js");
+require("core-js/modules/es.function.bind.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.match.js");
+require("core-js/modules/es.string.replace.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _debug = _interopRequireDefault(require("debug"));
+var _styles = require("@mui/material/styles");
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+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 matchDriveUrl = function matchDriveUrl(url) {
+  return url && /^https:\/\/drive\.google\.com\/(?:file\/d\/|drive\/(?:u\/\d+\/)?folders\/|uc\?id=)([a-zA-Z0-9_-]+)/.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 {
+      fetch("https://soundcloud.com/oembed?format=json&url=".concat(url)).then(function (response) {
+        return response.json();
+      }).then(function (json) {
+        var d = document.createElement('div');
+        d.innerHTML = json.html;
+        var iframe = d.querySelector('iframe');
+        resolve(iframe.src);
+      })["catch"](function (err) {
+        resolve('');
+        log(err);
+      });
+    } catch (err) {
+      resolve('');
+    }
+  });
+};
+var typeMap = {
+  video: 'Video',
+  audio: 'Audio'
+};
+var tabsTypeMap = {
+  uploadFile: 'upload-file',
+  insertUrl: 'insert-url'
+};
+var StyledDialog = (0, _styles.styled)(_Dialog["default"])(function () {
+  return {
+    '& .MuiPaper-root': {
+      minWidth: '500px'
+    }
+  };
+});
+var StyledDialogContent = (0, _styles.styled)(_DialogContent["default"])(function () {
+  return {
+    '&.properties': {
+      padding: 0
+    }
+  };
+});
+var StyledRow = (0, _styles.styled)('div')(function () {
+  return {
+    display: 'flex',
+    flexDirection: 'space-between'
+  };
+});
+var StyledUploadInput = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    marginTop: theme.spacing(1.5)
+  };
+});
+var StyledError = (0, _styles.styled)(_Typography["default"])(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    marginTop: theme.spacing(1.5),
+    color: theme.palette.error.main
+  };
+});
+var StyledDeleteIcon = (0, _styles.styled)(_IconButton["default"])(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    marginLeft: theme.spacing(1.5)
+  };
+});
+var MediaDialog = exports.MediaDialog = /*#__PURE__*/function (_React$Component) {
+  function MediaDialog(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, MediaDialog);
+    _this = _callSuper(this, MediaDialog, [props]);
+    (0, _defineProperty2["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;
+      var isYoutube = matchYoutubeUrl(url);
+      var isVimeo = matchVimeoUrl(url);
+      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
+      }, callback);
+    });
+    (0, _defineProperty2["default"])(_this, "handleStateChange", function (newState) {
+      return _this.setState(newState, _this.formatUrl);
+    });
+    (0, _defineProperty2["default"])(_this, "checkAudio", function (value) {
+      if (matchSoundCloudUrl(value)) {
+        makeApiRequest(value).then(function (urlToUse) {
+          _this.handleStateChange({
+            urlToUse: urlToUse,
+            invalid: !urlToUse,
+            url: value
+          });
+        })["catch"](log);
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "checkVideo", function (value) {
+      if (matchYoutubeUrl(value)) {
+        var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+        var match = value.match(regExp);
+        var id = match[2];
+        var urlToUse = "https://youtube.com/embed/".concat(id);
+        log('is youtube');
+        _this.handleStateChange({
+          urlToUse: urlToUse,
+          url: value,
+          invalid: false
+        });
+      }
+      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,
+          ends: null,
+          invalid: false
+        });
+      }
+      if (matchDriveUrl(value)) {
+        // https://drive.google.com/file/d/11QkK_gUO068amNvZBm9cxZpKX74WYb8q/view
+        var _id2 = value.replace(/^https:\/\/drive\.google\.com\/(?:file\/d\/|drive\/(?:u\/\d+\/)?folders\/|uc\?id=)([a-zA-Z0-9_-]+)\/.*/, '$1');
+        var _urlToUse3 = "https://drive.google.com/file/d/".concat(_id2, "/preview");
+        log('is google drive');
+        _this.handleStateChange({
+          urlToUse: _urlToUse3,
+          url: value,
+          ends: null,
+          invalid: false
+        });
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "urlChange", function (e) {
+      var _ref4 = e.target || {},
+        value = _ref4.value;
+      var type = _this.props.type;
+      if (type && type === 'audio') {
+        _this.checkAudio();
+        return;
+      } else if (type && type === 'video') {
+        _this.checkVideo(value);
+        return;
+      }
+      _this.handleStateChange({
+        urlToUse: null,
+        url: null,
+        invalid: true
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "changeHandler", function (type) {
+      return function (e) {
+        return _this.handleStateChange((0, _defineProperty2["default"])({}, type, e.target.value));
+      };
+    });
+    (0, _defineProperty2["default"])(_this, "handleDone", function (val) {
+      var handleClose = _this.props.handleClose;
+      var _this$state2 = _this.state,
+        tabValue = _this$state2.tabValue,
+        fileUpload = _this$state2.fileUpload;
+      var isInsertURL = tabValue === tabsTypeMap.insertUrl;
+      if (!val) {
+        if (fileUpload.url) {
+          _this.handleRemoveFile();
+        }
+        handleClose(val);
+        return;
+      }
+      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;
+        handleClose(val, {
+          tag: 'iframe',
+          ends: ends,
+          height: height,
+          starts: starts,
+          width: width,
+          url: url,
+          urlToUse: urlToUse,
+          src: formattedUrl
+        });
+        return;
+      }
+      if (!fileUpload.loading) {
+        handleClose(val, {
+          tag: 'audio',
+          src: fileUpload.url
+        });
+        return;
+      }
+      _this.setState({
+        fileUpload: _objectSpread(_objectSpread({}, fileUpload), {}, {
+          scheduled: true
+        })
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "handleUploadFile", /*#__PURE__*/function () {
+      var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
+        var fileChosen, reader;
+        return _regenerator["default"].wrap(function (_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;
+                _this.setState({
+                  fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
+                    url: dataURL,
+                    mimeType: fileChosen.type
+                  })
+                });
+              };
+              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), {}, {
+                        scheduled: false,
+                        loading: false,
+                        error: err
+                      })
+                    });
+                    return;
+                  }
+                  var fileUpload = _this.state.fileUpload;
+                  var callback = fileUpload && fileUpload.scheduled ? _this.handleDone.bind(_this, true) : undefined;
+                  _this.setState({
+                    fileUpload: _objectSpread(_objectSpread({}, fileUpload), {}, {
+                      scheduled: false,
+                      loading: false,
+                      url: src
+                    })
+                  }, callback);
+                }
+              });
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref5.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])(_this, "handleRemoveFile", /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      return _regenerator["default"].wrap(function (_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
+                  })
+                });
+              }
+            });
+
+            // 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: '',
+                mimeType: ''
+              })
+            });
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    })));
+    var _ends = props.ends,
+      _height = props.height,
+      _src = props.src,
+      _starts = props.starts,
+      _type = props.type,
+      uploadSoundSupport = props.uploadSoundSupport,
+      _url = props.url,
+      _urlToUse = props.urlToUse,
+      _width = props.width;
+    var showUploadFile = (uploadSoundSupport === null || uploadSoundSupport === void 0 ? void 0 : uploadSoundSupport.add) && (uploadSoundSupport === null || uploadSoundSupport === void 0 ? void 0 : uploadSoundSupport["delete"]) && _type !== 'video';
+    _this.state = {
+      ends: _ends || 0,
+      url: _url,
+      urlToUse: _urlToUse,
+      formattedUrl: _src,
+      height: _height || 315,
+      invalid: false,
+      starts: _starts || 0,
+      width: _width || 560,
+      // default selected tab should be upload file if available
+      tabValue: showUploadFile ? tabsTypeMap.uploadFile : tabsTypeMap.insertUrl,
+      fileUpload: {
+        error: null,
+        loading: false,
+        scheduled: false,
+        url: '',
+        mimeType: ''
+      }
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(MediaDialog, _React$Component);
+  return (0, _createClass2["default"])(MediaDialog, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.url) {
+        this.urlChange({
+          target: {
+            value: this.props.url
+          }
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        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,
+        mimeType = _this$state4.mimeType,
+        formattedUrl = _this$state4.formattedUrl,
+        updating = _this$state4.updating,
+        tabValue = _this$state4.tabValue,
+        fileUpload = _this$state4.fileUpload;
+      var isYoutube = matchYoutubeUrl(url);
+      var isInsertURL = tabValue === tabsTypeMap.insertUrl;
+      var isUploadMedia = tabValue === tabsTypeMap.uploadFile;
+      var submitIsDisabled = isInsertURL ? invalid || url === null || url === undefined : !fileUpload.url || fileUpload.scheduled;
+      var showUploadFile = (uploadSoundSupport === null || uploadSoundSupport === void 0 ? void 0 : uploadSoundSupport.add) && (uploadSoundSupport === null || uploadSoundSupport === void 0 ? void 0 : uploadSoundSupport["delete"]) && type !== 'video';
+      return /*#__PURE__*/_react["default"].createElement(StyledDialog, {
+        disablePortal: disablePortal,
+        open: open,
+        onClose: function onClose() {
+          return _this2.handleDone(false);
+        },
+        "aria-labelledby": "form-dialog-title"
+      }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
+        id: "form-dialog-title"
+      }, "Insert ", typeMap[type]), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(StyledRow, null, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+        indicatorColor: "primary",
+        value: tabValue,
+        onChange: function onChange(event, value) {
+          _this2.setState({
+            tabValue: value
+          });
+        }
+      }, showUploadFile ? /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+        value: tabsTypeMap.uploadFile,
+        label: "Upload file"
+      }) : null, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+        value: tabsTypeMap.insertUrl,
+        label: type === 'video' ? 'Insert YouTube, Vimeo, or Google Drive URL' : 'Insert SoundCloud URL'
+      }))), isInsertURL && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        autoFocus: true,
+        error: invalid,
+        helperText: invalid ? 'Invalid URL' : '',
+        margin: "dense",
+        id: "name",
+        label: "URL",
+        placeholder: "Paste URL of ".concat(type, "..."),
+        type: "text",
+        onChange: this.urlChange,
+        value: url,
+        fullWidth: true
+      }), type === 'video' && /*#__PURE__*/_react["default"].createElement(StyledDialogContent, {
+        className: "properties"
+      }, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], null, "Video Properties"), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        autoFocus: true,
+        margin: "dense",
+        id: "width",
+        label: "Width",
+        type: "number",
+        placeholder: "Width",
+        value: width,
+        onChange: this.changeHandler('width')
+      }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        autoFocus: true,
+        margin: "dense",
+        id: "height",
+        label: "Height",
+        type: "number",
+        placeholder: "Height",
+        value: height,
+        onChange: this.changeHandler('height')
+      })), formattedUrl && /*#__PURE__*/_react["default"].createElement("iframe", {
+        width: width,
+        height: height,
+        src: formattedUrl,
+        frameBorder: "0",
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+        allowFullScreen: true
+      }), type === 'video' && (formattedUrl || updating) && !invalid && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledDialogContent, {
+        className: "properties"
+      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        autoFocus: true,
+        margin: "dense",
+        id: "starts",
+        label: "Starts",
+        type: "number",
+        placeholder: "Starts",
+        value: starts,
+        onChange: this.changeHandler('starts')
+      }), isYoutube && /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        autoFocus: true,
+        margin: "dense",
+        id: "ends",
+        label: "Ends",
+        type: "number",
+        placeholder: "Ends",
+        value: ends,
+        onChange: this.changeHandler('ends')
+      })))), isUploadMedia && /*#__PURE__*/_react["default"].createElement(StyledUploadInput, null, /*#__PURE__*/_react["default"].createElement("div", null, fileUpload.url ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledRow, null, /*#__PURE__*/_react["default"].createElement("audio", {
+        controls: "controls",
+        controlsList: "nodownload"
+      }, /*#__PURE__*/_react["default"].createElement("source", {
+        type: mimeType,
+        src: fileUpload.url
+      })), /*#__PURE__*/_react["default"].createElement(StyledDeleteIcon, {
+        "aria-label": "delete",
+        onClick: this.handleRemoveFile,
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null))), !fileUpload.scheduled && fileUpload.loading ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "subheading"
+      }, "Loading...") : null, fileUpload.scheduled ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "subheading"
+      }, "Waiting for Upload to finish, then inserting item...") : null) : !fileUpload.loading ? /*#__PURE__*/_react["default"].createElement("input", {
+        accept: "audio/*",
+        onChange: this.handleUploadFile,
+        type: "file"
+      }) : null, !!fileUpload.error && /*#__PURE__*/_react["default"].createElement(StyledError, {
+        variant: "caption"
+      }, fileUpload.error))))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        onClick: function onClick() {
+          return _this2.handleDone(false);
+        },
+        color: "primary"
+      }, "Cancel"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        disabled: submitIsDisabled,
+        onClick: function onClick() {
+          return _this2.handleDone(true);
+        },
+        color: "primary"
+      }, edit ? 'Update' : 'Insert')));
+    }
+  }]);
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(MediaDialog, "propTypes", {
+  open: _propTypes["default"].bool,
+  edit: _propTypes["default"].bool,
+  disablePortal: _propTypes["default"].bool,
+  handleClose: _propTypes["default"].func,
+  uploadSoundSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func,
+    "delete": _propTypes["default"].func
+  }),
+  type: _propTypes["default"].string,
+  src: _propTypes["default"].string,
+  url: _propTypes["default"].string,
+  urlToUse: _propTypes["default"].string,
+  starts: _propTypes["default"].number,
+  ends: _propTypes["default"].number,
+  height: _propTypes["default"].number,
+  width: _propTypes["default"].number
+});
+var _default = exports["default"] = MediaDialog;
+//# sourceMappingURL=media-dialog.js.map