droppage 0.2.2 → 0.3.0

package/README.md

@@ -38,18 +38,18 @@ Open the printed link in any browser. That's it.
 |---|---|
 | `droppage login` | Authenticate with a magic link (session stored in `~/.droppage/config.json`). |
 | `droppage logout` | Sign out and clear local credentials. |
-| `droppage upload <file>` | Publish an `.html`/`.htm` file (and the local images it references) and print its URL. Options: `--password`, `--email <addr>`, `--private`, `--expires <when>`. |
-| `droppage update <slug> <file>` | Replace the HTML (and images) behind an existing URL. Keeps the URL, access mode, and stats. `--expires <when\|never>` changes the expiry. |
+| `droppage upload <file>` | Publish an `.html`/`.htm` file (and the local images and videos it references) and print its URL. Options: `--password`, `--email <addr>`, `--private`, `--expires <when>`. |
+| `droppage update <slug> <file>` | Replace the HTML (and images and videos) behind an existing URL. Keeps the URL, access mode, and stats. `--expires <when\|never>` changes the expiry. |
 | `droppage expire <slug> <when\|never>` | Set or clear when a page expires without re-uploading. |
 | `droppage list` | List your pages, including an EXPIRES column. `--json` for machines (rows have `expires_at`), `--preview` for no-count preview URLs. |
-| `droppage delete <slug>` | Delete a page and its images. `--yes` skips the confirmation prompt. |
+| `droppage delete <slug>` | Delete a page and its images and videos. `--yes` skips the confirmation prompt. |
 | `droppage recipients list <slug>` | List recipients of an email-gated page (`--json`, `--page <n>`). |
 | `droppage recipients add <slug> <emails...>` | Add recipients and queue their invitation emails. |
 | `droppage recipients remove <slug> <email>` | Revoke a recipient; their invitation link stops working (`--yes`). |
 | `droppage recipients resend <slug> <email>` | Queue a fresh invitation for an existing recipient. |
-| `droppage image upload <files...> --page <slug>` | Advanced: add images (PNG, JPEG, GIF, WebP, AVIF, SVG; up to 4 MB each) to an existing page and print their URLs. `--json` prints `[{file,id,url,bytes,content_type,existing}]`. |
-| `droppage image list [--page <slug>]` | List your pages' images; with `--page`, one page and its image budget. `--json` for machines. |
-| `droppage image delete <id-or-url...>` | Delete images. They stop being served within 5 minutes; a browser that already loaded one may keep it up to a day. |
+| `droppage image upload <files...> --page <slug>` | Advanced: add images (PNG, JPEG, GIF, WebP, AVIF, SVG; up to 4 MB each) or videos (MP4, WebM; up to 20 MB each) to an existing page and print their URLs. Alias: `droppage media upload`. `--json` prints `[{file,id,url,bytes,content_type,existing}]`. |
+| `droppage image list [--page <slug>]` | List your pages' images and videos; with `--page`, one page and its image budget. `--json` for machines. |
+| `droppage image delete <id-or-url...>` | Delete images or videos. They stop being served within 5 minutes; a browser that already loaded one may keep it up to a day. |
 | `droppage quota` | Show the current plan, page usage, monthly meter, reset date, and enabled features. `--json` returns the account API body. |
 | `droppage feedback <message>` | Send feedback without requiring login. Options: `--kind idea|bug|review|other`, `--agent [model]`, `--contact <email>`, review-only `--rating <1-5>` and `--allow-quote`. Quote permission never publishes automatically. |
 | `droppage upgrade` | Install the latest CLI globally with npm and report the installed version. |
@@ -120,6 +120,38 @@ only the page URL.
   `{images:[{id,url,ext,content_type,bytes,name,created_at,page}], page?:{slug,used_bytes,limit_bytes}}`);
   `droppage image delete <id-or-url...>` removes them.
 
+## Videos
+
+Short product films (CLI 0.3.0+) are hosted exactly like images. Reference local MP4 or WebM files,
+and a poster image, in a `<video>`:
+
+```html
+<video autoplay muted loop playsinline poster="still.webp">
+  <source src="film.webm" type="video/webm">
+  <source src="film.mp4" type="video/mp4">
+</video>
+```
+
+```bash
+droppage upload page.html
+# stderr: droppage: image still.webp → https://droppage.dev/i/AbCdEfGhIjKl.webp
+# stderr: droppage: video film.webm → https://droppage.dev/i/MnOpQrStUvWx.webm
+# stderr: droppage: video film.mp4 → https://droppage.dev/i/YzAbCdEfGhIj.mp4
+```
+
+- Picked up: `<video src>`, `<source src>` (inside `<video>`, and `<picture>` as before), and
+  `<video poster>`. Same folder rule as images.
+- Each video up to 20 MB (20,000,000 bytes), checked by its file signature, not its name: MP4
+  (H.264 plays everywhere) and WebM (VP9). `.mov` and `.mkv` are refused; convert them first, e.g.
+  `ffmpeg -i in.mov -c:v libx264 -pix_fmt yuv420p -movflags +faststart -an film.mp4`.
+- Videos share the page's image budget (Free 5 MB, Starter 20 MB, Builder 50 MB per page), are
+  pruned by `update` and deleted with the page, like images. Video traffic counts toward your
+  monthly bandwidth.
+- Served from `https://droppage.dev/i/<id>.mp4|webm` with HTTP Range support (`206 Partial Content`),
+  so Safari, iOS and seeking work. Public to anyone with the URL, like images.
+- No need to inline films as base64 any more. `droppage image upload film.mp4 --page <slug>` (or
+  `droppage media upload`) adds a video to an existing page.
+
 ## Expiry
 
 Pages can expire. Nothing expires unless you set it, on any plan.
@@ -159,9 +191,9 @@ team, a weekly KPI or stakeholder report, a client deliverable, a notebook expor
 droppage keeps a strict stream contract so it is safe to call from automation:
 
 - `upload` and `update` print **only the URL** on stdout, even when they upload images;
-  `image upload` prints **only the image URL(s)**; `expire` prints **nothing** on stdout.
+  `image upload` prints **only the image or video URL(s)**; `expire` prints **nothing** on stdout.
 - `list --json`, `image list --json`, `recipients list --json`, and `quota --json` print **only JSON** on stdout.
-- Progress, warnings, prompts, errors, and the per-image `droppage: image … → …` lines go to **stderr**.
+- Progress, warnings, prompts, errors, and the per-file `droppage: image … → …` / `droppage: video … → …` lines go to **stderr**.
 - Non-zero exit code on any failure.
 - Use `--yes` on `delete` / `recipients remove` for non-interactive runs.
 

package/dist/cli.js

@@ -15,7 +15,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "droppage",
-      version: "0.2.2",
+      version: "0.3.0",
       description: "Publish HTML files as shareable, access-controlled live pages",
       type: "module",
       license: "Apache-2.0",
@@ -524,9 +524,11 @@ import { dirname, extname, relative, resolve, sep } from "path";
 function imageSlots(html) {
   const slots = [];
   const attrValue = (match) => ({ start: match.index + match[1].length + 1, value: match[3] });
-  for (const match of html.matchAll(SRC_RE)) {
-    const { start, value } = attrValue(match);
-    slots.push({ start, end: start + value.length, ref: value.trim() });
+  for (const re of [SRC_RE, POSTER_RE]) {
+    for (const match of html.matchAll(re)) {
+      const { start, value } = attrValue(match);
+      slots.push({ start, end: start + value.length, ref: value.trim() });
+    }
   }
   for (const match of html.matchAll(SRCSET_RE)) {
     const { start, value } = attrValue(match);
@@ -612,7 +614,7 @@ function findLocalImages(html, htmlFile) {
     } catch {
       continue;
     }
-    if (!IMAGE_EXTS.has(extname(decoded).toLowerCase())) continue;
+    if (!MEDIA_EXTS.has(extname(decoded).toLowerCase())) continue;
     const path = resolve(base, decoded);
     if (!inside(base, path) || !existsSync(path)) continue;
     let real;
@@ -637,19 +639,23 @@ function rewriteImageRefs(html, urls) {
   }
   return out + html.slice(last);
 }
-var IMAGE_EXTS, imgAttrRe, SRC_RE, SRCSET_RE, LINK_RE, ATTR_RE, ICON_RELS, STYLE_RE, CSS_URL_RE;
+var IMAGE_EXTS, VIDEO_EXTS, MEDIA_EXTS, attrRe, SRC_RE, SRCSET_RE, POSTER_RE, LINK_RE, ATTR_RE, ICON_RELS, STYLE_RE, CSS_URL_RE, isVideoFile;
 var init_html_images = __esm({
   "src/lib/html-images.ts"() {
     "use strict";
     IMAGE_EXTS = /* @__PURE__ */ new Set([".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif", ".svg"]);
-    imgAttrRe = (name) => new RegExp(`(<(?:img|source)\\b[^>]*?\\s${name}\\s*=\\s*)(["'])([^"']+)\\2`, "gi");
-    SRC_RE = imgAttrRe("src");
-    SRCSET_RE = imgAttrRe("srcset");
+    VIDEO_EXTS = /* @__PURE__ */ new Set([".mp4", ".webm"]);
+    MEDIA_EXTS = /* @__PURE__ */ new Set([...IMAGE_EXTS, ...VIDEO_EXTS]);
+    attrRe = (tags, name) => new RegExp(`(<(?:${tags})\\b[^>]*?\\s${name}\\s*=\\s*)(["'])([^"']+)\\2`, "gi");
+    SRC_RE = attrRe("img|source|video", "src");
+    SRCSET_RE = attrRe("img|source", "srcset");
+    POSTER_RE = attrRe("video", "poster");
     LINK_RE = /<link\b[^>]*>/gi;
     ATTR_RE = /\s([a-z][a-z0-9-]*)\s*=\s*(?:(["'])([^"']*)\2|([^\s"'=<>`]+))/gi;
     ICON_RELS = /* @__PURE__ */ new Set(["icon", "apple-touch-icon", "apple-touch-icon-precomposed"]);
     STYLE_RE = /(<style\b[^>]*>)([\s\S]*?)<\/style\s*>/gi;
     CSS_URL_RE = /\burl\(\s*(?:"([^"\n]*)"|'([^'\n]*)'|([^\s"'()]+))\s*\)/gi;
+    isVideoFile = (path) => VIDEO_EXTS.has(extname(path).toLowerCase());
   }
 });
 
@@ -699,10 +705,18 @@ async function call(path, init) {
   }
   return body;
 }
+function asUploaded(body) {
+  const image = body;
+  if (!image || typeof image.url !== "string" || typeof image.id !== "string") {
+    throw new ImageRequestError("unexpected response from the image API", 0);
+  }
+  return image;
+}
 async function uploadImage(file, slug, { update = false } = {}) {
   const info = await stat(file).catch(() => null);
   if (!info?.isFile()) throw new ImageRequestError(`file not found: ${file}`, 0);
   if (info.size === 0) throw new ImageRequestError(`file is empty: ${file}`, 0);
+  if (isVideoFile(file)) return uploadVideo(file, info.size, slug, update);
   if (info.size > MAX_IMAGE_BYTES) {
     throw new ImageRequestError(`image is larger than ${MAX_IMAGE_BYTES / 1024 / 1024} MB (${info.size} bytes): ${file}`, 413);
   }
@@ -721,11 +735,48 @@ async function uploadImage(file, slug, { update = false } = {}) {
   if (info.size > HEAVY_IMAGE_BYTES && /\.(png|jpe?g|gif)$/i.test(file)) {
     console.error(`droppage: tip: ${basename(file)} is ${Math.round(info.size / 1024)} KB; WebP or AVIF is usually several times smaller (SVG for charts).`);
   }
-  const image = body;
-  if (!image || typeof image.url !== "string" || typeof image.id !== "string") {
+  return asUploaded(body);
+}
+async function uploadVideo(file, size, slug, update) {
+  if (size > MAX_VIDEO_BYTES) {
+    throw new ImageRequestError(`video is larger than ${MAX_VIDEO_BYTES / 1e6} MB (${size} bytes): ${file}`, 413);
+  }
+  const bytes = await readFile(file);
+  const token = await accessToken();
+  const started = await call("/api/images/uploads", {
+    method: "POST",
+    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+    body: JSON.stringify({
+      page: slug,
+      bytes: bytes.length,
+      sha256: createHash("sha256").update(bytes).digest("hex"),
+      filename: basename(file),
+      head: bytes.subarray(0, 64).toString("base64"),
+      update
+    })
+  });
+  if (typeof started?.url === "string") return asUploaded(started);
+  if (!started?.upload_url || !started.complete_url || !started.content_type) {
     throw new ImageRequestError("unexpected response from the image API", 0);
   }
-  return image;
+  let stored;
+  try {
+    stored = await fetch(started.upload_url, {
+      method: "PUT",
+      headers: { "Content-Type": started.content_type, "x-upsert": "false" },
+      body: bytes
+    });
+  } catch (err) {
+    throw new ImageRequestError(`could not upload the video: ${err instanceof Error ? err.message : String(err)}`, 0);
+  }
+  if (!stored.ok) {
+    const detail = await stored.text().catch(() => "");
+    throw new ImageRequestError(`could not upload the video (storage answered HTTP ${stored.status}${detail ? `: ${detail.slice(0, 200)}` : ""})`, stored.status);
+  }
+  return asUploaded(await call(started.complete_url, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${token}` }
+  }));
 }
 async function listImages(slug) {
   const query = slug ? `?page=${encodeURIComponent(slug)}` : "";
@@ -758,13 +809,15 @@ async function pruneImages(slug, html) {
   });
   return Number(body?.removed ?? 0);
 }
-var MAX_IMAGE_BYTES, HEAVY_IMAGE_BYTES, ImageRequestError;
+var MAX_IMAGE_BYTES, MAX_VIDEO_BYTES, HEAVY_IMAGE_BYTES, ImageRequestError;
 var init_images = __esm({
   "src/services/images.ts"() {
     "use strict";
+    init_html_images();
     init_share_url();
     init_supabase();
     MAX_IMAGE_BYTES = 4 * 1024 * 1024;
+    MAX_VIDEO_BYTES = 2e7;
     HEAVY_IMAGE_BYTES = 300 * 1024;
     ImageRequestError = class extends Error {
       constructor(message, status) {
@@ -790,7 +843,8 @@ async function attachLocalImages(file, slug, { html, update = false } = {}) {
     const result = await uploadImage(image.path, slug, { update });
     urls.set(image.ref, result.url);
     uploaded.push(result);
-    console.error(`droppage: image ${basename2(image.path)} \u2192 ${result.url}`);
+    const kind = isVideoFile(image.path) ? "video" : "image";
+    console.error(`droppage: ${kind} ${basename2(image.path)} \u2192 ${result.url}`);
   }
   return { html: Buffer.from(rewriteImageRefs(text, urls), "utf8"), uploaded };
 }
@@ -1021,7 +1075,7 @@ function registerUpload(program2) {
     "--email <address>",
     "restrict access to an email allowlist (repeatable; comma-separated)",
     (val, prev = []) => prev.concat(val.split(","))
-  ).option("--private", "restrict access to only you (owner-only draft)").option("--expires <when>", "delete the page (and its images) after 30m, 12h, 7d, 2w or on a date").action(
+  ).option("--private", "restrict access to only you (owner-only draft)").option("--expires <when>", "delete the page (and its images and videos) after 30m, 12h, 7d, 2w or on a date").action(
     async (file, options) => {
       let user;
       try {
@@ -1232,7 +1286,7 @@ var init_pages = __esm({
 // src/commands/update.ts
 import { readFile as readFile5 } from "fs/promises";
 function registerUpdate(program2) {
-  program2.command("update").description("Replace the HTML behind an existing page URL (its local images are uploaded too)").argument("<slug>", "slug of the page to update").argument("<file>", "path to replacement .html file").option("--expires <when>", "set when the page expires: 30m, 12h, 7d, 2w, a date, or never").action(async (slug, file, options) => {
+  program2.command("update").description("Replace the HTML behind an existing page URL (its local images and videos are uploaded too)").argument("<slug>", "slug of the page to update").argument("<file>", "path to replacement .html file").option("--expires <when>", "set when the page expires: 30m, 12h, 7d, 2w, a date, or never").action(async (slug, file, options) => {
     let user;
     try {
       user = await requireAuth();
@@ -1248,7 +1302,7 @@ function registerUpdate(program2) {
       const { html } = await attachLocalImages(file, slug, { update: true });
       const result = await updatePageHtml({ slug, file, user, html });
       const removed = await pruneUnusedImages(slug, html);
-      if (removed) console.error(`droppage: removed ${removed} image(s) the page no longer uses`);
+      if (removed) console.error(`droppage: removed ${removed} image or video file(s) the page no longer uses`);
       if (expiresAt !== void 0) {
         await setPageExpiry(slug, expiresAt);
         console.error(expiresAt ? `droppage: expires ${expiresAt.toISOString()}` : "droppage: never expires");
@@ -1264,7 +1318,7 @@ function registerUpdate(program2) {
       }
     }
   });
-  program2.command("expire").description("Set when a page (and its images) is deleted: 30m, 12h, 7d, 2w, a date, or never").argument("<slug>", "slug of the page").argument("<when>", "e.g. 7d, 2026-12-31, or never").action(async (slug, when) => {
+  program2.command("expire").description("Set when a page (and its images and videos) is deleted: 30m, 12h, 7d, 2w, a date, or never").argument("<slug>", "slug of the page").argument("<when>", "e.g. 7d, 2026-12-31, or never").action(async (slug, when) => {
     try {
       await requireAuth();
     } catch (err) {
@@ -1962,8 +2016,8 @@ function fail(err) {
   process.exitCode = 1;
 }
 function registerImage(program2) {
-  const image = program2.command("image").description("Images that belong to a page (uploaded automatically by upload/update from local files the HTML references)");
-  image.command("upload").description("Add images to one of your pages and print their URLs (PNG, JPEG, GIF, WebP, AVIF, SVG; up to 4 MB each)").argument("<files...>", "image files").requiredOption("--page <slug>", "the page the images belong to (they go when it is deleted or expires)").option("--json", "print the results as JSON").action(async (files, options) => {
+  const image = program2.command("image").alias("media").description("Images and videos that belong to a page (uploaded automatically by upload/update from local files the HTML references)");
+  image.command("upload").description("Add images or videos to one of your pages and print their URLs (PNG, JPEG, GIF, WebP, AVIF, SVG up to 4 MB each; MP4, WebM up to 20 MB each)").argument("<files...>", "image or video files").requiredOption("--page <slug>", "the page the files belong to (they go when it is deleted or expires)").option("--json", "print the results as JSON").action(async (files, options) => {
     if (!await signedIn()) return;
     const results = [];
     for (const file of files) {
@@ -1981,7 +2035,7 @@ function registerImage(program2) {
     }
     if (options.json) process.stdout.write(JSON.stringify(results, null, 2) + "\n");
   });
-  image.command("list").description("List your pages' images (one page with --page, including its image budget)").option("--page <slug>", "only this page").option("--json", "print the list as JSON").action(async (options) => {
+  image.command("list").description("List your pages' images and videos (one page with --page, including its media budget)").option("--page <slug>", "only this page").option("--json", "print the list as JSON").action(async (options) => {
     if (!await signedIn()) return;
     try {
       const list = await listImages(options.page);
@@ -1990,7 +2044,7 @@ function registerImage(program2) {
         return;
       }
       if (list.images.length === 0) {
-        console.error("droppage: no images. `droppage upload page.html` uploads the images the page uses.");
+        console.error("droppage: no images or videos. `droppage upload page.html` uploads the ones the page uses.");
       } else {
         process.stdout.write(renderTable(
           ["ID", "PAGE", "NAME", "SIZE", "UPLOADED", "URL"],
@@ -2000,13 +2054,13 @@ function registerImage(program2) {
       }
       if (list.page) {
         const limit = list.page.limit_bytes === null ? "unlimited" : formatBytes3(list.page.limit_bytes);
-        console.error(`droppage: images on ${list.page.slug}: ${formatBytes3(list.page.used_bytes)} of ${limit} per page.`);
+        console.error(`droppage: images and videos on ${list.page.slug}: ${formatBytes3(list.page.used_bytes)} of ${limit} per page.`);
       }
     } catch (err) {
       fail(err);
     }
   });
-  image.command("delete").description("Delete images (by id or URL); they stop being served within 5 minutes; a browser that already loaded one may keep it up to a day").argument("<images...>", "image ids or URLs").action(async (ids) => {
+  image.command("delete").description("Delete images or videos (by id or URL); they stop being served within 5 minutes; a browser that already loaded one may keep it up to a day").argument("<images...>", "image or video ids or URLs").action(async (ids) => {
     if (!await signedIn()) return;
     for (const value of ids) {
       try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "droppage",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Publish HTML files as shareable, access-controlled live pages",
   "type": "module",
   "license": "Apache-2.0",