videojs-ima is not destroyed when disposing video-js player

[fleischsalod]

Is there any recommended way to destroy the videojs-ima instance, when disposing the video-js player?

I'm using React (v17) and dispose the video-js player as soon my React Functional-Component unmounts:

useEffect(() => {
    const player = playerRef.current;

    return () => {
      if (player && !player.isDisposed()) {
        player.dispose();
        playerRef.current = null;
      }
    };
}, [playerRef]);

This is the exact same way as recommended in the video-js documentation and it works as expected. When unmounting the component, the videoJs-player disposes.
When i unmount the component while an ad is playing, then i can still resume the ad via the notification that is shown from the browser (Chrome 114 on MacOS Ventura 13.4):

Please note, that i currently do not use the Media Session API to update the notification content, that is why the title shown in the notification is still the title of my video although an ad is playing. I tried it with both an sample adTag as well as our real-world adTag that is used in our productive application.

This only happens, when unmounting while an ad is playing. If i unmount while my video is playing, then the notification is no longer shown. I'm assuming, that the IMA adsManager-instance is not properly destroyed when unmounting the page. Unfortunately i cannot find the right way to destroy it. I already tried this:
player.ima.getAdsManager().destroy()

Any hint is highly appreciated. I can also give more informations on how i initialize the video-js player and the ima-sdk, if necessary.

[fleischsalod]

I created a sandbox that resembles a simplified version of our videojs integration. I can reproduce the same behavior as described above in this sandbox: Buggy Videojs implementation
Following steps to reproduce this behavior (using MacOS Ventura):

1. Click Link to Video Player
2. Start Video
3. Leave by clicking the header "Click here to leave page"
4. If the sample ad was played when leaving, it can be resumed via the Notification in the OS-Menu Bar. The Player was successfully destroyed, but some video-ads event-listener were not destroyed.

5. If the video was played when leaving the page, there is no Notification in the OS Menu-Bar. The Player was successfully destroyed

I hope this helps understand my problem.
Im also pretty sure it is an implementation bug und not a bug in the videojs-ima code.

[Kiro705]

Hello @fleischsalod ,

I would recommend that when you destroy the player you also call videojsPlayer.ima.controller.sdkImpl.adDisplayContainer.destroy(). I think this should take care of the video ad player instance.

During this process you may also need to call AdsLoader.destory() and AdsManager.destroy() if your app/site recreates another IMA SDK instance. These IMA class instances can be referenced using the plugin ad events (link).

Please let me know if that solves your issue, or if you have any additional questions.

Thank you,
Jackson
IMA SDK team

[fleischsalod]

Hello @Kiro705,

thank you for your reply! I tried out your ideas and destroyed the adDisplayContainer in my unmount function like that:

React.useEffect(() => {
    const player = playerRef.current;

    return () => {
      if (player && !player.isDisposed()) {
          player.ima.controller.sdkImpl.adDisplayContainer.destroy();
          player.dispose();
          playerRef.current = null;
      }
    };
  }, [playerRef, imaScriptLoaded]);

Still the video ad player instance seemed not to be destroyed. I could still resume the video by either using the play button on my keyboard or the Media-Notification in my Toolbar.
So i tried to also destroy the adsLoader- and adsManager-instances. To do that i added the following code directly after initializing of the videojs-ima Instance:

player.on("ads-manager", (response) => {
  const adsManager = response.adsManager;
  player.on("dispose", () => {
    console.log("adsManager", adsManager);
    adsManager.destroy();
    console.log("destroyed adsManager");
  });
});
player.on("ads-loader", (response) => {
  const adsLoader = response.adsLoader;
  player.on("dispose", () => {
    adsLoader.destroy();
    console.log("destroyed adsLoader");
  });
});

All the code to destroy these instances is called, but still i can resume the ad in the background.

I found out, that actually my codesandbox-code loaded the ima3-sdk twice. I fixed that, but that was not the reason for my problem. Im pretty confident now, that my code does not create multiple instances of the ima-sdk.

You can also see the concrete Code in this codesandbox, i updated it with the mentioned changes.

Did i do anything wrong?
Is there anything else i can do?

[monta8]

Hi @fleischsalod,
we have the same problem.
Have you been able to find a solution?

[fleischsalod]

Hi @monta8,
sorry for the late response. Unfortunately i was not able to find a solution to the problem. I'm still further investigating from time to time. I will post here, if i'm able to find a solution or more details.