My video component often fails to initialize.

[tomtang1122]

when it failed(it just a video link):

when it success(it is a iframe):

version: v5.1.2

my code:

import 'plyr-react/plyr.css'

import type { APITypes, PlyrOptions, PlyrSource } from 'plyr-react'
import { usePlyr } from 'plyr-react'
import { forwardRef, useEffect, useMemo, useRef } from 'react'

export interface VideoPlayerProps {
  src: string
  provider: videoTypings.VideoType
  width: string
  maxWidth: number
  onReady?: (plyr: APITypes['plyr']) => void
}
interface CustomPlyrInstanceProps {
  source: PlyrSource
  options: PlyrOptions
  onReady?: (plyr: APITypes['plyr']) => void
}

const CustomPlyrInstance = forwardRef<APITypes, CustomPlyrInstanceProps>(
  (props, ref) => {
    const { source, options = null, onReady } = props
    const raptorRef = usePlyr(ref, { options, source })
    useEffect(() => {
      const { current } = ref as React.MutableRefObject<APITypes>
      if (current.plyr.source === null) return
      onReady?.(current.plyr)
    })
    return <video ref={raptorRef} className="plyr-react plyr" />
  }
)

const VideoPlayer: React.FC<VideoPlayerProps> = ({
  src,
  provider,
  width,
  maxWidth,
  onReady
}) => {
  const ref = useRef<APITypes>(null)

  const video = useMemo(
    () =>
      provider && src ? (
        <CustomPlyrInstance
          ref={ref}
          onReady={onReady}
          source={{
            type: 'video',
            sources: [{ src, provider }]
          }}
          options={{
            controls: [
              'play-large', // The large play button in the center
              'restart', // Restart playback
              'rewind', // Rewind by the seek time (default 10 seconds)
              'play', // Play/pause playback
              'fast-forward', // Fast forward by the seek time (default 10 seconds)
              'progress', // The progress bar and scrubber for playback and buffering
              'current-time', // The current time of playback
              'duration', // The full duration of the media
              'mute', // Toggle mute
              'volume', // Volume control
              'captions', // Toggle captions
              'settings', // Settings menu
              'pip', // Picture-in-picture (currently Safari only)
              'airplay', // Airplay (currently Safari only)
              'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
              'fullscreen' // Toggle fullscreen
            ]
          }}
        />
      ) : null,
    [provider, src]
  )

  return (
    <div className="mx-auto" style={{ maxWidth: maxWidth, width }}>
      {video}
    </div>
  )
}

export default VideoPlayer