@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:

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

Then install this library:

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

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

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

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

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