config.mjs

/**
 * Video Recording Configuration — Generic Template
 *
 * Copy this file into scripts/video_recording/ and customise:
 *   - BASE_URL: your app's local dev server URL
 *   - Add project-specific setup helpers (e.g. loginUser, createTestData, cleanup)
 *
 * Sound files are resolved from the skill folder (.agents/skills/video-recording/)
 * via SKILL_DIR — no copies of the MP3s are needed in the project.
 */

export const BASE_URL  = 'http://localhost:3000'; // ← change per project
export const VIDEO_DIR = './videos';

// Firefox passes browser-version checks that headless Chromium can fail.
export { firefox as browser } from 'playwright';

// Viewport presets
export const DEVICES = {
  mobile:  { viewport: { width: 390,  height: 844  } },
  tablet:  { viewport: { width: 768,  height: 1024 } },
  desktop: { viewport: { width: 1280, height: 720  } },
};

// ---------------------------------------------------------------------------
// Timing helpers
// ---------------------------------------------------------------------------

export async function pause(ms = 1000) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// ---------------------------------------------------------------------------
// Audio tracker
//
// Usage:
//   const tracker = createClickTracker();
//   tracker.trackClick('button-label');
//   tracker.trackTypingStart('field-label');
//   tracker.trackTypingEnd();
//   await saveAndAddSound(videoPath, tracker);  // in finally block
// ---------------------------------------------------------------------------

export function createClickTracker() {
  const clicks       = [];
  const typingEvents = [];
  const startTime    = Date.now();
  const elapsed      = () => (Date.now() - startTime) / 1000;

  return {
    trackClick: (label = '') => {
      const time = elapsed();
      clicks.push({ time, label });
      console.log(`      🔊 Click tracked at ${time.toFixed(2)}s${label ? ` (${label})` : ''}`);
    },
    trackTypingStart: (label = '') => {
      const time = elapsed();
      typingEvents.push({ type: 'start', time, label });
      console.log(`      ⌨️ Typing started at ${time.toFixed(2)}s${label ? ` (${label})` : ''}`);
    },
    trackTypingEnd: () => {
      const time = elapsed();
      typingEvents.push({ type: 'end', time });
      console.log(`      ⌨️ Typing ended at ${time.toFixed(2)}s`);
    },
    getClicks:       () => clicks,
    getTypingEvents: () => typingEvents,
    saveClickData: async (videoPath) => {
      const { writeFile } = await import('fs/promises');
      const clickDataPath = videoPath.replace(/\.webm$/, '.clicks.json');
      await writeFile(clickDataPath, JSON.stringify({
        clicks:       clicks.map(c => ({ time: c.time, label: c.label })),
        typingEvents,
        clickCount:   clicks.length,
        typingCount:  typingEvents.filter(e => e.type === 'start').length,
        totalDuration: elapsed(),
      }, null, 2));
      console.log(`   🔊 Audio data saved: ${clickDataPath}`);
      return clickDataPath;
    },
  };
}

// ---------------------------------------------------------------------------
// Cursor overlay
// ---------------------------------------------------------------------------

/**
 * Inject a visible arrow cursor that follows Playwright's mouse position.
 * Uses addInitScript so it survives navigations automatically.
 */
export async function injectCursor(page) {
  const svg      = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24"><path d="M 2 2 L 2 20 L 7 15 L 10 22 L 13 21 L 10 14 L 16 14 Z" fill="white" stroke="black" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
  const dataUrl  = `data:image/svg+xml,${encodeURIComponent(svg)}`;

  await page.addInitScript((url) => {
    function setup() {
      if (document.getElementById('pw-cursor')) return;
      const el = document.createElement('div');
      el.id = 'pw-cursor';
      el.style.cssText = [
        'position:fixed', 'top:0', 'left:0', 'width:20px', 'height:24px',
        'pointer-events:none', 'z-index:2147483647',
        `background-image:url("${url}")`, 'background-size:contain',
        'background-repeat:no-repeat', 'display:block',
      ].join(';');
      document.body.appendChild(el);
      document.addEventListener('mousemove', e => {
        el.style.left = e.clientX + 'px';
        el.style.top  = e.clientY + 'px';
      });
    }
    document.readyState === 'loading'
      ? document.addEventListener('DOMContentLoaded', setup)
      : setup();
  }, dataUrl);
}

// ---------------------------------------------------------------------------
// Natural interactions
// ---------------------------------------------------------------------------

/**
 * Move the mouse smoothly to the centre of a locator's bounding box.
 */
export async function moveToElement(page, locator, steps = 12) {
  const box = await locator.boundingBox();
  if (!box) return;
  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, { steps });
}

/**
 * Move cursor to element, then click and record the event.
 */
export async function naturalClick(page, locator, clickTracker, label = '') {
  await locator.scrollIntoViewIfNeeded();
  await moveToElement(page, locator);
  await pause(150);
  clickTracker.trackClick(label);
  await locator.click();
}

/**
 * Move cursor to field, focus it, then type character-by-character with
 * randomised delays (40–110 ms) to look like a fast human typist.
 * Never use locator.fill() in flow scripts — it looks like paste.
 */
export async function naturalFill(page, locator, text, clickTracker, label = '') {
  await locator.scrollIntoViewIfNeeded();
  await moveToElement(page, locator);
  await pause(100);
  await locator.click();
  await pause(120);
  clickTracker.trackTypingStart(label);
  for (const char of text) {
    await locator.pressSequentially(char, { delay: 0 });
    await pause(40 + Math.random() * 70);
  }
  await pause(150);
  clickTracker.trackTypingEnd();
}

// ---------------------------------------------------------------------------
// Audio post-processing
// ---------------------------------------------------------------------------

/**
 * Save click/typing timestamps and run add_click_sounds.mjs via ffmpeg.
 * Call in the finally block of each flow script after renaming the video.
 *
 * Requires: ffmpeg installed. Sound files are read from the skill folder.
 */
export async function saveAndAddSound(videoPath, clickTracker) {
  const { exec }        = await import('child_process');
  const { promisify }   = await import('util');
  const { access }      = await import('fs/promises');
  const execAsync       = promisify(exec);
  const path            = await import('path');
  const { fileURLToPath } = await import('url');

  await clickTracker.saveClickData(videoPath);

  const scriptDir  = path.default.dirname(fileURLToPath(import.meta.url));
  // Sound files live in the skill folder regardless of where this script is copied.
  const skillDir   = path.default.join(scriptDir, '..', '..', '.agents', 'skills', 'video-recording');
  const clickSound = path.default.join(skillDir, 'computer-mouse-click-352734.mp3');

  try {
    await access(clickSound);
  } catch {
    console.log('   ⚠ Sound files not found in skill folder – skipping audio.');
    return;
  }

  const soundScript = path.default.join(scriptDir, 'add_click_sounds.mjs');
  try {
    const { stdout, stderr } = await execAsync(
      `node "${soundScript}" "${videoPath}"`,
      { maxBuffer: 50 * 1024 * 1024 }
    );
    if (stdout) console.log(stdout.trim());
    if (stderr) console.log(stderr.trim());
  } catch (err) {
    console.error('   ⚠ Sound post-processing failed:', err.message.split('\n')[0]);
  }
}

// ---------------------------------------------------------------------------
// Project-specific helpers (add below when scaffolding)
// ---------------------------------------------------------------------------
//
// Example — login via a test helper endpoint:
//
// export async function loginUser(page, email, role = 'user') {
//   const res  = await page.request.post(`${BASE_URL}/test/login`, { data: { email, role } });
//   const data = await res.json();
//   if (!data.success) throw new Error(`Login failed: ${JSON.stringify(data)}`);
//   await page.goto(data.login_url);
//   await page.waitForLoadState('networkidle');
//   return data;
// }
//
// export async function cleanup(page) {
//   await page.request.delete(`${BASE_URL}/test/cleanup`).catch(() => {});
// }