# AppNexusVideoBanner

## Description

AppNexusVideoBanner is providing video banners functionality. Its downloading from internet video and you set the size of video by setting video banner state. You are responsible when to play video as soon as it downloaded.

## Usage

All you need is to `import` `{ AppNexusVideoBanner }` from the `audienzz-react-native-appnexus-library` module and then use the `<AppNexusVideoBanner/>` tag.

```javascript
'use strict';
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { AppNexusVideoBanner } from 'audienzz-react-native-appnexus-library'

type Props = {};
export default class App extends Component<Props> {
    videoBanner = null;
    render(){
        return(
            <View style={styles.container}>
            <AppNexusVideoBanner
                placementId={"15624512"}
                onAdLoadSuccess={() => {
                    this.videoBanner.setState({
                        width: 400,
                        height: 200
                    });
                    this.videoBanner.playVideo();
                }}
                ref={banner => {
                    this.videoBanner = banner;
                }}
            />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
})
```

The minimum parameters required to pass in AppNexusVideoBanner is `placementId`, set appropriate size on load success and start play video.  You can also use other input parameters. Example:

```
<AppNexusVideoBanner
    placementId={"15624512"}
    onAdLoadSuccess={() => {
        this.videoBanner.setState({
            width: 400,
            height: 200
        });
        this.videoBanner.playVideo();
    }}
    onAdLoadFail={() => console.log("Failed!")}
    onPlayStatusChange={event => {
        console.log("status changed!");
    }}
    onEventChange={event => {
        console.log("event change!");
    }}
/>

```
#### `placementId`

The placement ID identifies your banner in system. You must have a valid, active placement ID to monetize your application.  

#### `onAdLoadSuccess`

Called when a native video ad has successfully loaded.  

#### `onPlayStatusChange`

Called when a native video ad changed a status of played video.  

#### `onEventChange`

Called when a native video ad event arrived.

#### `playVideo()`

Started playing video if its content downloaded from internet

#### `reloadVideo()`

Reloads video banner and started loading content

## Integrating in scroll view
1) Import all needed components 
```
import React, { Component } from "react";
import {
    View,
    Text,
    SafeAreaView,
    ScrollView,
    StyleSheet,
    Dimensions,
    ActivityIndicator,
    TouchableOpacity
} from "react-native";
import { withNavigationFocus } from "react-navigation";
import { AppNexusVideoBanner } from "audienzz-react-native-appnexus-library";
```
2) Adding const variables for window size 
```
const { width, height } = Dimensions.get("window");
```
3) Add reference for video banner, 
```
videoBanner = null;
```
3) In component state creating var "itemPosition" (position of banner) and "scrollPosition" (position of scroll)
```
class YourComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            itemPosition: "",
            scrollPosition: ""
        };
    }
}
```
4) Add method to get and update banner position, in the end call "playVideoIfNeeded" to start video if its already visible
```
getPosition = event => {
    let layout = event.nativeEvent.layout;
    this.setState({
        itemPosition: layout.y
    });
    this.playVideoIfNeeded()
};
```
5) Add method to get scroll position, in the end call "playVideoIfNeeded" to start video if its already visible
```
getScrollPosition = event => {
    this.setState({
        scrollPosition: event.nativeEvent.contentOffset.y
    });
    this.playVideoIfNeeded()
};
```
6) Add function that check and compare item and scroll position and start playing video
```
playVideoIfNeeded() {
    if ((this.state.scrollPosition + height > this.state.itemPosition && this.props.isFocused === true) ||
    this.state.scrollPosition === this.state.itemPosition) {
        this.videoBanner.playVideo();
    }
}
```
7) In scroll view add video banner component and save reference to it. onAdLoadSuccess set video banner size and call start playing to play if its already visible
```
render() {
const { container, scrollContainer, topContainer, textStyle } = styles;
return (
<ScrollView
    onScroll={this.getScrollPosition}
    scrollEventThrottle={1}
    style={scrollContainer}
    ...
    <View onLayout={event => this.getPosition(event)}>
    <AppNexusVideoBanner
        placementId={"15624512"}
        onAdLoadSuccess={() => {
            this.videoBanner.setState({
                width: 400,
                height: 200
            });
            this.playVideoIfNeeded()
        }}
        onAdLoadFail={() => console.log("Failed!")}
        style={{ backgroundColor: "lightgray" }}
        ref={banner => {
            this.videoBanner = banner;
        }}
    />
>)
```
5) To get updates when page is not in focus and reload video for next time component will be presented  
```
export default withNavigationFocus(YourComponent);
```
and
```
componentDidUpdate() {
    if (this.props.isFocused === false) {
        this.videoBanner.reloadVideo();
    }
}
```