import { listen } from './dom' ; import { isFunction , isUndefined , noop } from './unit' ; export type WebKitPresentationMode = 'picture-in-picture' | 'inline' | 'fullscreen' ; declare global { interface Document { readonly pictureInPictureEnabled ? : boolean ; } interface Window { readonly safari ? : boolean ; readonly chrome ? : boolean ; } interface HTMLMediaElement { captureStream ? ( ) : MediaStream ; } interface HTMLVideoElement { readonly disablePictureInPicture ? : boolean ; readonly webkitDisplayingFullscreen ? : boolean ; readonly webkitSupportsFullscreen ? : boolean ; readonly webkitWirelessVideoPlaybackDisabled ? : boolean ; readonly webkitPresentationMode ? : WebKitPresentationMode ; webkitEnterFullscreen ? ( ) : void ; webkitExitFullscreen ? ( ) : void ; webkitSupportsPresentationMode ? ( mode ) : boolean ; webkitSetPresentationMode ? ( mode ) : Promise < void > ; } } export const IS_CLIENT = typeof window !== 'undefined' ; export const UA = IS_CLIENT ? window . navigator ?. userAgent . toLowerCase ( ) : '' ; export const IS_IOS = /iphone|ipad|ipod|ios|CriOS|FxiOS/ . test ( UA ) ; export const IS_ANDROID = /android/ . test ( UA ) ; export const IS_MOBILE = IS_CLIENT && ( IS_IOS || IS_ANDROID ) ; export const IS_IPHONE = IS_CLIENT && /(iPhone|iPod)/gi . test ( window . navigator ?. platform ) ; export const IS_FIREFOX = /firefox/ . test ( UA ) ; export const IS_CHROME = IS_CLIENT && window . chrome ; export const IS_SAFARI = IS_CLIENT && ! IS_CHROME && ( window . safari || IS_IOS || /(apple|safari)/ . test ( UA ) ) ; export const ORIGIN = window . location . protocol !== 'file:' ? `${ window . location . protocol }//${ window . location . hostname }` : undefined ; export const onMobileChange = ( callback ) : ( ( ) => void ) => { if ( ! IS_CLIENT || isUndefined ( window . ResizeObserver ) ) { callback ( IS_MOBILE ) ; return noop ; } function onResize ( ) { callback ( window . innerWidth <= 480 || IS_MOBILE ) ; } callback ( window . innerWidth <= 480 || IS_MOBILE ) ; return listen ( window , 'resize' , onResize ) ; } ; export const onTouchInputChange = ( callback ) : ( ( ) => void ) => { if ( ! IS_CLIENT ) return noop ; let lastTouchTime = 0 ; const offTouchListener = listen ( document , 'touchstart' , ( ) => { lastTouchTime = new Date ( ) . getTime ( ) ; callback ( true ) ; } , true ) ; const offMouseListener = listen ( document , 'mousemove' , ( ) => { if ( new Date ( ) . getTime ( ) - lastTouchTime < 500 ) return ; callback ( false ) ; } , true ) ; return ( ) => { offTouchListener ( ) ; offMouseListener ( ) ; } ; } ; see https export const canFullscreenVideo = ( ) : boolean => { if ( ! IS_CLIENT ) return false ; const video = document . createElement ( 'video' ) ; return isFunction ( video . webkitEnterFullscreen ) ; } ; see https export const canRotateScreen = ( ) : boolean => IS_CLIENT && window . screen . orientation && ! ! window . screen . orientation . lock ; see https export const isReducedMotionPreferred = ( ) : boolean => IS_CLIENT && 'matchMedia' in window && window . matchMedia ( '(prefers-reduced-motion)' ) . matches ; /**
 * Checks if the native HTML5 video player can play HLS.
 */ export const canPlayHLSNatively = ( ) : boolean => { if ( ! IS_CLIENT ) return false ; const video = document . createElement ( 'video' ) ; return video . canPlayType ( 'application/vnd.apple.mpegurl' ) . length > 0 ; } ; see https export const canUsePiPInChrome = ( ) : boolean => { if ( ! IS_CLIENT ) return false ; const video = document . createElement ( 'video' ) ; return ! ! document . pictureInPictureEnabled && ! video . disablePictureInPicture ; } ; see https export const canUsePiPInSafari = ( ) : boolean => { if ( ! IS_CLIENT ) return false ; const video = document . createElement ( 'video' ) ; return ( isFunction ( video . webkitSupportsPresentationMode ) && isFunction ( video . webkitSetPresentationMode ) && ! IS_IPHONE ) ; } ; export const canUsePiP = ( ) : boolean => canUsePiPInChrome ( ) || canUsePiPInSafari ( ) ; see https export const canAutoplay = ( muted = true , playsinline = true ) : Promise < boolean > => { if ( ! IS_CLIENT ) return Promise . resolve ( false ) ; const video = document . createElement ( 'video' ) ; if ( muted ) { video . setAttribute ( 'muted' , '' ) ; video . muted = true ; } if ( playsinline ) { video . setAttribute ( 'playsinline' , '' ) ; video . setAttribute ( 'webkit-playsinline' , '' ) ; } video . setAttribute ( 'height' , '0' ) ; video . setAttribute ( 'width' , '0' ) ; video . style . position = 'fixed' ; video . style . top = '0' ; video . style . width = '0' ; video . style . height = '0' ; video . style . opacity = '0' ; new Promise ( resolve => resolve ( video . play ( ) ) ) . catch ( noop ) ; return Promise . resolve ( ! video . paused ) ; } ;