mirror of
https://github.com/ksyasuda/SubMiner.git
synced 2026-04-10 16:19:24 -07:00
feat: add playlist browser overlay modal
- Add overlay modal for browsing sibling video files and live mpv queue - Add IPC commands for playlist operations (add, remove, move, play) - Add playlist-browser-runtime and playlist-browser-sort modules - Add keyboard handler and preload bindings for playlist browser - Add default Ctrl+Alt+P keybinding to open the modal - Add HTML structure, renderer wiring, and state for the modal - Add changelog fragment and docs updates
This commit is contained in:
430
src/renderer/modals/playlist-browser.test.ts
Normal file
430
src/renderer/modals/playlist-browser.test.ts
Normal file
@@ -0,0 +1,430 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
|
||||
import type { ElectronAPI, PlaylistBrowserSnapshot } from '../../types';
|
||||
import { createRendererState } from '../state.js';
|
||||
import { createPlaylistBrowserModal } from './playlist-browser.js';
|
||||
|
||||
function createClassList(initialTokens: string[] = []) {
|
||||
const tokens = new Set(initialTokens);
|
||||
return {
|
||||
add: (...entries: string[]) => {
|
||||
for (const entry of entries) tokens.add(entry);
|
||||
},
|
||||
remove: (...entries: string[]) => {
|
||||
for (const entry of entries) tokens.delete(entry);
|
||||
},
|
||||
contains: (entry: string) => tokens.has(entry),
|
||||
toggle: (entry: string, force?: boolean) => {
|
||||
if (force === true) tokens.add(entry);
|
||||
else if (force === false) tokens.delete(entry);
|
||||
else if (tokens.has(entry)) tokens.delete(entry);
|
||||
else tokens.add(entry);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function createFakeElement() {
|
||||
const attributes = new Map<string, string>();
|
||||
return {
|
||||
textContent: '',
|
||||
innerHTML: '',
|
||||
children: [] as unknown[],
|
||||
listeners: new Map<string, Array<(event?: unknown) => void>>(),
|
||||
classList: createClassList(['hidden']),
|
||||
appendChild(child: unknown) {
|
||||
this.children.push(child);
|
||||
return child;
|
||||
},
|
||||
append(...children: unknown[]) {
|
||||
this.children.push(...children);
|
||||
},
|
||||
replaceChildren(...children: unknown[]) {
|
||||
this.children = [...children];
|
||||
},
|
||||
addEventListener(type: string, listener: (event?: unknown) => void) {
|
||||
const bucket = this.listeners.get(type) ?? [];
|
||||
bucket.push(listener);
|
||||
this.listeners.set(type, bucket);
|
||||
},
|
||||
setAttribute(name: string, value: string) {
|
||||
attributes.set(name, value);
|
||||
},
|
||||
getAttribute(name: string) {
|
||||
return attributes.get(name) ?? null;
|
||||
},
|
||||
focus() {},
|
||||
};
|
||||
}
|
||||
|
||||
function createPlaylistRow() {
|
||||
return {
|
||||
className: '',
|
||||
classList: createClassList(),
|
||||
dataset: {} as Record<string, string>,
|
||||
textContent: '',
|
||||
children: [] as unknown[],
|
||||
listeners: new Map<string, Array<(event?: unknown) => void>>(),
|
||||
append(...children: unknown[]) {
|
||||
this.children.push(...children);
|
||||
},
|
||||
appendChild(child: unknown) {
|
||||
this.children.push(child);
|
||||
return child;
|
||||
},
|
||||
addEventListener(type: string, listener: (event?: unknown) => void) {
|
||||
const bucket = this.listeners.get(type) ?? [];
|
||||
bucket.push(listener);
|
||||
this.listeners.set(type, bucket);
|
||||
},
|
||||
setAttribute() {},
|
||||
};
|
||||
}
|
||||
|
||||
function createListStub() {
|
||||
return {
|
||||
innerHTML: '',
|
||||
children: [] as ReturnType<typeof createPlaylistRow>[],
|
||||
appendChild(child: ReturnType<typeof createPlaylistRow>) {
|
||||
this.children.push(child);
|
||||
return child;
|
||||
},
|
||||
replaceChildren(...children: ReturnType<typeof createPlaylistRow>[]) {
|
||||
this.children = [...children];
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function createSnapshot(): PlaylistBrowserSnapshot {
|
||||
return {
|
||||
directoryPath: '/tmp/show',
|
||||
directoryAvailable: true,
|
||||
directoryStatus: '/tmp/show',
|
||||
currentFilePath: '/tmp/show/Show - S01E02.mkv',
|
||||
playingIndex: 1,
|
||||
directoryItems: [
|
||||
{
|
||||
path: '/tmp/show/Show - S01E01.mkv',
|
||||
basename: 'Show - S01E01.mkv',
|
||||
episodeLabel: 'S1E1',
|
||||
isCurrentFile: false,
|
||||
},
|
||||
{
|
||||
path: '/tmp/show/Show - S01E02.mkv',
|
||||
basename: 'Show - S01E02.mkv',
|
||||
episodeLabel: 'S1E2',
|
||||
isCurrentFile: true,
|
||||
},
|
||||
],
|
||||
playlistItems: [
|
||||
{
|
||||
index: 0,
|
||||
id: 1,
|
||||
filename: '/tmp/show/Show - S01E01.mkv',
|
||||
title: 'Episode 1',
|
||||
displayLabel: 'Episode 1',
|
||||
current: false,
|
||||
playing: false,
|
||||
path: '/tmp/show/Show - S01E01.mkv',
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
id: 2,
|
||||
filename: '/tmp/show/Show - S01E02.mkv',
|
||||
title: 'Episode 2',
|
||||
displayLabel: 'Episode 2',
|
||||
current: true,
|
||||
playing: true,
|
||||
path: '/tmp/show/Show - S01E02.mkv',
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
test('playlist browser modal opens with playlist-focused current item selection', async () => {
|
||||
const globals = globalThis as typeof globalThis & { window?: unknown; document?: unknown };
|
||||
const previousWindow = globals.window;
|
||||
const previousDocument = globals.document;
|
||||
const notifications: string[] = [];
|
||||
|
||||
Object.defineProperty(globalThis, 'window', {
|
||||
configurable: true,
|
||||
value: {
|
||||
electronAPI: {
|
||||
getPlaylistBrowserSnapshot: async () => createSnapshot(),
|
||||
notifyOverlayModalOpened: (modal: string) => notifications.push(`open:${modal}`),
|
||||
notifyOverlayModalClosed: (modal: string) => notifications.push(`close:${modal}`),
|
||||
focusMainWindow: async () => {},
|
||||
setIgnoreMouseEvents: () => {},
|
||||
appendPlaylistBrowserFile: async () => ({ ok: true, message: 'ok', snapshot: createSnapshot() }),
|
||||
playPlaylistBrowserIndex: async () => ({ ok: true, message: 'ok', snapshot: createSnapshot() }),
|
||||
removePlaylistBrowserIndex: async () => ({ ok: true, message: 'ok', snapshot: createSnapshot() }),
|
||||
movePlaylistBrowserIndex: async () => ({ ok: true, message: 'ok', snapshot: createSnapshot() }),
|
||||
} as unknown as ElectronAPI,
|
||||
focus: () => {},
|
||||
},
|
||||
});
|
||||
Object.defineProperty(globalThis, 'document', {
|
||||
configurable: true,
|
||||
value: {
|
||||
createElement: () => createPlaylistRow(),
|
||||
},
|
||||
});
|
||||
|
||||
try {
|
||||
const state = createRendererState();
|
||||
const directoryList = createListStub();
|
||||
const playlistList = createListStub();
|
||||
const ctx = {
|
||||
state,
|
||||
platform: {
|
||||
shouldToggleMouseIgnore: false,
|
||||
},
|
||||
dom: {
|
||||
overlay: {
|
||||
classList: createClassList(),
|
||||
focus: () => {},
|
||||
},
|
||||
playlistBrowserModal: createFakeElement(),
|
||||
playlistBrowserTitle: createFakeElement(),
|
||||
playlistBrowserStatus: createFakeElement(),
|
||||
playlistBrowserDirectoryList: directoryList,
|
||||
playlistBrowserPlaylistList: playlistList,
|
||||
playlistBrowserClose: createFakeElement(),
|
||||
},
|
||||
};
|
||||
|
||||
const modal = createPlaylistBrowserModal(ctx as never, {
|
||||
modalStateReader: { isAnyModalOpen: () => false },
|
||||
syncSettingsModalSubtitleSuppression: () => {},
|
||||
});
|
||||
|
||||
await modal.openPlaylistBrowserModal();
|
||||
|
||||
assert.equal(state.playlistBrowserModalOpen, true);
|
||||
assert.equal(state.playlistBrowserActivePane, 'playlist');
|
||||
assert.equal(state.playlistBrowserSelectedPlaylistIndex, 1);
|
||||
assert.equal(state.playlistBrowserSelectedDirectoryIndex, 1);
|
||||
assert.equal(directoryList.children.length, 2);
|
||||
assert.equal(playlistList.children.length, 2);
|
||||
assert.equal(directoryList.children[0]?.children.length, 2);
|
||||
assert.equal(playlistList.children[0]?.children.length, 2);
|
||||
assert.deepEqual(notifications, ['open:playlist-browser']);
|
||||
} finally {
|
||||
Object.defineProperty(globalThis, 'window', { configurable: true, value: previousWindow });
|
||||
Object.defineProperty(globalThis, 'document', { configurable: true, value: previousDocument });
|
||||
}
|
||||
});
|
||||
|
||||
test('playlist browser modal keydown routes append, remove, reorder, tab switch, and play', async () => {
|
||||
const globals = globalThis as typeof globalThis & { window?: unknown; document?: unknown };
|
||||
const previousWindow = globals.window;
|
||||
const previousDocument = globals.document;
|
||||
const calls: Array<[string, unknown[]]> = [];
|
||||
const notifications: string[] = [];
|
||||
|
||||
Object.defineProperty(globalThis, 'window', {
|
||||
configurable: true,
|
||||
value: {
|
||||
electronAPI: {
|
||||
getPlaylistBrowserSnapshot: async () => createSnapshot(),
|
||||
notifyOverlayModalOpened: (modal: string) => notifications.push(`open:${modal}`),
|
||||
notifyOverlayModalClosed: (modal: string) => notifications.push(`close:${modal}`),
|
||||
focusMainWindow: async () => {},
|
||||
setIgnoreMouseEvents: () => {},
|
||||
appendPlaylistBrowserFile: async (filePath: string) => {
|
||||
calls.push(['append', [filePath]]);
|
||||
return { ok: true, message: 'append-ok', snapshot: createSnapshot() };
|
||||
},
|
||||
playPlaylistBrowserIndex: async (index: number) => {
|
||||
calls.push(['play', [index]]);
|
||||
return { ok: true, message: 'play-ok', snapshot: createSnapshot() };
|
||||
},
|
||||
removePlaylistBrowserIndex: async (index: number) => {
|
||||
calls.push(['remove', [index]]);
|
||||
return { ok: true, message: 'remove-ok', snapshot: createSnapshot() };
|
||||
},
|
||||
movePlaylistBrowserIndex: async (index: number, direction: -1 | 1) => {
|
||||
calls.push(['move', [index, direction]]);
|
||||
return { ok: true, message: 'move-ok', snapshot: createSnapshot() };
|
||||
},
|
||||
} as unknown as ElectronAPI,
|
||||
focus: () => {},
|
||||
},
|
||||
});
|
||||
Object.defineProperty(globalThis, 'document', {
|
||||
configurable: true,
|
||||
value: {
|
||||
createElement: () => createPlaylistRow(),
|
||||
},
|
||||
});
|
||||
|
||||
try {
|
||||
const state = createRendererState();
|
||||
const ctx = {
|
||||
state,
|
||||
platform: {
|
||||
shouldToggleMouseIgnore: false,
|
||||
},
|
||||
dom: {
|
||||
overlay: {
|
||||
classList: createClassList(),
|
||||
focus: () => {},
|
||||
},
|
||||
playlistBrowserModal: createFakeElement(),
|
||||
playlistBrowserTitle: createFakeElement(),
|
||||
playlistBrowserStatus: createFakeElement(),
|
||||
playlistBrowserDirectoryList: createListStub(),
|
||||
playlistBrowserPlaylistList: createListStub(),
|
||||
playlistBrowserClose: createFakeElement(),
|
||||
},
|
||||
};
|
||||
|
||||
const modal = createPlaylistBrowserModal(ctx as never, {
|
||||
modalStateReader: { isAnyModalOpen: () => false },
|
||||
syncSettingsModalSubtitleSuppression: () => {},
|
||||
});
|
||||
|
||||
await modal.openPlaylistBrowserModal();
|
||||
|
||||
const preventDefault = () => {};
|
||||
state.playlistBrowserActivePane = 'directory';
|
||||
state.playlistBrowserSelectedDirectoryIndex = 0;
|
||||
await modal.handlePlaylistBrowserKeydown({
|
||||
key: 'Enter',
|
||||
code: 'Enter',
|
||||
preventDefault,
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
shiftKey: false,
|
||||
} as never);
|
||||
|
||||
await modal.handlePlaylistBrowserKeydown({
|
||||
key: 'Tab',
|
||||
code: 'Tab',
|
||||
preventDefault,
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
shiftKey: false,
|
||||
} as never);
|
||||
assert.equal(state.playlistBrowserActivePane, 'playlist');
|
||||
|
||||
await modal.handlePlaylistBrowserKeydown({
|
||||
key: 'ArrowDown',
|
||||
code: 'ArrowDown',
|
||||
preventDefault,
|
||||
ctrlKey: true,
|
||||
metaKey: false,
|
||||
shiftKey: false,
|
||||
} as never);
|
||||
|
||||
await modal.handlePlaylistBrowserKeydown({
|
||||
key: 'Delete',
|
||||
code: 'Delete',
|
||||
preventDefault,
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
shiftKey: false,
|
||||
} as never);
|
||||
|
||||
await modal.handlePlaylistBrowserKeydown({
|
||||
key: 'Enter',
|
||||
code: 'Enter',
|
||||
preventDefault,
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
shiftKey: false,
|
||||
} as never);
|
||||
|
||||
assert.deepEqual(calls, [
|
||||
['append', ['/tmp/show/Show - S01E01.mkv']],
|
||||
['move', [1, 1]],
|
||||
['remove', [1]],
|
||||
['play', [1]],
|
||||
]);
|
||||
assert.equal(state.playlistBrowserModalOpen, false);
|
||||
assert.deepEqual(notifications, ['open:playlist-browser', 'close:playlist-browser']);
|
||||
} finally {
|
||||
Object.defineProperty(globalThis, 'window', { configurable: true, value: previousWindow });
|
||||
Object.defineProperty(globalThis, 'document', { configurable: true, value: previousDocument });
|
||||
}
|
||||
});
|
||||
|
||||
test('playlist browser keeps modal open when playing selected queue item fails', async () => {
|
||||
const globals = globalThis as typeof globalThis & { window?: unknown; document?: unknown };
|
||||
const previousWindow = globals.window;
|
||||
const previousDocument = globals.document;
|
||||
const notifications: string[] = [];
|
||||
|
||||
Object.defineProperty(globalThis, 'window', {
|
||||
configurable: true,
|
||||
value: {
|
||||
electronAPI: {
|
||||
getPlaylistBrowserSnapshot: async () => createSnapshot(),
|
||||
notifyOverlayModalOpened: (modal: string) => notifications.push(`open:${modal}`),
|
||||
notifyOverlayModalClosed: (modal: string) => notifications.push(`close:${modal}`),
|
||||
focusMainWindow: async () => {},
|
||||
setIgnoreMouseEvents: () => {},
|
||||
appendPlaylistBrowserFile: async () => ({ ok: true, message: 'ok', snapshot: createSnapshot() }),
|
||||
playPlaylistBrowserIndex: async () => ({ ok: false, message: 'play failed' }),
|
||||
removePlaylistBrowserIndex: async () => ({ ok: true, message: 'ok', snapshot: createSnapshot() }),
|
||||
movePlaylistBrowserIndex: async () => ({ ok: true, message: 'ok', snapshot: createSnapshot() }),
|
||||
} as unknown as ElectronAPI,
|
||||
focus: () => {},
|
||||
},
|
||||
});
|
||||
Object.defineProperty(globalThis, 'document', {
|
||||
configurable: true,
|
||||
value: {
|
||||
createElement: () => createPlaylistRow(),
|
||||
},
|
||||
});
|
||||
|
||||
try {
|
||||
const state = createRendererState();
|
||||
const playlistBrowserStatus = createFakeElement();
|
||||
const ctx = {
|
||||
state,
|
||||
platform: {
|
||||
shouldToggleMouseIgnore: false,
|
||||
},
|
||||
dom: {
|
||||
overlay: {
|
||||
classList: createClassList(),
|
||||
focus: () => {},
|
||||
},
|
||||
playlistBrowserModal: createFakeElement(),
|
||||
playlistBrowserTitle: createFakeElement(),
|
||||
playlistBrowserStatus,
|
||||
playlistBrowserDirectoryList: createListStub(),
|
||||
playlistBrowserPlaylistList: createListStub(),
|
||||
playlistBrowserClose: createFakeElement(),
|
||||
},
|
||||
};
|
||||
|
||||
const modal = createPlaylistBrowserModal(ctx as never, {
|
||||
modalStateReader: { isAnyModalOpen: () => false },
|
||||
syncSettingsModalSubtitleSuppression: () => {},
|
||||
});
|
||||
|
||||
await modal.openPlaylistBrowserModal();
|
||||
assert.equal(state.playlistBrowserModalOpen, true);
|
||||
|
||||
await modal.handlePlaylistBrowserKeydown({
|
||||
key: 'Enter',
|
||||
code: 'Enter',
|
||||
preventDefault: () => {},
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
shiftKey: false,
|
||||
} as never);
|
||||
|
||||
assert.equal(state.playlistBrowserModalOpen, true);
|
||||
assert.equal(playlistBrowserStatus.textContent, 'play failed');
|
||||
assert.equal(playlistBrowserStatus.classList.contains('error'), true);
|
||||
assert.deepEqual(notifications, ['open:playlist-browser']);
|
||||
} finally {
|
||||
Object.defineProperty(globalThis, 'window', { configurable: true, value: previousWindow });
|
||||
Object.defineProperty(globalThis, 'document', { configurable: true, value: previousDocument });
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user