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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/lib/block-tags.js +24 -0
  3. package/lib/block-tags.js.map +1 -0
  4. package/lib/constants.js +11 -0
  5. package/lib/constants.js.map +1 -0
  6. package/lib/editor.js +1224 -0
  7. package/lib/editor.js.map +1 -0
  8. package/lib/index.js +208 -0
  9. package/lib/index.js.map +1 -0
  10. package/lib/parse-html.js +16 -0
  11. package/lib/parse-html.js.map +1 -0
  12. package/lib/plugins/characters/custom-popper.js +57 -0
  13. package/lib/plugins/characters/custom-popper.js.map +1 -0
  14. package/lib/plugins/characters/index.js +265 -0
  15. package/lib/plugins/characters/index.js.map +1 -0
  16. package/lib/plugins/characters/utils.js +378 -0
  17. package/lib/plugins/characters/utils.js.map +1 -0
  18. package/lib/plugins/css/icons/index.js +25 -0
  19. package/lib/plugins/css/icons/index.js.map +1 -0
  20. package/lib/plugins/css/index.js +338 -0
  21. package/lib/plugins/css/index.js.map +1 -0
  22. package/lib/plugins/customPlugin/index.js +98 -0
  23. package/lib/plugins/customPlugin/index.js.map +1 -0
  24. package/lib/plugins/html/icons/index.js +30 -0
  25. package/lib/plugins/html/icons/index.js.map +1 -0
  26. package/lib/plugins/html/index.js +71 -0
  27. package/lib/plugins/html/index.js.map +1 -0
  28. package/lib/plugins/image/alt-dialog.js +100 -0
  29. package/lib/plugins/image/alt-dialog.js.map +1 -0
  30. package/lib/plugins/image/component.js +343 -0
  31. package/lib/plugins/image/component.js.map +1 -0
  32. package/lib/plugins/image/image-toolbar.js +137 -0
  33. package/lib/plugins/image/image-toolbar.js.map +1 -0
  34. package/lib/plugins/image/index.js +223 -0
  35. package/lib/plugins/image/index.js.map +1 -0
  36. package/lib/plugins/image/insert-image-handler.js +140 -0
  37. package/lib/plugins/image/insert-image-handler.js.map +1 -0
  38. package/lib/plugins/index.js +342 -0
  39. package/lib/plugins/index.js.map +1 -0
  40. package/lib/plugins/list/index.js +288 -0
  41. package/lib/plugins/list/index.js.map +1 -0
  42. package/lib/plugins/math/index.js +402 -0
  43. package/lib/plugins/math/index.js.map +1 -0
  44. package/lib/plugins/media/index.js +330 -0
  45. package/lib/plugins/media/index.js.map +1 -0
  46. package/lib/plugins/media/media-dialog.js +594 -0
  47. package/lib/plugins/media/media-dialog.js.map +1 -0
  48. package/lib/plugins/media/media-toolbar.js +76 -0
  49. package/lib/plugins/media/media-toolbar.js.map +1 -0
  50. package/lib/plugins/media/media-wrapper.js +64 -0
  51. package/lib/plugins/media/media-wrapper.js.map +1 -0
  52. package/lib/plugins/rendering/index.js +36 -0
  53. package/lib/plugins/rendering/index.js.map +1 -0
  54. package/lib/plugins/respArea/drag-in-the-blank/choice.js +271 -0
  55. package/lib/plugins/respArea/drag-in-the-blank/choice.js.map +1 -0
  56. package/lib/plugins/respArea/drag-in-the-blank/index.js +55 -0
  57. package/lib/plugins/respArea/drag-in-the-blank/index.js.map +1 -0
  58. package/lib/plugins/respArea/drag-in-the-blank/utils.js +38 -0
  59. package/lib/plugins/respArea/drag-in-the-blank/utils.js.map +1 -0
  60. package/lib/plugins/respArea/explicit-constructed-response/index.js +50 -0
  61. package/lib/plugins/respArea/explicit-constructed-response/index.js.map +1 -0
  62. package/lib/plugins/respArea/icons/index.js +72 -0
  63. package/lib/plugins/respArea/icons/index.js.map +1 -0
  64. package/lib/plugins/respArea/index.js +287 -0
  65. package/lib/plugins/respArea/index.js.map +1 -0
  66. package/lib/plugins/respArea/inline-dropdown/index.js +67 -0
  67. package/lib/plugins/respArea/inline-dropdown/index.js.map +1 -0
  68. package/lib/plugins/respArea/math-templated/index.js +112 -0
  69. package/lib/plugins/respArea/math-templated/index.js.map +1 -0
  70. package/lib/plugins/respArea/utils.js +95 -0
  71. package/lib/plugins/respArea/utils.js.map +1 -0
  72. package/lib/plugins/table/CustomTablePlugin.js +116 -0
  73. package/lib/plugins/table/CustomTablePlugin.js.map +1 -0
  74. package/lib/plugins/table/icons/index.js +55 -0
  75. package/lib/plugins/table/icons/index.js.map +1 -0
  76. package/lib/plugins/table/index.js +413 -0
  77. package/lib/plugins/table/index.js.map +1 -0
  78. package/lib/plugins/table/table-toolbar.js +138 -0
  79. package/lib/plugins/table/table-toolbar.js.map +1 -0
  80. package/lib/plugins/textAlign/icons/index.js +187 -0
  81. package/lib/plugins/textAlign/icons/index.js.map +1 -0
  82. package/lib/plugins/textAlign/index.js +26 -0
  83. package/lib/plugins/textAlign/index.js.map +1 -0
  84. package/lib/plugins/toolbar/default-toolbar.js +180 -0
  85. package/lib/plugins/toolbar/default-toolbar.js.map +1 -0
  86. package/lib/plugins/toolbar/done-button.js +35 -0
  87. package/lib/plugins/toolbar/done-button.js.map +1 -0
  88. package/lib/plugins/toolbar/editor-and-toolbar.js +258 -0
  89. package/lib/plugins/toolbar/editor-and-toolbar.js.map +1 -0
  90. package/lib/plugins/toolbar/index.js +29 -0
  91. package/lib/plugins/toolbar/index.js.map +1 -0
  92. package/lib/plugins/toolbar/toolbar-buttons.js +145 -0
  93. package/lib/plugins/toolbar/toolbar-buttons.js.map +1 -0
  94. package/lib/plugins/toolbar/toolbar.js +307 -0
  95. package/lib/plugins/toolbar/toolbar.js.map +1 -0
  96. package/lib/plugins/utils.js +42 -0
  97. package/lib/plugins/utils.js.map +1 -0
  98. package/lib/serialization.js +571 -0
  99. package/lib/serialization.js.map +1 -0
  100. package/lib/shared/alert-dialog.js +68 -0
  101. package/lib/theme.js +8 -0
  102. package/lib/theme.js.map +1 -0
  103. package/package.json +7 -7
@@ -0,0 +1,594 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = exports.MediaDialog = void 0;
8
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
9
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
10
+ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
11
+ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
12
+ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
13
+ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
14
+ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
15
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
+ var _react = _interopRequireDefault(require("react"));
17
+ var _propTypes = _interopRequireDefault(require("prop-types"));
18
+ var _debug = _interopRequireDefault(require("debug"));
19
+ var _styles = require("@mui/material/styles");
20
+ var _Button = _interopRequireDefault(require("@mui/material/Button"));
21
+ var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
22
+ var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
23
+ var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
24
+ var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
25
+ var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
26
+ var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
27
+ var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
28
+ var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
29
+ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
30
+ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
31
+ var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
32
+ 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; }
33
+ 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; }
34
+ 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)); }
35
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
36
+ var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:media:dialog');
37
+ var matchYoutubeUrl = function matchYoutubeUrl(url) {
38
+ if (!url) {
39
+ return false;
40
+ }
41
+ var p = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
42
+ if (url.match(p)) {
43
+ return url.match(p)[1];
44
+ }
45
+ return false;
46
+ };
47
+ var matchVimeoUrl = function matchVimeoUrl(url) {
48
+ return url && /(http|https)?:\/\/(www\.)?(player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(video\/)?(\d+)(?:|\/\?)/.test(url);
49
+ };
50
+ var matchDriveUrl = function matchDriveUrl(url) {
51
+ return url && /^https:\/\/drive\.google\.com\/(?:file\/d\/|drive\/(?:u\/\d+\/)?folders\/|uc\?id=)([a-zA-Z0-9_-]+)/.test(url);
52
+ };
53
+ var matchSoundCloudUrl = function matchSoundCloudUrl(url) {
54
+ if (!url) {
55
+ return false;
56
+ }
57
+ var regexp = /^https?:\/\/(soundcloud\.com|snd\.sc)\/(.*)$/;
58
+ return url.match(regexp) && url.match(regexp)[2];
59
+ };
60
+ var makeApiRequest = function makeApiRequest(url) {
61
+ return new Promise(function (resolve) {
62
+ try {
63
+ fetch("https://soundcloud.com/oembed?format=json&url=".concat(url)).then(function (response) {
64
+ return response.json();
65
+ }).then(function (json) {
66
+ var d = document.createElement('div');
67
+ d.innerHTML = json.html;
68
+ var iframe = d.querySelector('iframe');
69
+ resolve(iframe.src);
70
+ })["catch"](function (err) {
71
+ resolve('');
72
+ log(err);
73
+ });
74
+ } catch (err) {
75
+ resolve('');
76
+ }
77
+ });
78
+ };
79
+ var typeMap = {
80
+ video: 'Video',
81
+ audio: 'Audio'
82
+ };
83
+ var tabsTypeMap = {
84
+ uploadFile: 'upload-file',
85
+ insertUrl: 'insert-url'
86
+ };
87
+ var StyledDialog = (0, _styles.styled)(_Dialog["default"])(function () {
88
+ return {
89
+ '& .MuiPaper-root': {
90
+ minWidth: '500px'
91
+ }
92
+ };
93
+ });
94
+ var StyledDialogContent = (0, _styles.styled)(_DialogContent["default"])(function () {
95
+ return {
96
+ '&.properties': {
97
+ padding: 0
98
+ }
99
+ };
100
+ });
101
+ var StyledRow = (0, _styles.styled)('div')(function () {
102
+ return {
103
+ display: 'flex',
104
+ flexDirection: 'space-between'
105
+ };
106
+ });
107
+ var StyledUploadInput = (0, _styles.styled)('div')(function (_ref) {
108
+ var theme = _ref.theme;
109
+ return {
110
+ marginTop: theme.spacing(1.5)
111
+ };
112
+ });
113
+ var StyledError = (0, _styles.styled)(_Typography["default"])(function (_ref2) {
114
+ var theme = _ref2.theme;
115
+ return {
116
+ marginTop: theme.spacing(1.5),
117
+ color: theme.palette.error.main
118
+ };
119
+ });
120
+ var StyledDeleteIcon = (0, _styles.styled)(_IconButton["default"])(function (_ref3) {
121
+ var theme = _ref3.theme;
122
+ return {
123
+ marginLeft: theme.spacing(1.5)
124
+ };
125
+ });
126
+ var MediaDialog = exports.MediaDialog = /*#__PURE__*/function (_React$Component) {
127
+ function MediaDialog(props) {
128
+ var _this;
129
+ (0, _classCallCheck2["default"])(this, MediaDialog);
130
+ _this = _callSuper(this, MediaDialog, [props]);
131
+ (0, _defineProperty2["default"])(_this, "formatUrl", function () {
132
+ var _this$state = _this.state,
133
+ url = _this$state.url,
134
+ urlToUse = _this$state.urlToUse,
135
+ starts = _this$state.starts,
136
+ ends = _this$state.ends;
137
+ var isYoutube = matchYoutubeUrl(url);
138
+ var isVimeo = matchVimeoUrl(url);
139
+ var formattedUrl = urlToUse;
140
+ if ((isYoutube || isVimeo) && urlToUse) {
141
+ var params = [];
142
+ var paramName;
143
+ var paramStart;
144
+ switch (true) {
145
+ case isVimeo:
146
+ paramName = 't';
147
+ paramStart = '#';
148
+ break;
149
+ case isYoutube:
150
+ paramName = 'start';
151
+ paramStart = '?';
152
+ break;
153
+ default:
154
+ paramName = 'start';
155
+ paramStart = '?';
156
+ }
157
+ if (starts) {
158
+ params.push("".concat(paramName, "=").concat(starts));
159
+ }
160
+ if (ends) {
161
+ params.push("end=".concat(ends));
162
+ }
163
+ formattedUrl = "".concat(urlToUse).concat(params.length ? paramStart : '').concat(params.join('&'));
164
+ }
165
+ var callback = function callback() {
166
+ return _this.setState({
167
+ formattedUrl: formattedUrl,
168
+ updating: false
169
+ });
170
+ };
171
+ _this.setState({
172
+ formattedUrl: null,
173
+ updating: true
174
+ }, callback);
175
+ });
176
+ (0, _defineProperty2["default"])(_this, "handleStateChange", function (newState) {
177
+ return _this.setState(newState, _this.formatUrl);
178
+ });
179
+ (0, _defineProperty2["default"])(_this, "checkAudio", function (value) {
180
+ if (matchSoundCloudUrl(value)) {
181
+ makeApiRequest(value).then(function (urlToUse) {
182
+ _this.handleStateChange({
183
+ urlToUse: urlToUse,
184
+ invalid: !urlToUse,
185
+ url: value
186
+ });
187
+ })["catch"](log);
188
+ }
189
+ });
190
+ (0, _defineProperty2["default"])(_this, "checkVideo", function (value) {
191
+ if (matchYoutubeUrl(value)) {
192
+ var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
193
+ var match = value.match(regExp);
194
+ var id = match[2];
195
+ var urlToUse = "https://youtube.com/embed/".concat(id);
196
+ log('is youtube');
197
+ _this.handleStateChange({
198
+ urlToUse: urlToUse,
199
+ url: value,
200
+ invalid: false
201
+ });
202
+ }
203
+ if (matchVimeoUrl(value)) {
204
+ var _id = value.replace(/.*vimeo.com\/(.*)/g, '$1');
205
+ var _urlToUse2 = "https://player.vimeo.com/video/".concat(_id);
206
+ log('is vimeo');
207
+ _this.handleStateChange({
208
+ urlToUse: _urlToUse2,
209
+ url: value,
210
+ ends: null,
211
+ invalid: false
212
+ });
213
+ }
214
+ if (matchDriveUrl(value)) {
215
+ // https://drive.google.com/file/d/11QkK_gUO068amNvZBm9cxZpKX74WYb8q/view
216
+ var _id2 = value.replace(/^https:\/\/drive\.google\.com\/(?:file\/d\/|drive\/(?:u\/\d+\/)?folders\/|uc\?id=)([a-zA-Z0-9_-]+)\/.*/, '$1');
217
+ var _urlToUse3 = "https://drive.google.com/file/d/".concat(_id2, "/preview");
218
+ log('is google drive');
219
+ _this.handleStateChange({
220
+ urlToUse: _urlToUse3,
221
+ url: value,
222
+ ends: null,
223
+ invalid: false
224
+ });
225
+ }
226
+ });
227
+ (0, _defineProperty2["default"])(_this, "urlChange", function (e) {
228
+ var _ref4 = e.target || {},
229
+ value = _ref4.value;
230
+ var type = _this.props.type;
231
+ if (type && type === 'audio') {
232
+ _this.checkAudio();
233
+ return;
234
+ } else if (type && type === 'video') {
235
+ _this.checkVideo(value);
236
+ return;
237
+ }
238
+ _this.handleStateChange({
239
+ urlToUse: null,
240
+ url: null,
241
+ invalid: true
242
+ });
243
+ });
244
+ (0, _defineProperty2["default"])(_this, "changeHandler", function (type) {
245
+ return function (e) {
246
+ return _this.handleStateChange((0, _defineProperty2["default"])({}, type, e.target.value));
247
+ };
248
+ });
249
+ (0, _defineProperty2["default"])(_this, "handleDone", function (val) {
250
+ var handleClose = _this.props.handleClose;
251
+ var _this$state2 = _this.state,
252
+ tabValue = _this$state2.tabValue,
253
+ fileUpload = _this$state2.fileUpload;
254
+ var isInsertURL = tabValue === tabsTypeMap.insertUrl;
255
+ if (!val) {
256
+ if (fileUpload.url) {
257
+ _this.handleRemoveFile();
258
+ }
259
+ handleClose(val);
260
+ return;
261
+ }
262
+ if (isInsertURL) {
263
+ var _this$state3 = _this.state,
264
+ ends = _this$state3.ends,
265
+ height = _this$state3.height,
266
+ url = _this$state3.url,
267
+ urlToUse = _this$state3.urlToUse,
268
+ formattedUrl = _this$state3.formattedUrl,
269
+ starts = _this$state3.starts,
270
+ width = _this$state3.width;
271
+ handleClose(val, {
272
+ tag: 'iframe',
273
+ ends: ends,
274
+ height: height,
275
+ starts: starts,
276
+ width: width,
277
+ url: url,
278
+ urlToUse: urlToUse,
279
+ src: formattedUrl
280
+ });
281
+ return;
282
+ }
283
+ if (!fileUpload.loading) {
284
+ handleClose(val, {
285
+ tag: 'audio',
286
+ src: fileUpload.url
287
+ });
288
+ return;
289
+ }
290
+ _this.setState({
291
+ fileUpload: _objectSpread(_objectSpread({}, fileUpload), {}, {
292
+ scheduled: true
293
+ })
294
+ });
295
+ });
296
+ (0, _defineProperty2["default"])(_this, "handleUploadFile", /*#__PURE__*/function () {
297
+ var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
298
+ var fileChosen, reader;
299
+ return _regenerator["default"].wrap(function (_context) {
300
+ while (1) switch (_context.prev = _context.next) {
301
+ case 0:
302
+ e.preventDefault();
303
+ _this.setState({
304
+ fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
305
+ error: null,
306
+ loading: true
307
+ })
308
+ });
309
+ fileChosen = e.target.files[0];
310
+ reader = new FileReader();
311
+ reader.onload = function () {
312
+ var dataURL = reader.result;
313
+ _this.setState({
314
+ fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
315
+ url: dataURL,
316
+ mimeType: fileChosen.type
317
+ })
318
+ });
319
+ };
320
+ reader.readAsDataURL(fileChosen);
321
+ _this.props.uploadSoundSupport.add({
322
+ fileChosen: fileChosen,
323
+ done: function done(err, src) {
324
+ log('done: err:', err);
325
+ if (err) {
326
+ //eslint-disable-next-line
327
+ console.log(err);
328
+ _this.setState({
329
+ fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
330
+ scheduled: false,
331
+ loading: false,
332
+ error: err
333
+ })
334
+ });
335
+ return;
336
+ }
337
+ var fileUpload = _this.state.fileUpload;
338
+ var callback = fileUpload && fileUpload.scheduled ? _this.handleDone.bind(_this, true) : undefined;
339
+ _this.setState({
340
+ fileUpload: _objectSpread(_objectSpread({}, fileUpload), {}, {
341
+ scheduled: false,
342
+ loading: false,
343
+ url: src
344
+ })
345
+ }, callback);
346
+ }
347
+ });
348
+ case 1:
349
+ case "end":
350
+ return _context.stop();
351
+ }
352
+ }, _callee);
353
+ }));
354
+ return function (_x) {
355
+ return _ref5.apply(this, arguments);
356
+ };
357
+ }());
358
+ (0, _defineProperty2["default"])(_this, "handleRemoveFile", /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
359
+ return _regenerator["default"].wrap(function (_context2) {
360
+ while (1) switch (_context2.prev = _context2.next) {
361
+ case 0:
362
+ _this.props.uploadSoundSupport["delete"](_this.state.fileUpload.url, function (err) {
363
+ if (err) {
364
+ //eslint-disable-next-line
365
+ console.log(err);
366
+ _this.setState({
367
+ fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
368
+ error: err
369
+ })
370
+ });
371
+ }
372
+ });
373
+
374
+ // we should put it inside uploadSoundSupport.delete but we can leave it here for testing purposes
375
+ _this.setState({
376
+ fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
377
+ loading: false,
378
+ url: '',
379
+ mimeType: ''
380
+ })
381
+ });
382
+ case 1:
383
+ case "end":
384
+ return _context2.stop();
385
+ }
386
+ }, _callee2);
387
+ })));
388
+ var _ends = props.ends,
389
+ _height = props.height,
390
+ _src = props.src,
391
+ _starts = props.starts,
392
+ _type = props.type,
393
+ uploadSoundSupport = props.uploadSoundSupport,
394
+ _url = props.url,
395
+ _urlToUse = props.urlToUse,
396
+ _width = props.width;
397
+ var showUploadFile = (uploadSoundSupport === null || uploadSoundSupport === void 0 ? void 0 : uploadSoundSupport.add) && (uploadSoundSupport === null || uploadSoundSupport === void 0 ? void 0 : uploadSoundSupport["delete"]) && _type !== 'video';
398
+ _this.state = {
399
+ ends: _ends || 0,
400
+ url: _url,
401
+ urlToUse: _urlToUse,
402
+ formattedUrl: _src,
403
+ height: _height || 315,
404
+ invalid: false,
405
+ starts: _starts || 0,
406
+ width: _width || 560,
407
+ // default selected tab should be upload file if available
408
+ tabValue: showUploadFile ? tabsTypeMap.uploadFile : tabsTypeMap.insertUrl,
409
+ fileUpload: {
410
+ error: null,
411
+ loading: false,
412
+ scheduled: false,
413
+ url: '',
414
+ mimeType: ''
415
+ }
416
+ };
417
+ return _this;
418
+ }
419
+ (0, _inherits2["default"])(MediaDialog, _React$Component);
420
+ return (0, _createClass2["default"])(MediaDialog, [{
421
+ key: "componentDidMount",
422
+ value: function componentDidMount() {
423
+ if (this.props.url) {
424
+ this.urlChange({
425
+ target: {
426
+ value: this.props.url
427
+ }
428
+ });
429
+ }
430
+ }
431
+ }, {
432
+ key: "render",
433
+ value: function render() {
434
+ var _this2 = this;
435
+ var _this$props = this.props,
436
+ open = _this$props.open,
437
+ disablePortal = _this$props.disablePortal,
438
+ type = _this$props.type,
439
+ edit = _this$props.edit,
440
+ uploadSoundSupport = _this$props.uploadSoundSupport;
441
+ var _this$state4 = this.state,
442
+ ends = _this$state4.ends,
443
+ height = _this$state4.height,
444
+ invalid = _this$state4.invalid,
445
+ starts = _this$state4.starts,
446
+ width = _this$state4.width,
447
+ url = _this$state4.url,
448
+ mimeType = _this$state4.mimeType,
449
+ formattedUrl = _this$state4.formattedUrl,
450
+ updating = _this$state4.updating,
451
+ tabValue = _this$state4.tabValue,
452
+ fileUpload = _this$state4.fileUpload;
453
+ var isYoutube = matchYoutubeUrl(url);
454
+ var isInsertURL = tabValue === tabsTypeMap.insertUrl;
455
+ var isUploadMedia = tabValue === tabsTypeMap.uploadFile;
456
+ var submitIsDisabled = isInsertURL ? invalid || url === null || url === undefined : !fileUpload.url || fileUpload.scheduled;
457
+ var showUploadFile = (uploadSoundSupport === null || uploadSoundSupport === void 0 ? void 0 : uploadSoundSupport.add) && (uploadSoundSupport === null || uploadSoundSupport === void 0 ? void 0 : uploadSoundSupport["delete"]) && type !== 'video';
458
+ return /*#__PURE__*/_react["default"].createElement(StyledDialog, {
459
+ disablePortal: disablePortal,
460
+ open: open,
461
+ onClose: function onClose() {
462
+ return _this2.handleDone(false);
463
+ },
464
+ "aria-labelledby": "form-dialog-title"
465
+ }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
466
+ id: "form-dialog-title"
467
+ }, "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"], {
468
+ indicatorColor: "primary",
469
+ value: tabValue,
470
+ onChange: function onChange(event, value) {
471
+ _this2.setState({
472
+ tabValue: value
473
+ });
474
+ }
475
+ }, showUploadFile ? /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
476
+ value: tabsTypeMap.uploadFile,
477
+ label: "Upload file"
478
+ }) : null, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
479
+ value: tabsTypeMap.insertUrl,
480
+ label: type === 'video' ? 'Insert YouTube, Vimeo, or Google Drive URL' : 'Insert SoundCloud URL'
481
+ }))), isInsertURL && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
482
+ autoFocus: true,
483
+ error: invalid,
484
+ helperText: invalid ? 'Invalid URL' : '',
485
+ margin: "dense",
486
+ id: "name",
487
+ label: "URL",
488
+ placeholder: "Paste URL of ".concat(type, "..."),
489
+ type: "text",
490
+ onChange: this.urlChange,
491
+ value: url,
492
+ fullWidth: true
493
+ }), type === 'video' && /*#__PURE__*/_react["default"].createElement(StyledDialogContent, {
494
+ className: "properties"
495
+ }, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], null, "Video Properties"), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
496
+ autoFocus: true,
497
+ margin: "dense",
498
+ id: "width",
499
+ label: "Width",
500
+ type: "number",
501
+ placeholder: "Width",
502
+ value: width,
503
+ onChange: this.changeHandler('width')
504
+ }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
505
+ autoFocus: true,
506
+ margin: "dense",
507
+ id: "height",
508
+ label: "Height",
509
+ type: "number",
510
+ placeholder: "Height",
511
+ value: height,
512
+ onChange: this.changeHandler('height')
513
+ })), formattedUrl && /*#__PURE__*/_react["default"].createElement("iframe", {
514
+ width: width,
515
+ height: height,
516
+ src: formattedUrl,
517
+ frameBorder: "0",
518
+ allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
519
+ allowFullScreen: true
520
+ }), type === 'video' && (formattedUrl || updating) && !invalid && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledDialogContent, {
521
+ className: "properties"
522
+ }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
523
+ autoFocus: true,
524
+ margin: "dense",
525
+ id: "starts",
526
+ label: "Starts",
527
+ type: "number",
528
+ placeholder: "Starts",
529
+ value: starts,
530
+ onChange: this.changeHandler('starts')
531
+ }), isYoutube && /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
532
+ autoFocus: true,
533
+ margin: "dense",
534
+ id: "ends",
535
+ label: "Ends",
536
+ type: "number",
537
+ placeholder: "Ends",
538
+ value: ends,
539
+ onChange: this.changeHandler('ends')
540
+ })))), 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", {
541
+ controls: "controls",
542
+ controlsList: "nodownload"
543
+ }, /*#__PURE__*/_react["default"].createElement("source", {
544
+ type: mimeType,
545
+ src: fileUpload.url
546
+ })), /*#__PURE__*/_react["default"].createElement(StyledDeleteIcon, {
547
+ "aria-label": "delete",
548
+ onClick: this.handleRemoveFile,
549
+ size: "large"
550
+ }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null))), !fileUpload.scheduled && fileUpload.loading ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
551
+ variant: "subheading"
552
+ }, "Loading...") : null, fileUpload.scheduled ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
553
+ variant: "subheading"
554
+ }, "Waiting for Upload to finish, then inserting item...") : null) : !fileUpload.loading ? /*#__PURE__*/_react["default"].createElement("input", {
555
+ accept: "audio/*",
556
+ onChange: this.handleUploadFile,
557
+ type: "file"
558
+ }) : null, !!fileUpload.error && /*#__PURE__*/_react["default"].createElement(StyledError, {
559
+ variant: "caption"
560
+ }, fileUpload.error))))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
561
+ onClick: function onClick() {
562
+ return _this2.handleDone(false);
563
+ },
564
+ color: "primary"
565
+ }, "Cancel"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
566
+ disabled: submitIsDisabled,
567
+ onClick: function onClick() {
568
+ return _this2.handleDone(true);
569
+ },
570
+ color: "primary"
571
+ }, edit ? 'Update' : 'Insert')));
572
+ }
573
+ }]);
574
+ }(_react["default"].Component);
575
+ (0, _defineProperty2["default"])(MediaDialog, "propTypes", {
576
+ open: _propTypes["default"].bool,
577
+ edit: _propTypes["default"].bool,
578
+ disablePortal: _propTypes["default"].bool,
579
+ handleClose: _propTypes["default"].func,
580
+ uploadSoundSupport: _propTypes["default"].shape({
581
+ add: _propTypes["default"].func,
582
+ "delete": _propTypes["default"].func
583
+ }),
584
+ type: _propTypes["default"].string,
585
+ src: _propTypes["default"].string,
586
+ url: _propTypes["default"].string,
587
+ urlToUse: _propTypes["default"].string,
588
+ starts: _propTypes["default"].number,
589
+ ends: _propTypes["default"].number,
590
+ height: _propTypes["default"].number,
591
+ width: _propTypes["default"].number
592
+ });
593
+ var _default = exports["default"] = MediaDialog;
594
+ //# sourceMappingURL=media-dialog.js.map