UNPKG

v-pip

Version:

Vue wrapper for native picture-in-picture (PiP)

7 lines (6 loc) 2.53 kB
(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.VPip={},o.vue))})(this,function(o,e){"use strict";/*! * v-pip v3.2.0 * (c) 2024 Vinayak Kulkarni * @license MIT */const c=e.defineComponent({name:"VPip",props:{videoOptions:{type:Object,required:!1,default:()=>({wrapper:"",src:"",poster:"",class:"",height:"100%",width:"100%"})},buttonOptions:{type:Object,required:!1,default:()=>({wrapper:"",type:"button",class:"",label:"Toggle picture-in-picture"})},wrapper:{type:String,default:"",required:!1}},emits:["video-in-pip","requesting-pip-failure","exiting-pip-failure"],setup(t,{emit:n}){const i=e.reactive({video:null,isPipSupported:!1});e.onMounted(()=>{i.isPipSupported="pictureInPictureEnabled"in document,i.video?.addEventListener("enterpictureinpicture",r),i.video?.addEventListener("leavepictureinpicture",s)}),e.onBeforeUnmount(()=>{i.video?.removeEventListener("enterpictureinpicture",s),i.video?.removeEventListener("leavepictureinpicture",s)});const r=()=>{n("video-in-pip",!0)},s=()=>{n("video-in-pip",!1)};return{state:i,togglePip:()=>{const{pictureInPictureElement:p,exitPictureInPicture:h}=document;!p&&i.video?i.video.requestPictureInPicture().catch(l=>{n("requesting-pip-failure",l)}):h().catch(l=>{n("exiting-pip-failure",l)})}}}}),u=(t,n)=>{const i=t.__vccOpts||t;for(const[r,s]of n)i[r]=s;return i},f=["src","poster","height","width"],m=["type"];function g(t,n,i,r,s,P){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(t.wrapper)},[e.createElementVNode("div",{class:e.normalizeClass(t.videoOptions.wrapper)},[e.createElementVNode("video",{ref:"video",src:t.videoOptions.src,poster:t.videoOptions.poster,class:e.normalizeClass(t.videoOptions.class),height:t.videoOptions.height,width:t.videoOptions.width,controls:""},null,10,f)],2),e.createElementVNode("div",{class:e.normalizeClass(t.buttonOptions.wrapper)},[t.state.isPipSupported?(e.openBlock(),e.createElementBlock("button",{key:0,type:t.buttonOptions.type,class:e.normalizeClass(t.buttonOptions.class),onClick:n[0]||(n[0]=(...p)=>t.togglePip&&t.togglePip(...p))},e.toDisplayString(t.buttonOptions.label),11,m)):e.createCommentVNode("",!0)],2)],2)}const a=u(c,[["render",g]]);let d=!1;const v=t=>{d||(t.component("VPip",a),d=!0)};o.VPip=a,o.default=v,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); //# sourceMappingURL=v-pip.umd.cjs.map