How can I use realtime currentTime of YouTube Video?

[wooogler]

Hi, LonelyCpp.
I'm actually trying to use your component.
It's more stable and easier than react-native-youtube. It's great!
I need to synchronize the state with YouTube Video currentTime.
But, I cannot find how to do that.
I tried to use setInterval and it worked, but currentTime was a float number.
So, I use toFixed, and Math.floor, then I can see the short change from float to integer number.
I need the function like elapsed time in this demo https://cookpete.com/react-player/.
May I ask you the solution for this problem?

[LonelyCpp]

@wooogler Im super happy that this library is of help to you :)

setInterval is indeed the right way to go, since you can control the accuracy and frequency of the reading.

Unfortunately, the link you provided isn't working for me. What format do you want the duration in? I will give you a quick example for it. rg - sec:ms or min:sec ?

[LonelyCpp]

Here's a simple example

import React, {useState, useRef, useEffect} from 'react';
import {Text, View} from 'react-native';
import YoutubePlayer from 'react-native-youtube-iframe';

const App = () => {
  const [elapsed, setElapsed] = useState(0);
  const playerRef = useRef();

  useEffect(() => {
    const interval = setInterval(async () => {
      const elapsed_sec = await playerRef.current.getCurrentTime(); // this is a promise. dont forget to await

      // calculations
      const elapsed_ms = Math.floor(elapsed_sec * 1000);
      const ms = elapsed_ms % 1000;
      const min = Math.floor(elapsed_ms / 60000);
      const seconds = Math.floor((elapsed_ms - min * 60000) / 1000);

      setElapsed(
        min.toString().padStart(2, '0') +
          ':' +
          seconds.toString().padStart(2, '0') +
          ':' +
          ms.toString().padStart(3, '0'),
      );
    }, 100); // 100 ms refresh. increase it if you don't require millisecond precision

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <>
      <YoutubePlayer
        height={250}
        ref={playerRef}
        videoId={'DC471a9qrU4'}
      />
      <View>
        <View style={{flexDirection: 'row'}}>
          <Text style={{flex: 1}}>{'elapsed time'}</Text>
          <Text style={{flex: 1, color: 'green'}}>{elapsed}</Text>
        </View>
    </>
  );
};

screenshot -

[wooogler]

It's very kind of you!!
A function that I mentioned about is similar with "onProgress" event in this library https://www.npmjs.com/package/react-player
React Player generates this event every single seconds when it is playing.
I think your solution is enough to develop my application.
I will try.

Thank you for your quick response!

[LonelyCpp]

no problem :)

Although onProgress is helpful, I've not added it for 2 reasons -

1. Its not part of the iframe web api by google
2. It bloats the library with what is basically an enhanced version of getCurrentTime

[wooogler]

I understand. I try to use setInterval. Thank you!