CODEWITHSUNDEEP
htmlreactjsembedtwitch
Eliška Pavlů
Eliška Pavlů

Reputation: 11

Is there any way to get time, where the twitch stream is at in embedd?

I've tried using some npm embed libraries, that support video players, however any onPlay, on Pause or onDuration don't give me current time of stream, when the video pauses, it goes back to 0 and the video time always starts at 0 even when the stream has been runing, and it's just never accurate. (it works with youtube non live video tho)

Iframe by it'self doesn't seem to have any feature like this either

export const GameData = () => {
  const [videoTime, setVideoTime] = useState<number>(0);
  const [data, setData] = useState<JsonData | null>(null);
  const playerRef = useRef<ReactPlayer>(null);
  useEffect(() => {
    if (jsonData) {
      setData(jsonData as JsonData);
    }
    console.log(jsonData);
  }, []);

  useEffect(() => {
    console.log("Current time:", videoTime);
  }, [videoTime]);
  const handleProgress = (state: {playedSeconds: number}) => {
    setVideoTime(state.playedSeconds);
  };

  const handlePause = () => {
    if (playerRef.current) {
      const currentTime = playerRef.current.getCurrentTime();
      setVideoTime(currentTime);
    }
  };

  const handlePlay = () => {
    if (playerRef.current) {
      const currentTime = playerRef.current.getCurrentTime();
      setVideoTime(currentTime);
    }
  };
  const handleReady = () => {
    if (playerRef.current) {
      playerRef.current.seekTo(0);
    }
  };

  return (
    <div>
      <pre className="whitespace-pre-wrap text-white">
        {data?.Events.length ?? "s"}
      </pre>
      <ReactPlayer
        ref={playerRef}
        controls={true}
        url="https://www.twitch.tv/liveoliverr"
        onDuration={duration => console.log("Duration:", duration)}
      />
      <pre className="whitespace-pre-wrap"></pre>
    </div>
  );
};

Upvotes: 0

Views: 29

Answers (0)

Related Questions