As a noob I am trying to create an app that plays videos (local videos) when in viewport. User scrolls left and right and when video is in view it autoplays. If the video is out of view it stops playing.
I tried following the following tutorial: https://codedaily.io/courses/4/Fundamentals-of-React-Native-Video/37
Changed all the calculations to work with width instead of height but didn't work.
Then I stumbled upon Skele-Components: https://blog.netcetera.com/viewport-aware-components-for-react-native-apps-a28ea605e89e
That checks if a component is in view or not. As a test I placed 2 videos inside my ScrollView. Scroll I console.logged "Entered" for when a video enters and "Left" for when the video leaves the viewport. The viewport clearly shows one video but the console logs 2 "Entered". Telling me the logic isn't working. Also the console doesn't show "Left" when video is scrolled out of view.
If you could take a look at the code and some help would be great. thank you.
Below is the scrollview that contains the video source component.
export default class VideoScrollView extends Component {
render() {
return (
<Viewport.Tracker>
<ScrollView
horizontal={true}
pagingEnabled={true}
scrollEventThrottle={16}
>
<Ad source={Ad28} />
<Ad source={Ad29} />
</ScrollView>
</Viewport.Tracker>
);
}
}
Below is the video component
const ViewportAwareVideo = Viewport.Aware(Video);
export class VideoAd extends Component {
render() {
this.state = {
paused: true,
visible: false
};
return (
<View style={styles.viewContainer}>
<ViewportAwareVideo
source={this.props.source}
paused={this.state.paused}
style={{ width: "100%", height: "100%" }}
innerRef={ref => (this.player = ref)}
onViewportEnter={() => console.log("entered")}
onViewportLeave={() => console.log("left")}
/>
</View>
);
}
}
const styles = StyleSheet.create({
viewContainer: {
flex: 1,
width: Dimensions.get("window").width,
justifyContent: "center",
alignItems: "center"
}
});