Non Linear Ads

Non linear pause ads display an ad overlay inside the player when playback is paused. Configure pause ads under ads.nonLinear.pause.

Pause Ads

Attribute	Type	Required	Description
provider	`"generic"`	no	Provider of the pause ad configuration.
generic	object	no	Generic non linear pause ad configuration.
generic.url	string	no	URL for the VAST tag that includes non linear ads.
generic.xPosition	`"left"` \| `"center"` \| `"right"`	no	Horizontal position of the non linear ad display area.
generic.yPosition	`"top"` \| `"center"` \| `"bottom"`	no	Vertical position of the non linear ad display area.
generic.backgroundOpacity	number	no	Background opacity of the ad display area.
generic.slideAnimation	object	no	Slide animation configuration for the non linear ad.
generic.slideAnimation.enabled	boolean	no	Whether slide animation is enabled.
generic.slideAnimation.direction	`"left"` \| `"right"` \| `"up"` \| `"down"`	no	Slide animation direction.
generic.slideAnimation.duration	number	no	Slide animation duration in seconds.
generic.padding	object	no	Padding around the non linear ad display area.
generic.padding.top	string	no	Top padding in accepted units.
generic.padding.bottom	string	no	Bottom padding in accepted units.
generic.padding.left	string	no	Left padding in accepted units.
generic.padding.right	string	no	Right padding in accepted units.

import React, { useEffect, useRef } from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import { LuraPlayer, type Configuration, type UnifiedPlaylist } from "@akta-tech/lura-player-react-native";
import { LuraPlayerControls } from "@akta-tech/lura-player-react-native-ui";

export default function App() {
    const playerRef = useRef<UnifiedPlaylist>(null);
    const config: Configuration = {
        ...
        ads: {
            nonLinear: {
                pause: {
                    provider: "generic",
                    generic: {
                        url: "VAST_AD_TAG_URL_WITH_NON_LINEAR_ADS",
                        xPosition: "right",
                        yPosition: "center",
                        backgroundOpacity: 0.6,
                        slideAnimation: {
                            enabled: true,
                            direction: "left",
                            duration: 0.6,
                        },
                        padding: {
                            right: "5%",
                        },
                    },
                },
            },
        },
        ...
    };

    useEffect(() => {
        playerRef.current?.setConfig(config);
    }, [playerRef]);

    return (
        <View>
            <SafeAreaView />
            <LuraPlayer ref={playerRef} style={styles.player} Controls={LuraPlayerControls} />
        </View>
    );
}

const styles = StyleSheet.create({
    player: {
        backgroundColor: "#000",
        width: "100%",
        maxWidth: 640,
        aspectRatio: 16 / 9,
    },
});

The cooldown between pause ad displays is controlled by ads.policy.pauseAdCooldown.

Pause Ads​

Pause Ads