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-vtt-thumbnail.mjs

@@ -4,4 +4,121 @@
  * (c) 2017-2026 Harvey Zhao
  * Released under the MIT License.
  */
-function t(t){const n=t.split("."),e=n[0].split(":")||[],l=(i=n[1]||"0",o=3,s="0",i.length>o?String(i):((o-=i.length)>s.length&&(s+=s.repeat(o/s.length)),String(i)+s.slice(0,o)));var i,o,s;const r=Number(l)/1e3;return 3600*Number(e[e.length-3]||0)+60*Number(e[e.length-2]||0)+Number(e[e.length-1]||0)+r}function n(n){return async e=>{const{constructor:{utils:{setStyle:l,isMobile:i,addClass:o}},template:{$progress:s}}=e;let r=null;const a=await async function(n=""){const e=(await(await fetch(n)).text()).split(/[\n\r]/g).filter(t=>t.trim()),l=[];for(let i=1;i<e.length;i+=2){const o=e[i],s=e[i+1];if(!s.trim())continue;const r=/((?:\d{2}:)?(?:\d{2}:)?\d{2}(?:.\d{3})?) ?--> ?((?:\d{2}:)?(?:\d{2}:)?\d{2}(?:.\d{3})?)/,a=o.match(r),c=/(.*)#(\w{4})=(.*)/,u=s.match(c),d=Math.floor(t(a[1])),p=Math.floor(t(a[2]));let h=u[1];if(!/^\/|(?:https?|ftp|file):\/\//i.test(h)){const t=n.split("/");t.pop(),t.push(h),h=t.join("/")}const f={start:d,end:p,url:h},g=u[2].split(""),m=u[3].split(",");for(let t=0;t<g.length;t++)f[g[t]]=m[t];l.push(f)}return l}(n.vtt);return e.controls.add({name:"vtt-thumbnail",position:"top",index:20,style:n.style||{},mounted(t){o(t,"art-control-thumbnails"),e.on("setBar",async(n,o,c)=>{const u="played"===n&&c&&i;if("hover"===n||u){const n=s.clientWidth*o,c=o*e.duration;l(t,"display","flex");const d=a.find(t=>c>=t.start&&c<=t.end);if(!d)return l(t,"display","none");n>0&&n<s.clientWidth?function(t,n,e){l(t,"backgroundImage",`url(${n.url})`),l(t,"height",`${n.h}px`),l(t,"width",`${n.w}px`),l(t,"backgroundPosition",`-${n.x}px -${n.y}px`),e<=n.w/2?l(t,"left",0):e>s.clientWidth-n.w/2?l(t,"left",s.clientWidth-n.w+"px"):l(t,"left",e-n.w/2+"px")}(t,d,n):i||l(t,"display","none"),u&&(clearTimeout(r),r=setTimeout(()=>{l(t,"display","none")},500))}})}}),{name:"artplayerPluginVttThumbnail"}}}export{n as default};
+function padEnd(str, targetLength, padString) {
+  if (str.length > targetLength) {
+    return String(str);
+  } else {
+    targetLength = targetLength - str.length;
+    if (targetLength > padString.length) {
+      padString += padString.repeat(targetLength / padString.length);
+    }
+    return String(str) + padString.slice(0, targetLength);
+  }
+}
+function t2d(time) {
+  const arr = time.split(".");
+  const left = arr[0].split(":") || [];
+  const right = padEnd(arr[1] || "0", 3, "0");
+  const ms = Number(right) / 1e3;
+  const h = Number(left[left.length - 3] || 0) * 3600;
+  const m = Number(left[left.length - 2] || 0) * 60;
+  const s = Number(left[left.length - 1] || 0);
+  return h + m + s + ms;
+}
+async function getVttArray(vttUrl = "") {
+  const vttString = await (await fetch(vttUrl)).text();
+  const lines = vttString.split(/[\n\r]/g).filter((item) => item.trim());
+  const vttArray = [];
+  for (let i = 1; i < lines.length; i += 2) {
+    const time = lines[i];
+    const text = lines[i + 1];
+    if (!text.trim())
+      continue;
+    const timeReg = /((?:\d{2}:)?(?:\d{2}:)?\d{2}(?:.\d{3})?) ?--> ?((?:\d{2}:)?(?:\d{2}:)?\d{2}(?:.\d{3})?)/;
+    const timeMatch = time.match(timeReg);
+    const textReg = /(.*)#(\w{4})=(.*)/;
+    const textMatch = text.match(textReg);
+    const start = Math.floor(t2d(timeMatch[1]));
+    const end = Math.floor(t2d(timeMatch[2]));
+    let url = textMatch[1];
+    const isAbsoluteUrl = /^\/|(?:https?|ftp|file):\/\//i.test(url);
+    if (!isAbsoluteUrl) {
+      const urlArr = vttUrl.split("/");
+      urlArr.pop();
+      urlArr.push(url);
+      url = urlArr.join("/");
+    }
+    const result = { start, end, url };
+    const keys = textMatch[2].split("");
+    const values = textMatch[3].split(",");
+    for (let j = 0; j < keys.length; j++) {
+      result[keys[j]] = values[j];
+    }
+    vttArray.push(result);
+  }
+  return vttArray;
+}
+function artplayerPluginVttThumbnail(option) {
+  return async (art) => {
+    const {
+      constructor: {
+        utils: { setStyle, isMobile, addClass }
+      },
+      template: { $progress }
+    } = art;
+    let timer = null;
+    const thumbnails = await getVttArray(option.vtt);
+    function showThumbnails($control, find, width) {
+      setStyle($control, "backgroundImage", `url(${find.url})`);
+      setStyle($control, "height", `${find.h}px`);
+      setStyle($control, "width", `${find.w}px`);
+      setStyle($control, "backgroundPosition", `-${find.x}px -${find.y}px`);
+      if (width <= find.w / 2) {
+        setStyle($control, "left", 0);
+      } else if (width > $progress.clientWidth - find.w / 2) {
+        setStyle($control, "left", `${$progress.clientWidth - find.w}px`);
+      } else {
+        setStyle($control, "left", `${width - find.w / 2}px`);
+      }
+    }
+    art.controls.add({
+      name: "vtt-thumbnail",
+      position: "top",
+      index: 20,
+      style: option.style || {},
+      mounted($control) {
+        addClass($control, "art-control-thumbnails");
+        art.on("setBar", async (type, percentage, event) => {
+          const isMobileDroging = type === "played" && event && isMobile;
+          if (type === "hover" || isMobileDroging) {
+            const width = $progress.clientWidth * percentage;
+            const second = percentage * art.duration;
+            setStyle($control, "display", "flex");
+            const find = thumbnails.find((item) => second >= item.start && second <= item.end);
+            if (!find)
+              return setStyle($control, "display", "none");
+            if (width > 0 && width < $progress.clientWidth) {
+              showThumbnails($control, find, width);
+            } else {
+              if (!isMobile) {
+                setStyle($control, "display", "none");
+              }
+            }
+            if (isMobileDroging) {
+              clearTimeout(timer);
+              timer = setTimeout(() => {
+                setStyle($control, "display", "none");
+              }, 500);
+            }
+          }
+        });
+      }
+    });
+    return {
+      name: "artplayerPluginVttThumbnail"
+    };
+  };
+}
+export {
+  artplayerPluginVttThumbnail as default
+};