Improvements? Feature requests? about react-flip-page HOT 15 CLOSED

Hi @darenju !
First of all, thanks for your job it's well documented and test-covered. As a newbie I like it ;-)

I'm trying to make nested flipboards to make, for example, a "main" navigation vertical, but with some nested flipboards with horizontal navigation.
When I try doing it, it splits the board in 4 windows, which is not the desired effect.
Any idea in wich part of the codebase I can look to try solving that ?

Here is a simple exemple of what I'm trying to achieve :

<FlipPage orientation="vertical">
    <FlipPage orientation="horizontal">
        <div>Main screen</div>
        <div>Horizontal swipe from the main screen</div>
    </FlipPage>
    <FlipPage orientation="horizontal">
        <div>Second Main screen (vertical swipe from the main screen)</div>
        <div>Horizontal swipe from the Second Main screen</div>
    </FlipPage>          
</FlipPage>

Thanks for your time !

from react-flip-page.

Hello buddy,

Nice repo! I really appreciate it.

Firstly, as you requested in the README file, I have the intent on helping you out with unit tests. When I have the time, I'll send my first PR to help you with this.

About features. I have some in minds. I'll create some "issues" with my feature requests.

Regards,
Nikolas

from react-flip-page.

@darenju I would love to have an option where pages pivot from the very left (as opposed to the center) to simulate more of a traditional book.

from react-flip-page.

@YoonsLee Hmm, that would totally change the way the pages are split into halves. But it's possible to find a way to keep both features I guess.

from react-flip-page.

Hi, I'm trying to build some video books- each FlipPage could have some mix of possibly text, images, and video. I get the video, but flipping the page ends up with two halves which are no longer in sync.

In the screen shot above it is one video, and the page flips left to right, but you can see that the two halves are no longer at the same point in the video. In addition clicking on one half brings up controls while the other continues to play.

It would be nice to have a demo with a video, but just some ideas of where to start debugging/fixing would help.
Thanks (and great package)!

from react-flip-page.

Update on video. I'm wondering if the issue is something to do with the video continuing to play while the transitions are in action. It seems like one possibility is to pause the video on any touch, mouse event so that in a page turn it does not continue to play.

from react-flip-page.

@talkingtab There is a onPageChange callback that gets executed when the page has been changed. I could implement a onStartSwiping event, so that you could pause your video accordingly.

@Selbahc Thank you for reporting! However, would you mind opening a new issue for your problem? It helps the repository to be cleaner.

Same for @talkingtab, even though we almost solved your problem.

Thank you!

from react-flip-page.

@darenju That would be a great help. Just fyi, here is the component I'm trying

import React, { Component } from "react";

class R5video extends Component {
    render() {
        return <video src="./MVI_OUT.mp4" type="video/mp4" controls />;
    }
}

export default R5video;

from react-flip-page.

[email protected] released with onStartSwiping and onStopSwiping callbacks.

In your case @talkingtab, you could do something like this:

<FlipPage onStartSwiping={() => this.videoComponent.pause()} onStopSwiping={() => this.videoComponent.resume()}>
  <R5video ref={(video) => { this.videoComponent = video; }} />
</FlipPage>

class R5video extends Component {
    pause() {
        this.video.pause();
    }

    resume() {
        this.video.play();
    }

    render() {
        return <video ref={(video) => { this.video = video; }} src="./MVI_OUT.mp4" type="video/mp4" controls />;
    }
}

from react-flip-page.

Wow! Thats great, I've got it installed, may take me a couple of days to walk through though. Still seeing the same thing, but not sure I have it hooked up right.

from react-flip-page.

@darenju Sure, it's done !

from react-flip-page.

Hi,

Thank you for the great repo.

I think it would be nice to have more methods than goToNextPage and goToPreviousPage.
For example getCurrentPage, hasNextPage, hasPreviousPage, others ?

Update:
I just realized we already had access to these methods and the sate through the ref , excuse-me I am still new to react.

Thank you

from react-flip-page.

Hi,

Do you think it is possible to revert the direction of the book through props ?
In other words, the first page will be at the right, we go next by swipping to the left.

Thank you

from react-flip-page.

You can now use the startAt property to set the default page. Then just set orientation to horizontal. Then, you can know which actual page you're on with the onPageChange callback, plus some maths:

<FlipPage onPageChange={(newPage) => { const actualPage = MAX_PAGES - newPage; }} />

from react-flip-page.

Thant you, the startAt property helped me a lot. I reverted my pages and started at the end :

<FlipPage startAt={2}>
   <Page3/>
   <Page2/>
   <Page1/>
</FlipPage>

from react-flip-page.