sanity-plugin-mux-input 1.1.0

package/build/components/Uploader.js

@@ -0,0 +1,534 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _icons = require("@sanity/icons");
+
+var _ui = require("@sanity/ui");
+
+var _buttonCollection = _interopRequireDefault(require("part:@sanity/components/buttons/button-collection"));
+
+var _content = _interopRequireDefault(require("part:@sanity/components/dialogs/content"));
+
+var _default2 = _interopRequireDefault(require("part:@sanity/components/dialogs/default"));
+
+var _default3 = _interopRequireDefault(require("part:@sanity/components/formfields/default"));
+
+var _bar = _interopRequireDefault(require("part:@sanity/components/progress/bar"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _fi = require("react-icons/fi");
+
+var _rxjs = require("rxjs");
+
+var _operators = require("rxjs/operators");
+
+var _upload = require("../actions/upload");
+
+var _SanityClient = _interopRequireDefault(require("../clients/SanityClient"));
+
+var _extractFiles = require("../util/extractFiles");
+
+var _FileInputButton = _interopRequireDefault(require("./FileInputButton"));
+
+var _Uploader = _interopRequireDefault(require("./Uploader.css"));
+
+var _UploadPlaceholder = _interopRequireDefault(require("./UploadPlaceholder"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var ctrlKey = 17;
+var cmdKey = 91;
+var propTypes = {
+  hasFocus: _propTypes.default.bool,
+  onFocus: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onBrowse: _propTypes.default.func.isRequired,
+  onSetupButtonClicked: _propTypes.default.func.isRequired,
+  onUploadComplete: _propTypes.default.func,
+  secrets: _propTypes.default.shape({
+    token: _propTypes.default.string,
+    secretKey: _propTypes.default.string,
+    enableSignedUrls: _propTypes.default.bool
+  }),
+  buttons: _propTypes.default.node,
+  children: _propTypes.default.node
+};
+
+function createEventHandler() {
+  var events$ = new _rxjs.Subject();
+
+  var handler = event => events$.next(event);
+
+  return [events$.asObservable(), handler];
+}
+
+class MuxVideoInputUploader extends _react.Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      isDraggingOver: false,
+      invalidPaste: false,
+      invalidFile: false,
+      uploadProgress: null,
+      fileInfo: null,
+      uuid: null
+    });
+
+    _defineProperty(this, "dragEnteredEls", []);
+
+    _defineProperty(this, "upload", null);
+
+    _defineProperty(this, "ctrlDown", false);
+
+    _defineProperty(this, "cancelUploadButton", /*#__PURE__*/_react.default.createRef());
+
+    _defineProperty(this, "hiddenTextField", /*#__PURE__*/_react.default.createRef());
+
+    _defineProperty(this, "container", /*#__PURE__*/_react.default.createRef());
+
+    _defineProperty(this, "handleProgress", evt => {
+      if (evt.percent) {
+        this.setState({
+          uploadProgress: evt.percent
+        });
+      }
+
+      if (evt.file) {
+        this.setState({
+          fileInfo: evt.file
+        });
+      }
+    });
+
+    _defineProperty(this, "handleUploadFile", file => {
+      this.setState({
+        uploadProgress: 0,
+        fileInfo: null,
+        uuid: null
+      });
+      this.upload = (0, _upload.uploadFile)(file, {
+        enableSignedUrls: this.props.secrets.enableSignedUrls
+      }).pipe((0, _operators.takeUntil)(this.onCancelUploadButtonClick$.pipe((0, _operators.tap)(() => {
+        if (this.state.uuid) {
+          _SanityClient.default.delete(this.state.uuid);
+        }
+      })))).subscribe({
+        complete: () => {
+          this.setState({
+            error: null,
+            uploadProgress: null,
+            uuid: null
+          });
+        },
+        next: event => {
+          this.handleUploadEvent(event);
+        },
+        error: err => {
+          this.setState({
+            error: err,
+            uploadProgress: null,
+            uuid: null
+          });
+        }
+      });
+    });
+
+    _defineProperty(this, "handleUploadEvent", event => {
+      switch (event.type) {
+        case 'success':
+          return this.handleUploadSuccess(event.asset);
+
+        case 'progress':
+          return this.handleProgress(event);
+
+        case 'file':
+          return this.setState({
+            fileInfo: event.file
+          });
+
+        case 'uuid':
+          // Means we created a mux.videoAsset document with an uuid
+          return this.setState({
+            uuid: event.uuid
+          });
+
+        case 'url':
+          return this.setState({
+            url: event.url,
+            uploadProgress: 100
+          });
+
+        default:
+          return null;
+      }
+    });
+
+    _defineProperty(this, "handleUploadSuccess", assetDocument => {
+      this.setState({
+        uploadProgress: 100
+      });
+
+      if (this.props.onUploadComplete) {
+        this.props.onUploadComplete(assetDocument);
+      }
+    });
+
+    _defineProperty(this, "handlePaste", event => {
+      var clipboardData = event.clipboardData || window.clipboardData;
+      var url = clipboardData.getData('text');
+      var options = {
+        enableSignedUrls: this.props.secrets.enableSignedUrls
+      };
+      this.upload = (0, _upload.uploadUrl)(url, options).subscribe({
+        complete: () => {
+          this.setState({
+            error: null,
+            uploadProgress: null,
+            url: null
+          });
+        },
+        next: sEvent => {
+          this.handleUploadEvent(sEvent);
+        },
+        error: err => {
+          var error; // Don't output error dialog when just invalid url
+
+          if (!err.message.toLowerCase().match('invalid url')) {
+            error = err;
+          }
+
+          this.setState({
+            invalidPaste: true,
+            error
+          }, () => {
+            setTimeout(() => {
+              this.setState({
+                invalidPaste: false,
+                uploadProgress: null
+              });
+            }, 2000);
+          });
+        }
+      });
+    });
+
+    _defineProperty(this, "handleDrop", event => {
+      this.setState({
+        isDraggingOver: false
+      });
+      event.preventDefault();
+      event.stopPropagation();
+      (0, _extractFiles.extractDroppedFiles)(event.nativeEvent.dataTransfer).then(files => {
+        if (files) {
+          this.handleUploadFile(files[0]);
+        }
+      });
+    });
+
+    _defineProperty(this, "handleDragOver", event => {
+      event.preventDefault();
+      event.stopPropagation();
+    });
+
+    _defineProperty(this, "handleDragEnter", event => {
+      event.stopPropagation();
+      this.dragEnteredEls.push(event.target);
+      this.setState({
+        isDraggingOver: true
+      });
+    });
+
+    _defineProperty(this, "handleDragLeave", event => {
+      event.stopPropagation();
+      var idx = this.dragEnteredEls.indexOf(event.target);
+
+      if (idx > -1) {
+        this.dragEnteredEls.splice(idx, 1);
+      }
+
+      if (this.dragEnteredEls.length === 0) {
+        this.setState({
+          isDraggingOver: false
+        });
+      }
+    });
+
+    _defineProperty(this, "handleCancelUploadButtonClicked", event => {
+      this.setState({
+        uploadProgress: null,
+        error: null
+      });
+      this.container.current.focus();
+    });
+
+    _defineProperty(this, "handleErrorClose", event => {
+      if (event) {
+        event.preventDefault();
+      }
+
+      if (this.state.uploadProgress !== null) {
+        return;
+      }
+
+      this.setState({
+        invalidFile: false,
+        invalidPaste: false,
+        error: null,
+        uploadProgress: null
+      });
+      this.container.current.focus();
+    });
+
+    _defineProperty(this, "handleSetupButtonClicked", event => {
+      this.handleErrorClose(event);
+      this.props.onSetupButtonClicked();
+    });
+
+    _defineProperty(this, "handleKeyDown", event => {
+      if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
+        this.ctrlDown = true;
+      }
+
+      var vKey = 86;
+
+      if (this.ctrlDown && event.keyCode == vKey) {
+        this.hiddenTextField.current.focus();
+      }
+    });
+
+    _defineProperty(this, "handleKeyUp", event => {
+      if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
+        this.ctrlDown = false;
+      }
+    });
+
+    _defineProperty(this, "handleFocus", event => {
+      this.props.onFocus(event);
+    });
+  }
+
+  componentWillUnmount() {
+    this.unSubscribeToUpload();
+  }
+
+  componentDidMount() {
+    var _createEventHandler = createEventHandler(),
+        _createEventHandler2 = _slicedToArray(_createEventHandler, 2),
+        onClick$ = _createEventHandler2[0],
+        onClick = _createEventHandler2[1];
+
+    this.onCancelUploadButtonClick$ = onClick$;
+    this.handleCancelUploadButtonClick = onClick;
+  }
+
+  unSubscribeToUpload() {
+    if (this.upload && !this.upload.closed) {
+      this.upload.unsubscribe();
+    }
+  }
+
+  renderUploadPlaceHolder() {
+    if (this.props.children) {
+      return null;
+    }
+
+    if (this.state.uploadProgress !== null) {
+      return null;
+    }
+
+    var _this$state = this.state,
+        invalidFile = _this$state.invalidFile,
+        invalidPaste = _this$state.invalidPaste,
+        isDraggingOver = _this$state.isDraggingOver;
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_default3.default, {
+      level: 0
+    }, /*#__PURE__*/_react.default.createElement(_UploadPlaceholder.default, {
+      isDraggingOver: isDraggingOver,
+      hasFocus: this.props.hasFocus,
+      invalidPaste: invalidPaste,
+      invalidFile: invalidFile
+    })), /*#__PURE__*/_react.default.createElement(_buttonCollection.default, null, /*#__PURE__*/_react.default.createElement(_FileInputButton.default, {
+      icon: /*#__PURE__*/_react.default.createElement(_fi.FiUpload, {
+        "data-sanity-icon": "upload"
+      }),
+      onSelect: files => this.handleUploadFile(files[0]),
+      accept: 'video/*',
+      text: "Upload"
+    }), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+      mode: "ghost",
+      tone: "default",
+      text: "Browse",
+      onClick: this.props.onBrowse
+    })));
+  } // eslint-disable-next-line complexity
+
+
+  renderUploadProgress() {
+    var _this$state2 = this.state,
+        uploadProgress = _this$state2.uploadProgress,
+        fileInfo = _this$state2.fileInfo,
+        url = _this$state2.url;
+
+    if (uploadProgress === null) {
+      return null;
+    }
+
+    var text = uploadProgress < 100 ? "Uploading ".concat(fileInfo ? "'".concat(fileInfo.name, "'") : 'file') : 'Waiting for Mux to complete the file';
+
+    if (this.state.error) {
+      text = this.state.error.message;
+    }
+
+    if (url) {
+      text = "Uploading ".concat(url);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _Uploader.default.uploadProgress
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _Uploader.default.progressBar
+    }, /*#__PURE__*/_react.default.createElement(_bar.default, {
+      percent: uploadProgress,
+      text: text,
+      isInProgress: uploadProgress === 100 && !this.state.error,
+      showPercent: true,
+      animation: true,
+      color: "primary"
+    })), (uploadProgress < 100 || this.state.error) && /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.cancelUploadButton
+    }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+      text: "Cancel upload",
+      padding: 3,
+      tone: "critical",
+      onClick: this.handleCancelUploadButtonClick
+    })));
+  }
+
+  renderError() {
+    var _this$state3 = this.state,
+        uploadProgress = _this$state3.uploadProgress,
+        error = _this$state3.error;
+
+    if (!error) {
+      return null;
+    }
+
+    if (uploadProgress !== null) {
+      return null;
+    }
+
+    var message = this.state.error.message;
+
+    if (message === 'Invalid credentials') {
+      message = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Invalid credentials"), /*#__PURE__*/_react.default.createElement("p", null, "You need to check your Mux access token and secret key."), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+        text: "Run setup",
+        tone: "primary",
+        padding: 3,
+        onClick: this.handleSetupButtonClicked
+      }));
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_default2.default, {
+      title: "Upload failed",
+      color: "danger",
+      useOverlay: true,
+      onClose: this.handleErrorClose,
+      onEscape: this.handleErrorClose,
+      onClickOutside: this.handleErrorClose
+    }, /*#__PURE__*/_react.default.createElement(_content.default, {
+      size: "small"
+    }, message));
+  }
+
+  renderButtons() {
+    if (this.state.uploadProgress === null && this.props.buttons) {
+      return /*#__PURE__*/_react.default.createElement(_ui.Grid, {
+        columns: 4,
+        gap: 2
+      }, /*#__PURE__*/_react.default.createElement(_FileInputButton.default, {
+        icon: /*#__PURE__*/_react.default.createElement(_icons.UploadIcon, {
+          "data-sanity-icon": "upload"
+        }),
+        onSelect: files => this.handleUploadFile(files[0]),
+        text: "Upload"
+      }), this.props.buttons);
+    }
+
+    return null;
+  }
+
+  renderChildren() {
+    if (this.state.uploadProgress !== null) {
+      return null;
+    }
+
+    return this.props.children;
+  }
+
+  render() {
+    return /*#__PURE__*/_react.default.createElement(_ui.Card, {
+      padding: 0,
+      radius: 0,
+      shadow: 0,
+      tabIndex: 0,
+      onBlur: this.props.onBlur,
+      onFocus: this.props.onFocus,
+      onDrop: this.handleDrop,
+      onKeyDown: this.handleKeyDown,
+      onDragOver: this.handleDragOver,
+      onDragLeave: this.handleDragLeave,
+      onDragEnter: this.handleDragEnter,
+      ref: this.container
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      ref: this.hiddenTextField,
+      className: _Uploader.default.hiddenTextField,
+      type: "text",
+      onPaste: this.handlePaste
+    }), this.renderError(), this.renderUploadProgress(), this.renderUploadPlaceHolder(), this.renderChildren(), this.renderButtons());
+  }
+
+}
+
+MuxVideoInputUploader.propTypes = propTypes;
+MuxVideoInputUploader.defaultProps = {
+  hasFocus: false,
+  onFocus: null,
+  onBlur: null,
+  onUploadComplete: null,
+  secrets: {
+    token: '',
+    secretKey: '',
+    enableSignedUrls: false
+  },
+  buttons: null,
+  children: null
+};
+var _default = MuxVideoInputUploader;
+exports.default = _default;
+//# sourceMappingURL=Uploader.js.map

package/build/components/Uploader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Uploader.js"],"names":["ctrlKey","cmdKey","propTypes","hasFocus","PropTypes","bool","onFocus","func","onBlur","onBrowse","isRequired","onSetupButtonClicked","onUploadComplete","secrets","shape","token","string","secretKey","enableSignedUrls","buttons","node","children","createEventHandler","events$","Subject","handler","event","next","asObservable","MuxVideoInputUploader","Component","isDraggingOver","invalidPaste","invalidFile","uploadProgress","fileInfo","uuid","React","createRef","evt","percent","setState","file","upload","props","pipe","onCancelUploadButtonClick$","state","client","delete","subscribe","complete","error","handleUploadEvent","err","type","handleUploadSuccess","asset","handleProgress","url","assetDocument","clipboardData","window","getData","options","sEvent","message","toLowerCase","match","setTimeout","preventDefault","stopPropagation","nativeEvent","dataTransfer","then","files","handleUploadFile","dragEnteredEls","push","target","idx","indexOf","splice","length","container","current","focus","handleErrorClose","keyCode","ctrlDown","vKey","hiddenTextField","componentWillUnmount","unSubscribeToUpload","componentDidMount","onClick$","onClick","handleCancelUploadButtonClick","closed","unsubscribe","renderUploadPlaceHolder","renderUploadProgress","text","name","styles","progressBar","cancelUploadButton","renderError","handleSetupButtonClicked","renderButtons","renderChildren","render","handleDrop","handleKeyDown","handleDragOver","handleDragLeave","handleDragEnter","handlePaste","defaultProps"],"mappings":"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","sourcesContent":["import {UploadIcon} from '@sanity/icons'\r\nimport {Button, Card, Grid} from '@sanity/ui'\r\nimport ButtonCollection from 'part:@sanity/components/buttons/button-collection'\r\nimport DialogContent from 'part:@sanity/components/dialogs/content'\r\nimport Dialog from 'part:@sanity/components/dialogs/default'\r\nimport FormField from 'part:@sanity/components/formfields/default'\r\nimport ProgressBar from 'part:@sanity/components/progress/bar'\r\nimport PropTypes from 'prop-types'\r\nimport React, {Component} from 'react'\r\nimport {FiUpload} from 'react-icons/fi'\r\nimport {Subject} from 'rxjs'\r\nimport {takeUntil, tap} from 'rxjs/operators'\r\nimport {uploadFile, uploadUrl} from '../actions/upload'\r\nimport client from '../clients/SanityClient'\r\nimport {extractDroppedFiles} from '../util/extractFiles'\r\nimport FileInputButton from './FileInputButton'\r\nimport styles from './Uploader.css'\r\nimport UploadPlaceholder from './UploadPlaceholder'\r\n\r\nconst ctrlKey = 17\r\nconst cmdKey = 91\r\n\r\nconst propTypes = {\r\n  hasFocus: PropTypes.bool,\r\n  onFocus: PropTypes.func,\r\n  onBlur: PropTypes.func,\r\n  onBrowse: PropTypes.func.isRequired,\r\n  onSetupButtonClicked: PropTypes.func.isRequired,\r\n  onUploadComplete: PropTypes.func,\r\n  secrets: PropTypes.shape({\r\n    token: PropTypes.string,\r\n    secretKey: PropTypes.string,\r\n    enableSignedUrls: PropTypes.bool,\r\n  }),\r\n  buttons: PropTypes.node,\r\n  children: PropTypes.node,\r\n}\r\n\r\nfunction createEventHandler() {\r\n  const events$ = new Subject()\r\n  const handler = (event) => events$.next(event)\r\n  return [events$.asObservable(), handler]\r\n}\r\n\r\nclass MuxVideoInputUploader extends Component {\r\n  state = {\r\n    isDraggingOver: false,\r\n    invalidPaste: false,\r\n    invalidFile: false,\r\n    uploadProgress: null,\r\n    fileInfo: null,\r\n    uuid: null,\r\n  }\r\n  dragEnteredEls = []\r\n\r\n  upload = null\r\n\r\n  ctrlDown = false\r\n\r\n  cancelUploadButton = React.createRef()\r\n  hiddenTextField = React.createRef()\r\n  container = React.createRef()\r\n\r\n  componentWillUnmount() {\r\n    this.unSubscribeToUpload()\r\n  }\r\n\r\n  componentDidMount() {\r\n    const [onClick$, onClick] = createEventHandler()\r\n    this.onCancelUploadButtonClick$ = onClick$\r\n    this.handleCancelUploadButtonClick = onClick\r\n  }\r\n\r\n  unSubscribeToUpload() {\r\n    if (this.upload && !this.upload.closed) {\r\n      this.upload.unsubscribe()\r\n    }\r\n  }\r\n\r\n  handleProgress = (evt) => {\r\n    if (evt.percent) {\r\n      this.setState({uploadProgress: evt.percent})\r\n    }\r\n    if (evt.file) {\r\n      this.setState({fileInfo: evt.file})\r\n    }\r\n  }\r\n\r\n  handleUploadFile = (file) => {\r\n    this.setState({uploadProgress: 0, fileInfo: null, uuid: null})\r\n    this.upload = uploadFile(file, {enableSignedUrls: this.props.secrets.enableSignedUrls})\r\n      .pipe(\r\n        takeUntil(\r\n          this.onCancelUploadButtonClick$.pipe(\r\n            tap(() => {\r\n              if (this.state.uuid) {\r\n                client.delete(this.state.uuid)\r\n              }\r\n            })\r\n          )\r\n        )\r\n      )\r\n      .subscribe({\r\n        complete: () => {\r\n          this.setState({error: null, uploadProgress: null, uuid: null})\r\n        },\r\n        next: (event) => {\r\n          this.handleUploadEvent(event)\r\n        },\r\n        error: (err) => {\r\n          this.setState({error: err, uploadProgress: null, uuid: null})\r\n        },\r\n      })\r\n  }\r\n\r\n  handleUploadEvent = (event) => {\r\n    switch (event.type) {\r\n      case 'success':\r\n        return this.handleUploadSuccess(event.asset)\r\n      case 'progress':\r\n        return this.handleProgress(event)\r\n      case 'file':\r\n        return this.setState({fileInfo: event.file})\r\n      case 'uuid':\r\n        // Means we created a mux.videoAsset document with an uuid\r\n        return this.setState({uuid: event.uuid})\r\n      case 'url':\r\n        return this.setState({url: event.url, uploadProgress: 100})\r\n      default:\r\n        return null\r\n    }\r\n  }\r\n\r\n  handleUploadSuccess = (assetDocument) => {\r\n    this.setState({uploadProgress: 100})\r\n    if (this.props.onUploadComplete) {\r\n      this.props.onUploadComplete(assetDocument)\r\n    }\r\n  }\r\n\r\n  handlePaste = (event) => {\r\n    const clipboardData = event.clipboardData || window.clipboardData\r\n    const url = clipboardData.getData('text')\r\n    const options = {enableSignedUrls: this.props.secrets.enableSignedUrls}\r\n\r\n    this.upload = uploadUrl(url, options).subscribe({\r\n      complete: () => {\r\n        this.setState({error: null, uploadProgress: null, url: null})\r\n      },\r\n      next: (sEvent) => {\r\n        this.handleUploadEvent(sEvent)\r\n      },\r\n      error: (err) => {\r\n        let error\r\n        // Don't output error dialog when just invalid url\r\n        if (!err.message.toLowerCase().match('invalid url')) {\r\n          error = err\r\n        }\r\n        this.setState({invalidPaste: true, error}, () => {\r\n          setTimeout(() => {\r\n            this.setState({invalidPaste: false, uploadProgress: null})\r\n          }, 2000)\r\n        })\r\n      },\r\n    })\r\n  }\r\n\r\n  handleDrop = (event) => {\r\n    this.setState({isDraggingOver: false})\r\n    event.preventDefault()\r\n    event.stopPropagation()\r\n    extractDroppedFiles(event.nativeEvent.dataTransfer).then((files) => {\r\n      if (files) {\r\n        this.handleUploadFile(files[0])\r\n      }\r\n    })\r\n  }\r\n\r\n  handleDragOver = (event) => {\r\n    event.preventDefault()\r\n    event.stopPropagation()\r\n  }\r\n\r\n  handleDragEnter = (event) => {\r\n    event.stopPropagation()\r\n    this.dragEnteredEls.push(event.target)\r\n    this.setState({isDraggingOver: true})\r\n  }\r\n\r\n  handleDragLeave = (event) => {\r\n    event.stopPropagation()\r\n    const idx = this.dragEnteredEls.indexOf(event.target)\r\n    if (idx > -1) {\r\n      this.dragEnteredEls.splice(idx, 1)\r\n    }\r\n    if (this.dragEnteredEls.length === 0) {\r\n      this.setState({isDraggingOver: false})\r\n    }\r\n  }\r\n\r\n  handleCancelUploadButtonClicked = (event) => {\r\n    this.setState({uploadProgress: null, error: null})\r\n    this.container.current.focus()\r\n  }\r\n\r\n  handleErrorClose = (event) => {\r\n    if (event) {\r\n      event.preventDefault()\r\n    }\r\n    if (this.state.uploadProgress !== null) {\r\n      return\r\n    }\r\n    this.setState({\r\n      invalidFile: false,\r\n      invalidPaste: false,\r\n      error: null,\r\n      uploadProgress: null,\r\n    })\r\n    this.container.current.focus()\r\n  }\r\n\r\n  handleSetupButtonClicked = (event) => {\r\n    this.handleErrorClose(event)\r\n    this.props.onSetupButtonClicked()\r\n  }\r\n\r\n  renderUploadPlaceHolder() {\r\n    if (this.props.children) {\r\n      return null\r\n    }\r\n    if (this.state.uploadProgress !== null) {\r\n      return null\r\n    }\r\n    const {invalidFile, invalidPaste, isDraggingOver} = this.state\r\n    return (\r\n      <div>\r\n        <FormField level={0}>\r\n          <UploadPlaceholder\r\n            isDraggingOver={isDraggingOver}\r\n            hasFocus={this.props.hasFocus}\r\n            invalidPaste={invalidPaste}\r\n            invalidFile={invalidFile}\r\n          />\r\n        </FormField>\r\n        <ButtonCollection>\r\n          <FileInputButton\r\n            icon={<FiUpload data-sanity-icon=\"upload\" />}\r\n            onSelect={(files) => this.handleUploadFile(files[0])}\r\n            accept={'video/*'}\r\n            text=\"Upload\"\r\n          />\r\n          <Button mode=\"ghost\" tone=\"default\" text=\"Browse\" onClick={this.props.onBrowse} />\r\n        </ButtonCollection>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  // eslint-disable-next-line complexity\r\n  renderUploadProgress() {\r\n    const {uploadProgress, fileInfo, url} = this.state\r\n    if (uploadProgress === null) {\r\n      return null\r\n    }\r\n    let text =\r\n      uploadProgress < 100\r\n        ? `Uploading ${fileInfo ? `'${fileInfo.name}'` : 'file'}`\r\n        : 'Waiting for Mux to complete the file'\r\n    if (this.state.error) {\r\n      text = this.state.error.message\r\n    }\r\n    if (url) {\r\n      text = `Uploading ${url}`\r\n    }\r\n    return (\r\n      <div className={styles.uploadProgress}>\r\n        <div className={styles.progressBar}>\r\n          <ProgressBar\r\n            percent={uploadProgress}\r\n            text={text}\r\n            isInProgress={uploadProgress === 100 && !this.state.error}\r\n            showPercent\r\n            animation\r\n            color=\"primary\"\r\n          />\r\n        </div>\r\n        {(uploadProgress < 100 || this.state.error) && (\r\n          <div ref={this.cancelUploadButton}>\r\n            <Button\r\n              text=\"Cancel upload\"\r\n              padding={3}\r\n              tone=\"critical\"\r\n              onClick={this.handleCancelUploadButtonClick}\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n    )\r\n  }\r\n\r\n  renderError() {\r\n    const {uploadProgress, error} = this.state\r\n    if (!error) {\r\n      return null\r\n    }\r\n    if (uploadProgress !== null) {\r\n      return null\r\n    }\r\n    let message = this.state.error.message\r\n    if (message === 'Invalid credentials') {\r\n      message = (\r\n        <div>\r\n          <h3>Invalid credentials</h3>\r\n          <p>You need to check your Mux access token and secret key.</p>\r\n          <Button\r\n            text=\"Run setup\"\r\n            tone=\"primary\"\r\n            padding={3}\r\n            onClick={this.handleSetupButtonClicked}\r\n          />\r\n        </div>\r\n      )\r\n    }\r\n    return (\r\n      <Dialog\r\n        title=\"Upload failed\"\r\n        color=\"danger\"\r\n        useOverlay\r\n        onClose={this.handleErrorClose}\r\n        onEscape={this.handleErrorClose}\r\n        onClickOutside={this.handleErrorClose}\r\n      >\r\n        <DialogContent size=\"small\">{message}</DialogContent>\r\n      </Dialog>\r\n    )\r\n  }\r\n\r\n  renderButtons() {\r\n    if (this.state.uploadProgress === null && this.props.buttons) {\r\n      return (\r\n        <Grid columns={4} gap={2}>\r\n          <FileInputButton\r\n            icon={<UploadIcon data-sanity-icon=\"upload\" />}\r\n            onSelect={(files) => this.handleUploadFile(files[0])}\r\n            text=\"Upload\"\r\n          />\r\n          {this.props.buttons}\r\n        </Grid>\r\n      )\r\n    }\r\n    return null\r\n  }\r\n\r\n  renderChildren() {\r\n    if (this.state.uploadProgress !== null) {\r\n      return null\r\n    }\r\n    return this.props.children\r\n  }\r\n\r\n  handleKeyDown = (event) => {\r\n    if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {\r\n      this.ctrlDown = true\r\n    }\r\n    const vKey = 86\r\n    if (this.ctrlDown && event.keyCode == vKey) {\r\n      this.hiddenTextField.current.focus()\r\n    }\r\n  }\r\n\r\n  handleKeyUp = (event) => {\r\n    if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {\r\n      this.ctrlDown = false\r\n    }\r\n  }\r\n\r\n  handleFocus = (event) => {\r\n    this.props.onFocus(event)\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Card\r\n        padding={0}\r\n        radius={0}\r\n        shadow={0}\r\n        tabIndex={0}\r\n        onBlur={this.props.onBlur}\r\n        onFocus={this.props.onFocus}\r\n        onDrop={this.handleDrop}\r\n        onKeyDown={this.handleKeyDown}\r\n        onDragOver={this.handleDragOver}\r\n        onDragLeave={this.handleDragLeave}\r\n        onDragEnter={this.handleDragEnter}\r\n        ref={this.container}\r\n      >\r\n        <input\r\n          ref={this.hiddenTextField}\r\n          className={styles.hiddenTextField}\r\n          type=\"text\"\r\n          onPaste={this.handlePaste}\r\n        />\r\n        {this.renderError()}\r\n        {this.renderUploadProgress()}\r\n        {this.renderUploadPlaceHolder()}\r\n        {this.renderChildren()}\r\n        {this.renderButtons()}\r\n      </Card>\r\n    )\r\n  }\r\n}\r\n\r\nMuxVideoInputUploader.propTypes = propTypes\r\n\r\nMuxVideoInputUploader.defaultProps = {\r\n  hasFocus: false,\r\n  onFocus: null,\r\n  onBlur: null,\r\n  onUploadComplete: null,\r\n  secrets: {\r\n    token: '',\r\n    secretKey: '',\r\n    enableSignedUrls: false,\r\n  },\r\n  buttons: null,\r\n  children: null,\r\n}\r\n\r\nexport default MuxVideoInputUploader\r\n"],"file":"Uploader.js"}

package/build/components/Video.css

@@ -0,0 +1,21 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.videoContainer {
+  position: relative;
+  min-height: 150px;
+}
+
+.videoContainer media-controller {
+  max-width: 100%;
+}
+
+.progressBar {
+  position: relative;
+  margin-top: var(--large-padding);
+  margin-bottom: 2.5em;
+  padding: var(--medium-padding);
+}
+
+.uploadCancelButton {
+  text-align: center;
+}