refactor(dpip): [PKG-DPIP-03] own windows and DOM resources in strict TypeScript

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

@@ -4,4 +4,4 @@
  * (c) 2017-2026 Harvey Zhao
  * Released under the MIT License.
  */
-!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(t.artplayerPluginDocumentPip=t(),define(function(){return t.artplayerPluginDocumentPip})):(e="undefined"!==typeof globalThis?globalThis:e||self).artplayerPluginDocumentPip=t()}(this,function(){"use strict";if("undefined"!==typeof document){const e="artplayer-plugin-document-pip";let t=document.getElementById(e);t||(t=document.createElement("style"),t.id=e,"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{document.head.appendChild(t)}):(document.head||document.documentElement).appendChild(t)),t.textContent=".artplayer-document-pip.art-video-player{width:100%!important;height:100%!important}"}return function(e={}){const t={width:480,height:270,fallbackToVideoPiP:!0,placeholder:"Playing in Document Picture-in-Picture",...e};return e=>{const n="documentPictureInPicture"in window&&"function"===typeof window.documentPictureInPicture?.requestWindow,{proxy:i,icons:o,i18n:r,template:{$player:d},constructor:{utils:{append:l,tooltip:c,addClass:a,removeClass:p,sleep:u}}}=e,s={win:null,originalParent:null,originalNext:null,currentDoc:null,placeholder:null};async function m(){if(!n&&t.fallbackToVideoPiP)return e.pip=!0,void console.warn("[artplayer-plugin-document-pip] Document Picture-in-Picture is not supported, falling back to Video Picture-in-Picture");if(!s.win)try{const n=await window.documentPictureInPicture.requestWindow({width:t.width,height:t.height});s.win=n,s.currentDoc=n.document,s.placeholder=document.createElement("div"),s.placeholder.className="artplayer-document-pip-placeholder",s.placeholder.style.cssText="display:flex;justify-content:center;align-items:center;width:100%;height:100%;",s.placeholder.textContent=t.placeholder,s.originalParent=d.parentNode,s.originalNext=d.nextSibling,s.originalParent.insertBefore(s.placeholder,s.originalNext);const i=n.document.createElement("div");i.id="__art_dpip_root",n.document.body.appendChild(i),function(e){const t=e.createElement("style");if(t.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      ",e.head.appendChild(t),!e.querySelector('meta[name="viewport"]')){const t=e.createElement("meta");t.name="viewport",t.content="width=device-width,initial-scale=1",e.head.appendChild(t)}try{document.querySelectorAll('link[rel="stylesheet"]').forEach(t=>{const n=e.createElement("link");n.rel="stylesheet",n.href=t.href,t.media&&(n.media=t.media),t.crossOrigin&&(n.crossOrigin=t.crossOrigin),t.referrerPolicy&&(n.referrerPolicy=t.referrerPolicy),e.head.appendChild(n)})}catch{}try{document.querySelectorAll("style").forEach(t=>{const n=e.createElement("style");n.textContent=t.textContent,e.head.appendChild(n)})}catch{}}(n.document);const o=n.document.adoptNode(d);i.appendChild(o),s.currentDoc=n.document;const r=()=>e.resize?.(),l=()=>h();n.addEventListener("resize",r),n.addEventListener("pagehide",l),n.addEventListener("unload",l),s.cleanup=()=>{n.removeEventListener("resize",r),n.removeEventListener("pagehide",l),n.removeEventListener("unload",l)},a(d,"artplayer-document-pip"),e.events.bindGlobalEvents?.(),e.emit("document-pip",!0),await u(100),e.emit("resize")}catch(i){e.notice.show="Document Picture-in-Picture open failed",console.warn("[artplayer-plugin-document-pip] open failed:",i)}}async function h(){if(s.win)try{s.cleanup?.(),function(){if(!s.placeholder)return;const e=s.placeholder.ownerDocument||document,t=e.adoptNode(d);s.originalParent.insertBefore(t,s.placeholder),s.placeholder.remove(),s.placeholder=null,s.currentDoc=e}(),s.win.close(),s.win=null,p(d,"artplayer-document-pip"),e.events.bindGlobalEvents?.(),e.emit("document-pip",!1),await u(100),e.emit("resize")}catch(t){e.notice.show="Document Picture-in-Picture close failed",console.warn("[artplayer-plugin-document-pip] close failed:",t)}}function f(){s.win?h():m()}return e.controls.add({name:"document-pip",position:"right",index:40,tooltip:e.i18n.get("PIP Mode"),mounted:t=>{l(t,o.pip),i(t,"click",f),e.on("document-pip",e=>{c(t,r.get(e?"Exit PIP Mode":"PIP Mode"))})}}),e.on("destroy",h),{name:"artplayerPluginDocumentPip",get isSupported(){return n},get isActive(){return!!s.win},open:m,close:h,toggle:f}}}});
+!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(e.artplayerPluginDocumentPip=t(),define(function(){return e.artplayerPluginDocumentPip})):(e="undefined"!==typeof globalThis?globalThis:e||self).artplayerPluginDocumentPip=t()}(this,function(){"use strict";function e(e){const t=[];for(const o of e)try{o()}catch(n){t.push(n)}return t}const t=".artplayer-document-pip.art-video-player{width:100%!important;height:100%!important}";function n(t){let n=!1,o=0,i=null,r=null,c=null;const l=()=>!n&&t.alive(),s=e=>e===o&&l();function u(){o++,r?.finish(),r=null,c?.cancel(),c=null}function a(t){const n=e(t.releases.splice(0));return n.push(...e([()=>t.window.close()])),n}async function d(e){if(!s(e))return;const n=function(){let e;const t=new Promise(t=>{e=t});let n=setTimeout(()=>{n=null,e()},100);return{promise:t,cancel(){null!==n&&clearTimeout(n),n=null,e()}}}();c=n,await n.promise,c===n&&(c=null),s(e)&&t.resize()}async function p(){u();const e=o,n=i;if(i=null,!n)return;const r=a(n);if(n.announced)try{t.activate(!1)}catch(c){r.push(c)}r.length&&l()&&t.report("close",r[0]),s(e)&&await d(e)}return{get active(){return null!==i},get opening(){return null!==r},open:async function(){if(!l()||i)return;if(r)return r.promise;u();const n=o;let c,f;const m=new Promise((e,t)=>{c=e,f=t}),h={promise:m,finish:c};r=h;const y=()=>{r===h&&(r=null),c()},g=o=>{if(s(n)){const n=i;i=null,n&&(a(n),n.announced&&e([()=>t.activate(!1)]));try{t.report("open",o)}catch(r){f(r)}}},v=async o=>{if(!s(n))return void(i?.window!==o&&e([()=>o.close()]));const r={window:o,releases:[],announced:!1};i=r;try{const e=t.project(o.document);if(r.releases.push(e.destroy),e.mount(),!s(n))return void a(r);for(const[i,c]of[["resize",()=>{s(n)&&t.nativeResize()}],["pagehide",()=>{p()}],["unload",()=>{p()}]])if(r.releases.unshift(()=>o.removeEventListener(i,c)),o.addEventListener(i,c),!s(n))return void a(r);r.announced=!0,t.activate(!0),await d(n)}catch(c){g(c)}};try{const e=t.request();Promise.resolve(e).then(v,g).then(y,e=>{s(n)&&f(e),y()})}catch(w){try{g(w)}finally{y()}}return m},close:p,destroy(){n||(n=!0,p().catch(()=>{}))}}}return"undefined"!==typeof document&&function(e){const n="artplayer-plugin-document-pip",o=e.getElementById(n);if(o)return void(o.textContent=t);const i=e.createElement("style");i.id=n,i.textContent=t;const r=()=>{e.removeEventListener("DOMContentLoaded",r);const o=e.getElementById(n);o?o.textContent=t:(e.head||e.documentElement).appendChild(i)};"loading"===e.readyState?e.addEventListener("DOMContentLoaded",r):r()}(document),function(t={}){const o={width:480,height:270,fallbackToVideoPiP:!0,placeholder:"Playing in Document Picture-in-Picture",...t};return t=>{const i=window,r="documentPictureInPicture"in i&&"function"===typeof i.documentPictureInPicture?.requestWindow;let c=t,l=t.template.$player,s=t.isDestroy;const u=t.constructor.utils,a=()=>!s&&!!c&&!c.isDestroy,d=n({alive:a,request:()=>i.documentPictureInPicture.requestWindow({width:o.width,height:o.height}),project:t=>function(t,n,o){const i=t.ownerDocument,r=t.parentNode,c=t.nextSibling;if(!r)throw new Error("Document Picture-in-Picture requires a mounted player");const l=i.createElement("div");l.className="artplayer-document-pip-placeholder",l.style.cssText="display:flex;justify-content:center;align-items:center;width:100%;height:100%;",l.textContent=o??"";const s=n.createElement("div");s.id="__art_dpip_root";const u=[];let a=!1;const d=()=>{const e=l.parentNode===r?l:c?.parentNode===r?c:null;if(t.parentNode!==r||t.nextSibling!==e)try{r.insertBefore(t,e)}catch(n){throw i.body.appendChild(t),n}},p=()=>{const t=e([d,()=>l.remove(),...u.splice(0).map(e=>()=>e.remove()),()=>s.remove()]);if(t.length)throw t[0]};return{mount(){if(!a){if(r.insertBefore(l,c?.parentNode===r?c:null),a||n.body.appendChild(s),a||function(e,t,n,o){const i=e=>{o()&&(n(e),t.head.appendChild(e),o()||e.remove())},r=t.createElement("style");if(r.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  ",i(r),!t.querySelector('meta[name="viewport"]')){const e=t.createElement("meta");e.name="viewport",e.content="width=device-width,initial-scale=1",i(e)}try{e.querySelectorAll('link[rel="stylesheet"]').forEach(e=>{const n=t.createElement("link");n.rel="stylesheet",n.href=e.href,e.media&&(n.media=e.media),e.crossOrigin&&(n.crossOrigin=e.crossOrigin),e.referrerPolicy&&(n.referrerPolicy=e.referrerPolicy),i(n)})}catch{}try{e.querySelectorAll("style").forEach(e=>{const n=t.createElement("style");n.textContent=e.textContent,i(n)})}catch{}}(i,n,e=>u.push(e),()=>!a),!a){const e=n.adoptNode(t);a||s.appendChild(e)}a&&p()}},destroy(){a||(a=!0,p())}}}(l,t,o.placeholder),activate(e){c&&l&&(e?u.addClass(l,"artplayer-document-pip"):u.removeClass(l,"artplayerLine truncated

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

@@ -4,4 +4,4 @@
  * (c) 2017-2026 Harvey Zhao
  * Released under the MIT License.
  */
-!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(t.artplayerPluginDocumentPip=t(),define(function(){return t.artplayerPluginDocumentPip})):(e="undefined"!==typeof globalThis?globalThis:e||self).artplayerPluginDocumentPip=t()}(this,function(){"use strict";var e=Object.defineProperty,t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,o=(t,n,i)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[n]=i,r=(e,t,n)=>new Promise((i,o)=>{var r=e=>{try{c(n.next(e))}catch(t){o(t)}},l=e=>{try{c(n.throw(e))}catch(t){o(t)}},c=e=>e.done?i(e.value):Promise.resolve(e.value).then(r,l);c((n=n.apply(e,t)).next())});if("undefined"!==typeof document){const e="artplayer-plugin-document-pip";let t=document.getElementById(e);t||(t=document.createElement("style"),t.id=e,"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{document.head.appendChild(t)}):(document.head||document.documentElement).appendChild(t)),t.textContent=".artplayer-document-pip.art-video-player{width:100%!important;height:100%!important}"}return function(e={}){const l=((e,r)=>{for(var l in r||(r={}))n.call(r,l)&&o(e,l,r[l]);if(t)for(var l of t(r))i.call(r,l)&&o(e,l,r[l]);return e})({width:480,height:270,fallbackToVideoPiP:!0,placeholder:"Playing in Document Picture-in-Picture"},e);return e=>{var t;const n="documentPictureInPicture"in window&&"function"===typeof(null==(t=window.documentPictureInPicture)?void 0:t.requestWindow),{proxy:i,icons:o,i18n:c,template:{$player:a},constructor:{utils:{append:d,tooltip:p,addClass:u,removeClass:s,sleep:m}}}=e,h={win:null,originalParent:null,originalNext:null,currentDoc:null,placeholder:null};function y(){return r(this,null,function*(){var t,i;if(!n&&l.fallbackToVideoPiP)return e.pip=!0,void console.warn("[artplayer-plugin-document-pip] Document Picture-in-Picture is not supported, falling back to Video Picture-in-Picture");if(!h.win)try{const n=yield window.documentPictureInPicture.requestWindow({width:l.width,height:l.height});h.win=n,h.currentDoc=n.document,h.placeholder=document.createElement("div"),h.placeholder.className="artplayer-document-pip-placeholder",h.placeholder.style.cssText="display:flex;justify-content:center;align-items:center;width:100%;height:100%;",h.placeholder.textContent=l.placeholder,h.originalParent=a.parentNode,h.originalNext=a.nextSibling,h.originalParent.insertBefore(h.placeholder,h.originalNext);const o=n.document.createElement("div");o.id="__art_dpip_root",n.document.body.appendChild(o),function(e){const t=e.createElement("style");if(t.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      ",e.head.appendChild(t),!e.querySelector('meta[name="viewport"]')){const t=e.createElement("meta");t.name="viewport",t.content="width=device-width,initial-scale=1",e.head.appendChild(t)}try{document.querySelectorAll('link[rel="stylesheet"]').forEach(t=>{const n=e.createElement("link");n.rel="stylesheet",n.href=t.href,t.media&&(n.media=t.media),t.crossOrigin&&(n.crossOrigin=t.crossOrigin),t.referrerPolicy&&(n.referrerPolicy=t.referrerPolicy),e.head.appendChild(n)})}catch(n){}try{document.querySelectorAll("style").forEach(t=>{const n=e.createElement("style");n.textContent=t.textContent,e.head.appendChild(n)})}catch(n){}}(n.document);const r=n.document.adoptNode(a);o.appendChild(r),h.currentDoc=n.document;const c=()=>{var t;return null==(t=e.resize)?void 0:t.call(e)},d=()=>f();n.addEventListener("resize",c),n.addEventListener("pagehide",d),n.addEventListener("unload",d),h.cleanup=()=>{n.removeEventListener("resize",c),n.removeEventListener("pagehide",d),n.removeEventListener("unload",d)},u(a,"artplayer-document-pip"),null==(i=(t=e.events).bindGlobalEvents)||i.call(t),e.emit("document-pip",!0),yield m(100),e.emit("resize")}catch(o){e.notice.show="Document Picture-in-Picture open failed",console.warn("[artplayer-plugin-document-pip] open failed:",o)}})}function f(){return r(this,null,function*(){var t,n,i;if(h.win)try{null==(t=h.cleanup)||t.call(h),function(){if(!h.placeholder)return;const e=h.placeholder.ownerDocument||document,t=e.adoptNode(a);h.originalParent.insertBefore(t,h.placeholder),h.placeholder.remove(),h.placeholder=null,h.currentDoc=e}(),h.win.close(),h.win=null,s(a,"artplayer-document-pip"),null==(i=(n=e.events).bindGlobalEvents)||i.call(n),e.emit("document-pip",!1),yield m(100),e.emit("resize")}catch(o){e.notice.show="Document Picture-in-Picture close failed",console.warn("[artplayer-plugin-document-pip] close failed:",o)}})}function g(){h.win?f():y()}return e.controls.add({name:"document-pip",position:"right",index:40,tooltip:e.i18n.get("PIP Mode"),mounted:t=>{d(t,o.pip),i(t,"click",g),e.on("document-pip",Line truncated
+!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(e.artplayerPluginDocumentPip=t(),define(function(){return e.artplayerPluginDocumentPip})):(e="undefined"!==typeof globalThis?globalThis:e||self).artplayerPluginDocumentPip=t()}(this,function(){"use strict";var e=Object.defineProperty,t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,r=(t,n,o)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[n]=o,i=(e,t,n)=>new Promise((o,r)=>{var i=e=>{try{c(n.next(e))}catch(t){r(t)}},l=e=>{try{c(n.throw(e))}catch(t){r(t)}},c=e=>e.done?o(e.value):Promise.resolve(e.value).then(i,l);c((n=n.apply(e,t)).next())});function l(e){const t=[];for(const o of e)try{o()}catch(n){t.push(n)}return t}const c=".artplayer-document-pip.art-video-player{width:100%!important;height:100%!important}";function u(e){let t=!1,n=0,o=null,r=null,c=null;const u=()=>!t&&e.alive(),s=e=>e===n&&u();function a(){n++,null==r||r.finish(),r=null,null==c||c.cancel(),c=null}function d(e){const t=l(e.releases.splice(0));return t.push(...l([()=>e.window.close()])),t}function p(t){return i(this,null,function*(){if(!s(t))return;const n=function(){let e;const t=new Promise(t=>{e=t});let n=setTimeout(()=>{n=null,e()},100);return{promise:t,cancel(){null!==n&&clearTimeout(n),n=null,e()}}}();c=n,yield n.promise,c===n&&(c=null),s(t)&&e.resize()})}function f(){return i(this,null,function*(){a();const t=n,r=o;if(o=null,!r)return;const i=d(r);if(r.announced)try{e.activate(!1)}catch(l){i.push(l)}i.length&&u()&&e.report("close",i[0]),s(t)&&(yield p(t))})}return{get active(){return null!==o},get opening(){return null!==r},open:function(){return i(this,null,function*(){if(!u()||o)return;if(r)return r.promise;a();const t=n;let c,m;const h=new Promise((e,t)=>{c=e,m=t}),y={promise:h,finish:c};r=y;const v=()=>{r===y&&(r=null),c()},g=n=>{if(s(t)){const t=o;o=null,t&&(d(t),t.announced&&l([()=>e.activate(!1)]));try{e.report("open",n)}catch(r){m(r)}}},P=n=>i(null,null,function*(){if(!s(t))return void((null==o?void 0:o.window)!==n&&l([()=>n.close()]));const r={window:n,releases:[],announced:!1};o=r;try{const o=e.project(n.document);if(r.releases.push(o.destroy),o.mount(),!s(t))return void d(r);for(const[i,l]of[["resize",()=>{s(t)&&e.nativeResize()}],["pagehide",()=>{f()}],["unload",()=>{f()}]])if(r.releases.unshift(()=>n.removeEventListener(i,l)),n.addEventListener(i,l),!s(t))return void d(r);r.announced=!0,e.activate(!0),yield p(t)}catch(i){g(i)}});try{const n=e.request();Promise.resolve(n).then(P,g).then(v,e=>{s(t)&&m(e),v()})}catch(w){try{g(w)}finally{v()}}return h})},close:f,destroy(){t||(t=!0,f().catch(()=>{}))}}}return"undefined"!==typeof document&&function(e){const t="artplayer-plugin-document-pip",n=e.getElementById(t);if(n)return void(n.textContent=c);const o=e.createElement("style");o.id=t,o.textContent=c;const r=()=>{e.removeEventListener("DOMContentLoaded",r);const n=e.getElementById(t);n?n.textContent=c:(e.head||e.documentElement).appendChild(o)};"loading"===e.readyState?e.addEventListener("DOMContentLoaded",r):r()}(document),function(e={}){const c=((e,i)=>{for(var l in i||(i={}))n.call(i,l)&&r(e,l,i[l]);if(t)for(var l of t(i))o.call(i,l)&&r(e,l,i[l]);return e})({width:480,height:270,fallbackToVideoPiP:!0,placeholder:"Playing in Document Picture-in-Picture"},e);return e=>{var t;const n=window,o="documentPictureInPicture"in n&&"function"===typeof(null==(t=n.documentPictureInPicture)?void 0:t.requestWindow);let r=e,s=e.template.$player,a=e.isDestroy;const d=e.constructor.utils,p=()=>!a&&!!r&&!r.isDestroy,f=u({alive:p,request:()=>n.documentPictureInPicture.requestWindow({width:c.width,height:c.height}),project:e=>function(e,t,n){const o=e.ownerDocument,r=e.parentNode,i=e.nextSibling;if(!r)throw new Error("Document Picture-in-Picture requires a mounted player");const c=o.createElement("div");c.className="artplayer-document-pip-placeholder",c.style.cssText="display:flex;justify-content:center;align-items:center;width:100%;height:100%;",c.textContent=null!=n?n:"";const u=t.createElement("div");u.id="__art_dpip_root";const s=[];let a=!1;const d=()=>{const t=c.parentNode===r?c:(null==i?void 0:i.parentNode)===r?i:null;if(e.parentNode!==r||e.nextSibling!==t)try{r.insertBefore(e,t)}catch(n){throw o.body.appendChild(e),n}},p=()=>{const e=l([d,()=>c.remove(),...s.splice(0).map(e=>()=>e.remove()),()=>u.remove()]);if(e.length)throw e[0]};return{mount(){if(!a){if(r.insertBefore(c,(null==i?void 0:i.parentNode)===r?i:null),a||t.body.appendChild(u),a||function(e,t,n,o){const r=e=>{o()&&(n(e),t.head.appendChild(e),o()||e.remove())},i=t.createElement("style");if(i.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  ",r(i),!t.querySelectorLine truncated

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

@@ -4,191 +4,477 @@
  * (c) 2017-2026 Harvey Zhao
  * Released under the MIT License.
  */
-const style = ".artplayer-document-pip.art-video-player {\n  width: 100% !important;\n  height: 100% !important;\n}\n";
-function artplayerPluginDocumentPip(userOptions = {}) {
-  const options = {
-    width: 480,
-    height: 270,
-    fallbackToVideoPiP: true,
-    placeholder: `Playing in Document Picture-in-Picture`,
-    ...userOptions
+function releaseAll(releases) {
+  const errors = [];
+  for (const release of releases) {
+    try {
+      release();
+    } catch (error) {
+      errors.push(error);
+    }
+  }
+  return errors;
+}
+function createDelay() {
+  let finish;
+  const promise = new Promise((resolve) => {
+    finish = resolve;
+  });
+  let timer = setTimeout(() => {
+    timer = null;
+    finish();
+  }, 100);
+  return {
+    promise,
+    cancel() {
+      if (timer !== null)
+        clearTimeout(timer);
+      timer = null;
+      finish();
+    }
   };
-  return (art) => {
-    const isSupported = "documentPictureInPicture" in window && typeof window.documentPictureInPicture?.requestWindow === "function";
-    const { proxy, icons, i18n, template: { $player }, constructor: { utils: { append, tooltip, addClass, removeClass, sleep } } } = art;
-    const state = {
-      win: null,
-      originalParent: null,
-      originalNext: null,
-      currentDoc: null,
-      placeholder: null
-    };
-    function copyStylesTo(targetDoc) {
-      const base = targetDoc.createElement("style");
-      base.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; }
-      `;
-      targetDoc.head.appendChild(base);
-      if (!targetDoc.querySelector('meta[name="viewport"]')) {
-        const meta = targetDoc.createElement("meta");
-        meta.name = "viewport";
-        meta.content = "width=device-width,initial-scale=1";
-        targetDoc.head.appendChild(meta);
-      }
+}
+function createControl(art, toggle, alive) {
+  const utils = art.constructor.utils;
+  const releases = [];
+  let closed = false;
+  return {
+    mount() {
+      if (closed || !alive())
+        return;
+      releases.push(() => art.controls.remove("document-pip"));
+      art.controls.add({
+        name: "document-pip",
+        position: "right",
+        index: 40,
+        tooltip: art.i18n.get("PIP Mode"),
+        mounted: (control) => {
+          if (closed || !alive())
+            return;
+          utils.append(control, art.icons.pip);
+          const click = () => {
+            if (alive())
+              toggle();
+          };
+          releases.push(() => control.removeEventListener("click", click));
+          const unbind = art.proxy(control, "click", click);
+          if (closed)
+            unbind();
+          else
+            releases.push(unbind);
+          if (closed || !alive())
+            return;
+          const update = (active) => {
+            if (alive())
+              utils.tooltip(control, art.i18n.get(active ? "Exit PIP Mode" : "PIP Mode"));
+          };
+          releases.push(() => art.off("document-pip", update));
+          art.on("document-pip", update);
+        }
+      });
+      if (closed)
+        art.controls.remove("document-pip");
+    },
+    destroy() {
+      if (closed)
+        return;
+      closed = true;
+      const errors = releaseAll(releases.splice(0).reverse());
+      if (errors.length)
+        throw errors[0];
+    }
+  };
+}
+const style = ".artplayer-document-pip.art-video-player {\n  width: 100% !important;\n  height: 100% !important;\n}\n";
+function installStyle(document2) {
+  const id = "artplayer-plugin-document-pip";
+  const existing = document2.getElementById(id);
+  if (existing) {
+    existing.textContent = style;
+    return;
+  }
+  const element = document2.createElement("style");
+  element.id = id;
+  element.textContent = style;
+  const insert = () => {
+    document2.removeEventListener("DOMContentLoaded", insert);
+    const current = document2.getElementById(id);
+    if (current)
+      current.textContent = style;
+    else
+      (document2.head || document2.documentElement).appendChild(element);
+  };
+  if (document2.readyState === "loading")
+    document2.addEventListener("DOMContentLoaded", insert);
+  else
+    insert();
+}
+function copyStyles(source, target, own, alive) {
+  const append = (node) => {
+    if (!alive())
+      return;
+    own(node);
+    target.head.appendChild(node);
+    if (!alive())
+      node.remove();
+  };
+  const base = target.createElement("style");
+  base.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; }
+  `;
+  append(base);
+  if (!target.querySelector('meta[name="viewport"]')) {
+    const meta = target.createElement("meta");
+    meta.name = "viewport";
+    meta.content = "width=device-width,initial-scale=1";
+    append(meta);
+  }
+  try {
+    source.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
+      const clone = target.createElement("link");
+      clone.rel = "stylesheet";
+      clone.href = link.href;
+      if (link.media)
+        clone.media = link.media;
+      if (link.crossOrigin)
+        clone.crossOrigin = link.crossOrigin;
+      if (link.referrerPolicy)
+        clone.referrerPolicy = link.referrerPolicy;
+      append(clone);
+    });
+  } catch {
+  }
+  try {
+    source.querySelectorAll("style").forEach((element) => {
+      const clone = target.createElement("style");
+      clone.textContent = element.textContent;
+      append(clone);
+    });
+  } catch {
+  }
+}
+function createProjection(player, target, text) {
+  const source = player.ownerDocument;
+  const parent = player.parentNode;
+  const next = player.nextSibling;
+  if (!parent)
+    throw new Error("Document Picture-in-Picture requires a mounted player");
+  const placeholder = source.createElement("div");
+  placeholder.className = "artplayer-document-pip-placeholder";
+  placeholder.style.cssText = "display:flex;justify-content:center;align-items:center;width:100%;height:100%;";
+  placeholder.textContent = text ?? "";
+  const root = target.createElement("div");
+  root.id = "__art_dpip_root";
+  const nodes = [];
+  let closed = false;
+  const restore = () => {
+    const anchor = placeholder.parentNode === parent ? placeholder : next?.parentNode === parent ? next : null;
+    if (player.parentNode !== parent || player.nextSibling !== anchor) {
       try {
-        document.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
-          const clone = targetDoc.createElement("link");
-          clone.rel = "stylesheet";
-          clone.href = link.href;
-          if (link.media)
-            clone.media = link.media;
-          if (link.crossOrigin)
-            clone.crossOrigin = link.crossOrigin;
-          if (link.referrerPolicy)
-            clone.referrerPolicy = link.referrerPolicy;
-          targetDoc.head.appendChild(clone);
-        });
-      } catch {
-      }
-      try {
-        document.querySelectorAll("style").forEach((style2) => {
-          const clone = targetDoc.createElement("style");
-          clone.textContent = style2.textContent;
-          targetDoc.head.appendChild(clone);
-        });
-      } catch {
+        parent.insertBefore(player, anchor);
+      } catch (error) {
+        source.body.appendChild(player);
+        throw error;
       }
     }
+  };
+  const cleanup = () => {
+    const errors = releaseAll([restore, () => placeholder.remove(), ...nodes.splice(0).map((node) => () => node.remove()), () => root.remove()]);
+    if (errors.length)
+      throw errors[0];
+  };
+  return {
+    mount() {
+      if (closed)
+        return;
+      parent.insertBefore(placeholder, next?.parentNode === parent ? next : null);
+      if (!closed)
+        target.body.appendChild(root);
+      if (!closed)
+        copyStyles(source, target, (node) => nodes.push(node), () => !closed);
+      if (!closed) {
+        const adopted = target.adoptNode(player);
+        if (!closed)
+          root.appendChild(adopted);
+      }
+      if (closed)
+        cleanup();
+    },
+    destroy() {
+      if (closed)
+        return;
+      closed = true;
+      cleanup();
+    }
+  };
+}
+function createWindowSession(hooks) {
+  let destroyed = false;
+  let revision = 0;
+  let session = null;
+  let pending = null;
+  let delay = null;
+  const alive = () => !destroyed && hooks.alive();
+  const valid = (value) => value === revision && alive();
+  function invalidate() {
+    revision++;
+    pending?.finish();
+    pending = null;
+    delay?.cancel();
+    delay = null;
+  }
+  function dispose(current) {
+    const errors = releaseAll(current.releases.splice(0));
+    errors.push(...releaseAll([() => current.window.close()]));
+    return errors;
+  }
+  async function resizeLater(value) {
+    if (!valid(value))
+      return;
+    const current = createDelay();
+    delay = current;
+    await current.promise;
+    if (delay === current)
+      delay = null;
+    if (valid(value))
+      hooks.resize();
+  }
+  async function close() {
+    invalidate();
+    const value = revision;
+    const current = session;
+    session = null;
+    if (!current)
+      return;
+    const errors = dispose(current);
+    if (current.announced) {
+      try {
+        hooks.activate(false);
+      } catch (error) {
+        errors.push(error);
+      }
+    }
+    if (errors.length && alive())
+      hooks.report("close", errors[0]);
+    if (valid(value))
+      await resizeLater(value);
+  }
+  async function open() {
+    if (!alive() || session)
+      return;
+    if (pending)
+      return pending.promise;
+    invalidate();
+    const value = revision;
+    let finish;
+    let reject;
+    const promise = new Promise((resolve, fail) => {
+      finish = resolve;
+      reject = fail;
+    });
+    const ticket = { promise, finish };
+    pending = ticket;
+    const settle = () => {
+      if (pending === ticket)
+        pending = null;
+      finish();
+    };
+    const failed = (error) => {
+      if (valid(value)) {
+        const current = session;
+        session = null;
+        if (current) {
+          dispose(current);
+          if (current.announced)
+            releaseAll([() => hooks.activate(false)]);
+        }
+        try {
+          hooks.report("open", error);
+        } catch (noticeError) {
+          reject(noticeError);
+        }
+      }
+    };
+    const receive = async (window2) => {
+      if (!valid(value)) {
+        if (session?.window !== window2)
+          releaseAll([() => window2.close()]);
+        return;
+      }
+      const current = { window: window2, releases: [], announced: false };
+      session = current;
+      try {
+        const projection = hooks.project(window2.document);
+        current.releases.push(projection.destroy);
+        projection.mount();
+        if (!valid(value)) {
+          dispose(current);
+          return;
+        }
+        for (const [event, callback] of [["resize", () => {
+          if (valid(value))
+            hooks.nativeResize();
+        }], ["pagehide", () => {
+          void close();
+        }], ["unload", () => {
+          void close();
+        }]]) {
+          current.releases.unshift(() => window2.removeEventListener(event, callback));
+          window2.addEventListener(event, callback);
+          if (!valid(value)) {
+            dispose(current);
+            return;
+          }
+        }
+        current.announced = true;
+        hooks.activate(true);
+        await resizeLater(value);
+      } catch (error) {
+        failed(error);
+      }
+    };
+    try {
+      const request = hooks.request();
+      void Promise.resolve(request).then(receive, failed).then(settle, (error) => {
+        if (valid(value))
+          reject(error);
+        settle();
+      });
+    } catch (error) {
+      try {
+        failed(error);
+      } finally {
+        settle();
+      }
+    }
+    return promise;
+  }
+  return {
+    get active() {
+      return session !== null;
+    },
+    get opening() {
+      return pending !== null;
+    },
+    open,
+    close,
+    destroy() {
+      if (destroyed)
+        return;
+      destroyed = true;
+      void close().catch(() => {
+      });
+    }
+  };
+}
+function artplayerPluginDocumentPip(userOptions = {}) {
+  const options = { width: 480, height: 270, fallbackToVideoPiP: true, placeholder: "Playing in Document Picture-in-Picture", ...userOptions };
+  return (art) => {
+    const browser = window;
+    const isSupported = "documentPictureInPicture" in browser && typeof browser.documentPictureInPicture?.requestWindow === "function";
+    let host = art;
+    let player = art.template.$player;
+    let closed = art.isDestroy;
+    const utils = art.constructor.utils;
+    const alive = () => !closed && !!host && !host.isDestroy;
+    const session = createWindowSession({
+      alive,
+      request: () => browser.documentPictureInPicture.requestWindow({ width: options.width, height: options.height }),
+      project: (document2) => createProjection(player, document2, options.placeholder),
+      activate(active) {
+        if (!host || !player)
+          return;
+        if (active)
+          utils.addClass(player, "artplayer-document-pip");
+        else
+          utils.removeClass(player, "artplayer-document-pip");
+        if (!alive())
+          return;
+        host.events.bindGlobalEvents?.();
+        if (alive())
+          host.emit("document-pip", active);
+      },
+      resize: () => {
+        if (alive())
+          host.emit("resize");
+      },
+      nativeResize: () => {
+        if (alive())
+          host.resize?.();
+      },
+      report(action, error) {
+        if (!alive())
+          return;
+        host.notice.show = `Document Picture-in-Picture ${action} failed`;
+        console.warn(`[artplayer-plugin-document-pip] ${action} failed:`, error);
+      }
+    });
     async function open() {
+      if (!alive())
+        return;
       if (!isSupported && options.fallbackToVideoPiP) {
-        art.pip = true;
+        host.pip = true;
         console.warn("[artplayer-plugin-document-pip] Document Picture-in-Picture is not supported, falling back to Video Picture-in-Picture");
         return;
       }
-      if (state.win)
-        return;
-      try {
-        const pipWin = await window.documentPictureInPicture.requestWindow({
-          width: options.width,
-          height: options.height
-        });
-        state.win = pipWin;
-        state.currentDoc = pipWin.document;
-        state.placeholder = document.createElement("div");
-        state.placeholder.className = "artplayer-document-pip-placeholder";
-        state.placeholder.style.cssText = `display:flex;justify-content:center;align-items:center;width:100%;height:100%;`;
-        state.placeholder.textContent = options.placeholder;
-        state.originalParent = $player.parentNode;
-        state.originalNext = $player.nextSibling;
-        state.originalParent.insertBefore(state.placeholder, state.originalNext);
-        const root = pipWin.document.createElement("div");
-        root.id = "__art_dpip_root";
-        pipWin.document.body.appendChild(root);
-        copyStylesTo(pipWin.document);
-        const adopted = pipWin.document.adoptNode($player);
-        root.appendChild(adopted);
-        state.currentDoc = pipWin.document;
-        const onResize = () => art.resize?.();
-        const onClose = () => close();
-        pipWin.addEventListener("resize", onResize);
-        pipWin.addEventListener("pagehide", onClose);
-        pipWin.addEventListener("unload", onClose);
-        state.cleanup = () => {
-          pipWin.removeEventListener("resize", onResize);
-          pipWin.removeEventListener("pagehide", onClose);
-          pipWin.removeEventListener("unload", onClose);
-        };
-        addClass($player, "artplayer-document-pip");
-        art.events.bindGlobalEvents?.();
-        art.emit("document-pip", true);
-        await sleep(100);
-        art.emit("resize");
-      } catch (err) {
-        art.notice.show = "Document Picture-in-Picture open failed";
-        console.warn("[artplayer-plugin-document-pip] open failed:", err);
-      }
-    }
-    function restoreToOriginalDocument() {
-      if (!state.placeholder)
-        return;
-      const backDoc = state.placeholder.ownerDocument || document;
-      const adoptedBack = backDoc.adoptNode($player);
-      state.originalParent.insertBefore(adoptedBack, state.placeholder);
-      state.placeholder.remove();
-      state.placeholder = null;
-      state.currentDoc = backDoc;
-    }
-    async function close() {
-      if (!state.win)
-        return;
-      try {
-        state.cleanup?.();
-        restoreToOriginalDocument();
-        state.win.close();
-        state.win = null;
-        removeClass($player, "artplayer-document-pip");
-        art.events.bindGlobalEvents?.();
-        art.emit("document-pip", false);
-        await sleep(100);
-        art.emit("resize");
-      } catch (err) {
-        art.notice.show = "Document Picture-in-Picture close failed";
-        console.warn("[artplayer-plugin-document-pip] close failed:", err);
-      }
+      return session.open();
     }
     function toggle() {
-      if (state.win) {
-        close();
-      } else {
-        open();
-      }
+      if (!alive())
+        return;
+      if (session.active || session.opening)
+        void session.close();
+      else
+        void open();
     }
-    art.controls.add({
-      name: "document-pip",
-      position: "right",
-      index: 40,
-      tooltip: art.i18n.get("PIP Mode"),
-      mounted: ($control) => {
-        append($control, icons.pip);
-        proxy($control, "click", toggle);
-        art.on("document-pip", (value) => {
-          tooltip($control, i18n.get(value ? "Exit PIP Mode" : "PIP Mode"));
-        });
-      }
-    });
-    art.on("destroy", close);
-    return {
+    let control = createControl(art, toggle, alive);
+    function destroy() {
+      if (closed)
+        return;
+      closed = true;
+      const current = host;
+      const previousControl = control;
+      control = null;
+      const errors = releaseAll([session.destroy, () => previousControl?.destroy(), () => current?.off("destroy", destroy)]);
+      host = null;
+      player = null;
+      if (errors.length)
+        console.warn("[artplayer-plugin-document-pip] cleanup failed:", errors[0]);
+    }
+    const result = {
       name: "artplayerPluginDocumentPip",
       get isSupported() {
         return isSupported;
       },
       get isActive() {
-        return !!state.win;
+        return session.active;
       },
       open,
-      close,
+      close: session.close,
       toggle
     };
+    if (closed) {
+      host = null;
+      player = null;
+      return result;
+    }
+    try {
+      art.on("destroy", destroy);
+      if (alive())
+        control?.mount();
+      else
+        art.off("destroy", destroy);
+    } catch (error) {
+      destroy();
+      throw error;
+    }
+    return result;
   };
 }
-if (typeof document !== "undefined") {
-  const id = "artplayer-plugin-document-pip";
-  let $style = document.getElementById(id);
-  if (!$style) {
-    $style = document.createElement("style");
-    $style.id = id;
-    if (document.readyState === "loading") {
-      document.addEventListener("DOMContentLoaded", () => {
-        document.head.appendChild($style);
-      });
-    } else {
-      (document.head || document.documentElement).appendChild($style);
-    }
-  }
-  $style.textContent = style;
-}
+if (typeof document !== "undefined")
+  installStyle(document);
 export {
   artplayerPluginDocumentPip as default
 };