feat(overlay): add primary subtitle bar visibility modes (#63)

- Cycle `v` through `hidden | visible | hover` instead of a boolean toggle
- Add `subtitleStyle.primaryDefaultMode` config with default `visible`
- Carry primary mode independently from secondary in hot-reload payload
- Add hover CSS: transparent until hovered, then fully visible
- Show primary-specific OSD text on each mode change
This commit is contained in:
2026-05-12 23:00:32 -07:00
committed by GitHub
parent 430373f010
commit e5c1135501
20 changed files with 221 additions and 13 deletions
+17 -1
View File
@@ -407,21 +407,37 @@ function createKeyboardHandlerHarness() {
};
}
test('primary subtitle visibility key hides and restores the subtitle bar without mpv sub-visibility', async () => {
test('primary subtitle visibility key cycles modes with primary OSD without mpv sub-visibility', async () => {
const { ctx, handlers, testGlobals } = createKeyboardHandlerHarness();
try {
await handlers.setupMpvInputForwarding();
testGlobals.dispatchKeydown({ key: 'v', code: 'KeyV' });
assert.equal(ctx.dom.subtitleContainer.classList.contains('primary-sub-hidden'), false);
assert.equal(ctx.dom.subtitleContainer.classList.contains('primary-sub-hover'), true);
assert.equal(ctx.state.primarySubtitleMode, 'hover');
testGlobals.dispatchKeydown({ key: 'v', code: 'KeyV' });
assert.equal(ctx.dom.subtitleContainer.classList.contains('primary-sub-hidden'), true);
assert.equal(ctx.state.primarySubtitleMode, 'hidden');
testGlobals.dispatchKeydown({ key: 'v', code: 'KeyV' });
assert.equal(ctx.dom.subtitleContainer.classList.contains('primary-sub-hidden'), false);
assert.equal(ctx.dom.subtitleContainer.classList.contains('primary-sub-hover'), false);
assert.equal(ctx.state.primarySubtitleMode, 'visible');
assert.equal(
testGlobals.mpvCommands.some((command) => command.includes('sub-visibility')),
false,
);
assert.deepEqual(
testGlobals.mpvCommands.filter((command) => command[0] === 'show-text'),
[
['show-text', 'Primary subtitle: hover', '1500'],
['show-text', 'Primary subtitle: hidden', '1500'],
['show-text', 'Primary subtitle: visible', '1500'],
],
);
} finally {
testGlobals.restore();
}
+12 -8
View File
@@ -1,4 +1,4 @@
import type { CompiledSessionBinding, ShortcutsConfig } from '../../types';
import type { CompiledSessionBinding, PrimarySubMode, ShortcutsConfig } from '../../types';
import type { RendererContext } from '../context';
import {
YOMITAN_POPUP_HIDDEN_EVENT,
@@ -370,13 +370,17 @@ export function createKeyboardHandlers(
}
function togglePrimarySubtitleBarVisibility(): void {
const visible = !ctx.state.primarySubtitleBarVisible;
ctx.state.primarySubtitleBarVisible = visible;
if (visible) {
ctx.dom.subtitleContainer.classList.remove('primary-sub-hidden');
} else {
ctx.dom.subtitleContainer.classList.add('primary-sub-hidden');
}
const modes: PrimarySubMode[] = ['hidden', 'visible', 'hover'];
const currentIndex = modes.indexOf(ctx.state.primarySubtitleMode);
const nextMode = modes[((currentIndex >= 0 ? currentIndex : 1) + 1) % modes.length]!;
ctx.state.primarySubtitleMode = nextMode;
ctx.dom.subtitleContainer.classList.remove(
'primary-sub-hidden',
'primary-sub-visible',
'primary-sub-hover',
);
ctx.dom.subtitleContainer.classList.add(`primary-sub-${nextMode}`);
window.electronAPI.sendMpvCommand(['show-text', `Primary subtitle: ${nextMode}`, '1500']);
}
async function handleMarkWatched(): Promise<void> {