sanity-plugin-r2-video 0.1.0

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

@@ -0,0 +1,48 @@
+import { VideoCodec, AudioCodec } from 'mediabunny';
+
+/** Encoding settings, resolved by the caller so this file holds no defaults. */
+type TranscodeOptions = {
+    heights: number[];
+    videoCodec: VideoCodec;
+    audioCodec: AudioCodec;
+    quality: number;
+    preferBitrate: boolean;
+    nativeTopTier: boolean;
+};
+/** What the main thread sends in. */
+type TranscodeRequest = {
+    file: File;
+    keepAudio: boolean;
+    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
+     * tier is the one that varies most, and the one most likely to surprise.
+     */
+    topTierOnly?: boolean;
+};
+/** One finished rendition, still as raw bytes. */
+type TranscodedRendition = {
+    width: number;
+    height: number;
+    data: ArrayBuffer;
+};
+/** What the worker sends back, one message at a time. */
+type TranscodeMessage = {
+    type: "progress";
+    progress: number;
+    label: string;
+} | {
+    type: "result";
+    duration: number;
+    hasAudio: boolean;
+    poster: Blob;
+    posterWidth: number;
+    posterHeight: number;
+    renditions: TranscodedRendition[];
+} | {
+    type: "error";
+    message: string;
+};
+
+export type { TranscodeMessage, TranscodeOptions, TranscodeRequest, TranscodedRendition };

package/dist/studio/transcode.worker.js

@@ -0,0 +1,132 @@
+import { Input, BlobSource, ALL_FORMATS, CanvasSink, Quality, Output, BufferTarget, Mp4OutputFormat, Conversion } from 'mediabunny';
+
+// studio/transcode.worker.ts
+var resolveHeights = (sourceHeight, heights) => {
+  const ordered = [...heights].sort((a, b) => a - b);
+  const fitting = ordered.filter((height) => height <= sourceHeight);
+  const chosen = fitting.length > 0 ? fitting : ordered.slice(0, 1);
+  return chosen.reverse();
+};
+var resolveWidth = (height, aspectRatio) => {
+  return Math.round(height * aspectRatio / 2) * 2;
+};
+var post = (message, transfer = []) => {
+  self.postMessage(message, transfer);
+};
+var extractPoster = async (track) => {
+  const frame = await new CanvasSink(track).getCanvas(0);
+  if (!frame) {
+    throw new Error("Could not read a first frame from that video.");
+  }
+  const { canvas } = frame;
+  if (!(canvas instanceof OffscreenCanvas)) {
+    throw new Error("Expected an OffscreenCanvas while running in a worker.");
+  }
+  return {
+    poster: await canvas.convertToBlob({ type: "image/jpeg", quality: 0.92 }),
+    posterWidth: canvas.width,
+    posterHeight: canvas.height
+  };
+};
+var encodeRendition = async (source, width, height, hasAudio, isNative, options, progressed) => {
+  const quality = new Quality({
+    quality: options.quality,
+    preferBitrate: options.preferBitrate
+  });
+  const output = new Output({
+    // Fast Start puts the metadata at the front so the browser can start
+    // playing before the whole file has arrived
+    format: new Mp4OutputFormat({ fastStart: "in-memory" }),
+    target: new BufferTarget()
+  });
+  const conversion = await Conversion.init({
+    input: new Input({ formats: ALL_FORMATS, source: new BlobSource(source) }),
+    output,
+    video: isNative ? {} : {
+      width,
+      height,
+      fit: "contain",
+      codec: options.videoCodec,
+      quality
+    },
+    audio: hasAudio ? { codec: options.audioCodec, quality } : { discard: true }
+  });
+  conversion.onProgress = progressed;
+  await conversion.execute();
+  const { buffer } = output.target;
+  if (!buffer) {
+    throw new Error(`Encoding produced no data at ${height}p.`);
+  }
+  return buffer;
+};
+var transcode = async ({
+  file,
+  keepAudio,
+  options,
+  topTierOnly
+}) => {
+  const input = new Input({
+    formats: ALL_FORMATS,
+    source: new BlobSource(file)
+  });
+  const track = await input.getPrimaryVideoTrack();
+  if (!track) {
+    throw new Error("That file has no video track.");
+  }
+  const sourceWidth = await track.getDisplayWidth();
+  const sourceHeight = await track.getDisplayHeight();
+  const duration = await input.computeDuration();
+  const audioTrack = await input.getPrimaryAudioTrack();
+  const hasAudio = keepAudio && audioTrack !== null;
+  const sourceCodec = await track.getCodec();
+  const { poster, posterWidth, posterHeight } = await extractPoster(track);
+  const full = resolveHeights(sourceHeight, options.heights);
+  const heights = topTierOnly ? full.slice(0, 1) : full;
+  const aspectRatio = sourceWidth / sourceHeight;
+  const renditions = [];
+  let ladderSource = file;
+  for (const [index, height] of heights.entries()) {
+    const width = resolveWidth(height, aspectRatio);
+    const isNative = options.nativeTopTier && index === 0 && height === sourceHeight && sourceCodec === options.videoCodec;
+    const data = await encodeRendition(
+      ladderSource,
+      width,
+      height,
+      hasAudio,
+      isNative,
+      options,
+      (progress) => {
+        post({
+          type: "progress",
+          progress: (index + progress) / heights.length,
+          label: `${height}p`
+        });
+      }
+    );
+    renditions.push({ width, height, data });
+    if (index === 0) {
+      ladderSource = new Blob([data], { type: "video/mp4" });
+    }
+  }
+  return {
+    duration,
+    hasAudio,
+    poster,
+    posterWidth,
+    posterHeight,
+    renditions
+  };
+};
+self.addEventListener("message", (event) => {
+  transcode(event.data).then((result) => {
+    post(
+      { type: "result", ...result },
+      result.renditions.map((rendition) => rendition.data)
+    );
+  }).catch((error) => {
+    post({
+      type: "error",
+      message: error instanceof Error ? error.message : String(error)
+    });
+  });
+});

package/package.json

@@ -0,0 +1,88 @@
+{
+	"name": "sanity-plugin-r2-video",
+	"version": "0.1.0",
+	"description": "Video for Sanity Studio, encoded in the browser and stored in Cloudflare R2 as a ladder of plain MP4s.",
+	"keywords": [
+		"sanity",
+		"sanity-plugin",
+		"cloudflare",
+		"r2",
+		"video",
+		"webcodecs",
+		"mediabunny"
+	],
+	"license": "MIT",
+	"author": "Paulo Ferreira Jorge",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/PauloMFJ/sanity-plugin-r2-video.git"
+	},
+	"homepage": "https://github.com/PauloMFJ/sanity-plugin-r2-video#readme",
+	"bugs": "https://github.com/PauloMFJ/sanity-plugin-r2-video/issues",
+	"type": "module",
+	"sideEffects": false,
+	"exports": {
+		"./studio": {
+			"types": "./dist/studio/index.d.ts",
+			"default": "./dist/studio/index.js"
+		},
+		"./storage": {
+			"types": "./dist/storage.d.ts",
+			"default": "./dist/storage.js"
+		},
+		"./worker": "./worker/index.ts",
+		"./worker/tsconfig.json": "./worker/tsconfig.json",
+		"./package.json": "./package.json"
+	},
+	"bin": {
+		"sanity-plugin-r2-video": "./bin/cli.js"
+	},
+	"files": [
+		"dist",
+		"worker/index.ts",
+		"worker/tsconfig.json",
+		"bin"
+	],
+	"engines": {
+		"node": ">=20"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "tsup",
+		"type-check": "tsc --noEmit -p studio/tsconfig.json && tsc --noEmit -p worker/tsconfig.check.json",
+		"prepublishOnly": "pnpm run type-check && pnpm run build",
+		"setup:worker": "node bin/cli.js setup worker"
+	},
+	"dependencies": {
+		"mediabunny": "^1.55.4"
+	},
+	"peerDependencies": {
+		"@cloudflare/workers-types": "^5",
+		"@sanity/icons": "^5",
+		"@sanity/ui": "^4",
+		"react": "^19",
+		"react-dom": "^19",
+		"sanity": "^6",
+		"styled-components": "^6"
+	},
+	"peerDependenciesMeta": {
+		"@cloudflare/workers-types": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@cloudflare/workers-types": "^5.0.0",
+		"@sanity/icons": "^5.0.0",
+		"@sanity/ui": "^4.0.0",
+		"@types/react": "^19.0.0",
+		"@types/react-dom": "^19.0.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"sanity": "^6.0.0",
+		"styled-components": "^6.0.0",
+		"tsup": "^8.5.0",
+		"typescript": "^5.9.0"
+	}
+}

package/worker/index.ts

@@ -0,0 +1,181 @@
+type Env = {
+	BUCKET: R2Bucket;
+	UPLOAD_TOKEN: string;
+	ALLOWED_ORIGINS: string;
+};
+
+/** Keys are generated by the plugin, but this Worker never trusts that. */
+const KEY_PATTERN = /^[A-Za-z0-9][A-Za-z0-9/_-]*\.mp4$/;
+
+/** Maximum size of a single upload. Currently 100 MB. */
+const MAX_BYTES = 100 * 1024 * 1024;
+
+const isAllowedOrigin = (origin: string | null, env: Env): origin is string => {
+	if (!origin) return false;
+
+	return env.ALLOWED_ORIGINS.split(",")
+		.map((allowed) => allowed.trim())
+		.includes(origin);
+};
+
+/** Create CORS headers for allowed origins, or empty for disallowed ones. */
+const corsHeaders = (
+	origin: string | null,
+	env: Env,
+): Record<string, string> => {
+	if (!isAllowedOrigin(origin, env)) return {};
+
+	return {
+		"access-control-allow-origin": origin,
+		"access-control-allow-methods": "GET, POST, DELETE, OPTIONS",
+		"access-control-allow-headers": "authorization, content-type, x-object-key",
+		"access-control-max-age": "86400",
+		vary: "Origin",
+	};
+};
+
+/** Checks the `Authorization` header against the Worker's secret. */
+const isAuthorized = (request: Request, env: Env) => {
+	const header = request.headers.get("authorization");
+	return header === `Bearer ${env.UPLOAD_TOKEN}`;
+};
+
+/** Rejects traversal, absolute paths and anything that isn't an MP4. */
+const isAllowedKey = (key: unknown): key is string => {
+	if (typeof key !== "string" || !KEY_PATTERN.test(key)) return false;
+
+	return !key.includes("..");
+};
+
+/** Return a JSON response with the given body, status and headers. */
+const jsonResponse = (body: unknown, status: number, headers: HeadersInit) => {
+	return new Response(JSON.stringify(body), {
+		status,
+		headers: { ...headers, "content-type": "application/json" },
+	});
+};
+
+/** Store one rendition in the bucket, keyed by the `x-object-key` header. */
+const storeObject = async (
+	request: Request,
+	env: Env,
+	headers: HeadersInit,
+) => {
+	const key = request.headers.get("x-object-key");
+
+	if (!isAllowedKey(key)) {
+		return jsonResponse({ error: "Invalid object key." }, 400, headers);
+	}
+
+	const body = await request.arrayBuffer();
+	if (body.byteLength === 0) {
+		return jsonResponse({ error: "Empty body." }, 400, headers);
+	}
+
+	if (body.byteLength > MAX_BYTES) {
+		return jsonResponse(
+			{ error: "Object exceeds the size limit." },
+			413,
+			headers,
+		);
+	}
+
+	await env.BUCKET.put(key, body, {
+		httpMetadata: {
+			contentType: "video/mp4",
+			cacheControl: "public, max-age=31536000, immutable",
+		},
+	});
+
+	// 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);
+};
+
+/**
+ * Every key in the bucket, one page at a time. Used by the orphan sweep to work
+ * out what storage holds that no document references.
+ */
+const listKeys = async (request: Request, env: Env, headers: HeadersInit) => {
+	const cursor = new URL(request.url).searchParams.get("cursor");
+
+	const listed = await env.BUCKET.list({
+		limit: 1000,
+		cursor: cursor ?? undefined,
+	});
+
+	return jsonResponse(
+		{
+			keys: listed.objects.map((object) => object.key),
+			cursor: listed.truncated ? listed.cursor : null,
+		},
+		200,
+		headers,
+	);
+};
+
+/** Remove a given batch of keys from the bucket. */
+const deleteKeys = async (request: Request, env: Env, headers: HeadersInit) => {
+	const payload: unknown = await request.json();
+	if (typeof payload !== "object" || payload === null) {
+		return jsonResponse({ error: "Expected an object." }, 400, headers);
+	}
+
+	const keys = Reflect.get(payload, "keys");
+	if (!Array.isArray(keys) || keys.some((key) => !isAllowedKey(key))) {
+		return jsonResponse({ error: "Invalid object keys." }, 400, headers);
+	}
+
+	await env.BUCKET.delete(keys);
+
+	return jsonResponse({ deleted: keys.length }, 200, headers);
+};
+
+/**
+ * Route requests.
+ *
+ * - `POST /upload` stores one rendition, keyed by the `x-object-key` header.
+ * - `GET /files` lists every key, paginated, for the orphan sweep.
+ * - `DELETE /files` removes a batch of keys.
+ */
+const fetch = async (request: Request, env: Env): Promise<Response> => {
+	const origin = request.headers.get("origin");
+
+	// Resolved before any rejection, because a browser can only read the reason
+	// off a response that already carries them
+	const headers = corsHeaders(origin, env);
+
+	if (request.method === "OPTIONS") {
+		return new Response(null, { status: 204, headers });
+	}
+
+	// Both checked before anything reads the body, so an unauthorized caller
+	// never reaches the bucket
+	if (!isAllowedOrigin(origin, env)) {
+		return jsonResponse({ error: "Origin not allowed." }, 403, {});
+	}
+
+	if (!isAuthorized(request, env)) {
+		return jsonResponse({ error: "Unauthorized." }, 401, headers);
+	}
+
+	const { pathname } = new URL(request.url);
+
+	if (request.method === "POST" && pathname === "/upload") {
+		return storeObject(request, env, headers);
+	}
+
+	if (request.method === "GET" && pathname === "/files") {
+		return listKeys(request, env, headers);
+	}
+
+	if (request.method === "DELETE" && pathname === "/files") {
+		return deleteKeys(request, env, headers);
+	}
+
+	return jsonResponse({ error: "Not found." }, 404, headers);
+};
+
+// Module Worker format: Cloudflare calls 'fetch' off the default export, so a
+// bare function here would deploy cleanly and fail on the first request
+export default { fetch };

package/worker/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"compilerOptions": {
+		"target": "esnext",
+		"module": "preserve",
+		"moduleDetection": "force",
+		"strict": true,
+		"skipLibCheck": true,
+		"types": ["@cloudflare/workers-types"]
+	}
+}