Skip to content

Instantly share code, notes, and snippets.

@Rendez
Last active September 24, 2023 03:24
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Rendez/6e088e8713f47e87ab04efcc22f365b1 to your computer and use it in GitHub Desktop.
Save Rendez/6e088e8713f47e87ab04efcc22f365b1 to your computer and use it in GitHub Desktop.
TypeScript types for the Picture-in-Picture feature of the Document and the video tag
interface PictureInPictureResizeEvent extends Event {
readonly target: PictureInPictureWindow;
}
interface PictureInPictureWindow {
readonly width: number;
readonly height: number;
onresize(this: PictureInPictureWindow, ev: PictureInPictureResizeEvent): void;
addEventListener(
type: 'resize',
listener: EventListenerOrEventListenerObject,
options?: boolean | AddEventListenerOptions
): void;
removeEventListener(
type: 'resize',
listener: EventListenerOrEventListenerObject,
options?: boolean | EventListenerOptions
): void;
}
interface PictureInPictureEvent extends Event {
readonly pictureInPictureWindow: PictureInPictureWindow;
}
type PictureInPictureEventListener = ((this: HTMLVideoElement, ev: PictureInPictureEvent) => any) | null;
interface HTMLVideoElement {
autoPictureInPicture: boolean;
disablePictureInPicture: boolean;
requestPictureInPicture(): Promise<PictureInPictureWindow>;
onenterpictureinpicture: PictureInPictureEventListener;
onleavepictureinpicture: PictureInPictureEventListener;
}
interface Document {
readonly pictureInPictureEnabled: boolean;
exitPictureInPicture(): Promise<void>;
}
interface DocumentOrShadowRoot {
readonly pictureInPictureElement: HTMLVideoElement | null;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment