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

packages/artplayer/src/plugins/autoOrientation.js

@@ -1,4 +1,4 @@
-import { addClass, hasClass, removeClass, setStyle } from '../utils'
+import { addClass, getSafeAreaInsets, hasClass, removeClass, setStyle } from '../utils'
 
 export default function autoOrientation(art) {
   const {
@@ -12,12 +12,15 @@ export default function autoOrientation(art) {
   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')

packages/artplayer/src/utils/dom.js

@@ -180,3 +180,19 @@ export function getComposedPath(event) {
   }
   return path
 }
+
+export 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 style = getComputedStyle(div)
+  const insets = {
+    top: Number.parseFloat(style.top) || 0,
+    right: Number.parseFloat(style.right) || 0,
+    bottom: Number.parseFloat(style.bottom) || 0,
+    left: Number.parseFloat(style.left) || 0,
+  }
+  div.remove()
+  return insets
+}