Getting Started

This section explains the basics of how to use the JavaScript/Typescript SDK component of Lura Player. This SDK can be used to enhance the functionality of your video embeds or to implement rich page-level video interactions.

To get started, copy the following code in an App.tsx file and start exploring in the console.

import React, { useRef, useEffect, useState } from "react";
import { SafeAreaView, StyleSheet, View, Button } from "react-native";
import { LuraPlayer, type UnifiedPlayer, 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<UnifiedPlayer>(null);
    const config: Configuration = {
        lura: {
            appKey: "PqSpQb9pFu1A_v4qrMnRNwcXJGoFMO0B02BwGBQ4Zwa0_uMdXPXrqjnlSbJbkv8duDNk2-c3JbOXq2auBscWP1GyvlWlgFcIzaO6QFG74nY",
            assetId: "5179686",
        },
    };
    useEffect(() => {
        playerRef.current?.setConfig(config);
    }, [playerRef]);
    return (
        <View>
            <SafeAreaView />
            <LuraPlayer ref={playerRef} style={styles.player}>
                <LuraPlayerControls></LuraPlayerControls>
            </LuraPlayer>
            <Button title="config" onPress={() => playerRef.current?.setConfig(config)} />
            <Button title="Play" onPress={() => playerRef.current?.play()} />
            <Button title="Pause" onPress={() => playerRef.current?.pause()} />
            <Button title="Mute" onPress={() => playerRef.current?.setMuted(true)} />
            <Button title="Unmute" onPress={() => playerRef.current?.setMuted(false)} />
        </View>
    );
}

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