Provider Destroyer - When my application loads or when I navigate to another section, the provider is destroyed.

[karttofer]

Hello,

I’ve been implementing VidStack for YouTube Lives, which have mostly worked well in hiding the titles and logos of the streams. However, when I switch to another section, I get an error stating that the Provider has been destroyed. This makes me think that the application is trying to access the Provider after it has been destroyed (just a theory). The component is being rendered dynamically, FYI.

import React from "react";
import '@vidstack/react/player/styles/default/theme.css';
import '@vidstack/react/player/styles/default/layouts/video.css';
import { useTranslation } from "react-i18next";

import { MediaPlayer, MediaProvider, Poster } from '@vidstack/react';
import { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
import { Container } from "@chakra-ui/react";

const VideoPlayer = ({ height = '213px', videoConfigs }) => {
	const { t } = useTranslation();

	return (
		<Container w='100%' maxW="100%" h={height} p={0} className="video-player">
			<MediaPlayer {...videoConfigs}>
				<MediaProvider>
					<Poster
						className="vds-poster"
						src={thumbnails}
						alt={t("videoPlayer.alt")}
					/>
				</MediaProvider>
				<DefaultVideoLayout thumbnails={{ src: thumbnails }} icons={defaultLayoutIcons} />
			</MediaPlayer>
		</Container>
	);
};

export default VideoPlayer;|

{
  videoConfigs: {
    viewType: "video",
    src: "https://www.youtube.com/watch?v=O9mOtdZ-nSk",
    streamType: "live",
  },
};

[rafael-jordao]

Same error here