@jant/core 0.3.36 → 0.3.37

package/src/client/compose-bridge.ts

@@ -9,12 +9,36 @@ import type { ComposeSubmitDetail } from "./components/compose-types.js";
 import type { ComposeAttachment } from "./components/compose-types.js";
 import type { JantComposeDialog } from "./components/jant-compose-dialog.js";
 import type { JantComposeEditor } from "./components/jant-compose-editor.js";
+import { AudioProcessor } from "./audio-processor.js";
 import { ImageProcessor } from "./image-processor.js";
+import { VideoProcessor } from "./video-processor.js";
+import {
+  extractMediaMetadata,
+  extractAudioWaveform,
+} from "./media-metadata.js";
 import {
   showToast,
   showPersistentToast,
   replaceWithAutoClose,
 } from "./toast.js";
+import { MULTIPART_THRESHOLD, uploadMultipart } from "./multipart-upload.js";
+import { getMediaCategory } from "../lib/upload.js";
+
+function getComposeEditorFromEventTarget(
+  target: globalThis.EventTarget | null,
+): JantComposeEditor | null {
+  return target instanceof globalThis.Element
+    ? (target.closest("jant-compose-editor") as JantComposeEditor | null)
+    : null;
+}
+
+function getComposeDialogFromEventTarget(
+  target: globalThis.EventTarget | null,
+): JantComposeDialog | null {
+  return target instanceof globalThis.Element
+    ? (target.closest("jant-compose-dialog") as JantComposeDialog | null)
+    : null;
+}
 
 // ── Upload manager ──────────────────────────────────────────────────
 
@@ -34,17 +58,140 @@ async function uploadFile(
   editor: JantComposeEditor | null,
 ): Promise<string | null> {
   try {
+    let toUpload: File;
+    let width: number | undefined;
+    let height: number | undefined;
+    let blurhash: string | undefined;
+    let waveform: string | undefined;
+    let poster: Blob | undefined;
+
+    if (file.type.startsWith("video/")) {
+      // Video: transcode with mediabunny (requires WebCodecs)
+      if (!VideoProcessor.isSupported()) {
+        editor?.updateAttachmentStatus(
+          clientId,
+          "error",
+          null,
+          "Your browser doesn't support video processing. Use Chrome or Edge to upload videos.",
+        );
+        return null;
+      }
+
+      editor?.updateAttachmentStatus(clientId, "processing", null, null);
+      const result = await VideoProcessor.processToFile(file, (progress) => {
+        editor?.updateAttachmentProgress(clientId, progress);
+      });
+      toUpload = result.file;
+      width = result.width;
+      height = result.height;
+      blurhash = result.blurhash;
+      poster = result.poster;
+    } else if (file.type.startsWith("audio/")) {
+      // Audio: transcode to AAC (.m4a) (requires WebCodecs)
+      if (!AudioProcessor.isSupported()) {
+        editor?.updateAttachmentStatus(
+          clientId,
+          "error",
+          null,
+          "Your browser doesn't support audio processing. Use Chrome or Edge to upload audio.",
+        );
+        return null;
+      }
+
+      // Extract waveform from the original file before AudioProcessor runs
+      try {
+        waveform = await extractAudioWaveform(file);
+      } catch {
+        // Waveform extraction is best-effort
+      }
+
+      editor?.updateAttachmentStatus(clientId, "processing", null, null);
+      const result = await AudioProcessor.processToFile(file, (progress) => {
+        editor?.updateAttachmentProgress(clientId, progress);
+      });
+      toUpload = result.file;
+    } else if (
+      file.type.startsWith("image/") ||
+      /\.heic$/i.test(file.name) ||
+      /\.heif$/i.test(file.name)
+    ) {
+      // 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)) {
+          editor?.updateAttachmentStatus(clientId, "processing", null, null);
+          const blob = await heicTo({
+            blob: file,
+            type: "image/jpeg",
+            quality: 0.92,
+          });
+          imageFile = new File([blob], file.name.replace(/\.heic$/i, ".jpg"), {
+            type: "image/jpeg",
+          });
+          editor?.updateAttachmentPreview(clientId, imageFile);
+        }
+        const result = await ImageProcessor.processToFile(imageFile);
+        toUpload = result.file;
+        width = result.width;
+        height = result.height;
+      } catch {
+        editor?.removeAttachment(clientId);
+        showToast("Image format not supported.", "error");
+        return null;
+      }
+    } else {
+      toUpload = file;
+    }
+
     // Update status to uploading
     editor?.updateAttachmentStatus(clientId, "uploading", null, null);
 
-    // Process images (resize, convert to WebP); upload non-images as-is
-    const toUpload = file.type.startsWith("image/")
-      ? await ImageProcessor.processToFile(file)
-      : file;
+    // 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/")) {
+      const meta = await extractMediaMetadata(toUpload);
+      width ??= meta.width;
+      height ??= meta.height;
+      blurhash ??= meta.blurhash;
+      waveform ??= meta.waveform;
+      poster ??= meta.poster;
+    }
+
+    // Large files: use multipart upload to avoid Worker body size limit
+    if (toUpload.size >= MULTIPART_THRESHOLD) {
+      const result = await uploadMultipart({
+        file: toUpload,
+        metadata: { width, height, blurhash, waveform, poster },
+        onProgress: (p) => editor?.updateAttachmentProgress(clientId, p),
+      });
+      editor?.updateAttachmentStatus(clientId, "done", result.id, null);
+      return result.id;
+    }
+
+    // For text-category files, read content and include summary
+    let summary: string | undefined;
+    const category = getMediaCategory(file.type);
+    if (category === "text" && file.type !== "text/x-tiptap+json") {
+      try {
+        const textContent = await file.text();
+        const trimmed = textContent.replace(/\s+/g, " ").trim();
+        summary =
+          trimmed.length <= 100 ? trimmed : trimmed.slice(0, 100) + "\u2026";
+      } catch {
+        // Ignore — summary is optional
+      }
+    }
 
-    // Upload to server
+    // Small files: existing single-request upload
     const formData = new FormData();
     formData.append("file", toUpload);
+    if (width) formData.append("width", String(width));
+    if (height) formData.append("height", String(height));
+    if (blurhash) formData.append("blurhash", blurhash);
+    if (waveform) formData.append("waveform", waveform);
+    if (poster) formData.append("poster", poster, "poster.webp");
+    if (summary) formData.append("summary", summary);
 
     const res = await fetch("/api/upload", {
       method: "POST",
@@ -55,6 +202,7 @@ async function uploadFile(
       const data = await res.json();
       const error = data.error ?? "Upload failed";
       editor?.updateAttachmentStatus(clientId, "error", null, error);
+      showToast(error, "error");
       return null;
     }
 
@@ -64,14 +212,11 @@ async function uploadFile(
     return mediaId;
   } catch {
     editor?.updateAttachmentStatus(clientId, "error", null, "Upload failed");
+    showToast("Upload failed", "error");
     return null;
   }
 }
 
-function getEditor(): JantComposeEditor | null {
-  return document.querySelector("jant-compose-editor");
-}
-
 // ── Attachment removal handler ───────────────────────────────────────
 
 document.addEventListener("jant:attachment-removed", (e: Event) => {
@@ -94,7 +239,7 @@ document.addEventListener("jant:files-selected", (e: Event) => {
   const event = e as CustomEvent<{
     files: { file: File; clientId: string }[];
   }>;
-  const editor = getEditor();
+  const editor = getComposeEditorFromEventTarget(event.target);
 
   for (const { file, clientId } of event.detail.files) {
     const promise = uploadFile(file, clientId, editor).then((mediaId) => {
@@ -113,74 +258,102 @@ document.addEventListener("jant:files-selected", (e: Event) => {
   }
 });
 
-// ── Submit handler ──────────────────────────────────────────────────
+// ── Reply trigger handler ───────────────────────────────────────────
 
-document.addEventListener("jant:compose-submit", async (e: Event) => {
-  const event = e as CustomEvent<ComposeSubmitDetail>;
-  const detail = event.detail;
-  const dialog = document.getElementById(
-    "compose-dialog",
-  ) as HTMLDialogElement | null;
-  const composeEl = document.querySelector(
+document.addEventListener("click", (e: MouseEvent) => {
+  const trigger = (e.target as HTMLElement).closest<HTMLButtonElement>(
+    "[data-reply-trigger]",
+  );
+  if (!trigger) return;
+
+  const article = trigger.closest<HTMLElement>("article[data-post]");
+  if (!article) return;
+
+  const postId = article.dataset.postId;
+  if (!postId) return;
+
+  // Capture rendered content from the DOM — reuses server-rendered cards
+  // (NoteCard, LinkCard, QuoteCard) with all formats, media, and attachments
+  const clone = article.cloneNode(true) as HTMLElement;
+  clone.querySelector("[data-post-meta]")?.remove();
+  clone.querySelector(".post-status-badges")?.remove();
+  const contentHtml = clone.innerHTML;
+
+  const timeEl = article.querySelector<HTMLElement>("time.dt-published");
+  const dateText = timeEl?.textContent?.trim() ?? "";
+
+  const dialog = document.querySelector(
     "jant-compose-dialog",
   ) as JantComposeDialog | null;
+  dialog?.openReply(postId, { contentHtml, dateText });
+});
 
-  if (!composeEl) return;
-  composeEl.loading = true;
+// ── Submit handler ──────────────────────────────────────────────────
 
-  try {
-    const res = await fetch("/compose", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-      body: JSON.stringify({
-        format: detail.format,
-        title: detail.title || undefined,
-        body: detail.body || undefined,
-        url: detail.url || undefined,
-        quoteText: detail.quoteText || undefined,
-        status: detail.status,
-        rating: detail.rating || undefined,
-        collectionIds:
-          detail.collectionIds.length > 0 ? detail.collectionIds : undefined,
-        mediaIds: detail.mediaIds.length > 0 ? detail.mediaIds : undefined,
-        mediaAlts:
-          Object.keys(detail.mediaAlts).length > 0
-            ? detail.mediaAlts
-            : undefined,
-      }),
-    });
+/** Build the JSON body for both create and update requests */
+function buildPostBody(detail: ComposeSubmitDetail) {
+  return {
+    format: detail.format,
+    title: detail.title || undefined,
+    body: detail.body || undefined,
+    url: detail.url || undefined,
+    quoteText: detail.quoteText || undefined,
+    status: detail.status,
+    visibility: detail.visibility || undefined,
+    featured: detail.featured || undefined,
+    rating: detail.rating || undefined,
+    collectionIds:
+      detail.collectionIds.length > 0 ? detail.collectionIds : undefined,
+    mediaIds: detail.mediaIds.length > 0 ? detail.mediaIds : undefined,
+    mediaAlts:
+      Object.keys(detail.mediaAlts).length > 0 ? detail.mediaAlts : undefined,
+    replyToId: detail.replyToId || undefined,
+  };
+}
 
-    if (!res.ok) {
-      const data = await res.json();
-      showToast(data.error ?? "Something went wrong", "error");
-      return;
+/**
+ * Upload text attachments as files to /api/upload.
+ * Returns a map of clientId → mediaId for newly uploaded items.
+ */
+async function uploadTextAttachments(
+  attachedTexts: ComposeSubmitDetail["attachedTexts"],
+): Promise<Map<string, string>> {
+  const clientIdToMediaId = new Map<string, string>();
+
+  for (const item of attachedTexts) {
+    // Always re-upload text attachments with content (content may have been edited)
+    if (item.bodyJson === null) {
+      // No content — keep existing mediaId if present
+      if (item.mediaId) {
+        clientIdToMediaId.set(item.clientId, item.mediaId);
+      }
+      continue;
     }
 
-    const data = await res.json();
-
-    if (data.status === "draft") {
-      showToast(data.toast ?? "Draft saved.");
-    } else if (data.status === "published" && data.cardHtml) {
-      const timeline = document.getElementById("timeline-items");
-      if (timeline) {
-        document.getElementById("empty-timeline")?.remove();
-        timeline.insertAdjacentHTML("afterbegin", data.cardHtml);
+    const envelope = { json: item.bodyJson, html: item.bodyHtml ?? "" };
+    const blob = new Blob([JSON.stringify(envelope)], {
+      type: "text/x-tiptap+json",
+    });
+    const formData = new FormData();
+    formData.append("file", blob, "attached-text.json");
+    formData.append("summary", item.summary);
+
+    try {
+      const res = await fetch("/api/upload", {
+        method: "POST",
+        body: formData,
+      });
+      if (res.ok) {
+        const data = await res.json();
+        clientIdToMediaId.set(item.clientId, data.id as string);
       }
+    } catch {
+      // Upload failed — skip this item
     }
-
-    dialog?.close();
-    // Prevent browser from restoring focus to the trigger button
-    (document.activeElement as HTMLElement)?.blur();
-    composeEl.reset();
-  } catch {
-    showToast("Something went wrong", "error");
-  } finally {
-    composeEl.loading = false;
   }
-});
+
+  return clientIdToMediaId;
+}
 
 // ── Deferred submit handler ─────────────────────────────────────────
 
@@ -191,17 +364,51 @@ interface DeferredDetail extends ComposeSubmitDetail {
 document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
   const event = e as CustomEvent<DeferredDetail>;
   const detail = event.detail;
-  const composeEl = document.querySelector(
-    "jant-compose-dialog",
-  ) as JantComposeDialog | null;
+  const composeEl =
+    getComposeDialogFromEventTarget(event.target) ??
+    (document.querySelector("jant-compose-dialog") as JantComposeDialog | null);
+  const isPageMode = !!composeEl?.pageMode;
 
   // Get labels for toast messages
   const labels = composeEl?.labels;
   const uploadingMsg = labels?.uploading ?? "Uploading...";
-  const publishedMsg = labels?.published ?? "Published!";
+  const hasPending = detail.pendingAttachments.length > 0;
 
-  // Show persistent toast
-  showPersistentToast("compose-deferred", uploadingMsg);
+  // Show persistent toast only when uploads are still in flight
+  if (hasPending) {
+    showPersistentToast("compose-deferred", uploadingMsg);
+  }
+
+  /** Show result toast — replaces persistent toast if one exists, otherwise shows a new one */
+  const toastMsg = (msg: string, type: "success" | "error" = "success") => {
+    if (hasPending) {
+      replaceWithAutoClose("compose-deferred", msg, type);
+    } else {
+      showToast(msg, type);
+    }
+  };
+  const resetPageCompose = () => {
+    if (!isPageMode || !composeEl) return;
+    composeEl.reset();
+    composeEl.updateComplete.then(() => {
+      composeEl
+        .querySelector<JantComposeEditor>("jant-compose-editor")
+        ?.focusInput();
+    });
+  };
+  const clearPageLoading = () => {
+    if (!isPageMode || !composeEl) return;
+    composeEl.loading = false;
+  };
+  const leavePageAfterConfirmSave = () => {
+    if (!isPageMode || !composeEl) return false;
+    if (!composeEl.consumePageLeaveRequest()) return false;
+    composeEl.preparePageLeave();
+    globalThis.location.assign(composeEl.closeHref || "/");
+    return true;
+  };
+  const isEdit = !!detail.editPostId;
+  let draftFallback: "upload" | "server" | null = null;
 
   try {
     // Wait for all pending uploads to complete
@@ -212,71 +419,165 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
 
     const results = await Promise.all(pendingPromises);
 
+    // If any pending upload failed:
+    // - For new publishes: filter out failed uploads and save as draft
+    // - Otherwise: abort
+    const failedCount = results.filter((id) => id === null).length;
+    if (failedCount > 0) {
+      if (detail.status === "published" && !isEdit) {
+        draftFallback = "upload";
+      } else {
+        clearPageLoading();
+        toastMsg("Upload failed. Post not created.", "error");
+        return;
+      }
+    }
+
     // Merge newly completed mediaIds with already-done ones
     const newMediaIds = results.filter((id): id is string => id !== null);
-    const allMediaIds = [...detail.mediaIds, ...newMediaIds];
+
+    // Build clientId → mediaId map for file attachments
+    const mediaClientIdMap = new Map<string, string>();
+    for (const att of detail.pendingAttachments) {
+      const idx = pendingClientIds.indexOf(att.clientId);
+      const mediaId = results[idx];
+      if (mediaId) mediaClientIdMap.set(att.clientId, mediaId);
+    }
+    // Upload text attachments as files
+    const textMediaMap = await uploadTextAttachments(detail.attachedTexts);
 
     // Merge alt text: for pending attachments that just uploaded,
     // map their clientId → mediaId and include their alt text
     const mediaAlts = { ...detail.mediaAlts };
     for (const att of detail.pendingAttachments) {
       if (att.alt) {
-        // Find the mediaId from the upload result by matching clientId position
-        const idx = pendingClientIds.indexOf(att.clientId);
-        const mediaId = results[idx];
+        const mediaId = mediaClientIdMap.get(att.clientId);
         if (mediaId) {
           mediaAlts[mediaId] = att.alt;
         }
       }
     }
 
-    // POST to /compose
-    const res = await fetch("/compose", {
-      method: "POST",
+    // Build clientId → mediaId for all file attachments.
+    // Uses mediaClientMap captured at submit time (editor may be reset by now).
+    const fileClientIdMap = new Map<string, string>(mediaClientIdMap);
+    for (const [cid, mid] of Object.entries(detail.mediaClientMap ?? {})) {
+      fileClientIdMap.set(cid, mid);
+    }
+
+    // Build final ordered list from attachmentOrder
+    let allMediaIds: string[];
+    if (detail.attachmentOrder && detail.attachmentOrder.length > 0) {
+      allMediaIds = detail.attachmentOrder
+        .map((clientId) => {
+          // Check file attachments
+          const fileId = fileClientIdMap.get(clientId);
+          if (fileId) return fileId;
+          // Check text attachments
+          const textId = textMediaMap.get(clientId);
+          if (textId) return textId;
+          return null;
+        })
+        .filter((id): id is string => id !== null);
+    } else {
+      // Fallback: combine in order
+      allMediaIds = [
+        ...detail.mediaIds,
+        ...newMediaIds,
+        ...Array.from(textMediaMap.values()),
+      ];
+    }
+
+    const endpoint = isEdit ? `/api/posts/${detail.editPostId}` : "/compose";
+    const method = isEdit ? "PUT" : "POST";
+
+    const bodyPayload = buildPostBody({
+      ...detail,
+      status: draftFallback ? "draft" : detail.status,
+      mediaIds: allMediaIds,
+      mediaAlts,
+    });
+
+    const res = await fetch(endpoint, {
+      method,
       headers: {
         "Content-Type": "application/json",
         Accept: "application/json",
       },
-      body: JSON.stringify({
-        format: detail.format,
-        title: detail.title || undefined,
-        body: detail.body || undefined,
-        url: detail.url || undefined,
-        quoteText: detail.quoteText || undefined,
-        status: detail.status,
-        rating: detail.rating || undefined,
-        collectionIds:
-          detail.collectionIds.length > 0 ? detail.collectionIds : undefined,
-        mediaIds: allMediaIds.length > 0 ? allMediaIds : undefined,
-        mediaAlts: Object.keys(mediaAlts).length > 0 ? mediaAlts : undefined,
-      }),
+      body: JSON.stringify(bodyPayload),
     });
 
     if (!res.ok) {
+      // Server error on a new publish: retry as draft
+      if (detail.status === "published" && !isEdit && !draftFallback) {
+        const retryPayload = { ...bodyPayload, status: "draft" };
+        const retryRes = await fetch(endpoint, {
+          method,
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+          },
+          body: JSON.stringify(retryPayload),
+        });
+
+        if (retryRes.ok) {
+          draftFallback = "server";
+          const retryData = await retryRes.json();
+          const fallbackMsg =
+            labels?.publishFailedDraft ?? "Couldn't publish. Saved as draft.";
+          if (!leavePageAfterConfirmSave()) {
+            resetPageCompose();
+          }
+          toastMsg(fallbackMsg);
+          if (retryData.toast) toastMsg(retryData.toast);
+          return;
+        }
+      }
+
       const data = await res.json();
-      replaceWithAutoClose(
-        "compose-deferred",
-        data.error ?? "Something went wrong",
-        "error",
-      );
+      clearPageLoading();
+      toastMsg(data.error ?? "Something went wrong", "error");
+      return;
+    }
+
+    if (isEdit) {
+      toastMsg("Post updated.");
+      if (isPageMode) {
+        globalThis.location.assign(globalThis.location.pathname);
+      } else {
+        globalThis.location.reload();
+      }
+      return;
+    }
+
+    // Upload fallback: show specific message instead of normal flow
+    if (draftFallback === "upload") {
+      const fallbackMsg =
+        labels?.uploadFailedDraft ?? "Some uploads failed. Saved as draft.";
+      resetPageCompose();
+      toastMsg(fallbackMsg);
       return;
     }
 
     const data = await res.json();
 
-    if (data.status === "published" && data.cardHtml) {
-      const timeline = document.getElementById("timeline-items");
-      if (timeline) {
-        document.getElementById("empty-timeline")?.remove();
-        timeline.insertAdjacentHTML("afterbegin", data.cardHtml);
+    if (data.status === "published") {
+      if (isPageMode && data.permalink) {
+        composeEl?.preparePageLeave?.();
+        globalThis.location.assign(data.permalink);
+      } else {
+        // Reload the page so the timeline picks up the new post via a
+        // full assembleTimeline() pass (correct thread previews, filters, etc.)
+        globalThis.location.reload();
       }
+    } else {
+      if (!leavePageAfterConfirmSave()) {
+        resetPageCompose();
+      }
+      toastMsg(data.toast ?? "Draft saved.");
     }
-
-    replaceWithAutoClose(
-      "compose-deferred",
-      data.status === "draft" ? (data.toast ?? "Draft saved.") : publishedMsg,
-    );
   } catch {
-    replaceWithAutoClose("compose-deferred", "Something went wrong", "error");
+    clearPageLoading();
+    toastMsg("Something went wrong", "error");
   }
 });