feat: NativePlayer provider + cinema docs site#14
Merged
Conversation
Adds a `native` provider that plays a raw media URL (mp4/webm/ogg) through a plain <video> element behind kino's glass chrome — a peer to the Mux provider, exported from @karnstack/kino/native (NativePlayer / createNativeProvider). No streaming engine, no account; quality switching hides itself when there are no renditions. Supports posters, sidecar caption tracks, playback-rate persistence across source swaps, PiP, fullscreen, and OS media keys. Rebuilds the demo from a single-page playground into a multi-page docs site in a "cinema" visual direction (warm near-black, film-leader amber, Fraunces display): Overview, Providers, Theming, and Install & API pages with sidebar nav, a provider-aware live PlayerStudio, Shiki-highlighted code blocks, and a package-manager tab bar. Refreshes the README banner and screenshot. - src/native: provider, NativePlayer component, tests; /native entry + export - src/util/platform: shared detectIOS (extracted from mux/urls) - demo: router, shell, four pages, cinema design system, dev-only Shiki - assets: new amber banner + docs screenshot (rounded corners) - wrangler: single-page-application fallback for client-side routing Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
kino | 73b412c | Commit Preview URL Branch Preview URL |
Jun 28 2026, 08:10 AM |
- swapSource refreshes the OS media-session title (extract setSessionMetadata, reused by setup + swap) so a source change no longer leaves a stale title - NativePlayer effect depends on the primitive metadata.videoTitle so a title-only change propagates without re-swapping every render; document which props are reactive vs mount-only - detectIOS now catches iPadOS desktop-mode (Macintosh UA + maxTouchPoints); both providers pass navigator.maxTouchPoints (backward-compatible default 0) - tests: default-track selection, no-default null, rate survives swap, iPad detection Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two cohesive pieces of work from one session:
nativeprovider — play a raw media URL (mp4/webm/ogg) through a plain<video>element behind kino's glass chrome.Native provider
A peer to the Mux provider, exported from
@karnstack/kino/native:createNativeProvider/NativePlayer/NativeProviderOptions/NativeTextTrack.detectIOSextracted tosrc/util/platform.tsand shared with the Mux provider.provider.test.ts(10 tests); ships asdist/native.js(~10 kB, gzip 3.1 kB) with no@mux/mux-videopulled in.Docs site (demo)
Multi-page docs site — Overview, Providers, Theming, Install & API — with sidebar nav, a mobile nav drawer, and a footer. Cinema direction: warm near-black, film-leader amber + countdown red, Fraunces display over Geist / Geist Mono.
wrangler.jsoncgets a single-page-application fallback for deep links.Verification
pnpm test— 56 passedpnpm typecheck·pnpm lint·pnpm format:check— cleanpnpm build(library) andvite build(demo) — cleanNotes
minor): the native provider.src/doesn't import it).🤖 Generated with Claude Code