ytptube/ui/app/utils/fullscreen.ts

53 lines
1.7 KiB
TypeScript

type FullscreenCapableElement = HTMLElement & {
webkitRequestFullscreen?: () => Promise<void> | void;
};
type FullscreenCapableDocument = Document & {
webkitFullscreenElement?: Element | null;
webkitExitFullscreen?: () => Promise<void> | void;
};
export function getFullscreenElement(doc: Document = document): Element | null {
const fullscreenDocument = doc as FullscreenCapableDocument;
return fullscreenDocument.fullscreenElement || fullscreenDocument.webkitFullscreenElement || null;
}
export function canRequestFullscreen(
element: HTMLElement | null | undefined,
): element is HTMLElement {
return Boolean(
element &&
(typeof element.requestFullscreen === 'function' ||
typeof (element as FullscreenCapableElement).webkitRequestFullscreen === 'function'),
);
}
export async function requestElementFullscreen(element: HTMLElement): Promise<void> {
const fullscreenElement = element as FullscreenCapableElement;
if (typeof fullscreenElement.requestFullscreen === 'function') {
await fullscreenElement.requestFullscreen();
return;
}
if (typeof fullscreenElement.webkitRequestFullscreen === 'function') {
await fullscreenElement.webkitRequestFullscreen();
return;
}
throw new Error('Fullscreen API unavailable');
}
export async function exitDocumentFullscreen(doc: Document = document): Promise<void> {
const fullscreenDocument = doc as FullscreenCapableDocument;
if (typeof fullscreenDocument.exitFullscreen === 'function') {
await fullscreenDocument.exitFullscreen();
return;
}
if (typeof fullscreenDocument.webkitExitFullscreen === 'function') {
await fullscreenDocument.webkitExitFullscreen();
return;
}
throw new Error('Fullscreen API unavailable');
}