Full Screen on Multi-video Scrollview

[mianusmankhalid]

• [x] react-native-af-video-player version: 0.1.9

• [x] React Native version: 0.55.2

• [x] OS: mac OS

• [x] Has this issue already been raised? I haven't seen it yet.

• [x] Have you clearly read and understood the Readme? Yes, specifically, https://github.com/abbasfreestyle/react-native-af-video-player#fullscreen-videos-inside-a-scrollview

• [x] Code and explanation to replicate this issue:

    <ScrollView style={{ flex: 1 }}>
        <Text>{"Text message"}</Text>
        <Container>
          {this.state.url != null ? (
            <Video
              url={this.state.url}
              rotateToFullScreen={true}
              lockPortraitOnFsExit={true}
            />
          ) : (
            <View />
          )}
        </Container>
        {this.state.url != null ? (
          <Video
            url={this.state.url}
            rotateToFullScreen={true}
            lockPortraitOnFsExit={true}
          />
        ) : (
          <View />
        )}
        <Text>{"Text message"}</Text>
      </ScrollView>

Explanation: I am trying to use scrollview to include multiple videos in my view. Including the videos works awesome! Thanks for your awesome component. The problem that I am facing is more towards full screen of the videos. Like in the images attached (the third screen shot) below, you can see that when I click on the full screen button on the second video, the first one gets full screen and the other one is played.

Though the result that I would expecting was the other way round. Any help on that matter would be well appreciated.

Thanks.

• [ ] Are there any console logs?

• [x] Include Screeshots / Video:

Video: SampleVideo.mp4.zip

[abbasfreestyle]

Hi @mianusmankhalid,

Thanks for your kind words :). Try again with version 0.2.0 It should be good enough to achieve what you're looking for however, it's not perfect and still needs more work.

[mianusmankhalid]

Hi @abbasfreestyle,

You're most welcome :) I tried version 0.2.0 as you mentioned but I believe up-to no luck.

I also want to raise a point here, I believe I haven't mentioned it yet. Previously I was just using Video component from your repo barely. However, I now want to use it with a wrapper around. I have seen a comment on using the scroll-viewer under your repo, that it might not be possible at the moment. Is it the case?

Sorry to push you for it, but after a lot of research I have found an awesome video player for react native that is behaving well platform independently, and I don't want to start looking for options again. Rather I want to help make it super awesome :)

[mianusmankhalid]

Just for the reference, I am adding the code the way I have used it below:

The Main ScrollView

<ScrollView style={{ flex: 1 }}>
    <Text>{'Text message'}</Text>
    <Container>
        {this.state.url != null ? (
        <VideoComponent
            url={this.state.url}
            placeholder={this.state.placeholder}
            logo={this.props.logo}
        />
        ) : (
        <View />
        )}
    </Container>
    {this.state.url != null ? (
        <VideoComponent
        url={this.state.url}
        placeholder={this.state.placeholder}
        logo={this.state.logo}
        />
    ) : (
        <View />
    )}
    <Text>{'Text message'}</Text>
</ScrollView>

The wrapped Video Component

import React, { Component } from 'react';
import Video from 'react-native-af-video-player';

export default class VideoComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Video
        url={this.props.url}
        rotateToFullScreen={true}
        lockPortraitOnFsExit={true}
        placeholder={this.props.placeholder}
        logo={this.props.logo}
      />
    );
  }
}

[mianusmankhalid]

@abbasfreestyle Hope you are doing well. Just wanted to discuss if you can spare some time and take a look at this. That will be very helpful for me. I just need your attention towards wrapping up this component. Thanks in advance.

[yamgemy]

I found a temporary fix, which maybe clunky when the screen rotates, but it has worked for me.

so i realised that when a user pressed the fullscreen button on any videos in a vertical list, it just rotates the screen and at the same time the whole list is scrollable. So i decide to just hide those items that i didn't click on, and for that i need to remember the index of the video i clicked.

to listen to Fullscreen button clicked:

1. open up node_modules\react-native-af-video-player\components\Video.js near line 238

toggleFS() { this.props.onFSToggled();//add this line

and near line 436

Video.propTypes = { onFSToggled: PropTypes.func, //add this line

2. now in FlatList renderItem do something like this:

<FlatList
        ....
        renderItem={({item, index}) =>{
             var {fullScreen, currentFSIndex} = this.state;
             return(
                 <View>
                    {(!fullScreen || (fullScreen && currentFSIndex===index)) &&
                     <Video
                        onFullScreen={state => {
                         this.setState({fullScreen:state});
                          }
                        }
                        onFSToggled= {()=>{
                           this.setState({currentFSIndex:index});
                          }
                        }
                     />
                   }
              </View>   
            )
        }

/>

So now after rotated to fullscreen the clicked video is still in Flatlist but other videos are hidden and there's nothing else to scroll to