sanity-plugin-r2-video 0.1.0

package/dist/studio/index.js

@@ -0,0 +1,1836 @@
+import { resolveRenditionPath } from '../chunk-D5VS4ED7.js';
+export { resolveRenditionPath } from '../chunk-D5VS4ED7.js';
+import { PlayIcon } from '@sanity/icons/Play';
+import { defineType, defineField, definePlugin, useClient, set } from 'sanity';
+import { createContext, useState, useCallback, useEffect, useRef, useMemo, useContext, useId } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { UploadIcon } from '@sanity/icons/Upload';
+import { Stack, Button, Flex, Box, TextInput, Spinner, Text, Card, Grid, Dialog, Select, Switch } from '@sanity/ui';
+import { canEncodeVideo } from 'mediabunny';
+import { WarningOutlineIcon } from '@sanity/icons/WarningOutline';
+import { ChevronDownIcon } from '@sanity/icons/ChevronDown';
+import { ChevronRightIcon } from '@sanity/icons/ChevronRight';
+import { SearchIcon } from '@sanity/icons/Search';
+import { SyncIcon } from '@sanity/icons/Sync';
+import { TrashIcon } from '@sanity/icons/Trash';
+import { FolderIcon } from '@sanity/icons/Folder';
+
+// studio/client.ts
+var isUploadedObject = (value) => {
+  return typeof value === "object" && value !== null && "key" in value && "size" in value;
+};
+var authorize = (config) => {
+  return { authorization: `Bearer ${config.token}` };
+};
+var failed = async (response, action) => {
+  const detail = await response.text();
+  return new Error(`${action} failed (${response.status}). ${detail}`);
+};
+var uploadObject = async (config, key, body) => {
+  const response = await fetch(`${config.endpointUrl}/upload`, {
+    method: "POST",
+    headers: {
+      ...authorize(config),
+      "content-type": "video/mp4",
+      "x-object-key": key
+    },
+    body
+  });
+  if (!response.ok) {
+    throw await failed(response, `Uploading '${key}'`);
+  }
+  const payload = await response.json();
+  if (!isUploadedObject(payload)) {
+    throw new Error(`The Worker returned an unexpected response for '${key}'.`);
+  }
+  return payload;
+};
+var isKeyPage = (value) => {
+  return typeof value === "object" && value !== null && "keys" in value && Array.isArray(value.keys);
+};
+var listObjects = async (config) => {
+  const keys = [];
+  let cursor = null;
+  do {
+    const query = cursor ? `?cursor=${encodeURIComponent(cursor)}` : "";
+    const response = await fetch(`${config.endpointUrl}/files${query}`, {
+      headers: authorize(config)
+    });
+    if (!response.ok) {
+      throw await failed(response, "Listing objects");
+    }
+    const payload = await response.json();
+    if (!isKeyPage(payload)) {
+      throw new Error("The Worker returned an unexpected listing response.");
+    }
+    keys.push(...payload.keys);
+    cursor = payload.cursor;
+  } while (cursor);
+  return keys;
+};
+var deleteObjects = async (config, keys) => {
+  if (keys.length === 0) {
+    return;
+  }
+  const response = await fetch(`${config.endpointUrl}/files`, {
+    method: "DELETE",
+    headers: { ...authorize(config), "content-type": "application/json" },
+    body: JSON.stringify({ keys })
+  });
+  if (!response.ok) {
+    throw await failed(response, "Deleting objects");
+  }
+};
+
+// studio/delete-video.ts
+var QUERY_REFERENCES = `*[references($id)]{ _id, _type, title }`;
+var findReferencingDocuments = (client, id) => {
+  return client.fetch(QUERY_REFERENCES, { id });
+};
+var deleteVideoAsset = async (client, config, asset) => {
+  await client.delete(asset._id);
+  try {
+    await client.delete(asset.poster.asset._ref);
+  } catch (error) {
+    console.info(`Kept poster for '${asset.filename}' \u2014 still in use.`, error);
+  }
+  await deleteObjects(
+    config,
+    asset.renditions.map((rendition) => rendition.key)
+  );
+};
+
+// studio/folders.ts
+var QUERY_FOLDERS = `*[_type == $folderType]{
+	_id,
+	name,
+	"parentId": parent._ref
+}`;
+var fetchFolders = (client, folderType) => {
+  return client.fetch(QUERY_FOLDERS, { folderType });
+};
+var resolveFolderPath = (folders, id) => {
+  const byId = new Map(folders.map((folder) => [folder._id, folder]));
+  const segments = [];
+  const seen = /* @__PURE__ */ new Set();
+  let current = byId.get(id);
+  while (current && !seen.has(current._id)) {
+    seen.add(current._id);
+    segments.unshift(current.name);
+    current = current.parentId ? byId.get(current.parentId) : void 0;
+  }
+  return segments.join("/");
+};
+var resolveFolderPaths = (folders) => {
+  return folders.map((folder) => ({
+    id: folder._id,
+    path: resolveFolderPath(folders, folder._id)
+  })).sort((a, b) => a.path.localeCompare(b.path));
+};
+var QUERY_FOLDER_BY_NAME = `*[_type == $folderType && name == $name][0]._id`;
+var findFolderByName = (client, folderType, name) => {
+  return client.fetch(QUERY_FOLDER_BY_NAME, {
+    folderType,
+    name
+  });
+};
+var resolvePosterFolder = async (client, folderType, name) => {
+  const existing = await findFolderByName(client, folderType, name);
+  if (existing) {
+    return existing;
+  }
+  const created = await client.create({ _type: folderType, name });
+  return created._id;
+};
+var R2VideoConfigContext = createContext(null);
+var R2VideoConfigProvider = ({ config, children }) => {
+  return /* @__PURE__ */ jsx(R2VideoConfigContext.Provider, { value: config, children });
+};
+var useR2VideoConfig = () => {
+  const config = useContext(R2VideoConfigContext);
+  if (!config) {
+    throw new Error(
+      "Missing R2 video config. Add `r2Video` to the Studio's plugin list."
+    );
+  }
+  return config;
+};
+
+// studio/defaults.ts
+var DEFAULTS = {
+  apiVersion: "2024-01-01",
+  tool: {
+    name: "r2-video",
+    title: "R2 Video"
+  },
+  folders: {
+    type: "media.folder",
+    poster: "_R2 Video Posters"
+  },
+  encoding: {
+    heights: [270, 360, 480, 720, 1080],
+    videoCodec: "avc",
+    audioCodec: "aac",
+    quality: 0.75,
+    preferBitrate: false,
+    nativeTopTier: false
+  }
+};
+var resolveConfig = (config) => {
+  return {
+    ...DEFAULTS,
+    ...config,
+    tool: { ...DEFAULTS.tool, ...config.tool },
+    folders: { ...DEFAULTS.folders, ...config.folders },
+    encoding: { ...DEFAULTS.encoding, ...config.encoding }
+  };
+};
+
+// studio/format.ts
+var formatSize = (bytes) => {
+  if (bytes < 1e6) {
+    return `${Math.round(bytes / 1e3)} KB`;
+  }
+  return `${(bytes / 1e6).toFixed(1)} MB`;
+};
+var formatDuration = (seconds) => {
+  return `${seconds.toFixed(1)}s`;
+};
+var formatBitrate = (bytes, seconds) => {
+  if (!seconds) {
+    return "\u2014";
+  }
+  return `${(bytes * 8 / seconds / 1e6).toFixed(2)} Mbps`;
+};
+var OVERLAY_STYLE = {
+  alignItems: "center",
+  background: "rgba(0, 0, 0, 0.75)",
+  color: "#fff",
+  display: "flex",
+  height: "100%",
+  justifyContent: "center",
+  position: "absolute",
+  right: 0,
+  top: 0,
+  width: "100%",
+  zIndex: 3
+};
+var DragOverlay = () => {
+  return /* @__PURE__ */ jsx(Flex, { style: OVERLAY_STYLE, children: /* @__PURE__ */ jsx(Text, { size: 3, style: { color: "inherit" }, children: "Drop files to upload" }) });
+};
+var useFileDrop = ({ onDrop, isEnabled }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const depth = useRef(0);
+  const reset = () => {
+    depth.current = 0;
+    setIsDragging(false);
+  };
+  useEffect(() => {
+    if (!isEnabled) {
+      depth.current = 0;
+      setIsDragging(false);
+    }
+  }, [isEnabled]);
+  const dragEntered = (event) => {
+    if (!isEnabled) {
+      return;
+    }
+    event.preventDefault();
+    depth.current += 1;
+    setIsDragging(true);
+  };
+  const dragLeft = (event) => {
+    if (!isEnabled) {
+      return;
+    }
+    event.preventDefault();
+    depth.current -= 1;
+    if (depth.current <= 0) {
+      reset();
+    }
+  };
+  const dragOver = (event) => {
+    if (isEnabled) {
+      event.preventDefault();
+    }
+  };
+  const dropped = (event) => {
+    if (!isEnabled) {
+      return;
+    }
+    event.preventDefault();
+    reset();
+    const files = Array.from(event.dataTransfer.files).filter((file) => {
+      return file.type.startsWith("video/");
+    });
+    if (files.length > 0) {
+      onDrop(files);
+    }
+  };
+  return {
+    isDragging: isDragging && isEnabled,
+    dropProps: {
+      onDragEnter: dragEntered,
+      onDragLeave: dragLeft,
+      onDragOver: dragOver,
+      onDrop: dropped
+    }
+  };
+};
+var canEncodeLadder = (codec) => {
+  return canEncodeVideo(codec);
+};
+var transcodeVideo = (request, progressed) => {
+  return new Promise((resolve, reject) => {
+    const worker = new Worker(
+      new URL("./transcode.worker.js", import.meta.url),
+      { type: "module" }
+    );
+    worker.addEventListener(
+      "message",
+      (event) => {
+        const message = event.data;
+        if (message.type === "progress") {
+          progressed(message.progress, message.label);
+          return;
+        }
+        worker.terminate();
+        if (message.type === "error") {
+          reject(new Error(message.message));
+          return;
+        }
+        resolve(message);
+      }
+    );
+    worker.addEventListener("error", (event) => {
+      worker.terminate();
+      reject(new Error(event.message));
+    });
+    worker.postMessage(request);
+  });
+};
+var PreviewEncode = ({ file, keepAudio, encoding }) => {
+  const [preview, setPreview] = useState(null);
+  const [isEncoding, setIsEncoding] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    setPreview(null);
+    setError(null);
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (preview) {
+        URL.revokeObjectURL(preview.url);
+      }
+    };
+  }, [preview]);
+  if (!file) {
+    return null;
+  }
+  const encode = async () => {
+    setIsEncoding(true);
+    setProgress(0);
+    setError(null);
+    try {
+      const result = await transcodeVideo(
+        { file, keepAudio, options: encoding, topTierOnly: true },
+        (value) => setProgress(value)
+      );
+      const [rendition] = result.renditions;
+      if (!rendition) {
+        throw new Error("Nothing was encoded.");
+      }
+      const blob = new Blob([rendition.data], { type: "video/mp4" });
+      setPreview({
+        url: URL.createObjectURL(blob),
+        width: rendition.width,
+        height: rendition.height,
+        bytes: blob.size,
+        duration: result.duration
+      });
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught));
+    }
+    setIsEncoding(false);
+  };
+  return /* @__PURE__ */ jsx(Card, { border: true, padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
+      /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxs(Text, { muted: true, size: 1, children: [
+        "Test these settings on ",
+        file.name
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: isEncoding,
+          mode: "ghost",
+          text: preview ? "Re-encode" : "Preview",
+          onClick: encode
+        }
+      )
+    ] }),
+    isEncoding && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
+      /* @__PURE__ */ jsx(Spinner, { muted: true }),
+      /* @__PURE__ */ jsxs(Text, { muted: true, size: 1, children: [
+        "Encoding top tier \u2014 ",
+        Math.round(progress * 100),
+        "%"
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "critical", children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) }),
+    preview && !isEncoding && /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          controls: true,
+          loop: true,
+          muted: true,
+          playsInline: true,
+          src: preview.url,
+          style: {
+            display: "block",
+            // Same reasoning as the details player: capped by height and
+            // centred, so nothing is letterboxed
+            maxHeight: 320,
+            maxWidth: "100%",
+            margin: "0 auto",
+            aspectRatio: `${preview.width} / ${preview.height}`,
+            borderRadius: 3
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(Text, { muted: true, size: 1, children: [
+        preview.width,
+        " \xD7 ",
+        preview.height,
+        " \xB7 ",
+        formatSize(preview.bytes),
+        " \xB7",
+        " ",
+        formatBitrate(preview.bytes, preview.duration)
+      ] }),
+      /* @__PURE__ */ jsx(Text, { muted: true, size: 0, children: "This is the largest rendition. Smaller tiers are a fraction of it." })
+    ] })
+  ] }) });
+};
+var UnsupportedBrowser = () => {
+  return /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, tone: "caution", children: /* @__PURE__ */ jsxs(Flex, { align: "flex-start", gap: 3, children: [
+    /* @__PURE__ */ jsx(Text, { size: 2, children: /* @__PURE__ */ jsx(WarningOutlineIcon, {}) }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+      /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "This browser can't encode video" }),
+      /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Uploading needs WebCodecs h264 encoding, which this browser doesn't provide. Open the Studio in Chrome to add videos. Everything already in the library still works here." })
+    ] })
+  ] }) });
+};
+var Field = ({ id, label, description, children }) => {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+    /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: id, size: 1, weight: "medium", children: label }),
+    children,
+    /* @__PURE__ */ jsx(Text, { muted: true, size: 0, children: description })
+  ] });
+};
+var ToggleRow = ({ id, label, description, children }) => {
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
+    /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+      /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: id, size: 1, children: label }),
+      /* @__PURE__ */ jsx(Text, { muted: true, size: 0, children: description })
+    ] }) }),
+    children
+  ] });
+};
+var UploadSettings = ({
+  folderId,
+  folderPaths,
+  keepAudio,
+  quality,
+  preferBitrate,
+  isDisabled,
+  onFolderChange,
+  onKeepAudioChange,
+  onQualityChange,
+  onPreferBitrateChange,
+  children
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const panelId = useId();
+  const folderInputId = `${panelId}-folder`;
+  const audioInputId = `${panelId}-keep-audio`;
+  const qualityInputId = `${panelId}-quality`;
+  const bitrateInputId = `${panelId}-prefer-bitrate`;
+  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-controls": panelId,
+        "aria-expanded": isOpen,
+        icon: isOpen ? ChevronDownIcon : ChevronRightIcon,
+        mode: "ghost",
+        text: "Settings",
+        onClick: () => setIsOpen(!isOpen)
+      }
+    ) }),
+    isOpen && /* @__PURE__ */ jsxs(Stack, { gap: 4, id: panelId, children: [
+      /* @__PURE__ */ jsx(
+        Field,
+        {
+          description: "Shared with the image library \u2014 create folders there and they appear here.",
+          id: folderInputId,
+          label: "Folder",
+          children: /* @__PURE__ */ jsxs(
+            Select,
+            {
+              disabled: isDisabled,
+              id: folderInputId,
+              value: folderId,
+              onChange: (event) => onFolderChange(event.currentTarget.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "No folder" }),
+                folderPaths.map((entry) => /* @__PURE__ */ jsx("option", { value: entry.id, children: entry.path }, entry.id))
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToggleRow,
+        {
+          id: audioInputId,
+          label: "Keep audio",
+          description: "Loops still play muted - autoplay requires it.",
+          children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: keepAudio,
+              disabled: isDisabled,
+              id: audioInputId,
+              onChange: (event) => onKeepAudioChange(event.currentTarget.checked)
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Field,
+        {
+          description: "0 to 1. Around 0.75 is where h264 stops being distinguishable from the source; 1 is near-lossless and can exceed it.",
+          id: qualityInputId,
+          label: "Quality",
+          children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              disabled: isDisabled,
+              id: qualityInputId,
+              max: 1,
+              min: 0,
+              step: 0.05,
+              type: "number",
+              value: quality,
+              onChange: (event) => onQualityChange(Number(event.currentTarget.value))
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToggleRow,
+        {
+          id: bitrateInputId,
+          label: "Predictable file size",
+          description: "Targets a bitrate instead of a quality level, so size stops depending on how detailed the footage is.",
+          children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: preferBitrate,
+              disabled: isDisabled,
+              id: bitrateInputId,
+              onChange: (event) => onPreferBitrateChange(event.currentTarget.checked)
+            }
+          )
+        }
+      ),
+      children
+    ] })
+  ] });
+};
+
+// studio/upload-video.ts
+var dropExtension = (name) => name.replace(/\.[^./\\]+$/, "");
+var ID_ALPHABET = "0123456789abcdefghjkmnpqrstvwxyz";
+var ID_LENGTH = 12;
+var createId = () => {
+  const bytes = crypto.getRandomValues(new Uint8Array(ID_LENGTH));
+  return Array.from(bytes, (byte) => ID_ALPHABET[byte & 31]).join("");
+};
+var rollback = async (client, config, written) => {
+  try {
+    await deleteObjects(config, written.keys);
+  } catch (error) {
+    console.warn("Could not remove stored renditions after a failure.", error);
+  }
+  if (!written.posterId) {
+    return;
+  }
+  try {
+    await client.delete(written.posterId);
+  } catch (error) {
+    console.warn("Could not remove the poster after a failure.", error);
+  }
+};
+var uploadVideo = async ({
+  client,
+  config,
+  file,
+  folderId,
+  keepAudio,
+  encoding,
+  progressed
+}) => {
+  const name = dropExtension(file.name);
+  const encoded = await transcodeVideo(
+    { file, keepAudio, options: encoding },
+    (progress, label) => progressed({ stage: "encoding", progress, label })
+  );
+  const written = { posterId: null, keys: [] };
+  try {
+    progressed({ stage: "storing", progress: 0, label: "poster" });
+    const poster = await client.assets.upload("image", encoded.poster, {
+      filename: `${name}.jpg`
+    });
+    written.posterId = poster._id;
+    const posterFolderId = await resolvePosterFolder(
+      client,
+      config.folders.type,
+      config.folders.poster
+    );
+    await client.patch(poster._id).set({
+      "opt.media.folder": {
+        _type: "reference",
+        _ref: posterFolderId,
+        _weak: true
+      }
+    }).commit();
+    const id = createId();
+    const renditions = [];
+    for (const [index, rendition] of encoded.renditions.entries()) {
+      const key = resolveRenditionPath(id, rendition.height);
+      written.keys.push(key);
+      const stored = await uploadObject(config, key, rendition.data);
+      renditions.push({
+        width: rendition.width,
+        height: rendition.height,
+        key: stored.key,
+        size: stored.size
+      });
+      progressed({
+        stage: "storing",
+        progress: (index + 1) / encoded.renditions.length,
+        label: `${rendition.height}p`
+      });
+    }
+    progressed({ stage: "saving", progress: 1, label: name });
+    return await client.create({
+      _type: "r2Video.asset",
+      filename: name,
+      ...folderId && {
+        folder: { _type: "reference", _ref: folderId }
+      },
+      poster: {
+        _type: "image",
+        asset: { _type: "reference", _ref: poster._id }
+      },
+      duration: encoded.duration,
+      hasAudio: encoded.hasAudio,
+      renditions,
+      uploadedAt: (/* @__PURE__ */ new Date()).toISOString()
+    });
+  } catch (error) {
+    await rollback(client, config, written);
+    throw error;
+  }
+};
+var STAGE_LABELS = {
+  encoding: "Encoding",
+  storing: "Storing",
+  saving: "Saving"
+};
+var STATUS_TONES = {
+  pending: "transparent",
+  waiting: "transparent",
+  working: "transparent",
+  done: "positive",
+  failed: "critical"
+};
+var describe = (item) => {
+  if (item.status === "failed") {
+    return item.error ?? "Failed.";
+  }
+  if (item.status === "done") {
+    return "Done";
+  }
+  if (item.status === "pending") {
+    return formatSize(item.file.size);
+  }
+  if (item.status === "waiting" || !item.progress) {
+    return "Waiting";
+  }
+  const { stage, progress, label } = item.progress;
+  return `${STAGE_LABELS[stage]} ${label} \xB7 ${Math.round(progress * 100)}%`;
+};
+var countLabel = (count) => {
+  return count === 1 ? "1 video" : `${count} video(s)`;
+};
+var toItem = (file) => ({
+  id: crypto.randomUUID(),
+  file,
+  status: "pending",
+  progress: null,
+  error: null
+});
+var DialogUpload = ({
+  folderId,
+  initialFiles,
+  onUploaded,
+  onClose
+}) => {
+  const config = useR2VideoConfig();
+  const client = useClient({ apiVersion: config.apiVersion });
+  const [canEncode, setCanEncode] = useState(null);
+  const [folders, setFolders] = useState([]);
+  const [targetFolder, setTargetFolder] = useState(folderId);
+  const [keepAudio, setKeepAudio] = useState(false);
+  const [quality, setQuality] = useState(config.encoding.quality);
+  const [preferBitrate, setPreferBitrate] = useState(
+    config.encoding.preferBitrate
+  );
+  const [items, setItems] = useState(
+    (initialFiles ?? []).map(toItem)
+  );
+  const isRunning = useRef(false);
+  const fileInputRef = useRef(null);
+  useEffect(() => {
+    canEncodeLadder(config.encoding.videoCodec).then(setCanEncode);
+  }, [config.encoding.videoCodec]);
+  useEffect(() => {
+    fetchFolders(client, config.folders.type).then(setFolders);
+  }, [client, config.folders.type]);
+  const encoding = useMemo(() => {
+    return { ...config.encoding, quality, preferBitrate };
+  }, [config.encoding, quality, preferBitrate]);
+  const paths = resolveFolderPaths(folders);
+  const pending = items.filter((item) => item.status === "pending");
+  const isBusy = items.some((item) => item.status === "working");
+  const canStart = pending.length > 0 && !isBusy && canEncode !== false;
+  const update = (id, changes) => {
+    setItems((existing) => {
+      return existing.map((item) => {
+        return item.id === id ? { ...item, ...changes } : item;
+      });
+    });
+  };
+  const run = async (queued) => {
+    if (isRunning.current) {
+      return;
+    }
+    isRunning.current = true;
+    for (const item of queued) {
+      update(item.id, { status: "working", progress: null });
+      try {
+        const asset = await uploadVideo({
+          client,
+          config,
+          file: item.file,
+          folderId: targetFolder,
+          keepAudio,
+          encoding,
+          progressed: (progress) => update(item.id, { progress })
+        });
+        update(item.id, { status: "done", progress: null });
+        onUploaded(asset);
+      } catch (error) {
+        update(item.id, {
+          status: "failed",
+          progress: null,
+          error: error instanceof Error ? error.message : String(error)
+        });
+      }
+    }
+    isRunning.current = false;
+  };
+  const stage = (files) => {
+    setItems((existing) => [...existing, ...files.map(toItem)]);
+  };
+  const { isDragging, dropProps } = useFileDrop({
+    isEnabled: !isBusy && canEncode !== false,
+    onDrop: stage
+  });
+  const browse = () => {
+    const input = fileInputRef.current;
+    if (input) {
+      input.click();
+    }
+  };
+  const chosen = (event) => {
+    stage(Array.from(event.target.files ?? []));
+    event.target.value = "";
+  };
+  const removed = (id) => {
+    setItems((existing) => existing.filter((item) => item.id !== id));
+  };
+  const confirmed = () => {
+    const queued = pending.map((item) => {
+      return { ...item, status: "waiting" };
+    });
+    const byId = new Map(queued.map((item) => [item.id, item]));
+    setItems((existing) => existing.map((item) => byId.get(item.id) ?? item));
+    run(queued);
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      header: "Upload videos",
+      id: "r2-video-upload",
+      width: 1,
+      onClose: isBusy ? void 0 : onClose,
+      footer: /* @__PURE__ */ jsx(Card, { borderTop: true, padding: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: isBusy,
+            mode: "ghost",
+            text: items.length > 0 && !canStart ? "Done" : "Cancel",
+            width: "fill",
+            onClick: onClose
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: !canStart,
+            text: isBusy ? "Encoding\u2026" : `Upload ${countLabel(pending.length)}`,
+            tone: "primary",
+            width: "fill",
+            onClick: confirmed
+          }
+        ) })
+      ] }) }),
+      children: /* @__PURE__ */ jsx(Card, { padding: 4, children: /* @__PURE__ */ jsxs(Stack, { gap: 5, children: [
+        canEncode === false && /* @__PURE__ */ jsx(UnsupportedBrowser, {}),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            accept: "video/*",
+            multiple: true,
+            ref: fileInputRef,
+            style: { display: "none" },
+            type: "file",
+            onChange: chosen
+          }
+        ),
+        canEncode !== false && /* @__PURE__ */ jsxs(
+          Card,
+          {
+            border: true,
+            padding: 5,
+            radius: 2,
+            style: { borderStyle: "dashed", position: "relative" },
+            tone: "transparent",
+            ...dropProps,
+            children: [
+              isDragging && /* @__PURE__ */ jsx(DragOverlay, {}),
+              /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+                /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+                  /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(Text, { muted: true, size: 3, children: /* @__PURE__ */ jsx(UploadIcon, {}) }) }),
+                  /* @__PURE__ */ jsx(Text, { align: "center", muted: true, size: 1, children: "Drop videos here" }),
+                  /* @__PURE__ */ jsx(Text, { align: "center", muted: true, size: 0, children: "MP4, MOV or WebM \u2014 encoded to every size the site needs" })
+                ] }),
+                /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    disabled: isBusy || canEncode === null,
+                    mode: "ghost",
+                    text: "Choose videos",
+                    onClick: browse
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ),
+        items.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+          /* @__PURE__ */ jsx(Text, { muted: true, size: 1, weight: "medium", children: countLabel(items.length) }),
+          /* @__PURE__ */ jsx(Stack, { gap: 2, children: items.map((item) => /* @__PURE__ */ jsx(
+            Card,
+            {
+              border: true,
+              padding: 3,
+              radius: 2,
+              tone: STATUS_TONES[item.status],
+              children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
+                /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: 1, textOverflow: "ellipsis", children: item.file.name }) }),
+                /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: describe(item) }),
+                item.status === "pending" && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    "aria-label": `Remove ${item.file.name}`,
+                    disabled: isBusy,
+                    mode: "ghost",
+                    padding: 2,
+                    text: "\u2715",
+                    onClick: () => removed(item.id)
+                  }
+                )
+              ] })
+            },
+            item.id
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          UploadSettings,
+          {
+            folderId: targetFolder,
+            folderPaths: paths,
+            isDisabled: isBusy,
+            keepAudio,
+            preferBitrate,
+            quality,
+            onFolderChange: setTargetFolder,
+            onKeepAudioChange: setKeepAudio,
+            onPreferBitrateChange: setPreferBitrate,
+            onQualityChange: setQuality,
+            children: /* @__PURE__ */ jsx(
+              PreviewEncode,
+              {
+                encoding,
+                file: pending.length > 0 ? pending[0].file : null,
+                keepAudio
+              }
+            )
+          }
+        )
+      ] }) })
+    }
+  );
+};
+var readFolder = (options) => {
+  if (typeof options !== "object" || options === null) {
+    return "";
+  }
+  const folder = Reflect.get(options, "folder");
+  return typeof folder === "string" ? folder : "";
+};
+var InputVideo = (props) => {
+  const { onChange, readOnly, renderDefault, schemaType } = props;
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
+  const closeUpload = () => setIsUploadOpen(false);
+  const uploaded = (asset) => {
+    onChange(
+      set({
+        _type: "r2Video",
+        asset: { _type: "reference", _ref: asset._id }
+      })
+    );
+    closeUpload();
+  };
+  return /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+    renderDefault(props),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: readOnly === true,
+        icon: UploadIcon,
+        mode: "ghost",
+        text: "Upload video",
+        onClick: () => setIsUploadOpen(true)
+      }
+    ),
+    isUploadOpen && /* @__PURE__ */ jsx(
+      DialogUpload,
+      {
+        folderId: readFolder(schemaType.options),
+        onClose: closeUpload,
+        onUploaded: uploaded
+      }
+    )
+  ] });
+};
+var MAX_PLAYER_HEIGHT = 420;
+var resolvePreviewRendition = (renditions) => {
+  const ordered = [...renditions].sort((a, b) => a.height - b.height);
+  if (ordered.length === 0) {
+    return void 0;
+  }
+  return ordered[Math.max(0, ordered.length - 2)];
+};
+var VideoPreview = ({ renditions, posterUrl }) => {
+  const config = useR2VideoConfig();
+  const rendition = resolvePreviewRendition(renditions);
+  if (!rendition) {
+    return /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, tone: "caution", children: /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "This video has no renditions to play." }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "video",
+    {
+      autoPlay: true,
+      controls: true,
+      loop: true,
+      muted: true,
+      playsInline: true,
+      poster: posterUrl,
+      preload: "metadata",
+      src: `${config.bucketUrl}/${rendition.key}`,
+      style: {
+        display: "block",
+        // Sized by height, not width, so the element is exactly the shape
+        // of the video — a width-driven box capped by max-height would
+        // letterbox instead, painting bars around anything tall
+        maxHeight: MAX_PLAYER_HEIGHT,
+        maxWidth: "100%",
+        margin: "0 auto",
+        aspectRatio: `${rendition.width} / ${rendition.height}`,
+        borderRadius: 3
+      }
+    }
+  );
+};
+var isRendition = (value) => {
+  return typeof value === "object" && value !== null && "key" in value && "width" in value && "height" in value;
+};
+var readRenditions = (value) => {
+  if (typeof value !== "object" || value === null) {
+    return [];
+  }
+  const renditions = Reflect.get(value, "renditions");
+  if (!Array.isArray(renditions)) {
+    return [];
+  }
+  return renditions.filter(isRendition);
+};
+var InputVideoAsset = (props) => {
+  const renditions = readRenditions(props.value);
+  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+    renditions.length > 0 && /* @__PURE__ */ jsx(VideoPreview, { renditions }),
+    props.renderDefault(props)
+  ] });
+};
+
+// studio/schema-video.ts
+var createVideoAssetSchema = (config) => {
+  return defineType({
+    title: "Video",
+    name: "r2Video.asset",
+    type: "document",
+    components: { input: InputVideoAsset },
+    fields: [
+      defineField({
+        title: "Filename",
+        name: "filename",
+        type: "string",
+        description: "The name shown everywhere in the Studio. Renaming is safe \u2014 object keys carry no name, so nothing in storage depends on it.",
+        validation: (Rule) => Rule.required()
+      }),
+      defineField({
+        title: "Folder",
+        name: "folder",
+        type: "reference",
+        to: [{ type: config.folders.type }],
+        description: "The same folders the image library uses. Renaming one moves this video without touching anything already in the bucket."
+      }),
+      defineField({
+        title: "Poster",
+        name: "poster",
+        type: "image",
+        readOnly: true,
+        description: "First frame, stored as a normal Sanity image.",
+        validation: (Rule) => Rule.required()
+      }),
+      defineField({
+        title: "Duration",
+        name: "duration",
+        type: "number",
+        readOnly: true
+      }),
+      defineField({
+        title: "Has audio",
+        name: "hasAudio",
+        type: "boolean",
+        readOnly: true,
+        initialValue: false
+      }),
+      defineField({
+        title: "Renditions",
+        name: "renditions",
+        type: "array",
+        readOnly: true,
+        of: [
+          {
+            type: "object",
+            name: "rendition",
+            fields: [
+              { name: "width", type: "number" },
+              { name: "height", type: "number" },
+              { name: "key", type: "string" },
+              { name: "size", type: "number" }
+            ],
+            preview: {
+              select: { width: "width", height: "height", size: "size" },
+              prepare({ width, height, size }) {
+                return {
+                  title: `${width} \xD7 ${height}`,
+                  subtitle: formatSize(size ?? 0)
+                };
+              }
+            }
+          }
+        ]
+      }),
+      defineField({
+        title: "Uploaded at",
+        name: "uploadedAt",
+        type: "datetime",
+        readOnly: true
+      })
+    ],
+    preview: {
+      select: {
+        filename: "filename",
+        folder: "folder.name",
+        media: "poster"
+      },
+      prepare({ filename, folder, media }) {
+        return {
+          title: filename || "Untitled video",
+          subtitle: folder || "No folder",
+          media: media || (() => "\u25B6")
+        };
+      }
+    }
+  });
+};
+var SCHEMA_R2_VIDEO = defineType({
+  title: "Video",
+  name: "r2Video",
+  type: "object",
+  options: { collapsible: false },
+  components: { input: InputVideo },
+  fields: [
+    defineField({
+      title: "Asset",
+      name: "asset",
+      type: "reference",
+      to: [{ type: "r2Video.asset" }]
+    })
+  ],
+  preview: {
+    select: {
+      filename: "asset.filename",
+      media: "asset.poster"
+    },
+    prepare({ filename, media }) {
+      return {
+        title: filename || "No video selected.",
+        media: media || (() => "\u25B6")
+      };
+    }
+  }
+});
+var DialogDelete = ({ asset, onDeleted, onClose }) => {
+  const config = useR2VideoConfig();
+  const client = useClient({ apiVersion: config.apiVersion });
+  const [blockers, setBlockers] = useState(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    findReferencingDocuments(client, asset._id).then(setBlockers).catch(() => {
+      setError("Could not check which documents use this video.");
+    });
+  }, [client, asset._id]);
+  const confirmed = async () => {
+    setIsDeleting(true);
+    setError(null);
+    try {
+      await deleteVideoAsset(client, config, asset);
+      onDeleted();
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught));
+      setIsDeleting(false);
+    }
+  };
+  const totalBytes = asset.renditions.reduce((total, rendition) => {
+    return total + rendition.size;
+  }, 0);
+  const isBlocked = blockers !== null && blockers.length > 0;
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      header: "Delete video",
+      id: "r2-video-delete",
+      width: 1,
+      onClose: isDeleting ? void 0 : onClose,
+      footer: /* @__PURE__ */ jsx(Card, { borderTop: true, padding: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: isDeleting,
+            mode: "ghost",
+            text: "Cancel",
+            width: "fill",
+            onClick: onClose
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: isDeleting || isBlocked || blockers === null,
+            text: isDeleting ? "Deleting\u2026" : "Delete",
+            tone: "critical",
+            width: "fill",
+            onClick: confirmed
+          }
+        ) })
+      ] }) }),
+      children: /* @__PURE__ */ jsx(Card, { padding: 4, children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+        /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+          asset.filename,
+          " \u2014 ",
+          asset.renditions.length,
+          " renditions,",
+          " ",
+          formatSize(totalBytes),
+          ", plus its poster."
+        ] }),
+        blockers === null && !error && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ jsx(Spinner, { muted: true }),
+          /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Checking where it's used\u2026" })
+        ] }),
+        isBlocked && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "caution", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Still in use" }),
+          /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Remove it from these documents first:" }),
+          blockers.map((blocker) => /* @__PURE__ */ jsxs(Text, { muted: true, size: 1, children: [
+            blocker.title || blocker._id,
+            " (",
+            blocker._type,
+            ")"
+          ] }, blocker._id))
+        ] }) }),
+        blockers !== null && blockers.length === 0 && /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Nothing references it. This can't be undone." }),
+        error && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "critical", children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) })
+      ] }) })
+    }
+  );
+};
+var Field2 = ({ label, children }) => {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+    /* @__PURE__ */ jsx(Text, { muted: true, size: 1, weight: "medium", children: label }),
+    children
+  ] });
+};
+var Fact = ({ label, value }) => {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+    /* @__PURE__ */ jsx(Text, { muted: true, size: 0, children: label }),
+    /* @__PURE__ */ jsx(Text, { size: 1, children: value })
+  ] });
+};
+var DialogDetails = ({
+  asset,
+  onChanged,
+  onDelete,
+  onClose
+}) => {
+  const config = useR2VideoConfig();
+  const client = useClient({ apiVersion: config.apiVersion });
+  const [folders, setFolders] = useState([]);
+  const [folderId, setFolderId] = useState(
+    asset.folder ? asset.folder._ref : ""
+  );
+  const [filename, setFilename] = useState(asset.filename);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    fetchFolders(client, config.folders.type).then(setFolders);
+  }, [client, config.folders.type]);
+  const totalBytes = asset.renditions.reduce((total, rendition) => {
+    return total + rendition.size;
+  }, 0);
+  const ordered = [...asset.renditions].sort((a, b) => b.height - a.height);
+  const largest = ordered[0];
+  const paths = resolveFolderPaths(folders);
+  const trimmed = filename.trim();
+  const savedFolderId = asset.folder ? asset.folder._ref : "";
+  const isRenamed = trimmed.length > 0 && trimmed !== asset.filename;
+  const isMoved = folderId !== savedFolderId;
+  const isDirty = isRenamed || isMoved;
+  const reset = () => {
+    setFilename(asset.filename);
+    setFolderId(savedFolderId);
+  };
+  const save = async () => {
+    if (!isDirty) {
+      return;
+    }
+    setIsSaving(true);
+    setError(null);
+    const changes = {};
+    const removals = [];
+    if (isRenamed) {
+      changes.filename = trimmed;
+    }
+    if (isMoved) {
+      if (folderId) {
+        changes.folder = { _type: "reference", _ref: folderId };
+      } else {
+        removals.push("folder");
+      }
+    }
+    try {
+      let mutation = client.patch(asset._id);
+      if (Object.keys(changes).length > 0) {
+        mutation = mutation.set(changes);
+      }
+      if (removals.length > 0) {
+        mutation = mutation.unset(removals);
+      }
+      await mutation.commit();
+      onChanged();
+    } catch (caught) {
+      reset();
+      setError(caught instanceof Error ? caught.message : String(caught));
+    }
+    setIsSaving(false);
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      header: asset.filename,
+      id: "r2-video-details",
+      width: 1,
+      onClose: isSaving ? void 0 : onClose,
+      footer: /* @__PURE__ */ jsx(Card, { borderTop: true, padding: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Delete video",
+            disabled: isSaving,
+            icon: TrashIcon,
+            mode: "ghost",
+            tone: "critical",
+            onClick: onDelete
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: isSaving,
+            mode: "ghost",
+            text: isDirty ? "Discard" : "Close",
+            width: "fill",
+            onClick: isDirty ? reset : onClose
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: isSaving || !isDirty,
+            text: isSaving ? "Saving\u2026" : "Save changes",
+            tone: "primary",
+            width: "fill",
+            onClick: save
+          }
+        ) })
+      ] }) }),
+      children: /* @__PURE__ */ jsx(Card, { padding: 4, children: /* @__PURE__ */ jsxs(Stack, { gap: 5, children: [
+        /* @__PURE__ */ jsx(
+          VideoPreview,
+          {
+            renditions: asset.renditions,
+            posterUrl: asset.posterUrl
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
+          /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Field2, { label: "Filename", children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              "aria-label": "Filename",
+              disabled: isSaving,
+              value: filename,
+              onChange: (event) => setFilename(event.currentTarget.value),
+              onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                  save();
+                }
+              }
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Field2, { label: "Folder", children: /* @__PURE__ */ jsxs(
+            Select,
+            {
+              "aria-label": "Folder",
+              disabled: isSaving,
+              value: folderId,
+              onChange: (event) => setFolderId(event.currentTarget.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "No folder" }),
+                paths.map((entry) => /* @__PURE__ */ jsx("option", { value: entry.id, children: entry.path }, entry.id))
+              ]
+            }
+          ) }) })
+        ] }),
+        error && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "critical", children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) }),
+        /* @__PURE__ */ jsx(Card, { border: true, padding: 4, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsxs(Grid, { gap: 4, gridTemplateColumns: [2, 4], children: [
+          /* @__PURE__ */ jsx(
+            Fact,
+            {
+              label: "Source",
+              value: largest ? `${largest.width} \xD7 ${largest.height}` : "Unknown"
+            }
+          ),
+          /* @__PURE__ */ jsx(Fact, { label: "Duration", value: formatDuration(asset.duration) }),
+          /* @__PURE__ */ jsx(
+            Fact,
+            {
+              label: "Audio",
+              value: asset.hasAudio ? "Kept" : "Stripped"
+            }
+          ),
+          /* @__PURE__ */ jsx(Fact, { label: "Total", value: formatSize(totalBytes) })
+        ] }) }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+          /* @__PURE__ */ jsx(Text, { muted: true, size: 1, weight: "medium", children: "Renditions" }),
+          /* @__PURE__ */ jsx(Card, { border: true, radius: 2, children: ordered.map((rendition, index) => /* @__PURE__ */ jsx(
+            Card,
+            {
+              borderTop: index > 0,
+              padding: 3,
+              radius: 0,
+              children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
+                /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+                  rendition.width,
+                  " \xD7 ",
+                  rendition.height
+                ] }) }),
+                /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: formatSize(rendition.size) })
+              ] })
+            },
+            rendition.key
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs(Text, { muted: true, size: 0, children: [
+          "Uploaded ",
+          new Date(asset.uploadedAt).toLocaleString()
+        ] })
+      ] }) })
+    }
+  );
+};
+
+// studio/orphans.ts
+var QUERY_LIVE_KEYS = `array::unique(*[_type == "r2Video.asset"].renditions[].key)`;
+var QUERY_ORPHAN_POSTERS = `*[
+	_type == "sanity.imageAsset"
+	&& opt.media.folder._ref == $folderId
+	&& count(*[references(^._id)]) == 0
+]._id`;
+var findOrphans = async (client, config) => {
+  const folderId = await findFolderByName(
+    client,
+    config.folders.type,
+    config.folders.poster
+  );
+  const [stored, liveKeys, posterIds] = await Promise.all([
+    listObjects(config),
+    client.fetch(QUERY_LIVE_KEYS),
+    folderId ? client.fetch(QUERY_ORPHAN_POSTERS, { folderId }) : Promise.resolve([])
+  ]);
+  const live = new Set(liveKeys);
+  return {
+    keys: stored.filter((key) => !live.has(key)),
+    posterIds
+  };
+};
+var removeOrphans = async (client, config, orphans) => {
+  await deleteObjects(config, orphans.keys);
+  for (const posterId of orphans.posterIds) {
+    try {
+      await client.delete(posterId);
+    } catch (error) {
+      console.warn(`Kept poster '${posterId}' \u2014 still referenced.`, error);
+    }
+  }
+};
+var countLabel2 = (count, noun) => {
+  return `${count} ${noun}${count === 1 ? "" : "s"}`;
+};
+var DialogOrphans = ({ onCleaned, onClose }) => {
+  const config = useR2VideoConfig();
+  const client = useClient({ apiVersion: config.apiVersion });
+  const [orphans, setOrphans] = useState(null);
+  const [isRemoving, setIsRemoving] = useState(false);
+  const [isDone, setIsDone] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    findOrphans(client, config).then(setOrphans).catch((caught) => {
+      setError(caught instanceof Error ? caught.message : String(caught));
+    });
+  }, [client, config]);
+  const confirmed = async () => {
+    if (!orphans) {
+      return;
+    }
+    setIsRemoving(true);
+    setError(null);
+    try {
+      await removeOrphans(client, config, orphans);
+      setIsDone(true);
+      onCleaned();
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught));
+    }
+    setIsRemoving(false);
+  };
+  const total = orphans ? orphans.keys.length + orphans.posterIds.length : 0;
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      header: "Sync storage",
+      id: "r2-video-orphans",
+      width: 1,
+      onClose: isRemoving ? void 0 : onClose,
+      footer: /* @__PURE__ */ jsx(Card, { borderTop: true, padding: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: isRemoving,
+            mode: "ghost",
+            text: isDone ? "Done" : "Cancel",
+            width: "fill",
+            onClick: onClose
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: isRemoving || isDone || total === 0,
+            text: isRemoving ? "Removing\u2026" : "Remove",
+            tone: "critical",
+            width: "fill",
+            onClick: confirmed
+          }
+        ) })
+      ] }) }),
+      children: /* @__PURE__ */ jsx(Card, { padding: 4, children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+        !orphans && !error && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ jsx(Spinner, { muted: true }),
+          /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Comparing storage against the library\u2026" })
+        ] }),
+        isDone && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "positive", children: /* @__PURE__ */ jsx(Text, { size: 1, children: "Removed." }) }),
+        orphans && !isDone && total === 0 && /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Nothing to clean up \u2014 every stored file belongs to a video." }),
+        orphans && !isDone && total > 0 && /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+          /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+            "Found ",
+            countLabel2(orphans.keys.length, "orphaned file"),
+            " in R2 and ",
+            countLabel2(orphans.posterIds.length, "unused poster"),
+            " in Sanity."
+          ] }),
+          /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Nothing references any of them, so removing them can't affect the site. This can't be undone." })
+        ] }),
+        error && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "critical", children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) })
+      ] }) })
+    }
+  );
+};
+var SIDEBAR_WIDTH = 260;
+var Row = ({ label, count, isSelected, hasIcon, onSelect }) => {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      as: "button",
+      padding: 3,
+      radius: 2,
+      tone: isSelected ? "primary" : "default",
+      onClick: onSelect,
+      style: { cursor: "pointer", textAlign: "left", width: "100%" },
+      children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
+        hasIcon && /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: /* @__PURE__ */ jsx(FolderIcon, {}) }),
+        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: 1,
+            textOverflow: "ellipsis",
+            weight: isSelected ? "medium" : void 0,
+            children: label
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: count })
+      ] })
+    }
+  );
+};
+var FolderSidebar = ({
+  folders,
+  counts,
+  total,
+  selectedId,
+  onSelect
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      borderRight: true,
+      height: "fill",
+      style: { width: SIDEBAR_WIDTH, flex: "none", overflowY: "auto" },
+      children: [
+        /* @__PURE__ */ jsx(Card, { borderBottom: true, padding: 4, children: /* @__PURE__ */ jsx(Text, { muted: true, size: 0, weight: "semibold", children: "FOLDERS" }) }),
+        /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
+          /* @__PURE__ */ jsx(
+            Row,
+            {
+              count: total,
+              isSelected: !selectedId,
+              label: "All assets",
+              onSelect: () => onSelect("")
+            }
+          ),
+          folders.map((folder) => /* @__PURE__ */ jsx(
+            Row,
+            {
+              count: counts.get(folder.id) ?? 0,
+              hasIcon: true,
+              isSelected: selectedId === folder.id,
+              label: folder.path,
+              onSelect: () => onSelect(folder.id)
+            },
+            folder.id
+          ))
+        ] }) })
+      ]
+    }
+  );
+};
+var QUERY_ASSETS = `*[_type == "r2Video.asset"] | order(uploadedAt desc){
+	_id,
+	_type,
+	filename,
+	folder,
+	poster,
+	duration,
+	hasAudio,
+	renditions,
+	uploadedAt,
+	"posterUrl": poster.asset->url,
+	"folderName": folder->name
+}`;
+var slugify = (name) => {
+  return name.toLowerCase().replace(/['\u2019]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+};
+var toTitle = (asset, isFiltered) => {
+  if (isFiltered || !asset.folderName) {
+    return asset.filename;
+  }
+  return `${slugify(asset.folderName)}/${asset.filename}`;
+};
+var matches = (asset, search) => {
+  if (!search) {
+    return true;
+  }
+  const term = search.toLowerCase();
+  const folderName = asset.folderName ?? "";
+  return asset.filename.toLowerCase().includes(term) || folderName.toLowerCase().includes(term);
+};
+var ToolVideoLibrary = () => {
+  const config = useR2VideoConfig();
+  const client = useClient({ apiVersion: config.apiVersion });
+  const [assets, setAssets] = useState(null);
+  const [folders, setFolders] = useState([]);
+  const [search, setSearch] = useState("");
+  const [folderId, setFolderId] = useState("");
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
+  const [isOrphansOpen, setIsOrphansOpen] = useState(false);
+  const [droppedFiles, setDroppedFiles] = useState([]);
+  const [detailing, setDetailing] = useState(null);
+  const [deleting, setDeleting] = useState(null);
+  const load = useCallback(() => {
+    client.fetch(QUERY_ASSETS).then(setAssets);
+    fetchFolders(client, config.folders.type).then(setFolders);
+  }, [client, config.folders.type]);
+  useEffect(load, [load]);
+  const counts = /* @__PURE__ */ new Map();
+  for (const asset of assets ?? []) {
+    if (asset.folder) {
+      const id = asset.folder._ref;
+      counts.set(id, (counts.get(id) ?? 0) + 1);
+    }
+  }
+  const paths = resolveFolderPaths(folders).filter((entry) => {
+    return counts.has(entry.id);
+  });
+  const { isDragging, dropProps } = useFileDrop({
+    isEnabled: !isUploadOpen,
+    onDrop: (files) => {
+      setDroppedFiles(files);
+      setIsUploadOpen(true);
+    }
+  });
+  const closeUpload = () => {
+    setIsUploadOpen(false);
+    setDroppedFiles([]);
+    load();
+  };
+  const visible = (assets ?? []).filter((asset) => {
+    const inFolder = !folderId || asset.folder && asset.folder._ref === folderId;
+    return matches(asset, search) && inFolder;
+  });
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      style: { position: "relative", height: "100%", minHeight: "100%" },
+      ...dropProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          FolderSidebar,
+          {
+            counts,
+            folders: paths,
+            selectedId: folderId,
+            total: (assets ?? []).length,
+            onSelect: setFolderId
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { flex: 1, style: { overflowY: "auto" }, children: /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
+            /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                icon: SearchIcon,
+                placeholder: "Search videos",
+                value: search,
+                onChange: (event) => setSearch(event.currentTarget.value)
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: SyncIcon,
+                mode: "ghost",
+                text: "Sync",
+                onClick: () => setIsOrphansOpen(true)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: UploadIcon,
+                text: "Upload",
+                tone: "primary",
+                onClick: () => setIsUploadOpen(true)
+              }
+            )
+          ] }),
+          assets === null && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, padding: 4, children: [
+            /* @__PURE__ */ jsx(Spinner, { muted: true }),
+            /* @__PURE__ */ jsx(Text, { muted: true, size: 1, children: "Loading library\u2026" })
+          ] }),
+          assets !== null && visible.length === 0 && /* @__PURE__ */ jsx(Card, { padding: 5, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsx(Text, { align: "center", muted: true, size: 1, children: "No videos here yet." }) }),
+          /* @__PURE__ */ jsx(Grid, { gridTemplateColumns: [1, 2, 3, 4], gap: 3, children: visible.map((asset) => /* @__PURE__ */ jsx(
+            Card,
+            {
+              as: "button",
+              border: true,
+              padding: 2,
+              radius: 2,
+              style: { cursor: "pointer", textAlign: "left" },
+              onClick: () => setDetailing(asset),
+              children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    style: {
+                      aspectRatio: "16 / 9",
+                      backgroundImage: asset.posterUrl ? `url(${asset.posterUrl}?w=480&fit=crop&auto=format)` : void 0,
+                      backgroundPosition: "center",
+                      backgroundSize: "cover",
+                      borderRadius: 2
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+                  /* @__PURE__ */ jsx(Text, { size: 1, textOverflow: "ellipsis", weight: "medium", children: toTitle(asset, Boolean(folderId)) }),
+                  /* @__PURE__ */ jsxs(Text, { muted: true, size: 1, children: [
+                    asset.renditions.length,
+                    " sizes",
+                    asset.hasAudio ? " \xB7 audio" : ""
+                  ] })
+                ] })
+              ] })
+            },
+            asset._id
+          )) })
+        ] }) }) }),
+        isDragging && /* @__PURE__ */ jsx(DragOverlay, {}),
+        isUploadOpen && /* @__PURE__ */ jsx(
+          DialogUpload,
+          {
+            folderId,
+            initialFiles: droppedFiles,
+            onClose: closeUpload,
+            onUploaded: load
+          }
+        ),
+        isOrphansOpen && /* @__PURE__ */ jsx(
+          DialogOrphans,
+          {
+            onCleaned: load,
+            onClose: () => setIsOrphansOpen(false)
+          }
+        ),
+        detailing && /* @__PURE__ */ jsx(
+          DialogDetails,
+          {
+            asset: detailing,
+            onChanged: load,
+            onDelete: () => {
+              setDeleting(detailing);
+              setDetailing(null);
+            },
+            onClose: () => setDetailing(null)
+          }
+        ),
+        deleting && /* @__PURE__ */ jsx(
+          DialogDelete,
+          {
+            asset: deleting,
+            onClose: () => setDeleting(null),
+            onDeleted: () => {
+              setDeleting(null);
+              load();
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var r2Video = definePlugin((options) => {
+  const resolvedConfig = resolveConfig(options);
+  return {
+    // The plugin's own identity, not the tool's route — 'tool.name' below is
+    // configurable and moves the tool's URL, this never changes
+    name: "r2-video",
+    schema: {
+      types: [createVideoAssetSchema(resolvedConfig), SCHEMA_R2_VIDEO]
+    },
+    studio: {
+      components: {
+        layout: (props) => /* @__PURE__ */ jsx(R2VideoConfigProvider, { config: resolvedConfig, children: props.renderDefault(props) })
+      }
+    },
+    tools: [
+      {
+        name: resolvedConfig.tool.name,
+        title: resolvedConfig.tool.title,
+        icon: PlayIcon,
+        component: ToolVideoLibrary
+      }
+    ]
+  };
+});
+
+export { SCHEMA_R2_VIDEO, VideoPreview, createVideoAssetSchema, deleteVideoAsset, fetchFolders, findReferencingDocuments, r2Video, resolveFolderPath, resolveFolderPaths, resolvePreviewRendition, uploadVideo };