@pie-lib/editable-html 11.18.6-esmbeta.0 → 11.19.0-mui-update.0

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

@@ -1,105 +1,62 @@
 "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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 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 _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 {
@@ -119,7 +76,6 @@ var makeApiRequest = function makeApiRequest(url) {
     }
   });
 };
-
 var typeMap = {
   video: 'Video',
   audio: 'Audio'
@@ -128,75 +84,99 @@ var tabsTypeMap = {
   uploadFile: 'upload-file',
   insertUrl: 'insert-url'
 };
-
-var MediaDialog = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(MediaDialog, _React$Component);
-
-  var _super = _createSuper(MediaDialog);
-
+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 = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "formatUrl", function () {
+    _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;
+        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"])((0, _assertThisInitialized2["default"])(_this), "handleStateChange", function (newState) {
+    (0, _defineProperty2["default"])(_this, "handleStateChange", function (newState) {
       return _this.setState(newState, _this.formatUrl);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "checkAudio", function (value) {
+    (0, _defineProperty2["default"])(_this, "checkAudio", function (value) {
       if (matchSoundCloudUrl(value)) {
         makeApiRequest(value).then(function (urlToUse) {
           _this.handleStateChange({
@@ -207,28 +187,23 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
         })["catch"](log);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "checkVideo", function (value) {
+    (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,
@@ -236,15 +211,11 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
           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,
@@ -253,58 +224,50 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "urlChange", function (e) {
-      var _ref = e.target || {},
-          value = _ref.value;
-
+    (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"])((0, _assertThisInitialized2["default"])(_this), "changeHandler", function (type) {
+    (0, _defineProperty2["default"])(_this, "changeHandler", function (type) {
       return function (e) {
         return _this.handleStateChange((0, _defineProperty2["default"])({}, type, e.target.value));
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDone", function (val) {
+    (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;
+        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;
+          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,
@@ -317,7 +280,6 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
         });
         return;
       }
-
       if (!fileUpload.loading) {
         handleClose(val, {
           tag: 'audio',
@@ -325,133 +287,113 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
         });
         return;
       }
-
       _this.setState({
         fileUpload: _objectSpread(_objectSpread({}, fileUpload), {}, {
           scheduled: true
         })
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleUploadFile", /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
+    (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 _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                e.preventDefault();
-
+        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), {}, {
-                    error: null,
-                    loading: true
+                    url: dataURL,
+                    mimeType: fileChosen.type
                   })
                 });
-
-                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((0, _assertThisInitialized2["default"])(_this), true) : undefined;
-
+              };
+              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({}, fileUpload), {}, {
+                      fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
                         scheduled: false,
                         loading: false,
-                        url: src
+                        error: err
                       })
-                    }, callback);
+                    });
+                    return;
                   }
-                });
-
-              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);
-
+                  var fileUpload = _this.state.fileUpload;
+                  var callback = fileUpload && fileUpload.scheduled ? _this.handleDone.bind(_this, true) : undefined;
                   _this.setState({
-                    fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
-                      error: err
+                    fileUpload: _objectSpread(_objectSpread({}, fileUpload), {}, {
+                      scheduled: false,
+                      loading: false,
+                      url: src
                     })
-                  });
+                  }, callback);
                 }
-              }); // 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 2:
+            case 1:
             case "end":
-              return _context2.stop();
+              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;
+      _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,
@@ -474,8 +416,8 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-
-  (0, _createClass2["default"])(MediaDialog, [{
+  (0, _inherits2["default"])(MediaDialog, _React$Component);
+  return (0, _createClass2["default"])(MediaDialog, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       if (this.props.url) {
@@ -490,35 +432,30 @@ 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;
+        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;
+        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(_Dialog["default"], {
-        classes: {
-          paper: classes.paper
-        },
+      return /*#__PURE__*/_react["default"].createElement(StyledDialog, {
         disablePortal: disablePortal,
         open: open,
         onClose: function onClose() {
@@ -527,9 +464,7 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
         "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("div", {
-        className: classes.row
-      }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      }, "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) {
@@ -555,10 +490,8 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
         onChange: this.urlChange,
         value: url,
         fullWidth: true
-      }), type === 'video' && /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
-        classes: {
-          root: classes.properties
-        }
+      }), 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",
@@ -584,10 +517,8 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
         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(_DialogContent["default"], {
-        classes: {
-          root: classes.properties
-        }
+      }), 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",
@@ -606,31 +537,25 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
         placeholder: "Ends",
         value: ends,
         onChange: this.changeHandler('ends')
-      })))), isUploadMedia && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.uploadInput
-      }, /*#__PURE__*/_react["default"].createElement("div", null, fileUpload.url ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.row
-      }, /*#__PURE__*/_react["default"].createElement("audio", {
+      })))), 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(_IconButton["default"], {
+      })), /*#__PURE__*/_react["default"].createElement(StyledDeleteIcon, {
         "aria-label": "delete",
-        className: classes.deleteIcon,
-        onClick: this.handleRemoveFile
+        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/*",
-        className: classes.input,
         onChange: this.handleUploadFile,
         type: "file"
-      }) : null, !!fileUpload.error && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        className: classes.error,
+      }) : 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() {
@@ -646,12 +571,8 @@ var MediaDialog = /*#__PURE__*/function (_React$Component) {
       }, edit ? 'Update' : 'Insert')));
     }
   }]);
-  return MediaDialog;
 }(_react["default"].Component);
-
-exports.MediaDialog = MediaDialog;
 (0, _defineProperty2["default"])(MediaDialog, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
   open: _propTypes["default"].bool,
   edit: _propTypes["default"].bool,
   disablePortal: _propTypes["default"].bool,
@@ -669,41 +590,5 @@ exports.MediaDialog = MediaDialog;
   height: _propTypes["default"].number,
   width: _propTypes["default"].number
 });
-
-var styles = function styles(theme) {
-  return {
-    paper: {
-      minWidth: '500px'
-    },
-    properties: {
-      padding: 0
-    },
-    row: {
-      display: 'flex',
-      flexDirection: 'space-between'
-    },
-    rowItem: {
-      marginRight: theme.spacing.unit * 1.5,
-      cursor: 'pointer'
-    },
-    active: {
-      color: _renderUi.color.primary(),
-      borderBottom: "2px solid ".concat(_renderUi.color.primary())
-    },
-    uploadInput: {
-      marginTop: theme.spacing.unit * 1.5
-    },
-    error: {
-      marginTop: theme.spacing.unit * 1.5,
-      color: theme.palette.error.main
-    },
-    deleteIcon: {
-      marginLeft: theme.spacing.unit * 1.5
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(MediaDialog);
-
-exports["default"] = _default;
+var _default = exports["default"] = MediaDialog;
 //# sourceMappingURL=media-dialog.js.map