feat(reader): open image gallery & table zoom on single tap (#4600)

* feat(reader): open image gallery & table zoom on single tap In reflowable EPUBs, a single tap on an image or table now opens the same viewer a long-press opens, so the image gallery / table zoom is reachable by both gestures. Fixed-layout books (PDF/comics/manga) keep tap-to-turn, and long-press is unchanged everywhere. Reuses the existing iframe-long-press -> handleImagePress/handleTablePress flow via a new shared detectMediaTarget() helper (also adopted by the long-press path so the two entry points can't drift). handleClick now takes an isFixedLayout flag; the tap branch sits after the link/footnote/drag/ long-hold/Word-Wise guards so linked images still follow links and a long-hold or double-tap won't double-trigger. Context: #4584 (single taps stop registering after picture zoom on some WebView builds) - this adds a second, independent way into the viewer rather than fixing that root cause. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(reader): rename iframe-long-press message to iframe-open-media The message is now posted for both a long-press (any book) and a single tap on an image/table (reflowable books), so the long-press-specific name was misleading. Rename the message type to `iframe-open-media` and the consumer hook `useLongPressEvent` -> `useOpenMediaEvent`. The long-press detector (`addLongPressListeners`/`handleLongPress`) keeps its name since it still detects a long-press specifically. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-16 12:58:37 +08:00
parent 675ee78bc9
commit e145eb835a
4 changed files with 150 additions and 53 deletions
@@ -47,7 +47,7 @@ describe('iframeEventHandlers click gestures', () => {
    // First click of the double-click: full down/up/click cycle.
    handleMousedown('book-1', mouseEvent());
    handleMouseup('book-1', mouseEvent());
-    handleClick('book-1', doubleClickDisabled, mouseEvent());
+    handleClick('book-1', doubleClickDisabled, false, mouseEvent());

    // The second click begins shortly after and is HELD while the user drags
    // to extend the native word selection — so only mousedown fires, no
@@ -69,7 +69,7 @@ describe('iframeEventHandlers click gestures', () => {

    handleMousedown('book-1', mouseEvent());
    handleMouseup('book-1', mouseEvent());
-    handleClick('book-1', doubleClickDisabled, mouseEvent());
+    handleClick('book-1', doubleClickDisabled, false, mouseEvent());

    vi.advanceTimersByTime(260);

@@ -83,13 +83,13 @@ describe('iframeEventHandlers click gestures', () => {
    // First click.
    handleMousedown('book-1', mouseEvent());
    handleMouseup('book-1', mouseEvent());
-    handleClick('book-1', doubleClickDisabled, mouseEvent());
+    handleClick('book-1', doubleClickDisabled, false, mouseEvent());

    // Second click lands quickly (no drag): a complete down/up/click cycle.
    vi.advanceTimersByTime(100);
    handleMousedown('book-1', mouseEvent());
    handleMouseup('book-1', mouseEvent());
-    handleClick('book-1', doubleClickDisabled, mouseEvent());
+    handleClick('book-1', doubleClickDisabled, false, mouseEvent());

    vi.advanceTimersByTime(260);

@@ -98,3 +98,96 @@ describe('iframeEventHandlers click gestures', () => {
    expect(types).not.toContain('iframe-single-click');
  });
 });
+
+describe('single-tap opens image gallery / table zoom in reflowable books (#4584)', () => {
+  let postSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    vi.resetModules();
+    vi.useFakeTimers();
+    postSpy = vi.spyOn(window, 'postMessage').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  const postedMessages = (): Record<string, unknown>[] =>
+    postSpy.mock.calls.map((c: unknown[]) => c[0] as Record<string, unknown>);
+
+  // A single tap = a full down/up/click cycle, then advance past the
+  // double-click window so the deferred single-click logic runs.
+  const tap = (
+    handlers: Awaited<ReturnType<typeof importHandlers>>,
+    isFixedLayout: boolean,
+    target: EventTarget | null,
+  ) => {
+    const { handleClick, handleMousedown, handleMouseup } = handlers;
+    const doubleClickDisabled = { current: false };
+    handleMousedown('book-1', mouseEvent());
+    handleMouseup('book-1', mouseEvent());
+    handleClick('book-1', doubleClickDisabled, isFixedLayout, mouseEvent({ target }));
+    vi.advanceTimersByTime(260);
+  };
+
+  test('reflowable: tap on an image posts iframe-open-media (image), not iframe-single-click', async () => {
+    const handlers = await importHandlers();
+    const img = document.createElement('img');
+    img.src = 'blob:http://localhost/abc';
+
+    tap(handlers, false, img);
+
+    const messages = postedMessages();
+    const types = messages.map((m) => m['type']);
+    expect(types).toContain('iframe-open-media');
+    expect(types).not.toContain('iframe-single-click');
+    const media = messages.find((m) => m['type'] === 'iframe-open-media')!;
+    expect(media['elementType']).toBe('image');
+    expect(media['src']).toBe(img.src);
+  });
+
+  test('reflowable: tap on a table posts iframe-open-media (table), not iframe-single-click', async () => {
+    const handlers = await importHandlers();
+    const table = document.createElement('table');
+    const cell = document.createElement('td');
+    table.appendChild(cell);
+
+    tap(handlers, false, cell); // tap lands inside the table
+
+    const messages = postedMessages();
+    const types = messages.map((m) => m['type']);
+    expect(types).toContain('iframe-open-media');
+    expect(types).not.toContain('iframe-single-click');
+    const media = messages.find((m) => m['type'] === 'iframe-open-media')!;
+    expect(media['elementType']).toBe('table');
+    expect(media['html']).toBe(table.outerHTML);
+  });
+
+  test('fixed-layout: tap on an image still posts iframe-single-click (tap turns page)', async () => {
+    const handlers = await importHandlers();
+    const img = document.createElement('img');
+    img.src = 'blob:http://localhost/abc';
+
+    tap(handlers, true, img);
+
+    const types = postedMessages().map((m) => m['type']);
+    expect(types).toContain('iframe-single-click');
+    expect(types).not.toContain('iframe-open-media');
+  });
+
+  test('reflowable: tap on a linked image follows the link (posts neither)', async () => {
+    const handlers = await importHandlers();
+    const anchor = document.createElement('a');
+    anchor.href = 'https://example.com';
+    const img = document.createElement('img');
+    img.src = 'blob:http://localhost/abc';
+    anchor.appendChild(img);
+
+    tap(handlers, false, img);
+
+    const types = postedMessages().map((m) => m['type']);
+    expect(types).not.toContain('iframe-open-media');
+    expect(types).not.toContain('iframe-single-click');
+  });
+});