feat: add danmuku plugin documentation and i18n setup

- Created a new documentation file for the danmuku plugin with interactive code execution.
- Added comprehensive i18n setup instructions, including default language settings, language imports, and examples for adding and modifying languages.
- Introduced a test file to verify the integration of the danmuku plugin.

packages/artplayer-vitepress/docs/en/index.md

@@ -83,75 +83,75 @@ The player's size depends on the size of the container `container`, so your cont
 ::: code-group
 
 ```vue [Artplayer.vue]
-<template>
-  <div ref="artRef"></div>
-</template>
-
 <script>
-import Artplayer from "artplayer";
+import Artplayer from 'artplayer'
 
 export default {
-  data() {
-    return {
-      instance: null,
-    };
-  },
   props: {
     option: {
       type: Object,
       required: true,
     },
   },
+  data() {
+    return {
+      instance: null,
+    }
+  },
   mounted() {
     this.instance = new Artplayer({
       ...this.option,
       container: this.$refs.artRef,
-    });
+    })
 
     this.$nextTick(() => {
-      this.$emit("get-instance", this.instance);
-    });
+      this.$emit('get-instance', this.instance)
+    })
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.instance && this.instance.destroy) {
-      this.instance.destroy(false);
+      this.instance.destroy(false)
     }
   },
-};
+}
 </script>
+
+<template>
+  <div ref="artRef" />
+</template>
 ```
 
 ```vue [app.vue]
-<template>
-  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
-</template>
-
 <script>
-import Artplayer from "./Artplayer.vue";
+import Artplayer from './Artplayer.vue'
 
 export default {
-  data() {
-    return {
-      option: {
-        url: "path/to/video.mp4",
-      },
-      style: {
-        width: "600px",
-        height: "400px",
-        margin: "60px auto 0",
-      },
-    };
-  },
   components: {
     Artplayer,
   },
+  data() {
+    return {
+      option: {
+        url: 'path/to/video.mp4',
+      },
+      style: {
+        width: '600px',
+        height: '400px',
+        margin: '60px auto 0',
+      },
+    }
+  },
   methods: {
     getInstance(art) {
-      console.info(art);
+      console.info(art)
     },
   },
-};
+}
 </script>
+
+<template>
+  <Artplayer :option="option" :style="style" @get-instance="getInstance" />
+</template>
 ```
 
 :::
@@ -166,56 +166,56 @@ Modifying `option` directly in `Vue.js` will not change the player
 ::: code-group
 
 ```jsx [Artplayer.jsx]
-import { useEffect, useRef } from 'react';
-import Artplayer from 'artplayer';
+import Artplayer from 'artplayer'
+import { useEffect, useRef } from 'react'
 
 export default function Player({ option, getInstance, ...rest }) {
-    const artRef = useRef();
+  const artRef = useRef()
 
-    useEffect(() => {
-        const art = new Artplayer({
-            ...option,
-            container: artRef.current,
-        });
+  useEffect(() => {
+    const art = new Artplayer({
+      ...option,
+      container: artRef.current,
+    })
 
-        if (getInstance && typeof getInstance === 'function') {
-            getInstance(art);
-        }
+    if (getInstance && typeof getInstance === 'function') {
+      getInstance(art)
+    }
 
-        return () => {
-            if (art && art.destroy) {
-                art.destroy(false);
-            }
-        };
-    }, []);
+    return () => {
+      if (art && art.destroy) {
+        art.destroy(false)
+      }
+    }
+  }, [])
 
-    return <div ref={artRef} {...rest}></div>;
+  return <div ref={artRef} {...rest}></div>
 }
 ```
 
 ```jsx [app.jsx]
-import React from 'react';
-import Artplayer from './ArtPlayer.jsx';
+import React from 'react'
+import Artplayer from './ArtPlayer.jsx'
 
 function App() {
-    return (
-        <div>
-            <Artplayer
-                option={{
-                    url: 'https://artplayer.org/assets/sample/video.mp4',
-                }}
-                style={{
-                    width: '600px',
-                    height: '400px',
-                    margin: '60px auto 0',
-                }}
-                getInstance={(art) => console.info(art)}
-            />
-        </div>
-    );
+  return (
+    <div>
+      <Artplayer
+        option={{
+          url: 'https://artplayer.org/assets/sample/video.mp4',
+        }}
+        style={{
+          width: '600px',
+          height: '400px',
+          margin: '60px auto 0',
+        }}
+        getInstance={art => console.info(art)}
+      />
+    </div>
+  )
 }
 
-export default App;
+export default App
 ```
 
 :::
@@ -331,7 +331,7 @@ The production build of `artplayer.js` is only compatible with the latest major
 For ancient browsers, you can use the `artplayer.legacy.js` file, which is compatible up to: `IE 11`
 
 ```js
-import Artplayer from 'artplayer/dist/artplayer.legacy.js';
+import Artplayer from 'artplayer/dist/artplayer.legacy.js'
 ```
 
 ::: code-group
@@ -362,10 +362,10 @@ Refer to documentation: [browserslist](https://github.com/browserslist/browsersl
 
 :::
 
-Starting from `5.2.4`, `artplayer` and all plugins will also provide an `ESM` version of `js`, such as:
+Starting from `5.2.6`, `artplayer` and all plugins will also provide an `ESM` version of `mjs`, such as:
 
-- `artplayer/dist/artplayer.esm.js`
-- `artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.esm.js`
+- `artplayer/dist/artplayer.mjs`
+- `artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs`
 
 ```html
 <!DOCTYPE html>
@@ -385,7 +385,7 @@ Starting from `5.2.4`, `artplayer` and all plugins will also provide an `ESM` ve
     <script type="importmap">
     {
         "imports": {
-            "artplayer": "https://unpkg.com/artplayer/dist/artplayer.esm.js"
+            "artplayer": "https://unpkg.com/artplayer/dist/artplayer.mjs"
         }
     }
     </script>
@@ -440,4 +440,4 @@ Currently, the determination of mobile devices is not accurate. Sometimes, you m
 
 You need to modify it before import the `Artplayer` for it to take effect
 
-:::
+:::