modify gh actions to generate video previews for 3d visuals

.github/workflows/generate-previews.yml

@@ -0,0 +1,43 @@
+name: Generate Previews
+on:
+ push:
+ branches: [main, master]
+ pull_request:
+ branches: [main, master]
+jobs:
+ test:
+ timeout-minutes: 60
+ runs-on: ubuntu-latest
+ # To use Remote Caching, uncomment the next lines and follow the steps below.
+ env:
+ TURBO_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+ TURBO_TEAM: ${{ vars.VERCEL_TEAM }}
+
+ steps:
+ - name: Check out code
+ uses: actions/checkout@v3
+ with:
+ fetch-depth: 2
+
+ - uses: pnpm/action-setup@v2.0.1
+ with:
+ version: 8.6.6
+
+ - name: Setup Node.js environment
+ uses: actions/setup-node@v3
+ with:
+ node-version: 18
+ cache: 'pnpm'
+
+ - name: Install dependencies
+ run: pnpm install
+
+ - name: Generate previews
+ run: pnpm scripts:generate-previews
+
+ - uses: actions/upload-artifact@v3
+ if: always()
+ with:
+ name: Previews
+ path: public/
+ retention-days: 30

apps/portfolio/package.json

@@ -21,16 +21,12 @@
  "@react-three/rapier-addons": "^3.0.1",
  "@vercel/analytics": "^1.0.1",
  "@vercel/edge-config": "^0.2.1",
- "chrome-aws-lambda": "^10.1.0",
  "classnames": "^2.3.2",
  "database": "workspace:*",
  "graphql": "^16.7.1",
  "graphql-request": "^6.1.0",
  "lodash.clamp": "^4.0.3",
  "next": "^13.4.9",
- "puppeteer": "^20.8.1",
- "puppeteer-core": "20.8.1",
- "puppeteer-screen-recorder": "^2.1.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-loading-skeleton": "^3.3.1",

package.json

@@ -9,7 +9,8 @@
  "dev:essential": "pnpm dev --filter=!./packages/storybook",
  "lint": "turbo lint",
  "clean": "turbo clean",
- "format": "prettier --write \"**/*.{ts,tsx,md}\""
+ "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+ "scripts:generate-previews": "turbo --filter=./packages/scripts scripts:generate-previews"
  },
  "devDependencies": {
  "eslint": "^7.32.0",
@@ -18,5 +19,5 @@
  "prettier-plugin-tailwindcss": "^0.1.11",
  "turbo": "latest"
  },
- "packageManager": "pnpm@7.15.0"
+ "packageManager": "pnpm@8.6.6"
 }

packages/scripts/package.json

@@ -0,0 +1,20 @@
+{
+ "name": "scripts",
+ "version": "0.0.0",
+ "private": true,
+ "scripts": {
+ "scripts:generate-previews": "ts-node ./src/generate-previews.ts"
+ },
+ "dependencies": {
+ "puppeteer": "^20.8.1",
+ "puppeteer-screen-recorder": "^2.1.2",
+ "ts-node": "^10.9.1"
+ },
+ "devDependencies": {
+ "eslint": "^8.44.0",
+ "eslint-config-custom": "workspace:*",
+ "tsconfig": "workspace:*",
+ "tsup": "^7.1.0",
+ "typescript": "^5.1.6"
+ }
+}

apps/portfolio/src/browser-automation/generate-3d-previews.ts → packages/scripts/src/generate-previews.ts

@@ -1,30 +1,18 @@
-import chrome from "chrome-aws-lambda";
 import puppeteer from "puppeteer";
 import { PuppeteerScreenRecorder } from "puppeteer-screen-recorder";
 
 // todo: add more pages
-const PAGE_NUMBERS = ["1"] as const;
+const PAGE_NUMBERS = ["3"] as const;
 
 const waitFor = (ms: number) =>
  new Promise((resolve) => setTimeout(resolve, ms));
 
-async function getPuppeteerOptions() {
- // Local development
- // return {
- // headless: false
- // }
+const VIDEO_DURATION = 3000;
 
- return {
- args: chrome.args,
- executablePath: await chrome.executablePath,
- headless: chrome.headless,
- };
-}
-
-async function generate3DPreviews() {
- const options = await getPuppeteerOptions();
- const browser = await puppeteer.launch(options);
+async function generatePreviews() {
+ const browser = await puppeteer.launch();
  const page = await browser.newPage();
+
  const recorder = new PuppeteerScreenRecorder(page, {
  followNewTab: true,
  fps: 60,
@@ -54,12 +42,15 @@ async function generate3DPreviews() {
  const path = `./public/visualizers/${pageNumber}.mp4`;
  await recorder.start(path);
 
- await waitFor(3000);
+ await waitFor(VIDEO_DURATION);
 
  await recorder.stop();
  }
 
  await browser.close();
 }
 
-export default generate3DPreviews;
+// run logic
+(async () => {
+ await generatePreviews();
+})();