useDocumentPiP

v0.0.15testeddemo

Reactive wrapper around the [Document Picture-in-Picture API](https://developer.mozilla.org/en-US/docs/Web/API/DocumentPictureInPicture) for rendering arbitrary DOM in an always-on-top window.

Source Tests

Examples

const { isSupported, pipWindow, open } = useDocumentPiP();
async function popOut(content: HTMLElement) {
  const win = await open({ width: 320, height: 240 });
  win?.document.body.append(content);
}

// Move a player into the PiP window and track open state
const { isOpen, pipWindow, open, close } = useDocumentPiP();
watchEffect(() => {
  if (pipWindow.value)
    pipWindow.value.document.body.append(playerEl);
});

Demo

Loading demo…

Signature

export function useDocumentPiP(options: UseDocumentPiPOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`options`?	`UseDocumentPiPOptions`	`{}`	Options

Returns

UseDocumentPiPReturn`isSupported`, `pipWindow`, `isOpen`, `error`, `open()`, and `close()`