use-picture-in-picture
Feature for toggling Picture-in-Picture mode.
Installation
npx shadcn add @limeplay/use-picture-in-pictureRegister the feature:
"use client"
import { pictureInPictureFeature } from "@/hooks/limeplay/use-picture-in-picture"
createMediaKit({
features: [..., pictureInPictureFeature()] as const,
})Store
Access via usePictureInPictureStore(selector):
import { usePictureInPictureStore } from "@/hooks/limeplay/use-picture-in-picture"
const active = usePictureInPictureStore(s => s.active)
const supported = usePictureInPictureStore(s => s.supported)
const toggle = usePictureInPictureStore(s => s.toggle)State
| Field | Type | Description |
|---|---|---|
active | boolean | Whether PiP is currently active |
supported | boolean | Whether browser supports PiP |
Actions
| Method | Description |
|---|---|
enter() | Enter PiP mode |
exit() | Exit PiP mode |
toggle() | Toggle PiP on/off |
Browser Support
PiP API is not natively supported in Firefox. The supported field will be false on unsupported browsers. Reference
Events
| Event | Payload | When |
|---|---|---|
enterpictureinpicture | — | Enters PiP mode |
leavepictureinpicture | — | Leaves PiP mode |