sanity-plugin-mux-input 1.1.0

package/build/components/Setup.js

@@ -0,0 +1,311 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ui = require("@sanity/ui");
+
+var _lodash = require("lodash");
+
+var _default2 = _interopRequireDefault(require("part:@sanity/components/formfields/default"));
+
+var _default3 = _interopRequireDefault(require("part:@sanity/components/textinputs/default"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _secrets = require("../actions/secrets");
+
+var _Setup = _interopRequireDefault(require("./Setup.css"));
+
+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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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 propTypes = {
+  onSave: _propTypes.default.func.isRequired,
+  onCancel: _propTypes.default.func.isRequired,
+  secrets: _propTypes.default.shape({
+    token: _propTypes.default.string,
+    secretKey: _propTypes.default.string,
+    enableSignedUrls: _propTypes.default.bool,
+    signingKeyId: _propTypes.default.string,
+    signingKeyPrivate: _propTypes.default.string
+  })
+};
+
+class MuxVideoInputSetup extends _react.Component {
+  static getDerivedStateFromProps(nextProps, nextState) {
+    if (!nextState.secrets) {
+      return null;
+    }
+
+    if (nextProps.secrets) {
+      return {
+        token: nextProps.secrets.token,
+        secretKey: nextProps.secrets.secretKey,
+        enableSignedUrls: nextProps.secrets.enableSignedUrls,
+        signingKeyId: nextProps.secrets.signingKeyId,
+        signingKeyPrivate: nextProps.secrets.signingKeyPrivate
+      };
+    }
+
+    return null;
+  }
+
+  constructor(props) {
+    var _this;
+
+    super(props);
+    _this = this;
+
+    _defineProperty(this, "tokenInputId", (0, _lodash.uniqueId)('MuxTokenInput'));
+
+    _defineProperty(this, "secretKeyInputId", (0, _lodash.uniqueId)('MuxSecretInput'));
+
+    _defineProperty(this, "enableSignedUrlsInputId", (0, _lodash.uniqueId)('MuxEnableSignedUrlsInput'));
+
+    _defineProperty(this, "state", {
+      token: null,
+      secretKey: null,
+      enableSignedUrls: false,
+      isLoading: false,
+      error: null
+    });
+
+    _defineProperty(this, "handleTokenChanged", event => {
+      this.setState({
+        token: event.currentTarget.value
+      });
+    });
+
+    _defineProperty(this, "handleSecretKeyChanged", event => {
+      this.setState({
+        secretKey: event.currentTarget.value
+      });
+    });
+
+    _defineProperty(this, "handleEnableSignedUrls", event => this.setState({
+      enableSignedUrls: event.currentTarget.checked
+    }));
+
+    _defineProperty(this, "handleCancel", event => {
+      this.props.onCancel();
+    });
+
+    _defineProperty(this, "handleOnSubmit", event => {
+      event.preventDefault();
+    });
+
+    _defineProperty(this, "handleSaveToken", /*#__PURE__*/_asyncToGenerator(function* () {
+      var handleError = err => {
+        console.error(err); // eslint-disable-line no-console
+
+        _this.setState({
+          isLoading: false,
+          error: 'Something went wrong saving the token. See console.error for more info.'
+        });
+      };
+
+      _this.setState({
+        isLoading: true
+      });
+
+      var _ref2 = _this.state || {},
+          token = _ref2.token,
+          secretKey = _ref2.secretKey,
+          enableSignedUrls = _ref2.enableSignedUrls;
+
+      var _ref3 = _this.state || {},
+          signingKeyId = _ref3.signingKeyId,
+          signingKeyPrivate = _ref3.signingKeyPrivate;
+
+      try {
+        yield (0, _secrets.saveSecrets)(token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
+      } catch (err) {
+        handleError('Error while trying to save secrets:', err);
+        return;
+      }
+
+      if (enableSignedUrls) {
+        var hasValidSigningKeys = yield (0, _secrets.haveValidSigningKeys)(signingKeyId, signingKeyPrivate);
+
+        if (!hasValidSigningKeys) {
+          try {
+            var _yield$createSigningK = yield (0, _secrets.createSigningKeys)(),
+                data = _yield$createSigningK.data;
+
+            signingKeyId = data.id;
+            signingKeyPrivate = data.private_key;
+            yield (0, _secrets.saveSecrets)(token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
+          } catch (_ref4) {
+            var message = _ref4.message;
+            // eslint-disable-next-line no-console
+            console.log('Error while creating and saving signing key:', message);
+
+            _this.setState({
+              error: message
+            });
+          }
+        }
+      }
+
+      _this.setState({
+        isLoading: false
+      });
+
+      _this.props.onSave({
+        token,
+        secretKey,
+        enableSignedUrls,
+        signingKeyId,
+        signingKeyPrivate
+      });
+    }));
+
+    if (props.secrets) {
+      var _props$secrets = props.secrets,
+          token = _props$secrets.token,
+          secretKey = _props$secrets.secretKey,
+          enableSignedUrls = _props$secrets.enableSignedUrls,
+          signingKeyId = _props$secrets.signingKeyId,
+          signingKeyPrivate = _props$secrets.signingKeyPrivate;
+      this.state.token = token;
+      this.state.secretKey = secretKey;
+      this.state.enableSignedUrls = enableSignedUrls;
+      this.state.signingKeyId = signingKeyId;
+      this.state.signingKeyPrivate = signingKeyPrivate;
+    }
+
+    this.firstField = /*#__PURE__*/_react.default.createRef();
+  }
+
+  componentDidMount() {
+    this.firstField.current.focus();
+  }
+
+  render() {
+    var _this$state = this.state,
+        error = _this$state.error,
+        isLoading = _this$state.isLoading;
+    return /*#__PURE__*/_react.default.createElement(_ui.Box, {
+      paddingRight: 4,
+      paddingLeft: 4,
+      paddingBottom: 4,
+      paddingTop: 4,
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react.default.createElement("form", {
+      onSubmit: this.handleOnSubmit
+    }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 4
+    }, !this.state.token && /*#__PURE__*/_react.default.createElement(_ui.Card, {
+      padding: [3, 3, 3],
+      radius: 2,
+      shadow: 1,
+      tone: "primary"
+    }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 3
+    }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
+      size: 1
+    }, "To set up a new access token, go to your", ' ', /*#__PURE__*/_react.default.createElement("a", {
+      href: "https://dashboard.mux.com/settings/access-tokens",
+      target: "_blank",
+      rel: "noreferrer noopener"
+    }, "account on mux.com"), "."), /*#__PURE__*/_react.default.createElement(_ui.Text, {
+      size: 1
+    }, "The access token needs permissions: ", /*#__PURE__*/_react.default.createElement("strong", null, "Mux Video "), "(Full Access) and ", /*#__PURE__*/_react.default.createElement("strong", null, "Mux Data"), " (Read)", /*#__PURE__*/_react.default.createElement("br", null), "The credentials will be stored safely in a hidden document only available to editors."))), /*#__PURE__*/_react.default.createElement(_default2.default, {
+      changeIndicator: false,
+      label: "Access Token",
+      labelFor: this.tokenInputId,
+      level: 0
+    }, /*#__PURE__*/_react.default.createElement(_default3.default, {
+      id: this.tokenInputId,
+      ref: this.firstField,
+      onChange: this.handleTokenChanged,
+      type: "text",
+      value: this.state.token || ''
+    })), /*#__PURE__*/_react.default.createElement(_default2.default, {
+      changeIndicator: false,
+      label: "Secret Key",
+      labelFor: this.secretKeyInputId,
+      level: 0
+    }, /*#__PURE__*/_react.default.createElement(_default3.default, {
+      id: this.secretKeyInputId,
+      onChange: this.handleSecretKeyChanged,
+      type: "text",
+      value: this.state.secretKey || ''
+    })), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 4
+    }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
+      align: "center"
+    }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
+      id: this.enableSignedUrlsInputId,
+      onChange: this.handleEnableSignedUrls,
+      checked: this.state.enableSignedUrls || false,
+      style: {
+        display: 'block'
+      }
+    }), /*#__PURE__*/_react.default.createElement(_ui.Box, {
+      flex: 1,
+      paddingLeft: 3
+    }, /*#__PURE__*/_react.default.createElement(_ui.Text, null, /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: this.enableSignedUrlsInputId
+    }, "Enable Signed Urls")))), this.state.signingKeyId && this.state.enableSignedUrls ? /*#__PURE__*/_react.default.createElement(_ui.Card, {
+      padding: [3, 3, 3],
+      radius: 2,
+      shadow: 1,
+      tone: "caution"
+    }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 3
+    }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
+      size: 1
+    }, "The signing key ID that Sanity will use is:"), /*#__PURE__*/_react.default.createElement(_ui.Code, {
+      size: 1
+    }, this.state.signingKeyId), /*#__PURE__*/_react.default.createElement(_ui.Text, {
+      size: 1
+    }, "This key is only used for previewing content in the Sanity UI.", /*#__PURE__*/_react.default.createElement("br", null), "You should generate a different key to use in your application server."))) : null), /*#__PURE__*/_react.default.createElement(_ui.Inline, {
+      space: 2
+    }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+      text: "Save",
+      loading: isLoading,
+      tone: "primary",
+      mode: "default",
+      onClick: this.handleSaveToken
+    }), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+      text: "Cancel",
+      tone: "primary",
+      mode: "bleed",
+      onClick: this.handleCancel
+    })), error && /*#__PURE__*/_react.default.createElement("p", {
+      className: _Setup.default.error
+    }, error))));
+  }
+
+}
+
+MuxVideoInputSetup.propTypes = propTypes;
+MuxVideoInputSetup.defaultProps = {
+  secrets: {
+    token: null,
+    secretKey: null,
+    enableSignedUrls: false,
+    signingKeyId: null,
+    signingKeyPrivate: null
+  }
+};
+var _default = MuxVideoInputSetup;
+exports.default = _default;
+//# sourceMappingURL=Setup.js.map

package/build/components/Setup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Setup.js"],"names":["propTypes","onSave","PropTypes","func","isRequired","onCancel","secrets","shape","token","string","secretKey","enableSignedUrls","bool","signingKeyId","signingKeyPrivate","MuxVideoInputSetup","Component","getDerivedStateFromProps","nextProps","nextState","constructor","props","isLoading","error","event","setState","currentTarget","value","checked","preventDefault","handleError","err","console","state","hasValidSigningKeys","data","id","private_key","message","log","firstField","React","createRef","componentDidMount","current","focus","render","position","handleOnSubmit","tokenInputId","handleTokenChanged","secretKeyInputId","handleSecretKeyChanged","enableSignedUrlsInputId","handleEnableSignedUrls","display","handleSaveToken","handleCancel","styles","defaultProps"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAG;AAChBC,EAAAA,MAAM,EAAEC,mBAAUC,IAAV,CAAeC,UADP;AAEhBC,EAAAA,QAAQ,EAAEH,mBAAUC,IAAV,CAAeC,UAFT;AAGhBE,EAAAA,OAAO,EAAEJ,mBAAUK,KAAV,CAAgB;AACvBC,IAAAA,KAAK,EAAEN,mBAAUO,MADM;AAEvBC,IAAAA,SAAS,EAAER,mBAAUO,MAFE;AAGvBE,IAAAA,gBAAgB,EAAET,mBAAUU,IAHL;AAIvBC,IAAAA,YAAY,EAAEX,mBAAUO,MAJD;AAKvBK,IAAAA,iBAAiB,EAAEZ,mBAAUO;AALN,GAAhB;AAHO,CAAlB;;AAWA,MAAMM,kBAAN,SAAiCC,gBAAjC,CAA2C;AAaV,SAAxBC,wBAAwB,CAACC,SAAD,EAAYC,SAAZ,EAAuB;AACpD,QAAI,CAACA,SAAS,CAACb,OAAf,EAAwB;AACtB,aAAO,IAAP;AACD;;AACD,QAAIY,SAAS,CAACZ,OAAd,EAAuB;AACrB,aAAO;AACLE,QAAAA,KAAK,EAAEU,SAAS,CAACZ,OAAV,CAAkBE,KADpB;AAELE,QAAAA,SAAS,EAAEQ,SAAS,CAACZ,OAAV,CAAkBI,SAFxB;AAGLC,QAAAA,gBAAgB,EAAEO,SAAS,CAACZ,OAAV,CAAkBK,gBAH/B;AAILE,QAAAA,YAAY,EAAEK,SAAS,CAACZ,OAAV,CAAkBO,YAJ3B;AAKLC,QAAAA,iBAAiB,EAAEI,SAAS,CAACZ,OAAV,CAAkBQ;AALhC,OAAP;AAOD;;AACD,WAAO,IAAP;AACD;;AAEDM,EAAAA,WAAW,CAACC,KAAD,EAAQ;AAAA;;AACjB,UAAMA,KAAN,CADiB;AAAA;;AAAA,0CA5BJ,sBAAS,eAAT,CA4BI;;AAAA,8CA3BA,sBAAS,gBAAT,CA2BA;;AAAA,qDA1BO,sBAAS,0BAAT,CA0BP;;AAAA,mCAxBX;AACNb,MAAAA,KAAK,EAAE,IADD;AAENE,MAAAA,SAAS,EAAE,IAFL;AAGNC,MAAAA,gBAAgB,EAAE,KAHZ;AAINW,MAAAA,SAAS,EAAE,KAJL;AAKNC,MAAAA,KAAK,EAAE;AALD,KAwBW;;AAAA,gDAiBGC,KAAD,IAAW;AAC9B,WAAKC,QAAL,CAAc;AAACjB,QAAAA,KAAK,EAAEgB,KAAK,CAACE,aAAN,CAAoBC;AAA5B,OAAd;AACD,KAnBkB;;AAAA,oDAqBOH,KAAD,IAAW;AAClC,WAAKC,QAAL,CAAc;AAACf,QAAAA,SAAS,EAAEc,KAAK,CAACE,aAAN,CAAoBC;AAAhC,OAAd;AACD,KAvBkB;;AAAA,oDAyBOH,KAAD,IAAW,KAAKC,QAAL,CAAc;AAACd,MAAAA,gBAAgB,EAAEa,KAAK,CAACE,aAAN,CAAoBE;AAAvC,KAAd,CAzBjB;;AAAA,0CA2BHJ,KAAD,IAAW;AACxB,WAAKH,KAAL,CAAWhB,QAAX;AACD,KA7BkB;;AAAA,4CA+BDmB,KAAD,IAAW;AAC1BA,MAAAA,KAAK,CAACK,cAAN;AACD,KAjCkB;;AAAA,4EAmCD,aAAY;AAC5B,UAAMC,WAAW,GAAIC,GAAD,IAAS;AAC3BC,QAAAA,OAAO,CAACT,KAAR,CAAcQ,GAAd,EAD2B,CACR;;AACnB,QAAA,KAAI,CAACN,QAAL,CAAc;AACZH,UAAAA,SAAS,EAAE,KADC;AAEZC,UAAAA,KAAK,EAAE;AAFK,SAAd;AAID,OAND;;AAQA,MAAA,KAAI,CAACE,QAAL,CAAc;AAACH,QAAAA,SAAS,EAAE;AAAZ,OAAd;;AAEA,kBAA6C,KAAI,CAACW,KAAL,IAAc,EAA3D;AAAA,UAAOzB,KAAP,SAAOA,KAAP;AAAA,UAAcE,SAAd,SAAcA,SAAd;AAAA,UAAyBC,gBAAzB,SAAyBA,gBAAzB;;AACA,kBAAwC,KAAI,CAACsB,KAAL,IAAc,EAAtD;AAAA,UAAKpB,YAAL,SAAKA,YAAL;AAAA,UAAmBC,iBAAnB,SAAmBA,iBAAnB;;AAEA,UAAI;AACF,cAAM,0BAAYN,KAAZ,EAAmBE,SAAnB,EAA8BC,gBAA9B,EAAgDE,YAAhD,EAA8DC,iBAA9D,CAAN;AACD,OAFD,CAEE,OAAOiB,GAAP,EAAY;AACZD,QAAAA,WAAW,CAAC,qCAAD,EAAwCC,GAAxC,CAAX;AACA;AACD;;AAED,UAAIpB,gBAAJ,EAAsB;AACpB,YAAMuB,mBAAmB,SAAS,mCAAqBrB,YAArB,EAAmCC,iBAAnC,CAAlC;;AAEA,YAAI,CAACoB,mBAAL,EAA0B;AACxB,cAAI;AACF,8CAAqB,iCAArB;AAAA,gBAAOC,IAAP,yBAAOA,IAAP;;AACAtB,YAAAA,YAAY,GAAGsB,IAAI,CAACC,EAApB;AACAtB,YAAAA,iBAAiB,GAAGqB,IAAI,CAACE,WAAzB;AACA,kBAAM,0BAAY7B,KAAZ,EAAmBE,SAAnB,EAA8BC,gBAA9B,EAAgDE,YAAhD,EAA8DC,iBAA9D,CAAN;AACD,WALD,CAKE,cAAkB;AAAA,gBAAVwB,OAAU,SAAVA,OAAU;AAClB;AACAN,YAAAA,OAAO,CAACO,GAAR,CAAY,8CAAZ,EAA4DD,OAA5D;;AACA,YAAA,KAAI,CAACb,QAAL,CAAc;AAACF,cAAAA,KAAK,EAAEe;AAAR,aAAd;AACD;AACF;AACF;;AAED,MAAA,KAAI,CAACb,QAAL,CAAc;AAACH,QAAAA,SAAS,EAAE;AAAZ,OAAd;;AAEA,MAAA,KAAI,CAACD,KAAL,CAAWpB,MAAX,CAAkB;AAACO,QAAAA,KAAD;AAAQE,QAAAA,SAAR;AAAmBC,QAAAA,gBAAnB;AAAqCE,QAAAA,YAArC;AAAmDC,QAAAA;AAAnD,OAAlB;AACD,KA5EkB;;AAEjB,QAAIO,KAAK,CAACf,OAAV,EAAmB;AACjB,2BAA8Ee,KAAK,CAACf,OAApF;AAAA,UAAOE,KAAP,kBAAOA,KAAP;AAAA,UAAcE,SAAd,kBAAcA,SAAd;AAAA,UAAyBC,gBAAzB,kBAAyBA,gBAAzB;AAAA,UAA2CE,YAA3C,kBAA2CA,YAA3C;AAAA,UAAyDC,iBAAzD,kBAAyDA,iBAAzD;AACA,WAAKmB,KAAL,CAAWzB,KAAX,GAAmBA,KAAnB;AACA,WAAKyB,KAAL,CAAWvB,SAAX,GAAuBA,SAAvB;AACA,WAAKuB,KAAL,CAAWtB,gBAAX,GAA8BA,gBAA9B;AACA,WAAKsB,KAAL,CAAWpB,YAAX,GAA0BA,YAA1B;AACA,WAAKoB,KAAL,CAAWnB,iBAAX,GAA+BA,iBAA/B;AACD;;AACD,SAAK0B,UAAL,gBAAkBC,eAAMC,SAAN,EAAlB;AACD;;AAEDC,EAAAA,iBAAiB,GAAG;AAClB,SAAKH,UAAL,CAAgBI,OAAhB,CAAwBC,KAAxB;AACD;;AA+DDC,EAAAA,MAAM,GAAG;AACP,sBAA2B,KAAKb,KAAhC;AAAA,QAAOV,KAAP,eAAOA,KAAP;AAAA,QAAcD,SAAd,eAAcA,SAAd;AAEA,wBACE,6BAAC,OAAD;AACE,MAAA,YAAY,EAAE,CADhB;AAEE,MAAA,WAAW,EAAE,CAFf;AAGE,MAAA,aAAa,EAAE,CAHjB;AAIE,MAAA,UAAU,EAAE,CAJd;AAKE,MAAA,KAAK,EAAE;AAACyB,QAAAA,QAAQ,EAAE;AAAX;AALT,oBAOE;AAAM,MAAA,QAAQ,EAAE,KAAKC;AAArB,oBACE,6BAAC,SAAD;AAAO,MAAA,KAAK,EAAE;AAAd,OACG,CAAC,KAAKf,KAAL,CAAWzB,KAAZ,iBACC,6BAAC,QAAD;AAAM,MAAA,OAAO,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,CAAf;AAA0B,MAAA,MAAM,EAAE,CAAlC;AAAqC,MAAA,MAAM,EAAE,CAA7C;AAAgD,MAAA,IAAI,EAAC;AAArD,oBACE,6BAAC,SAAD;AAAO,MAAA,KAAK,EAAE;AAAd,oBACE,6BAAC,QAAD;AAAM,MAAA,IAAI,EAAE;AAAZ,mDAC2C,GAD3C,eAEE;AACE,MAAA,IAAI,EAAC,kDADP;AAEE,MAAA,MAAM,EAAC,QAFT;AAGE,MAAA,GAAG,EAAC;AAHN,4BAFF,MADF,eAYE,6BAAC,QAAD;AAAM,MAAA,IAAI,EAAE;AAAZ,4DACsC,0DADtC,qCAEoB,wDAFpB,0BAGE,wCAHF,0FAZF,CADF,CAFJ,eAyBE,6BAAC,iBAAD;AACE,MAAA,eAAe,EAAE,KADnB;AAEE,MAAA,KAAK,EAAC,cAFR;AAGE,MAAA,QAAQ,EAAE,KAAKyC,YAHjB;AAIE,MAAA,KAAK,EAAE;AAJT,oBAME,6BAAC,iBAAD;AACE,MAAA,EAAE,EAAE,KAAKA,YADX;AAEE,MAAA,GAAG,EAAE,KAAKT,UAFZ;AAGE,MAAA,QAAQ,EAAE,KAAKU,kBAHjB;AAIE,MAAA,IAAI,EAAC,MAJP;AAKE,MAAA,KAAK,EAAE,KAAKjB,KAAL,CAAWzB,KAAX,IAAoB;AAL7B,MANF,CAzBF,eAuCE,6BAAC,iBAAD;AACE,MAAA,eAAe,EAAE,KADnB;AAEE,MAAA,KAAK,EAAC,YAFR;AAGE,MAAA,QAAQ,EAAE,KAAK2C,gBAHjB;AAIE,MAAA,KAAK,EAAE;AAJT,oBAME,6BAAC,iBAAD;AACE,MAAA,EAAE,EAAE,KAAKA,gBADX;AAEE,MAAA,QAAQ,EAAE,KAAKC,sBAFjB;AAGE,MAAA,IAAI,EAAC,MAHP;AAIE,MAAA,KAAK,EAAE,KAAKnB,KAAL,CAAWvB,SAAX,IAAwB;AAJjC,MANF,CAvCF,eAqDE,6BAAC,SAAD;AAAO,MAAA,KAAK,EAAE;AAAd,oBACE,6BAAC,QAAD;AAAM,MAAA,KAAK,EAAC;AAAZ,oBACE,6BAAC,YAAD;AACE,MAAA,EAAE,EAAE,KAAK2C,uBADX;AAEE,MAAA,QAAQ,EAAE,KAAKC,sBAFjB;AAGE,MAAA,OAAO,EAAE,KAAKrB,KAAL,CAAWtB,gBAAX,IAA+B,KAH1C;AAIE,MAAA,KAAK,EAAE;AAAC4C,QAAAA,OAAO,EAAE;AAAV;AAJT,MADF,eAOE,6BAAC,OAAD;AAAK,MAAA,IAAI,EAAE,CAAX;AAAc,MAAA,WAAW,EAAE;AAA3B,oBACE,6BAAC,QAAD,qBACE;AAAO,MAAA,OAAO,EAAE,KAAKF;AAArB,4BADF,CADF,CAPF,CADF,EAcG,KAAKpB,KAAL,CAAWpB,YAAX,IAA2B,KAAKoB,KAAL,CAAWtB,gBAAtC,gBACC,6BAAC,QAAD;AAAM,MAAA,OAAO,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,CAAf;AAA0B,MAAA,MAAM,EAAE,CAAlC;AAAqC,MAAA,MAAM,EAAE,CAA7C;AAAgD,MAAA,IAAI,EAAC;AAArD,oBACE,6BAAC,SAAD;AAAO,MAAA,KAAK,EAAE;AAAd,oBACE,6BAAC,QAAD;AAAM,MAAA,IAAI,EAAE;AAAZ,qDADF,eAEE,6BAAC,QAAD;AAAM,MAAA,IAAI,EAAE;AAAZ,OAAgB,KAAKsB,KAAL,CAAWpB,YAA3B,CAFF,eAGE,6BAAC,QAAD;AAAM,MAAA,IAAI,EAAE;AAAZ,sFAEE,wCAFF,2EAHF,CADF,CADD,GAYG,IA1BN,CArDF,eAkFE,6BAAC,UAAD;AAAQ,MAAA,KAAK,EAAE;AAAf,oBACE,6BAAC,UAAD;AACE,MAAA,IAAI,EAAC,MADP;AAEE,MAAA,OAAO,EAAES,SAFX;AAGE,MAAA,IAAI,EAAC,SAHP;AAIE,MAAA,IAAI,EAAC,SAJP;AAKE,MAAA,OAAO,EAAE,KAAKkC;AALhB,MADF,eASE,6BAAC,UAAD;AAAQ,MAAA,IAAI,EAAC,QAAb;AAAsB,MAAA,IAAI,EAAC,SAA3B;AAAqC,MAAA,IAAI,EAAC,OAA1C;AAAkD,MAAA,OAAO,EAAE,KAAKC;AAAhE,MATF,CAlFF,EA8FGlC,KAAK,iBAAI;AAAG,MAAA,SAAS,EAAEmC,eAAOnC;AAArB,OAA6BA,KAA7B,CA9FZ,CADF,CAPF,CADF;AA4GD;;AA1NwC;;AA6N3CR,kBAAkB,CAACf,SAAnB,GAA+BA,SAA/B;AAEAe,kBAAkB,CAAC4C,YAAnB,GAAkC;AAChCrD,EAAAA,OAAO,EAAE;AACPE,IAAAA,KAAK,EAAE,IADA;AAEPE,IAAAA,SAAS,EAAE,IAFJ;AAGPC,IAAAA,gBAAgB,EAAE,KAHX;AAIPE,IAAAA,YAAY,EAAE,IAJP;AAKPC,IAAAA,iBAAiB,EAAE;AALZ;AADuB,CAAlC;eAUeC,kB","sourcesContent":["import {Box, Button, Card, Checkbox, Code, Flex, Inline, Stack, Text} from '@sanity/ui'\r\nimport {uniqueId} from 'lodash'\r\nimport FormField from 'part:@sanity/components/formfields/default'\r\nimport TextInput from 'part:@sanity/components/textinputs/default'\r\nimport PropTypes from 'prop-types'\r\nimport React, {Component} from 'react'\r\nimport {createSigningKeys, haveValidSigningKeys, saveSecrets} from '../actions/secrets'\r\nimport styles from './Setup.css'\r\n\r\nconst propTypes = {\r\n  onSave: PropTypes.func.isRequired,\r\n  onCancel: PropTypes.func.isRequired,\r\n  secrets: PropTypes.shape({\r\n    token: PropTypes.string,\r\n    secretKey: PropTypes.string,\r\n    enableSignedUrls: PropTypes.bool,\r\n    signingKeyId: PropTypes.string,\r\n    signingKeyPrivate: PropTypes.string,\r\n  }),\r\n}\r\nclass MuxVideoInputSetup extends Component {\r\n  tokenInputId = uniqueId('MuxTokenInput')\r\n  secretKeyInputId = uniqueId('MuxSecretInput')\r\n  enableSignedUrlsInputId = uniqueId('MuxEnableSignedUrlsInput')\r\n\r\n  state = {\r\n    token: null,\r\n    secretKey: null,\r\n    enableSignedUrls: false,\r\n    isLoading: false,\r\n    error: null,\r\n  }\r\n\r\n  static getDerivedStateFromProps(nextProps, nextState) {\r\n    if (!nextState.secrets) {\r\n      return null\r\n    }\r\n    if (nextProps.secrets) {\r\n      return {\r\n        token: nextProps.secrets.token,\r\n        secretKey: nextProps.secrets.secretKey,\r\n        enableSignedUrls: nextProps.secrets.enableSignedUrls,\r\n        signingKeyId: nextProps.secrets.signingKeyId,\r\n        signingKeyPrivate: nextProps.secrets.signingKeyPrivate,\r\n      }\r\n    }\r\n    return null\r\n  }\r\n\r\n  constructor(props) {\r\n    super(props)\r\n    if (props.secrets) {\r\n      const {token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate} = props.secrets\r\n      this.state.token = token\r\n      this.state.secretKey = secretKey\r\n      this.state.enableSignedUrls = enableSignedUrls\r\n      this.state.signingKeyId = signingKeyId\r\n      this.state.signingKeyPrivate = signingKeyPrivate\r\n    }\r\n    this.firstField = React.createRef()\r\n  }\r\n\r\n  componentDidMount() {\r\n    this.firstField.current.focus()\r\n  }\r\n\r\n  handleTokenChanged = (event) => {\r\n    this.setState({token: event.currentTarget.value})\r\n  }\r\n\r\n  handleSecretKeyChanged = (event) => {\r\n    this.setState({secretKey: event.currentTarget.value})\r\n  }\r\n\r\n  handleEnableSignedUrls = (event) => this.setState({enableSignedUrls: event.currentTarget.checked})\r\n\r\n  handleCancel = (event) => {\r\n    this.props.onCancel()\r\n  }\r\n\r\n  handleOnSubmit = (event) => {\r\n    event.preventDefault()\r\n  }\r\n\r\n  handleSaveToken = async () => {\r\n    const handleError = (err) => {\r\n      console.error(err) // eslint-disable-line no-console\r\n      this.setState({\r\n        isLoading: false,\r\n        error: 'Something went wrong saving the token. See console.error for more info.',\r\n      })\r\n    }\r\n\r\n    this.setState({isLoading: true})\r\n\r\n    const {token, secretKey, enableSignedUrls} = this.state || {}\r\n    let {signingKeyId, signingKeyPrivate} = this.state || {}\r\n\r\n    try {\r\n      await saveSecrets(token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate)\r\n    } catch (err) {\r\n      handleError('Error while trying to save secrets:', err)\r\n      return\r\n    }\r\n\r\n    if (enableSignedUrls) {\r\n      const hasValidSigningKeys = await haveValidSigningKeys(signingKeyId, signingKeyPrivate)\r\n\r\n      if (!hasValidSigningKeys) {\r\n        try {\r\n          const {data} = await createSigningKeys()\r\n          signingKeyId = data.id\r\n          signingKeyPrivate = data.private_key\r\n          await saveSecrets(token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate)\r\n        } catch ({message}) {\r\n          // eslint-disable-next-line no-console\r\n          console.log('Error while creating and saving signing key:', message)\r\n          this.setState({error: message})\r\n        }\r\n      }\r\n    }\r\n\r\n    this.setState({isLoading: false})\r\n\r\n    this.props.onSave({token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate})\r\n  }\r\n\r\n  render() {\r\n    const {error, isLoading} = this.state\r\n\r\n    return (\r\n      <Box\r\n        paddingRight={4}\r\n        paddingLeft={4}\r\n        paddingBottom={4}\r\n        paddingTop={4}\r\n        style={{position: 'relative'}}\r\n      >\r\n        <form onSubmit={this.handleOnSubmit}>\r\n          <Stack space={4}>\r\n            {!this.state.token && (\r\n              <Card padding={[3, 3, 3]} radius={2} shadow={1} tone=\"primary\">\r\n                <Stack space={3}>\r\n                  <Text size={1}>\r\n                    To set up a new access token, go to your{' '}\r\n                    <a\r\n                      href=\"https://dashboard.mux.com/settings/access-tokens\"\r\n                      target=\"_blank\"\r\n                      rel=\"noreferrer noopener\"\r\n                    >\r\n                      account on mux.com\r\n                    </a>\r\n                    .\r\n                  </Text>\r\n                  <Text size={1}>\r\n                    The access token needs permissions: <strong>Mux Video </strong>\r\n                    (Full Access) and <strong>Mux Data</strong> (Read)\r\n                    <br />\r\n                    The credentials will be stored safely in a hidden document only available to\r\n                    editors.\r\n                  </Text>\r\n                </Stack>\r\n              </Card>\r\n            )}\r\n            <FormField\r\n              changeIndicator={false}\r\n              label=\"Access Token\"\r\n              labelFor={this.tokenInputId}\r\n              level={0}\r\n            >\r\n              <TextInput\r\n                id={this.tokenInputId}\r\n                ref={this.firstField}\r\n                onChange={this.handleTokenChanged}\r\n                type=\"text\"\r\n                value={this.state.token || ''}\r\n              />\r\n            </FormField>\r\n            <FormField\r\n              changeIndicator={false}\r\n              label=\"Secret Key\"\r\n              labelFor={this.secretKeyInputId}\r\n              level={0}\r\n            >\r\n              <TextInput\r\n                id={this.secretKeyInputId}\r\n                onChange={this.handleSecretKeyChanged}\r\n                type=\"text\"\r\n                value={this.state.secretKey || ''}\r\n              />\r\n            </FormField>\r\n\r\n            <Stack space={4}>\r\n              <Flex align=\"center\">\r\n                <Checkbox\r\n                  id={this.enableSignedUrlsInputId}\r\n                  onChange={this.handleEnableSignedUrls}\r\n                  checked={this.state.enableSignedUrls || false}\r\n                  style={{display: 'block'}}\r\n                />\r\n                <Box flex={1} paddingLeft={3}>\r\n                  <Text>\r\n                    <label htmlFor={this.enableSignedUrlsInputId}>Enable Signed Urls</label>\r\n                  </Text>\r\n                </Box>\r\n              </Flex>\r\n              {this.state.signingKeyId && this.state.enableSignedUrls ? (\r\n                <Card padding={[3, 3, 3]} radius={2} shadow={1} tone=\"caution\">\r\n                  <Stack space={3}>\r\n                    <Text size={1}>The signing key ID that Sanity will use is:</Text>\r\n                    <Code size={1}>{this.state.signingKeyId}</Code>\r\n                    <Text size={1}>\r\n                      This key is only used for previewing content in the Sanity UI.\r\n                      <br />\r\n                      You should generate a different key to use in your application server.\r\n                    </Text>\r\n                  </Stack>\r\n                </Card>\r\n              ) : null}\r\n            </Stack>\r\n\r\n            <Inline space={2}>\r\n              <Button\r\n                text=\"Save\"\r\n                loading={isLoading}\r\n                tone=\"primary\"\r\n                mode=\"default\"\r\n                onClick={this.handleSaveToken}\r\n              />\r\n\r\n              <Button text=\"Cancel\" tone=\"primary\" mode=\"bleed\" onClick={this.handleCancel} />\r\n            </Inline>\r\n\r\n            {error && <p className={styles.error}>{error}</p>}\r\n          </Stack>\r\n        </form>\r\n      </Box>\r\n    )\r\n  }\r\n}\r\n\r\nMuxVideoInputSetup.propTypes = propTypes\r\n\r\nMuxVideoInputSetup.defaultProps = {\r\n  secrets: {\r\n    token: null,\r\n    secretKey: null,\r\n    enableSignedUrls: false,\r\n    signingKeyId: null,\r\n    signingKeyPrivate: null,\r\n  },\r\n}\r\n\r\nexport default MuxVideoInputSetup\r\n"],"file":"Setup.js"}

package/build/components/UploadPlaceholder.css

@@ -0,0 +1,81 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: 100%;
+}
+
+.hasFocus {
+  composes: root;
+}
+
+.iconContainer {
+  font-size: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--small-padding);
+}
+
+.strong {
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+}
+
+.dropFile,
+.pasteFile {
+  padding: 1rem;
+  display: none;
+  @media (--screen-medium) {
+    display: block;
+  }
+}
+
+.dropFile.isDraggingOver {
+  color: var(--state-success-color);
+}
+
+.pasteFile {
+  opacity: 0.2;
+  transition: opacity linear 0.2s;
+}
+
+.pasteFile.hasFocus {
+  opacity: 1;
+}
+
+.invalidPaste,
+.invalidFile {
+  color: var(--state-danger-color);
+  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+@keyframes shake {
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}

package/build/components/UploadPlaceholder.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ui = require("@sanity/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _fi = require("react-icons/fi");
+
+var _UploadPlaceholder = _interopRequireDefault(require("./UploadPlaceholder.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+class UploadPlaceholder extends _react.default.PureComponent {
+  render() {
+    var _this$props = this.props,
+        invalidPaste = _this$props.invalidPaste,
+        invalidFile = _this$props.invalidFile,
+        hasFocus = _this$props.hasFocus,
+        isDraggingOver = _this$props.isDraggingOver;
+    var fileClassNames = [_UploadPlaceholder.default.dropFile];
+    var pasteClassNames = [_UploadPlaceholder.default.pasteFile];
+
+    if (invalidFile) {
+      fileClassNames.push(_UploadPlaceholder.default.invalidFile);
+    }
+
+    if (isDraggingOver) {
+      fileClassNames.push(_UploadPlaceholder.default.isDraggingOver);
+    }
+
+    if (invalidPaste) {
+      pasteClassNames.push(_UploadPlaceholder.default.invalidPaste);
+    }
+
+    if (hasFocus) {
+      pasteClassNames.push(_UploadPlaceholder.default.hasFocus);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
+      justify: "center",
+      align: "center",
+      padding: 3
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: fileClassNames.join(' ')
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _UploadPlaceholder.default.iconContainer
+    }, /*#__PURE__*/_react.default.createElement(_fi.FiUpload, {
+      size: "0.5em"
+    })), /*#__PURE__*/_react.default.createElement("p", {
+      className: _UploadPlaceholder.default.strong
+    }, /*#__PURE__*/_react.default.createElement("span", null, "Drop file ", invalidFile))), /*#__PURE__*/_react.default.createElement("div", {
+      className: pasteClassNames.join(' ')
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _UploadPlaceholder.default.iconContainer
+    }, /*#__PURE__*/_react.default.createElement(_fi.FiCopy, _extends({}, invalidPaste ? {
+      color: 'red'
+    } : {}, {
+      size: "0.5em"
+    }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+      className: _UploadPlaceholder.default.strong
+    }, /*#__PURE__*/_react.default.createElement("span", null, "Paste URL"))))));
+  }
+
+}
+
+exports.default = UploadPlaceholder;
+
+_defineProperty(UploadPlaceholder, "propTypes", {
+  hasFocus: _propTypes.default.bool,
+  invalidPaste: _propTypes.default.bool,
+  invalidFile: _propTypes.default.bool,
+  isDraggingOver: _propTypes.default.bool
+});
+
+UploadPlaceholder.defaultProps = {
+  hasFocus: false,
+  invalidPaste: false,
+  invalidFile: false,
+  isDraggingOver: false
+};
+//# sourceMappingURL=UploadPlaceholder.js.map

package/build/components/UploadPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/UploadPlaceholder.js"],"names":["UploadPlaceholder","React","PureComponent","render","props","invalidPaste","invalidFile","hasFocus","isDraggingOver","fileClassNames","styles","dropFile","pasteClassNames","pasteFile","push","join","iconContainer","strong","color","PropTypes","bool","defaultProps"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEe,MAAMA,iBAAN,SAAgCC,eAAMC,aAAtC,CAAoD;AAOjEC,EAAAA,MAAM,GAAG;AACP,sBAA8D,KAAKC,KAAnE;AAAA,QAAOC,YAAP,eAAOA,YAAP;AAAA,QAAqBC,WAArB,eAAqBA,WAArB;AAAA,QAAkCC,QAAlC,eAAkCA,QAAlC;AAAA,QAA4CC,cAA5C,eAA4CA,cAA5C;AACA,QAAMC,cAAc,GAAG,CAACC,2BAAOC,QAAR,CAAvB;AACA,QAAMC,eAAe,GAAG,CAACF,2BAAOG,SAAR,CAAxB;;AACA,QAAIP,WAAJ,EAAiB;AACfG,MAAAA,cAAc,CAACK,IAAf,CAAoBJ,2BAAOJ,WAA3B;AACD;;AACD,QAAIE,cAAJ,EAAoB;AAClBC,MAAAA,cAAc,CAACK,IAAf,CAAoBJ,2BAAOF,cAA3B;AACD;;AACD,QAAIH,YAAJ,EAAkB;AAChBO,MAAAA,eAAe,CAACE,IAAhB,CAAqBJ,2BAAOL,YAA5B;AACD;;AACD,QAAIE,QAAJ,EAAc;AACZK,MAAAA,eAAe,CAACE,IAAhB,CAAqBJ,2BAAOH,QAA5B;AACD;;AACD,wBACE,uDACE,6BAAC,QAAD;AAAM,MAAA,OAAO,EAAC,QAAd;AAAuB,MAAA,KAAK,EAAC,QAA7B;AAAsC,MAAA,OAAO,EAAE;AAA/C,oBACE;AAAK,MAAA,SAAS,EAAEE,cAAc,CAACM,IAAf,CAAoB,GAApB;AAAhB,oBACE;AAAK,MAAA,SAAS,EAAEL,2BAAOM;AAAvB,oBACE,6BAAC,YAAD;AAAU,MAAA,IAAI,EAAC;AAAf,MADF,CADF,eAIE;AAAG,MAAA,SAAS,EAAEN,2BAAOO;AAArB,oBACE,yDAAiBX,WAAjB,CADF,CAJF,CADF,eASE;AAAK,MAAA,SAAS,EAAEM,eAAe,CAACG,IAAhB,CAAqB,GAArB;AAAhB,oBACE;AAAK,MAAA,SAAS,EAAEL,2BAAOM;AAAvB,oBACE,6BAAC,UAAD,eAAaX,YAAY,GAAG;AAACa,MAAAA,KAAK,EAAE;AAAR,KAAH,GAAoB,EAA7C;AAAkD,MAAA,IAAI,EAAC;AAAvD,OADF,CADF,eAIE,uDACE;AAAG,MAAA,SAAS,EAAER,2BAAOO;AAArB,oBACE,uDADF,CADF,CAJF,CATF,CADF,CADF;AAwBD;;AA/CgE;;;;gBAA9CjB,iB,eACA;AACjBO,EAAAA,QAAQ,EAAEY,mBAAUC,IADH;AAEjBf,EAAAA,YAAY,EAAEc,mBAAUC,IAFP;AAGjBd,EAAAA,WAAW,EAAEa,mBAAUC,IAHN;AAIjBZ,EAAAA,cAAc,EAAEW,mBAAUC;AAJT,C;;AAiDrBpB,iBAAiB,CAACqB,YAAlB,GAAiC;AAC/Bd,EAAAA,QAAQ,EAAE,KADqB;AAE/BF,EAAAA,YAAY,EAAE,KAFiB;AAG/BC,EAAAA,WAAW,EAAE,KAHkB;AAI/BE,EAAAA,cAAc,EAAE;AAJe,CAAjC","sourcesContent":["import {Flex} from '@sanity/ui'\r\nimport PropTypes from 'prop-types'\r\nimport React from 'react'\r\nimport {FiCopy, FiUpload} from 'react-icons/fi'\r\nimport styles from './UploadPlaceholder.css'\r\n\r\nexport default class UploadPlaceholder extends React.PureComponent {\r\n  static propTypes = {\r\n    hasFocus: PropTypes.bool,\r\n    invalidPaste: PropTypes.bool,\r\n    invalidFile: PropTypes.bool,\r\n    isDraggingOver: PropTypes.bool,\r\n  }\r\n  render() {\r\n    const {invalidPaste, invalidFile, hasFocus, isDraggingOver} = this.props\r\n    const fileClassNames = [styles.dropFile]\r\n    const pasteClassNames = [styles.pasteFile]\r\n    if (invalidFile) {\r\n      fileClassNames.push(styles.invalidFile)\r\n    }\r\n    if (isDraggingOver) {\r\n      fileClassNames.push(styles.isDraggingOver)\r\n    }\r\n    if (invalidPaste) {\r\n      pasteClassNames.push(styles.invalidPaste)\r\n    }\r\n    if (hasFocus) {\r\n      pasteClassNames.push(styles.hasFocus)\r\n    }\r\n    return (\r\n      <div>\r\n        <Flex justify=\"center\" align=\"center\" padding={3}>\r\n          <div className={fileClassNames.join(' ')}>\r\n            <div className={styles.iconContainer}>\r\n              <FiUpload size=\"0.5em\" />\r\n            </div>\r\n            <p className={styles.strong}>\r\n              <span>Drop file {invalidFile}</span>\r\n            </p>\r\n          </div>\r\n          <div className={pasteClassNames.join(' ')}>\r\n            <div className={styles.iconContainer}>\r\n              <FiCopy {...(invalidPaste ? {color: 'red'} : {})} size=\"0.5em\" />\r\n            </div>\r\n            <div>\r\n              <p className={styles.strong}>\r\n                <span>Paste URL</span>\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </Flex>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nUploadPlaceholder.defaultProps = {\r\n  hasFocus: false,\r\n  invalidPaste: false,\r\n  invalidFile: false,\r\n  isDraggingOver: false,\r\n}\r\n"],"file":"UploadPlaceholder.js"}

package/build/components/Uploader.css

@@ -0,0 +1,28 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.uploadProgress {
+  text-align: center;
+  padding: var(--medium-padding);
+}
+
+.progressBar {
+  margin-top: var(--large-padding);
+  margin-bottom: 2.5em;
+  text-align: left;
+}
+
+.errorMessage {
+  background: #fff;
+  color: var(--state-danger-color);
+}
+
+.hiddenTextField {
+  position: absolute;
+  border: 0;
+  color: white;
+  opacity: 0;
+}
+
+.hiddenTextField:focus {
+  outline: none;
+}