@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
124 lines • 4.15 kB
JavaScript
import React, { PureComponent } from 'react';
import { PlayerContext } from '../util/PlayerContext';
import { Text, TouchableOpacity, View } from 'react-native';
import { AdEventType, PlayerEventType } from 'react-native-theoplayer';
import { arrayFind } from '../../utils/ArrayUtils';
import { isLinearAd } from '../../utils/AdUtils';
import { ActionButton } from '../button/actionbutton/ActionButton';
import { SkipNextSvg } from '../button/svg/SkipNext';
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export class AdSkipButton extends PureComponent {
static initialState = {
currentAd: undefined,
timeToSkip: undefined
};
constructor(props) {
super(props);
this.state = AdSkipButton.initialState;
}
componentDidMount() {
const context = this.context;
const player = context.player;
player.addEventListener(PlayerEventType.AD_EVENT, this.onAdEvent);
if (context.adInProgress) {
void this.update();
player.addEventListener(PlayerEventType.TIME_UPDATE, this.onTimeUpdateEvent);
}
}
componentWillUnmount() {
const player = this.context.player;
player.removeEventListener(PlayerEventType.AD_EVENT, this.onAdEvent);
player.removeEventListener(PlayerEventType.TIME_UPDATE, this.onTimeUpdateEvent);
}
onAdEvent = event => {
const player = this.context.player;
if (event.subType === AdEventType.AD_BREAK_BEGIN) {
void this.update();
player.addEventListener(PlayerEventType.TIME_UPDATE, this.onTimeUpdateEvent);
} else if (event.subType === AdEventType.AD_BREAK_END) {
this.setState(AdSkipButton.initialState);
player.removeEventListener(PlayerEventType.TIME_UPDATE, this.onTimeUpdateEvent);
}
};
onTimeUpdateEvent = _event => {
void this.update();
};
async update() {
const player = this.context.player;
const currentAds = await player.ads.currentAds();
const linearAd = arrayFind(currentAds ?? [], isLinearAd);
const skipOffset = linearAd?.skipOffset;
if (skipOffset === undefined || skipOffset < 0) {
this.setState({
currentAd: linearAd,
timeToSkip: undefined
});
} else {
const timeToSkip = Math.ceil(skipOffset - player.currentTime / 1000);
this.setState({
currentAd: linearAd,
timeToSkip: timeToSkip
});
}
}
onPress = () => {
const player = this.context.player;
player.ads.skip();
};
render() {
const {
currentAd,
timeToSkip
} = this.state;
const {
style,
textStyle,
icon
} = this.props;
if (timeToSkip === undefined || isNaN(timeToSkip) || currentAd && currentAd.integration === 'google-ima') {
return /*#__PURE__*/_jsx(_Fragment, {});
}
if (timeToSkip > 0) {
return /*#__PURE__*/_jsx(PlayerContext.Consumer, {
children: context => /*#__PURE__*/_jsx(Text, {
style: [context.style.text, {
color: context.style.colors.text
}, style],
children: context.locale.adSkipCounter({
seconds: timeToSkip
})
})
});
}
const skipSvg = icon ?? /*#__PURE__*/_jsx(SkipNextSvg, {});
return /*#__PURE__*/_jsx(PlayerContext.Consumer, {
children: context => /*#__PURE__*/_jsx(View, {
style: [{
flexDirection: 'row',
backgroundColor: context.style.colors.adSkipBackground,
padding: 5
}, style],
children: /*#__PURE__*/_jsxs(TouchableOpacity, {
style: [{
flexDirection: 'row'
}, style],
onPress: () => {
this.onPress();
context.ui.onUserAction_();
},
children: [/*#__PURE__*/_jsx(Text, {
style: [context.style.text, {
color: context.style.colors.text
}, textStyle],
children: context.locale.adSkip
}), /*#__PURE__*/_jsx(ActionButton, {
touchable: false,
svg: skipSvg
})]
})
})
});
}
}
AdSkipButton.contextType = PlayerContext;
//# sourceMappingURL=AdSkipButton.js.map