fix(react): [EX-01] verify installed consumers and clean up callback failures

example/react.js/src/App.tsx

@@ -1,7 +1,9 @@
-import Artplayer, { type Option } from 'artplayer'
+import type Artplayer from 'artplayer'
+import type { Option } from 'artplayer'
 import Player from './Player'
 
 function getInstance(art: Artplayer) {
+  // eslint-disable-next-line no-console
   console.log(art)
 }
 

example/react.js/src/Player.tsx

@@ -1,16 +1,11 @@
+import type { Option } from 'artplayer'
+import type { HTMLAttributes } from 'react'
+import Artplayer from 'artplayer'
 import { useEffect, useRef } from 'react'
-import Artplayer, { type Option } from 'artplayer'
+import { playerOptions } from './player-options'
 
-// 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>,
+export interface PlayerProps extends HTMLAttributes<HTMLDivElement> {
+  option: Partial<Option>
   getInstance?: (art: Artplayer) => void
 }
 
@@ -18,24 +13,25 @@ export default function Player({ option, getInstance, ...rest }: PlayerProps) {
   const containerRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    if (!containerRef.current) return
+    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',
-        }),
-      ],
-    })
+    const art = new Artplayer(playerOptions(option, containerRef.current))
 
-    if (typeof getInstance === 'function') {
-      getInstance(art)
+    try {
+      if (typeof getInstance === 'function') {
+        getInstance(art)
+      }
+    }
+    catch (error) {
+      try {
+        art.destroy(false)
+      }
+      finally {
+        // Keep the consumer's error even if teardown also fails.
+        // eslint-disable-next-line no-unsafe-finally
+        throw error
+      }
     }
 
     return () => {

example/react.js/src/player-options.ts

@@ -0,0 +1,23 @@
+import type { Option } from 'artplayer'
+import artplayerPluginDanmuku from 'artplayer-plugin-danmuku'
+import artplayerPluginDocumentPip from 'artplayer-plugin-document-pip'
+import fr from 'artplayer/i18n/fr'
+import id from 'artplayer/i18n/id'
+
+// Preserve this example's existing overrides and create plugins per instance.
+export function playerOptions(option: Partial<Option>, container: HTMLDivElement): Option {
+  return {
+    ...option,
+    container,
+    // Partial<Option> is the historical wrapper API; Artplayer validates missing URLs.
+    url: option.url as string,
+    i18n: { id, fr },
+    lang: 'fr',
+    plugins: [
+      artplayerPluginDocumentPip({}),
+      artplayerPluginDanmuku({
+        danmuku: 'https://artplayer.org/assets/sample/danmuku.xml',
+      }),
+    ],
+  }
+}