import React from 'react';
import { View } from 'react-native';
import { VideoPlayer, getSession } from '@video/react-native-sdk';

export default function App() {
  const mySession = getSession({
    backendEndpoint: '<your backend endpoint>',
    displayName: 'React-Native Demo',
    streamName: 'react-native-demo'
  });

  return (
    <View style={{ flex: 1 }}>
      <VideoPlayer
        manifestUrl="<manifest URL>"
        session={mySession}
        style={{ backgroundColor: '#000' }}
      />
    </View>
  );
}

import React from 'react';
import { View } from 'react-native';
import { Encoder, getSession } from '@video/react-native-sdk';

export default function BroadcastApp() {
  const mySession = getSession({
    backendEndpoint: '<your backend endpoint>',
    displayName: 'React-Native Demo',
    streamName: 'react-native-demo'
  });

  return (
    <View style={{ flex: 1 }}>
      <Encoder session={mySession} />
    </View>
  );
}

import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import { VideoPlayer, VideoPlayerMethods, getSession } from '@video/react-native-sdk';

export default function HLSPlayerApp() {
  // You can also use <any> or extend VideoPlayerMethods for custom ref typing
  const videoRef = useRef<VideoPlayerMethods>(null);
  const mySession = getSession({
    backendEndpoint: '<your backend endpoint>',
    displayName: 'React-Native Demo',
    streamName: 'react-native-demo'
  });

  const handleRewind = () => {
    videoRef.current?.rewind(10); // Rewind 10 seconds
  };

  const handleSeekTo = () => {
    videoRef.current?.seekTo(30); // Seek to 30 seconds
  };

  const handleGoLive = () => {
    videoRef.current?.goLive(); // Jump to live edge
  };

  return (
    <View style={{ flex: 1 }}>
      <VideoPlayer
        ref={videoRef}
        manifestUrl="<manifest URL>"
        session={mySession}
        autoplay={true}
        style={{ width: '100%', height: 200 }}
        onLoad={() => console.log('Video loaded')}
        onError={(error) => console.error('Video error:', error)}
      />
      <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 10 }}>
        <Button title="Rewind 10s" onPress={handleRewind} />
        <Button title="Seek to 30s" onPress={handleSeekTo} />
        <Button title="Go Live" onPress={handleGoLive} />
      </View>
    </View>
  );
}

import React from 'react';
import { ManifestPlayer, ManifestPlayerVideo, getSession } from '@video/react-native-sdk';

export default function PlayerApp() {
  const mySession = getSession({
    backendEndpoint: '<your backend endpoint>',
    displayName: 'React-Native Demo',
    streamName: 'react-native-demo'
  });

  return (
    <ManifestPlayer
      manifestUrl="<manifest URL>"
      session={mySession}
      autoplay
      muted={false}
    >
      {({ manifestPlayer }) => (
        <ManifestPlayerVideo manifestPlayer={manifestPlayer} />
      )}
    </ManifestPlayer>
  );
}

import React from 'react';
import { View, Text } from 'react-native';
import { ManifestPlayer, ManifestPlayerVideoCustomControls, getSession } from '@video/react-native-sdk';

export default function CustomPlayerApp() {
  const mySession = getSession({
    backendEndpoint: '<your backend endpoint>',
    displayName: 'React-Native Demo',
    streamName: 'react-native-demo'
  });

  return (
    <ManifestPlayer
      manifestUrl="<manifest URL>"
      session={mySession}
      autoplay
    >
      {({ manifestPlayer }) => (
        <ManifestPlayerVideoCustomControls
          style={{ backgroundColor: '#000000' }}
          manifestPlayer={manifestPlayer}
          onLoad={() => console.log('loaded')}
        >
          {/* Custom UI overlay */}
          <View style={{ position: 'absolute', top: 10, right: 10, backgroundColor: '#F01B1B' }}>
            <Text style={{ color: 'white' }}>Custom Overlay</Text>
          </View>
        </ManifestPlayerVideoCustomControls>
      )}
    </ManifestPlayer>
  );
}

import React from 'react';
import { View } from 'react-native';
import { Encoder, getSession } from '@video/react-native-sdk';

export default function BroadcastApp() {
  const mySession = getSession({
    backendEndpoint: '<your backend endpoint>',
    displayName: 'React-Native Demo',
    streamName: 'react-native-demo'
  });

  return (
    <View style={{ flex: 1 }}>
      <Encoder session={mySession} />
    </View>
  );
}