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.legacy.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,r,n,o,i,c,a){var u="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},l="function"==typeof u[n]&&u[n],s=l.i||{},f=l.cache||{},p="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function d(t,r){if(!f[t]){if(!e[t]){if(o[t])return o[t];var i="function"==typeof u[n]&&u[n];if(!r&&i)return i(t,!0);if(l)return l(t,!0);if(p&&"string"==typeof t)return p(t);var c=Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}s.resolve=function(r){var n=e[t][1][r];return null!=n?n:r},s.cache={};var a=f[t]=new d.Module(t);e[t][0].call(a.exports,s,a,a.exports,u)}return f[t].exports;function s(e){var t=s.resolve(e);return!1===t?{}:d(t)}}d.isParcelRequire=!0,d.Module=function(e){this.id=e,this.bundle=d,this.require=p,this.exports={}},d.modules=e,d.cache=f,d.parent=l,d.distDir=void 0,d.publicUrl=void 0,d.devServer=void 0,d.i=s,d.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(d,"root",{get:function(){return u[n]}}),u[n]=d;for(var y=0;y<t.length;y++)d(t[y]);if(r){var h=d(r);"object"==typeof exports&&"undefined"!=typeof module?module.exports=h:"function"==typeof define&&define.amd&&define(function(){return h})}}({"5Wzsp":[function(e,t,r,n){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(r),o.export(r,"default",function(){return u});var i=e("@swc/helpers/cjs/_async_to_generator.cjs"),c=e("@swc/helpers/cjs/_object_spread.cjs"),a=e("@swc/helpers/cjs/_ts_generator.cjs");function u(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=(0,c._)({width:480,height:270,fallbackToVideoPiP:!0,placeholder:"Playing in Document Picture-in-Picture"},e);return function(e){var r,n="documentPictureInPicture"in window&&"function"==typeof(null==(r=window.documentPictureInPicture)?void 0:r.requestWindow),o=e.proxy,c=e.icons,u=e.i18n,l=e.template.$container,s=e.constructor.utils,f=s.append,p=s.tooltip,d=s.addClass,y=s.removeClass,h={win:null,originalParent:null,originalNext:null,currentDoc:null,placeholder:null};function _(){return(0,i._)(function(){var r,o,i,c,u,s;return(0,a._)(this,function(a){switch(a.label){case 0:if(!n&&t.fallbackToVideoPiP)return e.pip=!0,console.warn("[artplayer-plugin-document-pip] Document Picture-in-Picture is not supported, falling back to Video Picture-in-Picture"),[2];if(h.win)return[2];a.label=1;case 1:return a.trys.push([1,3,,4]),[4,window.documentPictureInPicture.requestWindow({width:t.width,height:t.height})];case 2:h.win=r=a.sent(),h.currentDoc=r.document,h.placeholder=document.createElement("div"),h.placeholder.className="artplayer-pip-placeholder",h.placeholder.style.cssText="display:flex;justify-content:center;align-items:center;width:100%;height:100%;",h.placeholder.textContent=t.placeholder,h.originalParent=l.parentNode,h.originalNext=l.nextSibling,h.originalParent.insertBefore(h.placeholder,h.originalNext),(o=r.document.createElement("div")).id="__art_dpip_root",r.document.body.appendChild(o);var f=r.document,p=f.createElement("style");if(p.textContent="\n html, body { margin:0; padding:0; width:100%; height:100%; background:#000; overflow:hidden; }\n #__art_dpip_root { position:absolute; inset:0; display:flex; }\n #__art_dpip_root > * { width:100% !important; height:100% !important; }\n ",f.head.appendChild(p),!f.querySelector('meta[name="viewport"]')){var y=f.createElement("meta");y.name="viewport",y.content="width=device-width,initial-scale=1",f.head.appendChild(y)}try{document.querySelectorAll('link[rel="stylesheet"]').forEach(function(e){var t=f.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),f.head.appendChild(t)})}catch(e){}try{document.querySelectorAll("style").forEach(function(e){var t=f.createElement("style");t.textContent=e.textContent,f.head.appendChild(t)})}catch(e){}return i=r.document.adoptNode(l),o.appendChild(i),h.currentDoc=r.document,c=function(){var t;return null==(t=e.resize)?void 0:t.call(e)},u=function(){return v()},r.addEventListener("resize",c),r.addEventListener("pagehide",u),r.addEventListener("unload",u),h.cleanup=function(){r.removeEventListener("resize",c),r.removeEventListener("pagehide",u),r.removeEventListener("unload",u)},d(l,"artplayer-document-pip"),e.emit("document-pip",!0),[3,4];case 3:return s=a.sent(),e.notice.show="Document Picture-in-Picture open failed",console.warn("[artplayer-plugin-document-pip] open failed:",s),[3,4];case 4:return[2]}})})()}function v(){if(!n&&t.fallbackToVideoPiP){e.pip=!1;return}if(h.win)try{var r;if(null==(r=h.cleanup)||r.call(h),h.placeholder){var o=h.placeholder.ownerDocument||document,i=o.adoptNode(l);h.originalParent.insertBefore(i,h.placeholder),h.placeholder.remove(),h.placeholder=null,h.currentDoc=o}h.win.close(),h.win=null,y(l,"artplayer-document-pip"),e.emit("document-pipLine truncated