creator/cc-1c-skills
1
0
Fork 0
mirror of https://github.com/Nikolay-Shirokov/cc-1c-skills.git synced 2026-06-12 17:04:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web-test): replace fade transitions with auto-cleanup of overlays

Browse Source 
CSS fade transitions don't work well with CDP screencast (causes desktop
flash between slides). Instead, showImage/showTitleSlide now automatically
remove the other overlay type — no need to call hide before showing next.

Pattern for consecutive slides:
  showTitleSlide(...) → showImage(...) → showImage(...) → hideImage()
No hideTitleSlide() needed between title and first image.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nick Shirokov
2026-03-18 21:41:17 +03:00
parent b7e3bd876d
commit 14b0782904
1 changed files with 16 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/skills/web-test/scripts/browser.mjs
+16 -33
View File
@@ -4213,8 +4213,7 @@ export async function showTitleSlide(text, opts = {}) {
await page.evaluate(({ text, subtitle, background, color, fontSize }) => {
let div = document.getElementById('__web_test_title');
const isNew = !div;
if (isNew) {
if (!div) {
div = document.createElement('div');
div.id = '__web_test_title';
document.body.appendChild(div);
@@ -4224,15 +4223,16 @@ export async function showTitleSlide(text, opts = {}) {
`background:${background}`,
'display:flex', 'align-items:center', 'justify-content:center',
'z-index:999999', 'pointer-events:none',
'transition:opacity 0.3s ease', isNew ? 'opacity:0' : ''
].join(';');
// Remove other overlays to prevent flash between slides
const img = document.getElementById('__web_test_image');
if (img) img.remove();
const esc = s => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\n/g, '<br>');
let html = `<div style="font-size:${fontSize}px;font-weight:600;line-height:1.4;">${esc(text)}</div>`;
if (subtitle) {
html += `<div style="font-size:${Math.round(fontSize * 0.5)}px;margin-top:16px;opacity:0.7;">${esc(subtitle)}</div>`;
}
div.innerHTML = `<div style="text-align:center;max-width:70%;color:${color};font-family:'Segoe UI',Arial,sans-serif;">${html}</div>`;
if (isNew) requestAnimationFrame(() => { div.style.opacity = '1'; });
}, { text, subtitle, background, color, fontSize });
// Smart TTS wait (same pattern as showCaption/showImage)
@@ -4248,22 +4248,13 @@ export async function showTitleSlide(text, opts = {}) {
}
}
/** Remove the title slide overlay (with fade-out). */
/** Remove the title slide overlay. */
export async function hideTitleSlide() {
ensureConnected();
const exists = await page.evaluate(() => {
await page.evaluate(() => {
const el = document.getElementById('__web_test_title');
if (!el) return false;
el.style.opacity = '0';
return true;
if (el) el.remove();
});
if (exists) {
await page.waitForTimeout(350);
await page.evaluate(() => {
const el = document.getElementById('__web_test_title');
if (el) el.remove();
});
}
}
/**
@@ -4337,18 +4328,20 @@ export async function showImage(imagePath, opts = {}) {
await page.evaluate(({ dataUrl, fit, bg, useBlur, shadow, maxSize, isFull }) => {
let div = document.getElementById('__web_test_image');
const isNew = !div;
if (isNew) {
if (!div) {
div = document.createElement('div');
div.id = '__web_test_image';
document.body.appendChild(div);
}
// Remove other overlays to prevent flash between slides
const title = document.getElementById('__web_test_title');
if (title) title.remove();
div.style.cssText = [
'position:fixed', 'top:0', 'left:0', 'width:100%', 'height:100%',
`background:${bg}`,
'display:flex', 'align-items:center', 'justify-content:center',
'z-index:999999', 'pointer-events:none', 'overflow:hidden',
'transition:opacity 0.3s ease', isNew ? 'opacity:0' : ''
'z-index:999999', 'pointer-events:none', 'overflow:hidden'
].join(';');
let html = '';
@@ -4366,7 +4359,6 @@ export async function showImage(imagePath, opts = {}) {
html += `<img src="${dataUrl}" style="position:relative;${sizeCss}${shadowCss}" />`;
div.innerHTML = html;
if (isNew) requestAnimationFrame(() => { div.style.opacity = '1'; });
}, { dataUrl, fit, bg, useBlur, shadow, maxSize, isFull });
// Smart TTS wait (same pattern as showCaption)
@@ -4382,22 +4374,13 @@ export async function showImage(imagePath, opts = {}) {
}
}
/** Remove the image overlay (with fade-out). */
/** Remove the image overlay. */
export async function hideImage() {
ensureConnected();
const exists = await page.evaluate(() => {
await page.evaluate(() => {
const el = document.getElementById('__web_test_image');
if (!el) return false;
el.style.opacity = '0';
return true;
if (el) el.remove();
});
if (exists) {
await page.waitForTimeout(350);
await page.evaluate(() => {
const el = document.getElementById('__web_test_image');
if (el) el.remove();
});
}
}
/**