@interactify-live/player-react

A React component for playing interactive media with MQTT connectivity.

Features

• Video and image playback
• Interactive elements overlay
• MQTT real-time messaging
• Connection status management
• Message subscription capabilities

Installation

npm install @interactify-live/player-react

Basic Usage

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

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

  const handleStatusChange = (status: string) => {
    console.log("Connection status:", status);
  };

  const handleMessagesReceived = (messages: any[]) => {
    console.log("New messages received:", messages);
    // Handle new messages here
  };

  return (
    <InteractifyPlayer
      ref={playerRef}
      media={{
        id: "video1",
        type: "video",
        url: "https://example.com/video.mp4",
      }}
      interactions={[]}
      options={{
        user_id: "user123",
        token: "your-token",
        scope: "short",
        space_slug: "space1",
        slug: "video1",
        session: "session123",
      }}
      onStatusChange={handleStatusChange}
      onMessagesReceived={handleMessagesReceived}
    />
  );
}

Advanced Usage - Manual Message Subscription

You can also subscribe to messages manually using the player ref:

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

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

  useEffect(() => {
    if (playerRef.current) {
      // Subscribe to new messages
      const unsubscribe = playerRef.current.subscribeToNewMessages(
        (message) => {
          console.log("New message received:", message.text);
          console.log("From:", message.display_name);
          console.log("Timestamp:", message.created_at);
        }
      );

      // Cleanup subscription on unmount
      return unsubscribe;
    }
  }, []);

  return (
    <InteractifyPlayer
      ref={playerRef}
      media={{
        id: "video1",
        type: "video",
        url: "https://example.com/video.mp4",
      }}
      interactions={[]}
      options={{
        user_id: "user123",
        token: "your-token",
        scope: "short",
        space_slug: "space1",
        slug: "video1",
        session: "session123",
      }}
      onNewMessageReceived={(message) => {
        console.log("New message received:", message.text);
      }}
    />
  );
}

Sending Messages

You can send messages using the player ref:

const handleSendMessage = () => {
  if (playerRef.current) {
    playerRef.current.sendMessage({
      text: "Hello, world!",
      displayName: "User Name",
      avatar: "https://example.com/avatar.jpg",
      visible: true,
    });
  }
};

Publishing Events

You can publish events (like "like" actions):

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

Props

InteractifyPlayerProps

| Prop | Type | Required | Description | | ---------------------- | -------------------------- | -------- | ------------------------------------------- | | media | MediaObject | Yes | Media configuration | | interactions | any[] | Yes | Array of interactive elements | | options | ConnectionOptions | No | MQTT connection options | | onStatusChange | (status: string) => void | No | Connection status callback | | onNewMessageReceived | (message: any) => void | No | New message received callback | | autoPlay | boolean | No | Auto-play media (default: false) | | muted | boolean | No | Mute media (default: false) | | loop | boolean | No | Loop media (default: false) | | isDraggable | boolean | No | Enable interaction dragging (default: true) |

MediaObject

interface MediaObject {
  id: string;
  type: "video" | "image";
  url: string;
  thumbnail?: string;
  alt?: string;
}

ConnectionOptions

interface ConnectionOptions {
  user_id: string;
  token: string;
  scope: "short" | "live";
  space_slug: string;
  slug: string;
  session: string;
  display_name: string;
  brokerUrl?: string;
}

Methods

InteractifyPlayerHandle

| Method | Parameters | Returns | Description | | ---------------------------------- | ------------------------ | ------------ | ------------------------- | | play() | - | void | Play the media | | pause() | - | void | Pause the media | | mute() | - | void | Mute the media | | unmute() | - | void | Unmute the media | | getCurrentTime() | - | number | Get current playback time | | setCurrentTime(time) | number | void | Set playback time | | isMuted() | - | boolean | Check if muted | | isPlaying() | - | boolean | Check if playing | | sendMessage(message) | MessageObject | void | Send a chat message | | publishEvent(type) | string | void | Publish an event | | subscribeToNewMessages(callback) | (message: any) => void | () => void | Subscribe to new messages |

MessageObject

interface MessageObject {
  text: string;
  avatar?: string;
  displayName?: string;
  visible?: boolean;
  replyTo?: {
    text: string;
    userID: string;
    displayName: string;
  };
}

Message Structure

Messages received from the MQTT connection have the following structure:

interface ShortMessage {
  avatar: string;
  text: string;
  created_at: string;
  user_id: string;
  display_name: string;
  live_slug: string;
  space_slug: string;
  visible: boolean;
  slug: string;
  reply_to?: {
    text: string;
    user_id: string;
    display_name: string;
  };
}

Connection Status

The connection can have the following statuses:

• "CONNECTING" - Attempting to connect
• "CONNECTED" - Successfully connected
• "RECONNECTING" - Attempting to reconnect
• "OFFLINE" - Disconnected
• "ERROR" - Connection error

License

ISC