Theme Configuration
The Lura Player's user interface is designed to provide businesses with one of the best video viewing experiences in the industry. Our user interface is expertly crafted to mesmerize your viewers and increase their interaction with your videos, resulting in increased revenue for your business. Built from the ground up to be fully responsive, the Lura Player delivers a seamless experience on both smaller and larger screens. With advanced features like trick play support, hover preview matrix, seek, visual feedbacks, and key bindings similar to popular platforms that the users are used to, our user interface sets the standard for video viewing experiences. By choosing the Lura Player, you can be confident that you're providing your viewers with the best possible video experience, one that will keep them coming back for more.
However, you might want to create your own user interface for creating unique user experiences. Therefore, we made it easy to switch user interfaces and also make the lura player display no UI.
| Attribute | Type | Required | Description |
|---|---|---|---|
| enabled | boolean | no | Enable or disable the UI (Defaults to true) |
| theme | "Default" | no | UI Theme of the Lura Player. |
| platform | "desktop" | "tv" | no | The platform that the player is currently playing in. |
| layout | "default" | "tv" | "vertical" | no | UI Layout of the Lura Player. |
import React, { useRef, useEffect, useState } from "react";
import { SafeAreaView, StyleSheet, View } 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 = {
...
controls: {
enabled: true,
theme: "Default",
layout: "default"
},
...
};
useEffect(() => {
playerRef.current?.setConfig(config)
}, [playerRef]);
return (
<View>
<SafeAreaView />
<LuraPlayer ref={playerRef} style={styles.player}>
<LuraPlayerControls></LuraPlayerControls>
</LuraPlayer>
</View>
);
}
const styles = StyleSheet.create({
player: {
backgroundColor: "#000",
width: "100%",
maxWidth: 640,
aspectRatio: 16 / 9,
},
});