feat(renderer): add optional yomitan popup auto-pause

2026-03-20 12:11:28 -07:00 · 2026-03-04 11:19:46 -08:00
parent 9a30419a23
commit 69ab87c25f
18 changed files with 474 additions and 9 deletions
--- a/src/renderer/handlers/mouse.test.ts
+++ b/src/renderer/handlers/mouse.test.ts
@@ -2,6 +2,10 @@ import assert from 'node:assert/strict';
 import test from 'node:test';

 import { createMouseHandlers } from './mouse.js';
+import {
+  YOMITAN_POPUP_HIDDEN_EVENT,
+  YOMITAN_POPUP_SHOWN_EVENT,
+} from '../yomitan-popup.js';

 function createClassList() {
  const classes = new Set<string>();
@@ -28,6 +32,12 @@ function createDeferred<T>() {
  return { promise, resolve };
 }

+function waitForNextTick(): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, 0);
+  });
+}
+
 function createMouseTestContext() {
  const overlayClassList = createClassList();
  const subtitleRootClassList = createClassList();
@@ -78,6 +88,7 @@ test('auto-pause on subtitle hover pauses on enter and resumes on leave when ena
    getCurrentYPercent: () => 10,
    persistSubtitlePositionPatch: () => {},
    getSubtitleHoverAutoPauseEnabled: () => true,
+    getYomitanPopupAutoPauseEnabled: () => false,
    getPlaybackPaused: async () => false,
    sendMpvCommand: (command) => {
      mpvCommands.push(command);
@@ -106,6 +117,7 @@ test('auto-pause on subtitle hover skips when playback is already paused', async
    getCurrentYPercent: () => 10,
    persistSubtitlePositionPatch: () => {},
    getSubtitleHoverAutoPauseEnabled: () => true,
+    getYomitanPopupAutoPauseEnabled: () => false,
    getPlaybackPaused: async () => true,
    sendMpvCommand: (command) => {
      mpvCommands.push(command);
@@ -131,6 +143,7 @@ test('auto-pause on subtitle hover is skipped when disabled in config', async ()
    getCurrentYPercent: () => 10,
    persistSubtitlePositionPatch: () => {},
    getSubtitleHoverAutoPauseEnabled: () => false,
+    getYomitanPopupAutoPauseEnabled: () => false,
    getPlaybackPaused: async () => false,
    sendMpvCommand: (command) => {
      mpvCommands.push(command);
@@ -157,6 +170,7 @@ test('pending hover pause check is ignored when mouse leaves before pause state
    getCurrentYPercent: () => 10,
    persistSubtitlePositionPatch: () => {},
    getSubtitleHoverAutoPauseEnabled: () => true,
+    getYomitanPopupAutoPauseEnabled: () => false,
    getPlaybackPaused: async () => deferred.promise,
    sendMpvCommand: (command) => {
      mpvCommands.push(command);
@@ -170,3 +184,273 @@ test('pending hover pause check is ignored when mouse leaves before pause state

  assert.deepEqual(mpvCommands, []);
 });
+
+test('hover pause resumes immediately on subtitle leave even when yomitan popup is visible', async () => {
+  const ctx = createMouseTestContext();
+  const mpvCommands: Array<(string | number)[]> = [];
+  const previousWindow = (globalThis as { window?: unknown }).window;
+  const previousDocument = (globalThis as { document?: unknown }).document;
+  const previousMutationObserver = (globalThis as { MutationObserver?: unknown }).MutationObserver;
+  const previousNode = (globalThis as { Node?: unknown }).Node;
+  const windowListeners = new Map<string, Array<() => void>>();
+
+  Object.defineProperty(globalThis, 'window', {
+    configurable: true,
+    value: {
+      addEventListener: (type: string, listener: () => void) => {
+        const bucket = windowListeners.get(type) ?? [];
+        bucket.push(listener);
+        windowListeners.set(type, bucket);
+      },
+      electronAPI: {
+        setIgnoreMouseEvents: () => {},
+      },
+      focus: () => {},
+      innerHeight: 1000,
+      getSelection: () => null,
+      setTimeout,
+      clearTimeout,
+    },
+  });
+  Object.defineProperty(globalThis, 'document', {
+    configurable: true,
+    value: {
+      querySelector: () => null,
+      querySelectorAll: () => [],
+      body: {},
+      elementFromPoint: () => null,
+      addEventListener: () => {},
+    },
+  });
+  Object.defineProperty(globalThis, 'MutationObserver', {
+    configurable: true,
+    value: class {
+      observe() {}
+    },
+  });
+  Object.defineProperty(globalThis, 'Node', {
+    configurable: true,
+    value: {
+      ELEMENT_NODE: 1,
+    },
+  });
+
+  try {
+    const handlers = createMouseHandlers(ctx as never, {
+      modalStateReader: {
+        isAnySettingsModalOpen: () => false,
+        isAnyModalOpen: () => false,
+      },
+      applyYPercent: () => {},
+      getCurrentYPercent: () => 10,
+      persistSubtitlePositionPatch: () => {},
+      getSubtitleHoverAutoPauseEnabled: () => true,
+      getYomitanPopupAutoPauseEnabled: () => false,
+      getPlaybackPaused: async () => false,
+      sendMpvCommand: (command) => {
+        mpvCommands.push(command);
+      },
+    });
+
+    handlers.setupYomitanObserver();
+    for (const listener of windowListeners.get(YOMITAN_POPUP_SHOWN_EVENT) ?? []) {
+      listener();
+    }
+    await handlers.handleMouseEnter();
+    await handlers.handleMouseLeave();
+
+    assert.deepEqual(mpvCommands, [
+      ['set_property', 'pause', 'yes'],
+      ['set_property', 'pause', 'no'],
+    ]);
+  } finally {
+    Object.defineProperty(globalThis, 'window', { configurable: true, value: previousWindow });
+    Object.defineProperty(globalThis, 'document', { configurable: true, value: previousDocument });
+    Object.defineProperty(globalThis, 'MutationObserver', {
+      configurable: true,
+      value: previousMutationObserver,
+    });
+    Object.defineProperty(globalThis, 'Node', { configurable: true, value: previousNode });
+  }
+});
+
+test('auto-pause still works when yomitan popup is already visible', async () => {
+  const ctx = createMouseTestContext();
+  const mpvCommands: Array<(string | number)[]> = [];
+  const previousWindow = (globalThis as { window?: unknown }).window;
+  const previousDocument = (globalThis as { document?: unknown }).document;
+  const previousMutationObserver = (globalThis as { MutationObserver?: unknown }).MutationObserver;
+  const previousNode = (globalThis as { Node?: unknown }).Node;
+  const windowListeners = new Map<string, Array<() => void>>();
+
+  Object.defineProperty(globalThis, 'window', {
+    configurable: true,
+    value: {
+      addEventListener: (type: string, listener: () => void) => {
+        const bucket = windowListeners.get(type) ?? [];
+        bucket.push(listener);
+        windowListeners.set(type, bucket);
+      },
+      electronAPI: {
+        setIgnoreMouseEvents: () => {},
+      },
+      focus: () => {},
+      innerHeight: 1000,
+      getSelection: () => null,
+      setTimeout,
+      clearTimeout,
+    },
+  });
+  Object.defineProperty(globalThis, 'document', {
+    configurable: true,
+    value: {
+      querySelector: () => null,
+      querySelectorAll: () => [],
+      body: {},
+      elementFromPoint: () => null,
+      addEventListener: () => {},
+    },
+  });
+  Object.defineProperty(globalThis, 'MutationObserver', {
+    configurable: true,
+    value: class {
+      observe() {}
+    },
+  });
+  Object.defineProperty(globalThis, 'Node', {
+    configurable: true,
+    value: {
+      ELEMENT_NODE: 1,
+    },
+  });
+
+  try {
+    const handlers = createMouseHandlers(ctx as never, {
+      modalStateReader: {
+        isAnySettingsModalOpen: () => false,
+        isAnyModalOpen: () => false,
+      },
+      applyYPercent: () => {},
+      getCurrentYPercent: () => 10,
+      persistSubtitlePositionPatch: () => {},
+      getSubtitleHoverAutoPauseEnabled: () => true,
+      getYomitanPopupAutoPauseEnabled: () => false,
+      getPlaybackPaused: async () => false,
+      sendMpvCommand: (command) => {
+        mpvCommands.push(command);
+      },
+    });
+
+    handlers.setupYomitanObserver();
+    for (const listener of windowListeners.get(YOMITAN_POPUP_SHOWN_EVENT) ?? []) {
+      listener();
+    }
+    await handlers.handleMouseEnter();
+    await handlers.handleMouseLeave();
+
+    assert.deepEqual(mpvCommands, [
+      ['set_property', 'pause', 'yes'],
+      ['set_property', 'pause', 'no'],
+    ]);
+  } finally {
+    Object.defineProperty(globalThis, 'window', { configurable: true, value: previousWindow });
+    Object.defineProperty(globalThis, 'document', { configurable: true, value: previousDocument });
+    Object.defineProperty(globalThis, 'MutationObserver', {
+      configurable: true,
+      value: previousMutationObserver,
+    });
+    Object.defineProperty(globalThis, 'Node', { configurable: true, value: previousNode });
+  }
+});
+
+test('popup open pauses and popup close resumes when yomitan popup auto-pause is enabled', async () => {
+  const ctx = createMouseTestContext();
+  const mpvCommands: Array<(string | number)[]> = [];
+  const previousWindow = (globalThis as { window?: unknown }).window;
+  const previousDocument = (globalThis as { document?: unknown }).document;
+  const previousMutationObserver = (globalThis as { MutationObserver?: unknown }).MutationObserver;
+  const previousNode = (globalThis as { Node?: unknown }).Node;
+  const windowListeners = new Map<string, Array<() => void>>();
+
+  Object.defineProperty(globalThis, 'window', {
+    configurable: true,
+    value: {
+      addEventListener: (type: string, listener: () => void) => {
+        const bucket = windowListeners.get(type) ?? [];
+        bucket.push(listener);
+        windowListeners.set(type, bucket);
+      },
+      electronAPI: {
+        setIgnoreMouseEvents: () => {},
+      },
+      focus: () => {},
+      innerHeight: 1000,
+      getSelection: () => null,
+      setTimeout,
+      clearTimeout,
+    },
+  });
+  Object.defineProperty(globalThis, 'document', {
+    configurable: true,
+    value: {
+      querySelector: () => null,
+      querySelectorAll: () => [],
+      body: {},
+      elementFromPoint: () => null,
+      addEventListener: () => {},
+    },
+  });
+  Object.defineProperty(globalThis, 'MutationObserver', {
+    configurable: true,
+    value: class {
+      observe() {}
+    },
+  });
+  Object.defineProperty(globalThis, 'Node', {
+    configurable: true,
+    value: {
+      ELEMENT_NODE: 1,
+    },
+  });
+
+  try {
+    const handlers = createMouseHandlers(ctx as never, {
+      modalStateReader: {
+        isAnySettingsModalOpen: () => false,
+        isAnyModalOpen: () => false,
+      },
+      applyYPercent: () => {},
+      getCurrentYPercent: () => 10,
+      persistSubtitlePositionPatch: () => {},
+      getSubtitleHoverAutoPauseEnabled: () => true,
+      getYomitanPopupAutoPauseEnabled: () => true,
+      getPlaybackPaused: async () => false,
+      sendMpvCommand: (command: (string | number)[]) => {
+        mpvCommands.push(command);
+      },
+    });
+
+    handlers.setupYomitanObserver();
+
+    for (const listener of windowListeners.get(YOMITAN_POPUP_SHOWN_EVENT) ?? []) {
+      listener();
+    }
+    await waitForNextTick();
+    for (const listener of windowListeners.get(YOMITAN_POPUP_HIDDEN_EVENT) ?? []) {
+      listener();
+    }
+
+    assert.deepEqual(mpvCommands, [
+      ['set_property', 'pause', 'yes'],
+      ['set_property', 'pause', 'no'],
+    ]);
+  } finally {
+    Object.defineProperty(globalThis, 'window', { configurable: true, value: previousWindow });
+    Object.defineProperty(globalThis, 'document', { configurable: true, value: previousDocument });
+    Object.defineProperty(globalThis, 'MutationObserver', {
+      configurable: true,
+      value: previousMutationObserver,
+    });
+    Object.defineProperty(globalThis, 'Node', { configurable: true, value: previousNode });
+  }
+});
--- a/src/renderer/handlers/mouse.ts
+++ b/src/renderer/handlers/mouse.ts
@@ -14,13 +14,68 @@ export function createMouseHandlers(
    getCurrentYPercent: () => number;
    persistSubtitlePositionPatch: (patch: { yPercent: number }) => void;
    getSubtitleHoverAutoPauseEnabled: () => boolean;
+    getYomitanPopupAutoPauseEnabled: () => boolean;
    getPlaybackPaused: () => Promise<boolean | null>;
    sendMpvCommand: (command: (string | number)[]) => void;
  },
 ) {
  let yomitanPopupVisible = false;
  let hoverPauseRequestId = 0;
+  let popupPauseRequestId = 0;
  let pausedBySubtitleHover = false;
+  let pausedByYomitanPopup = false;
+
+  function maybeResumeHoverPause(): void {
+    if (!pausedBySubtitleHover) return;
+    if (pausedByYomitanPopup) return;
+    if (ctx.state.isOverSubtitle) return;
+    pausedBySubtitleHover = false;
+    options.sendMpvCommand(['set_property', 'pause', 'no']);
+  }
+
+  function maybeResumeYomitanPopupPause(): void {
+    if (!pausedByYomitanPopup) return;
+    pausedByYomitanPopup = false;
+    if (ctx.state.isOverSubtitle && options.getSubtitleHoverAutoPauseEnabled()) {
+      pausedBySubtitleHover = true;
+      return;
+    }
+    options.sendMpvCommand(['set_property', 'pause', 'no']);
+  }
+
+  async function maybePauseForYomitanPopup(): Promise<void> {
+    if (!yomitanPopupVisible || !options.getYomitanPopupAutoPauseEnabled()) {
+      return;
+    }
+
+    const requestId = ++popupPauseRequestId;
+    if (pausedByYomitanPopup) return;
+
+    if (pausedBySubtitleHover) {
+      pausedBySubtitleHover = false;
+      pausedByYomitanPopup = true;
+      return;
+    }
+
+    let paused: boolean | null = null;
+    try {
+      paused = await options.getPlaybackPaused();
+    } catch {
+      return;
+    }
+
+    if (
+      requestId !== popupPauseRequestId ||
+      !yomitanPopupVisible ||
+      !options.getYomitanPopupAutoPauseEnabled()
+    ) {
+      return;
+    }
+    if (paused !== false) return;
+
+    options.sendMpvCommand(['set_property', 'pause', 'yes']);
+    pausedByYomitanPopup = true;
+  }

  function enablePopupInteraction(): void {
    yomitanPopupVisible = true;
@@ -40,6 +95,9 @@ export function createMouseHandlers(
    }

    yomitanPopupVisible = false;
+    popupPauseRequestId += 1;
+    maybeResumeYomitanPopupPause();
+    maybeResumeHoverPause();
    if (!ctx.state.isOverSubtitle && !options.modalStateReader.isAnyModalOpen()) {
      ctx.dom.overlay.classList.remove('interactive');
      if (ctx.platform.shouldToggleMouseIgnore) {
@@ -55,6 +113,10 @@ export function createMouseHandlers(
      window.electronAPI.setIgnoreMouseEvents(false);
    }

+    if (yomitanPopupVisible && options.getYomitanPopupAutoPauseEnabled()) {
+      return;
+    }
+
    if (!options.getSubtitleHoverAutoPauseEnabled()) {
      return;
    }
@@ -79,10 +141,7 @@ export function createMouseHandlers(
  async function handleMouseLeave(): Promise<void> {
    ctx.state.isOverSubtitle = false;
    hoverPauseRequestId += 1;
-    if (pausedBySubtitleHover) {
-      pausedBySubtitleHover = false;
-      options.sendMpvCommand(['set_property', 'pause', 'no']);
-    }
+    maybeResumeHoverPause();
    if (yomitanPopupVisible) return;
    disablePopupInteractionIfIdle();
  }
@@ -144,9 +203,11 @@ export function createMouseHandlers(

  function setupYomitanObserver(): void {
    yomitanPopupVisible = hasYomitanPopupIframe(document);
+    void maybePauseForYomitanPopup();

    window.addEventListener(YOMITAN_POPUP_SHOWN_EVENT, () => {
      enablePopupInteraction();
+      void maybePauseForYomitanPopup();
    });

    window.addEventListener(YOMITAN_POPUP_HIDDEN_EVENT, () => {
@@ -160,6 +221,7 @@ export function createMouseHandlers(
          const element = node as Element;
          if (isYomitanPopupIframe(element)) {
            enablePopupInteraction();
+            void maybePauseForYomitanPopup();
          }
        });