@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/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 DialTribeContext = createContext(null);
25
- function DialTribeProvider({
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(DialTribeContext.Provider, { value, children });
62
+ return /* @__PURE__ */ jsx(DialtribeContext.Provider, { value, children });
62
63
  }
63
- function useDialTribe() {
64
- const context = useContext(DialTribeContext);
64
+ function useDialtribe() {
65
+ const context = useContext(DialtribeContext);
65
66
  if (!context) {
66
67
  throw new Error(
67
- 'useDialTribe must be used within a DialTribeProvider. Wrap your app with <DialTribeProvider sessionToken="sess_xxx">...</DialTribeProvider>'
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 useDialTribeOptional() {
73
- return useContext(DialTribeContext);
73
+ function useDialtribeOptional() {
74
+ return useContext(DialtribeContext);
74
75
  }
75
76
 
76
- // src/client/DialTribeClient.ts
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
- sessionStart: `${baseUrl}/session/start`,
91
- sessionPing: `${baseUrl}/session/ping`
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 DialTribeClient = class {
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 DialTribe API
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.sessionStart, {
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.sessionPing, {
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 BroadcastPlayer({
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 } = useDialTribe();
779
+ const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialtribe();
778
780
  const clientRef = useRef(null);
779
781
  if (!clientRef.current && sessionToken) {
780
- clientRef.current = new DialTribeClient({
782
+ clientRef.current = new DialtribeClient({
781
783
  sessionToken,
782
784
  apiBaseUrl,
783
785
  onTokenRefresh: (newToken, expiresAt) => {
784
- debug.log(`[DialTribeClient] Token refreshed, expires at ${expiresAt}`);
786
+ debug.log(`[DialtribeClient] Token refreshed, expires at ${expiresAt}`);
785
787
  setSessionToken(newToken, expiresAt);
786
788
  },
787
789
  onTokenExpired: () => {
788
- debug.error("[DialTribeClient] Token expired");
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("[BroadcastPlayer] Error getting internal player:", 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
- return /* @__PURE__ */ jsxs("div", { className: `bg-black rounded-lg shadow-2xl w-full max-h-full flex flex-col overflow-hidden ${className}`, children: [
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
- function BroadcastPlayerModal({
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 BroadcastStreamer({
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-broadcast-streamer h-full w-full bg-black relative" : "dialtribe-broadcast-streamer min-h-screen bg-black";
3078
- const centeredContainerClass = inline ? "dialtribe-broadcast-streamer flex items-center justify-center h-full w-full p-4 bg-black relative" : "dialtribe-broadcast-streamer flex items-center justify-center min-h-screen p-4 bg-black";
3079
- const dialTribeContext = useDialTribeOptional();
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: "bg-white dark:bg-zinc-900 rounded-lg border border-gray-200 dark:border-zinc-800 p-8 max-w-md w-full text-center", children: [
3464
- /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsx(
3465
- "svg",
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/broadcast-popup.ts
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 openBroadcastStreamerPopup(options) {
3661
+ function openDialtribeStreamerPopup(options) {
3690
3662
  const {
3691
3663
  sessionToken,
3692
3664
  streamKey,
3665
+ streamerUrl,
3693
3666
  appId,
3694
- mode,
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 = `${baseUrl}${params.toString() ? `?${params.toString()}` : ""}`;
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 = openBroadcastStreamerPopup;
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, BroadcastPlayer, BroadcastPlayerErrorBoundary, BroadcastPlayerModal, BroadcastStreamer, CDN_DOMAIN, DEFAULT_ENCODER_SERVER_URL, DIALTRIBE_API_BASE, DialTribeClient, DialTribeProvider, ENDPOINTS, HTTP_STATUS, HelloWorld, LoadingSpinner, StreamKeyDisplay, StreamKeyInput, StreamingControls, StreamingPreview, WebSocketStreamer, buildBroadcastCdnUrl, buildBroadcastS3KeyPrefix, calculatePopupDimensions, checkBrowserCompatibility, formatTime, getMediaConstraints, getMediaRecorderOptions, openBroadcastPopup, openBroadcastStreamerPopup, useDialTribe };
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