AAA
d92de28e83
## Problem and outcome At 260–300px viewport widths, the playback audio group could shrink below its controls and overlap the window buttons. The shared flex layout now respects each group's minimum content width and wraps only when the groups cannot fit. Ordinary phone layouts remain on one row. The change also removes the unnecessary macOS-specific troubleshooting section added in v1.5.4 and updates the playback layout contract. ## Validation - `npm run check`: TypeScript, 71 test files / 1003 tests, and the production Web build passed with the interaction prototype excluded. - Documentation checks, repository hygiene and the complete website/documentation build passed. - Browser geometry checks at 260, 300, 320, 375, 440, 480, 768 and 1280px found no overlapping or clipped controls. Viewports from 320px retained one row. ## Release notes ### 中文 这是一个小修复版本，解决极窄窗口中播放控件重叠、容易误触的问题。 #### 修复 - 播控优先保持单行，音量滑条随可用空间缩短；空间不足时，音量与窗口操作分组换行，保留全部控件。 - 精简排查文档，移除上版多余的 macOS 音频专项说明，保留通用排查入口。 #### 更新说明 更新 App 或已部署站点后刷新页面即可。通信协议、配置和存储格式保持兼容。 ### English This small maintenance update fixes overlapping playback controls in very narrow windows. #### Fixes - Playback controls prefer one row and shorten the volume slider to fit. When space runs out, the audio and window controls wrap as separate groups, keeping every control accessible. - Removed the unnecessary macOS-specific audio troubleshooting section added in the previous release; general troubleshooting remains available. #### Updating Update the App or your deployed site, then refresh the page. Wire protocols, configuration and storage formats remain compatible.
Piik Documentation
About Piik · 中文介绍 · 中文上手指南
For using Piik, troubleshooting or self-hosting, start with the reader documentation · 中文文档中心. This page also indexes developer and maintainer references.
Guides And References
| Task | Guide |
|---|---|
| Use Piik online | Open the online site · Online sharing guide |
| Watch a friend or share my first screen | Getting started |
| Choose an App mode or fix sound and connection trouble | First-use help |
| Page opens but video will not connect / 网页能打开，画面连不上 | Connection troubleshooting · 中文排查 |
| Run Piik App, check platform requirements, or build a package | App guide · 中文 App 指南 |
| Try or change the source code | Run from source |
| Find a directory or the module responsible for a behavior | Repository layout and module map |
| Find the shared product, design and lifecycle rules | Standards index |
| Host a site for my group | Self-hosting · 中文部署 |
| Keep a server running with systemd or Docker | Service management · 中文服务管理 |
| Set passwords, ports, or room storage | Configuration |
| Update my server | Server updates |
| Build, publish or recover a maintained release | Maintainer release tooling |
| Send a useful bug report | Diagnostics and export |
| Translate Piik or improve wording | Translation guide · 中文翻译教程 |
| Check release and platform readiness | Current status |
The introduction, getting-started, App, self-hosting, service-management and translation guides are available in English and Chinese. Technical references keep one shared version.
Run from source
You can try the Browser application locally with Node from .node-version, npm from package.json, and Go 1.26 from go.mod. Run these commands from the repository root.
Start the web UI:
npm ci
npm run dev
In a second terminal, start the server. For a POSIX shell:
PORT=8788 PUBLIC_BASE_URL=http://localhost:8787 go run ./cmd/piik-server
Or in PowerShell:
$env:PORT = '8788'
$env:PUBLIC_BASE_URL = 'http://localhost:8787'
go build -o build/dev/piik-server.exe ./cmd/piik-server
./build/dev/piik-server.exe
The fixed Windows executable path avoids repeated firewall prompts from go run.
Open localhost:8787, start sharing, and open the invitation
in another browser tab to try watching. This localhost invitation stays on your
computer; remote invitations need a reachable origin as described in
configuration.
Browser capture requires localhost or HTTPS.
For the self-contained App, follow App development and packaging, including the platform's native capture requirements.
Work on Piik
Contributing covers the workflow and choosing focused checks. The main verification commands are:
npm run check
npm run check:go
Use the naming and copy guide for product names, commands, role labels and Chinese/English voice. Piik-owned code uses MIT; see the licensing guide for third-party components.
For the public website, see the introduction design and website preview and publishing.
Understand the product
| Topic | Its reference |
|---|---|
| Invitations, room codes and passwords | Rooms and access |
| How viewers connect | Routing and transport |
| Screen capture, quality controls and sound | Media quality |
| Host and viewer behavior | Presentation and lifecycle |
| Why a design was chosen | Architecture decisions |
| Measurements and platform limits | Research and verification status |
Shared conventions
| When changing… | Follow this owner |
|---|---|
| Module responsibilities or interfaces | Engineering and contract map |
| Product/tool names, role labels or copy | Naming and copy |
| UI colour, illustration, motion or layout | Visual language |
| Overlays, titles or state indicators | Media status |
| Releases, protocols or stored formats | Versions and compatibility |
| Main protection or automatic publishing | GitHub operations |
| Documentation or a duplicated rule | Documentation ownership |
| Checks, PRs, integration or cleanup | Contributing |
For ongoing work, use TODO. Project memory provides the compact product map; status indexes current source and deployment boundaries. Completed work lives in Git history and pull requests.