useEffect for adding api getting recalled on user events

I’m having an issue with the useRef where I setup an api to call play after my source is ready. However, I also have a control on my page to increase or decrease the font size on the page, and for some reason the audio stops and restarts at the beginning. I’ve determned the useEffect is getting called again on that event. I cannot seem to figure out how to not call the useEffect and still get my player to play at the right time. If I add a dependencies array the useEffect does not start the player. If I remove them, the player starts properly, but then the events on the page cause it to be called again.

Here is my useEffect in my audio player using plyr usePlyr.

// Do all api access here, it is guaranteed to be called with the latest plyr instance
    useEffect(() => {
      const { current } = ref as React.MutableRefObject<APITypes>;
      const api = current as { plyr: PlyrInstance };
      console.log(
        "useEffect in AudioPlayer",
        isPlaying,
        hasBookmarkChoice,
        ref,
        api
      );
      const onEnded = (e: any) => {
        eventBus.dispatch("audioPlayEnd", { message: "audio ended" });
      };
      const onCanPlay = (e: any) => {
        if (isPlaying && hasBookmarkChoice) {
          console.log("Audio should be ready to play");
          const promise = api.plyr.play();
          if (promise) {
            promise
              .then(() => {
                // put up an icon or do ui work for play started here
                console.log("Play started");
              })
              .catch((error) => {
                console.log("an error starting the audio occured", error);
              });
          }
        } else {
          console.log("Audio paused");
          api.plyr.pause();
        }
      };
      const onReady = (e: any) => {
        console.log("I'm ready", e);
        // api.plyr.play();
      };

      if (current.plyr.source === null) {
        return;
      } else {
        api.plyr.on("ready", onReady);
        api.plyr.on("canplay", onCanPlay);
        api.plyr.on("ended", onEnded);

        return () => {
          api.plyr.off("ended", onEnded);
          api.plyr.off("ready", onReady);
          api.plyr.off("canplay", onCanPlay);
          // clearTimeout(timeId);
        };
      }
    });

Using 5.0.2

[realamirhe]

The default value for the deps is null and use following for inner dependency array

 deps​ ​||​ ​[​params​.​options​,​ ​params​.​source​]

I’m somehow losed the context, but think that separating the hooks into multiple useEffect with different dep-array or add custom useEffect for first render that change src can be helpful. Let me know, if these could solve your solution.

On Thu, Jul 28, 2022, 18:19 Brad Rice @.***> wrote:

Wow, after banging my head for weeks, that worked. I just passed an empty array as the third argument.

— Reply to this email directly, view it on GitHub https://github.com/chintan9/plyr-react/issues/891#issuecomment-1198169093, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFT42NV5B4ET6RKSF52K5LLVWKFWXANCNFSM52ZZ3LOQ . You are receiving this because you commented.Message ID: @.***>

[bradrice]

Wow, after banging my head for weeks, that worked. I just passed an empty array as the third argument. Except, now the audio source doesn’t get updated when I change pages. I’m not sure what I need to pass in the dependencies array.