Function generateThumbnail

packages/cli/src/server/studioServer.ts:419–493

(opts)

    },

    async generateThumbnail(opts): Promise<Buffer | null> {
      const browser = await getThumbnailBrowser();
      if (!browser) {
        console.warn("[Studio] Thumbnail: no browser available — Chrome may not be installed");
        return null;
      }
      let page: import("puppeteer-core").Page | null = null;
      try {
        page = await browser.newPage();
        await page.setViewport({ width: opts.width || 1920, height: opts.height || 1080 });
        await page.goto(opts.previewUrl, { waitUntil: "domcontentloaded", timeout: 10000 });
        await page
          .waitForFunction(
            () => {
              const w = window as Window & {
                __timelines?: Record<string, unknown>;
              };
              return !!(w.__timelines && Object.keys(w.__timelines).length > 0);
            },
            { timeout: 5000 },
          )
          .catch(() => {});
        await page.evaluate((t: number) => {
          const w = window as Window & {
            __player?: { seek?: (time: number) => void };
            __timelines?: Record<string, { pause?: (time?: number) => void }>;
            gsap?: { ticker?: { tick?: () => void } };
          };
          if (typeof w.__player?.seek === "function") {
            w.__player.seek(t);
          } else if (w.__timelines) {
            for (const tl of Object.values(w.__timelines)) {
              tl?.pause?.(t);
            }
            w.gsap?.ticker?.tick?.();
          }
        }, opts.seekTime);
        const manifestContent = readStudioManualEditManifestContent(opts.project.dir);
        await applyStudioManualEditsToThumbnailPage(page, manifestContent, opts.compPath);
        await page.evaluate(() => {
          void document.fonts?.ready;
          const body = document.body;
          if (body && getComputedStyle(body).backgroundColor === "rgba(0, 0, 0, 0)") {
            body.style.backgroundColor = "#1c2028";
          }
        });
        await new Promise((r) => setTimeout(r, 200));
        await reapplyStudioManualEditsToThumbnailPage(page);
        let clip: ScreenshotClip | undefined;
        if (opts.selector) {
          clip = await page.evaluate(getElementScreenshotClip, opts.selector, opts.selectorIndex);
        }
        const screenshot = (await page.screenshot(
          opts.format === "png"
            ? {
                type: "png",
                ...(clip ? { clip } : {}),
              }