feat: add danmuku plugin documentation and i18n setup guide

- Created a new documentation file for the danmuku plugin, including code snippets for usage.
- Added a new i18n setup guide, detailing language settings, default languages, language imports, and how to add or modify languages.
- Included example code for initializing the Artplayer with different languages and importing language files.

Author: zhw2590582

docs/compiled/artplayer-plugin-ads.mjs

@@ -4,4 +4,248 @@
  * (c) 2017-2026 Harvey Zhao
  * Released under the MIT License.
  */
-function l(e){return n=>{!function(e){const{version:n,utils:{errorHandle:a}}=e.constructor,i=n.split(".").map(Number);a(i[0]+i[1]/100>=5,`Artplayer.js@${n} is not compatible the artplayerPluginAds@${l.version}. Please update it to version Artplayer.js@5.x.x`)}(n);const{template:{$player:a},icons:{volume:i,volumeClose:t,fullscreenOn:r,fullscreenOff:d,loading:o},constructor:{validator:s,utils:{query:p,append:u,setStyle:c}}}=n;e=s({html:"",video:"",url:"",playDuration:5,totalDuration:10,muted:!1,i18n:{close:"\u5173\u95ed\u5e7f\u544a",countdown:"%s\u79d2",detail:"\u67e5\u770b\u8be6\u60c5",canBeClosed:"%s\u79d2\u540e\u53ef\u5173\u95ed\u5e7f\u544a"},...e},{html:"?string",video:"?string",url:"?string",playDuration:"number",totalDuration:"number",muted:"?boolean",i18n:{close:"string",countdown:"string",detail:"string",canBeClosed:"string"}});let y=null,g=null,m=null,f=null,v=null,x=null,h=0,b=null,w=!1,$=!1,k=!1;function D(l,e){return e.replace("%s",l)}function A(){w=!0,n.play(),e.video&&y.pause(),c(n.template.$ads,"display","none"),n.emit("artplayerPluginAds:skip",e)}function C(){w||(b=setTimeout(()=>{h+=1;const l=e.playDuration-h;l>=1?m.innerHTML=D(l,e.i18n.canBeClosed):(m.innerHTML=e.i18n.close,k||(k=!0)),f.innerHTML=D(e.totalDuration-h,e.i18n.countdown),h>=e.totalDuration?A():C()},1e3))}function P(){w||clearTimeout(b)}function B(){$||($=!0,function(){n.template.$ads=u(a,'<div class="artplayer-plugin-ads"></div>'),y=u(n.template.$ads,e.video?`<video class="artplayer-plugin-ads-video" src="${e.video}" loop playsInline></video>`:`<div class="artplayer-plugin-ads-html">${e.html}</div>`),x=u(n.template.$ads,'<div class="artplayer-plugin-ads-loading"></div>'),u(x,o),g=u(n.template.$ads,`<div class="artplayer-plugin-ads-timer">\n                    <div class="artplayer-plugin-ads-close">${e.playDuration<=0?e.i18n.close:D(e.playDuration,e.i18n.canBeClosed)}</div>\n                    <div class="artplayer-plugin-ads-countdown">${D(e.totalDuration,e.i18n.countdown)}</div>\n                </div>`),m=p(".artplayer-plugin-ads-close",g),f=p(".artplayer-plugin-ads-countdown",g),e.playDuration>=e.totalDuration&&c(m,"display","none"),n.proxy(m,"click",()=>{k&&A()}),v=u(n.template.$ads,`<div class="artplayer-plugin-ads-control">\n                    <div class="artplayer-plugin-ads-detail">${e.i18n.detail}</div>\n                    <div class="artplayer-plugin-ads-muted"></div>\n                    <div class="artplayer-plugin-ads-fullscreen"></div>\n                </div>`);const l=p(".artplayer-plugin-ads-detail",v),s=p(".artplayer-plugin-ads-muted",v),h=p(".artplayer-plugin-ads-fullscreen",v);if(e.url?n.proxy(l,"click",()=>{window.open(e.url),n.emit("artplayerPluginAds:click",e)}):c(l,"display","none"),e.video){const l=u(s,i),a=u(s,t);c(a,"display","none"),e.muted&&(y.muted=!0,c(l,"display","none"),c(a,"display","inline-flex")),n.proxy(s,"click",()=>{y.muted=!y.muted,y.muted?(c(l,"display","none"),c(a,"display","inline-flex")):(c(l,"display","inline-flex"),c(a,"display","none"))})}else c(s,"display","none");const b=u(h,r),w=u(h,d);c(w,"display","none"),n.proxy(h,"click",()=>{n.fullscreen=!n.fullscreen,n.fullscreen?(c(b,"display","inline-flex"),c(w,"display","none")):(c(b,"display","none"),c(w,"display","inline-flex"))}),n.proxy(y,"click",()=>{e.url&&window.open(e.url),n.emit("artplayerPluginAds:click",e)})}(),n.pause(),e.video?(n.proxy(y,"error",A),n.proxy(y,"loadedmetadata",()=>{C(),y.play(),c(g,"display","flex"),c(v,"display","flex"),c(x,"display","none")})):(C(),c(g,"display","flex"),c(v,"display","flex"),c(x,"display","none")),n.on("document:visibilitychange",()=>{document.hidden?P():C()}))}return n.on("ready",()=>{n.once("play",B),n.once("video:playing",B)}),{name:"artplayerPluginAds",skip:A,pause:P,play:C}}}if("undefined"!==typeof document&&!document.getElementById("artplayer-plugin-ads")){const l=document.createElement("style");l.id="artplayer-plugin-ads",l.textContent=".artplayer-plugin-ads{position:absolute;z-index:150;inset:0;width:100%;height:100%;overflow:hidden;font-size:13px;line-height:1;color:#fff;background-color:#000}.artplayer-plugin-ads .artplayer-plugin-ads-html{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.artplayer-plugin-ads .artplayer-plugin-ads-video{width:100%;height:100%}.artplayer-plugin-ads .artplayer-plugin-ads-timer{display:none;position:absolute;top:10px;right:10px}.artplayer-plugin-ads .artplayer-plugin-ads-timer>div{display:flex;align-items:center;background-color:#00000080;border-radius:15px;margin-left:5px;padding:5px 10px;cursor:pointer}.artplayer-plugin-ads .artplayer-plugin-ads-control{display:none;position:absolute;bottom:10px;right:10px}.artplayer-plugin-ads .artplayer-plugin-ads-control>div{display:flex;align-items:center;background-color:#00000080;border-radius:15px;margin-left:5px;padding:5px 10px;cursor:pointer}.artplayer-plugin-ads .artplayer-plugin-ads-control .art-icon svg{width:20px;height:20px}.artplayer-plugin-ads .artplayer-plugin-ads-loading{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;width:100%;height:100%}",document.head.appendChild(l)}export{l as default};
+const style = ".artplayer-plugin-ads {\n  position: absolute;\n  z-index: 150;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  font-size: 13px;\n  line-height: 1;\n  color: #fff;\n  background-color: #000;\n}\n.artplayer-plugin-ads .artplayer-plugin-ads-html {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n.artplayer-plugin-ads .artplayer-plugin-ads-video {\n  width: 100%;\n  height: 100%;\n}\n.artplayer-plugin-ads .artplayer-plugin-ads-timer {\n  display: none;\n  position: absolute;\n  top: 10px;\n  right: 10px;\n}\n.artplayer-plugin-ads .artplayer-plugin-ads-timer > div {\n  display: flex;\n  align-items: center;\n  background-color: rgba(0, 0, 0, 0.5);\n  border-radius: 15px;\n  margin-left: 5px;\n  padding: 5px 10px;\n  cursor: pointer;\n}\n.artplayer-plugin-ads .artplayer-plugin-ads-control {\n  display: none;\n  position: absolute;\n  bottom: 10px;\n  right: 10px;\n}\n.artplayer-plugin-ads .artplayer-plugin-ads-control > div {\n  display: flex;\n  align-items: center;\n  background-color: rgba(0, 0, 0, 0.5);\n  border-radius: 15px;\n  margin-left: 5px;\n  padding: 5px 10px;\n  cursor: pointer;\n}\n.artplayer-plugin-ads .artplayer-plugin-ads-control .art-icon svg {\n  width: 20px;\n  height: 20px;\n}\n.artplayer-plugin-ads .artplayer-plugin-ads-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n}\n";
+function checkVersion(art) {
+  const {
+    version,
+    utils: { errorHandle }
+  } = art.constructor;
+  const arr = version.split(".").map(Number);
+  const major = arr[0];
+  const minor = arr[1] / 100;
+  errorHandle(
+    major + minor >= 5,
+    `Artplayer.js@${version} is not compatible the artplayerPluginAds@${artplayerPluginAds.version}. Please update it to version Artplayer.js@5.x.x`
+  );
+}
+function artplayerPluginAds(option) {
+  return (art) => {
+    checkVersion(art);
+    const {
+      template: { $player },
+      icons: { volume, volumeClose, fullscreenOn, fullscreenOff, loading },
+      constructor: {
+        validator,
+        utils: { query, append, setStyle }
+      }
+    } = art;
+    option = validator(
+      {
+        html: "",
+        video: "",
+        url: "",
+        playDuration: 5,
+        totalDuration: 10,
+        muted: false,
+        i18n: {
+          close: "关闭广告",
+          countdown: "%s秒",
+          detail: "查看详情",
+          canBeClosed: "%s秒后可关闭广告"
+        },
+        ...option
+      },
+      {
+        html: "?string",
+        video: "?string",
+        url: "?string",
+        playDuration: "number",
+        totalDuration: "number",
+        muted: "?boolean",
+        i18n: {
+          close: "string",
+          countdown: "string",
+          detail: "string",
+          canBeClosed: "string"
+        }
+      }
+    );
+    let $ads = null;
+    let $timer = null;
+    let $close = null;
+    let $countdown = null;
+    let $control = null;
+    let $loading = null;
+    let time = 0;
+    let timer = null;
+    let isEnd = false;
+    let isInit = false;
+    let isCanClose = false;
+    function getI18n(val, str) {
+      return str.replace("%s", val);
+    }
+    function skip() {
+      isEnd = true;
+      art.play();
+      if (option.video)
+        $ads.pause();
+      setStyle(art.template.$ads, "display", "none");
+      art.emit("artplayerPluginAds:skip", option);
+    }
+    function play() {
+      if (isEnd)
+        return;
+      timer = setTimeout(() => {
+        time += 1;
+        const playDuration = option.playDuration - time;
+        if (playDuration >= 1) {
+          $close.innerHTML = getI18n(playDuration, option.i18n.canBeClosed);
+        } else {
+          $close.innerHTML = option.i18n.close;
+          if (!isCanClose) {
+            isCanClose = true;
+          }
+        }
+        $countdown.innerHTML = getI18n(option.totalDuration - time, option.i18n.countdown);
+        if (time >= option.totalDuration) {
+          skip();
+        } else {
+          play();
+        }
+      }, 1e3);
+    }
+    function pause() {
+      if (isEnd)
+        return;
+      clearTimeout(timer);
+    }
+    function show() {
+      art.template.$ads = append($player, '<div class="artplayer-plugin-ads"></div>');
+      $ads = append(
+        art.template.$ads,
+        option.video ? `<video class="artplayer-plugin-ads-video" src="${option.video}" loop playsInline></video>` : `<div class="artplayer-plugin-ads-html">${option.html}</div>`
+      );
+      $loading = append(art.template.$ads, '<div class="artplayer-plugin-ads-loading"></div>');
+      append($loading, loading);
+      $timer = append(
+        art.template.$ads,
+        `<div class="artplayer-plugin-ads-timer">
+                    <div class="artplayer-plugin-ads-close">${option.playDuration <= 0 ? option.i18n.close : getI18n(option.playDuration, option.i18n.canBeClosed)}</div>
+                    <div class="artplayer-plugin-ads-countdown">${getI18n(
+          option.totalDuration,
+          option.i18n.countdown
+        )}</div>
+                </div>`
+      );
+      $close = query(".artplayer-plugin-ads-close", $timer);
+      $countdown = query(".artplayer-plugin-ads-countdown", $timer);
+      if (option.playDuration >= option.totalDuration) {
+        setStyle($close, "display", "none");
+      }
+      art.proxy($close, "click", () => {
+        if (isCanClose) {
+          skip();
+        }
+      });
+      $control = append(
+        art.template.$ads,
+        `<div class="artplayer-plugin-ads-control">
+                    <div class="artplayer-plugin-ads-detail">${option.i18n.detail}</div>
+                    <div class="artplayer-plugin-ads-muted"></div>
+                    <div class="artplayer-plugin-ads-fullscreen"></div>
+                </div>`
+      );
+      const $detail = query(".artplayer-plugin-ads-detail", $control);
+      const $muted = query(".artplayer-plugin-ads-muted", $control);
+      const $fullscreen = query(".artplayer-plugin-ads-fullscreen", $control);
+      if (option.url) {
+        art.proxy($detail, "click", () => {
+          window.open(option.url);
+          art.emit("artplayerPluginAds:click", option);
+        });
+      } else {
+        setStyle($detail, "display", "none");
+      }
+      if (option.video) {
+        const $volume = append($muted, volume);
+        const $volumeClose = append($muted, volumeClose);
+        setStyle($volumeClose, "display", "none");
+        if (option.muted) {
+          $ads.muted = true;
+          setStyle($volume, "display", "none");
+          setStyle($volumeClose, "display", "inline-flex");
+        }
+        art.proxy($muted, "click", () => {
+          $ads.muted = !$ads.muted;
+          if ($ads.muted) {
+            setStyle($volume, "display", "none");
+            setStyle($volumeClose, "display", "inline-flex");
+          } else {
+            setStyle($volume, "display", "inline-flex");
+            setStyle($volumeClose, "display", "none");
+          }
+        });
+      } else {
+        setStyle($muted, "display", "none");
+      }
+      const $fullscreenOn = append($fullscreen, fullscreenOn);
+      const $fullscreenOff = append($fullscreen, fullscreenOff);
+      setStyle($fullscreenOff, "display", "none");
+      art.proxy($fullscreen, "click", () => {
+        art.fullscreen = !art.fullscreen;
+        if (art.fullscreen) {
+          setStyle($fullscreenOn, "display", "inline-flex");
+          setStyle($fullscreenOff, "display", "none");
+        } else {
+          setStyle($fullscreenOn, "display", "none");
+          setStyle($fullscreenOff, "display", "inline-flex");
+        }
+      });
+      art.proxy($ads, "click", () => {
+        if (option.url)
+          window.open(option.url);
+        art.emit("artplayerPluginAds:click", option);
+      });
+    }
+    function init() {
+      if (isInit)
+        return;
+      isInit = true;
+      show();
+      art.pause();
+      if (option.video) {
+        art.proxy($ads, "error", skip);
+        art.proxy($ads, "loadedmetadata", () => {
+          play();
+          $ads.play();
+          setStyle($timer, "display", "flex");
+          setStyle($control, "display", "flex");
+          setStyle($loading, "display", "none");
+        });
+      } else {
+        play();
+        setStyle($timer, "display", "flex");
+        setStyle($control, "display", "flex");
+        setStyle($loading, "display", "none");
+      }
+      art.on("document:visibilitychange", () => {
+        if (document.hidden) {
+          pause();
+        } else {
+          play();
+        }
+      });
+    }
+    art.on("ready", () => {
+      art.once("play", init);
+      art.once("video:playing", init);
+    });
+    return {
+      name: "artplayerPluginAds",
+      skip,
+      pause,
+      play
+    };
+  };
+}
+if (typeof document !== "undefined") {
+  if (!document.getElementById("artplayer-plugin-ads")) {
+    const $style = document.createElement("style");
+    $style.id = "artplayer-plugin-ads";
+    $style.textContent = style;
+    document.head.appendChild($style);
+  }
+}
+export {
+  artplayerPluginAds as default
+};

docs/compiled/artplayer-plugin-ambilight.mjs

@@ -4,4 +4,101 @@
  * (c) 2017-2026 Harvey Zhao
  * Released under the MIT License.
  */
-function t(t={}){return e=>{const{$video:n}=e.template,{createElement:r,addClass:o,setStyles:i}=e.constructor.utils,{blur:a="50px",opacity:l=.5,frequency:s=10,duration:c=.3}=t,u=r("div"),d=((f=u).innerHTML=Array.from({length:9}).fill("<div></div>").join(""),Array.from(f.children));var f,m,g,p;!function(t,e){o(t,"artplayer-plugin-ambilight"),e.parentNode.insertBefore(t,e),i(t,{position:"absolute",top:0,left:0,zIndex:9,inset:0,display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gridTemplateRows:"1fr 1fr 1fr"})}(u,n),m=a,g=l,p=c,d.forEach(t=>{i(t,{opacity:g,filter:`blur(${m})`,transition:`background-color ${p}s ease`})});const y=function(t,n,o){const i=r("canvas"),a=i.getContext("2d");i.width=3,i.height=3;let l=0;return function r(){const i=performance.now();if(i-l<1e3/o||!e.playing)return void(h=requestAnimationFrame(r));l=i;const s=t.videoWidth/3,c=t.videoHeight/3,u=[[0,0],[s,0],[2*s,0],[0,c],[s,c],[2*s,c],[0,2*c],[s,2*c],[2*s,2*c]].map(([e,n])=>function(e,n,r,o){a.drawImage(t,e,n,r,o,0,0,1,1);const[i,l,s]=a.getImageData(0,0,1,1).data;return`rgb(${i}, ${l}, ${s})`}(e,n,s,c));n.forEach((t,e)=>{t.style.backgroundColor=u[e]}),h=requestAnimationFrame(r)}}(n,d,s);let h=null;function v(){h||y()}function b(){h&&(cancelAnimationFrame(h),h=null)}return e.on("ready",v),e.on("destroy",b),{name:"artplayerPluginAmbilight",start:v,stop:b}}}export{t as default};
+function artplayerPluginAmbilight(option = {}) {
+  return (art) => {
+    const { $video } = art.template;
+    const { createElement, addClass, setStyles } = art.constructor.utils;
+    const { blur = "50px", opacity = 0.5, frequency = 10, duration = 0.3 } = option;
+    const $ambilight = createElement("div");
+    const gridItems = createGridItems($ambilight);
+    setupAmbilight($ambilight, $video);
+    setupGridItems(gridItems, blur, opacity, duration);
+    const updateColors = createColorUpdater($video, gridItems, frequency);
+    let animationFrameId = null;
+    function start() {
+      if (!animationFrameId) {
+        updateColors();
+      }
+    }
+    function stop() {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+      }
+    }
+    art.on("ready", start);
+    art.on("destroy", stop);
+    return {
+      name: "artplayerPluginAmbilight",
+      start,
+      stop
+    };
+    function createGridItems($ambilight2) {
+      $ambilight2.innerHTML = Array.from({ length: 9 }).fill("<div></div>").join("");
+      return Array.from($ambilight2.children);
+    }
+    function setupAmbilight($ambilight2, $video2) {
+      addClass($ambilight2, "artplayer-plugin-ambilight");
+      $video2.parentNode.insertBefore($ambilight2, $video2);
+      setStyles($ambilight2, {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        zIndex: 9,
+        inset: 0,
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr 1fr",
+        gridTemplateRows: "1fr 1fr 1fr"
+      });
+    }
+    function setupGridItems(gridItems2, blur2, opacity2, duration2) {
+      gridItems2.forEach(($item) => {
+        setStyles($item, {
+          opacity: opacity2,
+          filter: `blur(${blur2})`,
+          transition: `background-color ${duration2}s ease`
+        });
+      });
+    }
+    function createColorUpdater($video2, gridItems2, frequency2) {
+      const canvas = createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      canvas.width = 3;
+      canvas.height = 3;
+      function getAverageColor(x, y, w, h) {
+        ctx.drawImage($video2, x, y, w, h, 0, 0, 1, 1);
+        const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+        return `rgb(${r}, ${g}, ${b})`;
+      }
+      let lastUpdateTime = 0;
+      return function updateColors2() {
+        const now = performance.now();
+        if (now - lastUpdateTime < 1e3 / frequency2 || !art.playing) {
+          animationFrameId = requestAnimationFrame(updateColors2);
+          return;
+        }
+        lastUpdateTime = now;
+        const w = $video2.videoWidth / 3;
+        const h = $video2.videoHeight / 3;
+        const colors = [
+          [0, 0],
+          [w, 0],
+          [2 * w, 0],
+          [0, h],
+          [w, h],
+          [2 * w, h],
+          [0, 2 * h],
+          [w, 2 * h],
+          [2 * w, 2 * h]
+        ].map(([x, y]) => getAverageColor(x, y, w, h));
+        gridItems2.forEach(($item, index) => {
+          $item.style.backgroundColor = colors[index];
+        });
+        animationFrameId = requestAnimationFrame(updateColors2);
+      };
+    }
+  };
+}
+export {
+  artplayerPluginAmbilight as default
+};