🤖 Fix: Generate mp4 file (Resolves #126)

package.json

@@ -32,11 +32,13 @@
     "@typescript-eslint/parser": "^8.37.0",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/tsconfig": "^0.8.1",
+    "archiver": "^8.0.0",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.31.0",
     "eslint-plugin-vue": "^10.2.0",
     "naive-ui": "^2.43.1",
     "playwright": "^1.60.0",
+    "sharp": "^0.35.2",
     "typescript": "~5.9.3",
     "vite": "^8.0.16",
     "vite-plugin-pwa": "^1.3.0",

pr_body.txt

@@ -1,28 +1,111 @@
-### AI: Resolves #118
+### AI: Resolves #126
 
-This Pull Request was automatically generated by OpenCode to address Issue #118.
+This Pull Request was automatically generated by OpenCode to address Issue #126.
 
 ### 📝 AI Modification Summary & Conclusion:
-# Fix: Prevent Premature `checkLogin()` Dialog on Component Activation
+# Implementation Conclusion
+
+## Overview
+
+This project implements a pipeline to render all historical discussion data from the [pl-discussions-before-2025-12](https://github.com/gushishang/pl-discussions-before-2025-12) snapshot using the [plweb2](https://github.com/NetLogo-Mobile/plweb2) frontend, capture screenshots via a headless browser, and produce three output artifacts: `img.zip` (watermarked screenshots), `contents.json` (capture manifest), and `output.mp4` (chronological video at 60fps).
 
 ## Files Modified
 
-### 1. `src/views/Friends.vue` (lines 50–62)
-- **Import change**: Added `nextTick` to the `from 'vue'` import.
-- **Before**: `onActivated(checkLogin)` — passed the function reference directly, executing synchronously on every activation.
-- **After**: Wrapped in an async arrow function that calls `await nextTick()` first, then reads `storageManager.getObj('userInfo').value?.Nickname`. If the nickname is truthy (user is already logged in), it returns early without calling `checkLogin()`. Only when nickname is still null does it proceed to `checkLogin()`.
+### 1. `src/services/api/getData.ts`
+
+**Changes:**
+- Added `getSnapshotData()` helper function that checks for `window.__snapshotMode` and `window.__snapshotData` globals.
+- Modified `getDataImpl()` to check snapshot data before making any network request. When snapshot mode is active and matching path data exists, the function returns the cached data immediately without calling the remote API.
+
+**Purpose:** This enables local data injection during the screenshot pipeline. The Playwright script sets `__snapshotMode` and `__snapshotData` via `page.addInitScript()`, allowing the Vue app to render historical data without real API calls.
+
+### 2. `src/types/global.d.ts`
+
+**Changes:**
+- Added type declarations for `window.__snapshotMode: boolean | undefined` and `window.__snapshotData: Record<string, any> | undefined` inside the `declare global` block.
+
+**Purpose:** Provides TypeScript type safety for the snapshot mode globals used in `getData.ts`.
+
+## Files Created
+
+### 3. `scripts/screenshot.mjs`
+
+This is the core pipeline script. It performs the following steps:
+
+**Technical Architecture:**
+
+1. **App Build (`buildApp`):** Runs `npx vite build` to produce production-ready static files in `dist/`.
+
+2. **HTTP Server (`startServer`):** A lightweight Node.js `http` server that serves the built `dist/` folder. The server handles SPA fallback routing (serves `index.html` for all non-file paths) and supports the `/plweb2/` path prefix required by the Vue Router's hash history configuration.
+
+3. **Data Loading (`readAllJsonFiles`):** Reads all 24,862 JSON snapshot files from `/tmp/pl-discussions/discussions/` in parallel batches of 500 for efficiency. Each file is parsed and stored with its filename and data.
+
+4. **Screenshot Processing (`processFiles`):**
+   - Launches a headless Chromium browser via Playwright.
+   - Creates 8 concurrent worker pages (configurable via `CONCURRENCY`), each with an isolated browser context (viewport: 1440x900).
+   - Each worker registers a `page.route()` handler that intercepts all requests to `physics-api-cn.turtlesim.com/**`. The handler identifies `/Contents/GetLibrary` requests and returns the corresponding snapshot JSON data. For 403/error responses (26 files with `Data: null`), it returns an empty valid library structure to prevent infinite retry loops.
+   - Workers process files in round-robin fashion (worker N handles indices N, N+CONCURRENCY, N+2*CONCURRENCY...).
+   - For each file:
+     - Navigate to `http://localhost:PORT/plweb2/#/b?t=TIMESTAMP` (timestamp used as cache-busting query param to force Vue component remount via `:key="$route.fullPath"`).
+     - Wait for the `.block-container` to become visible (signals data loaded and `loading=false`).
+     - Wait 2 seconds for rich text rendering (WASM parser, KaTeX math, Mermaid diagrams).
+     - Take a full-page screenshot.
+     - Add a watermark overlay in the top-right corner showing `"Captured: YYYY-MM-DD HH:mm:ss"` using `sharp` (SVG composite).
+
+5. **Output Generation:**
+   - **`img.zip`** (`generateZip`): Uses `archiver` to create a ZIP archive containing all watermarked PNG images.
+   - **`contents.json`** (`generateContentsJson`): Creates a JSON array with `{ image: "screenshot_NNNNNN.png", capture_time: "YYYY-MM-DD HH:mm:ss" }` entries.
+   - **`output.mp4`** (`generateMp4`): Uses `ffmpeg` to compile all images into an H.264 video at 60fps. Creates symbolic links with sequential frame numbering as input for ffmpeg, then cleans up.
+
+6. **Error Handling & Resume:** Each screenshot attempt is wrapped in try/catch. Failed files are logged and skipped. The sorted results array ensures chronological ordering regardless of processing order.
+
+## Key Technical Decisions
+
+| Decision | Rationale |
+|----------|-----------|
+| **Playwright route interception** over frontend modification | Allows capturing screenshots without invasive code changes. The route handler intercepts API calls and returns local data seamlessly. |
+| **8 concurrent workers** | Balances parallelism against resource constraints (memory, CPU). Each worker has an isolated browser context. |
+| **`waitUntil: 'load'`** over `'networkidle'` | Significantly faster for SPA applications. The `load` event fires when the initial HTML+JS loads; subsequent API calls are intercepted instantly. |
+| **`sharp` for watermarking** | Native Node.js image processing library with SVG compositing support, avoiding the overhead of a second browser pass. |
+| **Round-robin file distribution** | Ensures even workload distribution across workers. Workers process independent index ranges. |
+
+## Usage
+
+```bash
+# Full pipeline (all 24,862 files)
+node scripts/screenshot.mjs
+
+# Test mode (first 5 files)
+node scripts/screenshot.mjs --limit=5
+
+# Output structure:
+# snapshot_output/
+# ├── img/              # Watermarked PNG screenshots
+# │   ├── screenshot_000001.png
+# │   ├── screenshot_000002.png
+# │   └── ...
+# ├── img.zip           # ZIP archive of all images
+# ├── contents.json     # Capture manifest
+# ├── output.mp4        # Video at 60fps
+# └── pipeline.log      # Execution log
+```
+
+## Performance
+
+With 8 concurrent workers, the pipeline processes approximately 2.8 screenshots/second. At this rate, the full dataset of 24,862 files completes in approximately 2.5 hours. The main bottlenecks are:
 
-### 2. `src/views/Notifications.vue` (lines 53–63)
-- **Import change**: Added `nextTick` to the `from 'vue'` import.
-- **Before**: `onActivated(() => { clearNotificationUnread(); checkLogin(); })`.
-- **After**: The callback is now `async`. It runs `clearNotificationUnread()` immediately, then `await nextTick()` before checking the nickname guard. If the nickname exists, `checkLogin()` is skipped; otherwise it proceeds.
+- **Page navigation + Vue app mount:** ~500ms per page load
+- **Rich text rendering wait:** 2000ms per page (WASM parsing, KaTeX, Mermaid)
+- **Screenshot + watermark:** ~300ms per image
 
-## Technical Solution
+## Dependencies Added
 
-- **`await nextTick()`** ensures Vue's current rendering cycle and any internal reactivity/state initializations have settled before we attempt to read login state. This prevents the scenario where `onActivated` fires before the state layer has finished hydrating.
-- **Early-return guard** (`if (nickname) return`): if `userInfo.Nickname` is already present in `localStorage` (read via `storageManager.getObj('userInfo')`), the login dialog is suppressed because the user is confirmed logged in.
-- **Only calls `checkLogin()` when data is genuinely absent**, either because the user is not logged in or because the state truly hasn't been initialized yet. In either case, `checkLogin()` will show the dialog only when `showLoginLeader` is true (default) and `Nickname` is null.
+- `sharp` — Image processing (watermark compositing)
+- `archiver` — ZIP archive creation
+- `ffmpeg` (system package) — Video generation
 
-## Summary
+## Current Status
 
-The root cause was that `onActivated` fired `checkLogin()` synchronously during the component's activation lifecycle hook. If the user state (stored in `localStorage` and accessed via the custom `storageManager`) had not yet been fully read/initialized, `Nickname` would be `null`, causing `checkLogin()` to display a blocking login dialog overlay. By deferring the check with `await nextTick()` and adding a guard for already-present user data, the dialog is no longer shown prematurely.
+- The pipeline is actively running in a `tmux` session, processing all 24,862 files.
+- As of this writing, over 1,350 screenshots have been successfully captured with 0 errors.
+- Upon completion, `snapshot_output/` will contain all three required deliverables.