sanity-plugin-mux-input 2.0.3 → 2.0.5

package/lib/_chunks/{Input-aa6d929b.js → Input-235cb658.js}

@@ -1,20 +1,11 @@
-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); }
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useState, useMemo, memo, useRef, useLayoutEffect, useCallback, useId, useEffect, isValidElement, createElement, forwardRef, Component, useReducer } from 'react';
-import { useClient, VideoThumbnail, AnimatedVideoThumbnail, ThumbGrid, CardLoadMore, getPlaybackId, getPlaybackPolicy, generateJwt, getPosterSrc, _id, useAssetDocumentValues } from './VideoSource.styled-24577ec8.js';
+import { useClient, VideoThumbnail, AnimatedVideoThumbnail, ThumbGrid, CardLoadMore, getPlaybackId, getPlaybackPolicy, generateJwt, getPosterSrc, _id, useAssetDocumentValues } from './VideoSource.styled-f1b98975.js';
 import { useProjectId, useDataset, useDocumentValues, PatchEvent, setIfMissing, set, unset, LinearProgress } from 'sanity';
 import useSWR from 'swr';
-import { muxSecretsDocumentId, cacheNs, InputFallback } from './index-c54f5393.js';
+import { muxSecretsDocumentId, cacheNs, InputFallback } from './index-7260e0df.js';
 import { Observable, defer, concat, of, throwError, from, Subject } from 'rxjs';
 import { switchMap, mergeMap, catchError, mergeMapTo, takeUntil, tap } from 'rxjs/operators';
 import { uuid } from '@sanity/uuid';
@@ -24,7 +15,7 @@ import { DownloadIcon, EllipsisVerticalIcon, TrashIcon, LockIcon, EditIcon, Uplo
 import { animate } from 'motion';
 import styled, { css } from 'styled-components';
 import { getDevicePixelRatio } from 'use-device-pixel-ratio';
-import { generatePlayerInitTime, initialize } from '@mux/playback-core';
+import MuxVideo from '@mux/mux-video-react';
 import { MediaControlBar, MediaPosterImage, MediaController, MediaLoadingIndicator, MediaPlayButton, MediaMuteButton, MediaTimeDisplay, MediaTimeRange, MediaDurationDisplay, MediaFullscreenButton } from 'media-chrome/dist/react';
 import { isValidElementType } from 'react-is';
 import { clear, preload } from 'suspend-react';
@@ -94,7 +85,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",
@@ -297,14 +290,23 @@ function uploadFile(config, client, file) {
         },
         body
       })).pipe(mergeMap(result => {
-        return createUpChunkObservable(uuid$1, result.upload.url, file).pipe(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
+        mergeMap(event => {
           if (event.type !== "success") {
             return of(event);
           }
-          return from(updateAssetDocumentFromUpload(client, uuid$1)).pipe(mergeMap(doc => of(_objectSpread(_objectSpread({}, event), {}, {
+          return from(updateAssetDocumentFromUpload(client, uuid$1)).pipe(
+          // eslint-disable-next-line max-nested-callbacks
+          mergeMap(doc => of({
+            ...event,
             asset: doc
-          }))));
-        }), catchError(err => {
+          })));
+        }),
+        // eslint-disable-next-line max-nested-callbacks
+        catchError(err => {
           return cancelUpload(client, uuid$1).pipe(mergeMapTo(throwError(err)));
         }));
       })));
@@ -745,7 +747,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 {
@@ -852,7 +855,8 @@ function EditThumbnailDialog(_ref6) {
   const client = useClient();
   const dialogId = "EditThumbnailDialog".concat(useId());
   const nextTime = useMemo(() => getCurrentTime(), [getCurrentTime]);
-  const assetWithNewThumbnail = useMemo(() => _objectSpread(_objectSpread({}, asset), {}, {
+  const assetWithNewThumbnail = useMemo(() => ({
+    ...asset,
     thumbTime: nextTime
   }), [asset, nextTime]);
   const [saving, setSaving] = useState(false);
@@ -1027,7 +1031,7 @@ const UploadProgress = _ref10 => {
     })
   });
 };
-const MuxVideo = _ref11 => {
+const MuxVideoOld = _ref11 => {
   let {
     asset,
     buttons,
@@ -1091,20 +1095,6 @@ const MuxVideo = _ref11 => {
       muteRef.current.shadowRoot.appendChild(style.cloneNode(true));
     }
   }, []);
-  const [playerInitTime] = useState(() => generatePlayerInitTime());
-  const playbackEngineRef = useRef(void 0);
-  useEffect(() => {
-    if (isLoading || !videoSrc) {
-      return;
-    }
-    const nextPlaybackEngineRef = initialize({
-      src: videoSrc,
-      playerInitTime,
-      playerSoftwareName: "sanity-plugin-mux-input",
-      playerSoftwareVersion: "dev-preview"
-    }, video.current, playbackEngineRef.current);
-    playbackEngineRef.current = nextPlaybackEngineRef;
-  }, [videoSrc, isLoading, playerInitTime]);
   useEffect(() => {
     var _a2, _b2, _c2;
     if ((asset == null ? void 0 : asset.status) === "errored") {
@@ -1112,6 +1102,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 = useMemo(() => {
+    try {
+      const url = new URL(videoSrc);
+      return url.searchParams.get("token");
+    } catch {
+      return false;
+    }
+  }, [videoSrc]);
   if (error) {
     throw error;
   }
@@ -1132,9 +1130,10 @@ const MuxVideo = _ref11 => {
       tone: "transparent",
       scheme: "dark",
       children: [/* @__PURE__ */jsxs(MediaController, {
-        children: [/* @__PURE__ */jsx("video", {
+        children: [/* @__PURE__ */jsx(MuxVideo, {
           playsInline: true,
           ref: video,
+          playbackId: "".concat(asset.playbackId).concat(signedToken ? "?token=".concat(signedToken) : ""),
           onError: handleError,
           slot: "media",
           preload: "metadata",
@@ -1214,20 +1213,20 @@ const FileButton = styled(MenuItem)(_ref12 => {
 });
 const FileInputMenuItem = React.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 = useId();
   const id = idProp || idHook;
   const handleChange = React.useCallback(event => {
@@ -1252,7 +1251,8 @@ const FileInputMenuItem = React.forwardRef(function FileInputMenuItem2(props, fo
       children: text
     })]
   });
-  return /* @__PURE__ */jsxs(FileButton, _objectSpread(_objectSpread({}, rest), {}, {
+  return /* @__PURE__ */jsxs(FileButton, {
+    ...rest,
     htmlFor: id,
     padding: 0,
     fontSize: 2,
@@ -1269,7 +1269,7 @@ const FileInputMenuItem = React.forwardRef(function FileInputMenuItem2(props, fo
       value: "",
       disabled
     })]
-  }));
+  });
 });
 const LockCard = styled(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(Button)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  background: transparent;\n  color: white;\n"])));
@@ -1439,9 +1439,9 @@ const HiddenInput = styled.input(_templateObject15 || (_templateObject15 = _tagg
 const Label = styled.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(useId());
   const inputRef = useRef(null);
   const handleSelect = useCallback(event => {
@@ -1463,14 +1463,15 @@ const FileInputButton = _ref14 => {
       id: inputId,
       onChange: handleSelect,
       value: ""
-    }), /* @__PURE__ */jsx(Button, _objectSpread({
+    }), /* @__PURE__ */jsx(Button, {
       onClick: handleButtonClick,
       mode: "default",
       tone: "primary",
       style: {
         width: "100%"
-      }
-    }, props))]
+      },
+      ...props
+    })]
   });
 };
 const UploadCard = styled(Card)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  && {\n    border-style: dashed;\n  }\n"])));
@@ -1571,6 +1572,8 @@ class MuxVideoInputUploader extends 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.createRef();
     this.handleProgress = evt => {
@@ -1610,6 +1613,8 @@ class MuxVideoInputUploader extends Component {
         }
       });
     };
+    // eslint-disable-next-line no-warning-comments
+    // @TODO add proper typings for the Observable events
     this.handleUploadEvent = event => {
       switch (event.type) {
         case "success":
@@ -1756,7 +1761,7 @@ class MuxVideoInputUploader extends Component {
         onDragEnter: this.handleDragEnter,
         onPaste: this.handlePaste,
         ref: this.container,
-        children: this.props.asset ? /* @__PURE__ */jsx(MuxVideo, {
+        children: this.props.asset ? /* @__PURE__ */jsx(MuxVideoOld, {
           readOnly: this.props.readOnly,
           asset: this.props.asset,
           onChange: this.props.onChange,
@@ -1840,6 +1845,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
@@ -1848,21 +1855,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));
   }
@@ -2615,7 +2625,8 @@ const Input = props => {
     children: isLoading ? /* @__PURE__ */jsx(InputFallback, {}) : /* @__PURE__ */jsxs(Fragment, {
       children: [secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */jsx(Onboard, {
         setDialogState
-      }) : /* @__PURE__ */jsx(MuxVideoInputUploader, _objectSpread(_objectSpread({}, props), {}, {
+      }) : /* @__PURE__ */jsx(MuxVideoInputUploader, {
+        ...props,
         config: props.config,
         onChange: props.onChange,
         client,
@@ -2624,7 +2635,7 @@ const Input = props => {
         dialogState,
         setDialogState,
         needsSetup: secretDocumentValues.value.needsSetup
-      })), dialogState === "secrets" && /* @__PURE__ */jsx(ConfigureApi$1, {
+      }), dialogState === "secrets" && /* @__PURE__ */jsx(ConfigureApi$1, {
         setDialogState,
         secrets: secretDocumentValues.value.secrets
       })]
@@ -2633,4 +2644,4 @@ const Input = props => {
 };
 var Input$1 = memo(Input);
 export { Input$1 as default };
-//# sourceMappingURL=Input-aa6d929b.js.map
+//# sourceMappingURL=Input-235cb658.js.map