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.

docs/compiled/artplayer-plugin-chapter.mjs

@@ -4,4 +4,156 @@
  * (c) 2017-2026 Harvey Zhao
  * Released under the MIT License.
  */
-function t(t={}){return r=>{const{$player:e}=r.template,{setStyle:a,append:n,clamp:o,query:i,addClass:p,removeClass:s}=r.constructor.utils;let d=[];const l=r.query(".art-control-progress-inner"),c=n(l,'<div class="art-chapters"></div>'),h=n(l,'<div class="art-chapter-title"></div>');function u({$chapter:t,width:r}){const e=t.dataset.title.trim();if(e){h.textContent=e;const t=h.clientWidth;r<=t/2?a(h,"left",0):r>l.clientWidth-t/2?a(h,"left",l.clientWidth-t+"px"):a(h,"left",r-t/2+"px")}}function g(t=[]){if(d=[],c.textContent="",s(e,"artplayer-plugin-chapter"),Array.isArray(t)&&t.length&&r.duration){t=t.sort((t,r)=>t.start-r.start);for(let e=0;e<t.length;e++){const a=t[e],n=t[e+1];if(a.end===1/0&&(a.end=r.duration),"number"!==typeof a.start||"number"!==typeof a.end||"string"!==typeof a.title)throw new TypeError("Illegal chapter data type");if(a.start<0||a.end>r.duration||a.start>=a.end)throw new Error("Illegal chapter time point");if(n&&a.end>n.start)throw new Error("Illegal chapter time point")}t[0].start>0&&t.unshift({start:0,end:t[0].start,title:""}),t[t.length-1].end<r.duration&&t.push({start:t[t.length-1].end,end:r.duration,title:""});for(let r=0;r<t.length-1;r++)t[r].end!==t[r+1].start&&t.splice(r+1,0,{start:t[r].end,end:t[r+1].start,title:""});d=t.map(t=>{const e=n(c,'\n                <div class="art-chapter">\n                    <div class="art-chapter-inner">\n                        <div class="art-progress-hover"></div>\n                        <div class="art-progress-loaded"></div>\n                        <div class="art-progress-played"></div>\n                    </div>\n                </div>\n        '),a=o(t.start,0,r.duration),p=o(t.end,0,r.duration),s=p-a,d=s/r.duration;return e.dataset.start=a,e.dataset.end=p,e.dataset.duration=s,e.dataset.title=t.title.trim(),e.style.width=100*d+"%",{$chapter:e,$hover:i(".art-progress-hover",e),$loaded:i(".art-progress-loaded",e),$played:i(".art-progress-played",e)}}),p(e,"artplayer-plugin-chapter"),r.emit("setBar","loaded",r.loaded||0)}}return r.on("setBar",(t,e)=>{if(d.length)for(let n=0;n<d.length;n++){const{$chapter:o,$loaded:i,$played:p,$hover:s}=d[n],l={hover:s,loaded:i,played:p}[t];if(!l)return;const h=c.clientWidth*e,g=r.duration*e,m=Number.parseFloat(o.dataset.duration),y=Number.parseFloat(o.dataset.start),f=Number.parseFloat(o.dataset.end);if(g<y&&a(l,"width",0),g>f&&a(l,"width","100%"),g>=y&&g<=f){a(l,"width",100*((g-y)/m)+"%"),"hover"===t&&h>0&&u({$chapter:o,width:h})}}}),r.once("video:loadedmetadata",()=>g(t.chapters)),{name:"artplayerPluginChapter",update:({chapters:t})=>g(t)}}}if("undefined"!==typeof document){const t="artplayer-plugin-chapter";let r=document.getElementById(t);r||(r=document.createElement("style"),r.id=t,"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{document.head.appendChild(r)}):(document.head||document.documentElement).appendChild(r)),r.textContent=".artplayer-plugin-chapter .art-control-progress-inner{height:100%!important;background-color:transparent!important}.artplayer-plugin-chapter .art-control-progress-inner>.art-progress-hover,.artplayer-plugin-chapter .art-control-progress-inner>.art-progress-loaded,.artplayer-plugin-chapter .art-control-progress-inner>.art-progress-played{display:none!important}.artplayer-plugin-chapter .art-control-thumbnails{bottom:calc(var(--art-bottom-gap) + 64px)!important}.artplayer-plugin-chapter .art-chapters{position:absolute;z-index:0;inset:0;display:flex;align-items:center;gap:4px;height:100%;transform:scaleY(1.25)}.artplayer-plugin-chapter .art-chapters .art-chapter{display:flex;align-items:center;height:100%}.artplayer-plugin-chapter .art-chapters .art-chapter .art-chapter-inner{position:relative;cursor:pointer;width:100%;height:50%;border-radius:10px;overflow:hidden;transition:height var(--art-transition-duration) ease;background-color:var(--art-progress-color)}.artplayer-plugin-chapter .art-chapters .art-chapter:hover .art-chapter-inner{height:100%}.artplayer-plugin-chapter .art-chapter-title{transform-origin:bottom center;transform:scale(.5);opacity:0;position:absolute;z-index:70;top:-50px;left:0;padding:3px 5px;line-height:1;font-size:14px;border-radius:var(--art-border-radius);white-space:nowrap;background-color:var(--art-tip-background);transition:transform var(--art-transition-duration) ease,opacity var(--art-transition-duration) ease}.artplayer-plugin-chapter.art-progress-hover .art-chapter-title{transform:scale(1);opacity:1}"}export{t as default};
+const style = ".artplayer-plugin-chapter .art-control-progress-inner {\n  height: 100% !important;\n  background-color: transparent !important;\n}\n.artplayer-plugin-chapter .art-control-progress-inner > .art-progress-hover,\n.artplayer-plugin-chapter .art-control-progress-inner > .art-progress-loaded,\n.artplayer-plugin-chapter .art-control-progress-inner > .art-progress-played {\n  display: none !important;\n}\n.artplayer-plugin-chapter .art-control-thumbnails {\n  bottom: calc(var(--art-bottom-gap) + 64px) !important;\n}\n.artplayer-plugin-chapter .art-chapters {\n  position: absolute;\n  z-index: 0;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 100%;\n  transform: scaleY(1.25);\n}\n.artplayer-plugin-chapter .art-chapters .art-chapter {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n.artplayer-plugin-chapter .art-chapters .art-chapter .art-chapter-inner {\n  position: relative;\n  cursor: pointer;\n  width: 100%;\n  height: 50%;\n  border-radius: 10px;\n  overflow: hidden;\n  transition: height var(--art-transition-duration) ease;\n  background-color: var(--art-progress-color);\n}\n.artplayer-plugin-chapter .art-chapters .art-chapter:hover .art-chapter-inner {\n  height: 100%;\n}\n.artplayer-plugin-chapter .art-chapter-title {\n  transform-origin: bottom center;\n  transform: scale(0.5);\n  opacity: 0;\n  position: absolute;\n  z-index: 70;\n  top: -50px;\n  left: 0;\n  padding: 3px 5px;\n  line-height: 1;\n  font-size: 14px;\n  border-radius: var(--art-border-radius);\n  white-space: nowrap;\n  background-color: var(--art-tip-background);\n  transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;\n}\n.artplayer-plugin-chapter.art-progress-hover .art-chapter-title {\n  transform: scale(1);\n  opacity: 1;\n}\n";
+function artplayerPluginChapter(option = {}) {
+  return (art) => {
+    const { $player } = art.template;
+    const { setStyle, append, clamp, query, addClass, removeClass } = art.constructor.utils;
+    const html = `
+                <div class="art-chapter">
+                    <div class="art-chapter-inner">
+                        <div class="art-progress-hover"></div>
+                        <div class="art-progress-loaded"></div>
+                        <div class="art-progress-played"></div>
+                    </div>
+                </div>
+        `;
+    let $chapters = [];
+    const $inner = art.query(".art-control-progress-inner");
+    const $control = append($inner, '<div class="art-chapters"></div>');
+    const $title = append($inner, '<div class="art-chapter-title"></div>');
+    function showTitle({ $chapter, width }) {
+      const title = $chapter.dataset.title.trim();
+      if (title) {
+        $title.textContent = title;
+        const titleWidth = $title.clientWidth;
+        if (width <= titleWidth / 2) {
+          setStyle($title, "left", 0);
+        } else if (width > $inner.clientWidth - titleWidth / 2) {
+          setStyle($title, "left", `${$inner.clientWidth - titleWidth}px`);
+        } else {
+          setStyle($title, "left", `${width - titleWidth / 2}px`);
+        }
+      }
+    }
+    function update(chapters = []) {
+      $chapters = [];
+      $control.textContent = "";
+      removeClass($player, "artplayer-plugin-chapter");
+      if (!Array.isArray(chapters))
+        return;
+      if (!chapters.length)
+        return;
+      if (!art.duration)
+        return;
+      chapters = chapters.sort((a, b) => a.start - b.start);
+      for (let i = 0; i < chapters.length; i++) {
+        const chapter = chapters[i];
+        const nextChapter = chapters[i + 1];
+        if (chapter.end === Infinity) {
+          chapter.end = art.duration;
+        }
+        if (typeof chapter.start !== "number" || typeof chapter.end !== "number" || typeof chapter.title !== "string") {
+          throw new TypeError("Illegal chapter data type");
+        }
+        if (chapter.start < 0 || chapter.end > art.duration || chapter.start >= chapter.end) {
+          throw new Error("Illegal chapter time point");
+        }
+        if (nextChapter && chapter.end > nextChapter.start) {
+          throw new Error("Illegal chapter time point");
+        }
+      }
+      if (chapters[0].start > 0) {
+        chapters.unshift({ start: 0, end: chapters[0].start, title: "" });
+      }
+      if (chapters[chapters.length - 1].end < art.duration) {
+        chapters.push({ start: chapters[chapters.length - 1].end, end: art.duration, title: "" });
+      }
+      for (let i = 0; i < chapters.length - 1; i++) {
+        if (chapters[i].end !== chapters[i + 1].start) {
+          chapters.splice(i + 1, 0, {
+            start: chapters[i].end,
+            end: chapters[i + 1].start,
+            title: ""
+          });
+        }
+      }
+      $chapters = chapters.map((chapter) => {
+        const $chapter = append($control, html);
+        const start = clamp(chapter.start, 0, art.duration);
+        const end = clamp(chapter.end, 0, art.duration);
+        const duration = end - start;
+        const percentage = duration / art.duration;
+        $chapter.dataset.start = start;
+        $chapter.dataset.end = end;
+        $chapter.dataset.duration = duration;
+        $chapter.dataset.title = chapter.title.trim();
+        $chapter.style.width = `${percentage * 100}%`;
+        return {
+          $chapter,
+          $hover: query(".art-progress-hover", $chapter),
+          $loaded: query(".art-progress-loaded", $chapter),
+          $played: query(".art-progress-played", $chapter)
+        };
+      });
+      addClass($player, "artplayer-plugin-chapter");
+      art.emit("setBar", "loaded", art.loaded || 0);
+    }
+    art.on("setBar", (type, percentage) => {
+      if (!$chapters.length)
+        return;
+      for (let i = 0; i < $chapters.length; i++) {
+        const { $chapter, $loaded, $played, $hover } = $chapters[i];
+        const $target = {
+          hover: $hover,
+          loaded: $loaded,
+          played: $played
+        }[type];
+        if (!$target)
+          return;
+        const width = $control.clientWidth * percentage;
+        const currentTime = art.duration * percentage;
+        const duration = Number.parseFloat($chapter.dataset.duration);
+        const start = Number.parseFloat($chapter.dataset.start);
+        const end = Number.parseFloat($chapter.dataset.end);
+        if (currentTime < start) {
+          setStyle($target, "width", 0);
+        }
+        if (currentTime > end) {
+          setStyle($target, "width", "100%");
+        }
+        if (currentTime >= start && currentTime <= end) {
+          const percentage2 = (currentTime - start) / duration;
+          setStyle($target, "width", `${percentage2 * 100}%`);
+          if (type === "hover" && width > 0) {
+            showTitle({ $chapter, width });
+          }
+        }
+      }
+    });
+    art.once("video:loadedmetadata", () => update(option.chapters));
+    return {
+      name: "artplayerPluginChapter",
+      update: ({ chapters }) => update(chapters)
+    };
+  };
+}
+if (typeof document !== "undefined") {
+  const id = "artplayer-plugin-chapter";
+  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 {
+  artplayerPluginChapter as default
+};