sanity-plugin-mux-input 2.0.3 → 2.0.5

package/lib/_chunks/{Input-4ec3c050.js → Input-b9334416.js}

@@ -1,22 +1,13 @@
 'use strict';
 
-const _excluded = ["icon", "id", "accept", "capture", "fontSize", "multiple", "onSelect", "padding", "space", "textAlign", "text", "disabled"],
-  _excluded2 = ["onSelect"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var VideoSource_styled = require('./VideoSource.styled-99ffa712.js');
+var VideoSource_styled = require('./VideoSource.styled-11786b3a.js');
 var sanity = require('sanity');
 var useSWR = require('swr');
-var index = require('./index-9933dea2.js');
+var index = require('./index-5a70abdc.js');
 var rxjs = require('rxjs');
 var operators = require('rxjs/operators');
 var uuid = require('@sanity/uuid');
@@ -26,7 +17,7 @@ var icons = require('@sanity/icons');
 var motion = require('motion');
 var styled = require('styled-components');
 var useDevicePixelRatio = require('use-device-pixel-ratio');
-var playbackCore = require('@mux/playback-core');
+var MuxVideo = require('@mux/mux-video-react');
 var react = require('media-chrome/dist/react');
 var reactIs = require('react-is');
 var suspendReact = require('suspend-react');
@@ -58,6 +49,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var useSWR__default = /*#__PURE__*/_interopDefaultCompat(useSWR);
 var UpChunk__namespace = /*#__PURE__*/_interopNamespaceCompat(UpChunk);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var MuxVideo__default = /*#__PURE__*/_interopDefaultCompat(MuxVideo);
 function useDialogState() {
   return React.useState(false);
 }
@@ -124,7 +116,9 @@ function createUpChunkObservable(uuid, uploadUrl, source) {
       endpoint: uploadUrl,
       file: source,
       dynamicChunkSize: true
+      // changes the chunk size based on network speeds
     });
+
     const successHandler = () => {
       subscriber.next({
         type: "success",
@@ -327,14 +321,23 @@ function uploadFile(config, client, file) {
         },
         body
       })).pipe(operators.mergeMap(result => {
-        return createUpChunkObservable(uuid$1, result.upload.url, file).pipe(operators.mergeMap(event => {
+        return createUpChunkObservable(uuid$1, result.upload.url, file).pipe(
+        // eslint-disable-next-line no-warning-comments
+        // @TODO type the observable events
+        // eslint-disable-next-line max-nested-callbacks
+        operators.mergeMap(event => {
           if (event.type !== "success") {
             return rxjs.of(event);
           }
-          return rxjs.from(updateAssetDocumentFromUpload(client, uuid$1)).pipe(operators.mergeMap(doc => rxjs.of(_objectSpread(_objectSpread({}, event), {}, {
+          return rxjs.from(updateAssetDocumentFromUpload(client, uuid$1)).pipe(
+          // eslint-disable-next-line max-nested-callbacks
+          operators.mergeMap(doc => rxjs.of({
+            ...event,
             asset: doc
-          }))));
-        }), operators.catchError(err => {
+          })));
+        }),
+        // eslint-disable-next-line max-nested-callbacks
+        operators.catchError(err => {
           return cancelUpload(client, uuid$1).pipe(operators.mergeMapTo(rxjs.throwError(err)));
         }));
       })));
@@ -775,7 +778,8 @@ const PER_PAGE = 200;
 function createQuery() {
   let start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   let end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : PER_PAGE;
-  return "*[_type == \"mux.videoAsset\"] | order(_updatedAt desc) [".concat(start, "...").concat(end, "]");
+  return (/* groq */"*[_type == \"mux.videoAsset\"] | order(_updatedAt desc) [".concat(start, "...").concat(end, "]")
+  );
 }
 function SelectAssets(_ref3) {
   let {
@@ -882,7 +886,8 @@ function EditThumbnailDialog(_ref6) {
   const client = VideoSource_styled.useClient();
   const dialogId = "EditThumbnailDialog".concat(React.useId());
   const nextTime = React.useMemo(() => getCurrentTime(), [getCurrentTime]);
-  const assetWithNewThumbnail = React.useMemo(() => _objectSpread(_objectSpread({}, asset), {}, {
+  const assetWithNewThumbnail = React.useMemo(() => ({
+    ...asset,
     thumbTime: nextTime
   }), [asset, nextTime]);
   const [saving, setSaving] = React.useState(false);
@@ -1057,7 +1062,7 @@ const UploadProgress = _ref10 => {
     })
   });
 };
-const MuxVideo = _ref11 => {
+const MuxVideoOld = _ref11 => {
   let {
     asset,
     buttons,
@@ -1121,20 +1126,6 @@ const MuxVideo = _ref11 => {
       muteRef.current.shadowRoot.appendChild(style.cloneNode(true));
     }
   }, []);
-  const [playerInitTime] = React.useState(() => playbackCore.generatePlayerInitTime());
-  const playbackEngineRef = React.useRef(void 0);
-  React.useEffect(() => {
-    if (isLoading || !videoSrc) {
-      return;
-    }
-    const nextPlaybackEngineRef = playbackCore.initialize({
-      src: videoSrc,
-      playerInitTime,
-      playerSoftwareName: "sanity-plugin-mux-input",
-      playerSoftwareVersion: "dev-preview"
-    }, video.current, playbackEngineRef.current);
-    playbackEngineRef.current = nextPlaybackEngineRef;
-  }, [videoSrc, isLoading, playerInitTime]);
   React.useEffect(() => {
     var _a2, _b2, _c2;
     if ((asset == null ? void 0 : asset.status) === "errored") {
@@ -1142,6 +1133,14 @@ const MuxVideo = _ref11 => {
       throw new Error((_c2 = (_b2 = (_a2 = asset.data) == null ? void 0 : _a2.errors) == null ? void 0 : _b2.messages) == null ? void 0 : _c2.join(" "));
     }
   }, [(_d = (_c = asset.data) == null ? void 0 : _c.errors) == null ? void 0 : _d.messages, asset == null ? void 0 : asset.status, handleCancelUpload]);
+  const signedToken = React.useMemo(() => {
+    try {
+      const url = new URL(videoSrc);
+      return url.searchParams.get("token");
+    } catch {
+      return false;
+    }
+  }, [videoSrc]);
   if (error) {
     throw error;
   }
@@ -1162,9 +1161,10 @@ const MuxVideo = _ref11 => {
       tone: "transparent",
       scheme: "dark",
       children: [/* @__PURE__ */jsxRuntime.jsxs(react.MediaController, {
-        children: [/* @__PURE__ */jsxRuntime.jsx("video", {
+        children: [/* @__PURE__ */jsxRuntime.jsx(MuxVideo__default.default, {
           playsInline: true,
           ref: video,
+          playbackId: "".concat(asset.playbackId).concat(signedToken ? "?token=".concat(signedToken) : ""),
           onError: handleError,
           slot: "media",
           preload: "metadata",
@@ -1244,20 +1244,20 @@ const FileButton = styled__default.default(ui.MenuItem)(_ref12 => {
 });
 const FileInputMenuItem = React__default.default.forwardRef(function FileInputMenuItem2(props, forwardedRef) {
   const {
-      icon,
-      id: idProp,
-      accept,
-      capture,
-      fontSize,
-      multiple,
-      onSelect,
-      padding = 3,
-      space = 3,
-      textAlign,
-      text,
-      disabled
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+    icon,
+    id: idProp,
+    accept,
+    capture,
+    fontSize,
+    multiple,
+    onSelect,
+    padding = 3,
+    space = 3,
+    textAlign,
+    text,
+    disabled,
+    ...rest
+  } = props;
   const idHook = React.useId();
   const id = idProp || idHook;
   const handleChange = React__default.default.useCallback(event => {
@@ -1282,7 +1282,8 @@ const FileInputMenuItem = React__default.default.forwardRef(function FileInputMe
       children: text
     })]
   });
-  return /* @__PURE__ */jsxRuntime.jsxs(FileButton, _objectSpread(_objectSpread({}, rest), {}, {
+  return /* @__PURE__ */jsxRuntime.jsxs(FileButton, {
+    ...rest,
     htmlFor: id,
     padding: 0,
     fontSize: 2,
@@ -1299,7 +1300,7 @@ const FileInputMenuItem = React__default.default.forwardRef(function FileInputMe
       value: "",
       disabled
     })]
-  }));
+  });
 });
 const LockCard = styled__default.default(ui.Card)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0.6;\n  mix-blend-mode: screen;\n  background: transparent;\n"])));
 const LockButton = styled__default.default(ui.Button)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  background: transparent;\n  color: white;\n"])));
@@ -1469,9 +1470,9 @@ const HiddenInput = styled__default.default.input(_templateObject15 || (_templat
 const Label = styled__default.default.label(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
 const FileInputButton = _ref14 => {
   let {
-      onSelect
-    } = _ref14,
-    props = _objectWithoutProperties(_ref14, _excluded2);
+    onSelect,
+    ...props
+  } = _ref14;
   const inputId = "FileSelect".concat(React.useId());
   const inputRef = React.useRef(null);
   const handleSelect = React.useCallback(event => {
@@ -1493,14 +1494,15 @@ const FileInputButton = _ref14 => {
       id: inputId,
       onChange: handleSelect,
       value: ""
-    }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, _objectSpread({
+    }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
       onClick: handleButtonClick,
       mode: "default",
       tone: "primary",
       style: {
         width: "100%"
-      }
-    }, props))]
+      },
+      ...props
+    })]
   });
 };
 const UploadCard = styled__default.default(ui.Card)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  && {\n    border-style: dashed;\n  }\n"])));
@@ -1601,6 +1603,8 @@ class MuxVideoInputUploader extends React.Component {
     };
     this.dragEnteredEls = [];
     this.ctrlDown = false;
+    // eslint-disable-next-line no-warning-comments
+    // @TODO add proper typings for the return values of uploadFile and uploadUrl
     this.upload = null;
     this.container = React__default.default.createRef();
     this.handleProgress = evt => {
@@ -1640,6 +1644,8 @@ class MuxVideoInputUploader extends React.Component {
         }
       });
     };
+    // eslint-disable-next-line no-warning-comments
+    // @TODO add proper typings for the Observable events
     this.handleUploadEvent = event => {
       switch (event.type) {
         case "success":
@@ -1786,7 +1792,7 @@ class MuxVideoInputUploader extends React.Component {
         onDragEnter: this.handleDragEnter,
         onPaste: this.handlePaste,
         ref: this.container,
-        children: this.props.asset ? /* @__PURE__ */jsxRuntime.jsx(MuxVideo, {
+        children: this.props.asset ? /* @__PURE__ */jsxRuntime.jsx(MuxVideoOld, {
           readOnly: this.props.readOnly,
           asset: this.props.asset,
           onChange: this.props.onChange,
@@ -1870,6 +1876,8 @@ function init(_ref16) {
   return {
     submitting: false,
     error: null,
+    // Form inputs don't set the state back to null when clearing a field, but uses empty strings
+    // This ensures the `dirty` check works correctly
     token: token != null ? token : "",
     secretKey: secretKey != null ? secretKey : "",
     enableSignedUrls: enableSignedUrls != null ? enableSignedUrls : false
@@ -1878,21 +1886,24 @@ function init(_ref16) {
 function reducer(state, action) {
   switch (action == null ? void 0 : action.type) {
     case "submit":
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return {
+        ...state,
         submitting: true,
         error: null
-      });
+      };
     case "error":
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return {
+        ...state,
         submitting: false,
         error: action.payload
-      });
+      };
     case "reset":
       return init(action.payload);
     case "change":
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return {
+        ...state,
         [action.payload.name]: action.payload.value
-      });
+      };
     default:
       throw new Error("Unknown action type: ".concat(action == null ? void 0 : action.type));
   }
@@ -2645,7 +2656,8 @@ const Input = props => {
     children: isLoading ? /* @__PURE__ */jsxRuntime.jsx(index.InputFallback, {}) : /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */jsxRuntime.jsx(Onboard, {
         setDialogState
-      }) : /* @__PURE__ */jsxRuntime.jsx(MuxVideoInputUploader, _objectSpread(_objectSpread({}, props), {}, {
+      }) : /* @__PURE__ */jsxRuntime.jsx(MuxVideoInputUploader, {
+        ...props,
         config: props.config,
         onChange: props.onChange,
         client,
@@ -2654,7 +2666,7 @@ const Input = props => {
         dialogState,
         setDialogState,
         needsSetup: secretDocumentValues.value.needsSetup
-      })), dialogState === "secrets" && /* @__PURE__ */jsxRuntime.jsx(ConfigureApi$1, {
+      }), dialogState === "secrets" && /* @__PURE__ */jsxRuntime.jsx(ConfigureApi$1, {
         setDialogState,
         secrets: secretDocumentValues.value.secrets
       })]
@@ -2663,4 +2675,4 @@ const Input = props => {
 };
 var Input$1 = React.memo(Input);
 exports.default = Input$1;
-//# sourceMappingURL=Input-4ec3c050.js.map
+//# sourceMappingURL=Input-b9334416.js.map