feat(showcase): add reusable demo video recorder

README.md

@@ -8,6 +8,7 @@ This repository is intentionally documentation-only. The production backend, fro
 
 - Website: [https://qlockify.ir](https://qlockify.ir)
 - Demo: use the demo entry point on the landing page to create an isolated temporary workspace.
+- Product tour video: [assets/videos/qlockify-demo-flow.webm](assets/videos/qlockify-demo-flow.webm)
 
 ## What Qlockify Does
 
@@ -77,19 +78,6 @@ The screenshots below were captured from an isolated local demo workspace with s
 
 More screenshots are available in [`assets/screenshots`](assets/screenshots/).
 
-## Regenerating Screenshots
-
-Screenshots are generated locally from a running Qlockify frontend/backend pair:
-
-```powershell
-cd scripts
-npm install
-cd ..
-node scripts/capture-screenshots.js
-```
-
-The reusable script and its environment variables are documented in [`scripts/README.md`](scripts/README.md).
-
 ## Tech Stack
 
 - Backend: Django, Django REST Framework, Celery

scripts/README.md

@@ -5,10 +5,7 @@ This directory contains local-only automation for regenerating public showcase a
 Currently implemented:
 
 - `capture-screenshots.js`: captures the reusable screenshot set into `assets/screenshots/`.
-
-Planned later:
-
-- a video/demo recorder script can be added here with the same environment conventions.
+- `capture-demo-video.js`: records a reusable product-tour video into `assets/videos/`.
 
 ## Screenshot Prerequisites
 
@@ -37,6 +34,12 @@ or point the script to your installed Chrome:
 $env:QLOCKIFY_CHROME_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"
 ```
 
+Video recording also requires Playwright's bundled ffmpeg:
+
+```powershell
+npx playwright install ffmpeg
+```
+
 ## Capture Public And App Screenshots
 
 From the showcase repo root:
@@ -87,3 +90,40 @@ $env:QLOCKIFY_BACKEND_REPO="D:\Programing\Scripts\Qlockify\qlockify-backend"
 - `QLOCKIFY_ADMIN_USER_ID`: optional user id for the admin user-detail screenshot; defaults to the demo owner when available.
 - `QLOCKIFY_CHROME_PATH` or `CHROME_EXECUTABLE`: optional installed Chrome path.
 - `QLOCKIFY_CLEAN_SCREENSHOTS`: set `0` to keep existing PNG files before capture.
+
+## Capture Demo Video
+
+The video recorder creates a deterministic local fixture before recording:
+
+- one dedicated superuser
+- three workspaces
+- one populated workspace with clients, projects, tags, members, rates, time entries, and report data
+
+It resets only the dedicated video fixture user/workspaces.
+
+From the showcase repo root:
+
+```powershell
+node scripts/capture-demo-video.js
+```
+
+Or from the `scripts` directory:
+
+```powershell
+npm run video
+```
+
+The output is:
+
+```text
+assets/videos/qlockify-demo-flow.webm
+```
+
+Video-specific variables:
+
+- `QLOCKIFY_VIDEO_OUTPUT`: optional WebM output path.
+- `QLOCKIFY_VIDEO_MOBILE`: fixture login mobile, default `09900000001`.
+- `QLOCKIFY_VIDEO_PASSWORD`: fixture login password, default `QlockifyVideo!2026`.
+- `QLOCKIFY_VIDEO_CURSOR`: set `0` to disable the visible cursor overlay.
+
+The export section of the video needs the local Celery worker/report export pipeline to be running. If export notifications do not arrive, the recorder fails with a timeout instead of producing a misleading video.

scripts/package-lock.json

@@ -0,0 +1,56 @@
+{
+  "name": "scripts",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "playwright": "^1.57.0"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}

scripts/package.json

@@ -2,7 +2,8 @@
   "private": true,
   "type": "commonjs",
   "scripts": {
-    "screenshots": "node capture-screenshots.js"
+    "screenshots": "node capture-screenshots.js",
+    "video": "node capture-demo-video.js"
   },
   "dependencies": {
     "playwright": "^1.57.0"