react-native-youtube-iframe icon indicating copy to clipboard operation
react-native-youtube-iframe copied to clipboard

seekTo messes up playerRef and causing video keep playing

Open bayramn opened this issue 3 years ago • 1 comments

Describe the bug Calling seekTo while video is playing messes the playerRef and video keep playing regardless of being stopped. It took few hours to figure out this exact point of issue, but it only happens when you seekTo without stopping video while playing. If you stop the video and seekTo and play, everything fine. So for workaround: I stop the video before calling seekTo and play video right after done seeking, works fine and doesn't slow the video down, but it's bit weird.

To Reproduce Steps to reproduce the behavior:

  const playerRef = useRef();

<YoutubePlayer
    initialPlayerParams={{
      start: video && video.timestamp,
      //  controls: false
    }}
    playbackRate={videoSpeed}
    ref={playerRef}
    height={250}
    videoId={videoId}
    //play={true}
    play={videoPlaying}
    onChangeState={(state) => {
      handlePlayerStateChange(state);
    }}
    webViewProps={{ androidLayerType: "software" }}
  />

const forward = async () => {
  try {
    const currentTime = await playerRef.current.getCurrentTime();
    //console.log(await playerRef.current);
    await playerRef.current.seekTo(currentTime + 15, true);
  } catch (err) {
    console.log(err);
  }
};

Expected behavior When seekTo called while video is playing, it shouldn't mess the playerRef and it should stop when stopped.

Smartphone (please complete the following information):

  • Device: iPhone 12 Pro Max
  • OS + version: iOS 16
  • "react-native-youtube-iframe": "^2.2.2"
  • "react-native-webview": "11.23.0"
  • "expo": "^46.0.14",

Additional context Workaround:

const forward = async () => {
  setVideoPlaying(false);
  try {
    const currentTime = await playerRef.current.getCurrentTime();
    //console.log(await playerRef.current);
    await playerRef.current.seekTo(currentTime + 15, true);
    setVideoPlaying(true);
  } catch (err) {
    console.log(err);
  }
};

bayramn avatar Oct 27 '22 13:10 bayramn

Could you please show your full code? I am confused as to where the forward function is being used in your youtube component.

darias08 avatar Jan 26 '23 21:01 darias08