@dialtribe/react-sdk 0.1.0-alpha.8 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +20 -20
- package/README.md +535 -535
- package/dist/{broadcast-player.d.mts → dialtribe-player-CNriUtNi.d.mts} +97 -85
- package/dist/{broadcast-player.d.ts → dialtribe-player-CNriUtNi.d.ts} +97 -85
- package/dist/dialtribe-player.d.mts +3 -0
- package/dist/dialtribe-player.d.ts +3 -0
- package/dist/{broadcast-player.js → dialtribe-player.js} +1103 -548
- package/dist/dialtribe-player.js.map +1 -0
- package/dist/{broadcast-player.mjs → dialtribe-player.mjs} +1099 -544
- package/dist/dialtribe-player.mjs.map +1 -0
- package/dist/dialtribe-streamer-C16mRqha.d.ts +567 -0
- package/dist/dialtribe-streamer-FjMRCQfA.d.mts +567 -0
- package/dist/dialtribe-streamer.d.mts +4 -0
- package/dist/dialtribe-streamer.d.ts +4 -0
- package/dist/dialtribe-streamer.js +4836 -0
- package/dist/dialtribe-streamer.js.map +1 -0
- package/dist/dialtribe-streamer.mjs +4799 -0
- package/dist/dialtribe-streamer.mjs.map +1 -0
- package/dist/hello-world.js.map +1 -1
- package/dist/hello-world.mjs.map +1 -1
- package/dist/index.d.mts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +3306 -609
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3222 -541
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +3 -3
- package/package.json +91 -86
- package/dist/broadcast-player.js.map +0 -1
- package/dist/broadcast-player.mjs.map +0 -1
|
@@ -2,10 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import React$1, { Component, ReactNode, ErrorInfo } from 'react';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* Dialtribe SDK Context
|
|
6
6
|
* Manages session token and auto-refresh across all SDK components
|
|
7
7
|
*/
|
|
8
|
-
interface
|
|
8
|
+
interface DialtribeContextValue {
|
|
9
9
|
/** Current session token */
|
|
10
10
|
sessionToken: string | null;
|
|
11
11
|
/** Update the session token (called automatically on refresh) */
|
|
@@ -17,7 +17,7 @@ interface DialTribeContextValue {
|
|
|
17
17
|
/** Optional API base URL override */
|
|
18
18
|
apiBaseUrl?: string;
|
|
19
19
|
}
|
|
20
|
-
interface
|
|
20
|
+
interface DialtribeProviderProps {
|
|
21
21
|
/** Session token from your backend (required) */
|
|
22
22
|
sessionToken: string;
|
|
23
23
|
/** Called when the API returns a refreshed token via X-Session-Token header */
|
|
@@ -34,59 +34,70 @@ interface DialTribeProviderProps {
|
|
|
34
34
|
children: React$1.ReactNode;
|
|
35
35
|
}
|
|
36
36
|
/**
|
|
37
|
-
*
|
|
37
|
+
* Dialtribe Provider
|
|
38
38
|
*
|
|
39
39
|
* Wraps your app to provide session token authentication to all SDK components.
|
|
40
40
|
*
|
|
41
41
|
* @example
|
|
42
42
|
* ```tsx
|
|
43
43
|
* // Production (default)
|
|
44
|
-
* <
|
|
44
|
+
* <DialtribeProvider
|
|
45
45
|
* sessionToken="sess_xxx..."
|
|
46
46
|
* onTokenRefresh={(newToken) => setToken(newToken)}
|
|
47
47
|
* onTokenExpired={() => router.push('/login')}
|
|
48
48
|
* >
|
|
49
49
|
* <App />
|
|
50
|
-
* </
|
|
50
|
+
* </DialtribeProvider>
|
|
51
51
|
*
|
|
52
52
|
* // Local development (explicit)
|
|
53
|
-
* <
|
|
53
|
+
* <DialtribeProvider
|
|
54
54
|
* sessionToken="sess_xxx..."
|
|
55
55
|
* apiBaseUrl="http://localhost:3001/api/public/v1"
|
|
56
56
|
* onTokenRefresh={(newToken) => setToken(newToken)}
|
|
57
57
|
* >
|
|
58
58
|
* <App />
|
|
59
|
-
* </
|
|
59
|
+
* </DialtribeProvider>
|
|
60
60
|
*
|
|
61
61
|
* // Local development (via env var - recommended)
|
|
62
62
|
* // Set NEXT_PUBLIC_DIALTRIBE_API_URL=http://localhost:3001/api/public/v1 in .env
|
|
63
|
-
* <
|
|
63
|
+
* <DialtribeProvider sessionToken="sess_xxx...">
|
|
64
64
|
* <App />
|
|
65
|
-
* </
|
|
65
|
+
* </DialtribeProvider>
|
|
66
66
|
* ```
|
|
67
67
|
*/
|
|
68
|
-
declare function
|
|
68
|
+
declare function DialtribeProvider({ sessionToken: initialToken, onTokenRefresh, onTokenExpired, apiBaseUrl, children, }: DialtribeProviderProps): react_jsx_runtime.JSX.Element;
|
|
69
69
|
/**
|
|
70
|
-
* Hook to access
|
|
70
|
+
* Hook to access Dialtribe context
|
|
71
71
|
*
|
|
72
|
-
* @throws Error if used outside
|
|
72
|
+
* @throws Error if used outside DialtribeProvider
|
|
73
73
|
*
|
|
74
74
|
* @example
|
|
75
75
|
* ```tsx
|
|
76
|
-
* const { sessionToken, setSessionToken } =
|
|
76
|
+
* const { sessionToken, setSessionToken } = useDialtribe();
|
|
77
77
|
* ```
|
|
78
78
|
*/
|
|
79
|
-
declare function
|
|
79
|
+
declare function useDialtribe(): DialtribeContextValue;
|
|
80
|
+
/**
|
|
81
|
+
* Hook to optionally access Dialtribe context
|
|
82
|
+
* Returns null if not within a DialtribeProvider (doesn't throw)
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* ```tsx
|
|
86
|
+
* const context = useDialtribeOptional();
|
|
87
|
+
* const sessionToken = context?.sessionToken ?? propSessionToken;
|
|
88
|
+
* ```
|
|
89
|
+
*/
|
|
90
|
+
declare function useDialtribeOptional(): DialtribeContextValue | null;
|
|
80
91
|
|
|
81
92
|
/**
|
|
82
|
-
*
|
|
93
|
+
* Dialtribe API Client
|
|
83
94
|
*
|
|
84
|
-
* Handles all API communication with
|
|
95
|
+
* Handles all API communication with Dialtribe endpoints.
|
|
85
96
|
* Automatically manages session token refresh via X-Session-Token headers.
|
|
86
97
|
*
|
|
87
98
|
* Supports configurable API base URL for development:
|
|
88
99
|
* 1. Via environment variable: NEXT_PUBLIC_DIALTRIBE_API_URL
|
|
89
|
-
* 2. Via apiBaseUrl prop on
|
|
100
|
+
* 2. Via apiBaseUrl prop on DialtribeProvider (takes precedence)
|
|
90
101
|
*
|
|
91
102
|
* Defaults to production URL if neither is specified.
|
|
92
103
|
*/
|
|
@@ -98,8 +109,9 @@ declare const ENDPOINTS: {
|
|
|
98
109
|
readonly broadcast: (id: number) => string;
|
|
99
110
|
readonly contentPlay: `${string}/content/play`;
|
|
100
111
|
readonly presignedUrl: `${string}/media/presigned-url`;
|
|
101
|
-
readonly
|
|
102
|
-
readonly
|
|
112
|
+
readonly audienceStart: `${string}/audiences/start`;
|
|
113
|
+
readonly audiencePing: `${string}/audiences/ping`;
|
|
114
|
+
readonly sessionPing: `${string}/sessions/ping`;
|
|
103
115
|
};
|
|
104
116
|
interface ApiClientConfig {
|
|
105
117
|
/** Session token for authentication */
|
|
@@ -116,17 +128,17 @@ interface ApiClientConfig {
|
|
|
116
128
|
apiBaseUrl?: string;
|
|
117
129
|
}
|
|
118
130
|
/**
|
|
119
|
-
*
|
|
131
|
+
* Dialtribe API Client
|
|
120
132
|
*
|
|
121
|
-
* Low-level client for making authenticated requests to
|
|
133
|
+
* Low-level client for making authenticated requests to Dialtribe API.
|
|
122
134
|
* Handles session token auto-refresh automatically.
|
|
123
135
|
*/
|
|
124
|
-
declare class
|
|
136
|
+
declare class DialtribeClient {
|
|
125
137
|
private config;
|
|
126
138
|
private endpoints;
|
|
127
139
|
constructor(config: ApiClientConfig);
|
|
128
140
|
/**
|
|
129
|
-
* Make an authenticated request to
|
|
141
|
+
* Make an authenticated request to Dialtribe API
|
|
130
142
|
*
|
|
131
143
|
* Automatically:
|
|
132
144
|
* - Adds Authorization header with session token
|
|
@@ -292,8 +304,8 @@ interface TranscriptData {
|
|
|
292
304
|
words?: TranscriptWord[];
|
|
293
305
|
}
|
|
294
306
|
|
|
295
|
-
interface
|
|
296
|
-
/** Broadcast data from
|
|
307
|
+
interface DialtribePlayerProps {
|
|
308
|
+
/** Broadcast data from Dialtribe API */
|
|
297
309
|
broadcast: Broadcast;
|
|
298
310
|
/** Optional: App ID for tracking */
|
|
299
311
|
appId?: string;
|
|
@@ -323,72 +335,28 @@ interface BroadcastPlayerProps {
|
|
|
323
335
|
enableKeyboardShortcuts?: boolean;
|
|
324
336
|
}
|
|
325
337
|
/**
|
|
326
|
-
*
|
|
338
|
+
* DialtribePlayer - Media player component for Dialtribe broadcasts
|
|
327
339
|
*
|
|
328
340
|
* Plays video/audio broadcasts with transcript, waveform visualization, and clip creation.
|
|
329
|
-
*
|
|
341
|
+
* For modal or fullscreen display, wrap with the Overlay component.
|
|
330
342
|
*
|
|
331
343
|
* @example
|
|
332
344
|
* ```tsx
|
|
333
|
-
*
|
|
334
|
-
*
|
|
335
|
-
* appId="app_123"
|
|
336
|
-
* contentId={456}
|
|
337
|
-
* />
|
|
338
|
-
* ```
|
|
339
|
-
*/
|
|
340
|
-
declare function BroadcastPlayer({ broadcast, appId, contentId, foreignId, foreignTier, renderClipCreator, onError, className, enableKeyboardShortcuts, }: BroadcastPlayerProps): react_jsx_runtime.JSX.Element;
|
|
341
|
-
|
|
342
|
-
interface BroadcastPlayerModalProps {
|
|
343
|
-
/** Broadcast data from DialTribe API */
|
|
344
|
-
broadcast: Broadcast;
|
|
345
|
-
/** Whether modal is open */
|
|
346
|
-
isOpen: boolean;
|
|
347
|
-
/** Called when modal should close */
|
|
348
|
-
onClose: () => void;
|
|
349
|
-
/** Optional: App ID for tracking */
|
|
350
|
-
appId?: string;
|
|
351
|
-
/** Optional: Content ID for tracking */
|
|
352
|
-
contentId?: number;
|
|
353
|
-
/** Foreign user ID from partner system (any tier) */
|
|
354
|
-
foreignId?: string;
|
|
355
|
-
/** Tier name from partner system (e.g., 'guest', 'member', 'subscriber_gold') */
|
|
356
|
-
foreignTier?: string;
|
|
357
|
-
/**
|
|
358
|
-
* Optional render prop for clip creator
|
|
359
|
-
* If provided, the "Create Clip" button will be shown and this will be called when clicked
|
|
360
|
-
*/
|
|
361
|
-
renderClipCreator?: (props: {
|
|
362
|
-
isOpen: boolean;
|
|
363
|
-
onClose: () => void;
|
|
364
|
-
sourceVideoUrl?: string;
|
|
365
|
-
sourceAudioUrl?: string;
|
|
366
|
-
sourceDuration: number;
|
|
367
|
-
onPauseParent: () => void;
|
|
368
|
-
}) => React.ReactNode;
|
|
369
|
-
/** Optional: Custom CSS classes for the player */
|
|
370
|
-
className?: string;
|
|
371
|
-
/** Optional: Enable keyboard shortcuts (Space, arrows, M, F, etc.). Default: false */
|
|
372
|
-
enableKeyboardShortcuts?: boolean;
|
|
373
|
-
}
|
|
374
|
-
/**
|
|
375
|
-
* BroadcastPlayerModal - Modal wrapper for BroadcastPlayer
|
|
345
|
+
* // Inline (embedded in page)
|
|
346
|
+
* <DialtribePlayer broadcast={broadcast} />
|
|
376
347
|
*
|
|
377
|
-
*
|
|
378
|
-
*
|
|
348
|
+
* // Modal (wrap with Overlay)
|
|
349
|
+
* <DialtribeOverlay mode="modal" isOpen={show} onClose={() => setShow(false)}>
|
|
350
|
+
* <DialtribePlayer broadcast={broadcast} />
|
|
351
|
+
* </DialtribeOverlay>
|
|
379
352
|
*
|
|
380
|
-
*
|
|
381
|
-
*
|
|
382
|
-
*
|
|
383
|
-
*
|
|
384
|
-
* isOpen={showModal}
|
|
385
|
-
* onClose={() => setShowModal(false)}
|
|
386
|
-
* appId="app_123"
|
|
387
|
-
* contentId={456}
|
|
388
|
-
* />
|
|
353
|
+
* // Fullscreen (wrap with Overlay)
|
|
354
|
+
* <DialtribeOverlay mode="fullscreen" isOpen={show} onClose={() => setShow(false)}>
|
|
355
|
+
* <DialtribePlayer broadcast={broadcast} />
|
|
356
|
+
* </DialtribeOverlay>
|
|
389
357
|
* ```
|
|
390
358
|
*/
|
|
391
|
-
declare function
|
|
359
|
+
declare function DialtribePlayer({ broadcast, appId, contentId, foreignId, foreignTier, renderClipCreator, onError, className, enableKeyboardShortcuts, }: DialtribePlayerProps): react_jsx_runtime.JSX.Element;
|
|
392
360
|
|
|
393
361
|
interface Props {
|
|
394
362
|
children: ReactNode;
|
|
@@ -422,7 +390,7 @@ interface State {
|
|
|
422
390
|
* - Logs errors for debugging
|
|
423
391
|
* - Allows graceful recovery
|
|
424
392
|
*/
|
|
425
|
-
declare class
|
|
393
|
+
declare class DialtribePlayerErrorBoundary extends Component<Props, State> {
|
|
426
394
|
constructor(props: Props);
|
|
427
395
|
static getDerivedStateFromError(error: Error): Partial<State>;
|
|
428
396
|
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
@@ -476,6 +444,50 @@ interface LoadingSpinnerProps {
|
|
|
476
444
|
*/
|
|
477
445
|
declare function LoadingSpinner({ text, size, variant, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
|
|
478
446
|
|
|
447
|
+
/** Display mode for the overlay */
|
|
448
|
+
type DialtribeOverlayMode = "modal" | "fullscreen";
|
|
449
|
+
interface DialtribeOverlayProps {
|
|
450
|
+
/** Whether the overlay is open */
|
|
451
|
+
isOpen: boolean;
|
|
452
|
+
/** Called when the overlay should close */
|
|
453
|
+
onClose: () => void;
|
|
454
|
+
/** Display mode: "modal" (centered with backdrop) or "fullscreen" (fills viewport) */
|
|
455
|
+
mode?: DialtribeOverlayMode;
|
|
456
|
+
/** Content to display inside the overlay */
|
|
457
|
+
children: React.ReactNode;
|
|
458
|
+
/** Optional: aria-label for accessibility */
|
|
459
|
+
ariaLabel?: string;
|
|
460
|
+
/** Optional: Show close button. Default: true */
|
|
461
|
+
showCloseButton?: boolean;
|
|
462
|
+
/** Optional: Close on backdrop click. Default: true */
|
|
463
|
+
closeOnBackdropClick?: boolean;
|
|
464
|
+
/** Optional: Close on ESC key. Default: true */
|
|
465
|
+
closeOnEsc?: boolean;
|
|
466
|
+
}
|
|
467
|
+
/**
|
|
468
|
+
* DialtribeOverlay - Reusable modal/fullscreen overlay component
|
|
469
|
+
*
|
|
470
|
+
* Provides a consistent overlay experience with:
|
|
471
|
+
* - Focus management (traps focus, restores on close)
|
|
472
|
+
* - ESC key to close
|
|
473
|
+
* - Backdrop click to close
|
|
474
|
+
* - Accessible with proper ARIA attributes
|
|
475
|
+
*
|
|
476
|
+
* @example
|
|
477
|
+
* ```tsx
|
|
478
|
+
* // Modal mode (centered with backdrop blur)
|
|
479
|
+
* <DialtribeOverlay isOpen={show} onClose={() => setShow(false)} mode="modal">
|
|
480
|
+
* <MyContent />
|
|
481
|
+
* </DialtribeOverlay>
|
|
482
|
+
*
|
|
483
|
+
* // Fullscreen mode (fills entire viewport)
|
|
484
|
+
* <DialtribeOverlay isOpen={show} onClose={() => setShow(false)} mode="fullscreen">
|
|
485
|
+
* <MyContent />
|
|
486
|
+
* </DialtribeOverlay>
|
|
487
|
+
* ```
|
|
488
|
+
*/
|
|
489
|
+
declare function DialtribeOverlay({ isOpen, onClose, mode, children, ariaLabel, showCloseButton, closeOnBackdropClick, closeOnEsc, }: DialtribeOverlayProps): react_jsx_runtime.JSX.Element | null;
|
|
490
|
+
|
|
479
491
|
/**
|
|
480
492
|
* Format seconds to time string (HH:MM:SS or MM:SS)
|
|
481
493
|
*
|
|
@@ -545,4 +557,4 @@ declare const HTTP_STATUS: {
|
|
|
545
557
|
};
|
|
546
558
|
type HttpStatusCode = typeof HTTP_STATUS[keyof typeof HTTP_STATUS];
|
|
547
559
|
|
|
548
|
-
export { type ApiClientConfig
|
|
560
|
+
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 };
|
|
@@ -2,10 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import React$1, { Component, ReactNode, ErrorInfo } from 'react';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* Dialtribe SDK Context
|
|
6
6
|
* Manages session token and auto-refresh across all SDK components
|
|
7
7
|
*/
|
|
8
|
-
interface
|
|
8
|
+
interface DialtribeContextValue {
|
|
9
9
|
/** Current session token */
|
|
10
10
|
sessionToken: string | null;
|
|
11
11
|
/** Update the session token (called automatically on refresh) */
|
|
@@ -17,7 +17,7 @@ interface DialTribeContextValue {
|
|
|
17
17
|
/** Optional API base URL override */
|
|
18
18
|
apiBaseUrl?: string;
|
|
19
19
|
}
|
|
20
|
-
interface
|
|
20
|
+
interface DialtribeProviderProps {
|
|
21
21
|
/** Session token from your backend (required) */
|
|
22
22
|
sessionToken: string;
|
|
23
23
|
/** Called when the API returns a refreshed token via X-Session-Token header */
|
|
@@ -34,59 +34,70 @@ interface DialTribeProviderProps {
|
|
|
34
34
|
children: React$1.ReactNode;
|
|
35
35
|
}
|
|
36
36
|
/**
|
|
37
|
-
*
|
|
37
|
+
* Dialtribe Provider
|
|
38
38
|
*
|
|
39
39
|
* Wraps your app to provide session token authentication to all SDK components.
|
|
40
40
|
*
|
|
41
41
|
* @example
|
|
42
42
|
* ```tsx
|
|
43
43
|
* // Production (default)
|
|
44
|
-
* <
|
|
44
|
+
* <DialtribeProvider
|
|
45
45
|
* sessionToken="sess_xxx..."
|
|
46
46
|
* onTokenRefresh={(newToken) => setToken(newToken)}
|
|
47
47
|
* onTokenExpired={() => router.push('/login')}
|
|
48
48
|
* >
|
|
49
49
|
* <App />
|
|
50
|
-
* </
|
|
50
|
+
* </DialtribeProvider>
|
|
51
51
|
*
|
|
52
52
|
* // Local development (explicit)
|
|
53
|
-
* <
|
|
53
|
+
* <DialtribeProvider
|
|
54
54
|
* sessionToken="sess_xxx..."
|
|
55
55
|
* apiBaseUrl="http://localhost:3001/api/public/v1"
|
|
56
56
|
* onTokenRefresh={(newToken) => setToken(newToken)}
|
|
57
57
|
* >
|
|
58
58
|
* <App />
|
|
59
|
-
* </
|
|
59
|
+
* </DialtribeProvider>
|
|
60
60
|
*
|
|
61
61
|
* // Local development (via env var - recommended)
|
|
62
62
|
* // Set NEXT_PUBLIC_DIALTRIBE_API_URL=http://localhost:3001/api/public/v1 in .env
|
|
63
|
-
* <
|
|
63
|
+
* <DialtribeProvider sessionToken="sess_xxx...">
|
|
64
64
|
* <App />
|
|
65
|
-
* </
|
|
65
|
+
* </DialtribeProvider>
|
|
66
66
|
* ```
|
|
67
67
|
*/
|
|
68
|
-
declare function
|
|
68
|
+
declare function DialtribeProvider({ sessionToken: initialToken, onTokenRefresh, onTokenExpired, apiBaseUrl, children, }: DialtribeProviderProps): react_jsx_runtime.JSX.Element;
|
|
69
69
|
/**
|
|
70
|
-
* Hook to access
|
|
70
|
+
* Hook to access Dialtribe context
|
|
71
71
|
*
|
|
72
|
-
* @throws Error if used outside
|
|
72
|
+
* @throws Error if used outside DialtribeProvider
|
|
73
73
|
*
|
|
74
74
|
* @example
|
|
75
75
|
* ```tsx
|
|
76
|
-
* const { sessionToken, setSessionToken } =
|
|
76
|
+
* const { sessionToken, setSessionToken } = useDialtribe();
|
|
77
77
|
* ```
|
|
78
78
|
*/
|
|
79
|
-
declare function
|
|
79
|
+
declare function useDialtribe(): DialtribeContextValue;
|
|
80
|
+
/**
|
|
81
|
+
* Hook to optionally access Dialtribe context
|
|
82
|
+
* Returns null if not within a DialtribeProvider (doesn't throw)
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* ```tsx
|
|
86
|
+
* const context = useDialtribeOptional();
|
|
87
|
+
* const sessionToken = context?.sessionToken ?? propSessionToken;
|
|
88
|
+
* ```
|
|
89
|
+
*/
|
|
90
|
+
declare function useDialtribeOptional(): DialtribeContextValue | null;
|
|
80
91
|
|
|
81
92
|
/**
|
|
82
|
-
*
|
|
93
|
+
* Dialtribe API Client
|
|
83
94
|
*
|
|
84
|
-
* Handles all API communication with
|
|
95
|
+
* Handles all API communication with Dialtribe endpoints.
|
|
85
96
|
* Automatically manages session token refresh via X-Session-Token headers.
|
|
86
97
|
*
|
|
87
98
|
* Supports configurable API base URL for development:
|
|
88
99
|
* 1. Via environment variable: NEXT_PUBLIC_DIALTRIBE_API_URL
|
|
89
|
-
* 2. Via apiBaseUrl prop on
|
|
100
|
+
* 2. Via apiBaseUrl prop on DialtribeProvider (takes precedence)
|
|
90
101
|
*
|
|
91
102
|
* Defaults to production URL if neither is specified.
|
|
92
103
|
*/
|
|
@@ -98,8 +109,9 @@ declare const ENDPOINTS: {
|
|
|
98
109
|
readonly broadcast: (id: number) => string;
|
|
99
110
|
readonly contentPlay: `${string}/content/play`;
|
|
100
111
|
readonly presignedUrl: `${string}/media/presigned-url`;
|
|
101
|
-
readonly
|
|
102
|
-
readonly
|
|
112
|
+
readonly audienceStart: `${string}/audiences/start`;
|
|
113
|
+
readonly audiencePing: `${string}/audiences/ping`;
|
|
114
|
+
readonly sessionPing: `${string}/sessions/ping`;
|
|
103
115
|
};
|
|
104
116
|
interface ApiClientConfig {
|
|
105
117
|
/** Session token for authentication */
|
|
@@ -116,17 +128,17 @@ interface ApiClientConfig {
|
|
|
116
128
|
apiBaseUrl?: string;
|
|
117
129
|
}
|
|
118
130
|
/**
|
|
119
|
-
*
|
|
131
|
+
* Dialtribe API Client
|
|
120
132
|
*
|
|
121
|
-
* Low-level client for making authenticated requests to
|
|
133
|
+
* Low-level client for making authenticated requests to Dialtribe API.
|
|
122
134
|
* Handles session token auto-refresh automatically.
|
|
123
135
|
*/
|
|
124
|
-
declare class
|
|
136
|
+
declare class DialtribeClient {
|
|
125
137
|
private config;
|
|
126
138
|
private endpoints;
|
|
127
139
|
constructor(config: ApiClientConfig);
|
|
128
140
|
/**
|
|
129
|
-
* Make an authenticated request to
|
|
141
|
+
* Make an authenticated request to Dialtribe API
|
|
130
142
|
*
|
|
131
143
|
* Automatically:
|
|
132
144
|
* - Adds Authorization header with session token
|
|
@@ -292,8 +304,8 @@ interface TranscriptData {
|
|
|
292
304
|
words?: TranscriptWord[];
|
|
293
305
|
}
|
|
294
306
|
|
|
295
|
-
interface
|
|
296
|
-
/** Broadcast data from
|
|
307
|
+
interface DialtribePlayerProps {
|
|
308
|
+
/** Broadcast data from Dialtribe API */
|
|
297
309
|
broadcast: Broadcast;
|
|
298
310
|
/** Optional: App ID for tracking */
|
|
299
311
|
appId?: string;
|
|
@@ -323,72 +335,28 @@ interface BroadcastPlayerProps {
|
|
|
323
335
|
enableKeyboardShortcuts?: boolean;
|
|
324
336
|
}
|
|
325
337
|
/**
|
|
326
|
-
*
|
|
338
|
+
* DialtribePlayer - Media player component for Dialtribe broadcasts
|
|
327
339
|
*
|
|
328
340
|
* Plays video/audio broadcasts with transcript, waveform visualization, and clip creation.
|
|
329
|
-
*
|
|
341
|
+
* For modal or fullscreen display, wrap with the Overlay component.
|
|
330
342
|
*
|
|
331
343
|
* @example
|
|
332
344
|
* ```tsx
|
|
333
|
-
*
|
|
334
|
-
*
|
|
335
|
-
* appId="app_123"
|
|
336
|
-
* contentId={456}
|
|
337
|
-
* />
|
|
338
|
-
* ```
|
|
339
|
-
*/
|
|
340
|
-
declare function BroadcastPlayer({ broadcast, appId, contentId, foreignId, foreignTier, renderClipCreator, onError, className, enableKeyboardShortcuts, }: BroadcastPlayerProps): react_jsx_runtime.JSX.Element;
|
|
341
|
-
|
|
342
|
-
interface BroadcastPlayerModalProps {
|
|
343
|
-
/** Broadcast data from DialTribe API */
|
|
344
|
-
broadcast: Broadcast;
|
|
345
|
-
/** Whether modal is open */
|
|
346
|
-
isOpen: boolean;
|
|
347
|
-
/** Called when modal should close */
|
|
348
|
-
onClose: () => void;
|
|
349
|
-
/** Optional: App ID for tracking */
|
|
350
|
-
appId?: string;
|
|
351
|
-
/** Optional: Content ID for tracking */
|
|
352
|
-
contentId?: number;
|
|
353
|
-
/** Foreign user ID from partner system (any tier) */
|
|
354
|
-
foreignId?: string;
|
|
355
|
-
/** Tier name from partner system (e.g., 'guest', 'member', 'subscriber_gold') */
|
|
356
|
-
foreignTier?: string;
|
|
357
|
-
/**
|
|
358
|
-
* Optional render prop for clip creator
|
|
359
|
-
* If provided, the "Create Clip" button will be shown and this will be called when clicked
|
|
360
|
-
*/
|
|
361
|
-
renderClipCreator?: (props: {
|
|
362
|
-
isOpen: boolean;
|
|
363
|
-
onClose: () => void;
|
|
364
|
-
sourceVideoUrl?: string;
|
|
365
|
-
sourceAudioUrl?: string;
|
|
366
|
-
sourceDuration: number;
|
|
367
|
-
onPauseParent: () => void;
|
|
368
|
-
}) => React.ReactNode;
|
|
369
|
-
/** Optional: Custom CSS classes for the player */
|
|
370
|
-
className?: string;
|
|
371
|
-
/** Optional: Enable keyboard shortcuts (Space, arrows, M, F, etc.). Default: false */
|
|
372
|
-
enableKeyboardShortcuts?: boolean;
|
|
373
|
-
}
|
|
374
|
-
/**
|
|
375
|
-
* BroadcastPlayerModal - Modal wrapper for BroadcastPlayer
|
|
345
|
+
* // Inline (embedded in page)
|
|
346
|
+
* <DialtribePlayer broadcast={broadcast} />
|
|
376
347
|
*
|
|
377
|
-
*
|
|
378
|
-
*
|
|
348
|
+
* // Modal (wrap with Overlay)
|
|
349
|
+
* <DialtribeOverlay mode="modal" isOpen={show} onClose={() => setShow(false)}>
|
|
350
|
+
* <DialtribePlayer broadcast={broadcast} />
|
|
351
|
+
* </DialtribeOverlay>
|
|
379
352
|
*
|
|
380
|
-
*
|
|
381
|
-
*
|
|
382
|
-
*
|
|
383
|
-
*
|
|
384
|
-
* isOpen={showModal}
|
|
385
|
-
* onClose={() => setShowModal(false)}
|
|
386
|
-
* appId="app_123"
|
|
387
|
-
* contentId={456}
|
|
388
|
-
* />
|
|
353
|
+
* // Fullscreen (wrap with Overlay)
|
|
354
|
+
* <DialtribeOverlay mode="fullscreen" isOpen={show} onClose={() => setShow(false)}>
|
|
355
|
+
* <DialtribePlayer broadcast={broadcast} />
|
|
356
|
+
* </DialtribeOverlay>
|
|
389
357
|
* ```
|
|
390
358
|
*/
|
|
391
|
-
declare function
|
|
359
|
+
declare function DialtribePlayer({ broadcast, appId, contentId, foreignId, foreignTier, renderClipCreator, onError, className, enableKeyboardShortcuts, }: DialtribePlayerProps): react_jsx_runtime.JSX.Element;
|
|
392
360
|
|
|
393
361
|
interface Props {
|
|
394
362
|
children: ReactNode;
|
|
@@ -422,7 +390,7 @@ interface State {
|
|
|
422
390
|
* - Logs errors for debugging
|
|
423
391
|
* - Allows graceful recovery
|
|
424
392
|
*/
|
|
425
|
-
declare class
|
|
393
|
+
declare class DialtribePlayerErrorBoundary extends Component<Props, State> {
|
|
426
394
|
constructor(props: Props);
|
|
427
395
|
static getDerivedStateFromError(error: Error): Partial<State>;
|
|
428
396
|
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
@@ -476,6 +444,50 @@ interface LoadingSpinnerProps {
|
|
|
476
444
|
*/
|
|
477
445
|
declare function LoadingSpinner({ text, size, variant, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
|
|
478
446
|
|
|
447
|
+
/** Display mode for the overlay */
|
|
448
|
+
type DialtribeOverlayMode = "modal" | "fullscreen";
|
|
449
|
+
interface DialtribeOverlayProps {
|
|
450
|
+
/** Whether the overlay is open */
|
|
451
|
+
isOpen: boolean;
|
|
452
|
+
/** Called when the overlay should close */
|
|
453
|
+
onClose: () => void;
|
|
454
|
+
/** Display mode: "modal" (centered with backdrop) or "fullscreen" (fills viewport) */
|
|
455
|
+
mode?: DialtribeOverlayMode;
|
|
456
|
+
/** Content to display inside the overlay */
|
|
457
|
+
children: React.ReactNode;
|
|
458
|
+
/** Optional: aria-label for accessibility */
|
|
459
|
+
ariaLabel?: string;
|
|
460
|
+
/** Optional: Show close button. Default: true */
|
|
461
|
+
showCloseButton?: boolean;
|
|
462
|
+
/** Optional: Close on backdrop click. Default: true */
|
|
463
|
+
closeOnBackdropClick?: boolean;
|
|
464
|
+
/** Optional: Close on ESC key. Default: true */
|
|
465
|
+
closeOnEsc?: boolean;
|
|
466
|
+
}
|
|
467
|
+
/**
|
|
468
|
+
* DialtribeOverlay - Reusable modal/fullscreen overlay component
|
|
469
|
+
*
|
|
470
|
+
* Provides a consistent overlay experience with:
|
|
471
|
+
* - Focus management (traps focus, restores on close)
|
|
472
|
+
* - ESC key to close
|
|
473
|
+
* - Backdrop click to close
|
|
474
|
+
* - Accessible with proper ARIA attributes
|
|
475
|
+
*
|
|
476
|
+
* @example
|
|
477
|
+
* ```tsx
|
|
478
|
+
* // Modal mode (centered with backdrop blur)
|
|
479
|
+
* <DialtribeOverlay isOpen={show} onClose={() => setShow(false)} mode="modal">
|
|
480
|
+
* <MyContent />
|
|
481
|
+
* </DialtribeOverlay>
|
|
482
|
+
*
|
|
483
|
+
* // Fullscreen mode (fills entire viewport)
|
|
484
|
+
* <DialtribeOverlay isOpen={show} onClose={() => setShow(false)} mode="fullscreen">
|
|
485
|
+
* <MyContent />
|
|
486
|
+
* </DialtribeOverlay>
|
|
487
|
+
* ```
|
|
488
|
+
*/
|
|
489
|
+
declare function DialtribeOverlay({ isOpen, onClose, mode, children, ariaLabel, showCloseButton, closeOnBackdropClick, closeOnEsc, }: DialtribeOverlayProps): react_jsx_runtime.JSX.Element | null;
|
|
490
|
+
|
|
479
491
|
/**
|
|
480
492
|
* Format seconds to time string (HH:MM:SS or MM:SS)
|
|
481
493
|
*
|
|
@@ -545,4 +557,4 @@ declare const HTTP_STATUS: {
|
|
|
545
557
|
};
|
|
546
558
|
type HttpStatusCode = typeof HTTP_STATUS[keyof typeof HTTP_STATUS];
|
|
547
559
|
|
|
548
|
-
export { type ApiClientConfig
|
|
560
|
+
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 };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { A as ApiClientConfig, h as AudioWaveform, B as Broadcast, C as CDN_DOMAIN, d as DIALTRIBE_API_BASE, c as DialtribeClient, a as DialtribeContextValue, i as DialtribeOverlay, k as DialtribeOverlayMode, j as DialtribeOverlayProps, e as DialtribePlayer, g as DialtribePlayerErrorBoundary, f as DialtribePlayerProps, D as DialtribeProvider, b as DialtribeProviderProps, E as ENDPOINTS, H as HTTP_STATUS, q as HttpStatusCode, L as LoadingSpinner, m as TranscriptData, l as TranscriptSegment, T as TranscriptWord, o as buildBroadcastCdnUrl, p as buildBroadcastS3KeyPrefix, n as formatTime, u as useDialtribe } from './dialtribe-player-CNriUtNi.mjs';
|
|
2
|
+
import 'react/jsx-runtime';
|
|
3
|
+
import 'react';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { A as ApiClientConfig, h as AudioWaveform, B as Broadcast, C as CDN_DOMAIN, d as DIALTRIBE_API_BASE, c as DialtribeClient, a as DialtribeContextValue, i as DialtribeOverlay, k as DialtribeOverlayMode, j as DialtribeOverlayProps, e as DialtribePlayer, g as DialtribePlayerErrorBoundary, f as DialtribePlayerProps, D as DialtribeProvider, b as DialtribeProviderProps, E as ENDPOINTS, H as HTTP_STATUS, q as HttpStatusCode, L as LoadingSpinner, m as TranscriptData, l as TranscriptSegment, T as TranscriptWord, o as buildBroadcastCdnUrl, p as buildBroadcastS3KeyPrefix, n as formatTime, u as useDialtribe } from './dialtribe-player-CNriUtNi.js';
|
|
2
|
+
import 'react/jsx-runtime';
|
|
3
|
+
import 'react';
|