From abd64e11f2b24cb4a3f506bb1ec315ed628560ac Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Sat, 16 Aug 2025 18:05:32 +0800 Subject: [PATCH] refactor: update references from $container to $player in Document Picture-in-Picture plugin --- .../artplayer-plugin-document-pip/index.js | 16 ++++++++-------- .../artplayer-plugin-document-pip/index.js.map | 2 +- .../artplayer-plugin-document-pip/src/index.js | 14 +++++++------- .../artplayer-plugin-document-pip/src/style.less | 8 +++----- 4 files changed, 19 insertions(+), 21 deletions(-) diff --git a/docs/uncompiled/artplayer-plugin-document-pip/index.js b/docs/uncompiled/artplayer-plugin-document-pip/index.js index 928f45797..05e5a1c9b 100644 --- a/docs/uncompiled/artplayer-plugin-document-pip/index.js +++ b/docs/uncompiled/artplayer-plugin-document-pip/index.js @@ -176,7 +176,7 @@ function artplayerPluginDocumentPip(userOptions = {}) { }; return (art)=>{ const isSupported = 'documentPictureInPicture' in window && typeof window.documentPictureInPicture?.requestWindow === 'function'; - const { proxy, icons, i18n, template: { $container }, constructor: { utils: { append, tooltip, addClass, removeClass } } } = art; + const { proxy, icons, i18n, template: { $player }, constructor: { utils: { append, tooltip, addClass, removeClass } } } = art; const state = { win: null, originalParent: null, @@ -235,14 +235,14 @@ function artplayerPluginDocumentPip(userOptions = {}) { 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 = $container.parentNode; - state.originalNext = $container.nextSibling; + 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($container); + const adopted = pipWin.document.adoptNode($player); root.appendChild(adopted); state.currentDoc = pipWin.document; const onResize = ()=>art.resize?.(); @@ -255,7 +255,7 @@ function artplayerPluginDocumentPip(userOptions = {}) { pipWin.removeEventListener('pagehide', onClose); pipWin.removeEventListener('unload', onClose); }; - addClass($container, 'artplayer-document-pip'); + addClass($player, 'artplayer-document-pip'); art.emit('document-pip', true); } catch (err) { art.notice.show = 'Document Picture-in-Picture open failed'; @@ -265,7 +265,7 @@ function artplayerPluginDocumentPip(userOptions = {}) { function restoreToOriginalDocument() { if (!state.placeholder) return; const backDoc = state.placeholder.ownerDocument || document; - const adoptedBack = backDoc.adoptNode($container); + const adoptedBack = backDoc.adoptNode($player); state.originalParent.insertBefore(adoptedBack, state.placeholder); state.placeholder.remove(); state.placeholder = null; @@ -278,7 +278,7 @@ function artplayerPluginDocumentPip(userOptions = {}) { restoreToOriginalDocument(); state.win.close(); state.win = null; - removeClass($container, 'artplayer-document-pip'); + removeClass($player, 'artplayer-document-pip'); art.emit('document-pip', false); } catch (err) { art.notice.show = 'Document Picture-in-Picture close failed'; @@ -333,7 +333,7 @@ if (typeof document !== 'undefined') { } },{"bundle-text:./style.less":"dS6Bp","@parcel/transformer-js/src/esmodule-helpers.js":"8oCsH"}],"dS6Bp":[function(require,module,exports,__globalThis) { -module.exports = ".artplayer-document-pip .art-video-player {\n width: 100% !important;\n height: 100% !important;\n}\n"; +module.exports = ".artplayer-document-pip.art-video-player {\n width: 100% !important;\n height: 100% !important;\n}\n"; },{}],"8oCsH":[function(require,module,exports,__globalThis) { exports.interopDefault = function(a) { diff --git a/docs/uncompiled/artplayer-plugin-document-pip/index.js.map b/docs/uncompiled/artplayer-plugin-document-pip/index.js.map index acf845edc..c8ff4cd0f 100644 --- a/docs/uncompiled/artplayer-plugin-document-pip/index.js.map +++ b/docs/uncompiled/artplayer-plugin-document-pip/index.js.map @@ -1 +1 @@ -{"mappings":"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","sources":["packages/artplayer-plugin-document-pip/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-f69d04bcc7b1cbb1.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less'\n\nexport default function artplayerPluginDocumentPip(userOptions = {}) {\n const options = {\n width: 480,\n height: 270,\n fallbackToVideoPiP: true,\n placeholder: `Playing in Document Picture-in-Picture`,\n ...userOptions,\n }\n\n return (art) => {\n const isSupported = 'documentPictureInPicture' in window\n && typeof window.documentPictureInPicture?.requestWindow === 'function'\n\n const { proxy, icons, i18n, template: { $container }, constructor: { utils: { append, tooltip, addClass, removeClass } } } = art\n\n const state = {\n win: null,\n originalParent: null,\n originalNext: null,\n currentDoc: null,\n placeholder: null,\n }\n\n function copyStylesTo(targetDoc) {\n const base = targetDoc.createElement('style')\n base.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 `\n targetDoc.head.appendChild(base)\n if (!targetDoc.querySelector('meta[name=\"viewport\"]')) {\n const meta = targetDoc.createElement('meta')\n meta.name = 'viewport'\n meta.content = 'width=device-width,initial-scale=1'\n targetDoc.head.appendChild(meta)\n }\n\n try {\n document.querySelectorAll('link[rel=\"stylesheet\"]').forEach((link) => {\n const clone = targetDoc.createElement('link')\n clone.rel = 'stylesheet'\n clone.href = link.href\n if (link.media)\n clone.media = link.media\n if (link.crossOrigin)\n clone.crossOrigin = link.crossOrigin\n if (link.referrerPolicy)\n clone.referrerPolicy = link.referrerPolicy\n targetDoc.head.appendChild(clone)\n })\n }\n catch { }\n\n try {\n document.querySelectorAll('style').forEach((style) => {\n const clone = targetDoc.createElement('style')\n clone.textContent = style.textContent\n targetDoc.head.appendChild(clone)\n })\n }\n catch { }\n }\n\n async function open() {\n if (!isSupported && options.fallbackToVideoPiP) {\n art.pip = true\n console.warn('[artplayer-plugin-document-pip] Document Picture-in-Picture is not supported, falling back to Video Picture-in-Picture')\n return\n }\n\n if (state.win)\n return\n\n try {\n const pipWin = await window.documentPictureInPicture.requestWindow({\n width: options.width,\n height: options.height,\n })\n\n state.win = pipWin\n state.currentDoc = pipWin.document\n\n state.placeholder = document.createElement('div')\n state.placeholder.className = 'artplayer-document-pip-placeholder'\n state.placeholder.style.cssText = `display:flex;justify-content:center;align-items:center;width:100%;height:100%;`\n state.placeholder.textContent = options.placeholder\n state.originalParent = $container.parentNode\n state.originalNext = $container.nextSibling\n state.originalParent.insertBefore(state.placeholder, state.originalNext)\n\n const root = pipWin.document.createElement('div')\n root.id = '__art_dpip_root'\n pipWin.document.body.appendChild(root)\n\n copyStylesTo(pipWin.document)\n\n const adopted = pipWin.document.adoptNode($container)\n root.appendChild(adopted)\n state.currentDoc = pipWin.document\n\n const onResize = () => art.resize?.()\n const onClose = () => close()\n\n pipWin.addEventListener('resize', onResize)\n pipWin.addEventListener('pagehide', onClose)\n pipWin.addEventListener('unload', onClose)\n\n state.cleanup = () => {\n pipWin.removeEventListener('resize', onResize)\n pipWin.removeEventListener('pagehide', onClose)\n pipWin.removeEventListener('unload', onClose)\n }\n\n addClass($container, 'artplayer-document-pip')\n art.emit('document-pip', true)\n }\n catch (err) {\n art.notice.show = 'Document Picture-in-Picture open failed'\n console.warn('[artplayer-plugin-document-pip] open failed:', err)\n }\n }\n\n function restoreToOriginalDocument() {\n if (!state.placeholder)\n return\n const backDoc = state.placeholder.ownerDocument || document\n const adoptedBack = backDoc.adoptNode($container)\n state.originalParent.insertBefore(adoptedBack, state.placeholder)\n state.placeholder.remove()\n state.placeholder = null\n state.currentDoc = backDoc\n }\n\n function close() {\n if (!state.win)\n return\n try {\n state.cleanup?.()\n restoreToOriginalDocument()\n state.win.close()\n state.win = null\n removeClass($container, 'artplayer-document-pip')\n art.emit('document-pip', false)\n }\n catch (err) {\n art.notice.show = 'Document Picture-in-Picture close failed'\n console.warn('[artplayer-plugin-document-pip] close failed:', err)\n }\n }\n\n function toggle() {\n if (state.win) {\n close()\n }\n else {\n open()\n }\n }\n\n art.controls.add({\n name: 'document-pip',\n position: 'right',\n index: 40,\n tooltip: art.i18n.get('PIP Mode'),\n mounted: ($control) => {\n append($control, icons.pip)\n proxy($control, 'click', toggle)\n art.on('document-pip', (value) => {\n tooltip($control, i18n.get(value ? 'Exit PIP Mode' : 'PIP Mode'))\n })\n },\n })\n\n art.on('destroy', close)\n\n return {\n name: 'artplayerPluginDocumentPip',\n get isSupported() { return isSupported },\n get isActive() { return !!state.win },\n open,\n close,\n toggle,\n }\n }\n}\n\nif (typeof window !== 'undefined') {\n window.artplayerPluginDocumentPip = artplayerPluginDocumentPip\n}\n\nif (typeof document !== 'undefined') {\n const id = 'artplayer-plugin-document-pip'\n let $style = document.getElementById(id)\n if (!$style) {\n $style = document.createElement('style')\n $style.id = id\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n document.head.appendChild($style)\n })\n }\n else {\n (document.head || document.documentElement).appendChild($style)\n }\n }\n $style.textContent = style\n}\n","module.exports = \"d8f4166e4e8bcb78\";","exports.interopDefault = function (a) {\n return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n Object.keys(source).forEach(function (key) {\n if (\n key === 'default' ||\n key === '__esModule' ||\n Object.prototype.hasOwnProperty.call(dest, key)\n ) {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function () {\n return source[key];\n },\n });\n });\n\n return dest;\n};\n\nexports.export = function (dest, destName, get) {\n Object.defineProperty(dest, destName, {\n enumerable: true,\n get: get,\n });\n};\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../"} \ No newline at end of file +{"mappings":"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","sources":["packages/artplayer-plugin-document-pip/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-f69d04bcc7b1cbb1.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less'\n\nexport default function artplayerPluginDocumentPip(userOptions = {}) {\n const options = {\n width: 480,\n height: 270,\n fallbackToVideoPiP: true,\n placeholder: `Playing in Document Picture-in-Picture`,\n ...userOptions,\n }\n\n return (art) => {\n const isSupported = 'documentPictureInPicture' in window\n && typeof window.documentPictureInPicture?.requestWindow === 'function'\n\n const { proxy, icons, i18n, template: { $player }, constructor: { utils: { append, tooltip, addClass, removeClass } } } = art\n\n const state = {\n win: null,\n originalParent: null,\n originalNext: null,\n currentDoc: null,\n placeholder: null,\n }\n\n function copyStylesTo(targetDoc) {\n const base = targetDoc.createElement('style')\n base.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 `\n targetDoc.head.appendChild(base)\n if (!targetDoc.querySelector('meta[name=\"viewport\"]')) {\n const meta = targetDoc.createElement('meta')\n meta.name = 'viewport'\n meta.content = 'width=device-width,initial-scale=1'\n targetDoc.head.appendChild(meta)\n }\n\n try {\n document.querySelectorAll('link[rel=\"stylesheet\"]').forEach((link) => {\n const clone = targetDoc.createElement('link')\n clone.rel = 'stylesheet'\n clone.href = link.href\n if (link.media)\n clone.media = link.media\n if (link.crossOrigin)\n clone.crossOrigin = link.crossOrigin\n if (link.referrerPolicy)\n clone.referrerPolicy = link.referrerPolicy\n targetDoc.head.appendChild(clone)\n })\n }\n catch { }\n\n try {\n document.querySelectorAll('style').forEach((style) => {\n const clone = targetDoc.createElement('style')\n clone.textContent = style.textContent\n targetDoc.head.appendChild(clone)\n })\n }\n catch { }\n }\n\n async function open() {\n if (!isSupported && options.fallbackToVideoPiP) {\n art.pip = true\n console.warn('[artplayer-plugin-document-pip] Document Picture-in-Picture is not supported, falling back to Video Picture-in-Picture')\n return\n }\n\n if (state.win)\n return\n\n try {\n const pipWin = await window.documentPictureInPicture.requestWindow({\n width: options.width,\n height: options.height,\n })\n\n state.win = pipWin\n state.currentDoc = pipWin.document\n\n state.placeholder = document.createElement('div')\n state.placeholder.className = 'artplayer-document-pip-placeholder'\n state.placeholder.style.cssText = `display:flex;justify-content:center;align-items:center;width:100%;height:100%;`\n state.placeholder.textContent = options.placeholder\n state.originalParent = $player.parentNode\n state.originalNext = $player.nextSibling\n state.originalParent.insertBefore(state.placeholder, state.originalNext)\n\n const root = pipWin.document.createElement('div')\n root.id = '__art_dpip_root'\n pipWin.document.body.appendChild(root)\n\n copyStylesTo(pipWin.document)\n\n const adopted = pipWin.document.adoptNode($player)\n root.appendChild(adopted)\n state.currentDoc = pipWin.document\n\n const onResize = () => art.resize?.()\n const onClose = () => close()\n\n pipWin.addEventListener('resize', onResize)\n pipWin.addEventListener('pagehide', onClose)\n pipWin.addEventListener('unload', onClose)\n\n state.cleanup = () => {\n pipWin.removeEventListener('resize', onResize)\n pipWin.removeEventListener('pagehide', onClose)\n pipWin.removeEventListener('unload', onClose)\n }\n\n addClass($player, 'artplayer-document-pip')\n art.emit('document-pip', true)\n }\n catch (err) {\n art.notice.show = 'Document Picture-in-Picture open failed'\n console.warn('[artplayer-plugin-document-pip] open failed:', err)\n }\n }\n\n function restoreToOriginalDocument() {\n if (!state.placeholder)\n return\n const backDoc = state.placeholder.ownerDocument || document\n const adoptedBack = backDoc.adoptNode($player)\n state.originalParent.insertBefore(adoptedBack, state.placeholder)\n state.placeholder.remove()\n state.placeholder = null\n state.currentDoc = backDoc\n }\n\n function close() {\n if (!state.win)\n return\n try {\n state.cleanup?.()\n restoreToOriginalDocument()\n state.win.close()\n state.win = null\n removeClass($player, 'artplayer-document-pip')\n art.emit('document-pip', false)\n }\n catch (err) {\n art.notice.show = 'Document Picture-in-Picture close failed'\n console.warn('[artplayer-plugin-document-pip] close failed:', err)\n }\n }\n\n function toggle() {\n if (state.win) {\n close()\n }\n else {\n open()\n }\n }\n\n art.controls.add({\n name: 'document-pip',\n position: 'right',\n index: 40,\n tooltip: art.i18n.get('PIP Mode'),\n mounted: ($control) => {\n append($control, icons.pip)\n proxy($control, 'click', toggle)\n art.on('document-pip', (value) => {\n tooltip($control, i18n.get(value ? 'Exit PIP Mode' : 'PIP Mode'))\n })\n },\n })\n\n art.on('destroy', close)\n\n return {\n name: 'artplayerPluginDocumentPip',\n get isSupported() { return isSupported },\n get isActive() { return !!state.win },\n open,\n close,\n toggle,\n }\n }\n}\n\nif (typeof window !== 'undefined') {\n window.artplayerPluginDocumentPip = artplayerPluginDocumentPip\n}\n\nif (typeof document !== 'undefined') {\n const id = 'artplayer-plugin-document-pip'\n let $style = document.getElementById(id)\n if (!$style) {\n $style = document.createElement('style')\n $style.id = id\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n document.head.appendChild($style)\n })\n }\n else {\n (document.head || document.documentElement).appendChild($style)\n }\n }\n $style.textContent = style\n}\n","module.exports = \"d8f4166e4e8bcb78\";","exports.interopDefault = function (a) {\n return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n Object.keys(source).forEach(function (key) {\n if (\n key === 'default' ||\n key === '__esModule' ||\n Object.prototype.hasOwnProperty.call(dest, key)\n ) {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function () {\n return source[key];\n },\n });\n });\n\n return dest;\n};\n\nexports.export = function (dest, destName, get) {\n Object.defineProperty(dest, destName, {\n enumerable: true,\n get: get,\n });\n};\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../"} \ No newline at end of file diff --git a/packages/artplayer-plugin-document-pip/src/index.js b/packages/artplayer-plugin-document-pip/src/index.js index 5714fb04a..97454abbf 100644 --- a/packages/artplayer-plugin-document-pip/src/index.js +++ b/packages/artplayer-plugin-document-pip/src/index.js @@ -13,7 +13,7 @@ export default function artplayerPluginDocumentPip(userOptions = {}) { const isSupported = 'documentPictureInPicture' in window && typeof window.documentPictureInPicture?.requestWindow === 'function' - const { proxy, icons, i18n, template: { $container }, constructor: { utils: { append, tooltip, addClass, removeClass } } } = art + const { proxy, icons, i18n, template: { $player }, constructor: { utils: { append, tooltip, addClass, removeClass } } } = art const state = { win: null, @@ -87,8 +87,8 @@ export default function artplayerPluginDocumentPip(userOptions = {}) { 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 = $container.parentNode - state.originalNext = $container.nextSibling + state.originalParent = $player.parentNode + state.originalNext = $player.nextSibling state.originalParent.insertBefore(state.placeholder, state.originalNext) const root = pipWin.document.createElement('div') @@ -97,7 +97,7 @@ export default function artplayerPluginDocumentPip(userOptions = {}) { copyStylesTo(pipWin.document) - const adopted = pipWin.document.adoptNode($container) + const adopted = pipWin.document.adoptNode($player) root.appendChild(adopted) state.currentDoc = pipWin.document @@ -114,7 +114,7 @@ export default function artplayerPluginDocumentPip(userOptions = {}) { pipWin.removeEventListener('unload', onClose) } - addClass($container, 'artplayer-document-pip') + addClass($player, 'artplayer-document-pip') art.emit('document-pip', true) } catch (err) { @@ -127,7 +127,7 @@ export default function artplayerPluginDocumentPip(userOptions = {}) { if (!state.placeholder) return const backDoc = state.placeholder.ownerDocument || document - const adoptedBack = backDoc.adoptNode($container) + const adoptedBack = backDoc.adoptNode($player) state.originalParent.insertBefore(adoptedBack, state.placeholder) state.placeholder.remove() state.placeholder = null @@ -142,7 +142,7 @@ export default function artplayerPluginDocumentPip(userOptions = {}) { restoreToOriginalDocument() state.win.close() state.win = null - removeClass($container, 'artplayer-document-pip') + removeClass($player, 'artplayer-document-pip') art.emit('document-pip', false) } catch (err) { diff --git a/packages/artplayer-plugin-document-pip/src/style.less b/packages/artplayer-plugin-document-pip/src/style.less index a99ea3e9c..1083d2c54 100644 --- a/packages/artplayer-plugin-document-pip/src/style.less +++ b/packages/artplayer-plugin-document-pip/src/style.less @@ -1,6 +1,4 @@ -.artplayer-document-pip { - .art-video-player{ - width: 100% !important; - height: 100% !important; - } +.artplayer-document-pip.art-video-player{ + width: 100% !important; + height: 100% !important; } \ No newline at end of file