try fix react strict mode

package.json

@@ -40,18 +40,18 @@
     "@babel/plugin-transform-template-literals": "^7.22.5",
     "@changesets/cli": "^2.26.2",
     "@rollup/plugin-babel": "^6.0.3",
-    "@types/node": "^18.17.4",
+    "@types/node": "^18.17.6",
     "@vitejs/plugin-react": "^4.0.4",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "concurrently": "^8.2.0",
     "cross-env": "^7.0.3",
     "jsdom": "^22.1.0",
-    "lint-staged": "^13.2.3",
-    "nx": "^16.6.0",
+    "lint-staged": "^13.3.0",
+    "nx": "^16.7.2",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.1",
     "terser": "^5.19.2",
-    "tslib": "^2.6.1",
+    "tslib": "^2.6.2",
     "typescript": "^5.1.6",
     "vite": "^4.4.9",
     "vite-plugin-banner": "^0.7.0",

packages/core/src/player.ts

@@ -179,7 +179,8 @@ export class Player<Context extends Record<string, any> = Record<string, any>> {
     this.$video.volume = volume
     // 设置 src 后执行
     setTimeout(() => {
-      this.setPlaybackRate(playbackRate)
+      // maybe destroyed
+      if (this.$root) this.setPlaybackRate(playbackRate)
     })
 
     this.$root = $.create(

packages/docs/package.json

@@ -19,15 +19,15 @@
     "@oplayer/torrent": "workspace:*",
     "@oplayer/ui": "workspace:*",
     "mdx-embed": "^1.1.2",
-    "next": "^13.4.13",
-    "nextra": "^2.10.0",
-    "nextra-theme-docs": "^2.10.0",
+    "next": "^13.4.19",
+    "nextra": "^2.11.0",
+    "nextra-theme-docs": "^2.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.19",
+    "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
-    "sass": "^1.64.2"
+    "sass": "^1.66.1"
   }
 }

packages/react/package.json

@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@oplayer/core": "workspace:*",
-    "@types/react": "^18.2.19",
+    "@types/react": "^18.2.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

packages/react/src/index.tsx

@@ -24,18 +24,16 @@ const ReactOPlayer = forwardRef(
   (props: ReactOPlayerProps & { source?: Source | Promise<Source> }, ref: Ref<Player | null>) => {
     const { playing, duration, aspectRatio = 9 / 16, plugins = [], onEvent, ...rest } = props
 
-    const isInitialMount = useRef(true)
-
-    const onEventRef = useRef(onEvent)
-    onEventRef.current = onEvent
-
     const player = useRef<Player | null>(null)
+
     const preSource = usePrevious(rest.source)
+    const isReady = Boolean(player.current)
 
-    const isNotReady = isInitialMount.current || !player.current || /* destroy */ !player.current.$root
+    const onEventRef = useRef(onEvent)
+    onEventRef.current = onEvent
 
     const onRefChange = useCallback((node: HTMLDivElement) => {
-      if (node !== null && (!player.current || !player.current.$root)) {
+      if (node !== null && !isReady) {
         player.current = Player.make(node, rest).use(plugins).create()
         if (typeof duration == 'number') player.current.seek(duration / 1000)
         if (onEvent) {
@@ -44,51 +42,77 @@ const ReactOPlayer = forwardRef(
       }
     }, [])
 
+    const { playbackRate, source, muted } = rest
+    const safePlayer = player.current! // can only use on isReady
+
+    useEffectWhere(
+      isReady,
+      () => {
+        if (playing != safePlayer.isPlaying) {
+          if (playing) {
+            safePlayer.play()
+          } else {
+            safePlayer.pause()
+          }
+        }
+      },
+      [playing]
+    )
+
+    useEffectWhere(
+      isReady,
+      () => {
+        if (
+          (source instanceof Promise && preSource != source) ||
+          (source?.src && preSource?.src !== source.src)
+        ) {
+          safePlayer.changeSource(source)
+        }
+      },
+      [source]
+    )
+
+    useEffectWhere(
+      isReady,
+      () => {
+        if (duration) safePlayer.seek(duration / 1000)
+      },
+      [duration]
+    )
+
+    useEffectWhere(
+      isReady,
+      () => {
+        if (muted) {
+          safePlayer.mute()
+        } else {
+          safePlayer.unmute()
+        }
+      },
+      [muted]
+    )
+
+    useEffectWhere(
+      isReady,
+      () => {
+        safePlayer.setPlaybackRate(playbackRate!)
+      },
+      [playbackRate]
+    )
 
-    useEffectWhere(!isNotReady, () => {
-      if (playing) {
-        if (!player.current!.isPlaying) player.current!.play()
-      } else {
-        if (player.current!.isPlaying) player.current!.pause()
-      }
-    }, [playing])
-
-    useEffectWhere(!isNotReady, () => {
-      if (
-        (rest.source instanceof Promise && preSource != rest.source) ||
-        (rest.source?.src && preSource?.src !== rest.source.src)
-      ) {
-        player.current!.changeSource(rest.source)
-      }
-    }, [rest.source])
-
-    useEffectWhere(!isNotReady, () => {
-      if (isNotReady || typeof duration != 'number') return
-      player.current!.seek(duration / 1000)
-    }, [duration])
-
-    useEffectWhere(!isNotReady, () => {
-      if (rest.muted) {
-        player.current!.mute()
-      } else {
-        player.current!.unmute()
-      }
-    }, [rest.muted])
-
-    useEffectWhere(!isNotReady, () => {
-      player.current!.setPlaybackRate(rest.playbackRate!)
-    }, [rest.playbackRate])
+    useImperativeHandle(ref, () => player.current, [])
 
     useEffect(() => {
-      isInitialMount.current = false
-      return () => player.current?.destroy()
+      return () => {
+        // strict mode: destory, but ref cb call once
+        player.current?.destroy()
+        player.current = null
+      }
     }, [])
 
-    useImperativeHandle(ref, () => player.current, [])
-
     return useMemo(() => {
       if (aspectRatio == 0) {
-        return <div style={{ height: '100%', width: '100%' }} ref={onRefChange}></div>
+        return <div ref={onRefChange}></div>
       }
 
       return (

packages/torrent/package.json

@@ -35,6 +35,6 @@
   },
   "devDependencies": {
     "@oplayer/core": "workspace:*",
-    "webtorrent": "^2.1.17"
+    "webtorrent": "^2.1.25"
   }
 }