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

package/lib/typescript/src/types/TPStreamsLiveChatTypes.d.ts

@@ -0,0 +1,77 @@
+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 declare function isChatMessage(data: any): data is ChatMessage;
+/**
+ * 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 {
+    /** 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;
+    /** Color scheme configuration */
+    colors?: ChatColors;
+    /** Typography configuration */
+    typography?: ChatTypography;
+    /** Custom CSS to inject (for advanced users) */
+    customCSS?: string;
+    /** Container style */
+    style?: ViewStyle;
+    /** 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;
+}
+//# sourceMappingURL=TPStreamsLiveChatTypes.d.ts.map

package/lib/typescript/src/types/TPStreamsLiveChatTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TPStreamsLiveChatTypes.d.ts","sourceRoot":"","sources":["../../../../src/types/TPStreamsLiveChatTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,IAAI,WAAW,CAQ5D;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IAErC,mCAAmC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IAGd,iCAAiC;IACjC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,cAAc,CAAC;IAG5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAGlB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,kCAAkC;IAClC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACpD;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC"}

package/lib/typescript/src/utils/constants.d.ts

@@ -0,0 +1,20 @@
+/**
+ * URLs for the Live Chat SDK assets and base configuration
+ */
+export declare const CHAT_SDK_CONSTANTS: {
+    BASE_URL: string;
+    STYLES_URL: string;
+    SDK_SCRIPT_URL: string;
+    DEFAULT_PRIMARY_COLOR: string;
+    DEFAULT_BACKGROUND_COLOR: string;
+};
+/**
+ * Message types for communication between WebView and React Native
+ */
+export declare enum ChatMessageType {
+    READY = "ready",
+    ERROR = "error",
+    MESSAGE = "message",
+    DEBUG = "debug"
+}
+//# sourceMappingURL=constants.d.ts.map

package/lib/typescript/src/utils/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/utils/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;;CAc9B,CAAC;AAEF;;GAEG;AACH,oBAAY,eAAe;IACzB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB"}

package/lib/typescript/src/utils/liveChatHtmlGenerator.d.ts

@@ -0,0 +1,6 @@
+import type { TPStreamsLiveChatProps } from '../types/TPStreamsLiveChatTypes';
+/**
+ * Generates the complete HTML content for the chat WebView
+ */
+export declare function generateChatHTML(props: TPStreamsLiveChatProps): string;
+//# sourceMappingURL=liveChatHtmlGenerator.d.ts.map

package/lib/typescript/src/utils/liveChatHtmlGenerator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"liveChatHtmlGenerator.d.ts","sourceRoot":"","sources":["../../../../src/utils/liveChatHtmlGenerator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EAGvB,MAAM,iCAAiC,CAAC;AAGzC;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,sBAAsB,GAAG,MAAM,CAyCtE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-tpstreams",
-  "version": "1.1.3",
+  "version": "1.1.4-dev.1",
   "description": "Video component for TPStreams",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -85,6 +85,9 @@
     "turbo": "^1.10.7",
     "typescript": "5.4.5"
   },
+  "dependencies": {
+    "react-native-webview": "^13.16.0"
+  },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"

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/TPStreamsPlayer.tsx

@@ -40,6 +40,7 @@ export interface TPStreamsPlayerProps extends ViewProps {
   enableDownload?: boolean;
   offlineLicenseExpireTime?: number;
   showDefaultCaptions?: boolean;
+  startInFullscreen?: boolean;
   downloadMetadata?: { [key: string]: any };
   onPlayerStateChanged?: (state: number) => void;
   onIsPlayingChanged?: (isPlaying: boolean) => void;
@@ -72,6 +73,7 @@ const TPStreamsPlayerView = forwardRef<
     enableDownload,
     offlineLicenseExpireTime,
     showDefaultCaptions,
+    startInFullscreen,
     downloadMetadata,
     style,
     onPlayerStateChanged,
@@ -243,6 +245,7 @@ const TPStreamsPlayerView = forwardRef<
     startAt,
     enableDownload,
     showDefaultCaptions,
+    startInFullscreen,
     downloadMetadata: downloadMetadata
       ? JSON.stringify(downloadMetadata)
       : undefined,

package/src/TPStreamsPlayerViewNativeComponent.ts

@@ -23,6 +23,7 @@ export interface NativeProps extends ViewProps {
   enableDownload?: boolean;
   offlineLicenseExpireTime?: Double;
   showDefaultCaptions?: boolean;
+  startInFullscreen?: boolean;
   downloadMetadata?: string;
 
   // Event props for receiving data from native methods

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(' ')} }`
+    : '';
+}