fix: theme the pip placeholder (no more black void) - #36
Merged
Conversation
The layer left inline while playback runs in the document picture-in-picture window painted a hardcoded black fill with light copy, so it stayed a black rectangle on a light page no matter what chromeTheme said. Its colors are now tokens (--kino-pip-fill, --kino-pip-card, --kino-pip-card-border, --kino-pip-text, --kino-pip-text-hover, --kino-pip-sub) that the data-kino-theme="light" block overrides, and the "playing in picture in picture" affordance moves into a small card so it reads as a panel rather than an empty frame on a light surface. Dark values are unchanged. --kino-pip-fill stays a literal opaque color rather than --kino-bg: the master media keeps playing underneath the placeholder, so a transparent fill would show it through.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
kino | d7c893c | Commit Preview URL Branch Preview URL |
Jul 24 2026, 05:57 PM |
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.
Fixes the black placeholder reported in karnstack/karnstack#149.
What was wrong
mountPipPlaceholdermounts the layer shown inline where the stage was while playback runs in the document picture-in-picture window. Its rule hardcodedbackground: blackwith light copy, so on a light page (chromeTheme="light") the video frame turned into a black rectangle for the whole pip session.The fix
--kino-pip-fill,--kino-pip-card,--kino-pip-card-border,--kino-pip-text,--kino-pip-text-hover,--kino-pip-sub. Dark defaults are the values that shipped; thedata-kino-theme="light"block overrides all six..kino-pip-placeholder-card), so on a light fill it reads as a panel instead of an empty frame.--kino-pip-fillis a literal opaque color, not--kino-bg. The master media keeps playing underneath the placeholder, so a host that sets--kino-bg: transparentwould otherwise see the still-playing stage through it. Hosts that want a different opaque fill can override the token.Verification
pnpm test(204 passing),pnpm typecheck,pnpm lint,pnpm format:check.dist/styles.cssin a browser (dark fill unchanged, light fill is a themed surface with dark copy).Not in scope
The pip window itself still hardcodes a black body background and dark controls in
mountPipOverlay; the chrome theme is not plumbed into the provider today. Worth a follow-up if light-theme pip windows should match.