@jant/core 0.5.2 → 0.5.4

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

@@ -46,6 +46,7 @@ import {
   uploadAndInsertInlineImage,
   adoptPendingInlineImageUploads,
 } from "../tiptap/inline-image-upload.js";
+import { getClipboardFiles } from "../tiptap/paste-media.js";
 import { isSafeAbsoluteUrl } from "../../lib/url.js";
 import { randomUUID } from "../random-uuid.js";
 import {
@@ -276,6 +277,13 @@ export class JantComposeEditor extends LitElement {
       "jant:slash-command-discovered",
       this._onSlashCommandDiscovered,
     );
+    this.addEventListener("dragenter", this._onDragEnter);
+    // Capture phase: a file dragover is stopped here before ProseMirror sees
+    // it, so its drop cursor never appears for file drags (the drop position
+    // is decided by _shouldPasteInlineImage, not the cursor).
+    this.addEventListener("dragover", this._onDragOver, true);
+    this.addEventListener("dragleave", this._onDragLeave);
+    this.addEventListener("drop", this._onDrop);
   }
 
   disconnectedCallback() {
@@ -291,6 +299,10 @@ export class JantComposeEditor extends LitElement {
       this._onSlashCommandDiscovered,
     );
     document.removeEventListener("click", this._onDocClickBound);
+    this.removeEventListener("dragenter", this._onDragEnter);
+    this.removeEventListener("dragover", this._onDragOver, true);
+    this.removeEventListener("dragleave", this._onDragLeave);
+    this.removeEventListener("drop", this._onDrop);
     hideSlashCommandHint(this);
     this._emojiContainer?.remove();
     this._emojiPickerEl = null;
@@ -298,6 +310,66 @@ export class JantComposeEditor extends LitElement {
     this._filePickerCleanup = null;
   }
 
+  // Tracks dragenter/dragleave nesting so the highlight only clears when the
+  // pointer actually leaves the editor, not when it crosses a child element.
+  #dragDepth = 0;
+
+  #dragHasFiles(event: DragEvent): boolean {
+    const types = event.dataTransfer?.types;
+    return types ? Array.from(types).includes("Files") : false;
+  }
+
+  private _onDragEnter = (event: DragEvent) => {
+    if (!this.#dragHasFiles(event)) return;
+    this.#dragDepth += 1;
+    this.classList.add("compose-editor-dragover");
+  };
+
+  private _onDragOver = (event: DragEvent) => {
+    if (!this.#dragHasFiles(event)) return;
+    // Keep the file dragover away from ProseMirror so its drop cursor stays
+    // hidden; internal content drags still bubble through untouched.
+    event.stopPropagation();
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+  };
+
+  private _onDragLeave = (event: DragEvent) => {
+    if (!this.#dragHasFiles(event)) return;
+    this.#dragDepth = Math.max(0, this.#dragDepth - 1);
+    if (this.#dragDepth === 0) {
+      this.classList.remove("compose-editor-dragover");
+    }
+  };
+
+  private _onDrop = (event: DragEvent) => {
+    this.#dragDepth = 0;
+    this.classList.remove("compose-editor-dragover");
+    // Drops onto the TipTap body are claimed by the pasteMedia plugin's
+    // handleDrop, which calls preventDefault — skip those to avoid handling
+    // the same files twice.
+    if (event.defaultPrevented) return;
+    const files = getClipboardFiles(event.dataTransfer);
+    if (files.length === 0) return;
+    event.preventDefault();
+
+    const inlineFiles: File[] = [];
+    const attachmentFiles: File[] = [];
+    for (const file of files) {
+      if (this._editor && this._shouldPasteInlineImage(file)) {
+        inlineFiles.push(file);
+      } else {
+        attachmentFiles.push(file);
+      }
+    }
+    for (const file of inlineFiles) {
+      this._uploadAndInsertImage(file);
+    }
+    if (attachmentFiles.length > 0) {
+      this.addFiles(attachmentFiles);
+    }
+  };
+
   private _onSlashCommandDiscovered = () => {
     markSlashCommandDiscovered();
   };

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

@@ -280,46 +280,130 @@ export class JantMediaLightbox extends LitElement {
   #handleKeydown = (e: Event) => {
     const ke = e as globalThis.KeyboardEvent;
     const target = e.target as HTMLElement | null;
+
     if (ke.key === "Escape") {
       e.preventDefault();
       this.close();
       return;
     }
-    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;
+    // Don't hijack keys aimed at a focused control — the short-video progress
+    // slider, the mute/close/nav buttons, or the <video> itself (when focused,
+    // its native shortcuts already handle these keys). Let their native
+    // behavior run instead of double-handling.
+    if (
+      target instanceof HTMLInputElement ||
+      target instanceof HTMLButtonElement ||
+      target instanceof HTMLVideoElement
+    ) {
+      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) {
+    if (!currentImage?.mimeType?.startsWith("video/")) {
+      // Image galleries: arrow keys switch items.
+      if (ke.key === "ArrowLeft") {
+        e.preventDefault();
+        this.#prev();
+      } else if (ke.key === "ArrowRight") {
         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;
+        this.#next();
       }
       return;
     }
 
-    e.preventDefault();
-    if (ke.key === "ArrowLeft") this.#prev();
-    else this.#next();
+    const video = this.querySelector<HTMLVideoElement>(".media-lightbox-video");
+    if (video) this.#handleVideoKeydown(ke, video);
   };
 
+  // Video shortcuts — play/pause, seek, volume, mute, fullscreen — handled at
+  // the dialog level so they work regardless of what's focused. Item switching
+  // happens via the on-screen prev/next buttons, matching YouTube/native
+  // player conventions.
+  #handleVideoKeydown(ke: globalThis.KeyboardEvent, video: HTMLVideoElement) {
+    const duration =
+      Number.isFinite(video.duration) && video.duration > 0
+        ? video.duration
+        : null;
+    const seekTo = (time: number) => {
+      const next =
+        duration != null
+          ? Math.max(0, Math.min(time, duration))
+          : Math.max(0, time);
+      video.currentTime = next;
+      this._videoCurrentTime = next;
+    };
+    const key = ke.key;
+    const lower = key.toLowerCase();
+
+    if (key === " " || lower === "k") {
+      ke.preventDefault();
+      if (video.paused) void video.play().catch(() => {});
+      else video.pause();
+    } else if (key === "ArrowLeft") {
+      ke.preventDefault();
+      seekTo(video.currentTime - 5);
+    } else if (key === "ArrowRight") {
+      ke.preventDefault();
+      seekTo(video.currentTime + 5);
+    } else if (key === "Home") {
+      ke.preventDefault();
+      seekTo(0);
+    } else if (key === "End") {
+      if (duration != null) {
+        ke.preventDefault();
+        seekTo(duration);
+      }
+    } else if (key.length === 1 && key >= "0" && key <= "9") {
+      if (duration != null) {
+        ke.preventDefault();
+        seekTo((Number(key) / 10) * duration);
+      }
+    } else if (key === "ArrowUp") {
+      ke.preventDefault();
+      video.volume = Math.min(1, video.volume + 0.05);
+    } else if (key === "ArrowDown") {
+      ke.preventDefault();
+      video.volume = Math.max(0, video.volume - 0.05);
+    } else if (lower === "m") {
+      ke.preventDefault();
+      const muted = !video.muted;
+      video.muted = muted;
+      this._videoMuted = muted;
+    } else if (lower === "f") {
+      ke.preventDefault();
+      this.#toggleVideoFullscreen(video);
+    }
+  }
+
+  #toggleVideoFullscreen(video: HTMLVideoElement) {
+    const doc = document as globalThis.Document & {
+      webkitFullscreenElement?: globalThis.Element | null;
+      webkitExitFullscreen?: () => void;
+    };
+    const el = video as HTMLVideoElement & {
+      webkitRequestFullscreen?: () => void;
+      webkitEnterFullscreen?: () => void;
+    };
+
+    if (document.fullscreenElement ?? doc.webkitFullscreenElement) {
+      if (document.exitFullscreen) {
+        void document.exitFullscreen().catch(() => {});
+      } else {
+        doc.webkitExitFullscreen?.();
+      }
+      return;
+    }
+
+    if (video.requestFullscreen) {
+      void video.requestFullscreen().catch(() => {});
+    } else if (el.webkitRequestFullscreen) {
+      el.webkitRequestFullscreen();
+    } else if (el.webkitEnterFullscreen) {
+      el.webkitEnterFullscreen();
+    }
+  }
+
   #handleDialogClick = (e: Event) => {
     const target = e.target as HTMLElement;
     // Close on backdrop click (dialog itself or the content wrapper, not media/buttons)
@@ -365,24 +449,23 @@ 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.
+  // Move focus to the content wrapper on open / item change — not the close
+  // button (its focus ring would show during arrow-key nav) and not the
+  // <video> (a focused <video> routes keydown to its own native handler,
+  // bypassing the dialog-level shortcuts in #handleVideoKeydown).
   #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();
   }
 
+  // Browsers focus a <video> when it's clicked. Bounce focus back to the
+  // content wrapper so keydown keeps reaching the dialog-level shortcut
+  // handler instead of the video's native key handling.
+  #handleVideoFocus = () => {
+    this.querySelector<HTMLElement>(".media-lightbox-content")?.focus({
+      preventScroll: true,
+    });
+  };
+
   #resetShortVideoState(image?: LightboxImage) {
     this._videoCurrentTime = 0;
     this._videoDuration =
@@ -543,6 +626,7 @@ export class JantMediaLightbox extends LitElement {
                       playsinline
                       loop
                       ?muted=${this._videoMuted}
+                      @focus=${this.#handleVideoFocus}
                       @loadedmetadata=${this.#handleShortVideoLoadedMetadata}
                       @timeupdate=${this.#handleShortVideoTimeUpdate}
                     ></video>
@@ -596,6 +680,7 @@ export class JantMediaLightbox extends LitElement {
                     controls
                     autoplay
                     playsinline
+                    @focus=${this.#handleVideoFocus}
                   ></video>`
               : html`<img
                   class=${`media-lightbox-img${isScrollableImage ? " media-lightbox-img-scroll" : ""}`}

package/src/client/tiptap/paste-media.ts

@@ -76,6 +76,47 @@ export const PasteMedia = Extension.create<PasteMediaOptions>({
   addProseMirrorPlugins() {
     const extension = this;
 
+    /**
+     * Routes dropped/pasted files into inline images or attachments using the
+     * same decision as the host (`shouldInsertInline`). Returns false when
+     * there is nothing this extension can handle, so the caller leaves the
+     * event to the editor's default behavior.
+     */
+    const routeFiles = (files: File[]): boolean => {
+      const inlineFiles = files.filter(
+        (file) => extension.options.shouldInsertInline?.(file) === true,
+      );
+      const attachmentFiles = files.filter(
+        (file) => !inlineFiles.includes(file),
+      );
+
+      if (
+        inlineFiles.length === 0 &&
+        (attachmentFiles.length === 0 ||
+          extension.options.onPasteFiles === undefined)
+      ) {
+        return false;
+      }
+
+      for (const file of inlineFiles) {
+        const uploadInlineImage = extension.options.uploadInlineImage;
+        if (uploadInlineImage) {
+          void uploadInlineImage(file);
+          continue;
+        }
+        void uploadAndInsertInlineImage(extension.editor, file);
+      }
+
+      if (
+        attachmentFiles.length > 0 &&
+        extension.options.onPasteFiles !== undefined
+      ) {
+        extension.options.onPasteFiles(attachmentFiles);
+      }
+
+      return true;
+    };
+
     return [
       new Plugin({
         key: pasteMediaPluginKey,
@@ -83,40 +124,15 @@ export const PasteMedia = Extension.create<PasteMediaOptions>({
           handlePaste(_view, event) {
             const files = getClipboardFiles(event.clipboardData);
             if (files.length === 0) return false;
-
-            const inlineFiles = files.filter(
-              (file) => extension.options.shouldInsertInline?.(file) === true,
-            );
-            const attachmentFiles = files.filter(
-              (file) => !inlineFiles.includes(file),
-            );
-
-            if (
-              inlineFiles.length === 0 &&
-              (attachmentFiles.length === 0 ||
-                extension.options.onPasteFiles === undefined)
-            ) {
-              return false;
-            }
-
+            if (!routeFiles(files)) return false;
+            event.preventDefault();
+            return true;
+          },
+          handleDrop(_view, event) {
+            const files = getClipboardFiles(event.dataTransfer);
+            if (files.length === 0) return false;
+            if (!routeFiles(files)) return false;
             event.preventDefault();
-
-            for (const file of inlineFiles) {
-              const uploadInlineImage = extension.options.uploadInlineImage;
-              if (uploadInlineImage) {
-                void uploadInlineImage(file);
-                continue;
-              }
-              void uploadAndInsertInlineImage(extension.editor, file);
-            }
-
-            if (
-              attachmentFiles.length > 0 &&
-              extension.options.onPasteFiles !== undefined
-            ) {
-              extension.options.onPasteFiles(attachmentFiles);
-            }
-
             return true;
           },
         },

package/src/client/video-processor.ts

@@ -7,6 +7,8 @@
  * - Strips spurious rotation metadata from the output (mediabunny may
  *   bake rotation into pixels AND write a display matrix, causing the
  *   browser to double-rotate)
+ * - Clears the alternate_group track flag (mediabunny sets it non-zero,
+ *   which stops Safari's native video controls from auto-hiding)
  * - Extracts poster frame + blurhash during processing
  *
  * Requires WebCodecs API support — check `isSupported()` before use.
@@ -25,6 +27,7 @@ import {
 } from "mediabunny";
 import { encode } from "blurhash";
 import { normalizeDurationSeconds } from "../lib/video-playback.js";
+import { zeroTrackAlternateGroups } from "../lib/mp4-track-flags.js";
 
 /** Maximum pixels for the long edge of the output video. */
 const MAX_LONG_EDGE = 1920;
@@ -222,6 +225,12 @@ async function processToFile(
     const buffer = target.buffer;
     if (!buffer) throw new Error("Video processing produced no output");
 
+    // Mediabunny tags each track with a non-zero alternate_group, which makes
+    // Safari treat tracks as mutually exclusive alternates and never auto-hide
+    // the native <video> control bar during playback. Zero it so the controls
+    // behave like any other MP4.
+    zeroTrackAlternateGroups(buffer);
+
     // Detect whether this browser double-rotates.  Chrome's WebCodecs
     // bakes rotation into the pixel data AND mediabunny writes a display
     // matrix → the browser applies the matrix again (double-rotation).

package/src/lib/__tests__/mp4-track-flags.test.ts

@@ -0,0 +1,117 @@
+import { describe, it, expect } from "vitest";
+import { zeroTrackAlternateGroups } from "../mp4-track-flags.js";
+
+const str4 = (s: string): number[] => [...s].map((c) => c.charCodeAt(0));
+const u32 = (n: number): number[] => [
+  (n >>> 24) & 0xff,
+  (n >>> 16) & 0xff,
+  (n >>> 8) & 0xff,
+  n & 0xff,
+];
+const u16 = (n: number): number[] => [(n >>> 8) & 0xff, n & 0xff];
+const box = (type: string, ...payload: number[][]): number[] => {
+  const body = payload.flat();
+  return [...u32(body.length + 8), ...str4(type), ...body];
+};
+
+/** A `tkhd` box with a given version and alternate_group value. */
+function tkhd(version: 0 | 1, alternateGroup: number): number[] {
+  // creation, modification, trackID, reserved: 4 fields, 4 or 8 bytes each.
+  const idAndTimes =
+    version === 1 ? new Array(24).fill(0) : new Array(16).fill(0);
+  const duration = version === 1 ? new Array(8).fill(0) : new Array(4).fill(0);
+  return box(
+    "tkhd",
+    [version, 0, 0, 0], // version + flags
+    idAndTimes,
+    duration,
+    new Array(8).fill(0), // reserved[2]
+    u16(0), // layer
+    u16(alternateGroup),
+    new Array(48).fill(0), // volume, reserved, matrix, width, height
+  );
+}
+
+describe("zeroTrackAlternateGroups", () => {
+  it("zeroes a non-zero alternate_group in every tkhd (v0)", () => {
+    const bytes = new Uint8Array(
+      box(
+        "moov",
+        box("trak", tkhd(0, 1), box("mdia", [])),
+        box("trak", tkhd(0, 2), box("mdia", [])),
+      ),
+    );
+    zeroTrackAlternateGroups(bytes.buffer);
+
+    const view = new DataView(bytes.buffer);
+    // Locate both tkhd boxes and confirm alternate_group is now 0.
+    const groups: number[] = [];
+    for (let i = 0; i + 8 <= bytes.length; i++) {
+      if (
+        String.fromCharCode(
+          bytes[i + 4],
+          bytes[i + 5],
+          bytes[i + 6],
+          bytes[i + 7],
+        ) === "tkhd"
+      ) {
+        groups.push(view.getUint16(i + 8 + 4 + 20 + 8 + 2));
+      }
+    }
+    expect(groups).toEqual([0, 0]);
+  });
+
+  it("handles version 1 tkhd boxes", () => {
+    const bytes = new Uint8Array(box("moov", box("trak", tkhd(1, 7))));
+    zeroTrackAlternateGroups(bytes.buffer);
+
+    const view = new DataView(bytes.buffer);
+    let offset = -1;
+    for (let i = 0; i + 8 <= bytes.length; i++) {
+      if (
+        String.fromCharCode(
+          bytes[i + 4],
+          bytes[i + 5],
+          bytes[i + 6],
+          bytes[i + 7],
+        ) === "tkhd"
+      ) {
+        offset = i + 8 + 4 + 32 + 8 + 2;
+      }
+    }
+    expect(view.getUint16(offset)).toBe(0);
+  });
+
+  it("touches nothing but the alternate_group field", () => {
+    const original = new Uint8Array(
+      box(
+        "moov",
+        box("trak", tkhd(0, 0x0102), box("mdia", box("mdhd", u32(0)))),
+      ),
+    );
+    const copy = new Uint8Array(original);
+    zeroTrackAlternateGroups(copy.buffer);
+
+    const diffs: number[] = [];
+    for (let i = 0; i < original.length; i++) {
+      if (original[i] !== copy[i]) diffs.push(i);
+    }
+    // Exactly the two bytes of one alternate_group field changed.
+    expect(diffs).toHaveLength(2);
+    expect(diffs[1]).toBe(diffs[0] + 1);
+  });
+
+  it("leaves an already-zero alternate_group untouched", () => {
+    const original = new Uint8Array(box("moov", box("trak", tkhd(0, 0))));
+    const copy = new Uint8Array(original);
+    zeroTrackAlternateGroups(copy.buffer);
+    expect([...copy]).toEqual([...original]);
+  });
+
+  it("ignores files with no tkhd box", () => {
+    const original = new Uint8Array(box("ftyp", str4("isom")));
+    const copy = new Uint8Array(original);
+    zeroTrackAlternateGroups(copy.buffer);
+    expect([...copy]).toEqual([...original]);
+  });
+});

package/src/lib/mp4-track-flags.ts

@@ -0,0 +1,71 @@
+/**
+ * In-place patching of MP4 track header (`tkhd`) flags.
+ *
+ * Mediabunny's MP4 muxer writes a non-zero `alternate_group` into every
+ * `tkhd` box (video → 1, audio → 2). Per ISO-BMFF, a non-zero
+ * `alternate_group` marks a track as one of several mutually exclusive
+ * alternates. Safari's native `<video>` player reacts to this by never
+ * auto-hiding the control bar during playback — the controls stay pinned.
+ * ffmpeg writes 0 here; matching that restores normal control-bar behavior.
+ */
+
+/** ISO-BMFF container boxes that hold a `tkhd` somewhere below them. */
+const CONTAINER_TYPES = new Set(["moov", "trak"]);
+
+/**
+ * Byte offset of the `alternate_group` field within a `tkhd` box, measured
+ * from the start of the box. The field sits after the box header, the
+ * version/flags word, the (version-sized) time/duration fields, the two
+ * reserved words, and the 2-byte `layer` field.
+ */
+function alternateGroupOffset(version: number): number {
+  // header(8) + version/flags(4) + variable middle + reserved(8) + layer(2):
+  //   v0: creation(4) modification(4) trackID(4) reserved(4) duration(4) = 20
+  //   v1: creation(8) modification(8) trackID(4) reserved(4) duration(8) = 32
+  return 8 + 4 + (version === 1 ? 32 : 20) + 8 + 2;
+}
+
+/**
+ * Zero the `alternate_group` field of every `tkhd` box in an MP4 buffer,
+ * operating in place. Safe to call on any ISO-BMFF file; boxes without a
+ * `tkhd` are left untouched.
+ *
+ * @param buffer - The MP4 file bytes. Mutated in place.
+ * @example
+ * zeroTrackAlternateGroups(mediabunnyOutput);
+ */
+export function zeroTrackAlternateGroups(buffer: ArrayBuffer): void {
+  const view = new DataView(buffer);
+
+  const walk = (start: number, end: number): void => {
+    let pos = start;
+    while (pos + 8 <= end) {
+      let size = view.getUint32(pos);
+      const type = String.fromCharCode(
+        view.getUint8(pos + 4),
+        view.getUint8(pos + 5),
+        view.getUint8(pos + 6),
+        view.getUint8(pos + 7),
+      );
+      if (size === 0) size = end - pos;
+      if (size < 8 || pos + size > end) break;
+
+      if (type === "tkhd") {
+        const version = view.getUint8(pos + 8);
+        const fieldOffset = pos + alternateGroupOffset(version);
+        if (
+          fieldOffset + 2 <= pos + size &&
+          view.getUint16(fieldOffset) !== 0
+        ) {
+          view.setUint16(fieldOffset, 0);
+        }
+      } else if (CONTAINER_TYPES.has(type)) {
+        walk(pos + 8, pos + size);
+      }
+
+      pos += size;
+    }
+  };
+
+  walk(0, buffer.byteLength);
+}