vlitejs/dist/plugins/pip.js

vLitejs is a fast and lightweight Javascript library for customizing video and audio player in Javascript with a minimalist theme (HTML5, Youtube, Vimeo, Dailymotion)

/*!
 * @license MIT
 * @name vlitejs
 * @version 7.4.0
 * @copyright 2025 Yoriiis
 */
class e{constructor({player:e}){this.providers=["html5"],this.types=["video"],this.player=e,this.onClickOnPipButton=this.onClickOnPipButton.bind(this),this.onEnterPip=this.onEnterPip.bind(this),this.onLeavePip=this.onLeavePip.bind(this)}init(){this.isPipApiAvailable()&&this.player.options.controls&&(this.render(),this.pipButton=this.player.elements.container.querySelector(".v-pipButton"),this.addEvents())}isPipApiAvailable(){return"pictureInPictureEnabled"in document&&!this.player.media.hasAttribute("disablePictureInPicture")}render(){const e='<button class="v-pipButton v-controlButton"><svg viewBox="0 0 22 18" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h-8v6h8V8Zm-2 4h-4v-2h4v2Zm4-12H2C.9 0 0 .88 0 1.98V16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V1.98C22 .88 21.1 0 20 0Zm0 16.02H2V1.97h18v14.05Z"/></svg></button>',t=this.player.elements.container.querySelector(".v-controlBar"),i=this.player.elements.container.querySelector(".v-fullscreenButton");t&&(i?i.insertAdjacentHTML("beforebegin",e):t.insertAdjacentHTML("beforeend",e))}addEvents(){this.pipButton.addEventListener("click",this.onClickOnPipButton),this.player.media.addEventListener("enterpictureinpicture",this.onEnterPip),this.player.media.addEventListener("leavepictureinpicture",this.onLeavePip)}async onClickOnPipButton(e){e.preventDefault();try{this.player.media!==document.pictureInPictureElement?await this.player.media.requestPictureInPicture():await document.exitPictureInPicture()}catch(e){console.warn(`vlitejs :: ${e}`)}}onEnterPip(){this.player.dispatchEvent("enterpip")}onLeavePip(){this.player.dispatchEvent("leavepip")}destroy(){this.pipButton.removeEventListener("click",this.onClickOnPipButton),this.player.media.removeEventListener("enterpictureinpicture",this.onEnterPip),this.player.media.removeEventListener("leavepictureinpicture",this.onLeavePip)}}export{e as default};