find a way to make videos work about react-flip-page HOT 8 CLOSED

Also I'm seeing a ton of these messages when using Chrome

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>
react-dom.development.js:1650 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
preventDefault @ react-dom.development.js:1650
doNotMove @ index.js:8
startMoving @ index.js:139
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:452
executeDispatch @ react-dom.development.js:836
executeDispatchesInOrder @ react-dom.development.js:858
executeDispatchesAndRelease @ react-dom.development.js:956
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:967
forEachAccumulated @ react-dom.development.js:935
processEventQueue @ react-dom.development.js:1112
runEventQueueInBatch @ react-dom.development.js:3607
handleTopLevel @ react-dom.development.js:3616
handleTopLevelImpl @ react-dom.development.js:3347
batchedUpdates @ react-dom.development.js:11082
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
`

from react-flip-page.

Hey @talkingtab, I do believe you have everything needed to do what you want with both startSwiping and stopSwiping callbacks.

You could use a state part in your child component that would indicate if you render the image, or the video. And this state property would be updated accordingly on startSwiping or stopSwiping. Do you understand what I mean?

Also, I have not been able to see those messages. When do you see them?

from react-flip-page.

I agree at this point I don't need anything. The messages come [sigh] when I am using Chrome Canary only. Sorry about that.

from react-flip-page.

What I did was to take the react-flip-page code and add an "active" state that is passed as a prop to the children. Basically "if not swiping and this page is the same as this.state.page then set active true" when doing the cloneElement(). If the component is not active (because of swiping or being on another page) I just render an image - a jpg. If the component is active then I render the video component. This works well if I have two images one for active and one for not. When I substitute a video for the active component I still see exactly the same problem I had originally- one half of the video is active and plays and the other half is a static half-image that does not play.

I'm now thinking that this must be an effect of how react-flip-page renders the child component in two halves. I have not plowed into that code yet, but my first thought is to use the "active" flag to have react-flip-page render the component differently (singularly) when it is active. Basically when render() is called and active is true to have it skip much of renderPage(). Just wanted to get your thinking?

from react-flip-page.

The idea of an active prop is interesting.

However, the concept of react-flip-page rendering the component differently following active doesn't please me. As you mentioned the prop is passed to the current page, that's what you would use inside your component to render accordingly.

As a drawback, this obliges creation of a child component to use the active prop properly.

from react-flip-page.

I agree it is not pleasing. For now I am just trying to find a way, any way at all to get it to work. I don't really understand what is going on with the

I did try what you suggested, which was to render my component differently when "active" but I still got the split screen with one half playing and the other not.

from react-flip-page.

I think that's because you set the active property on page change only. Which causes the current page to still be active even while moving.

from react-flip-page.

Closing because no activity.

from react-flip-page.