sanity-plugin-mux-input 1.1.0

package/build/components/Input.js

@@ -0,0 +1,823 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ui = require("@sanity/ui");
+
+var _pluginIcon = _interopRequireDefault(require("part:@sanity/base/plugin-icon"));
+
+var _preview = require("part:@sanity/base/preview");
+
+var _content = _interopRequireDefault(require("part:@sanity/components/dialogs/content"));
+
+var _fullscreen = _interopRequireDefault(require("part:@sanity/components/dialogs/fullscreen"));
+
+var _default2 = _interopRequireDefault(require("part:@sanity/components/formfields/default"));
+
+var _spinner = _interopRequireDefault(require("part:@sanity/components/loading/spinner"));
+
+var _formBuilder = require("part:@sanity/form-builder");
+
+var _patchEvent = _interopRequireWildcard(require("part:@sanity/form-builder/patch-event"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rxjs = require("rxjs");
+
+var _operators = require("rxjs/operators");
+
+var _assets = require("../actions/assets");
+
+var _secrets = require("../actions/secrets");
+
+var _SanityClient = _interopRequireDefault(require("../clients/SanityClient"));
+
+var _getPosterSrc = _interopRequireDefault(require("../util/getPosterSrc"));
+
+var _Input = _interopRequireDefault(require("./Input.css"));
+
+var _MuxLogo = _interopRequireDefault(require("./MuxLogo"));
+
+var _SelectAsset = _interopRequireDefault(require("./SelectAsset"));
+
+var _Setup = _interopRequireDefault(require("./Setup"));
+
+var _Uploader = _interopRequireDefault(require("./Uploader"));
+
+var _Video = _interopRequireDefault(require("./Video"));
+
+var _config = _interopRequireDefault(require("../config"));
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 NOOP = () => {
+  /* intentional noop */
+};
+
+var cachedSecrets = {
+  token: null,
+  secretKey: null,
+  enableSignedUrls: false,
+  signingKeyId: null,
+  signingKeyPrivate: null
+};
+
+function validateSecrets(secrets) {
+  if (!secrets.token || !secrets.secretKey) return false;
+  return true;
+}
+
+function getSecrets() {
+  if (cachedSecrets.token) {
+    return Promise.resolve({
+      isInitialSetup: true,
+      needsSetup: false,
+      secrets: cachedSecrets
+    });
+  }
+
+  return (0, _secrets.fetchSecrets)().then(_ref => {
+    var secrets = _ref.secrets,
+        exists = _ref.exists;
+    cachedSecrets.token = secrets.token;
+    cachedSecrets.secretKey = secrets.secretKey;
+    cachedSecrets.enableSignedUrls = secrets.enableSignedUrls;
+    cachedSecrets.signingKeyId = secrets.signingKeyId;
+    cachedSecrets.signingKeyPrivate = secrets.signingKeyPrivate;
+    return {
+      isInitialSetup: !exists,
+      needsSetup: !validateSecrets(cachedSecrets),
+      secrets: cachedSecrets
+    };
+  });
+}
+
+var _default = (0, _formBuilder.withDocument)(class MuxVideoInput extends _react.Component {
+  constructor(_props) {
+    super(_props);
+
+    _defineProperty(this, "state", {
+      assetDocument: null,
+      confirmRemove: false,
+      deleteOnMuxChecked: false,
+      deleteAssetDocumentChecked: true,
+      error: null,
+      hasFocus: false,
+      isInitialSetup: true,
+      isLoading: 'secrets',
+      needsSetup: true,
+      secrets: null,
+      isSigned: false,
+      showSetup: false,
+      showBrowser: false,
+      videoReadyToPlay: false,
+      thumbLoading: false
+    });
+
+    _defineProperty(this, "focus", () => {
+      this.handleFocus();
+    });
+
+    _defineProperty(this, "handleFocus", () => {
+      this.setState({
+        hasFocus: true
+      });
+    });
+
+    _defineProperty(this, "handleBlur", () => {
+      this.setState({
+        hasFocus: false
+      });
+    });
+
+    _defineProperty(this, "pollMux", () => {
+      var assetDocument = this.state.assetDocument;
+
+      if (!assetDocument) {
+        return;
+      }
+
+      if (this.pollInterval) {
+        return;
+      }
+
+      this.pollInterval = setInterval(() => {
+        (0, _assets.getAsset)(assetDocument.assetId).then(response => {
+          var props = response.data; // TODO: consider a deep comparison on `props` with asset data and only patch only if it's changed
+
+          _SanityClient.default.patch(assetDocument._id).set({
+            status: props.status,
+            data: props
+          }).commit({
+            returnDocuments: false
+          });
+        }).catch(error => {
+          this.setState({
+            error
+          });
+        });
+      }, 2000);
+    });
+
+    _defineProperty(this, "handleSetupButtonClicked", event => {
+      this.setState(prevState => ({
+        showSetup: !prevState.showStetup
+      }));
+    });
+
+    _defineProperty(this, "handleSaveSetup", _ref2 => {
+      var token = _ref2.token,
+          secretKey = _ref2.secretKey,
+          enableSignedUrls = _ref2.enableSignedUrls,
+          signingKeyId = _ref2.signingKeyId,
+          signingKeyPrivate = _ref2.signingKeyPrivate;
+      cachedSecrets.token = token;
+      cachedSecrets.secretKey = secretKey;
+      cachedSecrets.enableSignedUrls = enableSignedUrls;
+      cachedSecrets.signingKeyId = signingKeyId;
+      cachedSecrets.signingKeyPrivate = signingKeyPrivate;
+      this.setState({
+        showSetup: false,
+        secrets: cachedSecrets,
+        needsSetup: !validateSecrets(cachedSecrets)
+      });
+    });
+
+    _defineProperty(this, "handleCancelSaveSetup", () => {
+      this.setState({
+        showSetup: false
+      });
+    });
+
+    _defineProperty(this, "handleOnUploadComplete", result => {
+      var onChange = this.props.onChange;
+      var _id = result._id;
+      onChange(_patchEvent.default.from([(0, _patchEvent.setIfMissing)({
+        asset: {
+          _ref: _id
+        }
+      }, []), (0, _patchEvent.set)({
+        _ref: _id
+      }, ['asset'])]));
+      this.setState({
+        assetDocument: result.document
+      }, () => {
+        this.setupAssetListener();
+      });
+    });
+
+    _defineProperty(this, "handleRemoveVideoButtonClicked", event => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.setState({
+        confirmRemove: true
+      });
+    });
+
+    _defineProperty(this, "handleRemoveVideo", () => {
+      var assetDocument = this.state.assetDocument;
+      this.setState({
+        isLoading: true
+      });
+
+      var unsetAsset = () => {
+        return new Promise((resolve, reject) => {
+          this.setState({
+            assetDocument: null,
+            confirmRemove: false,
+            isLoading: false
+          }, () => {
+            if (this.state.deleteOnMuxChecked || this.state.deleteAssetDocumentChecked) {
+              return _SanityClient.default.patch(this.props.document._id).unset(['video']).commit({
+                returnDocuments: false
+              }).then(() => {
+                if (!assetDocument) {
+                  return resolve();
+                }
+
+                return _SanityClient.default.delete(assetDocument._id).then(() => {
+                  resolve();
+                }).catch(error => {
+                  reject(error);
+                });
+              });
+            }
+
+            return this.props.onChange(_patchEvent.default.from((0, _patchEvent.unset)()));
+          });
+        });
+      };
+
+      return unsetAsset().then(() => {
+        if (this.state.deleteOnMuxChecked) {
+          return (0, _assets.deleteAsset)(assetDocument.assetId).catch(error => {
+            this.setState({
+              error
+            });
+          });
+        }
+
+        return true;
+      }).catch(error => {
+        this.setState({
+          error
+        });
+      });
+    });
+
+    _defineProperty(this, "handleCancelRemove", event => {
+      this.setState({
+        confirmRemove: false,
+        deleteOnMuxChecked: true,
+        deleteAssetDocumentChecked: true
+      });
+    });
+
+    _defineProperty(this, "handleDeleteOnMuxCheckBoxClicked", event => {
+      this.setState(prevState => ({
+        deleteOnMuxChecked: !prevState.deleteOnMuxChecked
+      }));
+    });
+
+    _defineProperty(this, "handleDeleteAssetDocumentCheckBoxClicked", event => {
+      this.setState(prevState => ({
+        deleteAssetDocumentChecked: !prevState.deleteAssetDocumentChecked
+      }));
+    });
+
+    _defineProperty(this, "handleOpenThumb", event => {
+      if (!this.videoPlayer.current) {
+        return;
+      }
+
+      var _this$state = this.state,
+          assetDocument = _this$state.assetDocument,
+          isSigned = _this$state.isSigned;
+      var currentTime = this.videoPlayer.current.getVideoElement().currentTime;
+      var options = {
+        time: assetDocument.thumbTime,
+        width: 320,
+        height: 320,
+        fitMode: 'crop',
+        isSigned,
+        signingKeyId: cachedSecrets.signingKeyId,
+        signingKeyPrivate: cachedSecrets.signingKeyPrivate
+      };
+      var thumb = (0, _getPosterSrc.default)(assetDocument.playbackId, options);
+      var newThumb = (0, _getPosterSrc.default)(assetDocument.playbackId, _objectSpread(_objectSpread({}, options), {}, {
+        time: currentTime
+      }));
+      this.setState({
+        thumb,
+        newThumb
+      });
+    });
+
+    _defineProperty(this, "handleSetThumbButton", event => {
+      if (!this.videoPlayer.current) {
+        return;
+      }
+
+      this.setState({
+        thumbLoading: true
+      });
+      var _this$state2 = this.state,
+          assetDocument = _this$state2.assetDocument,
+          isSigned = _this$state2.isSigned;
+      var currentTime = this.videoPlayer.current.getVideoElement().currentTime;
+
+      _SanityClient.default.patch(assetDocument._id).set({
+        thumbTime: currentTime
+      }).commit({
+        returnDocuments: false
+      }).then(response => {
+        var options = {
+          time: currentTime,
+          width: 320,
+          height: 320,
+          fitMode: 'crop',
+          isSigned,
+          signingKeyId: cachedSecrets.signingKeyId,
+          signingKeyPrivate: cachedSecrets.signingKeyPrivate
+        };
+        var thumb = (0, _getPosterSrc.default)(assetDocument.playbackId, options);
+        this.setState({
+          thumb,
+          thumbLoading: false
+        });
+      }).catch(error => {
+        this.setState({
+          error,
+          thumbLoading: false
+        });
+      });
+    });
+
+    _defineProperty(this, "handleErrorClose", event => {
+      if (event) {
+        event.preventDefault();
+      }
+
+      this.setState({
+        error: null
+      });
+    });
+
+    _defineProperty(this, "handleCloseThumbPreview", event => {
+      this.setState({
+        thumb: null
+      });
+    });
+
+    _defineProperty(this, "handleBrowseButton", event => {
+      this.setState({
+        showBrowser: true
+      });
+    });
+
+    _defineProperty(this, "handleCloseBrowser", event => {
+      this.setState({
+        showBrowser: false
+      });
+    });
+
+    _defineProperty(this, "handleSelectAsset", asset => {
+      var onChange = this.props.onChange;
+      onChange(_patchEvent.default.from([(0, _patchEvent.setIfMissing)({
+        asset: {
+          _ref: asset._id
+        }
+      }, []), (0, _patchEvent.set)({
+        _ref: asset._id
+      }, ['asset'])]));
+      this.setState({
+        showBrowser: false,
+        assetDocument: asset
+      }, () => {
+        this.setupAssetListener();
+      });
+    });
+
+    _defineProperty(this, "handleVideoReadyToPlay", () => {
+      this.setState({
+        videoReadyToPlay: true
+      });
+    });
+
+    getSecrets().then(_ref3 => {
+      var _props$value;
+
+      var secrets = _ref3.secrets,
+          isInitialSetup = _ref3.isInitialSetup,
+          needsSetup = _ref3.needsSetup;
+      this.setState({
+        secrets,
+        isInitialSetup,
+        needsSetup,
+        isLoading: (_props$value = _props.value) === null || _props$value === void 0 ? void 0 : _props$value.asset // If there is an asset continue loading
+
+      });
+    }).catch(error => this.setState({
+      error
+    }));
+    this.setupButton = /*#__PURE__*/_react.default.createRef();
+    this.pollInterval = null;
+    this.video = /*#__PURE__*/_react.default.createRef();
+    this.removeVideoButton = /*#__PURE__*/_react.default.createRef();
+    this.videoPlayer = /*#__PURE__*/_react.default.createRef();
+  }
+
+  componentDidMount() {
+    this.setupAssetListener();
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+
+    if (this.pollInterval) {
+      clearInterval(this.pollInterval);
+      this.pollInterval = null;
+    }
+  }
+
+  getAsset() {
+    var value = this.props.value;
+    return value ? value.asset : null;
+  }
+
+  setupAssetListener() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+
+    this.setState({
+      videoReadyToPlay: false
+    });
+    var asset = this.getAsset();
+
+    if (!asset) {
+      return;
+    }
+
+    this.subscription = (0, _preview.observePaths)(asset, ['thumbTime', 'data', 'assetId', 'playbackId', 'status']).pipe((0, _operators.tap)(assetDocument => {
+      var _assetDocument$data, _assetDocument$data$s, _assetDocument$data2, _assetDocument$data2$, _assetDocument$data3, _assetDocument$data3$;
+
+      this.setState({
+        assetDocument
+      });
+
+      if (assetDocument && assetDocument.status === 'errored') {
+        clearInterval(this.pollInterval);
+        this.pollInterval = null; // eslint-disable-next-line no-warning-comments
+        // todo: use client.observable
+
+        return this.handleRemoveVideo().then(() => {
+          this.setState({
+            isLoading: false,
+            error: new Error(assetDocument.data.errors.messages.join(' '))
+          });
+        });
+      } // Poll MUX if it's preparing the main document or its own static renditions
+
+
+      if ((assetDocument === null || assetDocument === void 0 ? void 0 : assetDocument.status) === 'preparing' || (assetDocument === null || assetDocument === void 0 ? void 0 : (_assetDocument$data = assetDocument.data) === null || _assetDocument$data === void 0 ? void 0 : (_assetDocument$data$s = _assetDocument$data.static_renditions) === null || _assetDocument$data$s === void 0 ? void 0 : _assetDocument$data$s.status) === 'preparing') {
+        this.pollMux();
+      } // If MP4 support is enabled: MUX will prepare static_renditions only _after_ an asset
+      // has been successfully uploaded.
+      // A _ready_ asset doesn't mean static mp4s are generated and ready for use!
+      // In these cases, wait for `static_renditions.status === 'ready'` before clearing the poll interval.
+
+
+      if (assetDocument && assetDocument.status === 'ready') {
+        switch (_config.default.mp4_support) {
+          case 'standard':
+            if ((assetDocument === null || assetDocument === void 0 ? void 0 : (_assetDocument$data2 = assetDocument.data) === null || _assetDocument$data2 === void 0 ? void 0 : (_assetDocument$data2$ = _assetDocument$data2.static_renditions) === null || _assetDocument$data2$ === void 0 ? void 0 : _assetDocument$data2$.status) === 'ready') {
+              clearInterval(this.pollInterval);
+              this.pollInterval = null;
+            }
+
+            break;
+
+          case 'none':
+          default:
+            clearInterval(this.pollInterval);
+            this.pollInterval = null;
+            break;
+        }
+      } // eslint-disable-next-line camelcase
+
+
+      var isSigned = (assetDocument === null || assetDocument === void 0 ? void 0 : (_assetDocument$data3 = assetDocument.data) === null || _assetDocument$data3 === void 0 ? void 0 : (_assetDocument$data3$ = _assetDocument$data3.playback_ids[0]) === null || _assetDocument$data3$ === void 0 ? void 0 : _assetDocument$data3$.policy) === 'signed';
+      this.setState({
+        assetDocument,
+        isSigned,
+        isLoading: false
+      });
+      return (0, _rxjs.of)(assetDocument);
+    })).subscribe();
+  }
+
+  renderSetup() {
+    var secrets = this.state.secrets;
+    return /*#__PURE__*/_react.default.createElement(_ui.Dialog, {
+      header: "Mux API Credentials",
+      width: 1,
+      onClose: this.handleCancelSaveSetup,
+      zOffset: 1000
+    }, /*#__PURE__*/_react.default.createElement(_Setup.default, {
+      secrets: secrets || null,
+      onSave: this.handleSaveSetup,
+      onCancel: this.handleCancelSaveSetup
+    }));
+  }
+
+  renderSetupButton() {
+    var _this$state3 = this.state,
+        isLoading = _this$state3.isLoading,
+        showSetup = _this$state3.showSetup,
+        needsSetup = _this$state3.needsSetup;
+    var renderSetup = !isLoading && showSetup;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _Input.default.setupButtonContainer
+    }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+      tone: needsSetup ? 'critical' : 'positive',
+      mode: "bleed",
+      onClick: this.handleSetupButtonClicked,
+      icon: _pluginIcon.default,
+      padding: 3,
+      radius: 3,
+      "aria-label": "Set up Mux credentials"
+    }), renderSetup && this.renderSetup());
+  }
+
+  renderSetupNotice() {
+    var _this$state4 = this.state,
+        isLoading = _this$state4.isLoading,
+        isInitialSetup = _this$state4.isInitialSetup;
+
+    if (isLoading) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      padding: 4,
+      space: 5,
+      style: {
+        backgroundColor: '#efefefef',
+        borderRadius: 3
+      }
+    }, /*#__PURE__*/_react.default.createElement(_MuxLogo.default, null), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 4
+    }, isInitialSetup && /*#__PURE__*/_react.default.createElement(_ui.Text, null, "Looks like this is the first time you are using the Mux video plugin in this dataset. Great!"), /*#__PURE__*/_react.default.createElement(_ui.Text, null, "Before you can upload video, you must set your Mux credentials."), /*#__PURE__*/_react.default.createElement(_ui.Text, null, "Click the plugin button in the field title to open Setup.")));
+  } // eslint-disable-next-line complexity
+
+
+  renderAsset() {
+    var _this$state5 = this.state,
+        assetDocument = _this$state5.assetDocument,
+        isSigned = _this$state5.isSigned;
+    var renderAsset = !!assetDocument;
+
+    if (!renderAsset) {
+      return null;
+    }
+
+    var isSignedAlert = isSigned ? /*#__PURE__*/_react.default.createElement(_ui.Card, {
+      padding: 3,
+      radius: 2,
+      shadow: 1,
+      tone: "positive"
+    }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
+      size: 1
+    }, "This Mux asset is using a signed url.")) : null;
+    return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 2,
+      marginBottom: 2
+    }, isSignedAlert, /*#__PURE__*/_react.default.createElement(_Video.default, {
+      assetDocument: assetDocument,
+      ref: this.videoPlayer,
+      onReady: this.handleVideoReadyToPlay,
+      onCancel: this.handleRemoveVideo
+    }));
+  }
+
+  renderVideoButtons() {
+    var _this$state6 = this.state,
+        assetDocument = _this$state6.assetDocument,
+        confirmRemove = _this$state6.confirmRemove;
+    var readOnly = this.props.readOnly;
+
+    if (assetDocument && assetDocument.status === 'ready' && !readOnly) {
+      return [/*#__PURE__*/_react.default.createElement(_ui.Button, {
+        key: "browse",
+        mode: "ghost",
+        tone: "primary",
+        onClick: this.handleBrowseButton,
+        text: "Browse"
+      }), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+        key: "thumbnail",
+        mode: "ghost",
+        tone: "primary",
+        disabled: this.state.videoReadyToPlay === false,
+        onClick: this.handleOpenThumb,
+        text: "Thumbnail"
+      }), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+        key: "remove",
+        ref: this.removeVideoButton,
+        onClick: confirmRemove ? NOOP : this.handleRemoveVideoButtonClicked,
+        mode: "ghost",
+        tone: "critical",
+        text: "Remove"
+      })];
+    }
+
+    return null;
+  }
+
+  renderBrowser() {
+    return /*#__PURE__*/_react.default.createElement(_fullscreen.default, {
+      title: "Select video",
+      onClose: this.handleCloseBrowser,
+      isOpen: true
+    }, /*#__PURE__*/_react.default.createElement(_SelectAsset.default, {
+      onSelect: this.handleSelectAsset
+    }));
+  }
+
+  renderError() {
+    var error = this.state.error;
+
+    if (!error) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_ui.Dialog, {
+      header: "Error",
+      onClose: this.handleErrorClose
+    }, /*#__PURE__*/_react.default.createElement(_content.default, {
+      size: "small"
+    }, error.message));
+  }
+
+  render() {
+    var _assetDocument$data4, _assetDocument$data4$, _assetDocument$data4$2;
+
+    var _this$props = this.props,
+        type = _this$props.type,
+        level = _this$props.level,
+        markers = _this$props.markers;
+    var _this$state7 = this.state,
+        isLoading = _this$state7.isLoading,
+        secrets = _this$state7.secrets,
+        hasFocus = _this$state7.hasFocus,
+        needsSetup = _this$state7.needsSetup,
+        error = _this$state7.error,
+        showBrowser = _this$state7.showBrowser,
+        confirmRemove = _this$state7.confirmRemove,
+        thumb = _this$state7.thumb,
+        assetDocument = _this$state7.assetDocument;
+    var cssAspectRatio = (assetDocument === null || assetDocument === void 0 ? void 0 : (_assetDocument$data4 = assetDocument.data) === null || _assetDocument$data4 === void 0 ? void 0 : (_assetDocument$data4$ = _assetDocument$data4.aspect_ratio) === null || _assetDocument$data4$ === void 0 ? void 0 : (_assetDocument$data4$2 = _assetDocument$data4$.split(':')) === null || _assetDocument$data4$2 === void 0 ? void 0 : _assetDocument$data4$2.join('/')) || 'auto';
+    return /*#__PURE__*/_react.default.createElement(_ui.ThemeProvider, {
+      theme: _ui.studioTheme
+    }, /*#__PURE__*/_react.default.createElement(_ui.Box, {
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
+      align: "center",
+      justify: "space-between"
+    }, /*#__PURE__*/_react.default.createElement(_default2.default, {
+      label: type.title,
+      markers: markers,
+      description: type.description,
+      level: level,
+      className: _Input.default.formField
+    }), this.renderSetupButton()), isLoading === 'secrets' && /*#__PURE__*/_react.default.createElement(_ui.Box, {
+      marginBottom: 2
+    }, /*#__PURE__*/_react.default.createElement(_ui.Inline, {
+      align: "center",
+      space: 2
+    }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+      inline: true
+    }), /*#__PURE__*/_react.default.createElement(_ui.Text, {
+      size: 1
+    }, "Fetching credentials"))), needsSetup && this.renderSetupNotice(), !needsSetup && /*#__PURE__*/_react.default.createElement(_Uploader.default, {
+      buttons: this.renderVideoButtons(),
+      hasFocus: hasFocus // eslint-disable-next-line react/jsx-handler-names
+      ,
+      onBlur: this.blur // eslint-disable-next-line react/jsx-handler-names
+      ,
+      onFocus: this.focus,
+      onSetupButtonClicked: this.handleSetupButtonClicked,
+      onUploadComplete: this.handleOnUploadComplete,
+      secrets: secrets,
+      onBrowse: this.handleBrowseButton
+    }, this.renderAsset()), thumb && /*#__PURE__*/_react.default.createElement(_ui.Dialog, {
+      header: "Thumbnail",
+      zOffset: 1000,
+      onClose: this.handleCloseThumbPreview
+    }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 3,
+      padding: 3
+    }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 3
+    }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 2
+    }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
+      size: 1,
+      weight: "semibold"
+    }, "Current:"), /*#__PURE__*/_react.default.createElement("img", {
+      style: {
+        maxWidth: '100%',
+        borderRadius: '0.1875rem',
+        display: 'block',
+        aspectRatio: cssAspectRatio
+      },
+      src: this.state.thumb,
+      width: 400
+    })), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 2
+    }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
+      size: 1,
+      weight: "semibold"
+    }, "New:"), /*#__PURE__*/_react.default.createElement("img", {
+      style: {
+        maxWidth: '100%',
+        borderRadius: '0.1875rem',
+        display: 'block',
+        aspectRatio: cssAspectRatio
+      },
+      src: this.state.newThumb,
+      width: 400
+    }))), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+      key: "thumbnail",
+      mode: "ghost",
+      tone: "primary",
+      disabled: this.state.videoReadyToPlay === false,
+      onClick: this.handleSetThumbButton,
+      loading: this.state.thumbLoading,
+      text: "Set new thumbnail"
+    }))), showBrowser && this.renderBrowser(), confirmRemove && /*#__PURE__*/_react.default.createElement(_ui.Dialog, {
+      header: "Remove video",
+      zOffset: 1000,
+      onClose: this.handleCancelRemove
+    }, /*#__PURE__*/_react.default.createElement(_ui.Box, {
+      padding: 4
+    }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 3
+    }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
+      align: "center"
+    }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
+      checked: this.state.deleteOnMuxChecked,
+      onChange: this.handleDeleteOnMuxCheckBoxClicked
+    }), /*#__PURE__*/_react.default.createElement(_ui.Text, {
+      style: {
+        margin: '0 10px'
+      }
+    }, "Delete asset on Mux")), /*#__PURE__*/_react.default.createElement(_ui.Flex, {
+      align: "center"
+    }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
+      disabled: this.state.deleteOnMuxChecked,
+      checked: this.state.deleteOnMuxChecked || this.state.deleteAssetDocumentChecked,
+      onChange: this.handleDeleteAssetDocumentCheckBoxClicked
+    }), /*#__PURE__*/_react.default.createElement(_ui.Text, {
+      style: {
+        margin: '0 10px'
+      }
+    }, "Delete video from dataset")), /*#__PURE__*/_react.default.createElement(_ui.Grid, {
+      columns: 2,
+      gap: 2
+    }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+      mode: "ghost",
+      tone: "default",
+      text: "Cancel",
+      onClick: this.handleCancelRemove,
+      loading: !!isLoading
+    }), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+      mode: "default",
+      tone: "critical",
+      text: "Remove",
+      onClick: this.handleRemoveVideo,
+      loading: !!isLoading
+    }))))), error && this.renderError()));
+  }
+
+});
+
+exports.default = _default;
+//# sourceMappingURL=Input.js.map