@jant/core 0.4.0 → 0.4.2

package/src/client/components/compose-types.ts

@@ -14,7 +14,12 @@ export interface ComposeAttachment {
   clientId: string;
   file: File;
   previewUrl: string;
-  /** Blob URL for a video poster frame (used as `<video poster>` on Safari) */
+  /**
+   * Poster URL for video attachments, used as `<video poster>` so Safari shows
+   * a preview frame (Chrome renders the first frame natively, Safari does not).
+   * For new uploads this is a blob URL produced by `URL.createObjectURL`; for
+   * edit mode it's the server-side poster URL.
+   */
   posterUrl: string | null;
   status: "pending" | "processing" | "uploading" | "done" | "error";
   progress: number | null;

package/src/client/components/jant-compose-dialog.ts

@@ -66,6 +66,7 @@ interface ApiMediaAttachment {
   type: "media";
   id: string;
   previewUrl: string;
+  posterUrl?: string | null;
   alt?: string;
   mimeType: string;
   url?: string;
@@ -429,6 +430,7 @@ async function resolveApiAttachments(allAttachments: ApiAttachment[]) {
   const media = mediaItems.map((m) => ({
     id: m.id,
     previewUrl: m.previewUrl,
+    posterUrl: m.posterUrl ?? null,
     alt: m.alt,
     mimeType: m.mimeType,
     originalName: m.originalName,

package/src/client/components/jant-compose-editor.ts

@@ -837,6 +837,7 @@ export class JantComposeEditor extends LitElement {
     media?: Array<{
       id: string;
       previewUrl: string;
+      posterUrl?: string | null;
       alt?: string;
       mimeType: string;
       originalName?: string;
@@ -884,7 +885,7 @@ export class JantComposeEditor extends LitElement {
         clientId: randomUUID(),
         file: new File([], m.originalName ?? "existing", { type: m.mimeType }),
         previewUrl: m.previewUrl,
-        posterUrl: null,
+        posterUrl: m.posterUrl ?? null,
         status: "done" as const,
         progress: null,
         mediaId: m.id,

package/src/client/components/jant-media-lightbox.ts

@@ -197,9 +197,7 @@ export class JantMediaLightbox extends LitElement {
     this.updateComplete.then(() => {
       const dialog = this.querySelector<HTMLDialogElement>(".media-lightbox");
       dialog?.showModal();
-      // Focus the content wrapper instead of letting the browser auto-focus
-      // the close button, which would show a focus ring on arrow-key nav.
-      this.querySelector<HTMLElement>(".media-lightbox-content")?.focus();
+      this.#focusCurrentMedia();
     });
   }
 
@@ -285,18 +283,41 @@ export class JantMediaLightbox extends LitElement {
     if (ke.key === "Escape") {
       e.preventDefault();
       this.close();
-    } else if (
-      target?.classList.contains("media-lightbox-short-progress") &&
-      (ke.key === "ArrowLeft" || ke.key === "ArrowRight")
-    ) {
       return;
-    } else if (ke.key === "ArrowLeft") {
-      e.preventDefault();
-      this.#prev();
-    } else if (ke.key === "ArrowRight") {
-      e.preventDefault();
-      this.#next();
     }
+    if (ke.key !== "ArrowLeft" && ke.key !== "ArrowRight") return;
+
+    // Let the progress slider's native arrow-key seeking through.
+    if (target?.classList.contains("media-lightbox-short-progress")) return;
+
+    // On videos, arrow keys scrub the playhead. Item switching happens via
+    // the on-screen prev/next buttons — matches YouTube/native player conventions.
+    const currentImage = this._images[this._currentIndex];
+    if (currentImage?.mimeType?.startsWith("video/")) {
+      const video = this.querySelector<HTMLVideoElement>(
+        ".media-lightbox-video",
+      );
+      if (video) {
+        e.preventDefault();
+        const step = 5;
+        const delta = ke.key === "ArrowLeft" ? -step : step;
+        const duration =
+          Number.isFinite(video.duration) && video.duration > 0
+            ? video.duration
+            : null;
+        const nextTime =
+          duration != null
+            ? Math.max(0, Math.min(video.currentTime + delta, duration))
+            : Math.max(0, video.currentTime + delta);
+        video.currentTime = nextTime;
+        this._videoCurrentTime = nextTime;
+      }
+      return;
+    }
+
+    e.preventDefault();
+    if (ke.key === "ArrowLeft") this.#prev();
+    else this.#next();
   };
 
   #handleDialogClick = (e: Event) => {
@@ -344,6 +365,24 @@ export class JantMediaLightbox extends LitElement {
     this.querySelector<HTMLVideoElement>(".media-lightbox-video")?.pause();
   }
 
+  // Focus the active video so space/native shortcuts work without an extra
+  // click. Falls back to the content wrapper for images — focusing the close
+  // button would show a focus ring during arrow-key nav.
+  #focusCurrentMedia() {
+    const currentImage = this._images[this._currentIndex];
+    const isVideo = currentImage?.mimeType?.startsWith("video/");
+    if (isVideo) {
+      const video = this.querySelector<HTMLVideoElement>(
+        ".media-lightbox-video",
+      );
+      if (video) {
+        video.focus();
+        return;
+      }
+    }
+    this.querySelector<HTMLElement>(".media-lightbox-content")?.focus();
+  }
+
   #resetShortVideoState(image?: LightboxImage) {
     this._videoCurrentTime = 0;
     this._videoDuration =
@@ -416,6 +455,7 @@ export class JantMediaLightbox extends LitElement {
     stage.scrollTop = 0;
     stage.scrollLeft = 0;
     this.#syncCurrentVideo();
+    this.#focusCurrentMedia();
   }
 
   render() {

package/src/client/compose-bridge.ts

@@ -21,6 +21,7 @@ import {
 import {
   showToast,
   showPersistentToast,
+  updateToast,
   replaceWithAutoClose,
   queueToastForNextPage,
 } from "./toast.js";
@@ -28,7 +29,6 @@ import { openReplyForArticle } from "./compose-launch.js";
 import { getJsonString, readJsonObject } from "./json.js";
 import { uploadViaSession } from "./upload-session.js";
 import { publicPath } from "./runtime-paths.js";
-import { setupThreadContexts } from "./thread-context.js";
 import { tiptapJsonToMarkdown } from "../lib/tiptap-to-markdown.js";
 import { getMediaCategory } from "../lib/upload.js";
 import { resolveInlineImageUrls } from "./tiptap/inline-image-upload.js";
@@ -75,7 +75,6 @@ async function refreshTimelineThreadView(
     if (!html) return false;
 
     content.innerHTML = html;
-    setupThreadContexts(content);
     return true;
   } catch {
     return false;
@@ -98,7 +97,6 @@ async function refreshPostCardView(postId: string): Promise<boolean> {
       );
       if (!content) return false;
       content.innerHTML = html;
-      setupThreadContexts(content);
       return true;
     }
 
@@ -108,12 +106,6 @@ async function refreshPostCardView(postId: string): Promise<boolean> {
     if (!article) return false;
 
     article.outerHTML = html;
-    const refreshed = document.querySelector<HTMLElement>(
-      `article[data-post-id="${postId}"]`,
-    );
-    if (refreshed) {
-      setupThreadContexts(refreshed);
-    }
     return true;
   } catch {
     return false;
@@ -133,12 +125,6 @@ async function refreshPostPageView(postId: string): Promise<boolean> {
     if (!html) return false;
 
     container.outerHTML = html;
-    const refreshed = document.querySelector<HTMLElement>(
-      `[data-post-view][data-post-view-id="${postId}"]`,
-    );
-    if (refreshed) {
-      setupThreadContexts(refreshed);
-    }
     return true;
   } catch {
     return false;
@@ -173,6 +159,46 @@ const uploadPromises = new Map<string, Promise<string | null>>();
 /** Track attachments removed while their upload is still in flight */
 const removedClientIds = new Set<string>();
 
+/**
+ * Track upload-phase progress (0..1) per clientId for live toast aggregation.
+ * Populated only during the actual byte-upload phase — processing/transcoding
+ * progress is intentionally excluded so the percentage doesn't reset mid-flight.
+ */
+const uploadProgress = new Map<string, number>();
+
+interface ActiveUploadToast {
+  clientIds: string[];
+  baseMsg: string;
+}
+
+let activeUploadToast: ActiveUploadToast | null = null;
+
+function refreshUploadToast() {
+  if (!activeUploadToast) return;
+  const { clientIds, baseMsg } = activeUploadToast;
+  if (clientIds.length === 0) return;
+
+  let sum = 0;
+  let done = 0;
+  for (const id of clientIds) {
+    const p = uploadProgress.get(id) ?? 0;
+    sum += Math.min(1, Math.max(0, p));
+    if (p >= 1) done += 1;
+  }
+  const total = clientIds.length;
+  const pct = Math.floor((sum / total) * 100);
+  // Show "currently on item N of M" rather than "N completed of M": while any
+  // work is in flight we report the next-in-progress index (capped at total),
+  // so 2 files with neither done shows "1/2" instead of the confusing "0/2".
+  const current = Math.min(done + 1, total);
+
+  const message =
+    total === 1
+      ? `${baseMsg} ${pct}%`
+      : `${baseMsg} ${pct}% ${current}/${total}`;
+  updateToast("compose-deferred", message);
+}
+
 /**
  * Track completed upload mediaIds by clientId.
  *
@@ -265,6 +291,13 @@ async function uploadFile(
   clientId: string,
   editor: JantComposeEditor | null,
 ): Promise<string | null> {
+  // Capture cheap metadata up-front so we can release `file` (the original
+  // potentially-huge blob) as soon as transcoding finishes. On iOS Safari
+  // holding a 300MB+ source blob alongside the transcoded output, upload
+  // chunks, and decoder buffers can push the tab past the per-process
+  // memory cap and get it silently reloaded mid-publish.
+  const fileType = file.type;
+  const fileName = file.name;
   try {
     let toUpload: File;
     let width: number | undefined;
@@ -274,7 +307,7 @@ async function uploadFile(
     let waveform: string | undefined;
     let poster: Blob | undefined;
 
-    if (file.type.startsWith("video/")) {
+    if (fileType.startsWith("video/")) {
       // Video: transcode with mediabunny (requires WebCodecs)
       if (!VideoProcessor.isSupported()) {
         editor?.updateAttachmentStatus(
@@ -298,6 +331,8 @@ async function uploadFile(
         editor?.updateAttachmentProgress(clientId, progress);
       });
       toUpload = result.file;
+      // Drop the original blob ref now that we have the transcoded output.
+      file = null as unknown as File;
       width = result.width;
       height = result.height;
       durationSeconds = result.durationSeconds;
@@ -306,7 +341,7 @@ async function uploadFile(
       if (poster) {
         editor?.updateAttachmentPoster(clientId, poster);
       }
-    } else if (file.type.startsWith("audio/")) {
+    } else if (fileType.startsWith("audio/")) {
       // Audio: transcode to AAC (.m4a) (requires WebCodecs)
       if (!AudioProcessor.isSupported()) {
         editor?.updateAttachmentStatus(
@@ -330,23 +365,24 @@ async function uploadFile(
         editor?.updateAttachmentProgress(clientId, progress);
       });
       toUpload = result.file;
+      file = null as unknown as File;
     } else if (
-      file.type.startsWith("image/") ||
-      /\.heic$/i.test(file.name) ||
-      /\.heif$/i.test(file.name)
+      fileType.startsWith("image/") ||
+      /\.heic$/i.test(fileName) ||
+      /\.heif$/i.test(fileName)
     ) {
       // Image: convert HEIC/HEIF if needed, then resize + convert to WebP
       let imageFile = file;
       try {
         const { isHeic, heicTo } = await import("heic-to");
-        if (await isHeic(file)) {
+        if (await isHeic(imageFile)) {
           editor?.updateAttachmentStatus(clientId, "processing", null, null);
           const blob = await heicTo({
-            blob: file,
+            blob: imageFile,
             type: "image/jpeg",
             quality: 0.92,
           });
-          imageFile = new File([blob], file.name.replace(/\.heic$/i, ".jpg"), {
+          imageFile = new File([blob], fileName.replace(/\.heic$/i, ".jpg"), {
             type: "image/jpeg",
           });
           editor?.updateAttachmentPreview(clientId, imageFile);
@@ -355,6 +391,8 @@ async function uploadFile(
         toUpload = result.file;
         width = result.width;
         height = result.height;
+        file = null as unknown as File;
+        imageFile = null as unknown as File;
       } catch {
         editor?.removeAttachment(clientId);
         showToast("Image format not supported.", "error");
@@ -369,7 +407,7 @@ async function uploadFile(
 
     // Extract metadata for non-video files (video metadata comes from VideoProcessor)
     // Audio waveform is already extracted above (before AudioProcessor runs).
-    if (!file.type.startsWith("video/")) {
+    if (!fileType.startsWith("video/")) {
       const meta = await extractMediaMetadata(toUpload);
       width ??= meta.width;
       height ??= meta.height;
@@ -387,7 +425,7 @@ async function uploadFile(
     // markdown via the compose API and materialized by `createTextAttachment`.
     let summary: string | undefined;
     let chars: number | undefined;
-    const category = getMediaCategory(file.type);
+    const category = getMediaCategory(fileType);
     if (category === "text") {
       try {
         const textContent = await toUpload.text();
@@ -400,6 +438,9 @@ async function uploadFile(
       }
     }
 
+    uploadProgress.set(clientId, 0);
+    refreshUploadToast();
+
     const result = await uploadViaSession(
       toUpload,
       {
@@ -414,13 +455,19 @@ async function uploadFile(
       },
       (progress) => {
         editor?.updateAttachmentProgress(clientId, progress);
+        uploadProgress.set(clientId, progress);
+        refreshUploadToast();
       },
     );
 
+    uploadProgress.set(clientId, 1);
+    refreshUploadToast();
     editor?.updateAttachmentStatus(clientId, "done", result.id, null);
     completedMediaIds.set(clientId, result.id);
     return result.id;
   } catch (error) {
+    uploadProgress.delete(clientId);
+    refreshUploadToast();
     const message = error instanceof Error ? error.message : "Upload failed";
     editor?.updateAttachmentStatus(clientId, "error", null, message);
     // Error is shown on the attachment thumbnail; only toast when there's no editor context.
@@ -625,10 +672,21 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
   // Show persistent toast only when uploads are still in flight
   if (hasPending) {
     showPersistentToast("compose-deferred", uploadingMsg);
+    if (detail.pendingAttachments.length > 0) {
+      activeUploadToast = {
+        clientIds: detail.pendingAttachments.map((a) => a.clientId),
+        baseMsg: uploadingMsg,
+      };
+      refreshUploadToast();
+    }
   }
 
   /** Show result toast — replaces persistent toast if one exists, otherwise shows a new one */
   const toastMsg = (msg: string, type: "success" | "error" = "success") => {
+    if (activeUploadToast) {
+      for (const id of activeUploadToast.clientIds) uploadProgress.delete(id);
+      activeUploadToast = null;
+    }
     if (hasPending) {
       replaceWithAutoClose("compose-deferred", msg, type);
     } else {

package/src/client/compose-launch.ts

@@ -1,5 +1,4 @@
 import type { JantComposeDialog } from "./components/jant-compose-dialog.js";
-import type { ComposeFormat } from "./components/compose-types.js";
 
 interface ReplyToData {
   contentHtml: string;
@@ -100,16 +99,6 @@ function getReplyData(article: HTMLElement): ReplyToData {
   };
 }
 
-function getArticleComposeFormat(
-  article: HTMLElement,
-): ComposeFormat | undefined {
-  const format = article.dataset.format;
-  if (format === "note" || format === "link" || format === "quote") {
-    return format;
-  }
-  return undefined;
-}
-
 export async function openNewCompose(
   options?: ComposeOpenOptions,
 ): Promise<void> {
@@ -124,12 +113,10 @@ export async function openReplyForArticle(article: HTMLElement): Promise<void> {
   if (!dialog) return;
 
   const threadRootId = article.dataset.threadRootId ?? postId;
-  const initialFormat = getArticleComposeFormat(article);
   await dialog.openReply(
     postId,
     getReplyData(article),
     threadRootId,
     getReplyRefreshTarget(article) ?? undefined,
-    initialFormat ? { initialFormat } : undefined,
   );
 }

package/src/client/thread-context.ts

@@ -1,131 +1,9 @@
 /**
  * Thread Context Interactions
  *
- * 1. Expand/collapse faded ancestor context via toggle button
- * 2. Auto-scroll to current post on thread detail pages
+ * Auto-scroll to current post on thread detail pages.
  */
 
-function parsePixelValue(value: string, fallback: number): number {
-  const parsed = Number.parseFloat(value);
-  return Number.isFinite(parsed) ? parsed : fallback;
-}
-
-function getCollapsedMaxHeight(container: HTMLElement): number {
-  const wasExpanded = container.classList.contains("expanded");
-  if (wasExpanded) {
-    container.classList.remove("expanded");
-  }
-
-  const value = getComputedStyle(container).maxHeight;
-  const maxHeight = parsePixelValue(value, 188);
-
-  if (wasExpanded) {
-    container.classList.add("expanded");
-  }
-
-  return maxHeight;
-}
-
-function getPendingImages(container: HTMLElement): HTMLImageElement[] {
-  return Array.from(container.querySelectorAll("img")).filter(
-    (image) => !image.complete,
-  );
-}
-
-function waitForContentToSettle(
-  container: HTMLElement,
-  callback: () => void,
-): void {
-  const pendingImages = getPendingImages(container);
-  if (pendingImages.length === 0) {
-    requestAnimationFrame(() => {
-      requestAnimationFrame(callback);
-    });
-    return;
-  }
-
-  let remaining = pendingImages.length;
-  const handleDone = (): void => {
-    remaining -= 1;
-    if (remaining === 0) {
-      callback();
-    }
-  };
-
-  pendingImages.forEach((image) => {
-    image.addEventListener("load", handleDone, { once: true });
-    image.addEventListener("error", handleDone, { once: true });
-  });
-}
-
-function updateThreadContextState(
-  container: HTMLElement,
-  toggle: HTMLElement,
-  allowExpand: boolean,
-): void {
-  const collapsedMaxHeight = getCollapsedMaxHeight(container);
-  const isExpanded = container.classList.contains("expanded");
-  const overflows = container.scrollHeight > collapsedMaxHeight + 1;
-  const showMoreLabel = toggle.dataset.labelMore ?? "Show more";
-  const showLessLabel = toggle.dataset.labelLess ?? "Show less";
-
-  if (!overflows) {
-    if (allowExpand) {
-      container.classList.remove(
-        "thread-context-collapsed",
-        "thread-context-faded",
-        "expanded",
-      );
-    } else {
-      container.classList.add("thread-context-collapsed");
-      container.classList.remove("thread-context-faded", "expanded");
-    }
-    toggle.classList.add("hidden");
-    toggle.textContent = showMoreLabel;
-    toggle.setAttribute("aria-expanded", "false");
-    return;
-  }
-
-  container.classList.add("thread-context-collapsed");
-  container.classList.add("thread-context-faded");
-  toggle.classList.remove("hidden");
-  toggle.textContent = isExpanded ? showLessLabel : showMoreLabel;
-  toggle.setAttribute("aria-expanded", isExpanded ? "true" : "false");
-}
-
-function setupThreadContext(group: HTMLElement): void {
-  const container = group.querySelector<HTMLElement>("[data-thread-context]");
-  const toggle = group.querySelector<HTMLElement>(
-    "[data-thread-context-toggle]",
-  );
-  if (!container || !toggle) return;
-
-  let allowExpand = false;
-  updateThreadContextState(container, toggle, allowExpand);
-
-  waitForContentToSettle(container, () => {
-    allowExpand = true;
-    updateThreadContextState(container, toggle, allowExpand);
-  });
-
-  if ("ResizeObserver" in globalThis) {
-    const observer = new globalThis.ResizeObserver(() => {
-      updateThreadContextState(container, toggle, allowExpand);
-    });
-    observer.observe(container);
-  }
-}
-
-export function setupThreadContexts(
-  root: globalThis.Document | globalThis.Element = document,
-): void {
-  root.querySelectorAll(".thread-group").forEach((group) => {
-    if (group instanceof HTMLElement) {
-      setupThreadContext(group);
-    }
-  });
-}
-
 function isFirstThreadDetailItem(current: HTMLElement): boolean {
   const group = current.closest<HTMLElement>(".thread-group-detail");
   if (!group) return false;
@@ -161,25 +39,8 @@ function scrollCurrentDetailPostIntoView(
   });
 }
 
-// Expand/collapse: event delegation on toggle buttons
-document.addEventListener("click", (e) => {
-  const toggle = (e.target as HTMLElement).closest<HTMLElement>(
-    "[data-thread-context-toggle]",
-  );
-  if (!toggle) return;
-
-  const container = toggle
-    .closest(".thread-group")
-    ?.querySelector<HTMLElement>("[data-thread-context]");
-  if (!container) return;
-
-  container.classList.toggle("expanded");
-  updateThreadContextState(container, toggle, true);
-});
-
 // Auto-scroll to current post on detail pages
 document.addEventListener("DOMContentLoaded", () => {
-  setupThreadContexts(document);
   scrollCurrentDetailPostIntoView(document);
 });