Files
Piik/site/film/README.md
T
AAA 799d6efb4a fix: improve sharing recovery and UI feedback
## Problem and outcome / 问题与结果

Browser sharing can remain connected to a local encoding transport that never becomes usable, leaving viewers without frames. This phase bounds that startup at eight seconds and restores ordinary encoding through the existing failure path. It also keeps ready App services running after a browser-open failure, preserves user presentation/playback choices, and aligns room feedback, illustrated hints, metrics and documentation.

部分环境下,本机编码连接一直无法建立会让观众收不到画面。本轮在八秒后进入现有降级流程,同时修复客户端启动移交、播放状态和前端反馈的一致性问题,并更新官网与中英文教程。

Closes #399.

Related: #396. The release contains relevant startup/error-handling repairs, but the reporting machine has not been retested. Keep this issue open for a current-build result. #401 (optional Windows capture-border hiding) remains deferred.

Release / 发布版本:**v1.3.1**.

## Release notes

### 中文

- 客户端记住上次确认的启动模式;启动移交保留已保存的语言、纯视觉模式和主题选择。
- 系统浏览器未能自动打开时,客户端继续运行,并在终端保留页面地址、重试入口和具体错误。
- 改善浏览器共享画面的启动兜底,避免 App 媒体因短暂信令中断被误判为失败。
- 音轨变化保持现有视频与观众的本机暂停状态;连接恢复和暂停恢复不再重复播放电视开机动画。
- 修复昵称编辑及长昵称查看,减少重复的角色提示,统一人物选择和连接状态的区别。
- 完善房间准入、密码和邀请说明;复制反馈对应当前链接及当前操作,避免迟到结果覆盖新反馈。
- 修正采集参数、统计单位与采样区间的展示,未知参数不再用配置上限代替。
- 统一提示漫画、状态图标与动效,改善选源器还焦、键盘操作、剧场布局和触控目标尺寸。
- 服务端默认支持 20 位观众,可在配置中设为 1–20 位,房主不占观众名额。
- 更新官网、教程入口和中英文说明,清理过时预览及失用代码。

兼容说明:使用旧版 App 连接更新后的站点时,站点会优先保留自己的显示偏好。如需更改语言或主题,请在进入后的页面调整。

### English

- Remember the last confirmed App launch mode and preserve saved language, visual-mode and theme choices during launch handoff.
- Keep the App running if the system browser fails to open, with the page address, retry action and error details available in the terminal.
- Improve the browser sharing startup fallback and avoid treating brief signaling outages as App media failures.
- Keep existing video and local pause state when audio tracks change. Reconnecting and resuming no longer replay the television startup animation over the picture.
- Fix nickname editing and full-name access, remove redundant role hints, and distinguish participant selection from connection state.
- Clarify room access, passwords and invitations. Copy feedback now belongs to the current link and operation, so late results cannot replace newer feedback.
- Correct capture details, metric units and observation intervals. Unknown capture values are no longer replaced with configured ceilings.
- Align illustrated hints, status icons and motion. Improve source-picker focus, keyboard operation, theater layout and touch targets.
- Default the Server to 20 viewers, configurable from 1 to 20. The host does not count toward that limit.
- Update the website, guide links and bilingual instructions, and remove obsolete previews and unused code.

Compatibility: when an older App connects to an updated Site, the Site keeps its saved presentation preferences. Change language or theme on the destination page when using an older launcher.

## Verification / 验证

Non-publishing [CI candidate run 34919320511](https://github.com/TNTcraftHIM/Piik/actions/runs/34919320511) passed Go core, race, Web checks, Server/container verification and all three native App package checks at source 188376e8. Subsequent commits only update deployment documentation, status and TODO; documentation/hygiene checks passed. Product inputs are unchanged.

- `npm run check`: TypeScript, 64 test files / 854 tests, and the Web production build passed.
- `npm run check:client-core`: final Go source passed tests, formatting, vet and core target builds. Windows capture compilation and geometry checks passed earlier in this phase; later edits did not change native capture.
- Website build, documentation checks, repository hygiene and diff checks passed. Existing documentation-size and bundle-size warnings remain.
- Actual browser flows covered sharing, source changes, pause/resume, late audio, brief signaling loss, invitation/copy feedback, entry preferences, source-picker focus, and narrow layouts.
- A local three-viewer P2P relay check covered quality-report expiry, recovery and cleanup without interrupting video. A controlled browser-helper failure returning `0xc0000005` left the real App launcher and Local service available.
- Homepage checks covered Chinese/English, light/dark preferences and inline-film open/close after removing the separate-page entry.

Limits: no new reporter-machine confirmation for #396 or the Windows URL-handler crash; physical Safari/mobile, macOS/Linux capture and wider public-network/endurance coverage remain deferred. Formal release artifacts will be built from the approved squash-merge revision. Hero-loop controls and video-adjacent tooltip placement remain open design items in TODO.

## Impact / 影响

Compatible patch; signaling, Native control and capture contracts are unchanged. Older App launch handoff keeps the updated Site's saved presentation preferences. The Server's default viewer limit is corrected to 20; an explicit 1–20 configuration remains valid.

Service updates retain persisted room authority but restart active media sessions. Deploy the verified immutable Server artifact through the existing bounded health/recovery process. Public Demo remains open and P2P-only; deployment does not enable SFU or change infrastructure/configuration.
2026-09-15 10:13:29 +08:00

6.7 KiB
Raw Blame History

Piik film

The homepage expands this optional, 76-second introduction in an iframe loaded only on request. Closing it unloads playback; the frame follows the homepage's language and theme. The player document also supports local recording and focused checks. From the repository root, run npm run build:website and npm run preview:website, then open http://127.0.0.1:18890/film/. Publish the static build/site/ output. A project prefix such as /Piik/film/ also works; GitHub Pages needs no application server.

score.js owns the 101 BPM beat/bar grid used by cuts and staged UI actions. art.js owns the original SVG artwork and seekable sequence; ../assets/games.js owns the six original gameplay vignettes and their action/result sequence. player.js owns playback, sound and controls. Audible playback follows the audio element's clock, including buffering. The host must support HTTP byte ranges for seeking; the Vite preview command does. Muted playback uses a monotonic clock and does not request the soundtrack. Artwork and the demonstration's CSS animations follow this same position, including pause, seek and replay. After natural completion, only the closing mascot continues its native idle loop; an explicit pause or seek freezes it, and reduced motion keeps it still.

The film follows the App flow in five steps: scroll to the website downloads, unpack the complete package and open the App, choose Public invite, select a source, then copy and send the invite through an external chat example before friends watch in a browser. Public invitations need Internet access and a temporary control tunnel. The public pages use the copy guide's information layers.

ui/main.tsx uses the product's actual launcher form, source picker, TV, sofa and control primitives with sample inputs. The build also supplies the current homepage HTML and styles to ui/website.ts, whose scrolling follows the same film position; the desktop is an illustration of the unpacked Windows package. The website and App run in separate opaque, inert iframes with script permission only; they cannot persist preferences to the App or request capture. No room connection, API interception or media permission is simulated. The existing build dependency bundles these components; rebuilding the website picks up their styling and copy. Review scene selection and camera framing when the product workflow changes. Cursor targets follow component elements, not screenshot coordinates.

Each cursor movement starts at the preceding control and has its own travel interval. Derive the entire pose from the requested time; do not accumulate cursor history or start a second animation clock. The source preview and drawing scene share ../assets/sketch.js, including a seekable pencil trace. Opening the App leads to its mode form and then the room. Keep the window's position continuous through these steps. The neutral chat example retains the copy control beneath it to anchor the next cursor movement, with its own title and sample message clearly outside Piik's interface.

The film reuses the product's playback control and BrandMark CSS, plus Glyph icons rendered to static markup during the website build. Its score and audio remain owned by player.js; the live viewer's stream binding, audio gain, reconnect and picture in picture remain in PlaybackControls. A shared appearance does not require giving a recorded sequence live-room state.

../assets/game.js owns the original RPG scene. The film and demonstration TV render it using the film clock. The film's six game vignettes share pure poses in ../assets/games.js. ../assets/activities.js composes the homepage's RPG, drawing, photos and movie from shared artwork. Its standalone SVG embeds sampled CSS at five seconds per activity, and also serves as the README image. The build tool removes repeated samples during holds. After changing the artwork, run node scripts/update-website-hero.mjs from the repository root; --check detects an out-of-date hero. Its #still fragment and the system reduced-motion preference disable the loop.

The poster waits for an explicit play action. System reduced-motion preferences keep a still preview, with manual playback available. System colour preference styles the surrounding page; the film retains its authored colours. The homepage and film carry explicit language/theme choices through their links. No cookies, external fonts, analytics or new runtime dependencies are used.

Recording

  1. Open the standalone film in the desired language, start playback and select fullscreen. Normal fullscreen keeps playback and exit controls available. Press C to hide or restore controls for recording.
  2. Capture browser video and audio at 1920 × 1080, 60 fps. Press R to restart from the first frame; Space pauses and M toggles sound. Switching away from the page pauses playback.
  3. Press Escape to leave the clean view. Retain the music attribution in the end card and in the published recording's description.

Music

“Funkorama” by Kevin MacLeod (incompetech.com), under CC BY 4.0. The excerpt uses the opening 76.039604 seconds (32 bars), fading out over the last two beats from 74.851485 seconds. At bar 29, the download banner enters over the existing brand and living room. Its link uses the homepage's platform downloads; the mascot uses the loading screen's repeating wink and gold sparkles. The asset notice retains source, attribution and modification details. The music keeps its own license, separate from Piik's MIT license.

To reproduce the audio edit from the linked original:

ffmpeg -i Funkorama.mp3 -vn -t 76.039604 \
  -af afade=t=out:st=74.851485:d=1.188119 \
  -c:a libmp3lame -b:a 160k -map_metadata -1 funkorama.mp3

Focused check

Open a fresh local film page in a named agent-browser session and run agent-browser --session <session> click '#language' to grant the user gesture required by native audio. Then evaluate scripts/check-website-film.js using agent-browser --session <session> eval --stdin. The browser check covers lazy audio, playback/seek/replay, language links, obsolete play promises, native media pause, audio failure/ending, bilingual headline bounds, unobscured scenario objects, cursor continuity/reverse seeking and the standalone hero's CSS poses against the shared game score. Visual acceptance still requires watching the complete film, checking both languages, narrow layouts and the clean recording view.