Annotations Configuration

Annotations are essential for videos as they provide additional information, context, and interactivity to enhance the viewer's understanding and engagement. Annotations can be in the form of text, graphics, or interactive elements overlaid on the video, allowing content creators to convey key messages, highlight important details, or provide links to related resources. Annotations can also serve as a call-to-action, encouraging viewers to subscribe, like, or share the video, or guiding them towards other videos or content within a series. By using annotations strategically, video creators can enrich the viewing experience, increase viewer retention, and encourage desired actions, making annotations a valuable tool for enhancing the effectiveness and impact of video content.

To add annotations to your configuration, you need to use the following configuration:

Attribute	Type	Required	Description
start	number	yes	Start time in seconds
end	number	yes	End time in seconds
type	string	yes	Type of the annotation
label	string	no	Label of the annotation

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 = {
      ...
      content: {
          ...
          annotations: [
              ...
              {
                  start: 0,
                  end: 10,
                  type: "intro"
              }
              ...
          ],
          ...
      }
      ...
    };
    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,
    },
});