[admob] Support 11.0 VideoController methods

This commit is contained in:
Elliot Hesp 2017-06-20 12:19:26 +01:00
parent 02be8a0d84
commit 54bf957cb3
9 changed files with 160 additions and 18 deletions

View File

@ -208,9 +208,6 @@ public class RNFirebaseAdMobBanner extends SimpleViewManager<ReactViewGroup> {
payload.putBoolean(RNFirebaseAdMobNativeExpress.Events.EVENT_AD_VIDEO_CONTENT.toString(), false); payload.putBoolean(RNFirebaseAdMobNativeExpress.Events.EVENT_AD_VIDEO_CONTENT.toString(), false);
payload.putInt("width", width); payload.putInt("width", width);
payload.putInt("height", height); payload.putInt("height", height);
payload.putInt("left", left);
payload.putInt("top", top);
sendEvent(Events.EVENT_AD_LOADED.toString(), payload); sendEvent(Events.EVENT_AD_LOADED.toString(), payload);
} }

View File

@ -34,6 +34,10 @@ public class RNFirebaseAdMobNativeExpress extends SimpleViewManager<ReactViewGro
EVENT_AD_CLOSED("onAdClosed"), EVENT_AD_CLOSED("onAdClosed"),
EVENT_AD_LEFT_APPLICATION("onAdLeftApplication"), EVENT_AD_LEFT_APPLICATION("onAdLeftApplication"),
EVENT_AD_VIDEO_END("onVideoEnd"), EVENT_AD_VIDEO_END("onVideoEnd"),
EVENT_AD_VIDEO_MUTE("onVideoMute"),
EVENT_AD_VIDEO_PAUSE("onVideoPause"),
EVENT_AD_VIDEO_PLAY("onVideoPlay"),
EVENT_AD_VIDEO_START("onVideoStart"),
EVENT_AD_VIDEO_CONTENT("hasVideoContent"); EVENT_AD_VIDEO_CONTENT("hasVideoContent");
private final String event; private final String event;
@ -213,23 +217,35 @@ public class RNFirebaseAdMobNativeExpress extends SimpleViewManager<ReactViewGro
adView.layout(left, top, left + width, top + height); adView.layout(left, top, left + width, top + height);
VideoController vc = adView.getVideoController(); VideoController vc = adView.getVideoController();
WritableMap payload = Arguments.createMap(); final WritableMap payload = Arguments.createMap();
payload.putBoolean(Events.EVENT_AD_VIDEO_CONTENT.toString(), vc.hasVideoContent()); payload.putBoolean(Events.EVENT_AD_VIDEO_CONTENT.toString(), vc.hasVideoContent());
payload.putInt("width", width); payload.putInt("width", width);
payload.putInt("height", height); payload.putInt("height", height);
payload.putInt("left", left);
payload.putInt("top", top); sendEvent(Events.EVENT_AD_LOADED.toString(), payload);
if (vc.hasVideoContent()) { if (vc.hasVideoContent()) {
vc.setVideoLifecycleCallbacks(new VideoController.VideoLifecycleCallbacks() { vc.setVideoLifecycleCallbacks(new VideoController.VideoLifecycleCallbacks() {
public void onVideoEnd() { public void onVideoEnd() {
sendEvent(Events.EVENT_AD_VIDEO_END.toString(), null); sendEvent(Events.EVENT_AD_VIDEO_END.toString(), null);
} }
public void onVideoMute(boolean isMuted) {
WritableMap videoMutePayload = Arguments.createMap();
videoMutePayload.putBoolean("isMuted", isMuted);
sendEvent(Events.EVENT_AD_VIDEO_MUTE.toString(), videoMutePayload);
}
public void onVideoPause() {
sendEvent(Events.EVENT_AD_VIDEO_PAUSE.toString(), null);
}
public void onVideoPlay() {
sendEvent(Events.EVENT_AD_VIDEO_PLAY.toString(), null);
}
public void onVideoStart() {
sendEvent(Events.EVENT_AD_VIDEO_START.toString(), null);
}
}); });
} }
sendEvent(Events.EVENT_AD_LOADED.toString(), payload);
} }
@Override @Override

View File

@ -24,7 +24,7 @@ AdMob Banners in RNFirebase are exported as a usable React component, allowing y
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
| ------------------- | ------------------ | --------------------------------------- | ----------------------------------------------------------------------------------- | | ------------------- | ------------------ | --------------------------------------- | ----------------------------------------------------------------------------------- |
| size | string (See Sizes) | SMART_BANNER | Returns a sized banner (automatically sets View style) | | size | string (See Sizes) | SMART_BANNER | Returns a sized banner (automatically sets View style) |
| unitId | string | ca-app-pub-3940256099942544/6300978111 | Your AdMob banner unit ID. Default is the Google testing account | | unitId | string | | Your AdMob banner unit ID. |
| request | AdRequest | new AdRequest().addTestDevice().build() | An instance of AdRequest to load with the Banner | | request | AdRequest | new AdRequest().addTestDevice().build() | An instance of AdRequest to load with the Banner |
| onAdLoaded | function | | Called when an ad is received. | | onAdLoaded | function | | Called when an ad is received. |
| onAdOpened | function | | Called when an ad opens an overlay that covers the screen. | | onAdOpened | function | | Called when an ad opens an overlay that covers the screen. |
@ -109,7 +109,7 @@ styling (background color, positions, font size etc). Native Express adverts are
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
| ------------------- | ------------------ | --------------------------------------- | ----------------------------------------------------------------------------------- | | ------------------- | ------------------ | --------------------------------------- | ----------------------------------------------------------------------------------- |
| size | string (See Sizes) | SMART_BANNER | TODO | | size | string (See Sizes) | SMART_BANNER | TODO |
| unitId | string | ca-app-pub-3940256099942544/6300978111 | Your AdMob banner unit ID. Default is the Google testing account | | unitId | string | | Your AdMob banner unit ID. |
| request | AdRequest | new AdRequest().addTestDevice().build() | An instance of AdRequest to load with the Banner | | request | AdRequest | new AdRequest().addTestDevice().build() | An instance of AdRequest to load with the Banner |
| video | AdRequest | new VideoOptions().build() | An instance of AdRequest to load with the Banner | | video | AdRequest | new VideoOptions().build() | An instance of AdRequest to load with the Banner |
| onAdLoaded | function | | Called when an ad is received. | | onAdLoaded | function | | Called when an ad is received. |
@ -124,7 +124,7 @@ styling (background color, positions, font size etc). Native Express adverts are
```js ```js
const Banner = firebase.admob.Banner; const Banner = firebase.admob.Banner;
const NativeExpress = firebase.admob.NativeExpress; const NativeExpress = firebase.admob.NativeExpress;
const NativeExpress = firebase.admob.AdRequest; const AdRequest = firebase.admob.AdRequest;
const request = new AdRequest(); const request = new AdRequest();
request.addKeyword('foobar'); request.addKeyword('foobar');
@ -314,7 +314,25 @@ Called when an advert fails to load. Returns a JavaScript Error with one of the
| admob/os-version-too-low | The current devices OS is below the minimum required version. | | admob/os-version-too-low | The current devices OS is below the minimum required version. |
##### [NativeExpress] onVideoEnd() ##### [NativeExpress] onVideoEnd()
Called when a the video has ended. Called when video playback finishes playing.
##### [NativeExpress] onVideoMute(config: `Object`)
Called when the video changes mute state.
```js
{
isMuted: boolean,
}
```
##### [NativeExpress] onVideoPause()
Called when video playback is paused.
##### [NativeExpress] onVideoPlay()
Called when video playback is playing.
##### [NativeExpress] onVideoStart()
alled when video playback first begins.
##### [RewardedVideo] onRewarded(reward: `Object`) ##### [RewardedVideo] onRewarded(reward: `Object`)
Called when the user has been rewarded (usually for watching an entire video). Returns a reward object: Called when the user has been rewarded (usually for watching an entire video). Returns a reward object:

View File

@ -89,8 +89,30 @@
[self sendEvent:@"onAdLeftApplication" payload:nil]; [self sendEvent:@"onAdLeftApplication" payload:nil];
} }
- (void)videoControllerDidEndVideoPlayback:(GADVideoController *)videoController { - (void)videoControllerDidEndVideoPlayback:(nonnull GADVideoController *)videoController {
[self sendEvent:@"onVideoEnd" payload:nil]; [self sendEvent:@"onVideoEnd" payload:nil];
} }
// Only one video play method?
- (void)videoControllerDidPlayVideo:(nonnull GADVideoController *)videoController {
[self sendEvent:@"onVideoStart" payload:nil];
[self sendEvent:@"onVideoPlay" payload:nil];
}
- (void)videoControllerDidPauseVideo:(nonnull GADVideoController *)videoController {
[self sendEvent:@"onVideoPause" payload:nil];
}
- (void)videoControllerDidMuteVideo:(nonnull GADVideoController *)videoController {
[self sendEvent:@"onVideoMute" payload:@{
@"isMuted": @YES,
}];
}
- (void)videoControllerDidUnmuteVideo:(nonnull GADVideoController *)videoController {
[self sendEvent:@"onVideoMute" payload:@{
@"isMuted": @NO,
}];
}
@end @end

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { View, requireNativeComponent } from 'react-native'; import { ViewPropTypes, requireNativeComponent } from 'react-native';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { statics } from './'; import { statics } from './';
import { nativeToJSError } from '../../utils'; import { nativeToJSError } from '../../utils';
@ -10,7 +10,7 @@ import VideoOptions from './VideoOptions';
class AdMobComponent extends React.Component { class AdMobComponent extends React.Component {
static propTypes = { static propTypes = {
...View.propTypes, ...ViewPropTypes,
// TODO ehesp: cant init this outside of the component; statics isn't defined // TODO ehesp: cant init this outside of the component; statics isn't defined
...(() => { ...(() => {
@ -60,6 +60,7 @@ class AdMobComponent extends React.Component {
* @param nativeEvent * @param nativeEvent
*/ */
onBannerEvent = ({ nativeEvent }) => { onBannerEvent = ({ nativeEvent }) => {
console.log('EVENT', nativeEvent)
if (this.props[nativeEvent.type]) { if (this.props[nativeEvent.type]) {
if (nativeEvent.type === 'onAdFailedToLoad') { if (nativeEvent.type === 'onAdFailedToLoad') {
const { code, message } = nativeEvent.payload; const { code, message } = nativeEvent.payload;

View File

@ -13,7 +13,6 @@ function Banner({ ...props }) {
Banner.propTypes = AdMobComponent.propTypes; Banner.propTypes = AdMobComponent.propTypes;
Banner.defaultProps = { Banner.defaultProps = {
unitId: 'ca-app-pub-3940256099942544/2177258514',
size: 'SMART_BANNER', size: 'SMART_BANNER',
}; };

View File

@ -13,8 +13,6 @@ function NativeExpress({ ...props }) {
NativeExpress.propTypes = AdMobComponent.propTypes; NativeExpress.propTypes = AdMobComponent.propTypes;
NativeExpress.defaultProps = { NativeExpress.defaultProps = {
// unitId: 'ca-app-pub-3940256099942544/2177258514',
unitId: 'ca-app-pub-3940256099942544/8897359316',
size: 'SMART_BANNER', size: 'SMART_BANNER',
}; };

View File

@ -88,5 +88,9 @@ export const statics = {
}, },
NativeExpressEventTypes: { NativeExpressEventTypes: {
onVideoEnd: 'onVideoEnd', onVideoEnd: 'onVideoEnd',
onVideoMute: 'onVideoMute',
onVideoPause: 'onVideoPause',
onVideoPlay: 'onVideoPlay',
onVideoStart: 'onVideoStart',
}, },
}; };

87
tests/src/main.admob.js Normal file
View File

@ -0,0 +1,87 @@
import React, { Component } from 'react';
import { View, Button, Platform } from 'react-native';
import fb from './firebase';
global.Promise = require('bluebird');
const unitId = {
...Platform.select({
android: {
banner: 'ca-app-pub-3940256099942544/6300978111',
express: 'ca-app-pub-3940256099942544/2793859312',
interstitial: 'ca-app-pub-3940256099942544/1033173712',
rewarded: 'ca-app-pub-3940256099942544/5224354917',
},
ios: {
banner: 'ca-app-pub-3940256099942544/6300978111',
express: 'ca-app-pub-3940256099942544/4270592515',
interstitial: 'ca-app-pub-3940256099942544/1033173712',
rewarded: 'ca-app-pub-3940256099942544/1712485313',
},
}),
};
const firebase = fb.native;
// Components
const Banner = firebase.admob.Banner;
const NativeExpress = firebase.admob.NativeExpress;
// API
const interstitial = firebase.admob().interstitial(unitId.interstitial);
interstitial.loadAd();
const rewarded = firebase.admob().rewarded(unitId.rewarded);
rewarded.loadAd();
function bootstrap() {
// Remove logging on production
if (!__DEV__) {
console.log = () => {
};
console.warn = () => {
};
console.error = () => {
};
console.disableYellowBox = true;
}
class Root extends Component {
showInterstitial() {
interstitial.show();
};
showRewarded() {
rewarded.show();
}
render() {
return (
<View>
<Banner
unitId={unitId.banner}
size={'SMART_BANNER'}
/>
<NativeExpress
unitId={'ca-app-pub-3940256099942544/2793859312'}
size={'300x200'}
/>
<Button
title={'Show Interstitial'}
onPress={this.showInterstitial}
/>
<Button
title={'Show Rewarded Video'}
onPress={this.showRewarded}
/>
</View>
);
}
}
return Root;
}
export default bootstrap();