sanity-plugin-mux-input 2.9.0 → 2.10.0

package/dist/index.mjs

@@ -1,18 +1,18 @@
-import { useClient as useClient$1, createHookFromObservableFactory, useDocumentStore, collate, useDocumentValues, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, isReference, useProjectId, useDataset, useCurrentUser, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
+import { useClient as useClient$1, createHookFromObservableFactory, useDocumentStore, collate, useDocumentValues, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, useCurrentUser, isReference, useProjectId, useDataset, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { ErrorOutlineIcon, RetryIcon, CheckmarkCircleIcon, RetrieveIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, CheckmarkIcon, LockIcon, PlayIcon, PlugIcon, EllipsisHorizontalIcon, UploadIcon, ImageIcon, ResetIcon, TranslateIcon, WarningFilledIcon, DocumentVideoIcon } from "@sanity/icons";
-import { Card, Box, Spinner, Stack, Text, Checkbox, Button, Dialog, Flex, Heading, Code, MenuButton, Menu, MenuItem, TextInput, Tooltip, Inline, useToast, TabList, Tab, TabPanel, Label as Label$1, Grid, useTheme_v2, useClickOutsideEvent, Popover, MenuDivider, Autocomplete, Radio, rem } from "@sanity/ui";
-import React, { useState, useMemo, useEffect, useRef, useId, memo, createContext, useContext, isValidElement, useCallback, useReducer, PureComponent, createElement, forwardRef, Suspense } from "react";
+import { ErrorOutlineIcon, InfoOutlineIcon, RetryIcon, CheckmarkCircleIcon, RetrieveIcon, SyncIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, CheckmarkIcon, LockIcon, PlayIcon, PlugIcon, EllipsisHorizontalIcon, UploadIcon, ImageIcon, ResetIcon, TranslateIcon, WarningFilledIcon, DocumentVideoIcon } from "@sanity/icons";
+import { useTheme_v2, Stack, Flex, Box, Text, Button, Dialog, Card, TextInput, Checkbox, Code, Inline, Spinner, Heading, MenuButton, Menu, MenuItem, Tooltip, useToast, TabList, Tab, TabPanel, Label as Label$1, Grid, useClickOutsideEvent, Popover, MenuDivider, Autocomplete, Radio, rem } from "@sanity/ui";
+import React, { useState, useMemo, useCallback, useReducer, useId, memo, useRef, useEffect, createContext, useContext, isValidElement, PureComponent, createElement, forwardRef, Suspense } from "react";
 import compact from "lodash/compact.js";
 import toLower from "lodash/toLower.js";
 import trim from "lodash/trim.js";
 import uniq from "lodash/uniq.js";
 import words from "lodash/words.js";
+import { suspend, clear, preload } from "suspend-react";
+import { defer, timer, of, Observable, concat, throwError, from, Subject } from "rxjs";
 import { styled, css } from "styled-components";
 import { uuid } from "@sanity/uuid";
-import { defer, timer, of, Observable, concat, throwError, from, Subject } from "rxjs";
 import { expand, concatMap, tap, switchMap, mergeMap, catchError, mergeMapTo, takeUntil } from "rxjs/operators";
-import { suspend, clear, preload } from "suspend-react";
 import MuxPlayer from "@mux/mux-player-react";
 import { IntentLink } from "sanity/router";
 import isNumber from "lodash/isNumber.js";
@@ -105,92 +105,116 @@ function useAssets() {
     setSearchQuery
   };
 }
-function parseMuxDate(date) {
-  return new Date(Number(date) * 1e3);
+function useDialogState() {
+  return useState(!1);
+}
+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);
 }
-const FIRST_PAGE = 1, ASSETS_PER_PAGE = 100;
-async function fetchMuxAssetsPage({ secretKey, token }, pageNum) {
+async function createSigningKeys(client) {
   try {
-    const json = await (await fetch(
-      `https://api.mux.com/video/v1/assets?limit=${ASSETS_PER_PAGE}&page=${pageNum}`,
-      {
-        headers: {
-          Authorization: `Basic ${btoa(`${token}:${secretKey}`)}`
-        }
-      }
-    )).json();
-    return json.error ? {
-      pageNum,
-      error: {
-        _tag: "MuxError",
-        error: json.error
-      }
-    } : {
-      pageNum,
-      data: json.data
-    };
-  } catch {
-    return {
-      pageNum,
-      error: { _tag: "FetchError" }
-    };
+    const { dataset } = client.config();
+    return await client.request({
+      url: `/addons/mux/signing-keys/${dataset}`,
+      withCredentials: !0,
+      method: "POST"
+    });
+  } catch (error) {
+    console.error("Error creating signing keys", error);
+    const message = error.response?.statusCode === 401 ? 'Unauthorized - Failed to create the Signing Key. Please ensure that the token has "System" permissions' : error.message;
+    throw new Error(message);
   }
 }
-function accumulateIntermediateState(currentState, pageResult) {
-  const currentData = "data" in currentState && currentState.data || [];
-  return {
-    ...currentState,
-    data: [
-      ...currentData,
-      ...("data" in pageResult && pageResult.data || []).filter(
-        // De-duplicate assets for safety
-        (asset) => !currentData.some((a2) => a2.id === asset.id)
-      )
-    ],
-    error: "error" in pageResult ? pageResult.error : (
-      // Reset error if current page is successful
-      void 0
-    ),
-    pageNum: pageResult.pageNum,
-    loading: !0
-  };
-}
-function hasMorePages(pageResult) {
-  return typeof pageResult == "object" && "data" in pageResult && Array.isArray(pageResult.data) && pageResult.data.length > 0;
+function testSecrets(client) {
+  const { dataset } = client.config();
+  return client.request({
+    url: `/addons/mux/secrets/${dataset}/test`,
+    withCredentials: !0,
+    method: "GET"
+  });
 }
-function useMuxAssets({ secrets, enabled }) {
-  const [state, setState] = useState({ loading: !0, pageNum: FIRST_PAGE });
-  return useEffect(() => {
-    if (!enabled) return;
-    const subscription = defer(
-      () => fetchMuxAssetsPage(
-        secrets,
-        // When we've already successfully loaded before (fully or partially), we start from the following page to avoid re-fetching
-        "data" in state && state.data && state.data.length > 0 && !state.error ? state.pageNum + 1 : state.pageNum
-      )
-    ).pipe(
-      // Here we replace "concatMap" with "expand" to recursively fetch next pages
-      expand((pageResult) => hasMorePages(pageResult) ? timer(2e3).pipe(
-        // eslint-disable-next-line max-nested-callbacks
-        concatMap(() => defer(() => fetchMuxAssetsPage(secrets, pageResult.pageNum + 1)))
-      ) : of()),
-      // On each iteration, persist intermediate states to give feedback to users
-      tap(
-        (pageResult) => setState((prevState) => accumulateIntermediateState(prevState, pageResult))
-      )
-    ).subscribe({
-      // Once done, let the user know we've stopped loading
-      complete: () => {
-        setState((prev) => ({
-          ...prev,
-          loading: !1
-        }));
-      }
+async function haveValidSigningKeys(client, signingKeyId, signingKeyPrivate) {
+  if (!(signingKeyId && signingKeyPrivate))
+    return !1;
+  const { dataset } = client.config();
+  try {
+    const res = await client.request({
+      url: `/addons/mux/signing-keys/${dataset}/${signingKeyId}`,
+      withCredentials: !0,
+      method: "GET"
     });
-    return () => subscription.unsubscribe();
-  }, [enabled]), state;
+    return !!(res.data && res.data.id);
+  } catch {
+    return console.error("Error fetching signingKeyId", signingKeyId, "assuming it is not valid"), !1;
+  }
+}
+function testSecretsObservable(client) {
+  const { dataset } = client.config();
+  return defer(
+    () => client.observable.request({
+      url: `/addons/mux/secrets/${dataset}/test`,
+      withCredentials: !0,
+      method: "GET"
+    })
+  );
 }
-const name = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumentId = "secrets.mux", DIALOGS_Z_INDEX = 6e4, THUMBNAIL_ASPECT_RATIO = 1.7777777777777777, MIN_ASPECT_RATIO = 5 / 4, AUDIO_ASPECT_RATIO = 5 / 1, path$1 = ["token", "secretKey", "enableSignedUrls", "signingKeyId", "signingKeyPrivate"], useSecretsDocumentValues = () => {
+const useSaveSecrets = (client, secrets) => useCallback(
+  async ({
+    token,
+    secretKey,
+    enableSignedUrls
+  }) => {
+    let { signingKeyId, signingKeyPrivate } = secrets;
+    try {
+      if (await saveSecrets(
+        client,
+        token,
+        secretKey,
+        enableSignedUrls,
+        signingKeyId,
+        signingKeyPrivate
+      ), !(await testSecrets(client))?.status && token && secretKey)
+        throw new Error("Invalid secrets");
+    } catch (err) {
+      throw console.error("Error while trying to save secrets:", err), err;
+    }
+    if (enableSignedUrls && !await haveValidSigningKeys(
+      client,
+      signingKeyId,
+      signingKeyPrivate
+    ))
+      try {
+        const { data } = await createSigningKeys(client);
+        signingKeyId = data.id, signingKeyPrivate = data.private_key, await saveSecrets(
+          client,
+          token,
+          secretKey,
+          enableSignedUrls,
+          signingKeyId,
+          signingKeyPrivate
+        );
+      } catch (err) {
+        throw console.log("Error while creating and saving signing key:", err?.message), err;
+      }
+    return {
+      token,
+      secretKey,
+      enableSignedUrls,
+      signingKeyId,
+      signingKeyPrivate
+    };
+  },
+  [client, secrets]
+), name = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumentId = "secrets.mux", DIALOGS_Z_INDEX = 6e4, THUMBNAIL_ASPECT_RATIO = 1.7777777777777777, MIN_ASPECT_RATIO = 5 / 4, AUDIO_ASPECT_RATIO = 5 / 1, path$1 = ["token", "secretKey", "enableSignedUrls", "signingKeyId", "signingKeyPrivate"], useSecretsDocumentValues = () => {
   const { error, isLoading, value } = useDocumentValues(
     muxSecretsDocumentId,
     path$1
@@ -210,89 +234,32 @@ const name = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumen
   }, [value]);
   return { error, isLoading, value: cache };
 };
-function useImportMuxAssets() {
-  const documentStore = useDocumentStore(), client = useClient$1({
-    apiVersion: SANITY_API_VERSION
-  }), [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore), secretDocumentValues = useSecretsDocumentValues(), hasSecrets = !!secretDocumentValues.value.secrets?.secretKey, [importError, setImportError] = useState(), [importState, setImportState] = useState("closed"), dialogOpen = importState !== "closed", muxAssets = useMuxAssets({
-    secrets: secretDocumentValues.value.secrets,
-    enabled: hasSecrets && dialogOpen
-  }), missingAssets = useMemo(() => assetsInSanity && muxAssets.data ? muxAssets.data.filter((a2) => !assetExistsInSanity(a2, assetsInSanity)) : void 0, [assetsInSanity, muxAssets.data]), [selectedAssets, setSelectedAssets] = useState([]), closeDialog = () => {
-    importState !== "importing" && setImportState("closed");
-  }, openDialog = () => {
-    importState === "closed" && setImportState("idle");
-  };
-  async function importAssets() {
-    setImportState("importing");
-    const documents = selectedAssets.flatMap((asset) => muxAssetToSanityDocument(asset) || []), tx = client.transaction();
-    documents.forEach((doc) => tx.create(doc));
-    try {
-      await tx.commit({ returnDocuments: !1 }), setSelectedAssets([]), setImportState("done");
-    } catch (error) {
-      setImportState("error"), setImportError(error);
-    }
-  }
+function init({ token, secretKey, enableSignedUrls }) {
   return {
-    assetsInSanityLoading,
-    closeDialog,
-    dialogOpen,
-    importState,
-    importError,
-    hasSecrets,
-    importAssets,
-    missingAssets,
-    muxAssets,
-    openDialog,
-    selectedAssets,
-    setSelectedAssets
+    submitting: !1,
+    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 ?? "",
+    secretKey: secretKey ?? "",
+    enableSignedUrls: enableSignedUrls ?? !1
   };
 }
-function muxAssetToSanityDocument(asset) {
-  const playbackId = (asset.playback_ids || []).find((p) => p.id)?.id;
-  if (playbackId)
-    return {
-      _id: uuid(),
-      _type: "mux.videoAsset",
-      _updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
-      _createdAt: parseMuxDate(asset.created_at).toISOString(),
-      assetId: asset.id,
-      playbackId,
-      filename: asset.meta?.title ?? `Asset #${truncateString(asset.id, 15)}`,
-      status: asset.status,
-      data: asset
-    };
-}
-const useAssetsInSanity = createHookFromObservableFactory(
-  (documentStore) => documentStore.listenQuery(
-    /* groq */
-    `*[_type == "mux.videoAsset"] {
-      "uploadId": coalesce(uploadId, data.upload_id),
-      "assetId": coalesce(assetId, data.id),
-    }`,
-    {},
-    {
-      apiVersion: SANITY_API_VERSION
-    }
-  )
-);
-function assetExistsInSanity(asset, existingAssets) {
-  return asset.status !== "ready" ? !1 : existingAssets.some(
-    (existing) => existing.assetId === asset.id || existing.uploadId === asset.upload_id
-  );
-}
-function useInView(ref, options = {}) {
-  const [inView, setInView] = useState(!1);
-  return useEffect(() => {
-    if (!ref.current) return;
-    const observer = new IntersectionObserver(([entry], obs) => {
-      const nowInView = entry.isIntersecting && obs.thresholds.some((threshold) => entry.intersectionRatio >= threshold);
-      setInView(nowInView), options?.onChange?.(nowInView);
-    }, options), toObserve = ref.current;
-    return observer.observe(toObserve), () => {
-      toObserve && observer.unobserve(toObserve);
-    };
-  }, [options, ref]), inView;
+function reducer(state, action) {
+  switch (action?.type) {
+    case "submit":
+      return { ...state, submitting: !0, error: null };
+    case "error":
+      return { ...state, submitting: !1, 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: ${action?.type}`);
+  }
 }
-const _id = "secrets.mux";
+const useSecretsFormState = (secrets) => useReducer(reducer, secrets, init), _id = "secrets.mux";
 function readSecrets(client) {
   const { projectId, dataset } = client.config();
   return suspend(async () => {
@@ -316,1904 +283,2173 @@ function readSecrets(client) {
     };
   }, [cacheNs, _id, projectId, dataset]);
 }
-function generateJwt(client, playbackId, aud, payload) {
-  const { signingKeyId, signingKeyPrivate } = readSecrets(client);
-  if (!signingKeyId)
-    throw new TypeError("Missing `signingKeyId`.\n Check your plugin's configuration");
-  if (!signingKeyPrivate)
-    throw new TypeError("Missing `signingKeyPrivate`.\n Check your plugin's configuration");
-  const { default: sign } = suspend(() => import("jsonwebtoken-esm/sign"), ["jsonwebtoken-esm/sign"]);
-  return sign(
-    payload ? JSON.parse(JSON.stringify(payload, (_, v) => v ?? void 0)) : {},
-    atob(signingKeyPrivate),
-    {
-      algorithm: "RS256",
-      keyid: signingKeyId,
-      audience: aud,
-      subject: playbackId,
-      noTimestamp: !0,
-      expiresIn: "12h"
-    }
-  );
-}
-function getPlaybackId(asset) {
-  if (!asset?.playbackId)
-    throw console.error("Asset is missing a playbackId", { asset }), new TypeError("Missing playbackId");
-  return asset.playbackId;
-}
-function getPlaybackPolicy(asset) {
-  return asset.data?.playback_ids?.find((playbackId) => asset.playbackId === playbackId.id)?.policy ?? "public";
-}
-function createUrlParamsObject(client, asset, params, audience) {
-  const playbackId = getPlaybackId(asset);
-  let searchParams = new URLSearchParams(
-    JSON.parse(JSON.stringify(params, (_, v) => v ?? void 0))
-  );
-  if (getPlaybackPolicy(asset) === "signed") {
-    const token = generateJwt(client, playbackId, audience, params);
-    searchParams = new URLSearchParams({ token });
-  }
-  return { playbackId, searchParams };
-}
-function getAnimatedPosterSrc({
-  asset,
-  client,
-  height,
-  width,
-  start = asset.thumbTime ? Math.max(0, asset.thumbTime - 2.5) : 0,
-  end = start + 5,
-  fps = 15
-}) {
-  const params = { height, width, start, end, fps }, { playbackId, searchParams } = createUrlParamsObject(client, asset, params, "g");
-  return `https://image.mux.com/${playbackId}/animated.gif?${searchParams}`;
-}
-function getPosterSrc({
-  asset,
-  client,
-  fit_mode,
-  height,
-  time = asset.thumbTime ?? void 0,
-  width
-}) {
-  const params = { fit_mode, height, width };
-  time && (params.time = time);
-  const { playbackId, searchParams } = createUrlParamsObject(client, asset, params, "t");
-  return `https://image.mux.com/${playbackId}/thumbnail.png?${searchParams}`;
-}
-const Image = styled.img`
-  transition: opacity 0.175s ease-out 0s;
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  object-position: center center;
-`, STATUS_TO_TONE = {
-  loading: "transparent",
-  error: "critical",
-  loaded: "default"
-};
-function VideoThumbnail({
-  asset,
-  width,
-  staticImage = !1
-}) {
-  const ref = useRef(null), inView = useInView(ref), posterWidth = width || 250, [status, setStatus] = useState("loading"), client = useClient(), src = useMemo(() => {
-    try {
-      let thumbnail;
-      return staticImage ? thumbnail = getPosterSrc({ asset, client, width: posterWidth }) : thumbnail = getAnimatedPosterSrc({ asset, client, width: posterWidth }), thumbnail;
-    } catch {
-      status !== "error" && setStatus("error");
-      return;
-    }
-  }, [asset, client, posterWidth, status, staticImage]);
-  function handleLoad() {
-    setStatus("loaded");
-  }
-  function handleError() {
-    setStatus("error");
-  }
+function MuxLogo({ height = 26 }) {
+  const id = useId(), fillColor = useTheme_v2().color._dark ? "white" : "black", titleId = useMemo(() => `${id}-title`, [id]), pathStyle = {
+    fillRule: "nonzero"
+  };
   return /* @__PURE__ */ jsx(
-    Card,
+    "svg",
     {
-      style: {
-        aspectRatio: THUMBNAIL_ASPECT_RATIO,
-        position: "relative",
-        maxWidth: width ? `${width}px` : void 0,
-        width: "100%",
-        flex: 1
-      },
-      border: !0,
-      radius: 2,
-      ref,
-      tone: STATUS_TO_TONE[status],
-      children: inView ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        status === "loading" && /* @__PURE__ */ jsx(
-          Box,
+      "aria-labelledby": titleId,
+      style: { height: `${height}px` },
+      viewBox: "0 0 1600 500",
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlSpace: "preserve",
+      children: /* @__PURE__ */ jsxs("g", { id: "Layer-1", fill: fillColor, children: [
+        /* @__PURE__ */ jsx(
+          "path",
           {
-            style: {
-              position: "absolute",
-              left: "50%",
-              top: "50%",
-              transform: "translate(-50%, -50%)"
-            },
-            children: /* @__PURE__ */ jsx(Spinner, {})
+            d: "M994.287,93.486c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m0,-93.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,68.943 -56.09,125.033 -125.032,125.033c-68.942,-0 -125.03,-56.09 -125.03,-125.033l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,137.853 112.149,250.003 249.999,250.003c137.851,-0 250.001,-112.15 250.001,-250.003l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486",
+            style: pathStyle
           }
         ),
-        status === "error" && /* @__PURE__ */ jsxs(
-          Stack,
+        /* @__PURE__ */ jsx(
+          "path",
           {
-            space: 4,
-            style: {
-              position: "absolute",
-              width: "100%",
-              left: 0,
-              top: "50%",
-              transform: "translateY(-50%)",
-              justifyItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsx(Text, { size: 4, muted: !0, children: /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { fontSize: "1.75em" } }) }),
-              /* @__PURE__ */ jsx(Text, { muted: !0, align: "center", children: "Failed loading thumbnail" })
-            ]
+            d: "M1537.51,468.511c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m-275.883,-218.509l-143.33,143.329c-24.402,24.402 -24.402,63.966 0,88.368c24.402,24.402 63.967,24.402 88.369,-0l143.33,-143.329l143.328,143.329c24.402,24.4 63.967,24.402 88.369,-0c24.403,-24.402 24.403,-63.966 0.001,-88.368l-143.33,-143.329l0.001,-0.004l143.329,-143.329c24.402,-24.402 24.402,-63.965 0,-88.367c-24.402,-24.402 -63.967,-24.402 -88.369,-0l-143.329,143.328l-143.329,-143.328c-24.402,-24.401 -63.967,-24.402 -88.369,-0c-24.402,24.402 -24.402,63.965 0,88.367l143.329,143.329l0,0.004Z",
+            style: pathStyle
           }
         ),
         /* @__PURE__ */ jsx(
-          Image,
+          "path",
           {
-            src,
-            alt: `Preview for ${staticImage ? "image" : "video"} ${asset.filename || asset.assetId}`,
-            onLoad: handleLoad,
-            onError: handleError,
-            style: { opacity: status === "loaded" ? 1 : 0 }
+            d: "M437.511,468.521c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m23.915,-463.762c-23.348,-9.672 -50.226,-4.327 -68.096,13.544l-143.331,143.329l-143.33,-143.329c-17.871,-17.871 -44.747,-23.216 -68.096,-13.544c-23.349,9.671 -38.574,32.455 -38.574,57.729l0,375.026c0,34.51 27.977,62.486 62.487,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-224.173l80.843,80.844c24.404,24.402 63.965,24.402 88.369,-0l80.843,-80.844l0,224.173c0,34.51 27.976,62.486 62.486,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-375.026c0,-25.274 -15.224,-48.058 -38.573,-57.729",
+            style: pathStyle
           }
         )
-      ] }) : null
+      ] })
     }
   );
 }
-const MissingAssetCheckbox = styled(Checkbox)`
-  position: static !important;
-
-  input::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    display: block;
-    cursor: pointer;
-    z-index: 1000;
-  }
-`;
-function MissingAsset({
-  asset,
-  selectAsset,
-  selected
-}) {
-  const duration = useFormattedDuration(asset.duration * 1e3);
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      tone: selected ? "positive" : void 0,
-      border: !0,
-      paddingX: 2,
-      paddingY: 3,
-      style: { position: "relative" },
-      radius: 1,
-      children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
-        /* @__PURE__ */ jsx(
-          MissingAssetCheckbox,
-          {
-            checked: selected,
-            onChange: (e) => {
-              selectAsset(e.currentTarget.checked);
-            },
-            "aria-label": selected ? `Import video ${asset.id}` : `Skip import of video ${asset.id}`
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          VideoThumbnail,
-          {
-            asset: {
-              assetId: asset.id,
-              data: asset,
-              filename: asset.id,
-              playbackId: asset.playback_ids.find((p) => p.id)?.id
-            },
-            width: 150
-          }
-        ),
-        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 1, children: [
-            /* @__PURE__ */ jsx(Code, { size: 2, children: truncateString(asset.id, 15) }),
-            " ",
-            /* @__PURE__ */ jsxs(Text, { muted: !0, size: 2, children: [
-              "(",
-              duration.formatted,
-              ")"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs(Text, { size: 1, children: [
-            "Uploaded at",
-            " ",
-            new Date(Number(asset.created_at) * 1e3).toLocaleDateString("en", {
-              year: "numeric",
-              day: "2-digit",
-              month: "2-digit"
-            })
-          ] })
-        ] })
-      ] })
-    },
-    asset.id
-  );
+const Logo = styled.span`
+  display: inline-block;
+  height: 0.8em;
+  margin-right: 1em;
+  transform: translate(0.3em, -0.2em);
+`, Header = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(MuxLogo, { height: 13 }) }),
+  "API Credentials"
+] });
+function FormField(props) {
+  const { children, title, description, inputId } = props;
+  return /* @__PURE__ */ jsxs(Stack, { space: 1, children: [
+    /* @__PURE__ */ jsx(Flex, { align: "flex-end", children: /* @__PURE__ */ jsx(Box, { flex: 1, paddingY: 2, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+      /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: inputId, weight: "semibold", size: 1, children: title || /* @__PURE__ */ jsx("em", { children: "Untitled" }) }),
+      description && /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: description })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { children })
+  ] });
 }
-function ImportVideosDialog(props) {
-  const { importState } = props, canTriggerImport = (importState === "idle" || importState === "error") && props.selectedAssets.length > 0, isImporting = importState === "importing", noAssetsToImport = props.missingAssets?.length === 0 && !props.muxAssets.loading && !props.assetsInSanityLoading;
-  return /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      animate: !0,
-      header: "Import videos from Mux",
-      zOffset: DIALOGS_Z_INDEX,
-      id: "video-details-dialog",
-      onClose: props.closeDialog,
-      onClickOutside: props.closeDialog,
-      width: 1,
+var FormField$1 = memo(FormField);
+const fieldNames = ["token", "secretKey", "enableSignedUrls"];
+function ConfigureApiDialog({ secrets, setDialogState }) {
+  const client = useClient(), [state, dispatch] = useSecretsFormState(secrets), hasSecretsInitially = useMemo(() => secrets.token && secrets.secretKey, [secrets]), handleClose = useCallback(() => setDialogState(!1), [setDialogState]), dirty = useMemo(
+    () => secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls,
+    [secrets, state]
+  ), id = `ConfigureApi${useId()}`, [tokenId, secretKeyId, enableSignedUrlsId] = useMemo(
+    () => fieldNames.map((field) => `${id}-${field}`),
+    [id]
+  ), firstField = useRef(null), handleSaveSecrets = useSaveSecrets(client, secrets), saving = useRef(!1), handleSubmit = useCallback(
+    (event) => {
+      if (event.preventDefault(), !saving.current && event.currentTarget.reportValidity()) {
+        saving.current = !0, dispatch({ type: "submit" });
+        const { token, secretKey, enableSignedUrls } = state;
+        handleSaveSecrets({ token, secretKey, enableSignedUrls }).then((savedSecrets) => {
+          const { projectId, dataset } = client.config();
+          clear([cacheNs, _id, projectId, dataset]), preload(() => Promise.resolve(savedSecrets), [cacheNs, _id, projectId, dataset]), setDialogState(!1);
+        }).catch((err) => dispatch({ type: "error", payload: err.message })).finally(() => {
+          saving.current = !1;
+        });
+      }
+    },
+    [client, dispatch, handleSaveSecrets, setDialogState, state]
+  ), handleChangeToken = useCallback(
+    (event) => {
+      dispatch({
+        type: "change",
+        payload: { name: "token", value: event.currentTarget.value }
+      });
+    },
+    [dispatch]
+  ), handleChangeSecretKey = useCallback(
+    (event) => {
+      dispatch({
+        type: "change",
+        payload: { name: "secretKey", value: event.currentTarget.value }
+      });
+    },
+    [dispatch]
+  ), handleChangeEnableSignedUrls = useCallback(
+    (event) => {
+      dispatch({
+        type: "change",
+        payload: { name: "enableSignedUrls", value: event.currentTarget.checked }
+      });
+    },
+    [dispatch]
+  );
+  return useEffect(() => {
+    firstField.current && firstField.current.focus();
+  }, [firstField]), /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      animate: !0,
+      id,
+      onClose: handleClose,
+      onClickOutside: handleClose,
+      header: /* @__PURE__ */ jsx(Header, {}),
+      zOffset: DIALOGS_Z_INDEX,
       position: "fixed",
-      footer: importState !== "done" && !noAssetsToImport && /* @__PURE__ */ jsx(Card, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            fontSize: 2,
-            padding: 3,
-            mode: "bleed",
-            text: "Cancel",
-            tone: "critical",
-            onClick: props.closeDialog,
-            disabled: isImporting
-          }
-        ),
-        props.missingAssets && /* @__PURE__ */ jsx(
-          Button,
-          {
-            icon: RetrieveIcon,
-            fontSize: 2,
-            padding: 3,
-            mode: "ghost",
-            text: props.selectedAssets?.length > 0 ? `Import ${props.selectedAssets.length} video(s)` : "No video(s) selected",
-            tone: "positive",
-            onClick: props.importAssets,
-            iconRight: isImporting && Spinner,
-            disabled: !canTriggerImport
-          }
-        )
-      ] }) }),
-      children: /* @__PURE__ */ jsxs(Box, { padding: 3, children: [
-        (props.muxAssets.loading || props.assetsInSanityLoading) && /* @__PURE__ */ jsx(Card, { tone: "primary", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
-          /* @__PURE__ */ jsx(Spinner, { muted: !0, size: 4 }),
-          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "Loading assets from Mux" }),
-            /* @__PURE__ */ jsxs(Text, { size: 1, children: [
-              "This may take a while.",
-              props.missingAssets && props.missingAssets.length > 0 && ` There are at least ${props.missingAssets.length} video${props.missingAssets.length > 1 ? "s" : ""} currently not in Sanity...`
-            ] })
-          ] })
-        ] }) }),
-        props.muxAssets.error && /* @__PURE__ */ jsx(Card, { tone: "critical", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
-          /* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }),
-          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "There was an error getting all data from Mux" }),
-            /* @__PURE__ */ jsx(Text, { size: 1, children: props.missingAssets ? `But we've found ${props.missingAssets.length} video${props.missingAssets.length > 1 ? "s" : ""} not in Sanity, which you can start importing now.` : "Please try again or contact a developer for help." })
-          ] })
-        ] }) }),
-        importState === "importing" && /* @__PURE__ */ jsx(Card, { tone: "primary", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
-          /* @__PURE__ */ jsx(Spinner, { muted: !0, size: 4 }),
-          /* @__PURE__ */ jsx(Stack, { space: 2, children: /* @__PURE__ */ jsxs(Text, { size: 2, weight: "semibold", children: [
-            "Importing ",
-            props.selectedAssets.length,
-            " video",
-            props.selectedAssets.length > 1 && "s",
-            " from Mux"
-          ] }) })
-        ] }) }),
-        importState === "error" && /* @__PURE__ */ jsx(Card, { tone: "critical", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
-          /* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }),
-          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "There was an error importing videos" }),
-            /* @__PURE__ */ jsx(Text, { size: 1, children: props.importError ? `Error: ${props.importError}` : "Please try again or contact a developer for help." }),
-            /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(
-              Button,
+      width: 1,
+      children: /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, noValidate: !0, children: /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
+        !hasSecretsInitially && /* @__PURE__ */ jsx(Card, { padding: [3, 3, 3], radius: 2, shadow: 1, tone: "primary", children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+          /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+            "To set up a new access token, go to your",
+            " ",
+            /* @__PURE__ */ jsx(
+              "a",
               {
-                icon: RetryIcon,
-                text: "Retry",
-                tone: "primary",
-                onClick: props.importAssets
+                href: "https://dashboard.mux.com/settings/access-tokens",
+                target: "_blank",
+                rel: "noreferrer noopener",
+                children: "account on mux.com"
               }
-            ) })
+            ),
+            "."
+          ] }),
+          /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+            "The access token needs permissions: ",
+            /* @__PURE__ */ jsx("strong", { children: "Mux Video " }),
+            "(Full Access) and ",
+            /* @__PURE__ */ jsx("strong", { children: "Mux Data" }),
+            " (Read)",
+            /* @__PURE__ */ jsx("br", {}),
+            "To use Signed URLs, the token must also have System permissions.",
+            /* @__PURE__ */ jsx("br", {}),
+            "The credentials will be stored safely in a hidden document only available to editors."
           ] })
         ] }) }),
-        (noAssetsToImport || importState === "done") && /* @__PURE__ */ jsxs(Stack, { paddingY: 5, marginBottom: 4, space: 3, style: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(CheckmarkCircleIcon, { fontSize: 48 }) }),
-          /* @__PURE__ */ jsx(Heading, { size: 2, children: importState === "done" ? "Videos imported successfully" : "There are no Mux videos to import" }),
-          /* @__PURE__ */ jsx(Text, { size: 2, children: importState === "done" ? "You can now use them in your Sanity content." : "They're all in Sanity and ready to be used in your content." })
-        ] }),
-        props.missingAssets && props.missingAssets.length > 0 && (importState === "idle" || importState === "error") && /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
-          /* @__PURE__ */ jsxs(Heading, { size: 1, children: [
-            "There are ",
-            props.missingAssets.length,
-            props.muxAssets.loading && "+",
-            " Mux video",
-            props.missingAssets.length > 1 && "s",
-            " ",
-            "not in Sanity"
-          ] }),
-          !props.muxAssets.loading && /* @__PURE__ */ jsxs(Flex, { align: "center", paddingX: 2, children: [
+        /* @__PURE__ */ jsx(FormField$1, { title: "Access Token", inputId: tokenId, children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            id: tokenId,
+            ref: firstField,
+            onChange: handleChangeToken,
+            type: "text",
+            value: state.token ?? "",
+            required: !!state.secretKey || state.enableSignedUrls
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormField$1, { title: "Secret Key", inputId: secretKeyId, children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            id: secretKeyId,
+            onChange: handleChangeSecretKey,
+            type: "text",
+            value: state.secretKey ?? "",
+            required: !!state.token || state.enableSignedUrls
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
             /* @__PURE__ */ jsx(
               Checkbox,
               {
-                id: "import-all",
-                style: { display: "block" },
-                onClick: (e) => {
-                  e.currentTarget.checked ? props.missingAssets && props.setSelectedAssets(props.missingAssets) : props.setSelectedAssets([]);
-                },
-                checked: props.selectedAssets.length === props.missingAssets.length
+                id: enableSignedUrlsId,
+                onChange: handleChangeEnableSignedUrls,
+                checked: state.enableSignedUrls,
+                style: { display: "block" }
               }
             ),
-            /* @__PURE__ */ jsx(Box, { flex: 1, paddingLeft: 3, as: "label", htmlFor: "import-all", children: /* @__PURE__ */ jsx(Text, { children: "Import all" }) })
+            /* @__PURE__ */ jsx(Box, { flex: 1, paddingLeft: 3, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("label", { htmlFor: enableSignedUrlsId, children: "Enable Signed Urls" }) }) })
           ] }),
-          props.missingAssets.map((asset) => /* @__PURE__ */ jsx(
-            MissingAsset,
+          secrets.signingKeyId && state.enableSignedUrls ? /* @__PURE__ */ jsx(Card, { padding: [3, 3, 3], radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+            /* @__PURE__ */ jsx(Text, { size: 1, children: "The signing key ID that Sanity will use is:" }),
+            /* @__PURE__ */ jsx(Code, { size: 1, children: secrets.signingKeyId }),
+            /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+              "This key is only used for previewing content in the Sanity UI.",
+              /* @__PURE__ */ jsx("br", {}),
+              "You should generate a different key to use in your application server."
+            ] })
+          ] }) }) : null
+        ] }),
+        /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+          /* @__PURE__ */ jsx(
+            Button,
             {
-              asset,
-              selectAsset: (selected) => {
-                selected ? props.setSelectedAssets([...props.selectedAssets, asset]) : props.setSelectedAssets(props.selectedAssets.filter((a2) => a2.id !== asset.id));
-              },
-              selected: props.selectedAssets.some((a2) => a2.id === asset.id)
-            },
-            asset.id
-          ))
-        ] })
-      ] })
+              text: "Save",
+              disabled: !dirty,
+              loading: state.submitting,
+              tone: "primary",
+              mode: "default",
+              type: "submit"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: state.submitting,
+              text: "Cancel",
+              mode: "bleed",
+              onClick: handleClose
+            }
+          )
+        ] }),
+        state.error && /* @__PURE__ */ jsx(Card, { padding: [3, 3, 3], radius: 2, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsx(Text, { children: state.error }) })
+      ] }) }) })
     }
   );
 }
-function ImportVideosFromMux() {
-  const importAssets = useImportMuxAssets();
-  if (importAssets.hasSecrets)
-    return importAssets.dialogOpen ? /* @__PURE__ */ jsx(ImportVideosDialog, { ...importAssets }) : /* @__PURE__ */ jsx(Button, { mode: "bleed", text: "Import from Mux", onClick: importAssets.openDialog });
+function ConfigureApi() {
+  const [dialogOpen, setDialogOpen] = useDialogState(), secretDocumentValues = useSecretsDocumentValues(), openDialog = useCallback(() => setDialogOpen("secrets"), [setDialogOpen]);
+  return dialogOpen === "secrets" ? /* @__PURE__ */ jsx(
+    ConfigureApiDialog,
+    {
+      secrets: secretDocumentValues.value.secrets,
+      setDialogState: setDialogOpen
+    }
+  ) : /* @__PURE__ */ jsx(Button, { mode: "bleed", text: "Configure plugin", onClick: openDialog });
 }
-const CONTEXT_MENU_POPOVER_PROPS = {
-  constrainSize: !0,
-  placement: "bottom",
-  portal: !0,
-  width: 0
-};
-function SelectSortOptions(props) {
-  const id = useId();
-  return /* @__PURE__ */ jsx(
-    MenuButton,
-    {
-      button: /* @__PURE__ */ jsx(Button, { text: "Sort", icon: SortIcon, mode: "bleed", padding: 3, style: { cursor: "pointer" } }),
-      id,
-      menu: /* @__PURE__ */ jsx(Menu, { children: Object.entries(ASSET_SORT_OPTIONS).map(([type, { label }]) => /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          "data-as": "button",
-          onClick: () => props.setSort(type),
-          padding: 3,
-          tone: "default",
-          text: label,
-          pressed: type === props.sort
-        },
-        type
-      )) }),
-      popover: CONTEXT_MENU_POPOVER_PROPS
-    }
-  );
+function generateAssetPlaceholder(assetId) {
+  return `Asset #${truncateString(assetId, 15)}`;
 }
-const SpinnerBox = () => /* @__PURE__ */ jsx(
-  Box,
-  {
-    style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      minHeight: "150px"
-    },
-    children: /* @__PURE__ */ jsx(Spinner, {})
-  }
-);
-function FormField(props) {
-  const { children, title, description, inputId } = props;
-  return /* @__PURE__ */ jsxs(Stack, { space: 1, children: [
-    /* @__PURE__ */ jsx(Flex, { align: "flex-end", children: /* @__PURE__ */ jsx(Box, { flex: 1, paddingY: 2, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-      /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: inputId, weight: "semibold", size: 1, children: title || /* @__PURE__ */ jsx("em", { children: "Untitled" }) }),
-      description && /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: description })
-    ] }) }) }),
-    /* @__PURE__ */ jsx("div", { children })
-  ] });
+function isEmptyOrPlaceholderTitle(filename, assetId) {
+  if (!filename || filename.trim() === "")
+    return !0;
+  const placeholder = generateAssetPlaceholder(assetId);
+  return filename === placeholder;
 }
-var FormField$1 = memo(FormField);
-const IconInfo = (props) => {
-  const Icon = props.icon;
-  return /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "center", padding: 1, children: [
-    /* @__PURE__ */ jsx(Text, { size: (props.size || 1) + 1, muted: !0, children: /* @__PURE__ */ jsx(Icon, {}) }),
-    /* @__PURE__ */ jsx(Text, { size: props.size || 1, muted: props.muted, children: props.text })
-  ] });
-};
-function ResolutionIcon(props) {
-  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      fill: "currentColor",
-      d: "M20 9V6h-3V4h5v5h-2ZM2 9V4h5v2H4v3H2Zm15 11v-2h3v-3h2v5h-5ZM2 20v-5h2v3h3v2H2Zm4-4V8h12v8H6Zm2-2h8v-4H8v4Zm0 0v-4v4Z"
-    }
-  ) });
+function parseMuxDate(date) {
+  return new Date(Number(date) * 1e3);
 }
-function StopWatchIcon(props) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "1em",
-      height: "1em",
-      viewBox: "0 0 512 512",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M232 306.667h48V176h-48v130.667z", fill: "currentColor" }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M407.67 170.271l30.786-30.786-33.942-33.941-30.785 30.786C341.217 111.057 300.369 96 256 96 149.961 96 64 181.961 64 288s85.961 192 192 192 192-85.961 192-192c0-44.369-15.057-85.217-40.33-117.729zm-45.604 223.795C333.734 422.398 296.066 438 256 438s-77.735-15.602-106.066-43.934C121.602 365.735 106 328.066 106 288s15.602-77.735 43.934-106.066C178.265 153.602 215.934 138 256 138s77.734 15.602 106.066 43.934C390.398 210.265 406 247.934 406 288s-15.602 77.735-43.934 106.066z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ jsx("path", { d: "M192 32h128v48H192z", fill: "currentColor" })
-      ]
-    }
-  );
+function deleteAssetOnMux(client, assetId) {
+  const { dataset } = client.config();
+  return client.request({
+    url: `/addons/mux/assets/${dataset}/${assetId}`,
+    withCredentials: !0,
+    method: "DELETE"
+  });
 }
-const DialogStateContext = createContext({
-  dialogState: !1,
-  setDialogState: () => null
-}), DialogStateProvider = ({
-  dialogState,
-  setDialogState,
-  children
-}) => /* @__PURE__ */ jsx(DialogStateContext.Provider, { value: { dialogState, setDialogState }, children }), useDialogStateContext = () => useContext(DialogStateContext);
-function getVideoSrc({ asset, client }) {
-  const playbackId = getPlaybackId(asset), searchParams = new URLSearchParams();
-  if (getPlaybackPolicy(asset) === "signed") {
-    const token = generateJwt(client, playbackId, "v");
-    searchParams.set("token", token);
+async function deleteAsset({
+  client,
+  asset,
+  deleteOnMux
+}) {
+  if (!asset?._id) return !0;
+  try {
+    await client.delete(asset._id);
+  } catch {
+    return "failed-sanity";
   }
-  return `https://stream.mux.com/${playbackId}.m3u8?${searchParams}`;
+  if (deleteOnMux && asset?.assetId)
+    try {
+      await deleteAssetOnMux(client, asset.assetId);
+    } catch {
+      return "failed-mux";
+    }
+  return !0;
 }
-function getDevicePixelRatio(options) {
-  const {
-    defaultDpr = 1,
-    maxDpr = 3,
-    round = !0
-  } = options || {}, dpr = typeof window < "u" && typeof window.devicePixelRatio == "number" ? window.devicePixelRatio : defaultDpr;
-  return Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
+function getAsset(client, assetId) {
+  const { dataset } = client.config();
+  return client.request({
+    url: `/addons/mux/assets/${dataset}/data/${assetId}`,
+    withCredentials: !0,
+    method: "GET"
+  });
 }
-function formatSeconds(seconds) {
-  if (typeof seconds != "number" || Number.isNaN(seconds))
-    return "";
-  const hrs = ~~(seconds / 3600), mins = ~~(seconds % 3600 / 60), secs = ~~seconds % 60;
-  let ret = "";
-  return hrs > 0 && (ret += "" + hrs + ":" + (mins < 10 ? "0" : "")), ret += "" + mins + ":" + (secs < 10 ? "0" : ""), ret += "" + secs, ret;
+function listAssets(client, options) {
+  const { dataset } = client.config(), query = {};
+  return options.limit && (query.limit = options.limit.toString()), options.cursor && (query.cursor = options.cursor), client.request({
+    url: `/addons/mux/assets/${dataset}/data/list`,
+    withCredentials: !0,
+    method: "GET",
+    query
+  });
 }
-function formatSecondsToHHMMSS(seconds) {
-  const hrs = Math.floor(seconds / 3600).toString().padStart(2, "0"), mins = Math.floor(seconds % 3600 / 60).toString().padStart(2, "0"), secs = Math.floor(seconds % 60).toString().padStart(2, "0");
-  return `${hrs}:${mins}:${secs}`;
+const ASSETS_PER_PAGE = 100;
+async function fetchMuxAssetsPage(client, cursor) {
+  try {
+    const response = await listAssets(client, {
+      limit: ASSETS_PER_PAGE,
+      cursor
+    });
+    return {
+      cursor,
+      data: response.data,
+      next_cursor: response.next_cursor || null
+    };
+  } catch {
+    return {
+      cursor,
+      error: { _tag: "FetchError" }
+    };
+  }
 }
-function isValidTimeFormat(time) {
-  return /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9]):([0-5]?[0-9])$/.test(time) || time === "";
+function accumulateIntermediateState(currentState, pageResult) {
+  const currentData = "data" in currentState && currentState.data || [], newAssets = "data" in pageResult && pageResult.data || [], { validAssets, skippedInThisPage } = newAssets.reduce(
+    (acc, asset) => {
+      const hasPlaybackIds = asset.playback_ids && asset.playback_ids.length > 0, isDuplicate = currentData.some((a2) => a2.id === asset.id);
+      return hasPlaybackIds || (acc.skippedInThisPage = !0), hasPlaybackIds && !isDuplicate && acc.validAssets.push(asset), acc;
+    },
+    { validAssets: [], skippedInThisPage: !1 }
+  );
+  return {
+    ...currentState,
+    data: [...currentData, ...validAssets],
+    error: "error" in pageResult ? pageResult.error : (
+      // Reset error if current page is successful
+      void 0
+    ),
+    cursor: "next_cursor" in pageResult ? pageResult.next_cursor : pageResult.cursor,
+    loading: !0,
+    hasSkippedAssetsWithoutPlayback: currentState.hasSkippedAssetsWithoutPlayback || skippedInThisPage
+  };
 }
-function getSecondsFromTimeFormat(time) {
-  const [hh = 0, mm = 0, ss = 0] = time.split(":").map(Number);
-  return hh * 3600 + mm * 60 + ss;
+function hasMorePages(pageResult) {
+  return typeof pageResult == "object" && "next_cursor" in pageResult && pageResult.next_cursor !== null;
 }
-function EditThumbnailDialog({ asset, currentTime = 0 }) {
-  const client = useClient(), { setDialogState } = useDialogStateContext(), dialogId = `EditThumbnailDialog${useId()}`, [timeFormatted, setTimeFormatted] = useState(
-    () => formatSecondsToHHMMSS(currentTime)
-  ), [nextTime, setNextTime] = useState(currentTime), [inputError, setInputError] = useState(""), assetWithNewThumbnail = useMemo(() => ({ ...asset, thumbTime: nextTime }), [asset, nextTime]), [saving, setSaving] = useState(!1), [saveThumbnailError, setSaveThumbnailError] = useState(null), handleSave = () => {
-    setSaving(!0), client.patch(asset._id).set({ thumbTime: nextTime }).commit({ returnDocuments: !1 }).then(() => void setDialogState(!1)).catch(setSaveThumbnailError).finally(() => void setSaving(!1));
-  }, width = 300 * getDevicePixelRatio({ maxDpr: 2 });
-  if (saveThumbnailError)
-    throw saveThumbnailError;
-  return /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      id: dialogId,
-      header: "Edit thumbnail",
-      onClose: () => setDialogState(!1),
-      footer: /* @__PURE__ */ jsx(Stack, { padding: 3, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          disabled: inputError !== "",
-          mode: "ghost",
-          tone: "primary",
-          loading: saving,
-          onClick: handleSave,
-          text: "Set new thumbnail"
-        },
-        "thumbnail"
-      ) }),
-      children: /* @__PURE__ */ jsxs(Stack, { space: 3, padding: 3, children: [
-        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Current:" }),
-          /* @__PURE__ */ jsx(VideoThumbnail, { asset, width, staticImage: !0 })
-        ] }),
-        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "New:" }),
-          /* @__PURE__ */ jsx(VideoThumbnail, { asset: assetWithNewThumbnail, width, staticImage: !0 })
-        ] }),
-        /* @__PURE__ */ jsx(Stack, { space: 2, children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsx(Text, { size: 5, weight: "semibold", children: "Or" }) }) }),
-        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Selected time for thumbnail (hh:mm:ss):" }),
-          /* @__PURE__ */ jsx(
-            TextInput,
-            {
-              size: 1,
-              value: timeFormatted,
-              placeholder: "hh:mm:ss",
-              onChange: (event) => {
-                const value = event.currentTarget.value;
-                if (setTimeFormatted(value), isValidTimeFormat(value)) {
-                  setInputError("");
-                  const totalSeconds = getSecondsFromTimeFormat(value);
-                  setNextTime(totalSeconds);
-                } else
-                  setInputError("Invalid time format");
-              },
-              customValidity: inputError
-            }
+function useMuxAssets({ client, enabled }) {
+  const [state, setState] = useState({ loading: !0, cursor: null });
+  return useEffect(() => {
+    if (!enabled) return;
+    const subscription = defer(
+      () => fetchMuxAssetsPage(
+        client,
+        // When we've already successfully loaded before (fully or partially), we start from the next cursor to avoid re-fetching
+        "data" in state && state.data && state.data.length > 0 && !state.error ? state.cursor : null
+      )
+    ).pipe(
+      // Here we use "expand" to recursively fetch next pages
+      expand((pageResult) => hasMorePages(pageResult) ? timer(2e3).pipe(
+        concatMap(
+          () => (
+            // eslint-disable-next-line max-nested-callbacks
+            defer(
+              () => fetchMuxAssetsPage(
+                client,
+                "next_cursor" in pageResult ? pageResult.next_cursor : null
+              )
+            )
           )
-        ] })
-      ] })
-    }
-  );
-}
-function VideoPlayer({
-  asset,
-  thumbnailWidth = 250,
-  children,
-  ...props
-}) {
-  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = useRef(null), thumbnail = getPosterSrc({ asset, client, width: thumbnailWidth }), { src: videoSrc, error } = useMemo(() => {
-    try {
-      const src = asset?.playbackId && getVideoSrc({ client, asset });
-      return src ? { src } : { error: new TypeError("Asset has no playback ID") };
-    } catch (error2) {
-      return { error: error2 };
-    }
-  }, [asset, client]), signedToken = useMemo(() => {
-    try {
-      return new URL(videoSrc).searchParams.get("token");
-    } catch {
-      return !1;
-    }
-  }, [videoSrc]), [width, height] = (asset?.data?.aspect_ratio ?? "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
-  let aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio);
-  return isAudio && (aspectRatio = props.forceAspectRatio ? (
-    // Make it wider when forcing aspect ratio to balance with videos' rendering height (audio players overflow a bit)
-    props.forceAspectRatio * 1.2
-  ) : AUDIO_ASPECT_RATIO), /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Card, { tone: "transparent", style: { aspectRatio, position: "relative" }, children: [
-      videoSrc && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          MuxPlayer,
-          {
-            poster: thumbnail,
-            ref: muxPlayer,
-            ...props,
-            playsInline: !0,
-            playbackId: asset.playbackId,
-            tokens: signedToken ? { playback: signedToken, thumbnail: signedToken, storyboard: signedToken } : void 0,
-            preload: "metadata",
-            crossOrigin: "anonymous",
-            metadata: {
-              player_name: "Sanity Admin Dashboard",
-              player_version: "2.9.0",
-              page_type: "Preview Player"
-            },
-            audio: isAudio,
-            style: {
-              height: "100%",
-              width: "100%",
-              display: "block",
-              objectFit: "contain"
-            }
-          }
-        ),
-        children
-      ] }),
-      error ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)"
-          },
-          children: /* @__PURE__ */ jsxs(Text, { muted: !0, children: [
-            /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { marginRight: "0.15em" } }),
-            typeof error == "object" && "message" in error && typeof error.message == "string" ? error.message : "Error loading video"
-          ] })
-        }
-      ) : null,
-      children
-    ] }),
-    dialogState === "edit-thumbnail" && /* @__PURE__ */ jsx(EditThumbnailDialog, { asset, currentTime: muxPlayer?.current?.currentTime })
-  ] });
-}
-function assetIsAudio(asset) {
-  return asset.data?.max_stored_resolution === "Audio only";
-}
-function deleteAssetOnMux(client, assetId) {
-  const { dataset } = client.config();
-  return client.request({
-    url: `/addons/mux/assets/${dataset}/${assetId}`,
-    withCredentials: !0,
-    method: "DELETE"
-  });
+        )
+      ) : of()),
+      // On each iteration, persist intermediate states to give feedback to users
+      tap(
+        (pageResult) => setState((prevState) => accumulateIntermediateState(prevState, pageResult))
+      )
+    ).subscribe({
+      // Once done, let the user know we've stopped loading
+      complete: () => {
+        setState((prev) => ({
+          ...prev,
+          loading: !1
+        }));
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [enabled]), state;
 }
-async function deleteAsset({
-  client,
-  asset,
-  deleteOnMux
-}) {
-  if (!asset?._id) return !0;
-  try {
-    await client.delete(asset._id);
-  } catch {
-    return "failed-sanity";
-  }
-  if (deleteOnMux && asset?.assetId)
+function useImportMuxAssets() {
+  const documentStore = useDocumentStore(), client = useClient$1({
+    apiVersion: SANITY_API_VERSION
+  }), [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore), hasSecrets = !!useSecretsDocumentValues().value.secrets?.secretKey, [importError, setImportError] = useState(), [importState, setImportState] = useState("closed"), dialogOpen = importState !== "closed", muxAssets = useMuxAssets({
+    client,
+    enabled: hasSecrets && dialogOpen
+  }), missingAssets = useMemo(() => assetsInSanity && muxAssets.data ? muxAssets.data.filter((a2) => !assetExistsInSanity(a2, assetsInSanity)) : void 0, [assetsInSanity, muxAssets.data]), [selectedAssets, setSelectedAssets] = useState([]), closeDialog = () => {
+    importState !== "importing" && setImportState("closed");
+  }, openDialog = () => {
+    importState === "closed" && setImportState("idle");
+  };
+  async function importAssets() {
+    setImportState("importing");
+    const documents = selectedAssets.flatMap((asset) => muxAssetToSanityDocument(asset) || []), tx = client.transaction();
+    documents.forEach((doc) => tx.create(doc));
     try {
-      await deleteAssetOnMux(client, asset.assetId);
-    } catch {
-      return "failed-mux";
+      await tx.commit({ returnDocuments: !1 }), setSelectedAssets([]), setImportState("done");
+    } catch (error) {
+      setImportState("error"), setImportError(error);
     }
-  return !0;
-}
-function getAsset(client, assetId) {
-  const { dataset } = client.config();
-  return client.request({
-    url: `/addons/mux/assets/${dataset}/data/${assetId}`,
-    withCredentials: !0,
-    method: "GET"
-  });
-}
-const getUnknownTypeFallback = (id, typeName) => ({
-  title: /* @__PURE__ */ jsxs("em", { children: [
-    "No schema found for type ",
-    /* @__PURE__ */ jsx("code", { children: typeName })
-  ] }),
-  subtitle: /* @__PURE__ */ jsxs("em", { children: [
-    "Document: ",
-    /* @__PURE__ */ jsx("code", { children: id })
-  ] }),
-  media: () => /* @__PURE__ */ jsx(WarningOutlineIcon, {})
-});
-function MissingSchemaType(props) {
-  const { layout, value } = props;
-  return /* @__PURE__ */ jsx(SanityDefaultPreview, { ...getUnknownTypeFallback(value._id, value._type), layout });
+  }
+  return {
+    assetsInSanityLoading,
+    closeDialog,
+    dialogOpen,
+    importState,
+    importError,
+    hasSecrets,
+    importAssets,
+    missingAssets,
+    muxAssets,
+    openDialog,
+    selectedAssets,
+    setSelectedAssets
+  };
 }
-function TimeAgo({ time }) {
-  const timeAgo = useTimeAgo(time);
-  return /* @__PURE__ */ jsxs("span", { title: timeAgo, children: [
-    timeAgo,
-    " ago"
-  ] });
+function muxAssetToSanityDocument(asset) {
+  const playbackId = (asset.playback_ids || []).find((p) => p.id)?.id;
+  if (playbackId)
+    return {
+      _id: uuid(),
+      _type: "mux.videoAsset",
+      _updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      _createdAt: parseMuxDate(asset.created_at).toISOString(),
+      assetId: asset.id,
+      playbackId,
+      filename: asset.meta?.title ?? generateAssetPlaceholder(asset.id),
+      status: asset.status,
+      data: asset
+    };
 }
-function DraftStatus(props) {
-  const { document: document2 } = props, updatedAt = document2 && "_updatedAt" in document2 && document2._updatedAt;
-  return /* @__PURE__ */ jsx(
-    Tooltip,
+const useAssetsInSanity = createHookFromObservableFactory(
+  (documentStore) => documentStore.listenQuery(
+    /* groq */
+    `*[_type == "mux.videoAsset"] {
+      "uploadId": coalesce(uploadId, data.upload_id),
+      "assetId": coalesce(assetId, data.id),
+    }`,
+    {},
     {
-      animate: !0,
-      portal: !0,
-      content: /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, children: document2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        "Edited ",
-        updatedAt && /* @__PURE__ */ jsx(TimeAgo, { time: updatedAt })
-      ] }) : /* @__PURE__ */ jsx(Fragment, { children: "No unpublished edits" }) }) }),
-      children: /* @__PURE__ */ jsx(TextWithTone, { tone: "caution", dimmed: !document2, muted: !document2, size: 1, children: /* @__PURE__ */ jsx(EditIcon, {}) })
+      apiVersion: SANITY_API_VERSION
     }
+  )
+);
+function assetExistsInSanity(asset, existingAssets) {
+  return asset.status !== "ready" ? !1 : existingAssets.some(
+    (existing) => existing.assetId === asset.id || existing.uploadId === asset.upload_id
   );
 }
-function PublishedStatus(props) {
-  const { document: document2 } = props, updatedAt = document2 && "_updatedAt" in document2 && document2._updatedAt;
-  return /* @__PURE__ */ jsx(
-    Tooltip,
+function useInView(ref, options = {}) {
+  const [inView, setInView] = useState(!1);
+  return useEffect(() => {
+    if (!ref.current) return;
+    const observer = new IntersectionObserver(([entry], obs) => {
+      const nowInView = entry.isIntersecting && obs.thresholds.some((threshold) => entry.intersectionRatio >= threshold);
+      setInView(nowInView), options?.onChange?.(nowInView);
+    }, options), toObserve = ref.current;
+    return observer.observe(toObserve), () => {
+      toObserve && observer.unobserve(toObserve);
+    };
+  }, [options, ref]), inView;
+}
+function generateJwt(client, playbackId, aud, payload) {
+  const { signingKeyId, signingKeyPrivate } = readSecrets(client);
+  if (!signingKeyId)
+    throw new TypeError("Missing `signingKeyId`.\n Check your plugin's configuration");
+  if (!signingKeyPrivate)
+    throw new TypeError("Missing `signingKeyPrivate`.\n Check your plugin's configuration");
+  const { default: sign } = suspend(() => import("jsonwebtoken-esm/sign"), ["jsonwebtoken-esm/sign"]);
+  return sign(
+    payload ? JSON.parse(JSON.stringify(payload, (_, v) => v ?? void 0)) : {},
+    atob(signingKeyPrivate),
     {
-      animate: !0,
-      portal: !0,
-      content: /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, children: document2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        "Published ",
-        updatedAt && /* @__PURE__ */ jsx(TimeAgo, { time: updatedAt })
-      ] }) : /* @__PURE__ */ jsx(Fragment, { children: "Not published" }) }) }),
-      children: /* @__PURE__ */ jsx(TextWithTone, { tone: "positive", dimmed: !document2, muted: !document2, size: 1, children: /* @__PURE__ */ jsx(PublishIcon, {}) })
+      algorithm: "RS256",
+      keyid: signingKeyId,
+      audience: aud,
+      subject: playbackId,
+      noTimestamp: !0,
+      expiresIn: "12h"
     }
   );
 }
-function PaneItemPreview(props) {
-  const { icon, layout, presence, schemaType, value } = props, title = isRecord(value.title) && isValidElement(value.title) || isString(value.title) || isNumber(value.title) ? value.title : null, observable = useMemo(
-    () => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id, title),
-    [props.documentPreviewStore, schemaType, title, value._id]
-  ), { draft, published, isLoading } = useObservable(observable, {
-    draft: null,
-    published: null,
-    isLoading: !0
-  }), status = isLoading ? null : /* @__PURE__ */ jsxs(Inline, { space: 4, children: [
-    presence && presence.length > 0 && /* @__PURE__ */ jsx(DocumentPreviewPresence, { presence }),
-    /* @__PURE__ */ jsx(PublishedStatus, { document: published }),
-    /* @__PURE__ */ jsx(DraftStatus, { document: draft })
-  ] });
-  return /* @__PURE__ */ jsx(
-    SanityDefaultPreview,
-    {
-      ...getPreviewValueWithFallback({ value, draft, published }),
-      isPlaceholder: isLoading,
-      icon,
-      layout,
-      status
-    }
+function getPlaybackId(asset) {
+  if (!asset?.playbackId)
+    throw console.error("Asset is missing a playbackId", { asset }), new TypeError("Missing playbackId");
+  return asset.playbackId;
+}
+function getPlaybackPolicy(asset) {
+  return asset.data?.playback_ids?.find((playbackId) => asset.playbackId === playbackId.id)?.policy ?? "public";
+}
+function createUrlParamsObject(client, asset, params, audience) {
+  const playbackId = getPlaybackId(asset);
+  let searchParams = new URLSearchParams(
+    JSON.parse(JSON.stringify(params, (_, v) => v ?? void 0))
   );
+  if (getPlaybackPolicy(asset) === "signed") {
+    const token = generateJwt(client, playbackId, audience, params);
+    searchParams = new URLSearchParams({ token });
+  }
+  return { playbackId, searchParams };
 }
-function getIconWithFallback(icon, schemaType, defaultIcon) {
-  return icon === !1 ? !1 : icon || schemaType && schemaType.icon || defaultIcon || !1;
+function getAnimatedPosterSrc({
+  asset,
+  client,
+  height,
+  width,
+  start = asset.thumbTime ? Math.max(0, asset.thumbTime - 2.5) : 0,
+  end = start + 5,
+  fps = 15
+}) {
+  const params = { height, width, start, end, fps }, { playbackId, searchParams } = createUrlParamsObject(client, asset, params, "g");
+  return `https://image.mux.com/${playbackId}/animated.gif?${searchParams}`;
 }
-function DocumentPreviewLink(props) {
-  return (linkProps) => /* @__PURE__ */ jsx(IntentLink, { intent: "edit", params: { id: props.documentPair.id }, children: linkProps.children });
+function getPosterSrc({
+  asset,
+  client,
+  fit_mode,
+  height,
+  time = asset.thumbTime ?? void 0,
+  width
+}) {
+  const params = { fit_mode, height, width };
+  time !== void 0 && (params.time = time);
+  const { playbackId, searchParams } = createUrlParamsObject(client, asset, params, "t");
+  return `https://image.mux.com/${playbackId}/thumbnail.png?${searchParams}`;
 }
-function DocumentPreview(props) {
-  const { schemaType, documentPair } = props, doc = documentPair?.draft || documentPair?.published, id = documentPair.id || "", documentPreviewStore = useDocumentPreviewStore(), schema = useSchema(), documentPresence = useDocumentPresence(id), hasSchemaType = !!(schemaType && schemaType.name && schema.get(schemaType.name)), PreviewComponent = useMemo(() => doc ? !schemaType || !hasSchemaType ? /* @__PURE__ */ jsx(MissingSchemaType, { value: doc }) : /* @__PURE__ */ jsx(
-    PaneItemPreview,
-    {
-      documentPreviewStore,
-      icon: getIconWithFallback(void 0, schemaType, DocumentIcon),
-      schemaType,
-      layout: "default",
-      value: doc,
-      presence: documentPresence
+const Image = styled.img`
+  transition: opacity 0.175s ease-out 0s;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center center;
+`, STATUS_TO_TONE = {
+  loading: "transparent",
+  error: "critical",
+  loaded: "default"
+};
+function VideoThumbnail({
+  asset,
+  width,
+  staticImage = !1
+}) {
+  const ref = useRef(null), inView = useInView(ref), posterWidth = width || 250, [status, setStatus] = useState("loading"), client = useClient(), src = useMemo(() => {
+    try {
+      let thumbnail;
+      return staticImage ? thumbnail = getPosterSrc({ asset, client, width: posterWidth }) : thumbnail = getAnimatedPosterSrc({ asset, client, width: posterWidth }), thumbnail;
+    } catch {
+      status !== "error" && setStatus("error");
+      return;
     }
-  ) : null, [hasSchemaType, schemaType, documentPresence, doc, documentPreviewStore]);
+  }, [asset, client, posterWidth, status, staticImage]);
+  function handleLoad() {
+    setStatus("loaded");
+  }
+  function handleError() {
+    setStatus("error");
+  }
   return /* @__PURE__ */ jsx(
-    PreviewCard,
+    Card,
     {
-      __unstable_focusRing: !0,
-      as: DocumentPreviewLink(props),
-      "data-as": "a",
-      "data-ui": "PaneItem",
-      padding: 2,
+      style: {
+        aspectRatio: THUMBNAIL_ASPECT_RATIO,
+        position: "relative",
+        maxWidth: width ? `${width}px` : void 0,
+        width: "100%",
+        flex: 1
+      },
+      border: !0,
       radius: 2,
-      tone: "inherit",
-      children: PreviewComponent
+      ref,
+      tone: STATUS_TO_TONE[status],
+      children: inView ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        status === "loading" && /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              top: "50%",
+              transform: "translate(-50%, -50%)"
+            },
+            children: /* @__PURE__ */ jsx(Spinner, {})
+          }
+        ),
+        status === "error" && /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            space: 4,
+            style: {
+              position: "absolute",
+              width: "100%",
+              left: 0,
+              top: "50%",
+              transform: "translateY(-50%)",
+              justifyItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Text, { size: 4, muted: !0, children: /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { fontSize: "1.75em" } }) }),
+              /* @__PURE__ */ jsx(Text, { muted: !0, align: "center", children: "Failed loading thumbnail" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Image,
+          {
+            src,
+            alt: `Preview for ${staticImage ? "image" : "video"} ${asset.filename || asset.assetId}`,
+            onLoad: handleLoad,
+            onError: handleError,
+            style: { opacity: status === "loaded" ? 1 : 0 }
+          }
+        )
+      ] }) : null
     }
   );
 }
-const Container = styled(Box)`
-  * {
-    color: ${(props) => props.theme.sanity.color.base.fg};
-  }
-  a {
-    text-decoration: none;
-  }
-  h2 {
-    font-size: ${(props) => props.theme.sanity.fonts.text.sizes[1]};
+const MissingAssetCheckbox = styled(Checkbox)`
+  position: static !important;
+
+  input::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    display: block;
+    cursor: pointer;
+    z-index: 1000;
   }
-`, VideoReferences = (props) => {
-  const schema = useSchema();
-  if (!props.isLoaded)
-    return /* @__PURE__ */ jsx(SpinnerBox, {});
-  if (!props.references?.length)
-    return /* @__PURE__ */ jsx(Card, { border: !0, radius: 3, padding: 3, children: /* @__PURE__ */ jsx(Text, { size: 2, children: "No documents are using this video" }) });
-  const documentPairs = collate(props.references || []);
-  return /* @__PURE__ */ jsx(Container, { children: documentPairs?.map((documentPair) => {
-    const schemaType = schema.get(documentPair.type);
-    return /* @__PURE__ */ jsx(
-      Card,
-      {
-        marginBottom: 2,
-        padding: 2,
-        radius: 2,
-        shadow: 1,
-        style: { overflow: "hidden" },
-        children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(DocumentPreview, { documentPair, schemaType }) })
-      },
-      documentPair.id
-    );
-  }) });
-};
-function DeleteDialog({
+`;
+function MissingAsset({
   asset,
-  references,
-  referencesLoading,
-  cancelDelete,
-  succeededDeleting
+  selectAsset,
+  selected
 }) {
-  const client = useClient(), [state, setState] = useState("checkingReferences"), [deleteOnMux, setDeleteOnMux] = useState(!0), toast = useToast();
-  useEffect(() => {
-    state !== "checkingReferences" || referencesLoading || setState(references?.length ? "cantDelete" : "confirm");
-  }, [state, references, referencesLoading]);
-  async function confirmDelete() {
-    if (state !== "confirm") return;
-    setState("processing_deletion");
-    const worked = await deleteAsset({ client, asset, deleteOnMux });
-    worked === !0 ? (toast.push({ title: "Successfully deleted video", status: "success" }), succeededDeleting()) : worked === "failed-mux" ? (toast.push({
-      title: "Deleted video in Sanity",
-      description: "But it wasn't deleted in Mux",
-      status: "warning"
-    }), succeededDeleting()) : (toast.push({ title: "Failed deleting video", status: "error" }), setState("error_deleting"));
-  }
+  const duration = useFormattedDuration(asset.duration * 1e3);
   return /* @__PURE__ */ jsx(
-    Dialog,
+    Card,
     {
-      animate: !0,
-      header: "Delete video",
-      zOffset: DIALOGS_Z_INDEX,
-      id: "deleting-video-details-dialog",
-      onClose: cancelDelete,
-      onClickOutside: cancelDelete,
-      width: 1,
-      position: "fixed",
-      children: /* @__PURE__ */ jsx(
-        Card,
-        {
-          padding: 3,
-          style: {
-            minHeight: "150px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-            state === "checkingReferences" && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Checking if video can be deleted" }),
-              /* @__PURE__ */ jsx(SpinnerBox, {})
-            ] }),
-            state === "cantDelete" && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Video can't be deleted" }),
-              /* @__PURE__ */ jsxs(Text, { size: 2, style: { marginBottom: "2rem" }, children: [
-                "There are ",
-                references?.length,
-                " document",
-                references && references.length > 0 && "s",
-                " ",
-                "pointing to this video. Remove their references to this file or delete them before proceeding."
-              ] }),
-              /* @__PURE__ */ jsx(VideoReferences, { references, isLoaded: !referencesLoading })
-            ] }),
-            state === "confirm" && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Are you sure you want to delete this video?" }),
-              /* @__PURE__ */ jsx(Text, { size: 2, children: "This action is irreversible" }),
-              /* @__PURE__ */ jsxs(Stack, { space: 4, marginY: 4, children: [
-                /* @__PURE__ */ jsxs(Flex, { align: "center", as: "label", children: [
-                  /* @__PURE__ */ jsx(
-                    Checkbox,
-                    {
-                      checked: deleteOnMux,
-                      onChange: () => setDeleteOnMux((prev) => !prev)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(Text, { style: { margin: "0 10px" }, children: "Delete asset on Mux" })
-                ] }),
-                /* @__PURE__ */ jsxs(Flex, { align: "center", as: "label", children: [
-                  /* @__PURE__ */ jsx(Checkbox, { disabled: !0, checked: !0 }),
-                  /* @__PURE__ */ jsx(Text, { style: { margin: "0 10px" }, children: "Delete video from dataset" })
-                ] }),
-                /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    icon: TrashIcon,
-                    fontSize: 2,
-                    padding: 3,
-                    text: "Delete video",
-                    tone: "critical",
-                    onClick: confirmDelete,
-                    disabled: ["processing_deletion", "checkingReferences", "cantDelete"].some(
-                      (s) => s === state
-                    )
-                  }
-                ) })
-              ] })
-            ] }),
-            state === "processing_deletion" && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Deleting video..." }),
-              /* @__PURE__ */ jsx(SpinnerBox, {})
-            ] }),
-            state === "error_deleting" && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Something went wrong!" }),
-              /* @__PURE__ */ jsx(Text, { size: 2, children: "Try deleting the video again by clicking the button below" })
+      tone: selected ? "positive" : void 0,
+      border: !0,
+      paddingX: 2,
+      paddingY: 3,
+      style: { position: "relative" },
+      radius: 1,
+      children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx(
+          MissingAssetCheckbox,
+          {
+            checked: selected,
+            onChange: (e) => {
+              selectAsset(e.currentTarget.checked);
+            },
+            "aria-label": selected ? `Import video ${asset.id}` : `Skip import of video ${asset.id}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          VideoThumbnail,
+          {
+            asset: {
+              assetId: asset.id,
+              data: asset,
+              filename: asset.id,
+              playbackId: asset.playback_ids.find((p) => p.id)?.id
+            },
+            width: 150
+          }
+        ),
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 1, children: [
+            /* @__PURE__ */ jsx(Code, { size: 2, children: truncateString(asset.id, 15) }),
+            " ",
+            /* @__PURE__ */ jsxs(Text, { muted: !0, size: 2, children: [
+              "(",
+              duration.formatted,
+              ")"
             ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+            "Uploaded at",
+            " ",
+            new Date(Number(asset.created_at) * 1e3).toLocaleDateString("en", {
+              year: "numeric",
+              day: "2-digit",
+              month: "2-digit"
+            })
           ] })
-        }
-      )
-    }
+        ] })
+      ] })
+    },
+    asset.id
   );
 }
-const useDocReferences = createHookFromObservableFactory(({ documentStore, id }) => documentStore.listenQuery(
-  /* groq */
-  "*[references($id)]{_id, _type, _rev, _updatedAt, _createdAt}",
-  { id },
-  {
-    apiVersion: SANITY_API_VERSION
-  }
-));
-function getVideoMetadata(doc) {
-  const id = doc.assetId || doc._id || "", date = doc.data?.created_at ? new Date(Number(doc.data.created_at) * 1e3) : new Date(doc._createdAt || doc._updatedAt || Date.now());
-  return {
-    title: doc.filename || id.slice(0, 12),
-    id,
-    playbackId: doc.playbackId,
-    createdAt: date,
-    duration: doc.data?.duration ? formatSeconds(doc.data?.duration) : void 0,
-    aspect_ratio: doc.data?.aspect_ratio,
-    max_stored_resolution: doc.data?.max_stored_resolution,
-    max_stored_frame_rate: doc.data?.max_stored_frame_rate
-  };
-}
-function useVideoDetails(props) {
-  const documentStore = useDocumentStore(), toast = useToast(), client = useClient(), [references, referencesLoading] = useDocReferences(
-    useMemo(() => ({ documentStore, id: props.asset._id }), [documentStore, props.asset._id])
-  ), [originalAsset, setOriginalAsset] = useState(() => props.asset), [filename, setFilename] = useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata({ ...props.asset, filename }), [state, setState] = useState("idle");
-  function handleClose() {
-    if (state === "idle") {
-      if (modified) {
-        setState("closing");
-        return;
-      }
-      props.closeDialog();
-    }
-  }
-  function confirmClose(shouldClose) {
-    state === "closing" && (shouldClose && props.closeDialog(), setState("idle"));
-  }
-  async function saveChanges() {
-    if (state === "idle") {
-      setState("saving");
-      try {
-        await client.patch(props.asset._id).set({ filename }).commit(), setOriginalAsset((prev) => ({ ...prev, filename })), toast.push({
-          title: "Video title updated",
-          description: `New title: ${filename}`,
-          status: "success"
-        }), props.closeDialog();
-      } catch (error) {
-        toast.push({
-          title: "Failed updating file name",
-          status: "error",
-          description: typeof error == "string" ? error : "Please try again"
-        }), setFilename(originalAsset.filename);
-      }
-      setState("idle");
-    }
-  }
-  return {
-    references,
-    referencesLoading,
-    modified,
-    filename,
-    setFilename,
-    displayInfo,
-    state,
-    setState,
-    handleClose,
-    confirmClose,
-    saveChanges
-  };
-}
-const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.label, description: props.description, inputId: props.label, children: /* @__PURE__ */ jsx(
-  TextInput,
-  {
-    id: props.label,
-    value: props.value,
-    placeholder: props.placeholder,
-    onInput: props.onInput,
-    disabled: props.disabled
-  }
-) }), VideoDetails = (props) => {
-  const [tab, setTab] = useState("details"), {
-    displayInfo,
-    filename,
-    modified,
-    references,
-    referencesLoading,
-    setFilename,
-    state,
-    setState,
-    handleClose,
-    confirmClose,
-    saveChanges
-  } = useVideoDetails(props), isSaving = state === "saving", [containerHeight, setContainerHeight] = useState(null), contentsRef = React.useRef(null);
-  return useEffect(() => {
-    !contentsRef.current || !("getBoundingClientRect" in contentsRef.current) || setContainerHeight(contentsRef.current.getBoundingClientRect().height);
-  }, []), /* @__PURE__ */ jsxs(
+function ImportVideosDialog(props) {
+  const { importState } = props, canTriggerImport = (importState === "idle" || importState === "error") && props.selectedAssets.length > 0, isImporting = importState === "importing", noAssetsToImport = props.missingAssets?.length === 0 && !props.muxAssets.loading && !props.assetsInSanityLoading;
+  return /* @__PURE__ */ jsx(
     Dialog,
     {
       animate: !0,
-      header: displayInfo.title,
+      header: "Import videos from Mux",
       zOffset: DIALOGS_Z_INDEX,
       id: "video-details-dialog",
-      onClose: handleClose,
-      onClickOutside: handleClose,
-      width: 2,
+      onClose: props.closeDialog,
+      onClickOutside: props.closeDialog,
+      width: 1,
       position: "fixed",
-      footer: /* @__PURE__ */ jsx(Card, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
+      footer: importState !== "done" && !noAssetsToImport && /* @__PURE__ */ jsx(Card, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
         /* @__PURE__ */ jsx(
           Button,
           {
-            icon: TrashIcon,
             fontSize: 2,
             padding: 3,
-            mode: "bleed",
-            text: "Delete",
+            mode: "ghost",
+            text: "Cancel",
             tone: "critical",
-            onClick: () => setState("deleting"),
-            disabled: isSaving
+            onClick: props.closeDialog,
+            disabled: isImporting
           }
         ),
-        modified && /* @__PURE__ */ jsx(
+        props.missingAssets && /* @__PURE__ */ jsx(
           Button,
           {
-            icon: CheckmarkIcon,
+            icon: RetrieveIcon,
             fontSize: 2,
             padding: 3,
             mode: "ghost",
-            text: "Save and close",
+            text: props.selectedAssets?.length > 0 ? `Import ${props.selectedAssets.length} video(s)` : "No video(s) selected",
             tone: "positive",
-            onClick: saveChanges,
-            iconRight: isSaving && Spinner,
-            disabled: isSaving
+            onClick: props.importAssets,
+            iconRight: isImporting && Spinner,
+            disabled: !canTriggerImport
           }
         )
       ] }) }),
-      children: [
-        state === "deleting" && /* @__PURE__ */ jsx(
-          DeleteDialog,
-          {
-            asset: props.asset,
-            cancelDelete: () => setState("idle"),
-            referencesLoading,
-            references,
-            succeededDeleting: () => {
-              props.closeDialog();
-            }
-          }
-        ),
-        state === "closing" && /* @__PURE__ */ jsx(
-          Dialog,
-          {
-            animate: !0,
-            header: "You have unsaved changes",
-            zOffset: DIALOGS_Z_INDEX,
-            id: "closing-video-details-dialog",
-            onClose: () => confirmClose(!1),
-            onClickOutside: () => confirmClose(!1),
-            width: 1,
-            position: "fixed",
-            footer: /* @__PURE__ */ jsx(Card, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  icon: ErrorOutlineIcon,
-                  fontSize: 2,
-                  padding: 3,
-                  text: "Discard changes",
-                  tone: "critical",
-                  onClick: () => confirmClose(!0)
-                }
-              ),
-              modified && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  icon: RevertIcon,
-                  fontSize: 2,
-                  padding: 3,
-                  mode: "ghost",
-                  text: "Keep editing",
-                  tone: "primary",
-                  onClick: () => confirmClose(!1)
-                }
-              )
-            ] }) }),
-            children: /* @__PURE__ */ jsx(Card, { padding: 5, children: /* @__PURE__ */ jsxs(Stack, { style: { textAlign: "center" }, space: 3, children: [
-              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Unsaved changes will be lost" }),
-              /* @__PURE__ */ jsx(Text, { size: 2, children: "Are you sure you want to discard them?" })
-            ] }) })
-          }
-        ),
+      children: /* @__PURE__ */ jsxs(Box, { padding: 3, children: [
+        props.muxAssets.hasSkippedAssetsWithoutPlayback && /* @__PURE__ */ jsx(Card, { tone: "caution", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx(InfoOutlineIcon, { fontSize: 36 }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "Some videos were skipped" }),
+            /* @__PURE__ */ jsx(Text, { size: 1, children: "Videos without playback IDs cannot be imported and have been excluded from the list." })
+          ] })
+        ] }) }),
+        (props.muxAssets.loading || props.assetsInSanityLoading) && /* @__PURE__ */ jsx(Card, { tone: "primary", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+          /* @__PURE__ */ jsx(Spinner, { muted: !0, size: 4 }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "Loading assets from Mux" }),
+            /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+              "This may take a while.",
+              props.missingAssets && props.missingAssets.length > 0 && ` There are at least ${props.missingAssets.length} video${props.missingAssets.length > 1 ? "s" : ""} currently not in Sanity...`
+            ] })
+          ] })
+        ] }) }),
+        props.muxAssets.error && /* @__PURE__ */ jsx(Card, { tone: "critical", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "There was an error getting all data from Mux" }),
+            /* @__PURE__ */ jsx(Text, { size: 1, children: props.missingAssets ? `But we've found ${props.missingAssets.length} video${props.missingAssets.length > 1 ? "s" : ""} not in Sanity, which you can start importing now.` : "Please try again or contact a developer for help." })
+          ] })
+        ] }) }),
+        importState === "importing" && /* @__PURE__ */ jsx(Card, { tone: "primary", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+          /* @__PURE__ */ jsx(Spinner, { muted: !0, size: 4 }),
+          /* @__PURE__ */ jsx(Stack, { space: 2, children: /* @__PURE__ */ jsxs(Text, { size: 2, weight: "semibold", children: [
+            "Importing ",
+            props.selectedAssets.length,
+            " video",
+            props.selectedAssets.length > 1 && "s",
+            " from Mux"
+          ] }) })
+        ] }) }),
+        importState === "error" && /* @__PURE__ */ jsx(Card, { tone: "critical", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "There was an error importing videos" }),
+            /* @__PURE__ */ jsx(Text, { size: 1, children: props.importError ? `Error: ${props.importError}` : "Please try again or contact a developer for help." }),
+            /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: RetryIcon,
+                text: "Retry",
+                tone: "primary",
+                onClick: props.importAssets
+              }
+            ) })
+          ] })
+        ] }) }),
+        (noAssetsToImport || importState === "done") && /* @__PURE__ */ jsxs(Stack, { paddingY: 5, marginBottom: 4, space: 3, style: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(CheckmarkCircleIcon, { fontSize: 48 }) }),
+          /* @__PURE__ */ jsx(Heading, { size: 2, children: importState === "done" ? "Videos imported successfully" : "There are no Mux videos to import" }),
+          /* @__PURE__ */ jsx(Text, { size: 2, children: importState === "done" ? "You can now use them in your Sanity content." : "They're all in Sanity and ready to be used in your content." })
+        ] }),
+        props.missingAssets && props.missingAssets.length > 0 && (importState === "idle" || importState === "error") && /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
+          /* @__PURE__ */ jsxs(Heading, { size: 1, children: [
+            "There are ",
+            props.missingAssets.length,
+            props.muxAssets.loading && "+",
+            " Mux video",
+            props.missingAssets.length > 1 && "s",
+            " ",
+            "not in Sanity"
+          ] }),
+          !props.muxAssets.loading && /* @__PURE__ */ jsxs(Flex, { align: "center", paddingX: 2, children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                id: "import-all",
+                style: { display: "block" },
+                onClick: (e) => {
+                  e.currentTarget.checked ? props.missingAssets && props.setSelectedAssets(props.missingAssets) : props.setSelectedAssets([]);
+                },
+                checked: props.selectedAssets.length === props.missingAssets.length
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { flex: 1, paddingLeft: 3, as: "label", htmlFor: "import-all", children: /* @__PURE__ */ jsx(Text, { children: "Import all" }) })
+          ] }),
+          props.missingAssets.map((asset) => /* @__PURE__ */ jsx(
+            MissingAsset,
+            {
+              asset,
+              selectAsset: (selected) => {
+                selected ? props.setSelectedAssets([...props.selectedAssets, asset]) : props.setSelectedAssets(props.selectedAssets.filter((a2) => a2.id !== asset.id));
+              },
+              selected: props.selectedAssets.some((a2) => a2.id === asset.id)
+            },
+            asset.id
+          ))
+        ] })
+      ] })
+    }
+  );
+}
+function ImportVideosFromMux() {
+  const importAssets = useImportMuxAssets();
+  if (importAssets.hasSecrets)
+    return importAssets.dialogOpen ? /* @__PURE__ */ jsx(ImportVideosDialog, { ...importAssets }) : /* @__PURE__ */ jsx(Button, { mode: "bleed", text: "Import from Mux", onClick: importAssets.openDialog });
+}
+function useResyncMuxMetadata() {
+  const documentStore = useDocumentStore(), client = useClient$1({
+    apiVersion: SANITY_API_VERSION
+  }), [sanityAssets, sanityAssetsLoading] = useSanityAssets(documentStore), hasSecrets = !!useSecretsDocumentValues().value.secrets?.secretKey, [resyncError, setResyncError] = useState(), [resyncState, setResyncState] = useState("closed"), dialogOpen = resyncState !== "closed", muxAssets = useMuxAssets({
+    client,
+    enabled: hasSecrets && dialogOpen
+  }), matchedAssets = useMemo(() => sanityAssets && muxAssets.data ? sanityAssets.map((sanityDoc) => {
+    const muxAsset = muxAssets.data?.find(
+      (m) => m.id === sanityDoc.assetId || m.id === sanityDoc.data?.id
+    );
+    return {
+      sanityDoc,
+      muxAsset,
+      muxTitle: muxAsset?.meta?.title,
+      currentTitle: sanityDoc.filename
+    };
+  }) : void 0, [sanityAssets, muxAssets.data]), closeDialog = () => {
+    resyncState !== "syncing" && setResyncState("closed");
+  }, openDialog = () => {
+    resyncState === "closed" && setResyncState("idle");
+  };
+  async function syncAllVideos() {
+    if (matchedAssets) {
+      setResyncState("syncing");
+      try {
+        const tx = client.transaction();
+        matchedAssets.forEach((matched) => {
+          const newTitle = matched.muxTitle || "";
+          tx.patch(matched.sanityDoc._id, { set: { filename: newTitle } });
+        }), await tx.commit({ returnDocuments: !1 }), setResyncState("done");
+      } catch (error) {
+        setResyncState("error"), setResyncError(error);
+      }
+    }
+  }
+  async function syncOnlyEmpty() {
+    if (matchedAssets) {
+      setResyncState("syncing");
+      try {
+        const tx = client.transaction();
+        matchedAssets.forEach((matched) => {
+          matched.muxAsset && matched.muxTitle && isEmptyOrPlaceholderTitle(matched.currentTitle, matched.muxAsset.id) && tx.patch(matched.sanityDoc._id, { set: { filename: matched.muxTitle } });
+        }), await tx.commit({ returnDocuments: !1 }), setResyncState("done");
+      } catch (error) {
+        setResyncState("error"), setResyncError(error);
+      }
+    }
+  }
+  return {
+    sanityAssetsLoading,
+    closeDialog,
+    dialogOpen,
+    resyncState,
+    resyncError,
+    hasSecrets,
+    syncAllVideos,
+    syncOnlyEmpty,
+    matchedAssets,
+    muxAssets,
+    openDialog
+  };
+}
+const useSanityAssets = createHookFromObservableFactory(
+  (documentStore) => documentStore.listenQuery(
+    /* groq */
+    '*[_type == "mux.videoAsset"]',
+    {},
+    {
+      apiVersion: SANITY_API_VERSION
+    }
+  )
+);
+function ResyncMetadataDialog(props) {
+  const { resyncState } = props, canTriggerResync = resyncState === "idle" || resyncState === "error", isResyncing = resyncState === "syncing", isDone = resyncState === "done", videosToUpdate = props.matchedAssets?.filter((m) => m.muxAsset).length || 0, videosWithEmptyOrPlaceholder = props.matchedAssets?.filter(
+    (m) => m.muxAsset && m.muxTitle && isEmptyOrPlaceholderTitle(m.currentTitle, m.muxAsset.id)
+  ).length || 0;
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      animate: !0,
+      header: "Resync Metadata from Mux",
+      zOffset: DIALOGS_Z_INDEX,
+      id: "resync-metadata-dialog",
+      onClose: props.closeDialog,
+      onClickOutside: props.closeDialog,
+      width: 1,
+      position: "fixed",
+      footer: !isDone && /* @__PURE__ */ jsx(Card, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
         /* @__PURE__ */ jsx(
-          Card,
+          Button,
           {
-            padding: 4,
-            sizing: "border",
-            style: {
-              containerType: "inline-size"
-            },
-            children: /* @__PURE__ */ jsxs(
-              Flex,
-              {
-                sizing: "border",
-                gap: 4,
-                direction: ["column", "column", "row"],
-                align: "flex-start",
-                ref: contentsRef,
-                style: typeof containerHeight == "number" ? {
-                  minHeight: containerHeight
-                } : void 0,
-                children: [
-                  /* @__PURE__ */ jsx(Stack, { space: 4, flex: 1, sizing: "border", children: /* @__PURE__ */ jsx(VideoPlayer, { asset: props.asset, autoPlay: props.asset.autoPlay || !1 }) }),
-                  /* @__PURE__ */ jsxs(Stack, { space: 4, flex: 1, sizing: "border", children: [
-                    /* @__PURE__ */ jsxs(TabList, { space: 2, children: [
-                      /* @__PURE__ */ jsx(
-                        Tab,
-                        {
-                          "aria-controls": "details-panel",
-                          icon: EditIcon,
-                          id: "details-tab",
-                          label: "Details",
-                          onClick: () => setTab("details"),
-                          selected: tab === "details"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Tab,
-                        {
-                          "aria-controls": "references-panel",
-                          icon: SearchIcon,
-                          id: "references-tab",
-                          label: `Used by ${references ? `(${references.length})` : ""}`,
-                          onClick: () => setTab("references"),
-                          selected: tab === "references"
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      TabPanel,
-                      {
-                        "aria-labelledby": "details-tab",
-                        id: "details-panel",
-                        hidden: tab !== "details",
-                        style: { wordBreak: "break-word" },
-                        children: /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
-                          /* @__PURE__ */ jsx(
-                            AssetInput,
-                            {
-                              label: "Video title or file name",
-                              description: "Not visible to users. Useful for finding videos later.",
-                              value: filename || "",
-                              onInput: (e) => setFilename(e.currentTarget.value),
-                              disabled: state !== "idle"
-                            }
-                          ),
-                          /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-                            displayInfo?.duration && /* @__PURE__ */ jsx(
-                              IconInfo,
-                              {
-                                text: `Duration: ${displayInfo.duration}`,
-                                icon: ClockIcon,
-                                size: 2
-                              }
-                            ),
-                            displayInfo?.max_stored_resolution && /* @__PURE__ */ jsx(
-                              IconInfo,
-                              {
-                                text: `Max Resolution: ${displayInfo.max_stored_resolution}`,
-                                icon: ResolutionIcon,
-                                size: 2
-                              }
-                            ),
-                            displayInfo?.max_stored_frame_rate && /* @__PURE__ */ jsx(
-                              IconInfo,
-                              {
-                                text: `Frame rate: ${displayInfo.max_stored_frame_rate}`,
-                                icon: StopWatchIcon,
-                                size: 2
-                              }
-                            ),
-                            displayInfo?.aspect_ratio && /* @__PURE__ */ jsx(
-                              IconInfo,
-                              {
-                                text: `Aspect Ratio: ${displayInfo.aspect_ratio}`,
-                                icon: CropIcon,
-                                size: 2
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              IconInfo,
-                              {
-                                text: `Uploaded on: ${displayInfo.createdAt.toLocaleDateString("en", {
-                                  year: "numeric",
-                                  month: "2-digit",
-                                  day: "2-digit",
-                                  hour: "2-digit",
-                                  minute: "2-digit",
-                                  hour12: !0
-                                })}`,
-                                icon: CalendarIcon,
-                                size: 2
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(IconInfo, { text: `Mux ID: 
-${displayInfo.id}`, icon: TagIcon, size: 2 }),
-                            displayInfo?.playbackId && /* @__PURE__ */ jsx(
-                              IconInfo,
-                              {
-                                text: `Playback ID: ${displayInfo.playbackId}`,
-                                icon: TagIcon,
-                                size: 2
-                              }
-                            )
-                          ] })
-                        ] })
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      TabPanel,
-                      {
-                        "aria-labelledby": "references-tab",
-                        id: "references-panel",
-                        hidden: tab !== "references",
-                        children: /* @__PURE__ */ jsx(VideoReferences, { references, isLoaded: !referencesLoading })
-                      }
+            fontSize: 2,
+            padding: 3,
+            mode: "ghost",
+            text: "Cancel",
+            tone: "critical",
+            onClick: props.closeDialog,
+            disabled: isResyncing
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          videosWithEmptyOrPlaceholder > 0 && /* @__PURE__ */ jsx(
+            Button,
+            {
+              fontSize: 2,
+              padding: 3,
+              mode: "ghost",
+              text: `Update empty (${videosWithEmptyOrPlaceholder})`,
+              tone: "caution",
+              onClick: props.syncOnlyEmpty,
+              disabled: isResyncing || !canTriggerResync
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: SyncIcon,
+              fontSize: 2,
+              padding: 3,
+              mode: "ghost",
+              text: `Update all (${videosToUpdate})`,
+              tone: "positive",
+              onClick: props.syncAllVideos,
+              iconRight: isResyncing && Spinner,
+              disabled: !canTriggerResync
+            }
+          )
+        ] })
+      ] }) }),
+      children: /* @__PURE__ */ jsxs(Box, { padding: 4, children: [
+        (props.muxAssets.loading || props.sanityAssetsLoading) && /* @__PURE__ */ jsx(Card, { tone: "primary", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+          /* @__PURE__ */ jsx(Spinner, { muted: !0, size: 4 }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "Loading assets from Mux" }),
+            /* @__PURE__ */ jsx(Text, { size: 1, children: "This may take a while." })
+          ] })
+        ] }) }),
+        props.muxAssets.error && /* @__PURE__ */ jsx(Card, { tone: "critical", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "There was an error getting data from Mux" }),
+            /* @__PURE__ */ jsx(Text, { size: 1, children: "Please try again or contact a developer for help." })
+          ] })
+        ] }) }),
+        resyncState === "syncing" && /* @__PURE__ */ jsx(Card, { tone: "primary", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+          /* @__PURE__ */ jsx(Spinner, { muted: !0, size: 4 }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "Updating video metadata" }),
+            /* @__PURE__ */ jsx(Text, { size: 1, children: "Syncing titles from Mux..." })
+          ] })
+        ] }) }),
+        resyncState === "error" && /* @__PURE__ */ jsx(Card, { tone: "critical", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "There was an error syncing metadata" }),
+            /* @__PURE__ */ jsx(Text, { size: 1, children: props.resyncError ? `Error: ${props.resyncError}` : "Please try again or contact a developer for help." })
+          ] })
+        ] }) }),
+        resyncState === "done" && /* @__PURE__ */ jsxs(Stack, { paddingY: 5, marginBottom: 4, space: 3, style: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(CheckmarkCircleIcon, { fontSize: 48 }) }),
+          /* @__PURE__ */ jsx(Heading, { size: 2, children: "Metadata synced successfully" }),
+          /* @__PURE__ */ jsx(Text, { size: 2, children: "All video titles have been updated from Mux." })
+        ] }),
+        resyncState === "idle" && !props.muxAssets.loading && !props.sanityAssetsLoading && /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
+          /* @__PURE__ */ jsxs(Heading, { size: 1, children: [
+            "There ",
+            videosToUpdate === 1 ? "is" : "are",
+            " ",
+            videosToUpdate,
+            " video",
+            videosToUpdate === 1 ? "" : "s",
+            " with Mux metadata"
+          ] }),
+          /* @__PURE__ */ jsx(Text, { size: 2, children: "This will update video titles in Sanity to match those in Mux. No new videos will be created." }),
+          videosWithEmptyOrPlaceholder > 0 && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "caution", border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "flex-start", gap: 2, children: [
+            /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(ErrorOutlineIcon, {}) }),
+            /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+              /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "Videos with empty or placeholder titles" }),
+              /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
+                videosWithEmptyOrPlaceholder,
+                " video",
+                videosWithEmptyOrPlaceholder === 1 ? "" : "s",
+                ' without titles or with placeholder titles (e.g., "Asset #123") can be updated selectively.'
+              ] })
+            ] })
+          ] }) })
+        ] })
+      ] })
+    }
+  );
+}
+function ResyncMetadata() {
+  const resyncMetadata = useResyncMuxMetadata();
+  if (resyncMetadata.hasSecrets)
+    return resyncMetadata.dialogOpen ? /* @__PURE__ */ jsx(ResyncMetadataDialog, { ...resyncMetadata }) : /* @__PURE__ */ jsx(Button, { mode: "bleed", text: "Resync Metadata", onClick: resyncMetadata.openDialog });
+}
+const CONTEXT_MENU_POPOVER_PROPS = {
+  constrainSize: !0,
+  placement: "bottom",
+  portal: !0,
+  width: 0
+};
+function SelectSortOptions(props) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(
+    MenuButton,
+    {
+      button: /* @__PURE__ */ jsx(Button, { text: "Sort", icon: SortIcon, mode: "bleed", padding: 3, style: { cursor: "pointer" } }),
+      id,
+      menu: /* @__PURE__ */ jsx(Menu, { children: Object.entries(ASSET_SORT_OPTIONS).map(([type, { label }]) => /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          "data-as": "button",
+          onClick: () => props.setSort(type),
+          padding: 3,
+          tone: "default",
+          text: label,
+          pressed: type === props.sort
+        },
+        type
+      )) }),
+      popover: CONTEXT_MENU_POPOVER_PROPS
+    }
+  );
+}
+const SpinnerBox = () => /* @__PURE__ */ jsx(
+  Box,
+  {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minHeight: "150px"
+    },
+    children: /* @__PURE__ */ jsx(Spinner, {})
+  }
+), IconInfo = (props) => {
+  const Icon = props.icon;
+  return /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "center", padding: 1, children: [
+    /* @__PURE__ */ jsx(Text, { size: (props.size || 1) + 1, muted: !0, children: /* @__PURE__ */ jsx(Icon, {}) }),
+    /* @__PURE__ */ jsx(Text, { size: props.size || 1, muted: props.muted, children: props.text })
+  ] });
+};
+function ResolutionIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M20 9V6h-3V4h5v5h-2ZM2 9V4h5v2H4v3H2Zm15 11v-2h3v-3h2v5h-5ZM2 20v-5h2v3h3v2H2Zm4-4V8h12v8H6Zm2-2h8v-4H8v4Zm0 0v-4v4Z"
+    }
+  ) });
+}
+function StopWatchIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 512 512",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M232 306.667h48V176h-48v130.667z", fill: "currentColor" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M407.67 170.271l30.786-30.786-33.942-33.941-30.785 30.786C341.217 111.057 300.369 96 256 96 149.961 96 64 181.961 64 288s85.961 192 192 192 192-85.961 192-192c0-44.369-15.057-85.217-40.33-117.729zm-45.604 223.795C333.734 422.398 296.066 438 256 438s-77.735-15.602-106.066-43.934C121.602 365.735 106 328.066 106 288s15.602-77.735 43.934-106.066C178.265 153.602 215.934 138 256 138s77.734 15.602 106.066 43.934C390.398 210.265 406 247.934 406 288s-15.602 77.735-43.934 106.066z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "M192 32h128v48H192z", fill: "currentColor" })
+      ]
+    }
+  );
+}
+const DialogStateContext = createContext({
+  dialogState: !1,
+  setDialogState: () => null
+}), DialogStateProvider = ({
+  dialogState,
+  setDialogState,
+  children
+}) => /* @__PURE__ */ jsx(DialogStateContext.Provider, { value: { dialogState, setDialogState }, children }), useDialogStateContext = () => useContext(DialogStateContext);
+function getVideoSrc({ asset, client }) {
+  const playbackId = getPlaybackId(asset), searchParams = new URLSearchParams();
+  if (getPlaybackPolicy(asset) === "signed") {
+    const token = generateJwt(client, playbackId, "v");
+    searchParams.set("token", token);
+  }
+  return `https://stream.mux.com/${playbackId}.m3u8?${searchParams}`;
+}
+function getDevicePixelRatio(options) {
+  const {
+    defaultDpr = 1,
+    maxDpr = 3,
+    round = !0
+  } = options || {}, dpr = typeof window < "u" && typeof window.devicePixelRatio == "number" ? window.devicePixelRatio : defaultDpr;
+  return Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
+}
+function formatSeconds(seconds) {
+  if (typeof seconds != "number" || Number.isNaN(seconds))
+    return "";
+  const hrs = ~~(seconds / 3600), mins = ~~(seconds % 3600 / 60), secs = ~~seconds % 60;
+  let ret = "";
+  return hrs > 0 && (ret += "" + hrs + ":" + (mins < 10 ? "0" : "")), ret += "" + mins + ":" + (secs < 10 ? "0" : ""), ret += "" + secs, ret;
+}
+function formatSecondsToHHMMSS(seconds) {
+  const hrs = Math.floor(seconds / 3600).toString().padStart(2, "0"), mins = Math.floor(seconds % 3600 / 60).toString().padStart(2, "0"), secs = Math.floor(seconds % 60).toString().padStart(2, "0");
+  return `${hrs}:${mins}:${secs}`;
+}
+function isValidTimeFormat(time) {
+  return /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9]):([0-5]?[0-9])$/.test(time) || time === "";
+}
+function getSecondsFromTimeFormat(time) {
+  const [hh = 0, mm = 0, ss = 0] = time.split(":").map(Number);
+  return hh * 3600 + mm * 60 + ss;
+}
+function EditThumbnailDialog({ asset, currentTime = 0 }) {
+  const client = useClient(), { setDialogState } = useDialogStateContext(), dialogId = `EditThumbnailDialog${useId()}`, [timeFormatted, setTimeFormatted] = useState(
+    () => formatSecondsToHHMMSS(currentTime)
+  ), [nextTime, setNextTime] = useState(currentTime), [inputError, setInputError] = useState(""), assetWithNewThumbnail = useMemo(() => ({ ...asset, thumbTime: nextTime }), [asset, nextTime]), [saving, setSaving] = useState(!1), [saveThumbnailError, setSaveThumbnailError] = useState(null), handleSave = () => {
+    setSaving(!0), client.patch(asset._id).set({ thumbTime: nextTime }).commit({ returnDocuments: !1 }).then(() => void setDialogState(!1)).catch(setSaveThumbnailError).finally(() => void setSaving(!1));
+  }, width = 300 * getDevicePixelRatio({ maxDpr: 2 });
+  if (saveThumbnailError)
+    throw saveThumbnailError;
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      id: dialogId,
+      header: "Edit thumbnail",
+      onClose: () => setDialogState(!1),
+      footer: /* @__PURE__ */ jsx(Stack, { padding: 3, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: inputError !== "",
+          mode: "ghost",
+          tone: "primary",
+          loading: saving,
+          onClick: handleSave,
+          text: "Set new thumbnail"
+        },
+        "thumbnail"
+      ) }),
+      children: /* @__PURE__ */ jsxs(Stack, { space: 3, padding: 3, children: [
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Current:" }),
+          /* @__PURE__ */ jsx(VideoThumbnail, { asset, width, staticImage: !0 })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "New:" }),
+          /* @__PURE__ */ jsx(VideoThumbnail, { asset: assetWithNewThumbnail, width, staticImage: !0 })
+        ] }),
+        /* @__PURE__ */ jsx(Stack, { space: 2, children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsx(Text, { size: 5, weight: "semibold", children: "Or" }) }) }),
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Selected time for thumbnail (hh:mm:ss):" }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              size: 1,
+              value: timeFormatted,
+              placeholder: "hh:mm:ss",
+              onChange: (event) => {
+                const value = event.currentTarget.value;
+                if (setTimeFormatted(value), isValidTimeFormat(value)) {
+                  setInputError("");
+                  const totalSeconds = getSecondsFromTimeFormat(value);
+                  setNextTime(totalSeconds);
+                } else
+                  setInputError("Invalid time format");
+              },
+              customValidity: inputError
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function VideoPlayer({
+  asset,
+  thumbnailWidth = 250,
+  children,
+  ...props
+}) {
+  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = useRef(null), thumbnail = getPosterSrc({ asset, client, width: thumbnailWidth }), { src: videoSrc, error } = useMemo(() => {
+    try {
+      const src = asset?.playbackId && getVideoSrc({ client, asset });
+      return src ? { src } : { error: new TypeError("Asset has no playback ID") };
+    } catch (error2) {
+      return { error: error2 };
+    }
+  }, [asset, client]), signedToken = useMemo(() => {
+    try {
+      return new URL(videoSrc).searchParams.get("token");
+    } catch {
+      return !1;
+    }
+  }, [videoSrc]), [width, height] = (asset?.data?.aspect_ratio ?? "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
+  let aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio);
+  return isAudio && (aspectRatio = props.forceAspectRatio ? (
+    // Make it wider when forcing aspect ratio to balance with videos' rendering height (audio players overflow a bit)
+    props.forceAspectRatio * 1.2
+  ) : AUDIO_ASPECT_RATIO), /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Card, { tone: "transparent", style: { aspectRatio, position: "relative" }, children: [
+      videoSrc && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          MuxPlayer,
+          {
+            poster: thumbnail,
+            ref: muxPlayer,
+            ...props,
+            playsInline: !0,
+            playbackId: asset.playbackId,
+            tokens: signedToken ? { playback: signedToken, thumbnail: signedToken, storyboard: signedToken } : void 0,
+            preload: "metadata",
+            crossOrigin: "anonymous",
+            metadata: {
+              player_name: "Sanity Admin Dashboard",
+              player_version: "2.10.0",
+              page_type: "Preview Player"
+            },
+            audio: isAudio,
+            style: {
+              height: "100%",
+              width: "100%",
+              display: "block",
+              objectFit: "contain"
+            }
+          }
+        ),
+        children
+      ] }),
+      error ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)"
+          },
+          children: /* @__PURE__ */ jsxs(Text, { muted: !0, children: [
+            /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { marginRight: "0.15em" } }),
+            typeof error == "object" && "message" in error && typeof error.message == "string" ? error.message : "Error loading video"
+          ] })
+        }
+      ) : null,
+      children
+    ] }),
+    dialogState === "edit-thumbnail" && /* @__PURE__ */ jsx(EditThumbnailDialog, { asset, currentTime: muxPlayer?.current?.currentTime })
+  ] });
+}
+function assetIsAudio(asset) {
+  return asset.data?.max_stored_resolution === "Audio only";
+}
+const getUnknownTypeFallback = (id, typeName) => ({
+  title: /* @__PURE__ */ jsxs("em", { children: [
+    "No schema found for type ",
+    /* @__PURE__ */ jsx("code", { children: typeName })
+  ] }),
+  subtitle: /* @__PURE__ */ jsxs("em", { children: [
+    "Document: ",
+    /* @__PURE__ */ jsx("code", { children: id })
+  ] }),
+  media: () => /* @__PURE__ */ jsx(WarningOutlineIcon, {})
+});
+function MissingSchemaType(props) {
+  const { layout, value } = props;
+  return /* @__PURE__ */ jsx(SanityDefaultPreview, { ...getUnknownTypeFallback(value._id, value._type), layout });
+}
+function TimeAgo({ time }) {
+  const timeAgo = useTimeAgo(time);
+  return /* @__PURE__ */ jsxs("span", { title: timeAgo, children: [
+    timeAgo,
+    " ago"
+  ] });
+}
+function DraftStatus(props) {
+  const { document: document2 } = props, updatedAt = document2 && "_updatedAt" in document2 && document2._updatedAt;
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      animate: !0,
+      portal: !0,
+      content: /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, children: document2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Edited ",
+        updatedAt && /* @__PURE__ */ jsx(TimeAgo, { time: updatedAt })
+      ] }) : /* @__PURE__ */ jsx(Fragment, { children: "No unpublished edits" }) }) }),
+      children: /* @__PURE__ */ jsx(TextWithTone, { tone: "caution", dimmed: !document2, muted: !document2, size: 1, children: /* @__PURE__ */ jsx(EditIcon, {}) })
+    }
+  );
+}
+function PublishedStatus(props) {
+  const { document: document2 } = props, updatedAt = document2 && "_updatedAt" in document2 && document2._updatedAt;
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      animate: !0,
+      portal: !0,
+      content: /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, children: document2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Published ",
+        updatedAt && /* @__PURE__ */ jsx(TimeAgo, { time: updatedAt })
+      ] }) : /* @__PURE__ */ jsx(Fragment, { children: "Not published" }) }) }),
+      children: /* @__PURE__ */ jsx(TextWithTone, { tone: "positive", dimmed: !document2, muted: !document2, size: 1, children: /* @__PURE__ */ jsx(PublishIcon, {}) })
+    }
+  );
+}
+function PaneItemPreview(props) {
+  const { icon, layout, presence, schemaType, value } = props, title = isRecord(value.title) && isValidElement(value.title) || isString(value.title) || isNumber(value.title) ? value.title : null, observable = useMemo(
+    () => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id, title),
+    [props.documentPreviewStore, schemaType, title, value._id]
+  ), { draft, published, isLoading } = useObservable(observable, {
+    draft: null,
+    published: null,
+    isLoading: !0
+  }), status = isLoading ? null : /* @__PURE__ */ jsxs(Inline, { space: 4, children: [
+    presence && presence.length > 0 && /* @__PURE__ */ jsx(DocumentPreviewPresence, { presence }),
+    /* @__PURE__ */ jsx(PublishedStatus, { document: published }),
+    /* @__PURE__ */ jsx(DraftStatus, { document: draft })
+  ] });
+  return /* @__PURE__ */ jsx(
+    SanityDefaultPreview,
+    {
+      ...getPreviewValueWithFallback({ value, draft, published }),
+      isPlaceholder: isLoading,
+      icon,
+      layout,
+      status
+    }
+  );
+}
+function getIconWithFallback(icon, schemaType, defaultIcon) {
+  return icon === !1 ? !1 : icon || schemaType && schemaType.icon || defaultIcon || !1;
+}
+function DocumentPreviewLink(props) {
+  return (linkProps) => /* @__PURE__ */ jsx(IntentLink, { intent: "edit", params: { id: props.documentPair.id }, children: linkProps.children });
+}
+function DocumentPreview(props) {
+  const { schemaType, documentPair } = props, doc = documentPair?.draft || documentPair?.published, id = documentPair.id || "", documentPreviewStore = useDocumentPreviewStore(), schema = useSchema(), documentPresence = useDocumentPresence(id), hasSchemaType = !!(schemaType && schemaType.name && schema.get(schemaType.name)), PreviewComponent = useMemo(() => doc ? !schemaType || !hasSchemaType ? /* @__PURE__ */ jsx(MissingSchemaType, { value: doc }) : /* @__PURE__ */ jsx(
+    PaneItemPreview,
+    {
+      documentPreviewStore,
+      icon: getIconWithFallback(void 0, schemaType, DocumentIcon),
+      schemaType,
+      layout: "default",
+      value: doc,
+      presence: documentPresence
+    }
+  ) : null, [hasSchemaType, schemaType, documentPresence, doc, documentPreviewStore]);
+  return /* @__PURE__ */ jsx(
+    PreviewCard,
+    {
+      __unstable_focusRing: !0,
+      as: DocumentPreviewLink(props),
+      "data-as": "a",
+      "data-ui": "PaneItem",
+      padding: 2,
+      radius: 2,
+      tone: "inherit",
+      children: PreviewComponent
+    }
+  );
+}
+const Container = styled(Box)`
+  * {
+    color: ${(props) => props.theme.sanity.color.base.fg};
+  }
+  a {
+    text-decoration: none;
+  }
+  h2 {
+    font-size: ${(props) => props.theme.sanity.fonts.text.sizes[1]};
+  }
+`, VideoReferences = (props) => {
+  const schema = useSchema();
+  if (!props.isLoaded)
+    return /* @__PURE__ */ jsx(SpinnerBox, {});
+  if (!props.references?.length)
+    return /* @__PURE__ */ jsx(Card, { border: !0, radius: 3, padding: 3, children: /* @__PURE__ */ jsx(Text, { size: 2, children: "No documents are using this video" }) });
+  const documentPairs = collate(props.references || []);
+  return /* @__PURE__ */ jsx(Container, { children: documentPairs?.map((documentPair) => {
+    const schemaType = schema.get(documentPair.type);
+    return /* @__PURE__ */ jsx(
+      Card,
+      {
+        marginBottom: 2,
+        padding: 2,
+        radius: 2,
+        shadow: 1,
+        style: { overflow: "hidden" },
+        children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(DocumentPreview, { documentPair, schemaType }) })
+      },
+      documentPair.id
+    );
+  }) });
+};
+function DeleteDialog({
+  asset,
+  references,
+  referencesLoading,
+  cancelDelete,
+  succeededDeleting
+}) {
+  const client = useClient(), [state, setState] = useState("checkingReferences"), [deleteOnMux, setDeleteOnMux] = useState(!0), toast = useToast();
+  useEffect(() => {
+    state !== "checkingReferences" || referencesLoading || setState(references?.length ? "cantDelete" : "confirm");
+  }, [state, references, referencesLoading]);
+  async function confirmDelete() {
+    if (state !== "confirm") return;
+    setState("processing_deletion");
+    const worked = await deleteAsset({ client, asset, deleteOnMux });
+    worked === !0 ? (toast.push({ title: "Successfully deleted video", status: "success" }), succeededDeleting()) : worked === "failed-mux" ? (toast.push({
+      title: "Deleted video in Sanity",
+      description: "But it wasn't deleted in Mux",
+      status: "warning"
+    }), succeededDeleting()) : (toast.push({ title: "Failed deleting video", status: "error" }), setState("error_deleting"));
+  }
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      animate: !0,
+      header: "Delete video",
+      zOffset: DIALOGS_Z_INDEX,
+      id: "deleting-video-details-dialog",
+      onClose: cancelDelete,
+      onClickOutside: cancelDelete,
+      width: 1,
+      position: "fixed",
+      children: /* @__PURE__ */ jsx(
+        Card,
+        {
+          padding: 3,
+          style: {
+            minHeight: "150px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+            state === "checkingReferences" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Checking if video can be deleted" }),
+              /* @__PURE__ */ jsx(SpinnerBox, {})
+            ] }),
+            state === "cantDelete" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Video can't be deleted" }),
+              /* @__PURE__ */ jsxs(Text, { size: 2, style: { marginBottom: "2rem" }, children: [
+                "There are ",
+                references?.length,
+                " document",
+                references && references.length > 0 && "s",
+                " ",
+                "pointing to this video. Remove their references to this file or delete them before proceeding."
+              ] }),
+              /* @__PURE__ */ jsx(VideoReferences, { references, isLoaded: !referencesLoading })
+            ] }),
+            state === "confirm" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Are you sure you want to delete this video?" }),
+              /* @__PURE__ */ jsx(Text, { size: 2, children: "This action is irreversible" }),
+              /* @__PURE__ */ jsxs(Stack, { space: 4, marginY: 4, children: [
+                /* @__PURE__ */ jsxs(Flex, { align: "center", as: "label", children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: deleteOnMux,
+                      onChange: () => setDeleteOnMux((prev) => !prev)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Text, { style: { margin: "0 10px" }, children: "Delete asset on Mux" })
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { align: "center", as: "label", children: [
+                  /* @__PURE__ */ jsx(Checkbox, { disabled: !0, checked: !0 }),
+                  /* @__PURE__ */ jsx(Text, { style: { margin: "0 10px" }, children: "Delete video from dataset" })
+                ] }),
+                /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: TrashIcon,
+                    fontSize: 2,
+                    padding: 3,
+                    text: "Delete video",
+                    tone: "critical",
+                    onClick: confirmDelete,
+                    disabled: ["processing_deletion", "checkingReferences", "cantDelete"].some(
+                      (s) => s === state
                     )
-                  ] })
-                ]
-              }
-            )
-          }
-        )
-      ]
+                  }
+                ) })
+              ] })
+            ] }),
+            state === "processing_deletion" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Deleting video..." }),
+              /* @__PURE__ */ jsx(SpinnerBox, {})
+            ] }),
+            state === "error_deleting" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Something went wrong!" }),
+              /* @__PURE__ */ jsx(Text, { size: 2, children: "Try deleting the video again by clicking the button below" })
+            ] })
+          ] })
+        }
+      )
     }
   );
-}, VideoMetadata = (props) => {
-  if (!props.asset)
-    return null;
-  const displayInfo = getVideoMetadata(props.asset);
-  return /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-    displayInfo.title && /* @__PURE__ */ jsx(
-      Text,
-      {
-        size: 1,
-        weight: "semibold",
-        style: {
-          wordWrap: "break-word"
-        },
-        children: displayInfo.title
-      }
-    ),
-    /* @__PURE__ */ jsxs(Inline, { space: 3, children: [
-      displayInfo?.duration && /* @__PURE__ */ jsx(IconInfo, { text: displayInfo.duration, icon: ClockIcon, size: 1, muted: !0 }),
-      /* @__PURE__ */ jsx(
-        IconInfo,
-        {
-          text: displayInfo.createdAt.toISOString().split("T")[0],
-          icon: CalendarIcon,
-          size: 1,
-          muted: !0
-        }
-      ),
-      displayInfo.title != displayInfo.id.slice(0, 12) && /* @__PURE__ */ jsx(IconInfo, { text: displayInfo.id.slice(0, 12), icon: TagIcon, size: 1, muted: !0 })
-    ] })
-  ] });
-}, PlayButton = styled.button`
-  display: block;
-  padding: 0;
-  margin: 0;
-  border: none;
-  border-radius: 0.1875rem;
-  position: relative;
-  cursor: pointer;
-
-  &::after {
-    content: '';
-    background: var(--card-fg-color);
-    opacity: 0;
-    display: block;
-    position: absolute;
-    inset: 0;
-    z-index: 10;
-    transition: 0.15s ease-out;
-    border-radius: inherit;
+}
+const useDocReferences = createHookFromObservableFactory(({ documentStore, id }) => documentStore.listenQuery(
+  /* groq */
+  "*[references($id)]{_id, _type, _rev, _updatedAt, _createdAt}",
+  { id },
+  {
+    apiVersion: SANITY_API_VERSION
   }
-
-  > div[data-play] {
-    z-index: 11;
-    opacity: 0;
-    transition: 0.15s 0.05s ease-out;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    color: var(--card-fg-color);
-    background: var(--card-bg-color);
-    width: auto;
-    height: 30%;
-    aspect-ratio: 1;
-    border-radius: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    > svg {
-      display: block;
-      width: 70%;
-      height: auto;
-      // Visual balance to center-align the icon
-      transform: translateX(5%);
+));
+function getVideoMetadata(doc) {
+  const id = doc.assetId || doc._id || "", date = doc.data?.created_at ? new Date(Number(doc.data.created_at) * 1e3) : new Date(doc._createdAt || doc._updatedAt || Date.now());
+  return {
+    title: doc.filename || id.slice(0, 12),
+    id,
+    playbackId: doc.playbackId,
+    createdAt: date,
+    duration: doc.data?.duration ? formatSeconds(doc.data?.duration) : void 0,
+    aspect_ratio: doc.data?.aspect_ratio,
+    max_stored_resolution: doc.data?.max_stored_resolution,
+    max_stored_frame_rate: doc.data?.max_stored_frame_rate
+  };
+}
+function useVideoDetails(props) {
+  const documentStore = useDocumentStore(), toast = useToast(), client = useClient(), [references, referencesLoading] = useDocReferences(
+    useMemo(() => ({ documentStore, id: props.asset._id }), [documentStore, props.asset._id])
+  ), [originalAsset, setOriginalAsset] = useState(() => props.asset), [filename, setFilename] = useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata({ ...props.asset, filename }), [state, setState] = useState("idle");
+  function handleClose() {
+    if (state === "idle") {
+      if (modified) {
+        setState("closing");
+        return;
+      }
+      props.closeDialog();
     }
   }
-
-  &:hover,
-  &:focus {
-    &::after {
-      opacity: 0.3;
-    }
-    > div[data-play] {
-      opacity: 1;
+  function confirmClose(shouldClose) {
+    state === "closing" && (shouldClose && props.closeDialog(), setState("idle"));
+  }
+  async function saveChanges() {
+    if (state === "idle") {
+      setState("saving");
+      try {
+        await client.patch(props.asset._id).set({ filename }).commit(), setOriginalAsset((prev) => ({ ...prev, filename })), toast.push({
+          title: "Video title updated",
+          description: `New title: ${filename}`,
+          status: "success"
+        }), props.closeDialog();
+      } catch (error) {
+        toast.push({
+          title: "Failed updating file name",
+          status: "error",
+          description: typeof error == "string" ? error : "Please try again"
+        }), setFilename(originalAsset.filename);
+      }
+      setState("idle");
     }
   }
-`;
-function VideoInBrowser({
-  onSelect,
-  onEdit,
-  asset
-}) {
-  const [renderVideo, setRenderVideo] = useState(!1), select = React.useCallback(() => onSelect?.(asset), [onSelect, asset]), edit = React.useCallback(() => onEdit?.(asset), [onEdit, asset]);
-  if (!asset)
-    return null;
-  const playbackPolicy = getPlaybackPolicy(asset);
-  return /* @__PURE__ */ jsxs(
-    Card,
+  return {
+    references,
+    referencesLoading,
+    modified,
+    filename,
+    setFilename,
+    displayInfo,
+    state,
+    setState,
+    handleClose,
+    confirmClose,
+    saveChanges
+  };
+}
+const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.label, description: props.description, inputId: props.label, children: /* @__PURE__ */ jsx(
+  TextInput,
+  {
+    id: props.label,
+    value: props.value,
+    placeholder: props.placeholder,
+    onInput: props.onInput,
+    disabled: props.disabled
+  }
+) }), VideoDetails = (props) => {
+  const [tab, setTab] = useState("details"), {
+    displayInfo,
+    filename,
+    modified,
+    references,
+    referencesLoading,
+    setFilename,
+    state,
+    setState,
+    handleClose,
+    confirmClose,
+    saveChanges
+  } = useVideoDetails(props), isSaving = state === "saving", [containerHeight, setContainerHeight] = useState(null), contentsRef = React.useRef(null);
+  return useEffect(() => {
+    !contentsRef.current || !("getBoundingClientRect" in contentsRef.current) || setContainerHeight(contentsRef.current.getBoundingClientRect().height);
+  }, []), /* @__PURE__ */ jsxs(
+    Dialog,
     {
-      border: !0,
-      padding: 2,
-      sizing: "border",
-      radius: 2,
-      style: {
-        position: "relative"
-      },
+      animate: !0,
+      header: displayInfo.title,
+      zOffset: DIALOGS_Z_INDEX,
+      id: "video-details-dialog",
+      onClose: handleClose,
+      onClickOutside: handleClose,
+      width: 2,
+      position: "fixed",
+      footer: /* @__PURE__ */ jsx(Card, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: TrashIcon,
+            fontSize: 2,
+            padding: 3,
+            mode: "bleed",
+            text: "Delete",
+            tone: "critical",
+            onClick: () => setState("deleting"),
+            disabled: isSaving
+          }
+        ),
+        modified && /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: CheckmarkIcon,
+            fontSize: 2,
+            padding: 3,
+            mode: "ghost",
+            text: "Save and close",
+            tone: "positive",
+            onClick: saveChanges,
+            iconRight: isSaving && Spinner,
+            disabled: isSaving
+          }
+        )
+      ] }) }),
       children: [
-        playbackPolicy === "signed" && /* @__PURE__ */ jsx(
-          Tooltip,
+        state === "deleting" && /* @__PURE__ */ jsx(
+          DeleteDialog,
+          {
+            asset: props.asset,
+            cancelDelete: () => setState("idle"),
+            referencesLoading,
+            references,
+            succeededDeleting: () => {
+              props.closeDialog();
+            }
+          }
+        ),
+        state === "closing" && /* @__PURE__ */ jsx(
+          Dialog,
           {
             animate: !0,
-            content: /* @__PURE__ */ jsx(Card, { padding: 2, radius: 2, children: /* @__PURE__ */ jsx(IconInfo, { icon: LockIcon, text: "Signed playback policy", size: 2 }) }),
-            placement: "right",
-            fallbackPlacements: ["top", "bottom"],
-            portal: !0,
-            children: /* @__PURE__ */ jsx(
-              Card,
-              {
-                tone: "caution",
-                style: {
-                  borderRadius: "100%",
-                  position: "absolute",
-                  left: "1em",
-                  top: "1em",
-                  zIndex: 10
-                },
-                padding: 2,
-                border: !0,
-                children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsx(LockIcon, {}) })
-              }
-            )
+            header: "You have unsaved changes",
+            zOffset: DIALOGS_Z_INDEX,
+            id: "closing-video-details-dialog",
+            onClose: () => confirmClose(!1),
+            onClickOutside: () => confirmClose(!1),
+            width: 1,
+            position: "fixed",
+            footer: /* @__PURE__ */ jsx(Card, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  icon: ErrorOutlineIcon,
+                  fontSize: 2,
+                  padding: 3,
+                  text: "Discard changes",
+                  tone: "critical",
+                  onClick: () => confirmClose(!0)
+                }
+              ),
+              modified && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  icon: RevertIcon,
+                  fontSize: 2,
+                  padding: 3,
+                  mode: "ghost",
+                  text: "Keep editing",
+                  tone: "primary",
+                  onClick: () => confirmClose(!1)
+                }
+              )
+            ] }) }),
+            children: /* @__PURE__ */ jsx(Card, { padding: 5, children: /* @__PURE__ */ jsxs(Stack, { style: { textAlign: "center" }, space: 3, children: [
+              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Unsaved changes will be lost" }),
+              /* @__PURE__ */ jsx(Text, { size: 2, children: "Are you sure you want to discard them?" })
+            ] }) })
           }
         ),
-        /* @__PURE__ */ jsxs(
-          Stack,
+        /* @__PURE__ */ jsx(
+          Card,
           {
-            space: 3,
-            height: "fill",
+            padding: 4,
+            sizing: "border",
             style: {
-              gridTemplateRows: "min-content min-content 1fr"
+              containerType: "inline-size"
             },
-            children: [
-              renderVideo ? /* @__PURE__ */ jsx(VideoPlayer, { asset, autoPlay: !0, forceAspectRatio: THUMBNAIL_ASPECT_RATIO }) : /* @__PURE__ */ jsxs(PlayButton, { onClick: () => setRenderVideo(!0), children: [
-                /* @__PURE__ */ jsx("div", { "data-play": !0, children: /* @__PURE__ */ jsx(PlayIcon, {}) }),
-                assetIsAudio(asset) ? /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      aspectRatio: THUMBNAIL_ASPECT_RATIO,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center"
-                    },
-                    children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "3em", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        fill: "currentColor",
-                        style: { opacity: "0.65" },
-                        d: "M10.75 19q.95 0 1.6-.65t.65-1.6V13h3v-2h-4v3.875q-.275-.2-.587-.288t-.663-.087q-.95 0-1.6.65t-.65 1.6t.65 1.6t1.6.65M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h8l6 6v12q0 .825-.587 1.413T18 22zm7-13V4H6v16h12V9zM6 4v5zv16z"
-                      }
-                    ) })
-                  }
-                ) : /* @__PURE__ */ jsx(VideoThumbnail, { asset })
-              ] }),
-              /* @__PURE__ */ jsx(VideoMetadata, { asset }),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    width: "100%",
-                    alignItems: "flex-end",
-                    justifyContent: "flex-start",
-                    gap: ".35rem"
-                  },
-                  children: [
-                    onSelect && /* @__PURE__ */ jsx(
-                      Button,
+            children: /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                sizing: "border",
+                gap: 4,
+                direction: ["column", "column", "row"],
+                align: "flex-start",
+                ref: contentsRef,
+                style: typeof containerHeight == "number" ? {
+                  minHeight: containerHeight
+                } : void 0,
+                children: [
+                  /* @__PURE__ */ jsx(Stack, { space: 4, flex: 1, sizing: "border", children: /* @__PURE__ */ jsx(VideoPlayer, { asset: props.asset, autoPlay: props.asset.autoPlay || !1 }) }),
+                  /* @__PURE__ */ jsxs(Stack, { space: 4, flex: 1, sizing: "border", children: [
+                    /* @__PURE__ */ jsxs(TabList, { space: 2, children: [
+                      /* @__PURE__ */ jsx(
+                        Tab,
+                        {
+                          "aria-controls": "details-panel",
+                          icon: EditIcon,
+                          id: "details-tab",
+                          label: "Details",
+                          onClick: () => setTab("details"),
+                          selected: tab === "details"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Tab,
+                        {
+                          "aria-controls": "references-panel",
+                          icon: SearchIcon,
+                          id: "references-tab",
+                          label: `Used by ${references ? `(${references.length})` : ""}`,
+                          onClick: () => setTab("references"),
+                          selected: tab === "references"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      TabPanel,
                       {
-                        icon: CheckmarkIcon,
-                        fontSize: 2,
-                        padding: 2,
-                        mode: "ghost",
-                        text: "Select",
-                        style: { flex: 1 },
-                        tone: "positive",
-                        onClick: select
+                        "aria-labelledby": "details-tab",
+                        id: "details-panel",
+                        hidden: tab !== "details",
+                        style: { wordBreak: "break-word" },
+                        children: /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
+                          /* @__PURE__ */ jsx(
+                            AssetInput,
+                            {
+                              label: "Video title or file name",
+                              description: "Not visible to users. Useful for finding videos later.",
+                              value: filename || "",
+                              onInput: (e) => setFilename(e.currentTarget.value),
+                              disabled: state !== "idle"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+                            displayInfo?.duration && /* @__PURE__ */ jsx(
+                              IconInfo,
+                              {
+                                text: `Duration: ${displayInfo.duration}`,
+                                icon: ClockIcon,
+                                size: 2
+                              }
+                            ),
+                            displayInfo?.max_stored_resolution && /* @__PURE__ */ jsx(
+                              IconInfo,
+                              {
+                                text: `Max Resolution: ${displayInfo.max_stored_resolution}`,
+                                icon: ResolutionIcon,
+                                size: 2
+                              }
+                            ),
+                            displayInfo?.max_stored_frame_rate && /* @__PURE__ */ jsx(
+                              IconInfo,
+                              {
+                                text: `Frame rate: ${displayInfo.max_stored_frame_rate}`,
+                                icon: StopWatchIcon,
+                                size: 2
+                              }
+                            ),
+                            displayInfo?.aspect_ratio && /* @__PURE__ */ jsx(
+                              IconInfo,
+                              {
+                                text: `Aspect Ratio: ${displayInfo.aspect_ratio}`,
+                                icon: CropIcon,
+                                size: 2
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              IconInfo,
+                              {
+                                text: `Uploaded on: ${displayInfo.createdAt.toLocaleDateString("en", {
+                                  year: "numeric",
+                                  month: "2-digit",
+                                  day: "2-digit",
+                                  hour: "2-digit",
+                                  minute: "2-digit",
+                                  hour12: !0
+                                })}`,
+                                icon: CalendarIcon,
+                                size: 2
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(IconInfo, { text: `Mux ID: 
+${displayInfo.id}`, icon: TagIcon, size: 2 }),
+                            displayInfo?.playbackId && /* @__PURE__ */ jsx(
+                              IconInfo,
+                              {
+                                text: `Playback ID: ${displayInfo.playbackId}`,
+                                icon: TagIcon,
+                                size: 2
+                              }
+                            )
+                          ] })
+                        ] })
                       }
                     ),
                     /* @__PURE__ */ jsx(
-                      Button,
+                      TabPanel,
                       {
-                        icon: EditIcon,
-                        fontSize: 2,
-                        padding: 2,
-                        mode: "ghost",
-                        text: "Details",
-                        style: { flex: 1 },
-                        onClick: edit
+                        "aria-labelledby": "references-tab",
+                        id: "references-panel",
+                        hidden: tab !== "references",
+                        children: /* @__PURE__ */ jsx(VideoReferences, { references, isLoaded: !referencesLoading })
                       }
                     )
-                  ]
-                }
-              )
-            ]
+                  ] })
+                ]
+              }
+            )
           }
         )
       ]
     }
   );
-}
-function VideosBrowser({ onSelect }) {
-  const { assets, isLoading, searchQuery, setSearchQuery, setSort, sort } = useAssets(), [editedAsset, setEditedAsset] = useState(null), freshEditedAsset = useMemo(
-    () => assets.find((a2) => a2._id === editedAsset?._id) || editedAsset,
-    [editedAsset, assets]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Stack, { padding: 4, space: 4, style: { minHeight: "50vh" }, children: [
-      /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ jsx(
-            TextInput,
-            {
-              value: searchQuery,
-              icon: SearchIcon,
-              onInput: (e) => setSearchQuery(e.currentTarget.value),
-              placeholder: "Search videos"
-            }
-          ),
-          /* @__PURE__ */ jsx(SelectSortOptions, { setSort, sort })
-        ] }),
-        (onSelect ? "input" : "tool") == "tool" && /* @__PURE__ */ jsx(ImportVideosFromMux, {})
-      ] }),
-      /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-        assets?.length > 0 && /* @__PURE__ */ jsxs(Label$1, { muted: !0, children: [
-          assets.length,
-          " video",
-          assets.length > 1 ? "s" : null,
-          " ",
-          searchQuery ? `matching "${searchQuery}"` : "found"
-        ] }),
-        /* @__PURE__ */ jsx(
-          Grid,
-          {
-            gap: 2,
-            style: {
-              gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))"
-            },
-            children: assets.map((asset) => /* @__PURE__ */ jsx(
-              VideoInBrowser,
-              {
-                asset,
-                onEdit: setEditedAsset,
-                onSelect
-              },
-              asset._id
-            ))
-          }
-        )
-      ] }),
-      isLoading && /* @__PURE__ */ jsx(SpinnerBox, {}),
-      !isLoading && assets.length === 0 && /* @__PURE__ */ jsx(Card, { marginY: 4, paddingX: 4, paddingY: 6, border: !0, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsx(Text, { align: "center", muted: !0, size: 3, children: searchQuery ? `No videos found for "${searchQuery}"` : "No videos in this dataset" }) })
-    ] }),
-    freshEditedAsset && /* @__PURE__ */ jsx(VideoDetails, { closeDialog: () => setEditedAsset(null), asset: freshEditedAsset })
+}, VideoMetadata = (props) => {
+  if (!props.asset)
+    return null;
+  const displayInfo = getVideoMetadata(props.asset);
+  return /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+    displayInfo.title && /* @__PURE__ */ jsx(
+      Text,
+      {
+        size: 1,
+        weight: "semibold",
+        style: {
+          wordWrap: "break-word"
+        },
+        children: displayInfo.title
+      }
+    ),
+    /* @__PURE__ */ jsxs(Inline, { space: 3, children: [
+      displayInfo?.duration && /* @__PURE__ */ jsx(IconInfo, { text: displayInfo.duration, icon: ClockIcon, size: 1, muted: !0 }),
+      /* @__PURE__ */ jsx(
+        IconInfo,
+        {
+          text: displayInfo.createdAt.toISOString().split("T")[0],
+          icon: CalendarIcon,
+          size: 1,
+          muted: !0
+        }
+      ),
+      displayInfo.title != displayInfo.id.slice(0, 12) && /* @__PURE__ */ jsx(IconInfo, { text: displayInfo.id.slice(0, 12), icon: TagIcon, size: 1, muted: !0 })
+    ] })
   ] });
-}
-const StudioTool = () => /* @__PURE__ */ jsx(VideosBrowser, {}), DEFAULT_TOOL_CONFIG = {
-  icon: ToolIcon,
-  title: "Videos"
-};
-function createStudioTool(config) {
-  const toolConfig = typeof config.tool == "object" ? config.tool : DEFAULT_TOOL_CONFIG;
-  return {
-    name: "mux",
-    icon: toolConfig.icon || DEFAULT_TOOL_CONFIG.icon,
-    title: toolConfig.title || DEFAULT_TOOL_CONFIG.title,
-    component: (props) => /* @__PURE__ */ jsx(StudioTool, { ...config, ...props })
-  };
-}
-const path = ["assetId", "data", "playbackId", "status", "thumbTime", "filename"], useAssetDocumentValues = (asset) => useDocumentValues(
-  isReference(asset) ? asset._ref : "",
-  path
-);
-function useDialogState() {
-  return useState(!1);
-}
-const useMuxPolling = (asset) => {
-  const client = useClient(), projectId = useProjectId(), dataset = useDataset(), shouldFetch = useMemo(
-    () => !!asset?.assetId && (asset?.status === "preparing" || asset?.data?.static_renditions?.status === "preparing"),
-    [asset?.assetId, asset?.data?.static_renditions?.status, asset?.status]
-  );
-  return useSWR(
-    shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset?.assetId}` : null,
-    async () => {
-      const { data } = await client.request({
-        url: `/addons/mux/assets/${dataset}/data/${asset.assetId}`,
-        withCredentials: !0,
-        method: "GET"
-      });
-      client.patch(asset._id).set({ status: data.status, data }).commit({ returnDocuments: !1 });
-    },
-    { refreshInterval: 2e3, refreshWhenHidden: !0, dedupingInterval: 1e3 }
-  );
-};
-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);
-}
-async function createSigningKeys(client) {
-  try {
-    const { dataset } = client.config();
-    return await client.request({
-      url: `/addons/mux/signing-keys/${dataset}`,
-      withCredentials: !0,
-      method: "POST"
-    });
-  } catch (error) {
-    console.error("Error creating signing keys", error);
-    const message = error.response?.statusCode === 401 ? 'Unauthorized - Failed to create the Signing Key. Please ensure that the token has "System" permissions' : error.message;
-    throw new Error(message);
-  }
-}
-function testSecrets(client) {
-  const { dataset } = client.config();
-  return client.request({
-    url: `/addons/mux/secrets/${dataset}/test`,
-    withCredentials: !0,
-    method: "GET"
-  });
-}
-async function haveValidSigningKeys(client, signingKeyId, signingKeyPrivate) {
-  if (!(signingKeyId && signingKeyPrivate))
-    return !1;
-  const { dataset } = client.config();
-  try {
-    const res = await client.request({
-      url: `/addons/mux/signing-keys/${dataset}/${signingKeyId}`,
-      withCredentials: !0,
-      method: "GET"
-    });
-    return !!(res.data && res.data.id);
-  } catch {
-    return console.error("Error fetching signingKeyId", signingKeyId, "assuming it is not valid"), !1;
+}, PlayButton = styled.button`
+  display: block;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 0.1875rem;
+  position: relative;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    background: var(--card-fg-color);
+    opacity: 0;
+    display: block;
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    transition: 0.15s ease-out;
+    border-radius: inherit;
   }
-}
-function testSecretsObservable(client) {
-  const { dataset } = client.config();
-  return defer(
-    () => client.observable.request({
-      url: `/addons/mux/secrets/${dataset}/test`,
-      withCredentials: !0,
-      method: "GET"
-    })
-  );
-}
-const useSaveSecrets = (client, secrets) => useCallback(
-  async ({
-    token,
-    secretKey,
-    enableSignedUrls
-  }) => {
-    let { signingKeyId, signingKeyPrivate } = secrets;
-    try {
-      if (await saveSecrets(
-        client,
-        token,
-        secretKey,
-        enableSignedUrls,
-        signingKeyId,
-        signingKeyPrivate
-      ), !(await testSecrets(client))?.status && token && secretKey)
-        throw new Error("Invalid secrets");
-    } catch (err) {
-      throw console.error("Error while trying to save secrets:", err), err;
+
+  > div[data-play] {
+    z-index: 11;
+    opacity: 0;
+    transition: 0.15s 0.05s ease-out;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--card-fg-color);
+    background: var(--card-bg-color);
+    width: auto;
+    height: 30%;
+    aspect-ratio: 1;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    > svg {
+      display: block;
+      width: 70%;
+      height: auto;
+      // Visual balance to center-align the icon
+      transform: translateX(5%);
     }
-    if (enableSignedUrls && !await haveValidSigningKeys(
-      client,
-      signingKeyId,
-      signingKeyPrivate
-    ))
-      try {
-        const { data } = await createSigningKeys(client);
-        signingKeyId = data.id, signingKeyPrivate = data.private_key, await saveSecrets(
-          client,
-          token,
-          secretKey,
-          enableSignedUrls,
-          signingKeyId,
-          signingKeyPrivate
-        );
-      } catch (err) {
-        throw console.log("Error while creating and saving signing key:", err?.message), err;
-      }
-    return {
-      token,
-      secretKey,
-      enableSignedUrls,
-      signingKeyId,
-      signingKeyPrivate
-    };
-  },
-  [client, secrets]
-);
-function init({ token, secretKey, enableSignedUrls }) {
-  return {
-    submitting: !1,
-    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 ?? "",
-    secretKey: secretKey ?? "",
-    enableSignedUrls: enableSignedUrls ?? !1
-  };
-}
-function reducer(state, action) {
-  switch (action?.type) {
-    case "submit":
-      return { ...state, submitting: !0, error: null };
-    case "error":
-      return { ...state, submitting: !1, 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: ${action?.type}`);
   }
-}
-const useSecretsFormState = (secrets) => useReducer(reducer, secrets, init);
-function MuxLogo({ height = 26 }) {
-  const id = useId(), fillColor = useTheme_v2().color._dark ? "white" : "black", titleId = useMemo(() => `${id}-title`, [id]), pathStyle = {
-    fillRule: "nonzero"
-  };
-  return /* @__PURE__ */ jsx(
-    "svg",
+
+  &:hover,
+  &:focus {
+    &::after {
+      opacity: 0.3;
+    }
+    > div[data-play] {
+      opacity: 1;
+    }
+  }
+`;
+function VideoInBrowser({
+  onSelect,
+  onEdit,
+  asset
+}) {
+  const [renderVideo, setRenderVideo] = useState(!1), select = React.useCallback(() => onSelect?.(asset), [onSelect, asset]), edit = React.useCallback(() => onEdit?.(asset), [onEdit, asset]);
+  if (!asset)
+    return null;
+  const playbackPolicy = getPlaybackPolicy(asset);
+  return /* @__PURE__ */ jsxs(
+    Card,
     {
-      "aria-labelledby": titleId,
-      style: { height: `${height}px` },
-      viewBox: "0 0 1600 500",
-      version: "1.1",
-      xmlns: "http://www.w3.org/2000/svg",
-      xmlSpace: "preserve",
-      children: /* @__PURE__ */ jsxs("g", { id: "Layer-1", fill: fillColor, children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M994.287,93.486c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m0,-93.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,68.943 -56.09,125.033 -125.032,125.033c-68.942,-0 -125.03,-56.09 -125.03,-125.033l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,137.853 112.149,250.003 249.999,250.003c137.851,-0 250.001,-112.15 250.001,-250.003l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486",
-            style: pathStyle
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
+      border: !0,
+      padding: 2,
+      sizing: "border",
+      radius: 2,
+      style: {
+        position: "relative"
+      },
+      children: [
+        playbackPolicy === "signed" && /* @__PURE__ */ jsx(
+          Tooltip,
           {
-            d: "M1537.51,468.511c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m-275.883,-218.509l-143.33,143.329c-24.402,24.402 -24.402,63.966 0,88.368c24.402,24.402 63.967,24.402 88.369,-0l143.33,-143.329l143.328,143.329c24.402,24.4 63.967,24.402 88.369,-0c24.403,-24.402 24.403,-63.966 0.001,-88.368l-143.33,-143.329l0.001,-0.004l143.329,-143.329c24.402,-24.402 24.402,-63.965 0,-88.367c-24.402,-24.402 -63.967,-24.402 -88.369,-0l-143.329,143.328l-143.329,-143.328c-24.402,-24.401 -63.967,-24.402 -88.369,-0c-24.402,24.402 -24.402,63.965 0,88.367l143.329,143.329l0,0.004Z",
-            style: pathStyle
+            animate: !0,
+            content: /* @__PURE__ */ jsx(Card, { padding: 2, radius: 2, children: /* @__PURE__ */ jsx(IconInfo, { icon: LockIcon, text: "Signed playback policy", size: 2 }) }),
+            placement: "right",
+            fallbackPlacements: ["top", "bottom"],
+            portal: !0,
+            children: /* @__PURE__ */ jsx(
+              Card,
+              {
+                tone: "caution",
+                style: {
+                  borderRadius: "100%",
+                  position: "absolute",
+                  left: "1em",
+                  top: "1em",
+                  zIndex: 10
+                },
+                padding: 2,
+                border: !0,
+                children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsx(LockIcon, {}) })
+              }
+            )
           }
         ),
-        /* @__PURE__ */ jsx(
-          "path",
+        /* @__PURE__ */ jsxs(
+          Stack,
           {
-            d: "M437.511,468.521c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m23.915,-463.762c-23.348,-9.672 -50.226,-4.327 -68.096,13.544l-143.331,143.329l-143.33,-143.329c-17.871,-17.871 -44.747,-23.216 -68.096,-13.544c-23.349,9.671 -38.574,32.455 -38.574,57.729l0,375.026c0,34.51 27.977,62.486 62.487,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-224.173l80.843,80.844c24.404,24.402 63.965,24.402 88.369,-0l80.843,-80.844l0,224.173c0,34.51 27.976,62.486 62.486,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-375.026c0,-25.274 -15.224,-48.058 -38.573,-57.729",
-            style: pathStyle
+            space: 3,
+            height: "fill",
+            style: {
+              gridTemplateRows: "min-content min-content 1fr"
+            },
+            children: [
+              renderVideo ? /* @__PURE__ */ jsx(VideoPlayer, { asset, autoPlay: !0, forceAspectRatio: THUMBNAIL_ASPECT_RATIO }) : /* @__PURE__ */ jsxs(PlayButton, { onClick: () => setRenderVideo(!0), children: [
+                /* @__PURE__ */ jsx("div", { "data-play": !0, children: /* @__PURE__ */ jsx(PlayIcon, {}) }),
+                assetIsAudio(asset) ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      aspectRatio: THUMBNAIL_ASPECT_RATIO,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "3em", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        fill: "currentColor",
+                        style: { opacity: "0.65" },
+                        d: "M10.75 19q.95 0 1.6-.65t.65-1.6V13h3v-2h-4v3.875q-.275-.2-.587-.288t-.663-.087q-.95 0-1.6.65t-.65 1.6t.65 1.6t1.6.65M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h8l6 6v12q0 .825-.587 1.413T18 22zm7-13V4H6v16h12V9zM6 4v5zv16z"
+                      }
+                    ) })
+                  }
+                ) : /* @__PURE__ */ jsx(VideoThumbnail, { asset })
+              ] }),
+              /* @__PURE__ */ jsx(VideoMetadata, { asset }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    width: "100%",
+                    alignItems: "flex-end",
+                    justifyContent: "flex-start",
+                    gap: ".35rem"
+                  },
+                  children: [
+                    onSelect && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        icon: CheckmarkIcon,
+                        fontSize: 2,
+                        padding: 2,
+                        mode: "ghost",
+                        text: "Select",
+                        style: { flex: 1 },
+                        tone: "positive",
+                        onClick: select
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        icon: EditIcon,
+                        fontSize: 2,
+                        padding: 2,
+                        mode: "ghost",
+                        text: "Details",
+                        style: { flex: 1 },
+                        onClick: edit
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
           }
         )
-      ] })
+      ]
     }
   );
 }
-const Logo = styled.span`
-  display: inline-block;
-  height: 0.8em;
-  margin-right: 1em;
-  transform: translate(0.3em, -0.2em);
-`, Header = () => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(MuxLogo, { height: 13 }) }),
-  "API Credentials"
-] }), fieldNames = ["token", "secretKey", "enableSignedUrls"];
-function ConfigureApi({ secrets, setDialogState }) {
-  const client = useClient(), [state, dispatch] = useSecretsFormState(secrets), hasSecretsInitially = useMemo(() => secrets.token && secrets.secretKey, [secrets]), handleClose = useCallback(() => setDialogState(!1), [setDialogState]), dirty = useMemo(
-    () => secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls,
-    [secrets, state]
-  ), id = `ConfigureApi${useId()}`, [tokenId, secretKeyId, enableSignedUrlsId] = useMemo(
-    () => fieldNames.map((field) => `${id}-${field}`),
-    [id]
-  ), firstField = useRef(null), handleSaveSecrets = useSaveSecrets(client, secrets), saving = useRef(!1), handleSubmit = useCallback(
-    (event) => {
-      if (event.preventDefault(), !saving.current && event.currentTarget.reportValidity()) {
-        saving.current = !0, dispatch({ type: "submit" });
-        const { token, secretKey, enableSignedUrls } = state;
-        handleSaveSecrets({ token, secretKey, enableSignedUrls }).then((savedSecrets) => {
-          const { projectId, dataset } = client.config();
-          clear([cacheNs, _id, projectId, dataset]), preload(() => Promise.resolve(savedSecrets), [cacheNs, _id, projectId, dataset]), setDialogState(!1);
-        }).catch((err) => dispatch({ type: "error", payload: err.message })).finally(() => {
-          saving.current = !1;
-        });
-      }
-    },
-    [client, dispatch, handleSaveSecrets, setDialogState, state]
-  ), handleChangeToken = useCallback(
-    (event) => {
-      dispatch({
-        type: "change",
-        payload: { name: "token", value: event.currentTarget.value }
-      });
-    },
-    [dispatch]
-  ), handleChangeSecretKey = useCallback(
-    (event) => {
-      dispatch({
-        type: "change",
-        payload: { name: "secretKey", value: event.currentTarget.value }
-      });
-    },
-    [dispatch]
-  ), handleChangeEnableSignedUrls = useCallback(
-    (event) => {
-      dispatch({
-        type: "change",
-        payload: { name: "enableSignedUrls", value: event.currentTarget.checked }
-      });
-    },
-    [dispatch]
+function VideosBrowser({ onSelect }) {
+  const { assets, isLoading, searchQuery, setSearchQuery, setSort, sort } = useAssets(), [editedAsset, setEditedAsset] = useState(null), freshEditedAsset = useMemo(
+    () => assets.find((a2) => a2._id === editedAsset?._id) || editedAsset,
+    [editedAsset, assets]
   );
-  return useEffect(() => {
-    firstField.current && firstField.current.focus();
-  }, [firstField]), /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      animate: !0,
-      id,
-      onClose: handleClose,
-      header: /* @__PURE__ */ jsx(Header, {}),
-      width: 1,
-      style: {
-        maxWidth: "550px"
-      },
-      children: /* @__PURE__ */ jsx(Box, { padding: 4, style: { position: "relative" }, children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, noValidate: !0, children: /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
-        !hasSecretsInitially && /* @__PURE__ */ jsx(Card, { padding: [3, 3, 3], radius: 2, shadow: 1, tone: "primary", children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-          /* @__PURE__ */ jsxs(Text, { size: 1, children: [
-            "To set up a new access token, go to your",
-            " ",
-            /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: "https://dashboard.mux.com/settings/access-tokens",
-                target: "_blank",
-                rel: "noreferrer noopener",
-                children: "account on mux.com"
-              }
-            ),
-            "."
-          ] }),
-          /* @__PURE__ */ jsxs(Text, { size: 1, children: [
-            "The access token needs permissions: ",
-            /* @__PURE__ */ jsx("strong", { children: "Mux Video " }),
-            "(Full Access) and ",
-            /* @__PURE__ */ jsx("strong", { children: "Mux Data" }),
-            " (Read)",
-            /* @__PURE__ */ jsx("br", {}),
-            "To use Signed URLs, the token must also have System permissions.",
-            /* @__PURE__ */ jsx("br", {}),
-            "The credentials will be stored safely in a hidden document only available to editors."
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx(FormField$1, { title: "Access Token", inputId: tokenId, children: /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            id: tokenId,
-            ref: firstField,
-            onChange: handleChangeToken,
-            type: "text",
-            value: state.token ?? "",
-            required: !!state.secretKey || state.enableSignedUrls
-          }
-        ) }),
-        /* @__PURE__ */ jsx(FormField$1, { title: "Secret Key", inputId: secretKeyId, children: /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            id: secretKeyId,
-            onChange: handleChangeSecretKey,
-            type: "text",
-            value: state.secretKey ?? "",
-            required: !!state.token || state.enableSignedUrls
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
-          /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
-            /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                id: enableSignedUrlsId,
-                onChange: handleChangeEnableSignedUrls,
-                checked: state.enableSignedUrls,
-                style: { display: "block" }
-              }
-            ),
-            /* @__PURE__ */ jsx(Box, { flex: 1, paddingLeft: 3, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("label", { htmlFor: enableSignedUrlsId, children: "Enable Signed Urls" }) }) })
-          ] }),
-          secrets.signingKeyId && state.enableSignedUrls ? /* @__PURE__ */ jsx(Card, { padding: [3, 3, 3], radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-            /* @__PURE__ */ jsx(Text, { size: 1, children: "The signing key ID that Sanity will use is:" }),
-            /* @__PURE__ */ jsx(Code, { size: 1, children: secrets.signingKeyId }),
-            /* @__PURE__ */ jsxs(Text, { size: 1, children: [
-              "This key is only used for previewing content in the Sanity UI.",
-              /* @__PURE__ */ jsx("br", {}),
-              "You should generate a different key to use in your application server."
-            ] })
-          ] }) }) : null
-        ] }),
-        /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Stack, { padding: 4, space: 4, style: { minHeight: "50vh" }, children: [
+      /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
           /* @__PURE__ */ jsx(
-            Button,
+            TextInput,
             {
-              text: "Save",
-              disabled: !dirty,
-              loading: state.submitting,
-              tone: "primary",
-              mode: "default",
-              type: "submit"
+              value: searchQuery,
+              icon: SearchIcon,
+              onInput: (e) => setSearchQuery(e.currentTarget.value),
+              placeholder: "Search videos"
             }
           ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              disabled: state.submitting,
-              text: "Cancel",
-              mode: "bleed",
-              onClick: handleClose
-            }
-          )
+          /* @__PURE__ */ jsx(SelectSortOptions, { setSort, sort })
         ] }),
-        state.error && /* @__PURE__ */ jsx(Card, { padding: [3, 3, 3], radius: 2, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsx(Text, { children: state.error }) })
-      ] }) }) })
-    }
-  );
+        (onSelect ? "input" : "tool") == "tool" && /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+          /* @__PURE__ */ jsx(ImportVideosFromMux, {}),
+          /* @__PURE__ */ jsx(ResyncMetadata, {}),
+          /* @__PURE__ */ jsx(ConfigureApi, {})
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+        assets?.length > 0 && /* @__PURE__ */ jsxs(Label$1, { muted: !0, children: [
+          assets.length,
+          " video",
+          assets.length > 1 ? "s" : null,
+          " ",
+          searchQuery ? `matching "${searchQuery}"` : "found"
+        ] }),
+        /* @__PURE__ */ jsx(
+          Grid,
+          {
+            gap: 2,
+            style: {
+              gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))"
+            },
+            children: assets.map((asset) => /* @__PURE__ */ jsx(
+              VideoInBrowser,
+              {
+                asset,
+                onEdit: setEditedAsset,
+                onSelect
+              },
+              asset._id
+            ))
+          }
+        )
+      ] }),
+      isLoading && /* @__PURE__ */ jsx(SpinnerBox, {}),
+      !isLoading && assets.length === 0 && /* @__PURE__ */ jsx(Card, { marginY: 4, paddingX: 4, paddingY: 6, border: !0, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsx(Text, { align: "center", muted: !0, size: 3, children: searchQuery ? `No videos found for "${searchQuery}"` : "No videos in this dataset" }) })
+    ] }),
+    freshEditedAsset && /* @__PURE__ */ jsx(VideoDetails, { closeDialog: () => setEditedAsset(null), asset: freshEditedAsset })
+  ] });
+}
+const StudioTool = () => /* @__PURE__ */ jsx(VideosBrowser, {}), DEFAULT_TOOL_CONFIG = {
+  icon: ToolIcon,
+  title: "Videos"
+};
+function createStudioTool(config) {
+  const toolConfig = typeof config.tool == "object" ? config.tool : DEFAULT_TOOL_CONFIG;
+  return {
+    name: "mux",
+    icon: toolConfig.icon || DEFAULT_TOOL_CONFIG.icon,
+    title: toolConfig.title || DEFAULT_TOOL_CONFIG.title,
+    component: (props) => /* @__PURE__ */ jsx(StudioTool, { ...config, ...props })
+  };
 }
-var ConfigureApi$1 = memo(ConfigureApi), c = function(r) {
+const useAccessControl = (config) => {
+  const user = useCurrentUser();
+  return { hasConfigAccess: !config?.allowedRolesForConfiguration?.length || user?.roles?.some((role) => config.allowedRolesForConfiguration.includes(role.name)) };
+}, path = ["assetId", "data", "playbackId", "status", "thumbTime", "filename"], useAssetDocumentValues = (asset) => useDocumentValues(
+  isReference(asset) ? asset._ref : "",
+  path
+), useMuxPolling = (asset) => {
+  const client = useClient(), projectId = useProjectId(), dataset = useDataset(), shouldFetch = useMemo(
+    () => !!asset?.assetId && (asset?.status === "preparing" || asset?.data?.static_renditions?.status === "preparing"),
+    [asset?.assetId, asset?.data?.static_renditions?.status, asset?.status]
+  );
+  return useSWR(
+    shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset?.assetId}` : null,
+    async () => {
+      const { data } = await client.request({
+        url: `/addons/mux/assets/${dataset}/data/${asset.assetId}`,
+        withCredentials: !0,
+        method: "GET"
+      });
+      client.patch(asset._id).set({ status: data.status, data }).commit({ returnDocuments: !1 });
+    },
+    { refreshInterval: 2e3, refreshWhenHidden: !0, dedupingInterval: 1e3 }
+  );
+};
+var c = function(r) {
   var t, e;
   function n(t2) {
     var e2;
@@ -2307,10 +2543,7 @@ const InputFallback = () => /* @__PURE__ */ jsx("div", { style: { padding: 1 },
       /* @__PURE__ */ jsx(Box, { marginTop: 3, children: /* @__PURE__ */ jsx(Text, { align: "center", muted: !0, size: 1, children: "Loading\u2026" }) })
     ] })
   }
-) }), useAccessControl = (config) => {
-  const user = useCurrentUser();
-  return { hasConfigAccess: !config?.allowedRolesForConfiguration?.length || user?.roles?.some((role) => config.allowedRolesForConfiguration.includes(role.name)) };
-};
+) });
 function Onboard(props) {
   const { setDialogState } = props, handleOpen = useCallback(() => setDialogState("secrets"), [setDialogState]), { hasConfigAccess } = useAccessControl(props.config);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { style: { padding: 2 }, children: /* @__PURE__ */ jsx(
@@ -3789,7 +4022,7 @@ const Input = (props) => {
       }
     ),
     dialogState === "secrets" && hasConfigAccess && /* @__PURE__ */ jsx(
-      ConfigureApi$1,
+      ConfigureApiDialog,
       {
         setDialogState,
         secrets: secretDocumentValues.value.secrets