feat: add danmuku plugin and i18n support in React template

- Implemented a new danmuku plugin in the React template for displaying bullet comments.
- Added internationalization (i18n) support with French and Indonesian languages.
- Updated the App component to include the new Player component with options for video playback.
- Enhanced the Player component to initialize Artplayer with plugins and language settings.
- Created separate files for App and Player components to improve code organization.
- Added example usage of language settings and plugins in the Player component.

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

@@ -1,22 +0,0 @@
-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.log(art)}
-      />
-    </div>
-  )
-}
-
-export default App

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

@@ -0,0 +1,31 @@
+import Artplayer, { type Option } from 'artplayer'
+import Player from './Player'
+
+function getInstance(art: Artplayer) {
+  console.log(art)
+}
+
+const style = {
+  width: '800px',
+  height: '600px',
+  margin: '60px auto 0',
+}
+
+const option: Partial<Option> = {
+  url: 'https://artplayer.org/assets/sample/video.mp4',
+  autoSize: true,
+}
+
+function App() {
+  return (
+    <div>
+      <Player
+        style={style}
+        option={option}
+        getInstance={getInstance}
+      />
+    </div>
+  )
+}
+
+export default App

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

@@ -1,37 +0,0 @@
-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)
-  }, [])
-
-  return <div ref={$container} {...rest}></div>
-}

packages/artplayer-template/react.js/src/Player.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'react'
+import Artplayer, { type Option } from 'artplayer'
+
+// 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'
+
+interface PlayerProps extends React.HTMLAttributes<HTMLDivElement> {
+  option: Partial<Option>,
+  getInstance?: (art: Artplayer) => void
+}
+
+export default function Player({ option, getInstance, ...rest }: PlayerProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    const art = new Artplayer({
+      ...option,
+      container: containerRef.current,
+      url: option.url as string,
+      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={containerRef} {...rest}></div>
+}

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

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