@interactify-live/player-react-native/README.md

React Native library for Interactify player with media display, widgets, and MQTT integration

# @interactify-live/player-react-native

React Native library for Interactify player with media display, interactive widgets, and real-time MQTT integration.

## Installation

This library requires `react-native-video` as a peer dependency. Install it first:

```bash
npm install react-native-video
# or
yarn add react-native-video
```

Then install this library:

```bash
npm install @interactify-live/player-react-native
# or
yarn add @interactify-live/player-react-native
```

## Peer Dependencies

- `react`: >=16.8.0
- `react-native`: >=0.60.0
- `react-native-video`: >=5.0.0

## Quick Start

```tsx
import React from "react";
import { InteractifyPlayer } from "@interactify-live/player-react-native";

const App = () => {
  const media = {
    id: "test-stream",
    type: "video",
    url: "https://example.com/video.mp4",
  };

  const interactions = [
    {
      interaction: "text",
      geometric: {
        x: 20,
        y: 20,
        width: 200,
        height: 50,
      },
      payload: {
        text: "Amazing Video!",
        size: 18,
        color: "#ffffff",
        background: "rgba(0,0,0,0.8)",
        borderRadius: 8,
      },
    },
  ];

  const options = {
    user_id: "USER_ID",
    token: "TOKEN",
    scope: "short",
    space_slug: "SPACE_SLUG",
    slug: "SLUG",
    session: "SESSION",
  };

  return (
    <InteractifyPlayer
      media={media}
      interactions={interactions}
      autoPlay={true}
      muted={true}
      loop={true}
      isDraggable={true}
      options={options}
      onPlay={() => console.log("Started playing")}
      onPause={() => console.log("Paused")}
      onError={(error) => console.error("Error:", error)}
      onStatusChange={(status) => console.log("Connection:", status)}
      onNewMessageReceived={(message) => console.log("Message:", message)}
    />
  );
};
```

## API Reference

### InteractifyPlayer Props

```tsx
interface InteractifyPlayerProps {
  // Media configuration
  media: {
    id: string;
    type: "video" | "image";
    url: string;
    thumbnail?: string;
    alt?: string;
  };

  // Interactive widgets configuration
  interactions: any[];

  // Media playback options
  autoPlay?: boolean;
  muted?: boolean;
  loop?: boolean;
  isDraggable?: boolean;

  // Event handlers
  onPlay?: () => void;
  onPause?: () => void;
  onEnded?: () => void;
  onTimeUpdate?: (time: number) => void;
  onError?: (error: Error) => void;
  onInteractionClick?: (interaction: any) => void;
  onInteractionDragEnd?: (
    index: number,
    geometric: { x: number; y: number; width: number; height: number }
  ) => void;
  onVideoReady?: (videoRef: any) => void;

  // UI customization
  loadingIndicator?: ReactNode;
  errorIndicator?: ReactNode;
  className?: string;
  style?: any;

  // MQTT connection options
  options?: {
    user_id: string;
    token: string;
    scope: "short" | "live";
    space_slug: string;
    slug: string;
    session: string;
    brokerUrl?: string;
  };

  // MQTT event handlers
  onStatusChange?: (status: string) => void;
  onNewMessageReceived?: (message: any) => void;
}
```

### InteractifyPlayerHandle Methods

```tsx
interface InteractifyPlayerHandle {
  // Media control
  play: () => void;
  pause: () => void;
  mute: () => void;
  unmute: () => void;
  getCurrentTime: () => number;
  setCurrentTime: (time: number) => void;
  isMuted: () => boolean;
  isPlaying: () => boolean;

  // Widget management
  setInteractions: (interactions: any[]) => void;

  // Video element access
  getVideoElement: () => any;
  loadStream: (stream: any) => void;

  // MQTT actions
  publishEvent: (type: string) => void;
  sendMessage: (message: {
    text: string;
    avatar?: string;
    displayName?: string;
    visible?: boolean;
    replyTo?: {
      text: string;
      userID: string;
      displayName: string;
    };
  }) => void;
  subscribeToNewMessages: (callback: (message: any) => void) => () => void;
}
```

### Using with Ref

```tsx
import React, { useRef } from "react";
import {
  InteractifyPlayer,
  InteractifyPlayerHandle,
} from "@interactify-live/player-react-native";

const App = () => {
  const playerRef = useRef<InteractifyPlayerHandle>(null);

  const handleLike = () => {
    playerRef.current?.publishEvent("like");
  };

  const handleSendMessage = () => {
    playerRef.current?.sendMessage({
      text: "Hello from React Native!",
      displayName: "User",
      avatar: "https://example.com/avatar.jpg",
    });
  };

  return (
    <InteractifyPlayer
      ref={playerRef}
      media={media}
      interactions={interactions}
      options={options}
      // ... other props
    />
  );
};
```

## Features

- **🎥 Media Display**: Video and image playback with HLS support
- **🎨 Interactive Widgets**: Text overlays and interactive elements with drag, resize, and rotation
- **🔌 MQTT Integration**: Real-time messaging and analytics
- **📱 React Native Optimized**: Built specifically for mobile apps
- **🎮 Event Handling**: Comprehensive event system for media and interactions
- **🎯 TypeScript Support**: Full type safety and IntelliSense

## License

MIT