AAA
799d6efb4a
## 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.
9.4 KiB
Public introduction
This file owns the website and README content structure. The visual language owns their shared illustration and motion.
One story, three readers
Lead with friends sharing something worth seeing: a game, a drawing, a film or travel photos. The copy guide owns Chinese/English voice and role labels. A visitor should understand what Piik does, choose an entry and complete the first useful action.
| Surface | Reader's question | Content |
|---|---|---|
| README, English and Chinese | What is this, and how do I start? | Brand introduction and interface preview, features, getting started, self-hosting, contribution and license |
site/, for GitHub Pages |
What does using it feel like, and how do I start? | Room illustration and primary download link, illustrated steps, demo/App/existing-site walkthroughs, FAQ, platform downloads, documentation and source |
| Getting-started guides | Which button or mode do I use? | Browser invitation, sharing, App setup and three mode choices |
| Self-hosting guides | How do I put my own site online? | Run the binary, set the domain and HTTPS proxy, open ports and verify; service management remains a separate reference |
| Developer and operations docs | How do I build or host it? | Existing configuration, deployment, architecture and diagnostic owners |
The documentation map is the Wiki-style entry. Link it from the website navigation and footer, with direct self-hosting, configuration and update/recovery links in the documentation section. Keep the guides in this repository; do not maintain a second GitHub Wiki copy of the same instructions.
Presentation
Keep three presentation responsibilities distinct:
| Layer | Owns | Review question |
|---|---|---|
| Shared identity | Mascot geometry and wink, gold sparkle, wordmark/orange dot, public-page brand control | Does this read as the same Piik at every size and entry? |
| Product demonstration | Actual components, labels, source selection, room controls and participants with sample data | Does the pictured action still match the current product? |
| Promotional composition | Original scenery, large typography, framing, transitions and optional music | Does the spectacle help a newcomer understand the product and find the next action? |
Use one public-page brand component for the homepage and film. The mascot's curved wink and gold sparkle are recognizable features; a prop or a pictured game does not replace its face with another expression. Original RPG scenery can suggest exploration through terrain, ruins and small discoveries without borrowing another product's characters, named places, logos or artwork.
Homepage sections follow the visitor's decisions: understand Piik and find the primary download action, see the sharing steps, choose a short tutorial, resolve questions, then find platform downloads, detailed documentation and source. The primary download link lets returning visitors skip the tutorials. Guide choices run from online demo to App to an existing site, with only the demo expanded initially. Watching requires no installation. Explain where an existing site comes from; mark self-hosting as advanced and link its complete guide. Platform download cards share one App tutorial entry. Keep section navigation available on phones rather than hiding the only route to documentation. The film can use bolder composition, but must show real operations and concrete benefits before its closing action. The copy guide owns technical disclosure; a dramatic heading does not exempt copy from it.
Review whole Chinese phrases, English meaning and adjacent number labels in finished frames, not just the source string. Recheck the smallest viewport and both languages when changing a title or its timing. Keep enough still time to read it; do not solve overflow by shrinking an important caption beyond legibility.
Use the shared visual language for cast, objects, accessible interaction and motion. This document owns the website's editorial layout and introduction, not a separate product-status vocabulary.
Each section needs one reader question, evidence that answers it and a clear next action. A scene should demonstrate one action or benefit before changing the topic. Keep decorative words and transitions away from control labels and the primary action; sound and motion must not carry essential instructions alone. Gameplay reactions follow a visible result: establish the action, show its success, then celebrate. Keep enough of the play visible to make the reaction understandable; a genre label or a score burst does not replace the action.
Use mint walls, clear control edges, a warm orange/yellow sofa and the curious TV mascot. The site is a welcoming room, not a monitoring dashboard. Keep one primary action, native navigation and short instructions. Language and theme follow the system unless explicitly changed; unsupported languages use English. Respect reduced motion and retain useful content without JavaScript.
The room illustration cycles through four distinct uses: an RPG, drawing, travel photos and a movie. Treat coding and design as creative work rather than proliferating overlapping examples. The host holds a gamepad during the game; the role badge identifies the host independently of the activity. Keep participant drawings consistent across the site, READMEs, interface captures and tooltip/status comics.
Present Piik as an open-source project: plain explanations, room for tinkering, and an invitation to contribute. Keep the friendly illustration and avoid company-style pitches, repeated slogans or claims about a support team. The short comics illustrate choosing, inviting and joining, following the shared motion grammar and whole-control replay rule. The optional film starts only after an explicit action and has native buttons and a seek slider. Open it within the homepage, loading its single player on demand; closing it unloads playback. Keep one homepage playback entry; the player document also supports local recording. Fullscreen watching keeps touch controls available; hiding them is an explicit recording action. Both READMEs share the friendly opening and room illustration. Their feature, limitation and setup sections use the factual register in the copy guide.
Use a consistent README structure: a distinct brand opening, bold headings and key phrases, regular explanatory text, quiet captions and optional detail. Use images and short demonstrations to explain different things rather than filling space. Keep essential setup and availability in readable text, and distinguish generated demo content from a real captured workload. GitHub-native Markdown/HTML must remain useful on mobile and in both themes without custom CSS.
The product UI remains mascot-only. On the website, keep the header's TV mascot before the Piik name. The wordmark and mascot do not transform into one another. Match the product's playful style through the mascot's wink and short comic interactions. An original room illustration is shared by the site and READMEs. Interface previews use generated scenes and sample participants. Keep private invitations, user identities and personal media out of published assets; no external fonts or tracking are needed.
Small implementation
The website and film initially follow the browser's primary language: Chinese uses Chinese copy, and other languages use English. An explicit language choice is shared between these two pages and remembered; linked language choices take precedence when following a link.
Use static HTML, CSS, SVG and small scripts for the public pages; no router, CMS, translation dependency or new application backend. The film's isolated demonstration frame bundles the existing React product components and styles, using staged inputs. It cannot access storage, run capture or contact the room service. The film clock owns its actions and decorative CSS animation positions. Rebuilding the site picks up component/style/copy changes; changes to the actual workflow still require reviewing the sequence and camera framing. Do not replace shared controls with a second hand-drawn UI or retain obsolete screenshot plates. The existing App/Web continues to own sharing. The homepage explains it rather than simulating a second room authority. Public copies of advanced product/research documents are not automatically included in the website artifact.
The website operations guide owns Pages publication, public destinations and the separate P2P-only demo. The primary action leads to the platform download section. The website operations guide owns each platform's latest download routes and provider labels. Link release notes separately and verify destinations as part of publication. Demo, App and existing-site walkthroughs use real action names and explain the first sharing and viewing steps. Keep platform requirements and connection limitations beside the relevant steps.
Review boundary
Review desktop/mobile, English/Chinese, light/dark, keyboard navigation, reduced motion, no JavaScript and a nested project URL. Check links, accurate platform/connection claims and a single copy of each responsibility. Remove decorative controls or code that do not improve understanding. This is a public introduction overhaul, not an excuse to change configuration or media policy.