sanity-plugin-mux-input 2.0.2 → 2.0.4

package/lib/_chunks/Input-7fb0dcd2.js

@@ -0,0 +1,2682 @@
+'use strict';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var VideoSource_styled = require('./VideoSource.styled-70d38762.js');
+var sanity = require('sanity');
+var useSWR = require('swr');
+var index = require('./index-adfcd166.js');
+var rxjs = require('rxjs');
+var operators = require('rxjs/operators');
+var uuid = require('@sanity/uuid');
+var UpChunk = require('@mux/upchunk');
+var ui = require('@sanity/ui');
+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 react = require('media-chrome/dist/react');
+var reactIs = require('react-is');
+var suspendReact = require('suspend-react');
+function _interopDefaultCompat(e) {
+  return e && typeof e === 'object' && 'default' in e ? e : {
+    default: e
+  };
+}
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var useSWR__default = /*#__PURE__*/_interopDefaultCompat(useSWR);
+var UpChunk__namespace = /*#__PURE__*/_interopNamespaceCompat(UpChunk);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+function useDialogState() {
+  return React.useState(false);
+}
+const useMuxPolling = asset => {
+  var _a, _b;
+  const client = VideoSource_styled.useClient();
+  const projectId = sanity.useProjectId();
+  const dataset = sanity.useDataset();
+  const shouldFetch = React.useMemo(() => {
+    var _a2, _b2;
+    return !!(asset == null ? void 0 : asset.assetId) && ((asset == null ? void 0 : asset.status) === "preparing" || ((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing");
+  }, [asset == null ? void 0 : asset.assetId, (_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status, asset == null ? void 0 : asset.status]);
+  return useSWR__default.default(shouldFetch ? "/".concat(projectId, "/addons/mux/assets/").concat(dataset, "/data/").concat(asset == null ? void 0 : asset.assetId) : null, async () => {
+    const {
+      data
+    } = await client.request({
+      url: "/addons/mux/assets/".concat(dataset, "/data/").concat(asset.assetId),
+      withCredentials: true,
+      method: "GET"
+    });
+    client.patch(asset._id).set({
+      status: data.status,
+      data
+    }).commit({
+      returnDocuments: false
+    });
+  }, {
+    refreshInterval: 2e3,
+    refreshWhenHidden: true,
+    dedupingInterval: 1e3
+  });
+};
+const path = ["token", "secretKey", "enableSignedUrls", "signingKeyId", "signingKeyPrivate"];
+const useSecretsDocumentValues = () => {
+  const {
+    error,
+    isLoading,
+    value
+  } = sanity.useDocumentValues(index.muxSecretsDocumentId, path);
+  const cache = React.useMemo(() => {
+    const exists = Boolean(value);
+    const secrets = {
+      token: (value == null ? void 0 : value.token) || null,
+      secretKey: (value == null ? void 0 : value.secretKey) || null,
+      enableSignedUrls: (value == null ? void 0 : value.enableSignedUrls) || false,
+      signingKeyId: (value == null ? void 0 : value.signingKeyId) || null,
+      signingKeyPrivate: (value == null ? void 0 : value.signingKeyPrivate) || null
+    };
+    return {
+      isInitialSetup: !exists,
+      needsSetup: !(secrets == null ? void 0 : secrets.token) || !(secrets == null ? void 0 : secrets.secretKey),
+      secrets
+    };
+  }, [value]);
+  return {
+    error,
+    isLoading,
+    value: cache
+  };
+};
+function createUpChunkObservable(uuid, uploadUrl, source) {
+  return new rxjs.Observable(subscriber => {
+    const upchunk = UpChunk__namespace.createUpload({
+      endpoint: uploadUrl,
+      file: source,
+      dynamicChunkSize: true
+      // changes the chunk size based on network speeds
+    });
+
+    const successHandler = () => {
+      subscriber.next({
+        type: "success",
+        id: uuid
+      });
+      subscriber.complete();
+    };
+    const errorHandler = data => subscriber.error(new Error(data.detail.message));
+    const progressHandler = data => {
+      return subscriber.next({
+        type: "progress",
+        percent: data.detail
+      });
+    };
+    const offlineHandler = () => {
+      upchunk.pause();
+      subscriber.next({
+        type: "pause",
+        id: uuid
+      });
+    };
+    const onlineHandler = () => {
+      upchunk.resume();
+      subscriber.next({
+        type: "resume",
+        id: uuid
+      });
+    };
+    upchunk.on("success", successHandler);
+    upchunk.on("error", errorHandler);
+    upchunk.on("progress", progressHandler);
+    upchunk.on("offline", offlineHandler);
+    upchunk.on("online", onlineHandler);
+    return () => upchunk.abort();
+  });
+}
+function deleteAsset(client, assetId) {
+  const {
+    dataset
+  } = client.config();
+  return client.request({
+    url: "/addons/mux/assets/".concat(dataset, "/").concat(assetId),
+    withCredentials: true,
+    method: "DELETE"
+  });
+}
+function getAsset(client, assetId) {
+  const {
+    dataset
+  } = client.config();
+  return client.request({
+    url: "/addons/mux/assets/".concat(dataset, "/data/").concat(assetId),
+    withCredentials: true,
+    method: "GET"
+  });
+}
+function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate) {
+  const doc = {
+    _id: "secrets.mux",
+    _type: "mux.apiKey",
+    token,
+    secretKey,
+    enableSignedUrls,
+    signingKeyId,
+    signingKeyPrivate
+  };
+  return client.createOrReplace(doc);
+}
+function createSigningKeys(client) {
+  const {
+    dataset
+  } = client.config();
+  return client.request({
+    url: "/addons/mux/signing-keys/".concat(dataset),
+    withCredentials: true,
+    method: "POST"
+  });
+}
+function testSecrets(client) {
+  const {
+    dataset
+  } = client.config();
+  return client.request({
+    url: "/addons/mux/secrets/".concat(dataset, "/test"),
+    withCredentials: true,
+    method: "GET"
+  });
+}
+async function haveValidSigningKeys(client, signingKeyId, signingKeyPrivate) {
+  if (!(signingKeyId && signingKeyPrivate)) {
+    return false;
+  }
+  const {
+    dataset
+  } = client.config();
+  try {
+    const res = await client.request({
+      url: "/addons/mux/signing-keys/".concat(dataset, "/").concat(signingKeyId),
+      withCredentials: true,
+      method: "GET"
+    });
+    return !!(res.data && res.data.id);
+  } catch (e) {
+    console.error("Error fetching signingKeyId", signingKeyId, "assuming it is not valid");
+    return false;
+  }
+}
+function testSecretsObservable(client) {
+  const {
+    dataset
+  } = client.config();
+  return rxjs.defer(() => client.observable.request({
+    url: "/addons/mux/secrets/".concat(dataset, "/test"),
+    withCredentials: true,
+    method: "GET"
+  }));
+}
+function cancelUpload(client, uuid) {
+  return client.observable.request({
+    url: "/addons/mux/uploads/".concat(client.clientConfig.dataset, "/").concat(uuid),
+    withCredentials: true,
+    method: "DELETE"
+  });
+}
+function uploadUrl(config, client, url) {
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  return testUrl(url).pipe(operators.switchMap(validUrl => {
+    return rxjs.concat(rxjs.of({
+      type: "url",
+      url: validUrl
+    }), testSecretsObservable(client).pipe(operators.switchMap(json => {
+      if (!json || !json.status) {
+        return rxjs.throwError(new Error("Invalid credentials"));
+      }
+      const uuid$1 = uuid.uuid();
+      const {
+        enableSignedUrls
+      } = options;
+      const muxBody = {
+        input: validUrl,
+        playback_policy: [enableSignedUrls ? "signed" : "public"],
+        mp4_support: config.mp4_support
+      };
+      const query = {
+        muxBody: JSON.stringify(muxBody),
+        filename: validUrl.split("/").slice(-1)[0]
+      };
+      const dataset = client.clientConfig.dataset;
+      return rxjs.defer(() => client.observable.request({
+        url: "/addons/mux/assets/".concat(dataset),
+        withCredentials: true,
+        method: "POST",
+        headers: {
+          "MUX-Proxy-UUID": uuid$1,
+          "Content-Type": "application/json"
+        },
+        query
+      })).pipe(operators.mergeMap(result => {
+        const asset = result && result.results && result.results[0] && result.results[0].document || null;
+        if (!asset) {
+          return rxjs.throwError(new Error("No asset document returned"));
+        }
+        return rxjs.of({
+          type: "success",
+          id: uuid$1,
+          asset
+        });
+      }));
+    })));
+  }));
+}
+function uploadFile(config, client, file) {
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  return testFile(file).pipe(operators.switchMap(fileOptions => {
+    return rxjs.concat(rxjs.of({
+      type: "file",
+      file: fileOptions
+    }), testSecretsObservable(client).pipe(operators.switchMap(json => {
+      if (!json || !json.status) {
+        return rxjs.throwError(new Error("Invalid credentials"));
+      }
+      const uuid$1 = uuid.uuid();
+      const {
+        enableSignedUrls
+      } = options;
+      const body = {
+        mp4_support: config.mp4_support,
+        playback_policy: [enableSignedUrls ? "signed" : "public"]
+      };
+      return rxjs.concat(rxjs.of({
+        type: "uuid",
+        uuid: uuid$1
+      }), rxjs.defer(() => client.observable.request({
+        url: "/addons/mux/uploads/".concat(client.clientConfig.dataset),
+        withCredentials: true,
+        method: "POST",
+        headers: {
+          "MUX-Proxy-UUID": uuid$1,
+          "Content-Type": "application/json"
+        },
+        body
+      })).pipe(operators.mergeMap(result => {
+        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(
+          // eslint-disable-next-line max-nested-callbacks
+          operators.mergeMap(doc => rxjs.of({
+            ...event,
+            asset: doc
+          })));
+        }),
+        // eslint-disable-next-line max-nested-callbacks
+        operators.catchError(err => {
+          return cancelUpload(client, uuid$1).pipe(operators.mergeMapTo(rxjs.throwError(err)));
+        }));
+      })));
+    })));
+  }));
+}
+function getUpload(client, assetId) {
+  const {
+    dataset
+  } = client.config();
+  return client.request({
+    url: "/addons/mux/uploads/".concat(dataset, "/").concat(assetId),
+    withCredentials: true,
+    method: "GET"
+  });
+}
+function pollUpload(client, uuid) {
+  const maxTries = 10;
+  let pollInterval;
+  let tries = 0;
+  let assetId;
+  let upload;
+  return new Promise((resolve, reject) => {
+    pollInterval = setInterval(async () => {
+      try {
+        upload = await getUpload(client, uuid);
+      } catch (err) {
+        reject(err);
+        return;
+      }
+      assetId = upload && upload.data && upload.data.asset_id;
+      if (assetId) {
+        clearInterval(pollInterval);
+        resolve(upload);
+      }
+      if (tries > maxTries) {
+        clearInterval(pollInterval);
+        reject(new Error("Upload did not finish"));
+      }
+      tries++;
+    }, 2e3);
+  });
+}
+async function updateAssetDocumentFromUpload(client, uuid) {
+  let upload;
+  let asset;
+  try {
+    upload = await pollUpload(client, uuid);
+  } catch (err) {
+    return Promise.reject(err);
+  }
+  try {
+    asset = await getAsset(client, upload.data.asset_id);
+  } catch (err) {
+    return Promise.reject(err);
+  }
+  const doc = {
+    _id: uuid,
+    _type: "mux.videoAsset",
+    status: asset.data.status,
+    data: asset.data,
+    assetId: asset.data.id,
+    playbackId: asset.data.playback_ids[0].id,
+    uploadId: upload.data.id
+  };
+  return client.createOrReplace(doc).then(() => {
+    return doc;
+  });
+}
+function testFile(file) {
+  if (typeof window !== "undefined" && file instanceof window.File) {
+    const fileOptions = optionsFromFile({}, file);
+    return rxjs.of(fileOptions);
+  }
+  return rxjs.throwError(new Error("Invalid file"));
+}
+function testUrl(url) {
+  const error = new Error("Invalid URL");
+  if (typeof url !== "string") {
+    return rxjs.throwError(error);
+  }
+  let parsed;
+  try {
+    parsed = new URL(url);
+  } catch (err) {
+    return rxjs.throwError(error);
+  }
+  if (parsed && !parsed.protocol.match(/http:|https:/)) {
+    return rxjs.throwError(error);
+  }
+  return rxjs.of(url);
+}
+function optionsFromFile(opts, file) {
+  if (typeof window === "undefined" || !(file instanceof window.File)) {
+    return opts;
+  }
+  return {
+    name: opts.preserveFilename === false ? void 0 : file.name,
+    type: file.type
+  };
+}
+function extractDroppedFiles(dataTransfer) {
+  const files = Array.from(dataTransfer.files || []);
+  const items = Array.from(dataTransfer.items || []);
+  if (files && files.length > 0) {
+    return Promise.resolve(files);
+  }
+  return normalizeItems(items).then(arr => arr.flat());
+}
+function normalizeItems(items) {
+  return Promise.all(items.map(item => {
+    if (item.kind === "file" && item.webkitGetAsEntry) {
+      let entry;
+      try {
+        entry = item.webkitGetAsEntry();
+      } catch (err) {
+        return [item.getAsFile()];
+      }
+      if (!entry) {
+        return [];
+      }
+      return entry.isDirectory ? walk(entry) : [item.getAsFile()];
+    }
+    if (item.kind === "file") {
+      const file = item.getAsFile();
+      return Promise.resolve(file ? [file] : []);
+    }
+    return new Promise(resolve => item.getAsString(resolve)).then(str => str ? [new File([str], "unknown.txt", {
+      type: item.type
+    })] : []);
+  }));
+}
+function isFile(entry) {
+  return entry.isFile;
+}
+function isDirectory(entry) {
+  return entry.isDirectory;
+}
+function walk(entry) {
+  if (isFile(entry)) {
+    return new Promise(resolve => entry.file(resolve)).then(file => [file]);
+  }
+  if (isDirectory(entry)) {
+    const dir = entry.createReader();
+    return new Promise(resolve => dir.readEntries(resolve)).then(entries => entries.filter(entr => !entr.name.startsWith("."))).then(entries => Promise.all(entries.map(walk)).then(arr => arr.flat()));
+  }
+  return Promise.resolve([]);
+}
+function AssetActionsMenu(props) {
+  const {
+    asset
+  } = props;
+  const id = React.useId();
+  const [dialogState, setDialogState] = React.useState();
+  const [open, setOpen] = React.useState(false);
+  const [menuElement, setMenuRef] = React.useState(null);
+  const handleDelete = React.useCallback(() => setDialogState("confirm-delete"), []);
+  const handleClick = React.useCallback(() => {
+    setDialogState(false);
+    setOpen(true);
+  }, [setDialogState]);
+  const handleClose = React.useCallback(() => {
+    setDialogState(false);
+    setOpen(false);
+  }, [setDialogState]);
+  React.useEffect(() => {
+    if (open && dialogState) {
+      setOpen(false);
+    }
+  }, [dialogState, open]);
+  ui.useClickOutside(React.useCallback(() => setOpen(false), []), [menuElement]);
+  return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */jsxRuntime.jsx(ui.MenuButton, {
+      id: "".concat(id, "-asset-menu"),
+      button: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+        icon: icons.EllipsisVerticalIcon,
+        mode: "ghost",
+        onClick: handleClick,
+        padding: 2
+      }),
+      menu: /* @__PURE__ */jsxRuntime.jsx(ui.Menu, {
+        ref: setMenuRef,
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.MenuItem, {
+          tone: "critical",
+          icon: icons.TrashIcon,
+          text: "Delete",
+          onClick: handleDelete
+        })
+      }),
+      portal: true,
+      placement: "right"
+    }), dialogState === "confirm-delete" && /* @__PURE__ */jsxRuntime.jsx(DeleteDialog, {
+      asset,
+      onClose: handleClose
+    })]
+  });
+}
+function DeleteDialog(props) {
+  const {
+    asset,
+    onClose
+  } = props;
+  const client = VideoSource_styled.useClient();
+  const {
+    push: pushToast
+  } = ui.useToast();
+  const [deleting, setDeleting] = React.useState(false);
+  const [deleteOnMux, setDeleteOnMux] = React.useState(false);
+  const id = React.useId();
+  const width = 200 * useDevicePixelRatio.getDevicePixelRatio({
+    maxDpr: 2
+  });
+  const handleDelete = React.useCallback(async () => {
+    var _a, _b, _c;
+    setDeleting(true);
+    try {
+      if (asset == null ? void 0 : asset._id) {
+        await client.delete(asset._id);
+      }
+      if (deleteOnMux && (asset == null ? void 0 : asset.assetId)) {
+        await deleteAsset(client, asset.assetId);
+      }
+      (_c = (_b = (_a = document.querySelector("[data-id=\"".concat(asset._id, "\"]"))) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.setAttribute) == null ? void 0 : _c.call(_b, "hidden", "true");
+    } catch (err) {
+      console.error("Failed during delete", err);
+      pushToast({
+        closable: true,
+        description: err == null ? void 0 : err.message,
+        duration: 5e3,
+        title: "Uncaught error",
+        status: "error"
+      });
+    } finally {
+      setDeleting(false);
+      onClose();
+    }
+  }, [asset._id, asset.assetId, client, deleteOnMux, onClose, pushToast]);
+  return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
+    onClose,
+    id: "".concat(id, "-confirm-delete"),
+    header: "Delete video",
+    footer: /* @__PURE__ */jsxRuntime.jsxs(ui.Grid, {
+      padding: 2,
+      gap: 2,
+      columns: 2,
+      children: [/* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+        mode: "bleed",
+        text: "Cancel",
+        onClick: onClose
+      }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+        text: "Delete",
+        tone: "critical",
+        icon: icons.TrashIcon,
+        onClick: handleDelete,
+        loading: deleting
+      })]
+    }),
+    width: 1,
+    children: /* @__PURE__ */jsxRuntime.jsx(ui.Stack, {
+      paddingX: 0,
+      paddingY: 0,
+      space: 1,
+      children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+        paddingX: [2, 3, 4],
+        paddingY: [3, 3, 3, 4],
+        children: /* @__PURE__ */jsxRuntime.jsxs(ui.Grid, {
+          columns: 3,
+          gap: 3,
+          children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+            style: {
+              gridColumn: "span 2"
+            },
+            align: "center",
+            children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+              padding: 4,
+              children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
+                space: 4,
+                children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+                  align: "center",
+                  as: "label",
+                  children: [/* @__PURE__ */jsxRuntime.jsx(ui.Checkbox, {
+                    checked: deleteOnMux,
+                    onChange: () => setDeleteOnMux(prev => !prev)
+                  }), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+                    style: {
+                      margin: "0 10px"
+                    },
+                    children: "Delete asset on Mux"
+                  })]
+                }), /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+                  align: "center",
+                  as: "label",
+                  children: [/* @__PURE__ */jsxRuntime.jsx(ui.Checkbox, {
+                    disabled: true,
+                    checked: true
+                  }), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+                    style: {
+                      margin: "0 10px"
+                    },
+                    children: "Delete video from dataset"
+                  })]
+                })]
+              })
+            })
+          }), /* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.VideoThumbnail, {
+            asset,
+            width,
+            showTip: true
+          })]
+        })
+      })
+    })
+  });
+}
+function VideoSource(_ref) {
+  let {
+    assets,
+    isLoading,
+    isLastPage,
+    onSelect,
+    onLoadMore
+  } = _ref;
+  const handleClick = React.useCallback(event => onSelect(event.currentTarget.dataset.id), [onSelect]);
+  const handleKeyPress = React.useCallback(event => {
+    if (event.key === "Enter") {
+      onSelect(event.currentTarget.dataset.id);
+    }
+  }, [onSelect]);
+  const width = 200 * useDevicePixelRatio.getDevicePixelRatio({
+    maxDpr: 2
+  });
+  return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Box, {
+      padding: 4,
+      children: [/* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.ThumbGrid, {
+        gap: 2,
+        children: assets.map(asset => /* @__PURE__ */jsxRuntime.jsx(VideoSourceItem, {
+          asset,
+          onClick: handleClick,
+          onKeyPress: handleKeyPress,
+          width
+        }, asset._id))
+      }), isLoading && assets.length === 0 && /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+        justify: "center",
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {
+          muted: true
+        })
+      }), !isLoading && assets.length === 0 && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+        align: "center",
+        muted: true,
+        children: "No videos"
+      })]
+    }), assets.length > 0 && !isLastPage && /* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.CardLoadMore, {
+      tone: "default",
+      padding: 4,
+      children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+        direction: "column",
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+          type: "button",
+          icon: icons.DownloadIcon,
+          loading: isLoading,
+          onClick: onLoadMore,
+          text: "Load more",
+          tone: "primary"
+        })
+      })
+    })]
+  });
+}
+const _VideoSourceItem = _ref2 => {
+  let {
+    asset,
+    onClick,
+    onKeyPress,
+    width
+  } = _ref2;
+  const [hover, setHover] = React.useState(null);
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (!ref.current || hover === null) {
+      return;
+    }
+    if (hover) {
+      motion.animate(ref.current, {
+        opacity: 1
+      });
+    } else {
+      motion.animate(ref.current, {
+        opacity: 0
+      });
+    }
+  }, [hover]);
+  return /* @__PURE__ */jsxRuntime.jsxs(ui.Box, {
+    height: "fill",
+    style: {
+      position: "relative"
+    },
+    children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Card, {
+      as: "button",
+      "data-id": asset._id,
+      onClick,
+      onKeyPress,
+      tabIndex: 0,
+      radius: 2,
+      padding: 1,
+      style: {
+        lineHeight: 0,
+        position: "relative"
+      },
+      __unstable_focusRing: true,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      children: [/* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.VideoThumbnail, {
+        asset,
+        width,
+        showTip: true
+      }), (asset == null ? void 0 : asset.playbackId) && /* @__PURE__ */jsxRuntime.jsx(AnimateWrapper, {
+        tone: "transparent",
+        ref,
+        margin: 1,
+        radius: 1,
+        children: hover !== null && /* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.AnimatedVideoThumbnail, {
+          asset,
+          width
+        })
+      })]
+    }), /* @__PURE__ */jsxRuntime.jsx(ActionsAssetsContainer, {
+      children: /* @__PURE__ */jsxRuntime.jsx(AssetActionsMenu, {
+        asset
+      })
+    })]
+  });
+};
+const VideoSourceItem = React.memo(_VideoSourceItem);
+const AnimateWrapper = styled__default.default(ui.Card)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  will-change: opacity;\n  background: transparent;\n  background-color: hsl(0deg 0% 0% / 33%);\n  opacity: 0;\n  pointer-events: none;\n"])));
+const ActionsAssetsContainer = styled__default.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 300;\n  opacity: 0;\n  top: 7px;\n  right: 7px;\n\n  button:hover + &,\n  button:focus-visible + &,\n  &:hover,\n  &:focus-visible {\n    opacity: 1;\n  }\n"])));
+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 (/* groq */"*[_type == \"mux.videoAsset\"] | order(_updatedAt desc) [".concat(start, "...").concat(end, "]")
+  );
+}
+function SelectAssets(_ref3) {
+  let {
+    asset,
+    onChange,
+    setDialogState
+  } = _ref3;
+  const client = VideoSource_styled.useClient();
+  const pageNoRef = React.useRef(0);
+  const [isLastPage, setLastPage] = React.useState(false);
+  const [isLoading, setLoading] = React.useState(false);
+  const [assets, setAssets] = React.useState([]);
+  const fetchPage = React.useCallback(pageNo => {
+    const start = pageNo * PER_PAGE;
+    const end = start + PER_PAGE;
+    setLoading(true);
+    return client.fetch(createQuery(start, end)).then(result => {
+      setLastPage(result.length < PER_PAGE);
+      setAssets(prev => prev.concat(result));
+    }).finally(() => setLoading(false));
+  }, [client]);
+  const handleSelect = React.useCallback(id => {
+    const selected = assets.find(doc => doc._id === id);
+    if (!selected) {
+      throw new TypeError("Failed to find video asset with id: ".concat(id));
+    }
+    onChange(sanity.PatchEvent.from([sanity.setIfMissing({
+      asset: {}
+    }), sanity.set({
+      _type: "reference",
+      _weak: true,
+      _ref: selected._id
+    }, ["asset"])]));
+    setDialogState(false);
+  }, [assets, onChange, setDialogState]);
+  const handleLoadMore = React.useCallback(() => {
+    fetchPage(++pageNoRef.current);
+  }, [fetchPage]);
+  React.useEffect(() => void fetchPage(pageNoRef.current), [fetchPage]);
+  return /* @__PURE__ */jsxRuntime.jsx(VideoSource, {
+    onSelect: handleSelect,
+    assets,
+    isLastPage,
+    isLoading,
+    onLoadMore: handleLoadMore
+  });
+}
+function InputBrowser(_ref4) {
+  let {
+    setDialogState,
+    asset,
+    onChange
+  } = _ref4;
+  const id = "InputBrowser".concat(React.useId());
+  const handleClose = React.useCallback(() => setDialogState(false), [setDialogState]);
+  return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
+    scheme: "dark",
+    __unstable_autoFocus: true,
+    header: "Select video",
+    id,
+    onClose: handleClose,
+    width: 2,
+    children: /* @__PURE__ */jsxRuntime.jsx(SelectAssets, {
+      asset,
+      onChange,
+      setDialogState
+    })
+  });
+}
+const useCancelUpload = (asset, onChange) => {
+  const client = VideoSource_styled.useClient();
+  return React.useCallback(() => {
+    if (!asset) {
+      return;
+    }
+    onChange(sanity.PatchEvent.from(sanity.unset()));
+    if (asset.assetId) {
+      deleteAsset(client, asset.assetId);
+    }
+    if (asset._id) {
+      client.delete(asset._id);
+    }
+  }, [asset, client, onChange]);
+};
+function getVideoSrc(_ref5) {
+  let {
+    asset,
+    client
+  } = _ref5;
+  const playbackId = VideoSource_styled.getPlaybackId(asset);
+  const searchParams = new URLSearchParams();
+  if (VideoSource_styled.getPlaybackPolicy(asset) === "signed") {
+    const token = VideoSource_styled.generateJwt(client, playbackId, "v");
+    searchParams.set("token", token);
+  }
+  return "https://stream.mux.com/".concat(playbackId, ".m3u8?").concat(searchParams);
+}
+function EditThumbnailDialog(_ref6) {
+  let {
+    asset,
+    getCurrentTime,
+    setDialogState
+  } = _ref6;
+  const client = VideoSource_styled.useClient();
+  const dialogId = "EditThumbnailDialog".concat(React.useId());
+  const nextTime = React.useMemo(() => getCurrentTime(), [getCurrentTime]);
+  const assetWithNewThumbnail = React.useMemo(() => ({
+    ...asset,
+    thumbTime: nextTime
+  }), [asset, nextTime]);
+  const [saving, setSaving] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const handleSave = React.useCallback(() => {
+    setSaving(true);
+    client.patch(asset._id).set({
+      thumbTime: nextTime
+    }).commit({
+      returnDocuments: false
+    }).then(() => void setDialogState(false)).catch(setError).finally(() => void setSaving(false));
+  }, [client, asset._id, nextTime, setDialogState]);
+  const width = 300 * useDevicePixelRatio.getDevicePixelRatio({
+    maxDpr: 2
+  });
+  if (error) {
+    throw error;
+  }
+  return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
+    id: dialogId,
+    header: "Edit thumbnail",
+    onClose: () => setDialogState(false),
+    footer: /* @__PURE__ */jsxRuntime.jsx(ui.Stack, {
+      padding: 3,
+      children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+        mode: "ghost",
+        tone: "primary",
+        loading: saving,
+        onClick: handleSave,
+        text: "Set new thumbnail"
+      }, "thumbnail")
+    }),
+    children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
+      space: 3,
+      padding: 3,
+      children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
+        space: 2,
+        children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+          size: 1,
+          weight: "semibold",
+          children: "Current:"
+        }), /* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.VideoThumbnail, {
+          asset,
+          width
+        })]
+      }), /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
+        space: 2,
+        children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+          size: 1,
+          weight: "semibold",
+          children: "New:"
+        }), /* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.VideoThumbnail, {
+          asset: assetWithNewThumbnail,
+          width
+        })]
+      })]
+    })
+  });
+}
+function getStoryboardSrc(_ref7) {
+  let {
+    asset,
+    client
+  } = _ref7;
+  const playbackId = VideoSource_styled.getPlaybackId(asset);
+  const searchParams = new URLSearchParams();
+  if (VideoSource_styled.getPlaybackPolicy(asset) === "signed") {
+    const token = VideoSource_styled.generateJwt(client, playbackId, "s");
+    searchParams.set("token", token);
+  }
+  return "https://image.mux.com/".concat(playbackId, "/storyboard.vtt?").concat(searchParams);
+}
+const VideoContainer = styled__default.default(ui.Card)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  min-height: 150px;\n  aspect-ratio: 16 / 9;\n  overflow: hidden;\n  border-radius: 1px;\n  media-airplay-button[media-airplay-unavailable] {\n    display: none;\n  }\n  media-volume-range[media-volume-unavailable] {\n    display: none;\n  }\n  media-pip-button[media-pip-unavailable] {\n    display: none;\n  }\n  media-controller {\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    --media-range-track-background-color: rgba(255, 255, 255, 0.5);\n    --media-range-track-border-radius: 3px;\n    width: 100%;\n    height: 100%;\n    background-color: transparent;\n  }\n  media-control-bar {\n    --media-button-icon-width: 18px;\n    --media-preview-time-margin: 0px;\n  }\n  media-control-bar:not([slot]) :is([role='button'], [role='switch'], button) {\n    height: 44px;\n  }\n  .size-extra-small media-control-bar [role='button'],\n  .size-extra-small media-control-bar [role='switch'] {\n    height: auto;\n    padding: 4.4% 3.2%;\n  }\n  .mxp-spacer {\n    flex-grow: 1;\n    height: 100%;\n    background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));\n  }\n  media-controller::part(vertical-layer) {\n    transition: background-color 1s;\n  }\n  media-controller:is([media-paused], :not([user-inactive]))::part(vertical-layer) {\n    background-color: rgba(0, 0, 0, 0.6);\n    transition: background-color 0.25s;\n  }\n  .mxp-center-controls {\n    --media-background-color: transparent;\n    --media-button-icon-width: 100%;\n    --media-button-icon-height: auto;\n    pointer-events: none;\n    width: 100%;\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    justify-content: center;\n  }\n  .mxp-center-controls media-play-button {\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    padding: 0;\n    width: max(27px, min(9%, 90px));\n  }\n  .mxp-center-controls media-seek-backward-button,\n  .mxp-center-controls media-seek-forward-button {\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    padding: 0;\n    margin: 0 10%;\n    width: min(7%, 70px);\n  }\n  media-loading-indicator {\n    --media-loading-icon-width: 100%;\n    --media-button-icon-height: auto;\n    pointer-events: none;\n    position: absolute;\n    width: min(15%, 150px);\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    justify-content: center;\n  }\n  /* Intentionally don't target the div for transition but the children\n of the div. Prevents messing with media-chrome's autohide feature. */\n  media-loading-indicator + div * {\n    transition: opacity 0.15s;\n    opacity: 1;\n  }\n  media-loading-indicator[media-loading]:not([media-paused]) ~ div > * {\n    opacity: 0;\n    transition-delay: 400ms;\n  }\n  media-volume-range {\n    width: min(100%, 100px);\n  }\n  media-time-display {\n    white-space: nowrap;\n  }\n  :is(media-time-display, media-text-display, media-playback-rate-button) {\n    color: inherit;\n  }\n  media-controller:fullscreen media-control-bar[slot='top-chrome'] {\n    /* Hide menus and buttons that trigger modals when in full-screen */\n    display: none;\n  }\n  video {\n    background: transparent;\n  }\n  media-controller:not(:fullscreen) video {\n    aspect-ratio: 16 / 9;\n  }\n  media-controller:not(:-webkit-full-screen) video {\n    aspect-ratio: 16 / 9;\n  }\n"])));
+const StyledCenterControls = styled__default.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  && {\n    --media-background-color: transparent;\n    --media-button-icon-width: 100%;\n    --media-button-icon-height: auto;\n    pointer-events: none;\n    width: 100%;\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    justify-content: center;\n    media-play-button {\n      --media-control-background: transparent;\n      --media-control-hover-background: transparent;\n      padding: 0;\n      width: max(27px, min(9%, 90px));\n    }\n  }\n"])));
+const TopControls = styled__default.default(react.MediaControlBar)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  justify-content: flex-end;\n  button {\n    height: auto;\n  }\n"])));
+function PosterImage(_ref8) {
+  let {
+    asset
+  } = _ref8;
+  const client = VideoSource_styled.useClient();
+  const ref = React.useRef(null);
+  const src = React.useMemo(() => VideoSource_styled.getPosterSrc({
+    client,
+    asset,
+    width: 1920,
+    height: 1080
+  }), [client, asset]);
+  React.useEffect(() => {
+    var _a;
+    if (ref.current) {
+      const style = document.createElement("style");
+      style.innerHTML = "img { object-fit: contain; }";
+      if ((_a = ref.current) == null ? void 0 : _a.shadowRoot) {
+        ref.current.shadowRoot.appendChild(style);
+      }
+    }
+  }, []);
+  return /* @__PURE__ */jsxRuntime.jsx(react.MediaPosterImage, {
+    ref,
+    slot: "poster",
+    src
+  });
+}
+function ThumbnailsMetadataTrack(_ref9) {
+  let {
+    asset
+  } = _ref9;
+  const client = VideoSource_styled.useClient();
+  const [src] = React.useState(() => getStoryboardSrc({
+    asset,
+    client
+  }));
+  return /* @__PURE__ */jsxRuntime.jsx("track", {
+    label: "thumbnails",
+    default: true,
+    kind: "metadata",
+    src
+  });
+}
+const CardWrapper = styled__default.default(ui.Card)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  min-height: 82px;\n  box-sizing: border-box;\n"])));
+const FlexWrapper = styled__default.default(ui.Flex)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+const LeftSection = styled__default.default(ui.Stack)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 60%;\n"])));
+const CodeWrapper = styled__default.default(ui.Code)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n\n  code {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    position: relative;\n    max-width: 200px;\n  }\n"])));
+const UploadProgress = _ref10 => {
+  let {
+    progress = 100,
+    onCancel,
+    filename,
+    text = "Uploading"
+  } = _ref10;
+  return /* @__PURE__ */jsxRuntime.jsx(CardWrapper, {
+    tone: "primary",
+    padding: 4,
+    border: true,
+    height: "fill",
+    children: /* @__PURE__ */jsxRuntime.jsxs(FlexWrapper, {
+      align: "center",
+      justify: "space-between",
+      height: "fill",
+      direction: "row",
+      gap: 2,
+      children: [/* @__PURE__ */jsxRuntime.jsxs(LeftSection, {
+        children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+          justify: "center",
+          gap: [3, 3, 2, 2],
+          direction: ["column", "column", "row"],
+          children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+            size: 1,
+            children: /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
+              space: 2,
+              children: [text, /* @__PURE__ */jsxRuntime.jsx(CodeWrapper, {
+                size: 1,
+                children: filename ? filename : "..."
+              })]
+            })
+          })
+        }), /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+          marginTop: 3,
+          radius: 5,
+          shadow: 1,
+          children: /* @__PURE__ */jsxRuntime.jsx(sanity.LinearProgress, {
+            value: progress
+          })
+        })]
+      }), onCancel ? /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+        fontSize: 2,
+        text: "Cancel upload",
+        mode: "ghost",
+        tone: "critical",
+        onClick: onCancel
+      }) : null]
+    })
+  });
+};
+const MuxVideo = _ref11 => {
+  let {
+    asset,
+    buttons,
+    readOnly,
+    onChange,
+    dialogState,
+    setDialogState
+  } = _ref11;
+  var _a, _b, _c, _d;
+  const client = VideoSource_styled.useClient();
+  const isLoading = React.useMemo(() => {
+    if ((asset == null ? void 0 : asset.status) === "preparing") {
+      return "Preparing the video";
+    }
+    if ((asset == null ? void 0 : asset.status) === "waiting_for_upload") {
+      return "Waiting for upload to start";
+    }
+    if ((asset == null ? void 0 : asset.status) === "waiting") {
+      return "Processing upload";
+    }
+    if ((asset == null ? void 0 : asset.status) === "ready") {
+      return false;
+    }
+    if (typeof (asset == null ? void 0 : asset.status) === "undefined") {
+      return false;
+    }
+    return true;
+  }, [asset]);
+  const isPreparingStaticRenditions = React.useMemo(() => {
+    var _a2, _b2, _c2, _d2;
+    if (((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing") {
+      return true;
+    }
+    if (((_d2 = (_c2 = asset == null ? void 0 : asset.data) == null ? void 0 : _c2.static_renditions) == null ? void 0 : _d2.status) === "ready") {
+      return false;
+    }
+    return false;
+  }, [(_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status]);
+  const videoSrc = React.useMemo(() => asset.playbackId && getVideoSrc({
+    client,
+    asset
+  }), [asset, client]);
+  const [error, setError] = React.useState(null);
+  const handleError = React.useCallback(event => setError(event.currentTarget.error), []);
+  const playRef = React.useRef(null);
+  const muteRef = React.useRef(null);
+  const video = React.useRef(null);
+  const getCurrentTime = React.useCallback(() => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = video.current) == null ? void 0 : _a2.currentTime) != null ? _b2 : 0;
+  }, [video]);
+  const handleCancelUpload = useCancelUpload(asset, onChange);
+  React.useEffect(() => {
+    var _a2, _b2;
+    const style = document.createElement("style");
+    style.innerHTML = "button svg { vertical-align: middle; }";
+    if ((_a2 = playRef.current) == null ? void 0 : _a2.shadowRoot) {
+      playRef.current.shadowRoot.appendChild(style);
+    }
+    if ((_b2 = muteRef == null ? void 0 : muteRef.current) == null ? void 0 : _b2.shadowRoot) {
+      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") {
+      handleCancelUpload();
+      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]);
+  if (error) {
+    throw error;
+  }
+  if (!asset || !asset.status) {
+    return null;
+  }
+  if (isLoading) {
+    return /* @__PURE__ */jsxRuntime.jsx(UploadProgress, {
+      progress: 100,
+      filename: asset == null ? void 0 : asset.filename,
+      text: isLoading !== true && isLoading || "Waiting for Mux to complete the file",
+      onCancel: readOnly ? void 0 : () => handleCancelUpload()
+    });
+  }
+  return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */jsxRuntime.jsxs(VideoContainer, {
+      shadow: 1,
+      tone: "transparent",
+      scheme: "dark",
+      children: [/* @__PURE__ */jsxRuntime.jsxs(react.MediaController, {
+        children: [/* @__PURE__ */jsxRuntime.jsx("video", {
+          playsInline: true,
+          ref: video,
+          onError: handleError,
+          slot: "media",
+          preload: "metadata",
+          crossOrigin: "anonomous",
+          children: /* @__PURE__ */jsxRuntime.jsx(ThumbnailsMetadataTrack, {
+            asset
+          })
+        }), /* @__PURE__ */jsxRuntime.jsx(PosterImage, {
+          asset
+        }), /* @__PURE__ */jsxRuntime.jsx(react.MediaLoadingIndicator, {
+          slot: "centered-chrome",
+          noAutoHide: true
+        }), /* @__PURE__ */jsxRuntime.jsx(StyledCenterControls, {
+          slot: "centered-chrome",
+          children: /* @__PURE__ */jsxRuntime.jsx(react.MediaPlayButton, {})
+        }), buttons && /* @__PURE__ */jsxRuntime.jsx(TopControls, {
+          slot: "top-chrome",
+          children: buttons
+        }), /* @__PURE__ */jsxRuntime.jsxs(react.MediaControlBar, {
+          children: [/* @__PURE__ */jsxRuntime.jsx(react.MediaMuteButton, {}), /* @__PURE__ */jsxRuntime.jsx(react.MediaTimeDisplay, {}), /* @__PURE__ */jsxRuntime.jsx(react.MediaTimeRange, {}), /* @__PURE__ */jsxRuntime.jsx(react.MediaDurationDisplay, {}), /* @__PURE__ */jsxRuntime.jsx(react.MediaFullscreenButton, {})]
+        })]
+      }), isPreparingStaticRenditions && /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+        padding: 2,
+        radius: 1,
+        style: {
+          background: "var(--card-fg-color)",
+          position: "absolute",
+          top: "0.5em",
+          left: "0.5em"
+        },
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+          size: 1,
+          style: {
+            color: "var(--card-bg-color)"
+          },
+          children: "MUX is preparing static renditions, please stand by"
+        })
+      })]
+    }), dialogState === "edit-thumbnail" && /* @__PURE__ */jsxRuntime.jsx(EditThumbnailDialog, {
+      asset,
+      getCurrentTime,
+      setDialogState
+    })]
+  });
+};
+function focusRingBorderStyle(border) {
+  return "inset 0 0 0 ".concat(border.width, "px ").concat(border.color);
+}
+function focusRingStyle(opts) {
+  const {
+    base,
+    border,
+    focusRing
+  } = opts;
+  const focusRingOutsetWidth = focusRing.offset + focusRing.width;
+  const focusRingInsetWidth = 0 - focusRing.offset;
+  const bgColor = base ? base.bg : "var(--card-bg-color)";
+  return [focusRingInsetWidth > 0 && "inset 0 0 0 ".concat(focusRingInsetWidth, "px var(--card-focus-ring-color)"), border && focusRingBorderStyle(border), focusRingInsetWidth < 0 && "0 0 0 ".concat(0 - focusRingInsetWidth, "px ").concat(bgColor), focusRingOutsetWidth > 0 && "0 0 0 ".concat(focusRingOutsetWidth, "px var(--card-focus-ring-color)")].filter(Boolean).join(",");
+}
+const FileButton = styled__default.default(ui.MenuItem)(_ref12 => {
+  let {
+    theme
+  } = _ref12;
+  const {
+    focusRing
+  } = theme.sanity;
+  const base = theme.sanity.color.base;
+  const border = {
+    width: 1,
+    color: "var(--card-border-color)"
+  };
+  return styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    position: relative;\n\n    &:not([data-disabled='true']) {\n      &:focus-within {\n        box-shadow: ", ";\n      }\n    }\n\n    & input {\n      overflow: hidden;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      min-width: 0;\n      display: block;\n      appearance: none;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      opacity: 0;\n    }\n  "])), focusRingStyle({
+    base,
+    border,
+    focusRing
+  }));
+});
+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,
+    ...rest
+  } = props;
+  const idHook = React.useId();
+  const id = idProp || idHook;
+  const handleChange = React__default.default.useCallback(event => {
+    if (onSelect && event.target.files) {
+      onSelect(Array.from(event.target.files));
+    }
+  }, [onSelect]);
+  const content = /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+    align: "center",
+    justify: "flex-start",
+    padding,
+    children: [icon && /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+      marginRight: text ? space : void 0,
+      children: /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
+        size: fontSize,
+        children: [React.isValidElement(icon) && icon, reactIs.isValidElementType(icon) && React.createElement(icon)]
+      })
+    }), text && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+      align: textAlign,
+      size: fontSize,
+      textOverflow: "ellipsis",
+      children: text
+    })]
+  });
+  return /* @__PURE__ */jsxRuntime.jsxs(FileButton, {
+    ...rest,
+    htmlFor: id,
+    padding: 0,
+    fontSize: 2,
+    disabled,
+    ref: forwardedRef,
+    children: [content, /* @__PURE__ */jsxRuntime.jsx("input", {
+      "data-testid": "file-button-input",
+      accept,
+      capture,
+      id,
+      multiple,
+      onChange: handleChange,
+      type: "file",
+      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"])));
+function PlayerActionsMenu(props) {
+  const {
+    asset,
+    readOnly,
+    dialogState,
+    setDialogState,
+    onChange,
+    onUpload
+  } = props;
+  const [open, setOpen] = React.useState(false);
+  const [menuElement, setMenuRef] = React.useState(null);
+  const isSigned = React.useMemo(() => VideoSource_styled.getPlaybackPolicy(asset) === "signed", [asset]);
+  const onReset = React.useCallback(() => onChange(sanity.PatchEvent.from(sanity.unset([]))), [onChange]);
+  React.useEffect(() => {
+    if (open && dialogState) {
+      setOpen(false);
+    }
+  }, [dialogState, open]);
+  ui.useClickOutside(React.useCallback(() => setOpen(false), []), [menuElement]);
+  return /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
+    space: 1,
+    padding: 2,
+    children: [isSigned && /* @__PURE__ */jsxRuntime.jsx(ui.Tooltip, {
+      content: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+        padding: 2,
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+          muted: true,
+          size: 1,
+          children: "Signed playback policy"
+        })
+      }),
+      placement: "right",
+      portal: true,
+      children: /* @__PURE__ */jsxRuntime.jsx(LockCard, {
+        radius: 2,
+        margin: 2,
+        scheme: "dark",
+        tone: "positive",
+        children: /* @__PURE__ */jsxRuntime.jsx(LockButton, {
+          icon: icons.LockIcon,
+          mode: "bleed",
+          tone: "positive"
+        })
+      })
+    }), !readOnly && /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+      icon: icons.EditIcon,
+      mode: "ghost",
+      onClick: () => setDialogState("edit-thumbnail")
+    }), /* @__PURE__ */jsxRuntime.jsx(ui.Popover, {
+      content: /* @__PURE__ */jsxRuntime.jsxs(ui.Menu, {
+        ref: setMenuRef,
+        children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+          padding: 2,
+          children: /* @__PURE__ */jsxRuntime.jsx(ui.Label, {
+            muted: true,
+            size: 1,
+            children: "Replace"
+          })
+        }), /* @__PURE__ */jsxRuntime.jsx(FileInputMenuItem, {
+          accept: "video/*",
+          icon: icons.UploadIcon,
+          mode: "bleed",
+          onSelect: onUpload,
+          text: "Upload",
+          disabled: readOnly,
+          fontSize: 2
+        }), /* @__PURE__ */jsxRuntime.jsx(ui.MenuItem, {
+          icon: icons.SearchIcon,
+          text: "Browse",
+          onClick: () => setDialogState("select-video")
+        }), /* @__PURE__ */jsxRuntime.jsx(ui.MenuDivider, {}), /* @__PURE__ */jsxRuntime.jsx(ui.MenuItem, {
+          icon: icons.PlugIcon,
+          text: "Configure API",
+          onClick: () => setDialogState("secrets")
+        }), /* @__PURE__ */jsxRuntime.jsx(ui.MenuDivider, {}), /* @__PURE__ */jsxRuntime.jsx(ui.MenuItem, {
+          tone: "critical",
+          icon: icons.ResetIcon,
+          text: "Clear field",
+          onClick: onReset,
+          disabled: readOnly
+        })]
+      }),
+      portal: true,
+      open,
+      children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+        icon: icons.EllipsisVerticalIcon,
+        mode: "ghost",
+        onClick: () => {
+          setDialogState(false);
+          setOpen(true);
+        }
+      })
+    })]
+  });
+}
+var PlayerActionsMenu$1 = React.memo(PlayerActionsMenu);
+function withFocusRing(component) {
+  return styled__default.default(component)(props => {
+    const border = {
+      width: props.$border ? 1 : 0,
+      color: "var(--card-border-color)"
+    };
+    return styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        --card-focus-box-shadow: ", ";\n\n        border-radius: ", ";\n        outline: none;\n        box-shadow: var(--card-focus-box-shadow);\n\n        &:focus {\n          --card-focus-box-shadow: ", ";\n        }\n      "])), focusRingBorderStyle(border), ui.rem(props.theme.sanity.radius[1]), focusRingStyle({
+      base: props.theme.sanity.color.base,
+      border,
+      focusRing: props.theme.sanity.focusRing
+    }));
+  });
+}
+const ctrlKey = 17;
+const cmdKey = 91;
+const UploadCardWithFocusRing = withFocusRing(ui.Card);
+const UploadCard$1 = React.forwardRef((_ref13, forwardedRef) => {
+  let {
+    children,
+    tone,
+    onPaste,
+    onDrop,
+    onDragEnter,
+    onDragLeave,
+    onDragOver
+  } = _ref13;
+  const ctrlDown = React.useRef(false);
+  const inputRef = React.useRef(null);
+  const handleKeyDown = React.useCallback(event => {
+    if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
+      ctrlDown.current = true;
+    }
+    const vKey = 86;
+    if (ctrlDown.current && event.keyCode == vKey) {
+      inputRef.current.focus();
+    }
+  }, []);
+  const handleKeyUp = React.useCallback(event => {
+    if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
+      ctrlDown.current = false;
+    }
+  }, []);
+  return /* @__PURE__ */jsxRuntime.jsxs(UploadCardWithFocusRing, {
+    tone,
+    height: "fill",
+    ref: forwardedRef,
+    padding: 0,
+    radius: 2,
+    shadow: 0,
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    onPaste,
+    onDrop,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    children: [/* @__PURE__ */jsxRuntime.jsx(HiddenInput$1, {
+      ref: inputRef,
+      onPaste
+    }), children]
+  });
+});
+const HiddenInput$1 = styled__default.default.input.attrs({
+  type: "text"
+})(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: absolute;\n  border: 0;\n  color: white;\n  opacity: 0;\n\n  &:focus {\n    outline: none;\n  }\n"])));
+const HiddenInput = styled__default.default.input(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  width: 0.1px;\n  height: 0.1px;\n  opacity: 0;\n  position: absolute;\n  z-index: -1;\n"])));
+const Label = styled__default.default.label(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+const FileInputButton = _ref14 => {
+  let {
+    onSelect,
+    ...props
+  } = _ref14;
+  const inputId = "FileSelect".concat(React.useId());
+  const inputRef = React.useRef(null);
+  const handleSelect = React.useCallback(event => {
+    if (onSelect) {
+      onSelect(event.target.files);
+    }
+  }, [onSelect]);
+  const handleButtonClick = React.useCallback(() => {
+    var _a;
+    return (_a = inputRef.current) == null ? void 0 : _a.click();
+  }, []);
+  return /* @__PURE__ */jsxRuntime.jsxs(Label, {
+    htmlFor: inputId,
+    children: [/* @__PURE__ */jsxRuntime.jsx(HiddenInput, {
+      accept: "video/*",
+      ref: inputRef,
+      tabIndex: 0,
+      type: "file",
+      id: inputId,
+      onChange: handleSelect,
+      value: ""
+    }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+      onClick: handleButtonClick,
+      mode: "default",
+      tone: "primary",
+      style: {
+        width: "100%"
+      },
+      ...props
+    })]
+  });
+};
+const UploadCard = styled__default.default(ui.Card)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  && {\n    border-style: dashed;\n  }\n"])));
+const ConfigureApiBox = styled__default.default(ui.Box)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+function UploadPlaceholder(props) {
+  const {
+    setDialogState,
+    readOnly,
+    onSelect,
+    hovering,
+    needsSetup
+  } = props;
+  const handleBrowse = React.useCallback(() => setDialogState("select-video"), [setDialogState]);
+  const handleConfigureApi = React.useCallback(() => setDialogState("secrets"), [setDialogState]);
+  return /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+    style: {
+      padding: 1,
+      position: "relative"
+    },
+    height: "stretch",
+    children: /* @__PURE__ */jsxRuntime.jsxs(UploadCard, {
+      sizing: "border",
+      height: "fill",
+      tone: readOnly ? "transparent" : "inherit",
+      border: true,
+      padding: 3,
+      style: hovering ? {
+        borderColor: "transparent"
+      } : void 0,
+      children: [/* @__PURE__ */jsxRuntime.jsx(ConfigureApiBox, {
+        padding: 3,
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+          padding: 3,
+          radius: 3,
+          tone: needsSetup ? "critical" : void 0,
+          onClick: handleConfigureApi,
+          icon: icons.PlugIcon,
+          mode: "bleed"
+        })
+      }), /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        justify: "space-between",
+        gap: 4,
+        direction: ["column", "column", "row"],
+        paddingY: [2, 2, 0],
+        sizing: "border",
+        height: "fill",
+        children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+          align: "center",
+          justify: "center",
+          gap: 2,
+          flex: 1,
+          children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+            justify: "center",
+            children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+              muted: true,
+              children: /* @__PURE__ */jsxRuntime.jsx(icons.DocumentVideoIcon, {})
+            })
+          }), /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+            justify: "center",
+            children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+              size: 1,
+              muted: true,
+              children: "Drag video or paste URL here"
+            })
+          })]
+        }), /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
+          space: 2,
+          children: [/* @__PURE__ */jsxRuntime.jsx(FileInputButton, {
+            mode: "ghost",
+            tone: "default",
+            icon: icons.UploadIcon,
+            text: "Upload",
+            onSelect
+          }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+            mode: "ghost",
+            icon: icons.SearchIcon,
+            text: "Select",
+            onClick: handleBrowse
+          })]
+        })]
+      })]
+    })
+  });
+}
+class MuxVideoInputUploader extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      isDraggingOver: false,
+      invalidPaste: false,
+      invalidFile: false,
+      uploadProgress: null,
+      fileInfo: null,
+      uuid: null,
+      error: null,
+      url: null
+    };
+    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 => {
+      this.setState({
+        uploadProgress: evt.percent
+      });
+    };
+    this.onUpload = files => {
+      this.setState({
+        uploadProgress: 0,
+        fileInfo: null,
+        uuid: null
+      });
+      this.upload = uploadFile(this.props.config, this.props.client, files[0], {
+        enableSignedUrls: this.props.secrets.enableSignedUrls
+      }).pipe(operators.takeUntil(this.onCancelUploadButtonClick$.pipe(operators.tap(() => {
+        if (this.state.uuid) {
+          this.props.client.delete(this.state.uuid);
+        }
+      })))).subscribe({
+        complete: () => {
+          this.setState({
+            error: null,
+            uploadProgress: null,
+            uuid: null
+          });
+        },
+        next: event => {
+          this.handleUploadEvent(event);
+        },
+        error: err => {
+          this.setState({
+            error: err,
+            uploadProgress: null,
+            uuid: null
+          });
+        }
+      });
+    };
+    // eslint-disable-next-line no-warning-comments
+    // @TODO add proper typings for the Observable events
+    this.handleUploadEvent = event => {
+      switch (event.type) {
+        case "success":
+          return this.handleUploadSuccess(event.asset);
+        case "progress":
+          return this.handleProgress(event);
+        case "file":
+          return this.setState({
+            fileInfo: event.file
+          });
+        case "uuid":
+          return this.setState({
+            uuid: event.uuid
+          });
+        case "url":
+          return this.setState({
+            url: event.url,
+            uploadProgress: 100
+          });
+        default:
+          return null;
+      }
+    };
+    this.handleUploadSuccess = asset => {
+      this.setState({
+        uploadProgress: 100
+      });
+      this.props.onChange(sanity.PatchEvent.from([sanity.setIfMissing({
+        asset: {}
+      }), sanity.set({
+        _type: "reference",
+        _weak: true,
+        _ref: asset._id
+      }, ["asset"])]));
+    };
+    this.handlePaste = event => {
+      const clipboardData = event.clipboardData || window.clipboardData;
+      const url = clipboardData.getData("text");
+      const options = {
+        enableSignedUrls: this.props.secrets.enableSignedUrls
+      };
+      this.upload = uploadUrl(this.props.config, this.props.client, url, options).subscribe({
+        complete: () => {
+          this.setState({
+            error: null,
+            uploadProgress: null,
+            url: null
+          });
+        },
+        next: sEvent => {
+          this.handleUploadEvent(sEvent);
+        },
+        error: err => {
+          let error;
+          if (!err.message.toLowerCase().match("invalid url")) {
+            error = err;
+          }
+          this.setState({
+            invalidPaste: true,
+            error
+          }, () => {
+            setTimeout(() => {
+              this.setState({
+                invalidPaste: false,
+                uploadProgress: null
+              });
+            }, 2e3);
+          });
+        }
+      });
+    };
+    this.handleDrop = event => {
+      this.setState({
+        isDraggingOver: false
+      });
+      event.preventDefault();
+      event.stopPropagation();
+      extractDroppedFiles(event.nativeEvent.dataTransfer).then(files => {
+        if (files) {
+          this.onUpload(files);
+        }
+      });
+    };
+    this.handleDragOver = event => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    this.handleDragEnter = event => {
+      var _a, _b;
+      event.stopPropagation();
+      this.dragEnteredEls.push(event.target);
+      this.setState({
+        isDraggingOver: true
+      });
+      const type = (_b = (_a = event.dataTransfer.items) == null ? void 0 : _a[0]) == null ? void 0 : _b.type;
+      this.setState({
+        invalidFile: !type.startsWith("video/")
+      });
+    };
+    this.handleDragLeave = event => {
+      event.stopPropagation();
+      const idx = this.dragEnteredEls.indexOf(event.target);
+      if (idx > -1) {
+        this.dragEnteredEls.splice(idx, 1);
+      }
+      if (this.dragEnteredEls.length === 0) {
+        this.setState({
+          isDraggingOver: false
+        });
+      }
+    };
+  }
+  componentWillUnmount() {
+    this.unSubscribeToUpload();
+  }
+  componentDidMount() {
+    const events$ = new rxjs.Subject();
+    this.onCancelUploadButtonClick$ = events$.asObservable();
+    this.handleCancelUploadButtonClick = event => events$.next(event);
+  }
+  unSubscribeToUpload() {
+    if (this.upload && !this.upload.closed) {
+      this.upload.unsubscribe();
+    }
+  }
+  render() {
+    var _a;
+    if (this.state.uploadProgress !== null) {
+      return /* @__PURE__ */jsxRuntime.jsx(UploadProgress, {
+        onCancel: this.handleCancelUploadButtonClick,
+        progress: this.state.uploadProgress,
+        filename: ((_a = this.state.fileInfo) == null ? void 0 : _a.name) || this.state.url
+      });
+    }
+    if (this.state.error) {
+      throw this.state.error;
+    }
+    return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/* @__PURE__ */jsxRuntime.jsx(UploadCard$1, {
+        tone: this.state.isDraggingOver && (this.state.invalidPaste || this.state.invalidFile) ? "critical" : this.state.isDraggingOver ? "positive" : void 0,
+        onDrop: this.handleDrop,
+        onDragOver: this.handleDragOver,
+        onDragLeave: this.handleDragLeave,
+        onDragEnter: this.handleDragEnter,
+        onPaste: this.handlePaste,
+        ref: this.container,
+        children: this.props.asset ? /* @__PURE__ */jsxRuntime.jsx(MuxVideo, {
+          readOnly: this.props.readOnly,
+          asset: this.props.asset,
+          onChange: this.props.onChange,
+          dialogState: this.props.dialogState,
+          setDialogState: this.props.setDialogState,
+          buttons: /* @__PURE__ */jsxRuntime.jsx(PlayerActionsMenu$1, {
+            asset: this.props.asset,
+            dialogState: this.props.dialogState,
+            setDialogState: this.props.setDialogState,
+            onChange: this.props.onChange,
+            onUpload: this.onUpload,
+            readOnly: this.props.readOnly
+          })
+        }) : /* @__PURE__ */jsxRuntime.jsx(UploadPlaceholder, {
+          hovering: this.state.isDraggingOver,
+          onSelect: this.onUpload,
+          readOnly: this.props.readOnly,
+          setDialogState: this.props.setDialogState,
+          needsSetup: this.props.needsSetup
+        })
+      }), this.props.dialogState === "select-video" && /* @__PURE__ */jsxRuntime.jsx(InputBrowser, {
+        asset: this.props.asset,
+        onChange: this.props.onChange,
+        setDialogState: this.props.setDialogState
+      })]
+    });
+  }
+}
+const useSaveSecrets = (client, secrets) => {
+  return React.useCallback(async _ref15 => {
+    let {
+      token,
+      secretKey,
+      enableSignedUrls
+    } = _ref15;
+    let {
+      signingKeyId,
+      signingKeyPrivate
+    } = secrets;
+    try {
+      await saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
+      const valid = await testSecrets(client);
+      if (!(valid == null ? void 0 : valid.status) && token && secretKey) {
+        throw new Error("Invalid secrets");
+      }
+    } catch (err) {
+      console.error("Error while trying to save secrets:", err);
+      throw err;
+    }
+    if (enableSignedUrls) {
+      const hasValidSigningKeys = await haveValidSigningKeys(client, signingKeyId, signingKeyPrivate);
+      if (!hasValidSigningKeys) {
+        try {
+          const {
+            data
+          } = await createSigningKeys(client);
+          signingKeyId = data.id;
+          signingKeyPrivate = data.private_key;
+          await saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
+        } catch (err) {
+          console.log("Error while creating and saving signing key:", err == null ? void 0 : err.message);
+          throw err;
+        }
+      }
+    }
+    return {
+      token,
+      secretKey,
+      enableSignedUrls,
+      signingKeyId,
+      signingKeyPrivate
+    };
+  }, [client, secrets]);
+};
+function init(_ref16) {
+  let {
+    token,
+    secretKey,
+    enableSignedUrls
+  } = _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
+  };
+}
+function reducer(state, action) {
+  switch (action == null ? void 0 : action.type) {
+    case "submit":
+      return {
+        ...state,
+        submitting: true,
+        error: null
+      };
+    case "error":
+      return {
+        ...state,
+        submitting: false,
+        error: action.payload
+      };
+    case "reset":
+      return init(action.payload);
+    case "change":
+      return {
+        ...state,
+        [action.payload.name]: action.payload.value
+      };
+    default:
+      throw new Error("Unknown action type: ".concat(action == null ? void 0 : action.type));
+  }
+}
+const useSecretsFormState = secrets => React.useReducer(reducer, secrets, init);
+const ids = ["title", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r"];
+function MuxLogo(_ref17) {
+  let {
+    height = 26
+  } = _ref17;
+  const id = React.useId();
+  const [titleId, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = React.useMemo(() => ids.map(field => "".concat(id, "-").concat(field)), [id]);
+  return /* @__PURE__ */jsxRuntime.jsxs("svg", {
+    "aria-labelledby": titleId,
+    role: "img",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlSpace: "preserve",
+    viewBox: "92.08878326416016 102.66712188720703 692.76123046875 219.99948120117188",
+    style: {
+      height: "".concat(height, "px")
+    },
+    children: [/* @__PURE__ */jsxRuntime.jsx("title", {
+      id: titleId,
+      children: "Mux Logo"
+    }), /* @__PURE__ */jsxRuntime.jsxs("defs", {
+      children: [/* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
+        id: c,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(528.38055 0 0 -528.38055 63.801 159.5)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
+        id: d,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(523.66766 0 0 -523.66766 67.897 159.5)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
+        id: g,
+        spreadMethod: "pad",
+        gradientTransform: "rotate(180 296.075 79.75) scale(524.84045)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
+        id: i,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
+        id: j,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(523.08514 0 0 -523.08514 67.897 224.446)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
+        id: k,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 94.553)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
+        id: l,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
+        id: m,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 94.554)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
+        id: p,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(521.97632 0 0 -521.97632 69.067 191.973)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
+        id: q,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(523.09039 0 0 -523.09039 67.312 191.973)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
+        id: r,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
+        id: a,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsxRuntime.jsx("path", {
+          d: "M0 319h657.706V0H0Z"
+        })
+      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
+        id: b,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsxRuntime.jsx("path", {
+          d: "M423.64 242h164.999V77H423.64Z"
+        })
+      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
+        id: e,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsxRuntime.jsx("path", {
+          d: "M0 319h657.706V0H0Z"
+        })
+      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
+        id: f,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsxRuntime.jsx("path", {
+          d: "M311.3 242h93.031V77H311.3Z"
+        })
+      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
+        id: h,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsxRuntime.jsx("path", {
+          d: "M198.96 242h35.106V77H198.96Z"
+        })
+      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
+        id: n,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsxRuntime.jsx("path", {
+          d: "M0 319h657.706V0H0Z"
+        })
+      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
+        id: o,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsxRuntime.jsx("path", {
+          d: "M69.067 242H169.12V141.947H69.067Z"
+        })
+      })]
+    }), /* @__PURE__ */jsxRuntime.jsx("g", {
+      clipPath: "url(#".concat(a, ")"),
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+      children: /* @__PURE__ */jsxRuntime.jsx("g", {
+        style: {
+          opacity: 0.69999701
+        },
+        clipPath: "url(#".concat(b, ")"),
+        children: /* @__PURE__ */jsxRuntime.jsx("path", {
+          style: {
+            fill: "url(#".concat(c, ")"),
+            stroke: "none"
+          },
+          d: "M558.674 82.142c6.855-6.855 17.969-6.855 24.824 0 6.854 6.855 6.854 17.969 0 24.823L453.605 236.858c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
+        })
+      })
+    }), /* @__PURE__ */jsxRuntime.jsx("path", {
+      style: {
+        fill: "url(#".concat(d, ")"),
+        stroke: "none"
+      },
+      d: "M558.674 236.858 428.781 106.966c-6.855-6.855-6.855-17.969 0-24.825 6.855-6.854 17.969-6.854 24.823 0l129.894 129.894c6.854 6.855 6.854 17.968 0 24.823A17.498 17.498 0 0 1 571.086 242a17.495 17.495 0 0 1-12.412-5.142",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    }), /* @__PURE__ */jsxRuntime.jsxs("g", {
+      clipPath: "url(#".concat(e, ")"),
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+      children: [/* @__PURE__ */jsxRuntime.jsx("g", {
+        style: {
+          opacity: 0.69999701
+        },
+        clipPath: "url(#".concat(f, ")"),
+        children: /* @__PURE__ */jsxRuntime.jsx("path", {
+          style: {
+            fill: "url(#".concat(g, ")"),
+            stroke: "none"
+          },
+          d: "M328.853 112.107c22.297 0 40.372 18.075 40.372 40.372v71.315c0 10.054 7.505 18.206 17.554 18.206 10.048 0 17.552-8.152 17.552-18.206v-71.315c0-41.686-33.793-75.479-75.478-75.479-9.694 0-17.553 7.859-17.553 17.554 0 9.694 7.859 17.553 17.553 17.553"
+        })
+      }), /* @__PURE__ */jsxRuntime.jsx("g", {
+        style: {
+          opacity: 0.69999701
+        },
+        clipPath: "url(#".concat(h, ")"),
+        children: /* @__PURE__ */jsxRuntime.jsx("path", {
+          style: {
+            fill: "url(#".concat(i, ")"),
+            stroke: "none"
+          },
+          d: "M216.513 242c-10.049 0-17.553-8.152-17.553-18.206V95.206c0-10.054 7.504-18.206 17.553-18.206 10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.054-7.505 18.206-17.553 18.206"
+        })
+      })]
+    }), /* @__PURE__ */jsxRuntime.jsx("path", {
+      style: {
+        fill: "url(#".concat(j, ")"),
+        stroke: "none"
+      },
+      d: "M369.225 224.447c0-9.694 7.859-17.553 17.553-17.553 9.695 0 17.553 7.859 17.553 17.553s-7.858 17.552-17.553 17.552c-9.694 0-17.553-7.858-17.553-17.552",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    }), /* @__PURE__ */jsxRuntime.jsx("path", {
+      style: {
+        fill: "url(#".concat(k, ")"),
+        stroke: "none"
+      },
+      d: "M553.532 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.552-17.554 17.552-9.694 0-17.553-7.858-17.553-17.552",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    }), /* @__PURE__ */jsxRuntime.jsx("path", {
+      style: {
+        fill: "url(#".concat(l, ")"),
+        stroke: "none"
+      },
+      d: "M69.067 223.794V95.206C69.067 85.152 76.571 77 86.62 77c10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.055-7.505 18.205-17.553 18.205-10.049 0-17.553-8.15-17.553-18.205",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    }), /* @__PURE__ */jsxRuntime.jsx("path", {
+      style: {
+        fill: "url(#".concat(m, ")"),
+        stroke: "none"
+      },
+      d: "M198.96 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.553-17.554 17.553-9.694 0-17.553-7.859-17.553-17.553",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    }), /* @__PURE__ */jsxRuntime.jsx("g", {
+      clipPath: "url(#".concat(n, ")"),
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+      children: /* @__PURE__ */jsxRuntime.jsx("g", {
+        style: {
+          opacity: 0.69999701
+        },
+        clipPath: "url(#".concat(o, ")"),
+        children: /* @__PURE__ */jsxRuntime.jsx("path", {
+          style: {
+            fill: "url(#".concat(p, ")"),
+            stroke: "none"
+          },
+          d: "M139.155 147.088c6.855-6.855 17.969-6.855 24.824 0s6.855 17.969 0 24.824l-64.947 64.946c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
+        })
+      })
+    }), /* @__PURE__ */jsxRuntime.jsx("path", {
+      style: {
+        fill: "url(#".concat(q, ")"),
+        stroke: "none"
+      },
+      d: "m204.101 236.858-64.947-64.946c-6.854-6.855-6.854-17.969 0-24.824 6.856-6.855 17.97-6.855 24.824 0l64.947 64.947c6.855 6.855 6.855 17.968 0 24.823A17.495 17.495 0 0 1 216.513 242a17.498 17.498 0 0 1-12.412-5.142",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    }), /* @__PURE__ */jsxRuntime.jsx("path", {
+      style: {
+        fill: "url(#".concat(r, ")"),
+        stroke: "none"
+      },
+      d: "M253.374 223.794v-71.315c0-41.685 33.793-75.479 75.479-75.479 9.695 0 17.553 7.859 17.553 17.554 0 9.694-7.858 17.553-17.553 17.553-22.297 0-40.372 18.075-40.372 40.372v71.315c0 10.055-7.505 18.205-17.554 18.205s-17.553-8.15-17.553-18.205",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    })]
+  });
+}
+const Logo = styled__default.default.span(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: inline-block;\n  height: 0.8em;\n  margin-right: 1em;\n  transform: translate(0.3em, -0.2em);\n"])));
+const Header = () => /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  children: [/* @__PURE__ */jsxRuntime.jsx(Logo, {
+    children: /* @__PURE__ */jsxRuntime.jsx(MuxLogo, {
+      height: 13
+    })
+  }), "API Credentials"]
+});
+function FormField(props) {
+  const {
+    children,
+    title,
+    description,
+    inputId
+  } = props;
+  return /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
+    space: 1,
+    children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+      align: "flex-end",
+      children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+        flex: 1,
+        paddingY: 2,
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.Stack, {
+          space: 2,
+          children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+            children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+              as: "label",
+              htmlFor: inputId,
+              weight: "semibold",
+              size: 1,
+              children: title || /* @__PURE__ */jsxRuntime.jsx("em", {
+                children: "Untitled"
+              })
+            }), description && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+              muted: true,
+              size: 1,
+              children: description
+            })]
+          })
+        })
+      })
+    }), /* @__PURE__ */jsxRuntime.jsx("div", {
+      children
+    })]
+  });
+}
+var FormField$1 = React.memo(FormField);
+const fieldNames = ["token", "secretKey", "enableSignedUrls"];
+function ConfigureApi(_ref18) {
+  let {
+    secrets,
+    setDialogState
+  } = _ref18;
+  var _a, _b;
+  const client = VideoSource_styled.useClient();
+  const [state, dispatch] = useSecretsFormState(secrets);
+  const hasSecretsInitially = React.useMemo(() => secrets.token && secrets.secretKey, [secrets]);
+  const handleClose = React.useCallback(() => setDialogState(false), [setDialogState]);
+  const dirty = React.useMemo(() => secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls, [secrets, state]);
+  const id = "ConfigureApi".concat(React.useId());
+  const [tokenId, secretKeyId, enableSignedUrlsId] = React.useMemo(() => fieldNames.map(field => "".concat(id, "-").concat(field)), [id]);
+  const firstField = React.useRef(null);
+  const handleSaveSecrets = useSaveSecrets(client, secrets);
+  const saving = React.useRef(false);
+  const handleSubmit = React.useCallback(event => {
+    event.preventDefault();
+    if (!saving.current && event.currentTarget.reportValidity()) {
+      saving.current = true;
+      dispatch({
+        type: "submit"
+      });
+      const {
+        token,
+        secretKey,
+        enableSignedUrls
+      } = state;
+      handleSaveSecrets({
+        token,
+        secretKey,
+        enableSignedUrls
+      }).then(savedSecrets => {
+        const {
+          projectId,
+          dataset
+        } = client.config();
+        suspendReact.clear([index.cacheNs, VideoSource_styled._id, projectId, dataset]);
+        suspendReact.preload(() => Promise.resolve(savedSecrets), [index.cacheNs, VideoSource_styled._id, projectId, dataset]);
+        setDialogState(false);
+      }).catch(err => dispatch({
+        type: "error",
+        payload: err.message
+      })).finally(() => {
+        saving.current = false;
+      });
+    }
+  }, [client, dispatch, handleSaveSecrets, setDialogState, state]);
+  const handleChangeToken = React.useCallback(event => {
+    dispatch({
+      type: "change",
+      payload: {
+        name: "token",
+        value: event.currentTarget.value
+      }
+    });
+  }, [dispatch]);
+  const handleChangeSecretKey = React.useCallback(event => {
+    dispatch({
+      type: "change",
+      payload: {
+        name: "secretKey",
+        value: event.currentTarget.value
+      }
+    });
+  }, [dispatch]);
+  const handleChangeEnableSignedUrls = React.useCallback(event => {
+    dispatch({
+      type: "change",
+      payload: {
+        name: "enableSignedUrls",
+        value: event.currentTarget.checked
+      }
+    });
+  }, [dispatch]);
+  React.useEffect(() => {
+    if (firstField.current) {
+      firstField.current.focus();
+    }
+  }, [firstField]);
+  return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
+    id,
+    onClose: handleClose,
+    header: /* @__PURE__ */jsxRuntime.jsx(Header, {}),
+    width: 0,
+    children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+      padding: 4,
+      style: {
+        position: "relative"
+      },
+      children: /* @__PURE__ */jsxRuntime.jsx("form", {
+        onSubmit: handleSubmit,
+        noValidate: true,
+        children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
+          space: 4,
+          children: [!hasSecretsInitially && /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+            padding: [3, 3, 3],
+            radius: 2,
+            shadow: 1,
+            tone: "primary",
+            children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
+              space: 3,
+              children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
+                size: 1,
+                children: ["To set up a new access token, go to your", " ", /* @__PURE__ */jsxRuntime.jsx("a", {
+                  href: "https://dashboard.mux.com/settings/access-tokens",
+                  target: "_blank",
+                  rel: "noreferrer noopener",
+                  children: "account on mux.com"
+                }), "."]
+              }), /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
+                size: 1,
+                children: ["The access token needs permissions: ", /* @__PURE__ */jsxRuntime.jsx("strong", {
+                  children: "Mux Video "
+                }), "(Full Access) and ", /* @__PURE__ */jsxRuntime.jsx("strong", {
+                  children: "Mux Data"
+                }), " (Read)", /* @__PURE__ */jsxRuntime.jsx("br", {}), "The credentials will be stored safely in a hidden document only available to editors."]
+              })]
+            })
+          }), /* @__PURE__ */jsxRuntime.jsx(FormField$1, {
+            title: "Access Token",
+            inputId: tokenId,
+            children: /* @__PURE__ */jsxRuntime.jsx(ui.TextInput, {
+              id: tokenId,
+              ref: firstField,
+              onChange: handleChangeToken,
+              type: "text",
+              value: (_a = state.token) != null ? _a : "",
+              required: !!state.secretKey || state.enableSignedUrls
+            })
+          }), /* @__PURE__ */jsxRuntime.jsx(FormField$1, {
+            title: "Secret Key",
+            inputId: secretKeyId,
+            children: /* @__PURE__ */jsxRuntime.jsx(ui.TextInput, {
+              id: secretKeyId,
+              onChange: handleChangeSecretKey,
+              type: "text",
+              value: (_b = state.secretKey) != null ? _b : "",
+              required: !!state.token || state.enableSignedUrls
+            })
+          }), /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
+            space: 4,
+            children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+              align: "center",
+              children: [/* @__PURE__ */jsxRuntime.jsx(ui.Checkbox, {
+                id: enableSignedUrlsId,
+                onChange: handleChangeEnableSignedUrls,
+                checked: state.enableSignedUrls,
+                style: {
+                  display: "block"
+                }
+              }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+                flex: 1,
+                paddingLeft: 3,
+                children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+                  children: /* @__PURE__ */jsxRuntime.jsx("label", {
+                    htmlFor: enableSignedUrlsId,
+                    children: "Enable Signed Urls"
+                  })
+                })
+              })]
+            }), secrets.signingKeyId && state.enableSignedUrls ? /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+              padding: [3, 3, 3],
+              radius: 2,
+              shadow: 1,
+              tone: "caution",
+              children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
+                space: 3,
+                children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+                  size: 1,
+                  children: "The signing key ID that Sanity will use is:"
+                }), /* @__PURE__ */jsxRuntime.jsx(ui.Code, {
+                  size: 1,
+                  children: secrets.signingKeyId
+                }), /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
+                  size: 1,
+                  children: ["This key is only used for previewing content in the Sanity UI.", /* @__PURE__ */jsxRuntime.jsx("br", {}), "You should generate a different key to use in your application server."]
+                })]
+              })
+            }) : null]
+          }), /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
+            space: 2,
+            children: [/* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+              text: "Save",
+              disabled: !dirty,
+              loading: state.submitting,
+              tone: "primary",
+              mode: "default",
+              type: "submit"
+            }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+              disabled: state.submitting,
+              text: "Cancel",
+              mode: "bleed",
+              onClick: handleClose
+            })]
+          }), state.error && /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+            padding: [3, 3, 3],
+            radius: 2,
+            shadow: 1,
+            tone: "critical",
+            children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+              children: state.error
+            })
+          })]
+        })
+      })
+    })
+  });
+}
+var ConfigureApi$1 = React.memo(ConfigureApi);
+function Onboard(props) {
+  const {
+    setDialogState
+  } = props;
+  const handleOpen = React.useCallback(() => setDialogState("secrets"), [setDialogState]);
+  return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /* @__PURE__ */jsxRuntime.jsx("div", {
+      style: {
+        padding: 2
+      },
+      children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+        display: "flex",
+        sizing: "border",
+        style: {
+          aspectRatio: "16/9",
+          width: "100%",
+          boxShadow: "var(--card-bg-color) 0 0 0 2px"
+        },
+        paddingX: [2, 3, 4, 4],
+        radius: 1,
+        tone: "transparent",
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+          justify: "flex-start",
+          align: "center",
+          children: /* @__PURE__ */jsxRuntime.jsxs(ui.Grid, {
+            columns: 1,
+            gap: [2, 3, 4, 4],
+            children: [/* @__PURE__ */jsxRuntime.jsx(ui.Inline, {
+              paddingY: 1,
+              children: /* @__PURE__ */jsxRuntime.jsx("div", {
+                style: {
+                  height: "32px"
+                },
+                children: /* @__PURE__ */jsxRuntime.jsx(MuxLogo, {})
+              })
+            }), /* @__PURE__ */jsxRuntime.jsx(ui.Inline, {
+              paddingY: 1,
+              children: /* @__PURE__ */jsxRuntime.jsx(ui.Heading, {
+                size: [0, 1, 2, 2],
+                children: "Upload and preview videos directly from your studio."
+              })
+            }), /* @__PURE__ */jsxRuntime.jsx(ui.Inline, {
+              paddingY: 1,
+              children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+                mode: "ghost",
+                icon: icons.PlugIcon,
+                text: "Configure API",
+                onClick: handleOpen
+              })
+            })]
+          })
+        })
+      })
+    })
+  });
+}
+const Input = props => {
+  var _a;
+  const client = VideoSource_styled.useClient();
+  const secretDocumentValues = useSecretsDocumentValues();
+  const assetDocumentValues = VideoSource_styled.useAssetDocumentValues((_a = props.value) == null ? void 0 : _a.asset);
+  const poll = useMuxPolling(props.readOnly ? void 0 : (assetDocumentValues == null ? void 0 : assetDocumentValues.value) || void 0);
+  const [dialogState, setDialogState] = useDialogState();
+  const error = secretDocumentValues.error || assetDocumentValues.error || poll.error;
+  if (error) {
+    throw error;
+  }
+  const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading;
+  return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
+    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, {
+        ...props,
+        config: props.config,
+        onChange: props.onChange,
+        client,
+        secrets: secretDocumentValues.value.secrets,
+        asset: assetDocumentValues.value,
+        dialogState,
+        setDialogState,
+        needsSetup: secretDocumentValues.value.needsSetup
+      }), dialogState === "secrets" && /* @__PURE__ */jsxRuntime.jsx(ConfigureApi$1, {
+        setDialogState,
+        secrets: secretDocumentValues.value.secrets
+      })]
+    })
+  });
+};
+var Input$1 = React.memo(Input);
+exports.default = Input$1;
+//# sourceMappingURL=Input-7fb0dcd2.js.map