7ef1ce1a6f
Aus dem 2. Screenshot-Pass (scripts/ui-screenshot2.js — Modals, Hover, responsive): - Command Palette war teilweise hardcoded Deutsch: Input-Placeholder 'Suche Befehl...' + Hint-Zeile 'Up/Down zum Navigieren, Enter zum Ausfuehren, Esc zum Schliessen'. Im EN-Mode zeigte das trotzdem Deutsch. Jetzt ueber Locale-Keys (commandPaletteSearchPlaceholder + commandPaletteHint) verdrahtet — zeigt 'Search command...' / 'Up/Down to navigate, Enter to run, Esc to close' im EN-Mode. - Command-Hint von 'Tab' auf 'Open' geaendert — 'Tab' las sich wie eine Tastatur-Taste statt 'oeffnet diesen Tab'. Verifiziert: Trim-Modal, Merge/Clips/Archive/Stats Tabs, alle 5 Themes, Light-Theme Inputs — alles sauber. minWidth:1200 -> sub-1200px responsive ist kein realer Fall. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
91 lines
3.3 KiB
JavaScript
91 lines
3.3 KiB
JavaScript
// UI-Screenshot Teil 2 — Modals, Hover-States, schmales Fenster, Queue mit
|
|
// aktivem Download. Ergaenzt ui-screenshot.js fuer die selteneren UI-Pfade.
|
|
const { _electron: electron } = require('playwright');
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
const OUT_DIR = path.join(process.cwd(), 'tmp_ui_shots');
|
|
|
|
async function run() {
|
|
fs.mkdirSync(OUT_DIR, { recursive: true });
|
|
const electronPath = require('electron');
|
|
const app = await electron.launch({ executablePath: electronPath, args: ['.'], cwd: process.cwd() });
|
|
const win = await app.firstWindow();
|
|
await win.setViewportSize({ width: 1280, height: 900 });
|
|
await win.waitForTimeout(2500);
|
|
|
|
const shot = async (name) => {
|
|
try { await win.screenshot({ path: path.join(OUT_DIR, `${name}.png`), animations: 'disabled', timeout: 8000 }); process.stdout.write(`shot: ${name}\n`); }
|
|
catch (e) { process.stdout.write(`shot FAILED: ${name} — ${String(e).split('\n')[0]}\n`); }
|
|
};
|
|
|
|
// VODs mit xqc laden fuer Modal-Kontext
|
|
await win.evaluate(() => window.showTab('vods'));
|
|
await win.evaluate(async () => { await window.selectStreamer('xqc'); });
|
|
await win.waitForTimeout(4000);
|
|
|
|
// 1. Clip/Trim-Dialog Modal (Trim VOD auf erster Card)
|
|
const trimBtn = win.locator('.vod-card .vod-btn.secondary').first();
|
|
if (await trimBtn.count()) {
|
|
await trimBtn.click().catch(() => {});
|
|
await win.waitForTimeout(800);
|
|
await shot('07-modal-trim');
|
|
await win.keyboard.press('Escape');
|
|
await win.waitForTimeout(400);
|
|
}
|
|
|
|
// 2. Command Palette (Ctrl+K)
|
|
await win.keyboard.press('Control+K');
|
|
await win.waitForTimeout(500);
|
|
await shot('08-command-palette');
|
|
// Tippe etwas zum Filtern
|
|
await win.keyboard.type('set');
|
|
await win.waitForTimeout(300);
|
|
await shot('08-command-palette-filtered');
|
|
await win.keyboard.press('Escape');
|
|
await win.waitForTimeout(300);
|
|
|
|
// 3. Template Guide Modal (Settings -> Template-Guide oeffnen falls Button da)
|
|
await win.evaluate(() => window.showTab('settings'));
|
|
await win.waitForTimeout(500);
|
|
const tgOpened = await win.evaluate(() => {
|
|
if (typeof window.openTemplateGuide === 'function') { window.openTemplateGuide(); return true; }
|
|
return false;
|
|
});
|
|
if (tgOpened) {
|
|
await win.waitForTimeout(700);
|
|
await shot('09-template-guide');
|
|
await win.keyboard.press('Escape');
|
|
await win.waitForTimeout(400);
|
|
}
|
|
|
|
// 4. VOD-Card Hover (Storyboard-Preview)
|
|
await win.evaluate(() => window.showTab('vods'));
|
|
await win.waitForTimeout(800);
|
|
const firstCard = win.locator('.vod-card').first();
|
|
if (await firstCard.count()) {
|
|
await firstCard.hover();
|
|
await win.waitForTimeout(1200); // debounce + storyboard fetch
|
|
await shot('10-vod-hover');
|
|
}
|
|
|
|
// 5. Schmales Fenster (responsive) — 760px
|
|
await win.setViewportSize({ width: 760, height: 900 });
|
|
await win.waitForTimeout(800);
|
|
await shot('11-narrow-vods');
|
|
await win.evaluate(() => window.showTab('settings'));
|
|
await win.waitForTimeout(500);
|
|
await shot('11-narrow-settings');
|
|
|
|
// 6. Sehr schmal — 520px
|
|
await win.setViewportSize({ width: 520, height: 800 });
|
|
await win.evaluate(() => window.showTab('vods'));
|
|
await win.waitForTimeout(800);
|
|
await shot('12-tiny-vods');
|
|
|
|
await app.close();
|
|
process.stdout.write(`\nDone part 2.\n`);
|
|
}
|
|
|
|
run().catch((e) => { process.stderr.write(String(e) + '\n'); process.exit(1); });
|