react-native-tpstreams 1.1.3 → 1.1.4-dev.0

package/src/TPStreamsLiveChat.tsx

@@ -0,0 +1,189 @@
+import {
+  forwardRef,
+  useRef,
+  useImperativeHandle,
+  useState,
+  useCallback,
+  useMemo,
+} from 'react';
+import {
+  View,
+  ActivityIndicator,
+  StyleSheet,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import { WebView, type WebViewMessageEvent } from 'react-native-webview';
+
+import type {
+  TPStreamsLiveChatProps,
+  TPStreamsLiveChatRef,
+} from './types/TPStreamsLiveChatTypes';
+import { isChatMessage } from './types/TPStreamsLiveChatTypes';
+import { generateChatHTML } from './utils/liveChatHtmlGenerator';
+import { CHAT_SDK_CONSTANTS, ChatMessageType } from './utils/constants';
+
+const TPStreamsLiveChat = forwardRef<
+  TPStreamsLiveChatRef,
+  TPStreamsLiveChatProps
+>((props, ref) => {
+  const {
+    username,
+    roomId,
+    title,
+    colors,
+    typography,
+    customCSS,
+    style,
+    onChatReady,
+    onChatError,
+    onMessageReceived,
+  } = props;
+
+  const webViewRef = useRef<WebView>(null);
+  const [status, setStatus] = useState<'loading' | 'ready' | 'error'>(
+    'loading'
+  );
+
+  const htmlContent = useMemo(
+    () =>
+      generateChatHTML({
+        username,
+        roomId,
+        title,
+        colors,
+        typography,
+        customCSS,
+      }),
+    [username, roomId, title, colors, typography, customCSS]
+  );
+
+  const handleMessage = useCallback(
+    (event: WebViewMessageEvent) => {
+      try {
+        const { type, message } = JSON.parse(event.nativeEvent.data);
+
+        switch (type) {
+          case ChatMessageType.READY:
+            setStatus('ready');
+            onChatReady?.();
+            break;
+
+          case ChatMessageType.ERROR:
+            setStatus('error');
+            onChatError?.(message || 'SDK initialization failed');
+            break;
+
+          case ChatMessageType.MESSAGE:
+            if (isChatMessage(message)) {
+              onMessageReceived?.(message);
+            } else {
+              console.warn(
+                '[TPStreamsLiveChat] Received invalid message format:',
+                message
+              );
+            }
+            break;
+
+          case ChatMessageType.DEBUG:
+            console.debug('[TPStreamsLiveChat] WebView:', message);
+            break;
+        }
+      } catch (err) {
+        console.error('[TPStreamsLiveChat] Failed to parse message:', err);
+      }
+    },
+    [onChatReady, onChatError, onMessageReceived]
+  );
+
+  const handleWebViewError = useCallback(
+    (syntheticEvent: NativeSyntheticEvent<any>) => {
+      const { nativeEvent } = syntheticEvent;
+      setStatus('error');
+      onChatError?.(nativeEvent.description || 'WebView failed to load');
+    },
+    [onChatError]
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      reload: () => {
+        setStatus('loading');
+        webViewRef.current?.reload();
+      },
+      injectCSS: (css: string) => {
+        const script = `
+                    (function() {
+                        const style = document.createElement('style');
+                        style.textContent = ${JSON.stringify(css)};
+                        document.head.appendChild(style);
+                    })();
+                `;
+        webViewRef.current?.injectJavaScript(script);
+      },
+    }),
+    []
+  );
+
+  const renderLoading = () =>
+    status === 'loading' && (
+      <View
+        style={[
+          styles.overlay,
+          {
+            backgroundColor:
+              colors?.background || CHAT_SDK_CONSTANTS.DEFAULT_BACKGROUND_COLOR,
+          },
+        ]}
+      >
+        <ActivityIndicator
+          size="large"
+          color={colors?.primary || CHAT_SDK_CONSTANTS.DEFAULT_PRIMARY_COLOR}
+        />
+      </View>
+    );
+
+  return (
+    <View style={[styles.container, style]}>
+      <WebView
+        key={`${colors?.background}-${typography?.fontFamily}`}
+        ref={webViewRef}
+        source={{
+          html: htmlContent,
+          baseUrl: CHAT_SDK_CONSTANTS.BASE_URL,
+        }}
+        originWhitelist={[CHAT_SDK_CONSTANTS.BASE_URL]}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        onMessage={handleMessage}
+        onError={handleWebViewError}
+        style={styles.webview}
+        allowsInlineMediaPlayback={true}
+        mediaPlaybackRequiresUserAction={false}
+        scrollEnabled={false}
+      />
+      {renderLoading()}
+    </View>
+  );
+});
+
+TPStreamsLiveChat.displayName = 'TPStreamsLiveChat';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  webview: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10,
+  },
+});
+
+export default TPStreamsLiveChat;

package/src/index.tsx

@@ -33,3 +33,12 @@ export const TPStreams = {
     TPStreamsModule.initialize(organizationId);
   },
 };
+
+export { default as TPStreamsLiveChat } from './TPStreamsLiveChat';
+export type {
+  TPStreamsLiveChatProps,
+  TPStreamsLiveChatRef,
+  ChatColors,
+  ChatTypography,
+  ChatMessage,
+} from './types/TPStreamsLiveChatTypes';

package/src/types/TPStreamsLiveChatTypes.ts

@@ -0,0 +1,99 @@
+import type { ViewStyle } from 'react-native';
+
+/**
+ * Color configuration for the chat interface
+ */
+export interface ChatColors {
+  /** Primary brand color (buttons, links, accents) */
+  primary?: string;
+  /** Chat background color */
+  background?: string;
+  /** Default text color */
+  text?: string;
+  /** Input field background color */
+  inputBackground?: string;
+  /** Border and divider color */
+  border?: string;
+}
+
+/**
+ * Chat message structure
+ */
+export interface ChatMessage {
+  id: string;
+  username: string;
+  message: string;
+  timestamp: number;
+}
+
+/**
+ * Type guard for ChatMessage
+ */
+export function isChatMessage(data: any): data is ChatMessage {
+  return (
+    data &&
+    typeof data.id === 'string' &&
+    typeof data.username === 'string' &&
+    typeof data.message === 'string' &&
+    typeof data.timestamp === 'number'
+  );
+}
+
+/**
+ * Typography configuration for the chat interface
+ */
+export interface ChatTypography {
+  /** Base font size in pixels */
+  fontSize?: number;
+  /** Font family (e.g., 'Inter, sans-serif') */
+  fontFamily?: string;
+  /** Font weight (e.g., '400', 'bold', 600) */
+  fontWeight?: string | number;
+  /** Line height multiplier */
+  lineHeight?: number;
+}
+
+/**
+ * Props for TPStreamsLiveChat component
+ */
+export interface TPStreamsLiveChatProps {
+  // Required configuration
+  /** Username of the current user */
+  username: string;
+  /** Room ID for the chat (obtained from live stream details) */
+  roomId: string;
+  /** Title displayed in the chat header */
+  title: string;
+
+  // Optional styling configuration
+  /** Color scheme configuration */
+  colors?: ChatColors;
+  /** Typography configuration */
+  typography?: ChatTypography;
+
+  // Advanced customization
+  /** Custom CSS to inject (for advanced users) */
+  customCSS?: string;
+
+  // Standard React Native props
+  /** Container style */
+  style?: ViewStyle;
+
+  // Event callbacks
+  /** Called when chat is successfully loaded and ready */
+  onChatReady?: () => void;
+  /** Called when an error occurs */
+  onChatError?: (error: string) => void;
+  /** Called when a new message is received */
+  onMessageReceived?: (message: ChatMessage) => void;
+}
+
+/**
+ * Ref methods exposed by TPStreamsLiveChat component
+ */
+export interface TPStreamsLiveChatRef {
+  /** Reload the chat interface */
+  reload: () => void;
+  /** Inject custom CSS dynamically */
+  injectCSS?: (css: string) => void;
+}

package/src/utils/constants.ts

@@ -0,0 +1,28 @@
+/**
+ * URLs for the Live Chat SDK assets and base configuration
+ */
+export const CHAT_SDK_CONSTANTS = {
+  // The domain where the chat is hosted/associated
+  BASE_URL: 'https://media.testpress.in',
+
+  // CDN path for the CSS styles
+  STYLES_URL: 'https://media.testpress.in/static/live_chat/live_chat.css',
+
+  // CDN path for the UMD build of the SDK
+  SDK_SCRIPT_URL:
+    'https://media.testpress.in/static/live_chat/live_chat.umd.cjs',
+
+  // Default values
+  DEFAULT_PRIMARY_COLOR: '#007AFF',
+  DEFAULT_BACKGROUND_COLOR: '#FFFFFF',
+};
+
+/**
+ * Message types for communication between WebView and React Native
+ */
+export enum ChatMessageType {
+  READY = 'ready',
+  ERROR = 'error',
+  MESSAGE = 'message',
+  DEBUG = 'debug',
+}

package/src/utils/liveChatHtmlGenerator.ts

@@ -0,0 +1,142 @@
+import type {
+  TPStreamsLiveChatProps,
+  ChatColors,
+  ChatTypography,
+} from '../types/TPStreamsLiveChatTypes';
+import { CHAT_SDK_CONSTANTS, ChatMessageType } from './constants';
+
+/**
+ * Generates the complete HTML content for the chat WebView
+ */
+export function generateChatHTML(props: TPStreamsLiveChatProps): string {
+  const { username, roomId, title } = props;
+  const styles = generateStylesAndScripts(props);
+
+  return `
+    <!DOCTYPE html>
+    <html lang="en" style="height: 100%; margin: 0;">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+        <link rel="stylesheet" href="${CHAT_SDK_CONSTANTS.STYLES_URL}">
+        ${styles.css}
+      </head>
+      <body style="height: 100%; margin: 0; overflow: hidden;">
+        <div id="app" style="height: 100%;"></div>
+        <script src="${CHAT_SDK_CONSTANTS.SDK_SCRIPT_URL}"></script>
+        <script>
+          (function() {
+            const config = {
+              username: ${JSON.stringify(username)},
+              roomId: ${JSON.stringify(roomId)},
+              title: ${JSON.stringify(title)}
+            };
+            
+            function postToNative(type, message = null) {
+              if (window.ReactNativeWebView) {
+                window.ReactNativeWebView.postMessage(JSON.stringify({ type, message }));
+              }
+            }
+
+            try {
+              new TPStreamsChat.load(document.querySelector("#app"), config);
+              postToNative('${ChatMessageType.READY}');
+            } catch (error) {
+              postToNative('${ChatMessageType.ERROR}', error.message || 'Failed to initialize chat');
+            }
+          })();
+        </script>
+      </body>
+    </html>
+  `;
+}
+
+/**
+ * Combines all CSS generation logic
+ */
+function generateStylesAndScripts(props: TPStreamsLiveChatProps) {
+  const { colors, typography, customCSS } = props;
+  const rules: string[] = [];
+
+  if (typography) rules.push(getTypographyCSS(typography));
+  if (colors) rules.push(getColorCSS(colors));
+  if (customCSS) rules.push(customCSS);
+
+  return {
+    css: `<style>${rules.join('\n\n')}</style>`,
+  };
+}
+
+/**
+ * Generate color-related CSS using functional approach
+ */
+function getColorCSS(colors: ChatColors): string {
+  const rules: string[] = [];
+
+  if (colors.primary) {
+    rules.push(`
+      button, [class*="bg-blue-"], [class*="bg-indigo-"], [class*="primary"] {
+        background-color: ${colors.primary} !important;
+        color: white !important;
+      }
+      .text-blue-600, .text-indigo-600, [class*="text-blue-"]:not([class*="bg-"]), [class*="text-indigo-"]:not([class*="bg-"]) {
+        color: ${colors.primary} !important;
+      }
+      [class*="bg-blue-"] *, [class*="bg-indigo-"] *, [class*="primary"] * {
+        color: white !important;
+      }
+    `);
+  }
+
+  if (colors.background) {
+    rules.push(`
+      body, #app, .chat-container, [class*="bg-white"], [class*="bg-gray-50"], [class*="bg-slate-"] {
+        background-color: ${colors.background} !important;
+      }
+    `);
+  }
+
+  if (colors.text) {
+    rules.push(`
+      body, p, input, textarea,
+      div:not([class*="bg-blue-"]):not([class*="bg-indigo-"]):not([class*="primary"]),
+      span:not([class*="bg-blue-"]):not([class*="bg-indigo-"]):not([class*="primary"]) {
+        color: ${colors.text} !important;
+      }
+    `);
+  }
+
+  if (colors.inputBackground) {
+    rules.push(`
+      textarea, input[type="text"], [class*="bg-gray-"], [class*="bg-slate-"] {
+        background-color: ${colors.inputBackground} !important;
+      }
+    `);
+  }
+
+  if (colors.border) {
+    rules.push(`
+      [class*="border"], [class*="divide-"] > * {
+        border-color: ${colors.border} !important;
+      }
+    `);
+  }
+
+  return rules.join('\n');
+}
+
+function getTypographyCSS(typography: ChatTypography): string {
+  const styles: string[] = [];
+  if (typography.fontSize)
+    styles.push(`font-size: ${typography.fontSize}px !important;`);
+  if (typography.fontFamily)
+    styles.push(`font-family: ${typography.fontFamily} !important;`);
+  if (typography.fontWeight)
+    styles.push(`font-weight: ${typography.fontWeight} !important;`);
+  if (typography.lineHeight)
+    styles.push(`line-height: ${typography.lineHeight} !important;`);
+
+  return styles.length > 0
+    ? `body, button, input, textarea, div, span, p { ${styles.join(' ')} }`
+    : '';
+}