@dialtribe/react-sdk 0.1.0-alpha.10 → 0.1.0-alpha.12
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/README.md +11 -11
- package/dist/{broadcast-player-CEAnuf6t.d.mts → dialtribe-player-Rc9kfQiX.d.mts} +90 -89
- package/dist/{broadcast-player-CEAnuf6t.d.ts → dialtribe-player-Rc9kfQiX.d.ts} +90 -89
- package/dist/dialtribe-player.d.mts +3 -0
- package/dist/dialtribe-player.d.ts +3 -0
- package/dist/{broadcast-player.js → dialtribe-player.js} +110 -112
- package/dist/dialtribe-player.js.map +1 -0
- package/dist/{broadcast-player.mjs → dialtribe-player.mjs} +105 -107
- package/dist/dialtribe-player.mjs.map +1 -0
- package/dist/{broadcast-streamer.d.ts → dialtribe-streamer.d.mts} +203 -32
- package/dist/{broadcast-streamer.d.mts → dialtribe-streamer.d.ts} +203 -32
- package/dist/{broadcast-streamer.js → dialtribe-streamer.js} +391 -261
- package/dist/dialtribe-streamer.js.map +1 -0
- package/dist/{broadcast-streamer.mjs → dialtribe-streamer.mjs} +281 -154
- package/dist/dialtribe-streamer.mjs.map +1 -0
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +387 -257
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +278 -151
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +9 -9
- package/dist/broadcast-player.d.mts +0 -3
- package/dist/broadcast-player.d.ts +0 -3
- package/dist/broadcast-player.js.map +0 -1
- package/dist/broadcast-player.mjs.map +0 -1
- package/dist/broadcast-streamer.js.map +0 -1
- package/dist/broadcast-streamer.mjs.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { createContext, useState, useCallback, useEffect, useContext, useRef, Component } from 'react';
|
|
2
|
+
import React2, { createContext, useState, useCallback, useEffect, useContext, useRef, Component } from 'react';
|
|
3
3
|
import ReactPlayer from 'react-player';
|
|
4
|
+
import { createPortal } from 'react-dom';
|
|
4
5
|
|
|
5
6
|
// src/components/HelloWorld.tsx
|
|
6
7
|
function HelloWorld({ name = "World" }) {
|
|
@@ -21,8 +22,8 @@ function HelloWorld({ name = "World" }) {
|
|
|
21
22
|
/* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "14px" }, children: "@dialtribe/react-sdk is working correctly" })
|
|
22
23
|
] });
|
|
23
24
|
}
|
|
24
|
-
var
|
|
25
|
-
function
|
|
25
|
+
var DialtribeContext = createContext(null);
|
|
26
|
+
function DialtribeProvider({
|
|
26
27
|
sessionToken: initialToken,
|
|
27
28
|
onTokenRefresh,
|
|
28
29
|
onTokenExpired,
|
|
@@ -58,22 +59,22 @@ function DialTribeProvider({
|
|
|
58
59
|
markExpired,
|
|
59
60
|
apiBaseUrl
|
|
60
61
|
};
|
|
61
|
-
return /* @__PURE__ */ jsx(
|
|
62
|
+
return /* @__PURE__ */ jsx(DialtribeContext.Provider, { value, children });
|
|
62
63
|
}
|
|
63
|
-
function
|
|
64
|
-
const context = useContext(
|
|
64
|
+
function useDialtribe() {
|
|
65
|
+
const context = useContext(DialtribeContext);
|
|
65
66
|
if (!context) {
|
|
66
67
|
throw new Error(
|
|
67
|
-
'
|
|
68
|
+
'useDialtribe must be used within a DialtribeProvider. Wrap your app with <DialtribeProvider sessionToken="sess_xxx">...</DialtribeProvider>'
|
|
68
69
|
);
|
|
69
70
|
}
|
|
70
71
|
return context;
|
|
71
72
|
}
|
|
72
|
-
function
|
|
73
|
-
return useContext(
|
|
73
|
+
function useDialtribeOptional() {
|
|
74
|
+
return useContext(DialtribeContext);
|
|
74
75
|
}
|
|
75
76
|
|
|
76
|
-
// src/client/
|
|
77
|
+
// src/client/DialtribeClient.ts
|
|
77
78
|
function getDefaultApiBaseUrl() {
|
|
78
79
|
if (typeof process !== "undefined" && process.env?.NEXT_PUBLIC_DIALTRIBE_API_URL) {
|
|
79
80
|
return process.env.NEXT_PUBLIC_DIALTRIBE_API_URL;
|
|
@@ -87,18 +88,19 @@ function getEndpoints(baseUrl = DIALTRIBE_API_BASE) {
|
|
|
87
88
|
broadcast: (id) => `${baseUrl}/broadcasts/${id}`,
|
|
88
89
|
contentPlay: `${baseUrl}/content/play`,
|
|
89
90
|
presignedUrl: `${baseUrl}/media/presigned-url`,
|
|
90
|
-
|
|
91
|
-
|
|
91
|
+
audienceStart: `${baseUrl}/audiences/start`,
|
|
92
|
+
audiencePing: `${baseUrl}/audiences/ping`,
|
|
93
|
+
sessionPing: `${baseUrl}/sessions/ping`
|
|
92
94
|
};
|
|
93
95
|
}
|
|
94
96
|
var ENDPOINTS = getEndpoints();
|
|
95
|
-
var
|
|
97
|
+
var DialtribeClient = class {
|
|
96
98
|
constructor(config) {
|
|
97
99
|
this.config = config;
|
|
98
100
|
this.endpoints = config.apiBaseUrl ? getEndpoints(config.apiBaseUrl) : ENDPOINTS;
|
|
99
101
|
}
|
|
100
102
|
/**
|
|
101
|
-
* Make an authenticated request to
|
|
103
|
+
* Make an authenticated request to Dialtribe API
|
|
102
104
|
*
|
|
103
105
|
* Automatically:
|
|
104
106
|
* - Adds Authorization header with session token
|
|
@@ -212,7 +214,7 @@ var DialTribeClient = class {
|
|
|
212
214
|
* @returns audienceId and optional resumePosition
|
|
213
215
|
*/
|
|
214
216
|
async startSession(params) {
|
|
215
|
-
const response = await this.fetch(this.endpoints.
|
|
217
|
+
const response = await this.fetch(this.endpoints.audienceStart, {
|
|
216
218
|
method: "POST",
|
|
217
219
|
body: JSON.stringify(params)
|
|
218
220
|
});
|
|
@@ -231,7 +233,7 @@ var DialTribeClient = class {
|
|
|
231
233
|
* - 3: UNMOUNT
|
|
232
234
|
*/
|
|
233
235
|
async sendSessionPing(params) {
|
|
234
|
-
const response = await this.fetch(this.endpoints.
|
|
236
|
+
const response = await this.fetch(this.endpoints.audiencePing, {
|
|
235
237
|
method: "POST",
|
|
236
238
|
body: JSON.stringify(params)
|
|
237
239
|
});
|
|
@@ -763,7 +765,7 @@ function getErrorMessage(error) {
|
|
|
763
765
|
}
|
|
764
766
|
return "Unable to play media. Please try refreshing the page or contact support if the problem persists.";
|
|
765
767
|
}
|
|
766
|
-
function
|
|
768
|
+
function DialtribePlayer({
|
|
767
769
|
broadcast,
|
|
768
770
|
appId,
|
|
769
771
|
contentId,
|
|
@@ -774,18 +776,18 @@ function BroadcastPlayer({
|
|
|
774
776
|
className = "",
|
|
775
777
|
enableKeyboardShortcuts = false
|
|
776
778
|
}) {
|
|
777
|
-
const { sessionToken, setSessionToken, markExpired, apiBaseUrl } =
|
|
779
|
+
const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialtribe();
|
|
778
780
|
const clientRef = useRef(null);
|
|
779
781
|
if (!clientRef.current && sessionToken) {
|
|
780
|
-
clientRef.current = new
|
|
782
|
+
clientRef.current = new DialtribeClient({
|
|
781
783
|
sessionToken,
|
|
782
784
|
apiBaseUrl,
|
|
783
785
|
onTokenRefresh: (newToken, expiresAt) => {
|
|
784
|
-
debug.log(`[
|
|
786
|
+
debug.log(`[DialtribeClient] Token refreshed, expires at ${expiresAt}`);
|
|
785
787
|
setSessionToken(newToken, expiresAt);
|
|
786
788
|
},
|
|
787
789
|
onTokenExpired: () => {
|
|
788
|
-
debug.error("[
|
|
790
|
+
debug.error("[DialtribeClient] Token expired");
|
|
789
791
|
markExpired();
|
|
790
792
|
}
|
|
791
793
|
});
|
|
@@ -1230,7 +1232,7 @@ function BroadcastPlayer({
|
|
|
1230
1232
|
setAudioElement(internalPlayer);
|
|
1231
1233
|
}
|
|
1232
1234
|
} catch (error) {
|
|
1233
|
-
debug.error("[
|
|
1235
|
+
debug.error("[DialtribePlayer] Error getting internal player:", error);
|
|
1234
1236
|
}
|
|
1235
1237
|
};
|
|
1236
1238
|
useEffect(() => {
|
|
@@ -1438,7 +1440,7 @@ function BroadcastPlayer({
|
|
|
1438
1440
|
return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsx(LoadingSpinner, { variant: "white", text: "Loading..." }) });
|
|
1439
1441
|
}
|
|
1440
1442
|
const hasTranscript = broadcast.transcriptStatus === 2 && transcriptData && (transcriptData.segments && transcriptData.segments.some((s) => s.words && s.words.length > 0) || transcriptData.words && transcriptData.words.length > 0);
|
|
1441
|
-
|
|
1443
|
+
const playerContent = /* @__PURE__ */ jsxs("div", { className: `bg-black rounded-lg shadow-2xl w-full max-h-full flex flex-col overflow-hidden ${className}`, children: [
|
|
1442
1444
|
/* @__PURE__ */ jsxs("div", { className: "bg-zinc-900/50 backdrop-blur-sm border-b border-zinc-800 px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 flex justify-between items-center rounded-t-lg shrink-0", children: [
|
|
1443
1445
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
1444
1446
|
/* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-white", children: broadcast.streamKeyRecord?.foreignName || "Broadcast" }),
|
|
@@ -1970,90 +1972,9 @@ function BroadcastPlayer({
|
|
|
1970
1972
|
}
|
|
1971
1973
|
` })
|
|
1972
1974
|
] });
|
|
1975
|
+
return playerContent;
|
|
1973
1976
|
}
|
|
1974
|
-
|
|
1975
|
-
broadcast,
|
|
1976
|
-
isOpen,
|
|
1977
|
-
onClose,
|
|
1978
|
-
appId,
|
|
1979
|
-
contentId,
|
|
1980
|
-
foreignId,
|
|
1981
|
-
foreignTier,
|
|
1982
|
-
renderClipCreator,
|
|
1983
|
-
className,
|
|
1984
|
-
enableKeyboardShortcuts = false
|
|
1985
|
-
}) {
|
|
1986
|
-
const closeButtonRef = useRef(null);
|
|
1987
|
-
const previousActiveElement = useRef(null);
|
|
1988
|
-
useEffect(() => {
|
|
1989
|
-
if (!isOpen) return;
|
|
1990
|
-
previousActiveElement.current = document.activeElement;
|
|
1991
|
-
setTimeout(() => {
|
|
1992
|
-
closeButtonRef.current?.focus();
|
|
1993
|
-
}, 100);
|
|
1994
|
-
return () => {
|
|
1995
|
-
if (previousActiveElement.current) {
|
|
1996
|
-
previousActiveElement.current.focus();
|
|
1997
|
-
}
|
|
1998
|
-
};
|
|
1999
|
-
}, [isOpen]);
|
|
2000
|
-
useEffect(() => {
|
|
2001
|
-
if (!isOpen) return;
|
|
2002
|
-
const handleKeyDown = (e) => {
|
|
2003
|
-
if (e.key === "Escape") {
|
|
2004
|
-
onClose();
|
|
2005
|
-
}
|
|
2006
|
-
};
|
|
2007
|
-
document.addEventListener("keydown", handleKeyDown);
|
|
2008
|
-
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
2009
|
-
}, [isOpen, onClose]);
|
|
2010
|
-
if (!isOpen) return null;
|
|
2011
|
-
const handleBackdropClick = (e) => {
|
|
2012
|
-
if (e.target === e.currentTarget) {
|
|
2013
|
-
onClose();
|
|
2014
|
-
}
|
|
2015
|
-
};
|
|
2016
|
-
return /* @__PURE__ */ jsx(
|
|
2017
|
-
"div",
|
|
2018
|
-
{
|
|
2019
|
-
className: "fixed inset-0 bg-black/70 backdrop-blur-xl flex items-center justify-center z-50 p-2 sm:p-4",
|
|
2020
|
-
onClick: handleBackdropClick,
|
|
2021
|
-
role: "dialog",
|
|
2022
|
-
"aria-modal": "true",
|
|
2023
|
-
"aria-label": "Broadcast player",
|
|
2024
|
-
children: /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-7xl max-h-[95vh] sm:max-h-[90vh] overflow-hidden", children: [
|
|
2025
|
-
/* @__PURE__ */ jsx(
|
|
2026
|
-
"button",
|
|
2027
|
-
{
|
|
2028
|
-
ref: closeButtonRef,
|
|
2029
|
-
onClick: onClose,
|
|
2030
|
-
className: "absolute top-2 right-2 sm:top-4 sm:right-4 z-10 text-gray-400 hover:text-white text-2xl leading-none transition-colors w-8 h-8 flex items-center justify-center bg-black/50 rounded-full",
|
|
2031
|
-
title: "Close (ESC)",
|
|
2032
|
-
"aria-label": "Close player",
|
|
2033
|
-
children: "\xD7"
|
|
2034
|
-
}
|
|
2035
|
-
),
|
|
2036
|
-
/* @__PURE__ */ jsx(
|
|
2037
|
-
BroadcastPlayer,
|
|
2038
|
-
{
|
|
2039
|
-
broadcast,
|
|
2040
|
-
appId,
|
|
2041
|
-
contentId,
|
|
2042
|
-
foreignId,
|
|
2043
|
-
foreignTier,
|
|
2044
|
-
renderClipCreator,
|
|
2045
|
-
className,
|
|
2046
|
-
enableKeyboardShortcuts,
|
|
2047
|
-
onError: (error) => {
|
|
2048
|
-
debug.error("[BroadcastPlayerModal] Player error:", error);
|
|
2049
|
-
}
|
|
2050
|
-
}
|
|
2051
|
-
)
|
|
2052
|
-
] })
|
|
2053
|
-
}
|
|
2054
|
-
);
|
|
2055
|
-
}
|
|
2056
|
-
var BroadcastPlayerErrorBoundary = class extends Component {
|
|
1977
|
+
var DialtribePlayerErrorBoundary = class extends Component {
|
|
2057
1978
|
constructor(props) {
|
|
2058
1979
|
super(props);
|
|
2059
1980
|
this.handleReset = () => {
|
|
@@ -2179,6 +2100,84 @@ var BroadcastPlayerErrorBoundary = class extends Component {
|
|
|
2179
2100
|
return this.props.children;
|
|
2180
2101
|
}
|
|
2181
2102
|
};
|
|
2103
|
+
var overlayStyles = {
|
|
2104
|
+
modal: {
|
|
2105
|
+
backdrop: "bg-black/70 backdrop-blur-xl p-2 sm:p-4",
|
|
2106
|
+
container: "max-w-7xl max-h-[95vh] sm:max-h-[90vh]"
|
|
2107
|
+
},
|
|
2108
|
+
fullscreen: {
|
|
2109
|
+
backdrop: "bg-black",
|
|
2110
|
+
container: "h-full"
|
|
2111
|
+
}
|
|
2112
|
+
};
|
|
2113
|
+
function DialtribeOverlay({
|
|
2114
|
+
isOpen,
|
|
2115
|
+
onClose,
|
|
2116
|
+
mode = "modal",
|
|
2117
|
+
children,
|
|
2118
|
+
ariaLabel = "Dialog",
|
|
2119
|
+
showCloseButton = true,
|
|
2120
|
+
closeOnBackdropClick = true,
|
|
2121
|
+
closeOnEsc = true
|
|
2122
|
+
}) {
|
|
2123
|
+
const closeButtonRef = useRef(null);
|
|
2124
|
+
const previousActiveElement = useRef(null);
|
|
2125
|
+
useEffect(() => {
|
|
2126
|
+
if (!isOpen) return;
|
|
2127
|
+
previousActiveElement.current = document.activeElement;
|
|
2128
|
+
setTimeout(() => {
|
|
2129
|
+
closeButtonRef.current?.focus();
|
|
2130
|
+
}, 100);
|
|
2131
|
+
return () => {
|
|
2132
|
+
if (previousActiveElement.current) {
|
|
2133
|
+
previousActiveElement.current.focus();
|
|
2134
|
+
}
|
|
2135
|
+
};
|
|
2136
|
+
}, [isOpen]);
|
|
2137
|
+
useEffect(() => {
|
|
2138
|
+
if (!isOpen || !closeOnEsc) return;
|
|
2139
|
+
const handleKeyDown = (e) => {
|
|
2140
|
+
if (e.key === "Escape") {
|
|
2141
|
+
onClose();
|
|
2142
|
+
}
|
|
2143
|
+
};
|
|
2144
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
2145
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
2146
|
+
}, [isOpen, onClose, closeOnEsc]);
|
|
2147
|
+
if (!isOpen) {
|
|
2148
|
+
return null;
|
|
2149
|
+
}
|
|
2150
|
+
const handleBackdropClick = (e) => {
|
|
2151
|
+
if (closeOnBackdropClick && e.target === e.currentTarget) {
|
|
2152
|
+
onClose();
|
|
2153
|
+
}
|
|
2154
|
+
};
|
|
2155
|
+
const styles = overlayStyles[mode];
|
|
2156
|
+
return /* @__PURE__ */ jsx(
|
|
2157
|
+
"div",
|
|
2158
|
+
{
|
|
2159
|
+
className: `fixed inset-0 flex items-center justify-center z-50 ${styles.backdrop}`,
|
|
2160
|
+
onClick: handleBackdropClick,
|
|
2161
|
+
role: "dialog",
|
|
2162
|
+
"aria-modal": "true",
|
|
2163
|
+
"aria-label": ariaLabel,
|
|
2164
|
+
children: /* @__PURE__ */ jsxs("div", { className: `relative w-full overflow-hidden ${styles.container}`, children: [
|
|
2165
|
+
showCloseButton && /* @__PURE__ */ jsx(
|
|
2166
|
+
"button",
|
|
2167
|
+
{
|
|
2168
|
+
ref: closeButtonRef,
|
|
2169
|
+
onClick: onClose,
|
|
2170
|
+
className: "absolute top-2 right-2 sm:top-4 sm:right-4 z-10 text-gray-400 hover:text-white text-2xl leading-none transition-colors w-8 h-8 flex items-center justify-center bg-black/50 rounded-full",
|
|
2171
|
+
title: "Close (ESC)",
|
|
2172
|
+
"aria-label": "Close",
|
|
2173
|
+
children: "\xD7"
|
|
2174
|
+
}
|
|
2175
|
+
),
|
|
2176
|
+
children
|
|
2177
|
+
] })
|
|
2178
|
+
}
|
|
2179
|
+
);
|
|
2180
|
+
}
|
|
2182
2181
|
|
|
2183
2182
|
// src/utils/media-constraints.ts
|
|
2184
2183
|
function getMediaConstraints(options) {
|
|
@@ -3065,7 +3064,7 @@ function StreamKeyInput({ onSubmit, inline = false }) {
|
|
|
3065
3064
|
] })
|
|
3066
3065
|
] }) });
|
|
3067
3066
|
}
|
|
3068
|
-
function
|
|
3067
|
+
function DialtribeStreamer({
|
|
3069
3068
|
sessionToken: propSessionToken,
|
|
3070
3069
|
streamKey: initialStreamKey,
|
|
3071
3070
|
onDone,
|
|
@@ -3074,9 +3073,9 @@ function BroadcastStreamer({
|
|
|
3074
3073
|
apiBaseUrl = DIALTRIBE_API_BASE,
|
|
3075
3074
|
inline = false
|
|
3076
3075
|
}) {
|
|
3077
|
-
const containerClass = inline ? "dialtribe-
|
|
3078
|
-
const centeredContainerClass = inline ? "dialtribe-
|
|
3079
|
-
const dialTribeContext =
|
|
3076
|
+
const containerClass = inline ? "dialtribe-dialtribe-streamer h-full w-full bg-black relative" : "dialtribe-dialtribe-streamer min-h-screen bg-black";
|
|
3077
|
+
const centeredContainerClass = inline ? "dialtribe-dialtribe-streamer flex items-center justify-center h-full w-full p-4 bg-black relative" : "dialtribe-dialtribe-streamer flex items-center justify-center min-h-screen p-4 bg-black";
|
|
3078
|
+
const dialTribeContext = useDialtribeOptional();
|
|
3080
3079
|
const sessionToken = propSessionToken ?? dialTribeContext?.sessionToken ?? null;
|
|
3081
3080
|
const [streamKey, setStreamKey] = useState(initialStreamKey || null);
|
|
3082
3081
|
const [state, setState] = useState("idle");
|
|
@@ -3460,36 +3459,9 @@ function BroadcastStreamer({
|
|
|
3460
3459
|
}
|
|
3461
3460
|
};
|
|
3462
3461
|
if (!sessionToken) {
|
|
3463
|
-
return /* @__PURE__ */ jsx("div", { className: centeredContainerClass, children: /* @__PURE__ */ jsxs("div", { className: "
|
|
3464
|
-
/* @__PURE__ */ jsx("div", { className: "w-16 h-16
|
|
3465
|
-
|
|
3466
|
-
{
|
|
3467
|
-
className: "w-8 h-8 text-red-600 dark:text-red-400",
|
|
3468
|
-
fill: "none",
|
|
3469
|
-
stroke: "currentColor",
|
|
3470
|
-
viewBox: "0 0 24 24",
|
|
3471
|
-
children: /* @__PURE__ */ jsx(
|
|
3472
|
-
"path",
|
|
3473
|
-
{
|
|
3474
|
-
strokeLinecap: "round",
|
|
3475
|
-
strokeLinejoin: "round",
|
|
3476
|
-
strokeWidth: 2,
|
|
3477
|
-
d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
|
3478
|
-
}
|
|
3479
|
-
)
|
|
3480
|
-
}
|
|
3481
|
-
) }),
|
|
3482
|
-
/* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-black dark:text-white mb-2", children: "Authentication Required" }),
|
|
3483
|
-
/* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-4", children: "A session token is required to use the broadcast streamer." }),
|
|
3484
|
-
/* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 mb-6", children: "Wrap your app with DialTribeProvider or pass a sessionToken prop." }),
|
|
3485
|
-
/* @__PURE__ */ jsx(
|
|
3486
|
-
"button",
|
|
3487
|
-
{
|
|
3488
|
-
onClick: handleDone,
|
|
3489
|
-
className: "w-full px-6 py-2 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-black dark:text-white font-medium rounded-lg transition-colors",
|
|
3490
|
-
children: "Close"
|
|
3491
|
-
}
|
|
3492
|
-
)
|
|
3462
|
+
return /* @__PURE__ */ jsx("div", { className: centeredContainerClass, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
|
|
3463
|
+
/* @__PURE__ */ jsx("div", { className: "w-16 h-16 border-4 border-gray-700 border-t-blue-600 rounded-full animate-spin mx-auto mb-4" }),
|
|
3464
|
+
/* @__PURE__ */ jsx("p", { className: "text-white text-lg", children: "Connecting..." })
|
|
3493
3465
|
] }) });
|
|
3494
3466
|
}
|
|
3495
3467
|
if (!streamKey) {
|
|
@@ -3668,7 +3640,7 @@ function BroadcastStreamer({
|
|
|
3668
3640
|
] });
|
|
3669
3641
|
}
|
|
3670
3642
|
|
|
3671
|
-
// src/utils/
|
|
3643
|
+
// src/utils/dialtribe-popup.ts
|
|
3672
3644
|
function calculatePopupDimensions() {
|
|
3673
3645
|
const screenWidth = window.screen.width;
|
|
3674
3646
|
const screenHeight = window.screen.height;
|
|
@@ -3686,26 +3658,22 @@ function calculatePopupDimensions() {
|
|
|
3686
3658
|
const top = Math.floor((screenHeight - height) / 2);
|
|
3687
3659
|
return { width, height, left, top };
|
|
3688
3660
|
}
|
|
3689
|
-
function
|
|
3661
|
+
function openDialtribeStreamerPopup(options) {
|
|
3690
3662
|
const {
|
|
3691
3663
|
sessionToken,
|
|
3692
3664
|
streamKey,
|
|
3665
|
+
streamerUrl,
|
|
3693
3666
|
appId,
|
|
3694
|
-
|
|
3695
|
-
additionalParams,
|
|
3696
|
-
baseUrl = "/broadcasts/new"
|
|
3667
|
+
additionalParams
|
|
3697
3668
|
} = options;
|
|
3698
3669
|
const { width, height, left, top } = calculatePopupDimensions();
|
|
3699
3670
|
const params = new URLSearchParams();
|
|
3700
|
-
if (mode) {
|
|
3701
|
-
params.append("mode", mode);
|
|
3702
|
-
}
|
|
3703
3671
|
if (additionalParams) {
|
|
3704
3672
|
Object.entries(additionalParams).forEach(([key, value]) => {
|
|
3705
3673
|
params.append(key, value);
|
|
3706
3674
|
});
|
|
3707
3675
|
}
|
|
3708
|
-
const url = `${
|
|
3676
|
+
const url = `${streamerUrl}${params.toString() ? `?${params.toString()}` : ""}`;
|
|
3709
3677
|
const popup = window.open(
|
|
3710
3678
|
url,
|
|
3711
3679
|
"_blank",
|
|
@@ -3735,8 +3703,167 @@ function openBroadcastStreamerPopup(options) {
|
|
|
3735
3703
|
setTimeout(sendMessage, 500);
|
|
3736
3704
|
return popup;
|
|
3737
3705
|
}
|
|
3738
|
-
var openBroadcastPopup =
|
|
3706
|
+
var openBroadcastPopup = openDialtribeStreamerPopup;
|
|
3707
|
+
function useDialtribeStreamerPopup() {
|
|
3708
|
+
const [sessionToken, setSessionToken] = useState(null);
|
|
3709
|
+
const [streamKey, setStreamKey] = useState(null);
|
|
3710
|
+
const [apiBaseUrl, setApiBaseUrl] = useState("");
|
|
3711
|
+
const receivedDataRef = useRef(false);
|
|
3712
|
+
useEffect(() => {
|
|
3713
|
+
const handleMessage = (event) => {
|
|
3714
|
+
if (event.data?.type !== "STREAM_KEY") return;
|
|
3715
|
+
const { sessionToken: token, streamKey: key, apiBaseUrl: url } = event.data;
|
|
3716
|
+
if (token && key) {
|
|
3717
|
+
receivedDataRef.current = true;
|
|
3718
|
+
setSessionToken(token);
|
|
3719
|
+
setStreamKey(key);
|
|
3720
|
+
if (url) {
|
|
3721
|
+
setApiBaseUrl(url);
|
|
3722
|
+
}
|
|
3723
|
+
} else if (key) {
|
|
3724
|
+
receivedDataRef.current = true;
|
|
3725
|
+
setStreamKey(key);
|
|
3726
|
+
}
|
|
3727
|
+
};
|
|
3728
|
+
window.addEventListener("message", handleMessage);
|
|
3729
|
+
const requestCredentials = () => {
|
|
3730
|
+
if (window.opener && !receivedDataRef.current) {
|
|
3731
|
+
window.opener.postMessage({ type: "POPUP_READY" }, "*");
|
|
3732
|
+
}
|
|
3733
|
+
};
|
|
3734
|
+
requestCredentials();
|
|
3735
|
+
const pollInterval = setInterval(() => {
|
|
3736
|
+
if (!receivedDataRef.current) {
|
|
3737
|
+
requestCredentials();
|
|
3738
|
+
} else {
|
|
3739
|
+
clearInterval(pollInterval);
|
|
3740
|
+
}
|
|
3741
|
+
}, 200);
|
|
3742
|
+
const timeout = setTimeout(() => {
|
|
3743
|
+
clearInterval(pollInterval);
|
|
3744
|
+
}, 1e4);
|
|
3745
|
+
return () => {
|
|
3746
|
+
window.removeEventListener("message", handleMessage);
|
|
3747
|
+
clearInterval(pollInterval);
|
|
3748
|
+
clearTimeout(timeout);
|
|
3749
|
+
};
|
|
3750
|
+
}, []);
|
|
3751
|
+
return {
|
|
3752
|
+
sessionToken,
|
|
3753
|
+
streamKey,
|
|
3754
|
+
apiBaseUrl,
|
|
3755
|
+
setStreamKey,
|
|
3756
|
+
isReady: receivedDataRef.current
|
|
3757
|
+
};
|
|
3758
|
+
}
|
|
3759
|
+
function useDialtribeStreamerLauncher(options) {
|
|
3760
|
+
const {
|
|
3761
|
+
sessionToken,
|
|
3762
|
+
streamKey,
|
|
3763
|
+
streamerUrl,
|
|
3764
|
+
apiBaseUrl,
|
|
3765
|
+
fallback = "fullscreen",
|
|
3766
|
+
onPopupBlocked,
|
|
3767
|
+
onDone,
|
|
3768
|
+
onStreamKeyChange
|
|
3769
|
+
} = options;
|
|
3770
|
+
const [showFallback, setShowFallback] = useState(false);
|
|
3771
|
+
const [wasBlocked, setWasBlocked] = useState(false);
|
|
3772
|
+
const popupRef = useRef(null);
|
|
3773
|
+
const sessionTokenRef = useRef(sessionToken);
|
|
3774
|
+
const streamKeyRef = useRef(streamKey);
|
|
3775
|
+
const apiBaseUrlRef = useRef(apiBaseUrl);
|
|
3776
|
+
useEffect(() => {
|
|
3777
|
+
sessionTokenRef.current = sessionToken;
|
|
3778
|
+
}, [sessionToken]);
|
|
3779
|
+
useEffect(() => {
|
|
3780
|
+
streamKeyRef.current = streamKey;
|
|
3781
|
+
}, [streamKey]);
|
|
3782
|
+
useEffect(() => {
|
|
3783
|
+
apiBaseUrlRef.current = apiBaseUrl;
|
|
3784
|
+
}, [apiBaseUrl]);
|
|
3785
|
+
useEffect(() => {
|
|
3786
|
+
const handleMessage = (event) => {
|
|
3787
|
+
if (event.data?.type === "POPUP_READY" && popupRef.current) {
|
|
3788
|
+
popupRef.current.postMessage(
|
|
3789
|
+
{
|
|
3790
|
+
type: "STREAM_KEY",
|
|
3791
|
+
sessionToken: sessionTokenRef.current,
|
|
3792
|
+
streamKey: streamKeyRef.current,
|
|
3793
|
+
apiBaseUrl: apiBaseUrlRef.current
|
|
3794
|
+
},
|
|
3795
|
+
"*"
|
|
3796
|
+
);
|
|
3797
|
+
}
|
|
3798
|
+
};
|
|
3799
|
+
window.addEventListener("message", handleMessage);
|
|
3800
|
+
return () => window.removeEventListener("message", handleMessage);
|
|
3801
|
+
}, []);
|
|
3802
|
+
const launch = useCallback(() => {
|
|
3803
|
+
if (!sessionToken) {
|
|
3804
|
+
console.warn("Cannot launch streamer: no session token");
|
|
3805
|
+
return;
|
|
3806
|
+
}
|
|
3807
|
+
setWasBlocked(false);
|
|
3808
|
+
const popup = openDialtribeStreamerPopup({
|
|
3809
|
+
sessionToken,
|
|
3810
|
+
streamKey,
|
|
3811
|
+
streamerUrl
|
|
3812
|
+
});
|
|
3813
|
+
if (popup) {
|
|
3814
|
+
popupRef.current = popup;
|
|
3815
|
+
return;
|
|
3816
|
+
}
|
|
3817
|
+
setWasBlocked(true);
|
|
3818
|
+
onPopupBlocked?.();
|
|
3819
|
+
switch (fallback) {
|
|
3820
|
+
case "fullscreen":
|
|
3821
|
+
setShowFallback(true);
|
|
3822
|
+
break;
|
|
3823
|
+
case "newTab":
|
|
3824
|
+
window.open(streamerUrl, "_blank");
|
|
3825
|
+
break;
|
|
3826
|
+
}
|
|
3827
|
+
}, [sessionToken, streamKey, streamerUrl, fallback, onPopupBlocked]);
|
|
3828
|
+
const closeFallback = useCallback(() => {
|
|
3829
|
+
setShowFallback(false);
|
|
3830
|
+
onDone?.();
|
|
3831
|
+
}, [onDone]);
|
|
3832
|
+
const Fallback = useCallback(() => {
|
|
3833
|
+
if (fallback !== "fullscreen" || !showFallback) {
|
|
3834
|
+
return null;
|
|
3835
|
+
}
|
|
3836
|
+
if (typeof document === "undefined") {
|
|
3837
|
+
return null;
|
|
3838
|
+
}
|
|
3839
|
+
const streamerElement = React2.createElement(DialtribeStreamer, {
|
|
3840
|
+
sessionToken: sessionToken || void 0,
|
|
3841
|
+
streamKey: streamKey || void 0,
|
|
3842
|
+
apiBaseUrl,
|
|
3843
|
+
onDone: closeFallback,
|
|
3844
|
+
onStreamKeyChange
|
|
3845
|
+
});
|
|
3846
|
+
const overlayElement = React2.createElement(
|
|
3847
|
+
DialtribeOverlay,
|
|
3848
|
+
{
|
|
3849
|
+
mode: "fullscreen",
|
|
3850
|
+
isOpen: true,
|
|
3851
|
+
onClose: closeFallback,
|
|
3852
|
+
children: streamerElement
|
|
3853
|
+
}
|
|
3854
|
+
);
|
|
3855
|
+
return createPortal(overlayElement, document.body);
|
|
3856
|
+
}, [fallback, showFallback, closeFallback, sessionToken, streamKey, apiBaseUrl, onStreamKeyChange]);
|
|
3857
|
+
return {
|
|
3858
|
+
launch,
|
|
3859
|
+
Fallback,
|
|
3860
|
+
showFallback,
|
|
3861
|
+
closeFallback,
|
|
3862
|
+
popupRef: popupRef.current,
|
|
3863
|
+
wasBlocked
|
|
3864
|
+
};
|
|
3865
|
+
}
|
|
3739
3866
|
|
|
3740
|
-
export { AudioWaveform,
|
|
3867
|
+
export { AudioWaveform, CDN_DOMAIN, DEFAULT_ENCODER_SERVER_URL, DIALTRIBE_API_BASE, DialtribeClient, DialtribeOverlay, DialtribePlayer, DialtribePlayerErrorBoundary, DialtribeProvider, DialtribeStreamer, ENDPOINTS, HTTP_STATUS, HelloWorld, LoadingSpinner, StreamKeyDisplay, StreamKeyInput, StreamingControls, StreamingPreview, WebSocketStreamer, buildBroadcastCdnUrl, buildBroadcastS3KeyPrefix, calculatePopupDimensions, checkBrowserCompatibility, formatTime, getMediaConstraints, getMediaRecorderOptions, openBroadcastPopup, openDialtribeStreamerPopup, useDialtribe, useDialtribeStreamerLauncher, useDialtribeStreamerPopup };
|
|
3741
3868
|
//# sourceMappingURL=index.mjs.map
|
|
3742
3869
|
//# sourceMappingURL=index.mjs.map
|