vue-pip/dist/vue-pip.umd.cjs

This is a simple utility package for document picture in picture

(function(t,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(t=typeof globalThis<"u"?globalThis:t||self,t["vue-pip"]=l(t.Vue))})(this,function(t){"use strict";const l=async(i,o)=>{const c=e=>new Promise((d,s)=>{const r=i.document.createElement("script");r.src=e,r.onload=()=>d(),r.onerror=()=>s(new Error(`Failed to load script: ${e}`)),i.document.head.appendChild(r)});try{await Promise.all(o.map(c))}catch(e){console.warn("Error loading CDN scripts:",e)}},u=i=>{[...document.styleSheets].forEach(o=>{try{const c=[...o.cssRules].map(d=>d.cssText).join(""),e=document.createElement("style");e.textContent=c,i.document.head.appendChild(e)}catch(c){console.warn("Error copying styles: ",c);const e=document.createElement("link");e.rel="stylesheet",e.type=o.type,e.media=o.media.toString(),e.href=o.href??"",i.document.head.appendChild(e)}})};return t.defineComponent({__name:"DocumentPIP",props:{size:{},mode:{default:"transfer"},copyAllStyles:{type:Boolean,default:!0},isPipOpen:{type:Boolean},cdnScripts:{},disallowReturnToOpener:{type:Boolean,default:!1},preferInitialWindowPlacement:{type:Boolean,default:!1}},emits:["onClose"],setup(i,{emit:o}){const c="documentPictureInPicture"in window,e=i,d=o,s=t.ref(null),r=t.computed(()=>s.value?.document.getElementById("pip-root")||null),m=t.computed(()=>({width:e.size?.width||0,height:e.size?.height||0,disallowReturnToOpener:e.disallowReturnToOpener,preferInitialWindowPlacement:e.preferInitialWindowPlacement})),f=n=>{if(!c){console.warn("Document Picture-in-Picture API is not supported in this browser");return}n?P():a()},P=async()=>{const n=await window.documentPictureInPicture.requestWindow(m.value);e.copyAllStyles&&u(n),e.cdnScripts&&e.cdnScripts.length>0&&await l(n,e.cdnScripts);const p=n.document.createElement("div");p.id="pip-root",n.document.body.appendChild(p),n.addEventListener("pagehide",w,{once:!0}),s.value=n},a=()=>{s.value&&(s.value.close(),s.value=null)},w=()=>{a(),e.isPipOpen&&d("onClose")};return t.watch(()=>e.isPipOpen,n=>{f(n)}),t.onBeforeUnmount(()=>{a()}),(n,p)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[!r.value||n.mode==="clone"?t.renderSlot(n.$slots,"default",{key:0}):t.createCommentVNode("",!0),r.value?(t.openBlock(),t.createBlock(t.Teleport,{key:1,to:r.value},[t.renderSlot(n.$slots,"default")],8,["to"])):t.createCommentVNode("",!0)],64))}})});