mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-25 16:11:20 -08:00
feat: update changelog with Parcel to Vite refactor
feat: add danmuku plugin documentation and i18n setup guide - Created a new documentation file for the danmuku plugin with code examples. - Added a comprehensive guide for language settings (i18n) including default languages, importing languages, adding new languages, and modifying existing languages. - Included code snippets for initializing the Artplayer with different language settings. Add internationalization support for multiple languages in Artplayer - Introduced Arabic (ar), Czech (cs), Spanish (es), Persian (fa), French (fr), Indonesian (id), Polish (pl), Russian (ru), Turkish (tr), Vietnamese (vi), and Traditional Chinese (zh-tw) translations. - Created corresponding JavaScript and ES module files for each language containing translated strings for player controls and settings. - Added a new documentation file for language settings in the project. feat: add initial implementation of start option page with interactive code execution buttons feat: add danmuku plugin documentation and i18n setup guide - Created a new documentation file for the danmuku plugin, providing code examples for usage. - Added a comprehensive guide for language settings, including default languages, importing languages, adding new languages, and modifying existing languages. - Included code snippets for initializing the Artplayer with different language settings and importing language files. refactor: update danmuku worker implementation and remove unused i18n files - Changed the way the Danmuku class creates a Web Worker by using a worker loader instead of creating a blob. - Removed Arabic, Czech, Spanish, Persian, French, Indonesian, Polish, Russian, Turkish, Vietnamese, and Traditional Chinese i18n files as they are no longer needed. - Updated the Vite build configuration to disable banners for inline workers and added a plugin to remove worker banners from generated code. feat: add danmuku plugin and i18n setup documentation - Created a new documentation file for the danmuku plugin, providing code examples for usage. - Added a new documentation file for language settings (i18n), detailing how to set default languages, import languages, and add new languages. - Included code snippets for initializing the Artplayer with different language settings and examples for modifying existing languages. feat: add danmuku plugin and i18n setup documentation - Created a new documentation file for the danmuku plugin with code examples. - Added a new documentation file for language settings (i18n) including import instructions and examples for setting default and custom languages. - Updated the i18n documentation to include details on adding and modifying languages. feat: add danmuku plugin and i18n setup documentation - Created a new JavaScript file for the danmuku plugin documentation with multiple code execution buttons. - Added a new JavaScript file for i18n (internationalization) setup documentation, including instructions for language settings, importing languages, and modifying language options. - Included examples for setting default languages and adding new languages in the i18n documentation. Refactor code structure for improved readability and maintainability
This commit is contained in:
Harvey Zhao committed
1 parent
ddb78cf850
commit
699bf09577
397 files changed
+99776
-8638
No files matched your search
@@ -1,8 +1,197 @@
|
||||
|
||||
/*!
|
||||
* artplayer-plugin-document-pip.js v1.0.2
|
||||
* artplayer-plugin-document-pip.js v1.0.3
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer
|
||||
* (c) 2017-2026 Harvey Zhao
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,t,n,r,i){var o="u">typeof globalThis?globalThis:"u">typeof self?self:"u">typeof window?window:"u">typeof global?global:{},l="function"==typeof o[r]&&o[r],a=l.i||{},d=l.cache||{},u="u">typeof module&&"function"==typeof module.require&&module.require.bind(module);function c(t,n){if(!d[t]){if(!e[t]){if(i[t])return i[t];var a="function"==typeof o[r]&&o[r];if(!n&&a)return a(t,!0);if(l)return l(t,!0);if(u&&"string"==typeof t)return u(t);var p=Error("Cannot find module '"+t+"'");throw p.code="MODULE_NOT_FOUND",p}s.resolve=function(n){var r=e[t][1][n];return null!=r?r:n},s.cache={};var f=d[t]=new c.Module(t);e[t][0].call(f.exports,s,f,f.exports,o)}return d[t].exports;function s(e){var t=s.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var n={__esModule:!0};return t.forEach(function(e){var t=e[0],r=e[1],i=e[2]||e[0],o=c(r);"*"===t?Object.keys(o).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:function(){return o[e]}})}):"*"===i?Object.defineProperty(n,t,{enumerable:!0,value:o}):Object.defineProperty(n,t,{enumerable:!0,get:function(){return"default"===i?o.__esModule?o.default:o:o[i]}})}),n}return c(t)}}c.isParcelRequire=!0,c.Module=function(e){this.id=e,this.bundle=c,this.require=u,this.exports={}},c.modules=e,c.cache=d,c.parent=l,c.distDir=void 0,c.publicUrl=void 0,c.devServer=void 0,c.i=a,c.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(c,"root",{get:function(){return o[r]}}),o[r]=c;for(var p=0;p<t.length;p++)c(t[p]);if(n){var f=c(n);"object"==typeof exports&&"u">typeof module?module.exports=f:"function"==typeof define&&define.amd&&define(function(){return f})}}({fiyFV:[function(e,t,n,r){var i=e("@parcel/transformer-js/src/esmodule-helpers.js");i.defineInteropFlag(n),i.export(n,"default",()=>a);var o=e("bundle-text:./style.less"),l=i.interopDefault(o);function a(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:{$player:l},constructor:{utils:{append:a,tooltip:d,addClass:u,removeClass:c,sleep:p}}}=e,f={win:null,originalParent:null,originalNext:null,currentDoc:null,placeholder:null};async function s(){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(!f.win)try{let n=await window.documentPictureInPicture.requestWindow({width:t.width,height:t.height});f.win=n,f.currentDoc=n.document,f.placeholder=document.createElement("div"),f.placeholder.className="artplayer-document-pip-placeholder",f.placeholder.style.cssText="display:flex;justify-content:center;align-items:center;width:100%;height:100%;",f.placeholder.textContent=t.placeholder,f.originalParent=l.parentNode,f.originalNext=l.nextSibling,f.originalParent.insertBefore(f.placeholder,f.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 a=n.document.adoptNode(l);i.appendChild(a),f.currentDoc=n.document;let d=()=>e.resize?.(),c=()=>m();n.addEventListener("resize",d),n.addEventListener("pagehide",c),n.addEventListener("unload",c),f.cleanup=()=>{n.removeEventListener("resize",d),n.removeEventListener("pagehide",c),n.removeEventListener("unload",c)},u(l,"artplayer-document-pip"),e.events.bindGlobalEvents?.(),e.emit("document-pip",!0),await p(100),e.emit("resize")}catch(t){e.notice.show="Document Picture-in-Picture open failed",console.warn("[artplayer-plugin-document-pip] open failed:",t)}}async function m(){if(f.win)try{f.cleanup?.(),function(){if(!f.placeholder)return;let e=f.placeholder.ownerDocument||document,t=e.adoptNode(l);f.originalParent.insertBefore(t,f.placeholder),f.placeholder.remove(),f.placeholder=null,f.currentDoc=e}(),f.win.close(),f.win=null,c(l,"artplayer-document-pip"),e.events.bindGlobalEvents?.(),e.emit("document-pLine truncated
|
||||
const style = ".artplayer-document-pip.art-video-player{width:100%!important;height:100%!important}";
|
||||
function artplayerPluginDocumentPip(userOptions = {}) {
|
||||
const options = {
|
||||
width: 480,
|
||||
height: 270,
|
||||
fallbackToVideoPiP: true,
|
||||
placeholder: `Playing in Document Picture-in-Picture`,
|
||||
...userOptions
|
||||
};
|
||||
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);
|
||||
}
|
||||
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 {
|
||||
}
|
||||
}
|
||||
async function open() {
|
||||
if (!isSupported && options.fallbackToVideoPiP) {
|
||||
art.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);
|
||||
}
|
||||
}
|
||||
function toggle() {
|
||||
if (state.win) {
|
||||
close();
|
||||
} else {
|
||||
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 {
|
||||
name: "artplayerPluginDocumentPip",
|
||||
get isSupported() {
|
||||
return isSupported;
|
||||
},
|
||||
get isActive() {
|
||||
return !!state.win;
|
||||
},
|
||||
open,
|
||||
close,
|
||||
toggle
|
||||
};
|
||||
};
|
||||
}
|
||||
if (typeof window !== "undefined") {
|
||||
window.artplayerPluginDocumentPip = artplayerPluginDocumentPip;
|
||||
}
|
||||
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;
|
||||
}
|
||||
export {
|
||||
artplayerPluginDocumentPip as default
|
||||
};
|
||||
Reference in new issue
Block a user