@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
89 lines • 2.82 kB
JavaScript
import React, { PureComponent } from 'react';
import { PlayerContext } from '../util/PlayerContext';
import { Text } from 'react-native';
import { AdEventType, PlayerEventType } from 'react-native-theoplayer';
import { arrayFind } from '../../utils/ArrayUtils';
import { isLinearAd } from '../../utils/AdUtils';
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
export class AdDisplay extends PureComponent {
static initialState = {
adPlaying: false,
currentAd: undefined,
totalAds: undefined
};
constructor(props) {
super(props);
this.state = AdDisplay.initialState;
}
componentDidMount() {
const context = this.context;
const player = context.player;
player.addEventListener(PlayerEventType.AD_EVENT, this.onAdEvent);
if (context.adInProgress) {
void this.updateAdDisplayState();
}
}
componentWillUnmount() {
const player = this.context.player;
player.removeEventListener(PlayerEventType.AD_EVENT, this.onAdEvent);
}
onAdEvent = event => {
void this.updateAdDisplayState(event.subType);
};
async updateAdDisplayState(type) {
const {
adPlaying
} = this.state;
const context = this.context;
if (type === AdEventType.AD_BREAK_END) {
this.setState(AdDisplay.initialState);
} else if (adPlaying || context.adInProgress || type === AdEventType.AD_BREAK_BEGIN) {
const player = context.player;
const currentAdBreak = await player.ads.currentAdBreak();
const currentLinearAds = (currentAdBreak.ads ?? []).filter(isLinearAd);
let index = 0;
if (currentLinearAds.length > 1) {
const currentAds = await player.ads.currentAds();
const currentLinearAd = arrayFind(currentAds, isLinearAd);
if (currentLinearAd) {
index = currentLinearAds.indexOf(currentLinearAd);
}
}
this.setState({
adPlaying: true,
currentAd: index + 1,
totalAds: currentLinearAds.length
});
return;
}
}
render() {
const {
adPlaying,
currentAd,
totalAds
} = this.state;
const {
style
} = this.props;
if (!adPlaying || totalAds === undefined || currentAd === undefined) {
return /*#__PURE__*/_jsx(_Fragment, {});
}
return /*#__PURE__*/_jsx(PlayerContext.Consumer, {
children: context => /*#__PURE__*/_jsx(Text, {
style: [context.style.text, {
color: context.style.colors.adDiplayText,
backgroundColor: context.style.colors.adDisplayBackground,
borderRadius: 2,
padding: 5
}, style],
children: context.locale.adProgress({
currentAd,
totalAds
})
})
});
}
}
AdDisplay.contextType = PlayerContext;
//# sourceMappingURL=AdDisplay.js.map