feat: add Document Picture-in-Picture plugin for ArtPlayer

- Implemented the core functionality of the Document Picture-in-Picture plugin.
- Created main plugin file `artplayer-plugin-document-pip.js` with support for opening and closing the PIP window.
- Added legacy support in `artplayer-plugin-document-pip.legacy.js`.
- Defined plugin options in `package.json` and included necessary metadata.
- Developed the main logic in `src/index.js`, including style copying and event handling.
- Created TypeScript definitions in `types/artplayer-plugin-document-pip.d.ts` for better type safety.

docs/compiled/artplayer-plugin-document-pip.js

@@ -0,0 +1,8 @@
+
+/*!
+ * artplayer-plugin-document-pip.js v1.0.0
+ * Github: https://github.com/zhw2590582/ArtPlayer
+ * (c) 2017-2025 Harvey Zack
+ * Released under the MIT License.
+ */
+!function(e,t,n,r,i,o,l,c){var d="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},a="function"==typeof d[r]&&d[r],u=a.i||{},p=a.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function s(t,n){if(!p[t]){if(!e[t]){if(i[t])return i[t];var o="function"==typeof d[r]&&d[r];if(!n&&o)return o(t,!0);if(a)return a(t,!0);if(f&&"string"==typeof t)return f(t);var l=Error("Cannot find module '"+t+"'");throw l.code="MODULE_NOT_FOUND",l}u.resolve=function(n){var r=e[t][1][n];return null!=r?r:n},u.cache={};var c=p[t]=new s.Module(t);e[t][0].call(c.exports,u,c,c.exports,d)}return p[t].exports;function u(e){var t=u.resolve(e);return!1===t?{}:s(t)}}s.isParcelRequire=!0,s.Module=function(e){this.id=e,this.bundle=s,this.require=f,this.exports={}},s.modules=e,s.cache=p,s.parent=a,s.distDir=void 0,s.publicUrl=void 0,s.devServer=void 0,s.i=u,s.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(s,"root",{get:function(){return d[r]}}),d[r]=s;for(var h=0;h<t.length;h++)s(t[h]);if(n){var m=s(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=m:"function"==typeof define&&define.amd&&define(function(){return m})}}({eo8f0:[function(e,t,n,r){var i=e("@parcel/transformer-js/src/esmodule-helpers.js");function o(e={}){let t={width:480,height:270,fallbackToVideoPiP:!0,placeholder:"Playing in Document Picture-in-Picture",...e};return e=>{let n="documentPictureInPicture"in window&&"function"==typeof window.documentPictureInPicture?.requestWindow,{proxy:r,icons:i,i18n:o,template:{$container:l},constructor:{utils:{append:c,tooltip:d,addClass:a,removeClass:u}}}=e,p={win:null,originalParent:null,originalNext:null,currentDoc:null,placeholder:null};async function f(){if(!n&&t.fallbackToVideoPiP){e.pip=!0,console.warn("[artplayer-plugin-document-pip] Document Picture-in-Picture is not supported, falling back to Video Picture-in-Picture");return}if(!p.win)try{let n=await window.documentPictureInPicture.requestWindow({width:t.width,height:t.height});p.win=n,p.currentDoc=n.document,p.placeholder=document.createElement("div"),p.placeholder.className="artplayer-pip-placeholder",p.placeholder.style.cssText="display:flex;justify-content:center;align-items:center;width:100%;height:100%;",p.placeholder.textContent=t.placeholder,p.originalParent=l.parentNode,p.originalNext=l.nextSibling,p.originalParent.insertBefore(p.placeholder,p.originalNext);let i=n.document.createElement("div");i.id="__art_dpip_root",n.document.body.appendChild(i);var r=n.document;let o=r.createElement("style");if(o.textContent=` html, body { margin:0; padding:0; width:100%; height:100%; background:#000; overflow:hidden; } #__art_dpip_root { position:absolute; inset:0; display:flex; } #__art_dpip_root > * { width:100% !important; height:100% !important; } `,r.head.appendChild(o),!r.querySelector('meta[name="viewport"]')){let e=r.createElement("meta");e.name="viewport",e.content="width=device-width,initial-scale=1",r.head.appendChild(e)}try{document.querySelectorAll('link[rel="stylesheet"]').forEach(e=>{let t=r.createElement("link");t.rel="stylesheet",t.href=e.href,e.media&&(t.media=e.media),e.crossOrigin&&(t.crossOrigin=e.crossOrigin),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),r.head.appendChild(t)})}catch{}try{document.querySelectorAll("style").forEach(e=>{let t=r.createElement("style");t.textContent=e.textContent,r.head.appendChild(t)})}catch{}let c=n.document.adoptNode(l);i.appendChild(c),p.currentDoc=n.document;let d=()=>e.resize?.(),u=()=>s();n.addEventListener("resize",d),n.addEventListener("pagehide",u),n.addEventListener("unload",u),p.cleanup=()=>{n.removeEventListener("resize",d),n.removeEventListener("pagehide",u),n.removeEventListener("unload",u)},a(l,"artplayer-document-pip"),e.emit("document-pip",!0)}catch(t){e.notice.show="Document Picture-in-Picture open failed",console.warn("[artplayer-plugin-document-pip] open failed:",t)}}function s(){if(!n&&t.fallbackToVideoPiP){e.pip=!1;return}if(p.win)try{p.cleanup?.(),function(){if(!p.placeholder)return;let e=p.placeholder.ownerDocument||document,t=e.adoptNode(l);p.originalParent.insertBefore(t,p.placeholder),p.placeholder.remove(),p.placeholder=null,p.currentDoc=e}(),p.win.close(),p.win=null,u(l,"artplayer-document-pip"),e.emit("document-pip",!1)}catch(t){e.notice.show="Document Picture-in-Picture close failed",console.warn("[artplayer-plugin-document-pip] close failed:",t)}}function h(){p.win?s():f()}return e.controls.add({name:"document-pip",position:"right",index:40,tooltip:e.i18n.get("PIP Mode"),mounted:t=>{c(t,i.pip),r(t,"click",h),e.on("document-pip",e=>{d(t,o.get(e?"Exit PIP Mode":"PIP Mode"))})}}),e.on("destroy",s),{name:"artplayerPluginDocumentPip",state:p,open:f,close:s,toggle:h}}}i.defineInteropFlag(n),i.export(n,"default",()=>o),"undefined"!=typeof window&&(window.artplayerPluginDocumentPip=o)},{"@parcel/transformLine truncated