feat: update project structure and add React template with Artplayer integration

packages/artplayer-template/react.js/src/App.jsx

@@ -0,0 +1,22 @@
+import Artplayer from './ArtPlayer.jsx'
+
+function App() {
+  return (
+    <div>
+      <Artplayer
+        option={{
+          url: 'https://artplayer.org/assets/sample/video.mp4',
+          autoSize: true,
+        }}
+        style={{
+          width: '600px',
+          height: '400px',
+          margin: '60px auto 0',
+        }}
+        getInstance={art => console.info(art)}
+      />
+    </div>
+  )
+}
+
+export default App

packages/artplayer-template/react.js/src/Artplayer.jsx

@@ -0,0 +1,37 @@
+import Artplayer from 'artplayer'
+import { useEffect, useRef } from 'react'
+
+// test i18n
+import fr from 'artplayer/i18n/fr'
+import id from 'artplayer/i18n/id'
+
+// test plugins
+import artplayerPluginDanmuku from '../../../artplayer-plugin-danmuku'
+import artplayerPluginDocumentPip from '../../../artplayer-plugin-document-pip'
+
+export default function Player({ option, getInstance, ...rest }) {
+  const $container = useRef()
+
+  useEffect(() => {
+    const art = new Artplayer({
+      ...option,
+      container: $container.current,
+      i18n: { id, fr },
+      lang: 'fr',
+      plugins: [
+        artplayerPluginDocumentPip(),
+        artplayerPluginDanmuku({
+          danmuku: 'https://artplayer.org/assets/sample/danmuku.xml',
+        }),
+      ],
+    })
+
+    if (typeof getInstance === 'function') {
+      getInstance(art)
+    }
+
+    return () => art.destroy(false)
+  }, [option, getInstance])
+
+  return <div ref={$container} {...rest}></div>
+}

packages/artplayer-template/react.js/src/main.jsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)