Make Your Own UI

If you want to add a custom UI on top of Lura Player, you can add enabled: false parameter to your config, and Lura Player won't load the default user interface.

import React, { useRef, useEffect, useState } from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import { LuraPlayer, type UnifiedPlayer, type Configuration, UnifiedEventName } 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 = {
      ...
      controls: {
        enabled: false,
      },
      ...
    };
    useEffect(() => {
      if (!playerRef.current)return;
      playerRef.current.setConfig(config)
      const listenerId = playerRef.current.addListener((e) => {
        switch (e.type) {
          case UnifiedEventName.CONFIGURED:
            // Do something
            break;
          default:
            break;
        }
      });
      return () => {
        playerRef.current?.removeListener(listenerId)
      }
    }, [playerRef]);
    return (
        <View>
            <SafeAreaView />
            <LuraPlayer ref={playerRef} style={styles.player}>
                <LuraPlayerControls></LuraPlayerControls>
            </LuraPlayer>
            <Button title="Play" onPress={() => playerRef.current?.play()} />
            <Button title="Pause" onPress={() => playerRef.current?.pause()} />
        </View>
    );
}

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