8646b51b6c
- MessageInlineVideo (new): custom-controlled inline video that disables
the iOS Safari / Chromium native overlays entirely and reimplements
the essentials: tap-to-play, centered play affordance while paused,
bottom bar with play/pause + current time + drag-to-scrub progress
bar + remaining time + fullscreen. Pointer events with pointer
capture cover both mouse and touch scrubbing, including dragging
past the bar's bounds. The element listens to 'seeked' as well as
'timeupdate' so external currentTime writes paint the bar even when
the video is paused, and the goFullscreen callback synchronously
syncs React state on close so the inline progress reflects the user's
fullscreen playhead with no perceptible delay.
- VideoBubble: replace the inline <video controls> with
MessageInlineVideo and thread postId through openVideo so the
fullscreen overlay can attach the download pill to the right post.
- VideoPlayer overlay: replace its <video controls> with
MessageInlineVideo size='lg', removing the iOS native arrows / PiP /
mute / overflow controls. The overlay supplies its own large
download pill and a beefier close button.
- AttachmentDownloadPill: new 'size' prop ('sm' default 30 px, 'lg'
44 px with 22 px icon and text-[14px]) for overlay surfaces where
the affordance can breathe and should feel touch-friendly.
- ImageLightbox: drop the inline LightboxDownloadButton and use the
shared AttachmentDownloadPill size='lg' instead, with a matching
larger close button. Unused imports cleaned up.
Arkie Library Frontend
React + Vite frontend for the ARK Library / ARK database site. The app serves public resource browsing, search, favorites, and an optional admin UI for resource management.
Tech stack
- React 18 + TypeScript
- Vite 5
- React Router
- Tailwind CSS
- Gitea Actions deploy workflow on
main
Quick start
npm ci
npm run dev
Local dev server: http://localhost:5173
In development, Vite proxies these paths to the backend at http://127.0.0.1:8080:
/api/uploads
If VITE_API_URL is set, API calls use that absolute base URL instead.
Useful commands
npm run dev # start Vite dev server
npx tsc --noEmit # TypeScript check; CI requires this
npm run format:check # Prettier check; CI requires this
npm run format # format source files
npm test # run Vitest test suite
npm run build # production build to dist/
npm run preview # preview built app locally
Before pushing, run at least:
npx tsc --noEmit
npm run format:check
npm test
Environment variables
Create a local .env only when needed. Do not commit secrets. See .env.example for a template.
| Variable | Purpose |
|---|---|
VITE_API_URL |
API/upload origin. Empty means same-origin and Vite dev proxy handles local /api and /uploads. Production deploy currently uses https://api.ark-library.com. |
VITE_DISABLE_ADMIN |
When set to "true", public build redirects admin routes away. Production public deploy sets this to "true". |
VITE_ADMIN_ONLY |
When set to "true", builds the admin-only app entry instead of the public app. |
VITE_ADMIN_UI_PREFIX |
Optional admin UI base path. If absent in admin-only mode, code uses the secret prefix from src/adminPaths.ts. |
VITE_USE_MOCK_POSTS |
Telegram-style resource stream (/browse, /category/:slug) uses mock posts from src/mocks/mockPosts.ts only when set to "true". Leave unset or set to "false" to hit the real /api/posts API. See .unipi/docs/specs/2026-05-25-posts-api-contract.md. |
Project layout
src/
main.tsx # app entry; switches public vs admin-only build
App.tsx # public app + optional admin routes
AppAdminOnly.tsx # admin-only app entry
api.ts # fetch helpers and shared API types
i18n.tsx # zh-CN / en / ja / ko / vi / id / ms dictionary
adminPaths.ts # admin UI prefix logic
adminRouteTree.tsx # admin routes
components/ # reusable public components
layouts/ # public/admin layout shells
pages/ # public pages
pages/admin/ # admin pages
utils/ # formatting/display helpers
Important config files:
vite.config.ts— Vite build and local backend proxy.tailwind.config.js— ARK color palette and font stack.Dockerfile/nginx.conf— container build and static SPA serving..gitea/workflows/deploy.yml— deploysmainto both frontend servers.
Branch and deploy workflow
mainis the deploy branch. Pushing tomaintriggers.gitea/workflows/deploy.yml.terry-stagingexists as a staging/work branch for later work.- The deploy workflow runs
npm ci,npx tsc --noEmit,npm run format:check,npm test,npm run build, then rsyncsdist/to both frontend servers and verifies matching checksums.
See also:
AGENTS.md— instructions for AI coding agents.docs/workflow.md— recommended day-to-day workflow.docs/deploy.md— deploy details and troubleshooting.