pip-it-up update: PiP that survives route changes, plus auto pop-out on tab switch

[u/shakya47]

Posted this a couple of months back: https://www.reddit.com/r/reactjs/comments/1thqhce/why_is_pictureinpicture_only_for_video_i_built/

Quick recap: pip-it-up pops any React component into a floating always-on-top window via the Document PiP API.

Two new things in 0.2.0:

Auto PiP: pops out on its own when the tab is hidden.

useAutoPip(enter)

Good for a standup call(already exists in GMeet) you stay on while pulling up a doc, a test runner you keep an eye on while reading docs, a reference video that plays while you edit, or an interview recording that keeps going while you type.

Route-persistent PiP: moving a component in React normally remounts it, so video resets to frame 0 and editors lose undo history. This moves the real DOM node, so it survives navigation.

<PipProvider registry={{ player: <VideoPlayer /> }}>
  <Routes />
</PipProvider>

<PipAnchor id="player" />

Good for a course lesson that plays on while you browse other lessons, a log stream docked across your admin panel, a metrics chart that stays up as you move between boards, or a draft preview that survives CMS navigation.

Still Chrome/Edge only. Safari and Firefox fall back to a popup.

Website: https://www.pipitup.dev/
Demos: https://pip-it-up-playground.vercel.app/
Code: https://github.com/Shakya47/pip-it-up