@uurtech/jdf 0.1.26 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uurtech/jdf",
-  "version": "0.1.26",
+  "version": "0.2.0",
   "description": "Render JDF (JSON Document Format) documents in the browser. Drop-in replacement for embedding PDFs — point at a .jdf file and it appears on the page, fully styled, searchable, with a clickable TOC.",
   "license": "MIT",
   "author": "Ugur Kazdal <ugur@uurtech.com>",

package/src/jdfjs.css

@@ -166,6 +166,8 @@
 .jdfjs-page-wrapper {
   display: block;
   scroll-margin-top: 16px;
+  flex-shrink: 0;
+  max-width: 100%;
 }
 
 .jdfjs-page {

package/src/jdfx.ts

@@ -3,6 +3,8 @@ import {
   JDFX_DOCUMENT_PATH,
   JDFX_MANIFEST_PATH,
   JDFX_ASSET_DIR,
+  isVideoMime,
+  mimeOf,
   type JdfDocument,
   type JdfxManifest,
 } from "@jdf/core";
@@ -67,11 +69,16 @@ export async function unpackJdfxToDocument(bytes: ArrayBuffer | Uint8Array): Pro
       const file = zip.file(entry.path);
       if (!file) continue;
       const data = await file.async("uint8array");
-      doc.resources.images[entry.id] = {
-        src: "embedded",
-        mimeType: entry.mimeType || "image/png",
-        data: uint8ToBase64(data),
-      };
+      const mimeType = entry.mimeType || mimeOf(entry.path);
+      const res = { src: "embedded" as const, mimeType, data: uint8ToBase64(data) };
+      // Videos bind into resources.videos, everything else into resources.images
+      // — the renderers look up `resource` ids in both.
+      if (isVideoMime(mimeType)) {
+        if (!doc.resources.videos) doc.resources.videos = {};
+        doc.resources.videos[entry.id] = res;
+      } else {
+        doc.resources.images[entry.id] = res;
+      }
     }
   }
 

package/src/renderers/element.ts

@@ -4,6 +4,7 @@ import type {
   ShapeElement, CollapsibleElement, TocElement, RichTextRun, ListItem, TableCellValue, ImageResource,
   FormInputElement, FormTextareaElement, FormCheckboxElement, FormSelectElement, FormSignatureElement,
   TextAlign,
+  VideoElement,
 } from "@jdf/core";
 import { unitToPx } from "@jdf/core";
 import { resolveStyle, styleToCss, applyStyle } from "../utils/style";
@@ -35,6 +36,7 @@ export function renderElement(el: Element, ctx: RenderContext): HTMLElement | nu
     case "text": inner = renderText(el, ctx); break;
     case "richtext": inner = renderRichText(el, ctx); break;
     case "image": inner = renderImage(el, ctx); break;
+    case "video": inner = renderVideo(el, ctx); break;
     case "table": inner = renderTable(el, ctx); break;
     case "list": inner = renderList(el, ctx); break;
     case "shape": inner = renderShape(el); break;
@@ -141,9 +143,76 @@ function lookupResource(resources: Resources | undefined, key: string): ImageRes
   if (direct && typeof direct === "object" && "data" in direct) return direct as ImageResource;
   const inImages = resources.images?.[key];
   if (inImages) return inImages;
+  // Videos live in resources.videos; a .jdfx unpacker binds by MIME type.
+  const inVideos = resources.videos?.[key];
+  if (inVideos) return inVideos;
   return undefined;
 }
 
+function mediaSrc(el: { src?: string; resource?: string }, resources: Resources | undefined, fallbackMime: string): string {
+  if (el.src?.startsWith("data:") || el.src?.startsWith("http")) return el.src;
+  if (el.resource) {
+    const res = lookupResource(resources, el.resource);
+    if (res?.data) {
+      const mime = res.mimeType || fallbackMime;
+      if (res.data.startsWith("data:")) return res.data;
+      return `data:${mime};base64,${res.data}`;
+    }
+    if (res?.path) return res.path;
+  }
+  return el.src || "";
+}
+
+// ── video ───────────────────────────────────────────────────────────────────
+function renderVideo(el: VideoElement, ctx: RenderContext): HTMLElement {
+  const wrap = document.createElement("div");
+  wrap.className = "jdfjs-video";
+  wrap.style.width = "100%";
+  wrap.style.height = "100%";
+  const video = document.createElement("video");
+  video.src = mediaSrc(el, ctx.resources, "video/mp4");
+  if (el.poster) {
+    // Poster may be an image resource id or a URL / data URL.
+    const res = lookupResource(ctx.resources, el.poster);
+    video.poster = res?.data ? (res.data.startsWith("data:") ? res.data : `data:${res.mimeType || "image/png"};base64,${res.data}`) : el.poster;
+  }
+  if (el.title) { video.title = el.title; video.setAttribute("aria-label", el.title); }
+  video.controls = el.controls !== false;
+  video.autoplay = !!el.autoplay;
+  video.loop = !!el.loop;
+  // Browsers only allow autoplay when muted.
+  video.muted = !!el.muted || !!el.autoplay;
+  video.playsInline = true;
+  video.preload = "metadata";
+  video.style.display = "block";
+  video.style.width = "100%";
+  video.style.height = "100%";
+  video.style.background = "#000";
+  switch (el.fit) {
+    case "cover": video.style.objectFit = "cover"; break;
+    case "fill": video.style.objectFit = "fill"; break;
+    case "none": video.style.objectFit = "none"; break;
+    default: video.style.objectFit = "contain";
+  }
+  applyStyle(video, resolveStyle(el.style, ctx.styles));
+  if (el.id) video.setAttribute("data-jdf-video", el.id);
+  // Transcript → WebVTT captions, so playback shows the very text RAG indexed.
+  const segs = el.transcript?.segments;
+  if (segs && segs.length) {
+    const ts = (t: number) => { const h = Math.floor(t / 3600), m = Math.floor((t % 3600) / 60), sec = t % 60; return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${sec.toFixed(3).padStart(6, "0")}`; };
+    const body = segs.map((sg, i) => `${i + 1}\n${ts(sg.t0)} --> ${ts(Math.max(sg.t1, sg.t0 + 0.2))}\n${sg.speaker ? sg.speaker + ": " : ""}${sg.text}`).join("\n\n");
+    const track = document.createElement("track");
+    track.kind = "captions";
+    track.label = "Transcript";
+    track.srclang = el.transcript?.language || "en";
+    track.src = `data:text/vtt;charset=utf-8,${encodeURIComponent(`WEBVTT\n\n${body}\n`)}`;
+    track.default = true;
+    video.appendChild(track);
+  }
+  wrap.appendChild(video);
+  return wrap;
+}
+
 function imageSrc(el: ImageElement, resources?: Resources): string {
   if (el.src?.startsWith("data:") || el.src?.startsWith("http")) return el.src;
   if (el.resource) {

package/src/viewer.ts

@@ -52,6 +52,13 @@ export interface JDFViewerInstance {
   getCurrentPage: () => number;
   /** Replace the document */
   setDocument: (doc: JdfDocument) => void;
+  /**
+   * Jump to a moment in a video element and start playing — the retrieval-side
+   * counterpart of `jdf chunk`'s `media: { element, t0 }`. `elementId` is the
+   * video element's `id`; `seconds` the offset. Scrolls the page into view.
+   * Returns false when no such video exists.
+   */
+  seek: (elementId: string, seconds: number) => boolean;
   /** Tear down — removes DOM and event listeners */
   destroy: () => void;
   /**
@@ -175,6 +182,13 @@ export class JDFViewer {
   // Window resize fallback for fit-width / fit-page when the host element's
   // own size doesn't change but the viewport's does (flex re-layout, etc).
   private windowResizeListener: (() => void) | null = null;
+  // Zoom the host asked for (option or toolbar). In "manual" fit mode the
+  // effective zoom is capped so a page never renders wider than its
+  // container — a 794 px A4 page inside a 390 px phone viewport used to be
+  // cut in half with a sideways scroll. Once the user zooms by hand we stop
+  // capping and let them scroll.
+  private requestedZoom = 1;
+  private userZoomed = false;
 
   constructor(container: HTMLElement, doc: JdfDocument, options: JDFViewerOptions = {}) {
     this.container = container;
@@ -189,6 +203,7 @@ export class JDFViewer {
       ...options,
     };
     this.zoom = this.options.zoom;
+    this.requestedZoom = this.options.zoom;
     this.currentPage = this.options.initialPage;
     this.applyContainerSize();
     this.mount();
@@ -293,9 +308,8 @@ export class JDFViewer {
     this.darkModeListener = listener;
   }
 
-  /** Auto-zoom for fit modes. */
+  /** Auto-zoom for fit modes (and the responsive cap in manual mode). */
   private applyFit() {
-    if (this.options.fit === "manual") return;
     const firstPage = this.pagesEl.querySelector<HTMLElement>(".jdfjs-page");
     if (!firstPage) return;
     // Read intrinsic page size from the inline width/min-height in px (set in renderPage)
@@ -304,6 +318,17 @@ export class JDFViewer {
     if (!pageWidth || !pageHeight) return;
     const containerWidth = this.pagesEl.clientWidth - 32; // margin
     const containerHeight = this.pagesEl.clientHeight - 32;
+    if (this.options.fit === "manual") {
+      if (containerWidth <= 0) return;
+      const maxFit = containerWidth / pageWidth;
+      const next = this.userZoomed ? this.zoom : Math.min(this.requestedZoom, maxFit);
+      if (Math.abs(next - this.zoom) > 0.001 || firstPage.style.transformOrigin !== "top left") {
+        this.zoom = Math.max(0.25, Math.min(3, next));
+        this.applyZoom();
+        this.updateIndicators();
+      }
+      return;
+    }
     if (this.options.fit === "fit-width") {
       this.zoom = Math.max(0.25, Math.min(3, containerWidth / pageWidth));
     } else if (this.options.fit === "fit-page") {
@@ -380,6 +405,19 @@ export class JDFViewer {
     this.applyZoom();
   }
 
+  /** Seek a video element (by its `id`) to `seconds` and play; scrolls it into view. */
+  seek(elementId: string, seconds: number): boolean {
+    const video = this.pagesEl.querySelector<HTMLVideoElement>(`video[data-jdf-video="${elementId.replace(/"/g, '\\"')}"]`);
+    if (!video) return false;
+    const pageWrap = video.closest<HTMLElement>(".jdfjs-page-wrapper");
+    const idx = pageWrap ? Number(pageWrap.getAttribute("data-page-index")) : NaN;
+    if (!Number.isNaN(idx)) this.goToPage(idx);
+    video.scrollIntoView({ block: "center" });
+    const go = () => { video.currentTime = Math.max(0, seconds); video.play().catch(() => { /* autoplay policy — user can press play */ }); };
+    if (video.readyState >= 1) go(); else video.addEventListener("loadedmetadata", go, { once: true });
+    return true;
+  }
+
   private renderPage(page: Page, pageIndex: number, styles: Record<string, Style>): HTMLDivElement {
     const dim = getPageDimensions(
       page.pageSize ?? this.doc.meta?.pageSize ?? "A4",
@@ -508,14 +546,26 @@ export class JDFViewer {
 
   private applyZoom() {
     this.pagesEl.style.setProperty("--jdfjs-zoom", String(this.zoom));
-    this.pagesEl.querySelectorAll<HTMLElement>(".jdfjs-page").forEach((el) => {
+    this.pagesEl.querySelectorAll<HTMLElement>(".jdfjs-page-wrapper").forEach((wrapper) => {
+      const el = wrapper.querySelector<HTMLElement>(".jdfjs-page");
+      if (!el) return;
+      // `transform: scale()` does not take part in layout, so the wrapper
+      // used to keep the page's unscaled 794 px footprint: on narrow hosts
+      // the pages column scrolled sideways and the page sat off-centre.
+      // Size the wrapper to the *rendered* box and scale from its corner.
+      const w = parseFloat(el.style.width || "0") || el.offsetWidth;
+      const h = el.offsetHeight;
       el.style.transform = `scale(${this.zoom})`;
-      el.style.transformOrigin = "top center";
+      el.style.transformOrigin = "top left";
+      wrapper.style.width = `${Math.round(w * this.zoom)}px`;
+      wrapper.style.height = `${Math.round(h * this.zoom)}px`;
     });
   }
 
   setZoom(z: number) {
     this.zoom = Math.max(0.25, Math.min(3, z));
+    this.requestedZoom = this.zoom;
+    this.userZoomed = true;
     this.applyZoom();
     this.updateIndicators();
   }
@@ -680,6 +730,7 @@ export class JDFViewer {
       setZoom: (z: number) => this.setZoom(z),
       getZoom: () => this.getZoom(),
       goToPage: (i: number) => this.goToPage(i),
+      seek: (elementId: string, seconds: number) => this.seek(elementId, seconds),
       getCurrentPage: () => this.getCurrentPage(),
       setDocument: (d: JdfDocument) => this.setDocument(d),
       destroy: () => this.destroy(),