React component throw Uncaught TypeError: Cannot set properties of undefined (setting 'playbackRate') while loading.

[Song Liu]

Environment

• oplayer/core: ^1.2.28 // version
• oplayer/ui: ^1.2.30 // version
• oplayer/hls: ^1.2.22 // version
• oplayer/react: ^1.2.8 // version
• platform: macOS Big Sure // IOS 11, Android 13, etc.
• browser: Chromium 110.0.5481.177 / Edge 114.0.1823.79 // chrome 108.0.5359.124, etc.
• NodeJS: v18.14.2

🐛 Bug Report

A new project with react component throw Uncaught TypeError: Cannot set properties of undefined (setting 'playbackRate') while loading.

To Reproduce

Steps to reproduce the behavior:

import Player from "@oplayer/core";
import ReactPlayer, { Source } from "@oplayer/react";
import hls from "@oplayer/hls";
import ui from "@oplayer/ui";
import { useRef } from "react";

const plugins = [
  ui(),
  hls(),
];

export default function OPlayer(
  { source = { src: "", poster: "" } }: {
    source: Source;
  },
) {
  const player = useRef<Player>(null);

  return (
    <ReactPlayer
      plugins={plugins}
      ref={player}
      aspectRatio={0}
      autoplay={false}
      source={source}
    />
  );
}

Expected behavior

An old project with same codes but old version of oplayer works fine.

    "@oplayer/core": "^1.2.11",
    "@oplayer/hls": "^1.2.8",
    "@oplayer/react": "^1.2.5",
    "@oplayer/ui": "^1.2.17",

Link to repl or repo (highly encouraged)

Please provide a minimal repository on GitHub.

Issues without a reproduction link are likely to stall.

[CY]

off react strict mode

[Song Liu]

Got it.