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.

feat: implement safe area insets for improved video rotation handling

feat: add console log for safe area insets in autoOrientation plugin

feat: enhance mobile meta tags for better web app support

docs/uncompiled/artplayer/index.js

@@ -153,7 +153,7 @@ var Artplayer = (function() {
   }
   var optionValidatorExports = requireOptionValidator();
   const validator = /* @__PURE__ */ getDefaultExportFromCjs(optionValidatorExports);
-  const version$1 = "5.4.0";
+  const version$1 = "5.4.1";
   const config$1 = {
     properties: [
       "audioTracks",
@@ -389,6 +389,20 @@ var Artplayer = (function() {
     }
     return path;
   }
+  function getSafeAreaInsets() {
+    const div = document.createElement("div");
+    div.style.cssText = "position:fixed;top:env(safe-area-inset-top,0px);right:env(safe-area-inset-right,0px);bottom:env(safe-area-inset-bottom,0px);left:env(safe-area-inset-left,0px);pointer-events:none;visibility:hidden;";
+    document.body.appendChild(div);
+    const style2 = getComputedStyle(div);
+    const insets = {
+      top: Number.parseFloat(style2.top) || 0,
+      right: Number.parseFloat(style2.right) || 0,
+      bottom: Number.parseFloat(style2.bottom) || 0,
+      left: Number.parseFloat(style2.left) || 0
+    };
+    div.remove();
+    return insets;
+  }
   class ArtPlayerError extends Error {
     constructor(message, context) {
       super(message);
@@ -594,6 +608,7 @@ ${line.text}`;
     getExt,
     getIcon,
     getRect,
+    getSafeAreaInsets,
     getStyle,
     has,
     hasClass,
@@ -3555,12 +3570,15 @@ ${line.text}`;
     const FS_CLASS = "art-auto-orientation-fullscreen";
     let fsLocked = false;
     function applyWebRotate() {
+      const insets = getSafeAreaInsets();
       const viewWidth = document.documentElement.clientWidth;
       const viewHeight = document.documentElement.clientHeight;
-      setStyle($player, "width", `${viewHeight}px`);
-      setStyle($player, "height", `${viewWidth}px`);
+      const safeWidth = viewHeight - insets.top - insets.bottom;
+      const safeHeight = viewWidth - insets.left - insets.right;
+      setStyle($player, "width", `${safeWidth}px`);
+      setStyle($player, "height", `${safeHeight}px`);
       setStyle($player, "transform-origin", "0 0");
-      setStyle($player, "transform", `rotate(90deg) translate(0, -${viewWidth}px)`);
+      setStyle($player, "transform", `rotate(90deg) translate(${insets.top}px, -${viewWidth - insets.right}px)`);
       addClass($player, WEB_CLASS);
       art.isRotate = true;
       art.emit("resize");