Skip to content

feat: prayertimes.dev Playwright demo video pipeline - #4

Draft
element-software with Copilot wants to merge 2 commits into
mainfrom
copilot/demo-application-video
Draft

element-software with Copilot wants to merge 2 commits into
mainfrom
copilot/demo-application-video

Conversation

Copilot AI commented May 29, 2026

Copy link
Copy Markdown

Adds a complete Playwright-based demo video capture and render pipeline for https://app.prayertimes.dev, producing both a 1920×1080 desktop+mobile composite and a 1080×1920 vertical reel.

New files

  • playwright.prayertimes.config.ts — config targeting the live app directly; no webServer; DEMO_BASE_URL env override supported
  • e2e/prayertimes-demo.spec.ts — 6-slide spec capturing dual desktop (1440×900) + mobile (480×960) clips, composited into branded 1920×1080 frames
  • e2e/prayertimes-demo-mobile.spec.ts — same 6 slides, mobile-only, composited into branded 1080×1920 phone-frame reel
  • demo.prayertimes.config.mjs / demo.prayertimes-mobile.config.mjs — render configs pointing at the respective manifest paths and output MP4s

Journey (6 slides)

homeproduct-tourlocation-searchmonthly-calendarcalculation-settingsqibla-compass

The tour slide uses multi-library fallback selectors (Shepherd, Driver.js, Intro.js, Joyride, custom) since the tour library is unknown. All interactions are resilient with try/catch degradation.

Branding

Deep navy #060d1a background, emerald #34d399 accent. Inline SVG crescent-moon logo — no external asset dependency. Reuses demo/branding/soundtrack.mp3.

Scripts added to package.json

npm run prayertimes:demo        # capture + render → demo/output/prayertimes-demo.mp4
npm run prayertimes:reel        # capture + render → demo/output/prayertimes-reel.mp4
npm run prayertimes:demo:capture / :render   # individual stages
npm run prayertimes:reel:capture / :render

Both specs follow the existing test.skip(!!process.env.CI, …) convention.

Copilot AI added 2 commits May 29, 2026 01:39
- playwright.prayertimes.config.ts: Playwright config targeting app.prayertimes.dev
- e2e/prayertimes-demo.spec.ts: desktop+mobile combined 1920×1080 journey spec (6 slides)
- e2e/prayertimes-demo-mobile.spec.ts: mobile-only vertical reel 1080×1920 spec (6 slides)
- demo.prayertimes.config.mjs: render config for combined MP4 output
- demo.prayertimes-mobile.config.mjs: render config for mobile reel MP4 output
- package.json: added prayertimes:demo and prayertimes:reel scripts
Copilot AI changed the title feat: add prayertimes.dev demo video specs and render configs feat: prayertimes.dev Playwright demo video pipeline May 29, 2026
Copilot AI requested a review from element-software May 29, 2026 01:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants