0

I want to pass the watch time of a video the user has seen when user closes the page,reload the page or navigate to another page. I am using visibilityChange event for this. When i try to navigate to another page, the api call runs perfectly. But the data i am sending to the api is not updated correctly. I am going to provide the code and the output below so you can understand perfectly what my problem is.

 useEffect(async () => {
    const x = 0;
    console.log("use effect is run number ::::", x + 1);
    window.addEventListener("visibilitychange", sendViewTime);
    return () => {
      window.removeEventListener("visibilitychange", sendViewTime);
    };
  }, []);

I have added the event listener in the useEffect.

the sendViewTime method is the method i want to call on visibility change event. This Method is working perfectly but for some reason the params are not updated even though i have set their states in their relavant hooks.

const sendViewTime = async () => {
    if (document.visibilityState === "hidden") {
      console.log("the document is hidden");
      const value = localStorage.getItem("jwt");
      const initialValue = JSON.parse(value);
      console.log("the send View Time is :::", played_time);
      const params = {
        video_id: video_id_url,
        viewTime: played_time,
        MET: MET_value,
        weight: "",
      };

      console.log("params are :::", params);
      await setEffort(params, initialValue).then((res) => {
        console.log("set effort api response is ::: ", res);
      });
    } else {
      console.log("the document is back online");
    }
  };


//This onProgress prop is from react Player. Here i am updating the state of video progress.
onProgress={(time) => {
                  console.log("the time is :::", time);
                  const time_1 = Math.round(time.playedSeconds);
                  const time_2 = JSON.stringify(time_1);
                  setPlayed_time(time_2);
                  console.log("the played time is :::", played_time);
                }}

//OUTPUT

//    the document is hidden.
// the send View Time is ::: 
//params are ::: {video_id: '23', viewTime: '', MET: undefined, weight: ''}
//set effort api response is :::  {status: 200, message: 'Success', data: {…}, time: '2.743 s'}
//the document is back online
saad khan
  • 3
  • 2

1 Answers1

0

Never mind guys. I found the solution. It seems that i have to pass played_time and met value as a prop to the useEffect.If you want to know how useEffect works please visit this link. In general is it better to use one or many useEffect hooks in a single component?.

saad khan
  • 3
  • 2