@interactify-live/player-react

@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