useDocumentPiP

v0.0.14testeddemo

Reactive wrapper around the Document Picture-in-Picture API for rendering arbitrary DOM in an always-on-top window.

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

UseDocumentPiPReturnisSupported, pipWindow, isOpen, error, open(), and close()

Property	Type	Default	Description
`isSupported`	`ComputedRef<boolean>`	—	Whether the Document Picture-in-Picture API is supported
`pipWindow`	`ShallowRef<Window \| null>`	—	The active Picture-in-Picture `Window`, or `null` when none is open
`isOpen`	`ComputedRef<boolean>`	—	Whether a Picture-in-Picture window is currently open
`error`	`ShallowRef<unknown \| null>`	—	The last error thrown by `open()`, or `null`
`open`	`(pipOptions?: DocumentPictureInPictureOptions) => Promise<Window \| undefined>`	—	Open a Picture-in-Picture window. Must be called from a user gesture. Resolves with the new `Window`, or `undefined` when unsupported.
`close`	`() => void`	—	Close the active Picture-in-Picture window, if any