cast-react: Instance not provided to CastProvider

[Impre-visible]

Hi, I saw ur package and wanted to give it a try, so after some digging, I found the document, I followed this one, but I got an issue, I have this exact error:

cast.hook.js:1 Uncaught Error: Cast instance not provided to <CastProvider />
    at useCast (cast.hook.js:1:1)
    at Video (Video.jsx:14:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at recoverFromConcurrentError (react-dom.development.js:25850:1)

But, I followed the documentation, I have a Cast.instance.js:

import { Cast } from '@jdion/cast'

export const castInstance = new Cast()

I have my Video Component, where I import and render the thing:

import { useCast, CastProvider } from '@jdion/cast-react';
import { castInstance } from './Cast.instance';

export const Video = () => {
  const { player: chromecast } = useCast()
  

  return (
    <CastProvider instance={castInstance} >
      <video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" />
    <CastProvider />
  )
};

export default Video;

If u could help that would be great, thanks

[Impre-visible]

After some work, I put the CastProvider in my App.jsx file, and it's not the same error now, now I just have a session_error, but it's an error that I don't have on the demo website, and nothing interesting is provided. Here's my code: App.js

import React, { useEffect } from 'react';
import { Route, BrowserRouter, Routes, useLocation } from 'react-router-dom';

// routes imports
// ...

import "./App.css";

import { Cast } from '@jdion/cast'
import { CastProvider } from '@jdion/cast-react';

const castInstance = new Cast();


const App = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/movies/:lib" element={<Movies />} />
		  // ...
        </Routes>
      </Layout>
    </BrowserRouter>
  );
};

export const Layout = ({ children }) => {

  return (
    <>
      <CastProvider instance={castInstance}>
        {children}
      </CastProvider>
    </>
  );
};

export default App;

Video.jsx

import { useCast } from '@jdion/cast-react';


export const Video = ({ options }) => {
  const { player: chromecastPlayer } = useCast()

  const handleCast = async () => {
    console.log('casting');
    chromecastPlayer.state.displayName = 'Chocolate'
    chromecastPlayer.state.title = options.title ?? 'Video';
    chromecastPlayer.state.imageUrl = options.cover;

    chromecastPlayer.startCast(options.sources[0].src, 'application/x-mpegURL')
    console.log(chromecastPlayer.getState());
  }


  return (
    <div>
      <div className='player-wrapper'>
        <button onClick={handleCast}>Cast</button>
      </div>
    </div>
  );
};

export default Video;

And I just have that in the console:

//my logs
Video.jsx:338 casting
Video.jsx:339 {title: undefined, sources: Array(1), cover: 'video_url'}
Video.jsx:345 {currentTime: 0, progress: 0, volume: 1, title: 'Video', imageUrl: 'image_url', …}
// the error
584:1 Uncaught (in promise) session_error```

[Impre-visible]

The error is still here, there's requests made to load the movie but same error...

[jonathandion]

@Impre-visible Sorry for the delayed response. I have a working example here. You can also find this code in the examples folder from the repository.

Please also refer to the official Google documentation for the receiver. If the issue is resolved, please close it or reply here. Thank you.