Skip to content

feat: seer drawer pictureInPicture#116670

Draft
TkDodo wants to merge 10 commits into
masterfrom
tkdodo/feat/seer-drawer-pip
Draft

feat: seer drawer pictureInPicture#116670
TkDodo wants to merge 10 commits into
masterfrom
tkdodo/feat/seer-drawer-pip

Conversation

@TkDodo
Copy link
Copy Markdown
Collaborator

@TkDodo TkDodo commented Jun 2, 2026

This PR allows popping out the seer drawer into a picture-in-picture window using the document picture in picture API

@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jun 2, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 2, 2026

📊 Type Coverage Diff

✅ No new type safety issues introduced. Coverage: 93.59%

Copy link
Copy Markdown
Member

@natemoo-re natemoo-re left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

Comment on lines +62 to +64
const nodes = source.querySelectorAll<HTMLLinkElement | HTMLStyleElement>(
'link[rel="stylesheet"], style'
);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any particular reason not to use CSSOM here? Not sure if we can tell what comes from emotion there.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm also not seeing Rubik loading, maybe we need to copy that resource over too?

Comment on lines +74 to +77
.then(() => closeDrawer())
.catch(() => {
// Failed to open the PiP window — keep the drawer open.
});
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice to sync the width back to drawerWidth on close here

const drawerWidth = rootRef.current?.getBoundingClientRect().width;
requestPipWindow({
width: drawerWidth ? Math.round(drawerWidth) : 480,
height: Math.round(window.innerHeight * 0.9),
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm seeing the PIP window height constrained to a max height? Unclear if this is just how Chrome implements the popout window?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants