Generate a Nonce for Your Ad Request

A nonce is a single encrypted string generated by PAL via the NonceLoader. The PAL SDK requires each new stream request to be accompanied by a newly generated nonce. However, nonces may be reused for multiple ad requests within the same stream.

Initialize the PAL Plugin

To initialize the PAL Plugin, add pal attribute to the plugins object in your config. To see more details about configuration, please check out PAL Plugin

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

export default function App() {
    const playerRef = useRef<UnifiedPlaylist>(null);
    const config: Configuration = {
      ...
      plugins: {
        pal: {
          enabled: true,
          forceLimitedAds: false,
          directedForChildOrUnknownAge: false,
          disableLimitedAdsStorage: false,
          disableFirstPartyIdentifiers: false,
          ppid: "12DJD92J02KXVLS9D817DCJ078S8F1J2",
          descriptionUrl: "https://docs4.lura.app/",
        },
      },
      ...
    };
    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,
    },
});

Using the PAL Nonce

LuraPlayer automatically fills the reserved macro LURA_PAL_NONCE in URL's under the ads parameter. Check out macros for more details.

import React, { useRef, useEffect, useState } from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import { LuraPlayer, type UnifiedPlaylist, type Configuration } 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: {
            clientSide: {
                provider: "generic",
                generic: {
                    breaks: [
                        {
                            url: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=[LURA_CORRELATOR]&givn=[LURA_PAL_NONCE]",
                            offset: "preroll",
                        },
                    ],
                },
            },
        },
        content: {
            title: "Tears of steel",
            media: [
                {
                    url: "https://w3.mp.lura.live/test-assets/tears-of-steel/hls-ts.m3u8",
                    type: "application/x-mpegURL",
                },
                {
                    url: "https://w3.mp.lura.live/test-assets/tears-of-steel/dash.mpd",
                    type: "application/dash+xml",
                },
            ],
        },
        plugins: {
            pal: {
                enabled: true,
                forceLimitedAds: false,
                directedForChildOrUnknownAge: false,
                disableLimitedAdsStorage: false,
                disableFirstPartyIdentifiers: false,
                ppid: "12DJD92J02KXVLS9D817DCJ078S8F1J2",
                descriptionUrl: "https://docs4.lura.app/",
            },
        },
    };
    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,
    },
});