@dialtribe/react-sdk 0.1.0-alpha.11 → 0.1.0-alpha.14

package/README.md

@@ -97,13 +97,13 @@ Current bundle sizes (alpha.5, December 2025 - A+ Quality):
 | Import Method | Minified | Gzipped | Notes |
 |--------------|----------|---------|-------|
 | `@dialtribe/react-sdk/hello-world` | 756 B | ~448 B | Simple test component |
-| `@dialtribe/react-sdk/broadcast-player` | 91.16 KB | ~17 KB | Full A+ player + accessibility |
+| `@dialtribe/react-sdk/dialtribe-player` | 91.16 KB | ~17 KB | Full A+ player + accessibility |
 | `@dialtribe/react-sdk` (barrel) | 91.70 KB | ~17.5 KB | All components |
 | `@dialtribe/react-sdk/styles.css` | 17 KB | 3.8 KB | Required styles (if no Tailwind) |
 
 **Total for BroadcastPlayer:** ~20.8 KB gzipped (17 KB JS + 3.8 KB CSS) ✅
 
-**What's included in broadcast-player:**
+**What's included in dialtribe-player:**
 - BroadcastPlayer (inline player)
 - BroadcastPlayerModal (modal wrapper)
 - DialTribeProvider (context)
@@ -114,7 +114,7 @@ Current bundle sizes (alpha.5, December 2025 - A+ Quality):
 - **Production safety** (debug logging, secure endpoints)
 - All utilities (formatTime, buildBroadcastCdnUrl, etc.)
 
-**Why subpath imports matter:** The barrel import (`@dialtribe/react-sdk`) includes all components. Using subpath imports like `/broadcast-player` ensures you only bundle what you need.
+**Why subpath imports matter:** The barrel import (`@dialtribe/react-sdk`) includes all components. Using subpath imports like `/dialtribe-player` ensures you only bundle what you need.
 
 ## Components
 
@@ -175,7 +175,7 @@ app.post('/api/dialtribe/session', async (req, res) => {
 #### Step 2: Wrap Your App with DialTribeProvider
 
 ```tsx
-import { DialTribeProvider } from '@dialtribe/react-sdk/broadcast-player';
+import { DialTribeProvider } from '@dialtribe/react-sdk/dialtribe-player';
 import '@dialtribe/react-sdk/styles.css';
 import { useState, useEffect } from 'react';
 
@@ -213,7 +213,7 @@ function Root() {
 #### Step 3: Fetch Broadcasts from DialTribe API
 
 ```tsx
-import { useDialTribe } from '@dialtribe/react-sdk/broadcast-player';
+import { useDialTribe } from '@dialtribe/react-sdk/dialtribe-player';
 import { useState, useEffect } from 'react';
 
 function App() {
@@ -246,7 +246,7 @@ function App() {
 **Option A: Built-in Modal (Recommended for Quick Setup)**
 
 ```tsx
-import { BroadcastPlayerModal } from '@dialtribe/react-sdk/broadcast-player';
+import { BroadcastPlayerModal } from '@dialtribe/react-sdk/dialtribe-player';
 import { useState } from 'react';
 
 function BroadcastCard({ broadcast }) {
@@ -273,7 +273,7 @@ function BroadcastCard({ broadcast }) {
 **Option B: Inline Player (Custom Layout)**
 
 ```tsx
-import { BroadcastPlayer } from '@dialtribe/react-sdk/broadcast-player';
+import { BroadcastPlayer } from '@dialtribe/react-sdk/dialtribe-player';
 
 function CustomVideoPage({ broadcast }) {
   return (
@@ -395,7 +395,7 @@ The player supports keyboard shortcuts when `enableKeyboardShortcuts={true}` is
 
 #### Utilities
 
-The broadcast-player module also exports useful utilities:
+The dialtribe-player module also exports useful utilities:
 
 ```tsx
 import {
@@ -417,7 +417,7 @@ import {
   type Broadcast,
   type DialTribeContextValue,
   type ApiClientConfig,
-} from '@dialtribe/react-sdk/broadcast-player';
+} from '@dialtribe/react-sdk/dialtribe-player';
 
 // Format seconds to HH:MM:SS or MM:SS
 const timeString = formatTime(3665); // "1:01:05"
@@ -454,7 +454,7 @@ const broadcast = await client.getBroadcast(123);
 
 **Before (alpha.4):**
 ```tsx
-import { BroadcastPlayerModal } from '@dialtribe/react-sdk/broadcast-player';
+import { BroadcastPlayerModal } from '@dialtribe/react-sdk/dialtribe-player';
 
 <BroadcastPlayerModal
   broadcast={broadcast}
@@ -472,7 +472,7 @@ import { BroadcastPlayerModal } from '@dialtribe/react-sdk/broadcast-player';
 import {
   DialTribeProvider,
   BroadcastPlayerModal,
-} from '@dialtribe/react-sdk/broadcast-player';
+} from '@dialtribe/react-sdk/dialtribe-player';
 
 // 1. Wrap app with provider (once, at root)
 <DialTribeProvider

package/dist/{broadcast-player-DnnXgWin.d.mts → dialtribe-player-CNriUtNi.d.mts}

@@ -2,10 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { Component, ReactNode, ErrorInfo } from 'react';
 
 /**
- * DialTribe SDK Context
+ * Dialtribe SDK Context
  * Manages session token and auto-refresh across all SDK components
  */
-interface DialTribeContextValue {
+interface DialtribeContextValue {
     /** Current session token */
     sessionToken: string | null;
     /** Update the session token (called automatically on refresh) */
@@ -17,7 +17,7 @@ interface DialTribeContextValue {
     /** Optional API base URL override */
     apiBaseUrl?: string;
 }
-interface DialTribeProviderProps {
+interface DialtribeProviderProps {
     /** Session token from your backend (required) */
     sessionToken: string;
     /** Called when the API returns a refreshed token via X-Session-Token header */
@@ -34,70 +34,70 @@ interface DialTribeProviderProps {
     children: React$1.ReactNode;
 }
 /**
- * DialTribe Provider
+ * Dialtribe Provider
  *
  * Wraps your app to provide session token authentication to all SDK components.
  *
  * @example
  * ```tsx
  * // Production (default)
- * <DialTribeProvider
+ * <DialtribeProvider
  *   sessionToken="sess_xxx..."
  *   onTokenRefresh={(newToken) => setToken(newToken)}
  *   onTokenExpired={() => router.push('/login')}
  * >
  *   <App />
- * </DialTribeProvider>
+ * </DialtribeProvider>
  *
  * // Local development (explicit)
- * <DialTribeProvider
+ * <DialtribeProvider
  *   sessionToken="sess_xxx..."
  *   apiBaseUrl="http://localhost:3001/api/public/v1"
  *   onTokenRefresh={(newToken) => setToken(newToken)}
  * >
  *   <App />
- * </DialTribeProvider>
+ * </DialtribeProvider>
  *
  * // Local development (via env var - recommended)
  * // Set NEXT_PUBLIC_DIALTRIBE_API_URL=http://localhost:3001/api/public/v1 in .env
- * <DialTribeProvider sessionToken="sess_xxx...">
+ * <DialtribeProvider sessionToken="sess_xxx...">
  *   <App />
- * </DialTribeProvider>
+ * </DialtribeProvider>
  * ```
  */
-declare function DialTribeProvider({ sessionToken: initialToken, onTokenRefresh, onTokenExpired, apiBaseUrl, children, }: DialTribeProviderProps): react_jsx_runtime.JSX.Element;
+declare function DialtribeProvider({ sessionToken: initialToken, onTokenRefresh, onTokenExpired, apiBaseUrl, children, }: DialtribeProviderProps): react_jsx_runtime.JSX.Element;
 /**
- * Hook to access DialTribe context
+ * Hook to access Dialtribe context
  *
- * @throws Error if used outside DialTribeProvider
+ * @throws Error if used outside DialtribeProvider
  *
  * @example
  * ```tsx
- * const { sessionToken, setSessionToken } = useDialTribe();
+ * const { sessionToken, setSessionToken } = useDialtribe();
  * ```
  */
-declare function useDialTribe(): DialTribeContextValue;
+declare function useDialtribe(): DialtribeContextValue;
 /**
- * Hook to optionally access DialTribe context
- * Returns null if not within a DialTribeProvider (doesn't throw)
+ * Hook to optionally access Dialtribe context
+ * Returns null if not within a DialtribeProvider (doesn't throw)
  *
  * @example
  * ```tsx
- * const context = useDialTribeOptional();
+ * const context = useDialtribeOptional();
  * const sessionToken = context?.sessionToken ?? propSessionToken;
  * ```
  */
-declare function useDialTribeOptional(): DialTribeContextValue | null;
+declare function useDialtribeOptional(): DialtribeContextValue | null;
 
 /**
- * DialTribe API Client
+ * Dialtribe API Client
  *
- * Handles all API communication with DialTribe endpoints.
+ * Handles all API communication with Dialtribe endpoints.
  * Automatically manages session token refresh via X-Session-Token headers.
  *
  * Supports configurable API base URL for development:
  * 1. Via environment variable: NEXT_PUBLIC_DIALTRIBE_API_URL
- * 2. Via apiBaseUrl prop on DialTribeProvider (takes precedence)
+ * 2. Via apiBaseUrl prop on DialtribeProvider (takes precedence)
  *
  * Defaults to production URL if neither is specified.
  */
@@ -128,17 +128,17 @@ interface ApiClientConfig {
     apiBaseUrl?: string;
 }
 /**
- * DialTribe API Client
+ * Dialtribe API Client
  *
- * Low-level client for making authenticated requests to DialTribe API.
+ * Low-level client for making authenticated requests to Dialtribe API.
  * Handles session token auto-refresh automatically.
  */
-declare class DialTribeClient {
+declare class DialtribeClient {
     private config;
     private endpoints;
     constructor(config: ApiClientConfig);
     /**
-     * Make an authenticated request to DialTribe API
+     * Make an authenticated request to Dialtribe API
      *
      * Automatically:
      * - Adds Authorization header with session token
@@ -304,8 +304,8 @@ interface TranscriptData {
     words?: TranscriptWord[];
 }
 
-interface BroadcastPlayerProps {
-    /** Broadcast data from DialTribe API */
+interface DialtribePlayerProps {
+    /** Broadcast data from Dialtribe API */
     broadcast: Broadcast;
     /** Optional: App ID for tracking */
     appId?: string;
@@ -335,72 +335,28 @@ interface BroadcastPlayerProps {
     enableKeyboardShortcuts?: boolean;
 }
 /**
- * BroadcastPlayer - Core media player component (no modal wrapper)
+ * DialtribePlayer - Media player component for Dialtribe broadcasts
  *
  * Plays video/audio broadcasts with transcript, waveform visualization, and clip creation.
- * Uses DialTribeClient for authenticated API calls.
+ * For modal or fullscreen display, wrap with the Overlay component.
  *
  * @example
  * ```tsx
- * <BroadcastPlayer
- *   broadcast={broadcast}
- *   appId="app_123"
- *   contentId={456}
- * />
- * ```
- */
-declare function BroadcastPlayer({ broadcast, appId, contentId, foreignId, foreignTier, renderClipCreator, onError, className, enableKeyboardShortcuts, }: BroadcastPlayerProps): react_jsx_runtime.JSX.Element;
-
-interface BroadcastPlayerModalProps {
-    /** Broadcast data from DialTribe API */
-    broadcast: Broadcast;
-    /** Whether modal is open */
-    isOpen: boolean;
-    /** Called when modal should close */
-    onClose: () => void;
-    /** Optional: App ID for tracking */
-    appId?: string;
-    /** Optional: Content ID for tracking */
-    contentId?: number;
-    /** Foreign user ID from partner system (any tier) */
-    foreignId?: string;
-    /** Tier name from partner system (e.g., 'guest', 'member', 'subscriber_gold') */
-    foreignTier?: string;
-    /**
-     * Optional render prop for clip creator
-     * If provided, the "Create Clip" button will be shown and this will be called when clicked
-     */
-    renderClipCreator?: (props: {
-        isOpen: boolean;
-        onClose: () => void;
-        sourceVideoUrl?: string;
-        sourceAudioUrl?: string;
-        sourceDuration: number;
-        onPauseParent: () => void;
-    }) => React.ReactNode;
-    /** Optional: Custom CSS classes for the player */
-    className?: string;
-    /** Optional: Enable keyboard shortcuts (Space, arrows, M, F, etc.). Default: false */
-    enableKeyboardShortcuts?: boolean;
-}
-/**
- * BroadcastPlayerModal - Modal wrapper for BroadcastPlayer
+ * // Inline (embedded in page)
+ * <DialtribePlayer broadcast={broadcast} />
  *
- * Provides a modal overlay with ESC key handling and backdrop click to close.
- * Uses the new BroadcastPlayer component for all player functionality.
+ * // Modal (wrap with Overlay)
+ * <DialtribeOverlay mode="modal" isOpen={show} onClose={() => setShow(false)}>
+ *   <DialtribePlayer broadcast={broadcast} />
+ * </DialtribeOverlay>
  *
- * @example
- * ```tsx
- * <BroadcastPlayerModal
- *   broadcast={broadcast}
- *   isOpen={showModal}
- *   onClose={() => setShowModal(false)}
- *   appId="app_123"
- *   contentId={456}
- * />
+ * // Fullscreen (wrap with Overlay)
+ * <DialtribeOverlay mode="fullscreen" isOpen={show} onClose={() => setShow(false)}>
+ *   <DialtribePlayer broadcast={broadcast} />
+ * </DialtribeOverlay>
  * ```
  */
-declare function BroadcastPlayerModal({ broadcast, isOpen, onClose, appId, contentId, foreignId, foreignTier, renderClipCreator, className, enableKeyboardShortcuts, }: BroadcastPlayerModalProps): react_jsx_runtime.JSX.Element | null;
+declare function DialtribePlayer({ broadcast, appId, contentId, foreignId, foreignTier, renderClipCreator, onError, className, enableKeyboardShortcuts, }: DialtribePlayerProps): react_jsx_runtime.JSX.Element;
 
 interface Props {
     children: ReactNode;
@@ -434,7 +390,7 @@ interface State {
  * - Logs errors for debugging
  * - Allows graceful recovery
  */
-declare class BroadcastPlayerErrorBoundary extends Component<Props, State> {
+declare class DialtribePlayerErrorBoundary extends Component<Props, State> {
     constructor(props: Props);
     static getDerivedStateFromError(error: Error): Partial<State>;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
@@ -488,6 +444,50 @@ interface LoadingSpinnerProps {
  */
 declare function LoadingSpinner({ text, size, variant, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
 
+/** Display mode for the overlay */
+type DialtribeOverlayMode = "modal" | "fullscreen";
+interface DialtribeOverlayProps {
+    /** Whether the overlay is open */
+    isOpen: boolean;
+    /** Called when the overlay should close */
+    onClose: () => void;
+    /** Display mode: "modal" (centered with backdrop) or "fullscreen" (fills viewport) */
+    mode?: DialtribeOverlayMode;
+    /** Content to display inside the overlay */
+    children: React.ReactNode;
+    /** Optional: aria-label for accessibility */
+    ariaLabel?: string;
+    /** Optional: Show close button. Default: true */
+    showCloseButton?: boolean;
+    /** Optional: Close on backdrop click. Default: true */
+    closeOnBackdropClick?: boolean;
+    /** Optional: Close on ESC key. Default: true */
+    closeOnEsc?: boolean;
+}
+/**
+ * DialtribeOverlay - Reusable modal/fullscreen overlay component
+ *
+ * Provides a consistent overlay experience with:
+ * - Focus management (traps focus, restores on close)
+ * - ESC key to close
+ * - Backdrop click to close
+ * - Accessible with proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * // Modal mode (centered with backdrop blur)
+ * <DialtribeOverlay isOpen={show} onClose={() => setShow(false)} mode="modal">
+ *   <MyContent />
+ * </DialtribeOverlay>
+ *
+ * // Fullscreen mode (fills entire viewport)
+ * <DialtribeOverlay isOpen={show} onClose={() => setShow(false)} mode="fullscreen">
+ *   <MyContent />
+ * </DialtribeOverlay>
+ * ```
+ */
+declare function DialtribeOverlay({ isOpen, onClose, mode, children, ariaLabel, showCloseButton, closeOnBackdropClick, closeOnEsc, }: DialtribeOverlayProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Format seconds to time string (HH:MM:SS or MM:SS)
  *
@@ -557,4 +557,4 @@ declare const HTTP_STATUS: {
 };
 type HttpStatusCode = typeof HTTP_STATUS[keyof typeof HTTP_STATUS];
 
-export { type ApiClientConfig as A, BroadcastPlayer as B, CDN_DOMAIN as C, DialTribeProvider as D, ENDPOINTS as E, HTTP_STATUS as H, LoadingSpinner as L, type TranscriptWord as T, type DialTribeContextValue as a, type DialTribeProviderProps as b, DialTribeClient as c, DIALTRIBE_API_BASE as d, type BroadcastPlayerProps as e, BroadcastPlayerModal as f, type BroadcastPlayerModalProps as g, BroadcastPlayerErrorBoundary as h, AudioWaveform as i, type Broadcast as j, type TranscriptSegment as k, type TranscriptData as l, formatTime as m, buildBroadcastCdnUrl as n, buildBroadcastS3KeyPrefix as o, type HttpStatusCode as p, useDialTribeOptional as q, useDialTribe as u };
+export { type ApiClientConfig as A, type Broadcast as B, CDN_DOMAIN as C, DialtribeProvider as D, ENDPOINTS as E, HTTP_STATUS as H, LoadingSpinner as L, type TranscriptWord as T, type DialtribeContextValue as a, type DialtribeProviderProps as b, DialtribeClient as c, DIALTRIBE_API_BASE as d, DialtribePlayer as e, type DialtribePlayerProps as f, DialtribePlayerErrorBoundary as g, AudioWaveform as h, DialtribeOverlay as i, type DialtribeOverlayProps as j, type DialtribeOverlayMode as k, type TranscriptSegment as l, type TranscriptData as m, formatTime as n, buildBroadcastCdnUrl as o, buildBroadcastS3KeyPrefix as p, type HttpStatusCode as q, useDialtribeOptional as r, useDialtribe as u };