cassette: ContextProvider/Consumer not working as expected

Thanks so much for your awesome work!

I’ve had to rig up my own context provider that wraps the component because, well, I just can’t get the one included in your component to work!

Can you please help me understand? Should it not be simply a matter of:

import { PlayerContextProvider } from '@cassette/core';
import { MediaPlayer } from '@cassette/player';
...
<PlayerContextProvider>
  <MediaPlayer/>
</PlayerContextProvider>

And then, elsewhere:

import { PlayerContextConsumer } from '@cassette/core';
...
<PlayerContextConsumer filterList={['currentTime', 'paused', 'onTogglePause']}>
 {({ currentTime, paused, onTogglePause }) => (
          <div>
              The track is {paused ? 'paused' : 'playing'}. The time is {currentTime}.
           </div>
)}
</PlayerContextConsumer>

Frustratingly, this creates:

TypeError: Cannot read property 'hasOwnProperty' of null

While I really appreciate your incredible work on this, I must admit that I find the documentation rather frustrating, as there doesn’t seem to be a “hello world” illustration of how to use a PlayerContextProvider / PlayerContextConsumer.

Best, rex

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 22 (13 by maintainers)

Most upvoted comments

@benwiley4000 👍for the quickstart documentation, you absolutely nailed it which suggests to me that you clearly understood why it was needed. 💯

FYI, I have made great use of cassette on my personal website, including use of the ContextProvider to interact with a persistent player from within page elements.

desktop only

https://www.rexmort.us/senecast

☝️ Have a look!

Again, thank you so much for your work on this. I really appreciate it.

rexmortus on Apr 23, 2019

Sure thing, Ben! Thanks again for your work - it has helped me realise my own work in a very real way.

On 23 Apr 2019, at 4:23 pm, Ben Wiley notifications@github.com wrote:

@rexmortus https://github.com/rexmortus wow that looks awesome (and works great on mobile if you turn on desktop spoofing!). Mind if I stick a link in the readme as an example of Cassette in the wild?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/benwiley4000/cassette/issues/413#issuecomment-485659678, or mute the thread https://github.com/notifications/unsubscribe-auth/AACLMW2MES7G3I33IIMSGUDPR2TOJANCNFSM4HFXUZGA.

rexmortus on Apr 23, 2019

@benwiley4000 no rush, as I’ve got it working now! I would be happy to start a conversation about the documentation with you (one of my strong suits). Do you have an active chat for this project? Or just GH issues?

rexmortus on Apr 13, 2019

Ok, I see what I was doing wrong. Both the ...mediaControls and the ...consumer must be peer child elements of the same ...provider.

This is unlike the standard pattern for react context providers, I believe?

In any case, I’ve got the bastard working now, and boy does it feel good!

rexmortus on Apr 13, 2019