sanity-plugin-r2-video 0.1.2 → 0.1.3

package/README.md

@@ -7,7 +7,7 @@ A video plugin for Sanity Studio that encodes in the browser and stores plain MP
 
 ## Introduction
 
-An editor drops in one file. Out come **renditions** — one MP4 per height you configured, plus the first frame as a poster:
+An editor drops in one file. Out come **renditions** - one MP4 per height you configured, plus the first frame as a poster:
 
 ```
 j6w3wy2bd0jq/270.mp4     840 KB
@@ -269,6 +269,26 @@ pnpm run build      # tsup: ESM + types into dist
 
 `./worker` ships as TypeScript. Wrangler compiles it, and the generated Worker extends `worker/tsconfig.json` for the compiler options it was written against.
 
+### Linking it into a Studio
+
+Point a Studio at a checkout with a `link:` override, then allow this directory in Vite. The encoder is loaded as a worker by URL rather than imported, so it never enters the module graph Vite serves by default, and every upload fails on a 403 without this:
+
+```ts
+// sanity.cli.ts
+vite: (config) => ({
+  ...config,
+  server: {
+    ...config.server,
+    fs: {
+      ...config.server?.fs,
+      allow: [...(config.server?.fs?.allow ?? []), "/path/to/sanity-plugin-r2-video"],
+    },
+  },
+});
+```
+
+Vite doesn't watch a linked package, so a rebuild needs a hard reload rather than arriving over HMR.
+
 ## License
 
 MIT

package/bin/cli.js

@@ -9,7 +9,7 @@ const USAGE = `
   sanity-plugin-r2-video setup worker [directory]
 
   Writes a deployable Cloudflare Worker: A wrangler config filled in from your
-  answers, and an entry point that re-exports this package's endpoint — so
+  answers, and an entry point that re-exports this package's endpoint - so
   upgrading the package upgrades the Worker.
 
   directory   Where to write it. Defaults to ./r2-video-worker
@@ -40,8 +40,8 @@ const parseFlags = (argv) => {
 
 /**
  * The Worker re-exports the package's handler rather than copying it, so
- * upgrading the package upgrades the deployed endpoint. Only identity —
- * name, account, bucket, origins — is generated.
+ * upgrading the package upgrades the deployed endpoint. Only identity -
+ * name, account, bucket, origins - is generated.
  */
 const ENTRY = `// The endpoint itself lives in the plugin, so upgrading the package upgrades
 // this Worker. Only deployment identity belongs here, in \`wrangler.jsonc\`.
@@ -67,7 +67,7 @@ const ask = async (rl, question, fallback) => {
 
 /**
  * Only the values that differ per deployment. The binding name, the entry point
- * and the compatibility date are fixed — the Worker source expects them, so
+ * and the compatibility date are fixed - the Worker source expects them, so
  * asking would only create a way to get them wrong.
  */
 const createConfig = ({ name, accountId, bucket, origins }) => {
@@ -78,7 +78,7 @@ const createConfig = ({ name, accountId, bucket, origins }) => {
 	"main": "src/index.ts",
 	"compatibility_date": "2026-08-01",
 
-	// The binding is what keeps R2 credentials out of your repo entirely — the
+	// The binding is what keeps R2 credentials out of your repo entirely - the
 	// Worker reaches the bucket directly, so nothing has to be signed or stored
 	"r2_buckets": [
 		{
@@ -93,7 +93,7 @@ const createConfig = ({ name, accountId, bucket, origins }) => {
 	}
 
 	// UPLOAD_TOKEN is set separately, with: wrangler secret put UPLOAD_TOKEN
-	// Not because it's secret — the Studio ships the same value to browsers —
+	// Not because it's secret - the Studio ships the same value to browsers -
 	// but so it stays out of this file, out of git, and out of deploy logs
 }
 `;

package/dist/studio/index.d.ts

@@ -28,17 +28,17 @@ type R2VideoPoster = {
     asset: R2VideoReference;
 };
 /**
- * An `r2Video.asset` document. Metadata only — every MP4 lives in R2, and the
+ * An `r2Video.asset` document. Metadata only - every MP4 lives in R2, and the
  * poster lives in Sanity's own image pipeline so it inherits the CDN, the
  * `srcset` helpers and the native preview branch.
  */
 type R2VideoAsset = {
     _id: string;
     _type: "r2Video.asset";
-    /** Display name. Editable — nothing in storage depends on it. */
+    /** Display name. Editable - nothing in storage depends on it. */
     filename: string;
     /**
-     * The media library folder this video belongs to — the same documents the
+     * The media library folder this video belongs to - the same documents the
      * image browser uses, so folders are shared rather than mirrored. Object
      * keys keep the prefix they were uploaded under, so renaming a folder moves
      * the video in the Studio without invalidating anything already in R2.
@@ -50,7 +50,7 @@ type R2VideoAsset = {
     renditions: R2VideoRendition[];
     uploadedAt: string;
 };
-/** The value an `r2Video` field holds — a reference to an `r2Video.asset`. */
+/** The value an `r2Video` field holds - a reference to an `r2Video.asset`. */
 type R2VideoValue = {
     _type?: "r2Video";
     asset?: R2VideoReference;
@@ -68,7 +68,7 @@ type R2VideoFieldOptions = {
 type R2VideoEncodingConfig = {
     /**
      * Rendition heights to produce, in any order. A source shorter than a tier
-     * skips it — nothing is ever upscaled.
+     * skips it - nothing is ever upscaled.
      */
     heights?: number[];
     /**
@@ -81,7 +81,7 @@ type R2VideoEncodingConfig = {
     /**
      * Compression level passed to both encoders, from 0 (worst) to 1 (best).
      *
-     * For codecs that support it — h264 included — this maps to a **quantizer**,
+     * For codecs that support it - h264 included - this maps to a **quantizer**,
      * not a bitrate. That means constant quality and *variable file size*: the
      * output is as large as the footage needs to hit that quality, so detailed
      * or grainy material produces much bigger files than flat material.
@@ -93,7 +93,7 @@ type R2VideoEncodingConfig = {
      *
      * QP 22 is h264's practical transparency threshold, which is why 0.75 is the
      * default. Going to 1 can produce a file **larger than the source** when the
-     * source was exported at a normal quantizer — you are asking for a
+     * source was exported at a normal quantizer - you are asking for a
      * higher-fidelity encode than the original, and encoding can't add back
      * detail that was never captured.
      */
@@ -102,12 +102,12 @@ type R2VideoEncodingConfig = {
      * Encode to a target **bitrate** instead of a quantizer.
      *
      * Flips the trade-off `quality` makes. The quantizer default is constant
-     * quality with variable size — grainy footage produces far bigger files than
+     * quality with variable size - grainy footage produces far bigger files than
      * flat footage. With this on, size becomes predictable and quality varies
      * instead: a tier lands at roughly the same weight whatever you feed it.
      *
      * The target is derived from frame size and `quality`, using 3 Mbps at
-     * 1920×1080 as the reference and a multiplier from the quality curve — so
+     * 1920×1080 as the reference and a multiplier from the quality curve - so
      * `0.75` is about 6.1 Mbps at 1080p, and `0.5` about 3.2 Mbps.
      *
      * Worth turning on when knowing what lands in the bucket matters more than
@@ -120,7 +120,7 @@ type R2VideoEncodingConfig = {
      * than transcodes: instant, and bit-identical to the upload.
      *
      * Off by default because it hands size control to whoever exported the file
-     * — a 60 Mbps master would be stored at 60 Mbps. That tier is rarely the one
+     * - a 60 Mbps master would be stored at 60 Mbps. That tier is rarely the one
      * served, since playback picks by element size, but the bytes are real.
      */
     nativeTopTier?: boolean;
@@ -139,7 +139,7 @@ type R2VideoPluginConfig = {
     endpointUrl: string;
     /**
      * Shared secret the Worker checks. This ships inside the Studio bundle, so
-     * it gates casual access rather than providing real authentication — pair it
+     * it gates casual access rather than providing real authentication - pair it
      * with the Worker's origin allowlist.
      */
     token: string;
@@ -191,14 +191,14 @@ declare const findReferencingDocuments: (client: SanityClient, id: string) => Pr
  *
  * The document goes before the poster, because it holds the strong reference
  * that would otherwise 409. And Sanity goes before R2, because the two failure
- * modes are not symmetric — an orphaned object is invisible and costs pennies,
+ * modes are not symmetric - an orphaned object is invisible and costs pennies,
  * whereas a document pointing at deleted media breaks the site.
  */
 declare const deleteVideoAsset: (client: SanityClient, config: R2VideoPluginConfig, asset: R2VideoAsset) => Promise<void>;
 
 /**
  * A folder from the media library. These are the *same* documents the image
- * browser uses, not a parallel set — a folder made in either place shows up in
+ * browser uses, not a parallel set - a folder made in either place shows up in
  * both, so there is one place folders are defined.
  */
 type MediaFolder = {
@@ -310,7 +310,7 @@ declare const createVideoAssetSchema: (config: ResolvedR2VideoConfig) => {
             folder: string;
             media: string;
         };
-        prepare({ filename, folder, media }: Record<"filename" | "media" | "folder", any>): {
+        prepare({ filename, folder, media }: Record<"media" | "filename" | "folder", any>): {
             title: any;
             subtitle: any;
             media: any;
@@ -338,13 +338,16 @@ declare const SCHEMA_R2_VIDEO: {
         to: {
             type: string;
         }[];
+        options: {
+            disableNew: true;
+        };
     }[];
     preview: {
         select: {
             filename: string;
             media: string;
         };
-        prepare({ filename, media }: Record<"filename" | "media", any>): {
+        prepare({ filename, media }: Record<"media" | "filename", any>): {
             title: any;
             media: any;
         };
@@ -392,7 +395,7 @@ type Props = {
 };
 /**
  * Plays the video rather than showing its first frame. Muted and looping to
- * match how these are used on the site, but with controls — in the Studio the
+ * match how these are used on the site, but with controls - in the Studio the
  * point is to check the footage, so scrubbing has to be possible.
  */
 declare const VideoPreview: ({ renditions, posterUrl }: Props) => react.JSX.Element;

package/dist/studio/index.js

@@ -5,7 +5,8 @@ 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 { Stack, Flex, Box, Button, TextInput, Spinner, Text, Card, Grid, Dialog, Select, Switch } from '@sanity/ui';
+import { AccessDeniedIcon } from '@sanity/icons/AccessDenied';
 import { canEncodeVideo } from 'mediabunny';
 import { WarningOutlineIcon } from '@sanity/icons/WarningOutline';
 import { ChevronDownIcon } from '@sanity/icons/ChevronDown';
@@ -92,7 +93,7 @@ var deleteVideoAsset = async (client, config, asset) => {
   try {
     await client.delete(asset.poster.asset._ref);
   } catch (error) {
-    console.info(`Kept poster for '${asset.filename}' \u2014 still in use.`, error);
+    console.info(`Kept poster for '${asset.filename}' - still in use.`, error);
   }
   await deleteObjects(
     config,
@@ -198,7 +199,7 @@ var formatDuration = (seconds) => {
 };
 var formatBitrate = (bytes, seconds) => {
   if (!seconds) {
-    return "\u2014";
+    return "-";
   }
   return `${(bytes * 8 / seconds / 1e6).toFixed(2)} Mbps`;
 };
@@ -218,12 +219,42 @@ var OVERLAY_STYLE = {
 var DragOverlay = () => {
   return /* @__PURE__ */ jsx(Flex, { style: OVERLAY_STYLE, children: /* @__PURE__ */ jsx(Text, { size: 3, style: { color: "inherit" }, children: "Drop files to upload" }) });
 };
+var hasVideoFile = (transfer) => {
+  return Array.from(transfer.items).some((item) => {
+    if (item.kind !== "file") {
+      return false;
+    }
+    return item.type === "" || item.type.startsWith("video/");
+  });
+};
+var DropToUpload = ({ isRejected }) => {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      radius: 2,
+      tone: isRejected ? "critical" : "primary",
+      style: {
+        position: "absolute",
+        inset: -4,
+        zIndex: 3,
+        opacity: 0.9,
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, justify: "center", style: { height: "100%" }, children: [
+        /* @__PURE__ */ jsx(Text, { size: 2, children: isRejected ? /* @__PURE__ */ jsx(AccessDeniedIcon, {}) : /* @__PURE__ */ jsx(UploadIcon, {}) }),
+        /* @__PURE__ */ jsx(Text, { size: 2, children: isRejected ? "Can't upload this file here" : "Drop to upload" })
+      ] })
+    }
+  );
+};
 var useFileDrop = ({ onDrop, isEnabled }) => {
   const [isDragging, setIsDragging] = useState(false);
+  const [isRejected, setIsRejected] = useState(false);
   const depth = useRef(0);
   const reset = () => {
     depth.current = 0;
     setIsDragging(false);
+    setIsRejected(false);
   };
   useEffect(() => {
     if (!isEnabled) {
@@ -238,6 +269,7 @@ var useFileDrop = ({ onDrop, isEnabled }) => {
     event.preventDefault();
     depth.current += 1;
     setIsDragging(true);
+    setIsRejected(!hasVideoFile(event.dataTransfer));
   };
   const dragLeft = (event) => {
     if (!isEnabled) {
@@ -269,6 +301,7 @@ var useFileDrop = ({ onDrop, isEnabled }) => {
   };
   return {
     isDragging: isDragging && isEnabled,
+    isRejected,
     dropProps: {
       onDragEnter: dragEntered,
       onDragLeave: dragLeft,
@@ -373,7 +406,7 @@ var PreviewEncode = ({ file, keepAudio, encoding }) => {
     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 ",
+        "Encoding top tier - ",
         Math.round(progress * 100),
         "%"
       ] })
@@ -474,7 +507,7 @@ var UploadSettings = ({
       /* @__PURE__ */ jsx(
         Field,
         {
-          description: "Shared with the image library \u2014 create folders there and they appear here.",
+          description: "Shared with the image library - create folders there and they appear here.",
           id: folderInputId,
           label: "Folder",
           children: /* @__PURE__ */ jsxs(
@@ -843,7 +876,7 @@ var DialogUpload = ({
                 /* @__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(Text, { align: "center", muted: true, size: 0, children: "MP4, MOV or WebM - encoded to every size the site needs" })
                 ] }),
                 /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(
                   Button,
@@ -923,7 +956,24 @@ var readFolder = (options) => {
 var InputVideo = (props) => {
   const { onChange, readOnly, renderDefault, schemaType } = props;
   const [isUploadOpen, setIsUploadOpen] = useState(false);
-  const closeUpload = () => setIsUploadOpen(false);
+  const [droppedFiles, setDroppedFiles] = useState([]);
+  const isDisabled = readOnly === true;
+  const closeUpload = () => {
+    setIsUploadOpen(false);
+    setDroppedFiles([]);
+  };
+  const openUpload = () => {
+    setDroppedFiles([]);
+    setIsUploadOpen(true);
+  };
+  const dropped = (files) => {
+    setDroppedFiles(files);
+    setIsUploadOpen(true);
+  };
+  const { isDragging, isRejected, dropProps } = useFileDrop({
+    onDrop: dropped,
+    isEnabled: !isDisabled && !isUploadOpen
+  });
   const uploaded = (asset) => {
     onChange(
       set({
@@ -933,22 +983,29 @@ var InputVideo = (props) => {
     );
     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)
-      }
-    ),
+  return /* @__PURE__ */ jsxs(Stack, { gap: 3, style: { position: "relative" }, ...dropProps, children: [
+    isDragging && /* @__PURE__ */ jsx(DropToUpload, { isRejected }),
+    /* @__PURE__ */ jsxs(Flex, { gap: 0, children: [
+      /* @__PURE__ */ jsx(Box, { flex: 1, children: renderDefault({
+        ...props,
+        renderField: (field) => field.children
+      }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: isDisabled,
+          icon: UploadIcon,
+          mode: "ghost",
+          text: "Upload",
+          onClick: openUpload
+        }
+      )
+    ] }),
     isUploadOpen && /* @__PURE__ */ jsx(
       DialogUpload,
       {
         folderId: readFolder(schemaType.options),
+        initialFiles: droppedFiles,
         onClose: closeUpload,
         onUploaded: uploaded
       }
@@ -983,7 +1040,7 @@ var VideoPreview = ({ renditions, posterUrl }) => {
       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
+        // 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%",
@@ -1208,7 +1265,11 @@ var SCHEMA_R2_VIDEO = defineType({
       title: "Asset",
       name: "asset",
       type: "reference",
-      to: [{ type: "r2Video.asset" }]
+      to: [{ type: "r2Video.asset" }],
+      // New videos come from the upload button beside this input, which
+      // encodes and stores before writing the document. Sanity's own create
+      // would make an empty one the pipeline never filled in
+      options: { disableNew: true }
     })
   ],
   preview: {
@@ -1282,7 +1343,7 @@ var DialogDelete = ({ asset, onDeleted, onClose }) => {
       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,",
           " ",
@@ -1499,7 +1560,7 @@ var removeOrphans = async (client, config, orphans) => {
     try {
       await client.delete(posterId);
     } catch (error) {
-      console.warn(`Kept poster '${posterId}' \u2014 still referenced.`, error);
+      console.warn(`Kept poster '${posterId}' - still referenced.`, error);
     }
   }
 };
@@ -1569,7 +1630,7 @@ var DialogOrphans = ({ onCleaned, onClose }) => {
           /* @__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__ */ jsx(Text, { muted: true, size: 1, children: "Nothing to clean up - every stored file belongs to a video." }),
         orphans && !isDone && total > 0 && /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
           /* @__PURE__ */ jsxs(Text, { size: 1, children: [
             "Found ",
@@ -1859,7 +1920,7 @@ var ToolVideoLibrary = () => {
 var r2Video = definePlugin((options) => {
   const resolvedConfig = resolveConfig(options);
   return {
-    // The plugin's own identity, not the tool's route — 'tool.name' below is
+    // 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: {

package/dist/studio/transcode.worker.d.ts

@@ -16,7 +16,7 @@ type TranscodeRequest = {
     options: TranscodeOptions;
     /**
      * Encode only the tallest tier and stop. Used to show what the current
-     * settings actually produce before committing to the whole ladder — the top
+     * settings actually produce before committing to the whole ladder - the top
      * tier is the one that varies most, and the one most likely to surprise.
      */
     topTierOnly?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sanity-plugin-r2-video",
-	"version": "0.1.2",
+	"version": "0.1.3",
 	"description": "Video for Sanity Studio, encoded in the browser and stored in Cloudflare R2 as a ladder of plain MP4s.",
 	"keywords": [
 		"sanity",

package/worker/index.ts

@@ -87,7 +87,7 @@ const storeObject = async (
 		},
 	});
 
-	// Only the key and size — the Studio builds URLs from its own configured
+	// Only the key and size - the Studio builds URLs from its own configured
 	// origin, so this Worker never needs to know one
 	return jsonResponse({ key, size: body.byteLength }, 200, headers);
 };