Screenshots

import { Stack0 } from '@stack0/sdk'
 
const stack0 = new Stack0({
  apiKey: process.env.STACK0_API_KEY!
})
 
// Start screenshot capture (async)
const { id, status } = await stack0.screenshots.capture({
  url: 'https://example.com',
  format: 'png',
})
 
// Poll for completion
const screenshot = await stack0.screenshots.get({ id })
console.log('Image URL:', screenshot.imageUrl)

// This method handles polling automatically
const screenshot = await stack0.screenshots.captureAndWait({
  url: 'https://example.com',
  format: 'png',
  fullPage: true,
}, {
  pollInterval: 1000, // Check every 1 second (default)
  timeout: 60000,     // Timeout after 60 seconds (default)
})
 
console.log('Image URL:', screenshot.imageUrl)
console.log('Dimensions:', screenshot.imageWidth, 'x', screenshot.imageHeight)

const screenshot = await stack0.screenshots.captureAndWait({
  url: 'https://example.com',
  format: 'png',
  // Block common annoyances
  blockAds: true,
  blockCookieBanners: true,
  blockChatWidgets: true,
  blockTrackers: true,
  // Block specific URLs
  blockUrls: [
    '*analytics*',
    '*tracking*',
  ],
  // Block resource types
  blockResources: ['image', 'font'], // Faster loading
  // Hide specific elements
  hideSelectors: ['.popup', '#banner', '.newsletter-signup'],
})

const screenshot = await stack0.screenshots.captureAndWait({
  url: 'https://example.com/dashboard',
  format: 'png',
  // Wait for a specific element to appear
  waitForSelector: '.chart-container',
  // Or wait a fixed amount of time (ms)
  waitForTimeout: 2000,
  // Click a button first (useful for modals, tabs, etc.)
  clickSelector: '.load-more-button',
})

const screenshot = await stack0.screenshots.captureAndWait({
  url: 'https://example.com',
  format: 'png',
  // Enable dark mode
  darkMode: true,
  // Inject custom CSS
  customCss: `
    .ads, .popup { display: none !important; }
    body { background: #1a1a1a; }
  `,
  // Execute JavaScript before capture
  customJs: `
    document.querySelector('.lazy-load')?.click();
    window.scrollTo(0, 500);
  `,
})

const screenshot = await stack0.screenshots.captureAndWait({
  url: 'https://app.example.com/dashboard',
  format: 'png',
  // Set custom headers
  headers: {
    'Authorization': 'Bearer your-token',
    'X-Custom-Header': 'value',
  },
  // Or set cookies
  cookies: [
    { name: 'session', value: 'abc123', domain: 'app.example.com' },
    { name: 'auth_token', value: 'xyz789' },
  ],
  // Custom user agent
  userAgent: 'CustomBot/1.0',
})

// Start a batch job
const batch = await stack0.screenshots.batch({
  urls: [
    'https://example.com',
    'https://example.org',
    'https://example.net',
  ],
  config: {
    format: 'png',
    fullPage: true,
    blockAds: true,
  },
})
 
console.log('Batch ID:', batch.id)
console.log('Total URLs:', batch.totalUrls)
 
// Wait for completion with progress updates
const completedJob = await stack0.screenshots.batchAndWait({
  urls: ['https://example.com', 'https://example.org'],
  config: { format: 'png' },
}, {
  pollInterval: 2000,
  timeout: 300000, // 5 minutes
})
 
console.log(`Completed: ${completedJob.successfulUrls} success, ${completedJob.failedUrls} failed`)

// Create a schedule for daily screenshots
const schedule = await stack0.screenshots.createSchedule({
  name: 'Daily homepage capture',
  url: 'https://example.com',
  frequency: 'daily', // 'hourly' | 'daily' | 'weekly' | 'monthly'
  config: {
    format: 'png',
    fullPage: true,
    blockAds: true,
  },
  // Detect visual changes between runs
  detectChanges: true,
  changeThreshold: 5, // % change to trigger notification
  // Webhook notification
  webhookUrl: 'https://your-app.com/webhook',
})
 
// Toggle schedule on/off
await stack0.screenshots.toggleSchedule({ id: schedule.id })
 
// List all schedules
const { items } = await stack0.screenshots.listSchedules({
  isActive: true,
})

// List screenshots with filters
const { items, nextCursor } = await stack0.screenshots.list({
  status: 'completed',
  limit: 20,
})
 
for (const screenshot of items) {
  console.log(`[${screenshot.status}] ${screenshot.url}`)
  console.log(`  Image: ${screenshot.imageUrl}`)
  console.log(`  Size: ${screenshot.imageWidth}x${screenshot.imageHeight}`)
}
 
// Get a specific screenshot
const screenshot = await stack0.screenshots.get({ id: 'screenshot-id' })
 
// Delete a screenshot
await stack0.screenshots.delete({ id: 'screenshot-id' })

const screenshot = await stack0.screenshots.captureAndWait({
  url: 'https://example.com',
  format: 'png',
  // Use a cache key to deduplicate requests
  cacheKey: 'homepage-desktop',
  // Cache TTL in seconds (default: 3600)
  cacheTtl: 86400, // 24 hours
})
 
// Same cacheKey within TTL returns cached result instantly
const cached = await stack0.screenshots.captureAndWait({
  url: 'https://example.com',
  format: 'png',
  cacheKey: 'homepage-desktop',
}) // Returns immediately with cached result