@100mslive/roomkit-react 0.1.8-alpha.0 → 0.1.8
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/{HLSView-IQRPLYNH.js → HLSView-DDGPZHA2.js} +3 -3
- package/dist/Prebuilt/App.d.ts +1 -0
- package/dist/Prebuilt/AppContext.d.ts +1 -0
- package/dist/Prebuilt/components/Footer/PaginatedParticipants.d.ts +5 -0
- package/dist/Prebuilt/components/Footer/RoleAccordion.d.ts +10 -3
- package/dist/Prebuilt/components/Notifications/HeadlessEndRoomListener.d.ts +2 -0
- package/dist/Prebuilt/components/PrebuiltTileElements.d.ts +2198 -0
- package/dist/{VirtualBackground-GP4ATXD3.js → VirtualBackground-UVZJVOA2.js} +3 -3
- package/dist/{chunk-Z3O2WGWV.js → chunk-6SQTFOK6.js} +2 -2
- package/dist/{chunk-Z3O2WGWV.js.map → chunk-6SQTFOK6.js.map} +1 -1
- package/dist/{chunk-2H5NIZB7.js → chunk-HUMNPIYI.js} +2 -2
- package/dist/{chunk-GLYGPYNS.js → chunk-PRM33R4R.js} +286 -251
- package/dist/chunk-PRM33R4R.js.map +7 -0
- package/dist/{conference-JD35TNH4.js → conference-N7S47TDK.js} +484 -385
- package/dist/conference-N7S47TDK.js.map +7 -0
- package/dist/index.cjs.js +1895 -1727
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +2 -2
- package/dist/meta.cjs.json +234 -42
- package/dist/meta.esbuild.json +267 -74
- package/package.json +6 -6
- package/src/AudioLevel/AudioLevel.tsx +1 -1
- package/src/Prebuilt/App.tsx +5 -0
- package/src/Prebuilt/AppContext.tsx +2 -0
- package/src/Prebuilt/common/constants.js +1 -1
- package/src/Prebuilt/components/AppData/AppData.jsx +1 -1
- package/src/Prebuilt/components/AppData/useUISettings.js +1 -1
- package/src/Prebuilt/components/Chip.tsx +6 -2
- package/src/Prebuilt/components/Footer/PaginatedParticipants.tsx +94 -0
- package/src/Prebuilt/components/Footer/ParticipantList.jsx +53 -23
- package/src/Prebuilt/components/Footer/RoleAccordion.tsx +86 -84
- package/src/Prebuilt/components/Footer/RoleOptions.tsx +1 -1
- package/src/Prebuilt/components/Notifications/HeadlessEndRoomListener.tsx +23 -0
- package/src/Prebuilt/components/Notifications/Notifications.jsx +1 -1
- package/src/Prebuilt/components/PrebuiltTileElements.tsx +5 -0
- package/src/Prebuilt/components/Preview/PreviewJoin.tsx +9 -6
- package/src/Prebuilt/components/SidePaneTabs.tsx +31 -5
- package/src/Prebuilt/components/VideoTile.jsx +19 -34
- package/src/Prebuilt/components/conference.jsx +4 -3
- package/src/Prebuilt/components/hooks/useDropdownSelection.jsx +1 -1
- package/src/Prebuilt/layouts/SidePane.tsx +1 -0
- package/dist/chunk-GLYGPYNS.js.map +0 -7
- package/dist/conference-JD35TNH4.js.map +0 -7
- /package/dist/{HLSView-IQRPLYNH.js.map → HLSView-DDGPZHA2.js.map} +0 -0
- /package/dist/{VirtualBackground-GP4ATXD3.js.map → VirtualBackground-UVZJVOA2.js.map} +0 -0
- /package/dist/{chunk-2H5NIZB7.js.map → chunk-HUMNPIYI.js.map} +0 -0
@@ -35,7 +35,7 @@ import {
|
|
35
35
|
textEllipsis,
|
36
36
|
theme,
|
37
37
|
toastAnimation
|
38
|
-
} from "./chunk-
|
38
|
+
} from "./chunk-6SQTFOK6.js";
|
39
39
|
|
40
40
|
// src/Button/Button.tsx
|
41
41
|
import React2 from "react";
|
@@ -1275,7 +1275,7 @@ var barAnimation = keyframes({
|
|
1275
1275
|
to: {
|
1276
1276
|
maskSize: "4em .8em",
|
1277
1277
|
"-webkit-mask-position-y": ".1em",
|
1278
|
-
maskPosition: "initial 0"
|
1278
|
+
maskPosition: "initial 0.1em"
|
1279
1279
|
}
|
1280
1280
|
});
|
1281
1281
|
var AudioBar = () => {
|
@@ -2064,7 +2064,7 @@ var Collapsible = {
|
|
2064
2064
|
};
|
2065
2065
|
|
2066
2066
|
// src/Prebuilt/App.tsx
|
2067
|
-
import
|
2067
|
+
import React59, { Suspense as Suspense2, useEffect as useEffect29, useRef as useRef10 } from "react";
|
2068
2068
|
import { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams as useParams5 } from "react-router-dom";
|
2069
2069
|
import {
|
2070
2070
|
HMSReactiveStore,
|
@@ -2203,7 +2203,7 @@ var APP_DATA = {
|
|
2203
2203
|
pdfConfig: "pdfConfig",
|
2204
2204
|
minimiseInset: "minimiseInset",
|
2205
2205
|
activeScreensharePeerId: "activeScreensharePeerId",
|
2206
|
-
|
2206
|
+
disableNotifications: "disableNotifications"
|
2207
2207
|
};
|
2208
2208
|
var UI_SETTINGS = {
|
2209
2209
|
isAudioOnly: "isAudioOnly",
|
@@ -2329,7 +2329,7 @@ var useSubscribedNotifications = (notificationKey) => {
|
|
2329
2329
|
return notificationPreference;
|
2330
2330
|
};
|
2331
2331
|
var useIsNotificationDisabled = () => {
|
2332
|
-
const notificationPreference = useHMSStore3(selectAppDataByPath(APP_DATA.
|
2332
|
+
const notificationPreference = useHMSStore3(selectAppDataByPath(APP_DATA.disableNotifications));
|
2333
2333
|
return notificationPreference;
|
2334
2334
|
};
|
2335
2335
|
var useSetSubscribedNotifications = (notificationKey) => {
|
@@ -2428,7 +2428,7 @@ var initialAppData = {
|
|
2428
2428
|
[APP_DATA.authToken]: "",
|
2429
2429
|
[APP_DATA.minimiseInset]: false,
|
2430
2430
|
[APP_DATA.activeScreensharePeerId]: "",
|
2431
|
-
[APP_DATA.
|
2431
|
+
[APP_DATA.disableNotifications]: false
|
2432
2432
|
};
|
2433
2433
|
var AppData = React16.memo(({ appDetails, tokenEndpoint }) => {
|
2434
2434
|
const hmsActions = useHMSActions3();
|
@@ -2539,7 +2539,8 @@ var HMSPrebuiltContext = React17.createContext({
|
|
2539
2539
|
userName: "",
|
2540
2540
|
userId: "",
|
2541
2541
|
endpoints: {},
|
2542
|
-
onLeave: void 0
|
2542
|
+
onLeave: void 0,
|
2543
|
+
onJoin: void 0
|
2543
2544
|
});
|
2544
2545
|
HMSPrebuiltContext.displayName = "HMSPrebuiltContext";
|
2545
2546
|
var useHMSPrebuiltContext = () => {
|
@@ -4374,32 +4375,50 @@ function Notifications() {
|
|
4374
4375
|
return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(TrackUnmuteModal, null), /* @__PURE__ */ React32.createElement(TrackBulkUnmuteModal, null), /* @__PURE__ */ React32.createElement(TrackNotifications, null), roomState === HMSRoomState2.Connected ? /* @__PURE__ */ React32.createElement(PeerNotifications, null) : null, /* @__PURE__ */ React32.createElement(ReconnectNotifications, null), /* @__PURE__ */ React32.createElement(AutoplayBlockedModal, null), /* @__PURE__ */ React32.createElement(PermissionErrorModal, null), /* @__PURE__ */ React32.createElement(InitErrorModal, { notification }));
|
4375
4376
|
}
|
4376
4377
|
|
4378
|
+
// src/Prebuilt/components/Notifications/HeadlessEndRoomListener.tsx
|
4379
|
+
import React33, { useEffect as useEffect18 } from "react";
|
4380
|
+
import { HMSNotificationTypes as HMSNotificationTypes8, useHMSNotifications as useHMSNotifications8 } from "@100mslive/react-sdk";
|
4381
|
+
function HeadlessEndRoomListener() {
|
4382
|
+
const notification = useHMSNotifications8();
|
4383
|
+
const isNotificationDisabled = useIsNotificationDisabled();
|
4384
|
+
const { redirectToLeave } = useRedirectToLeave();
|
4385
|
+
useEffect18(() => {
|
4386
|
+
if (!notification || !isNotificationDisabled) {
|
4387
|
+
return;
|
4388
|
+
}
|
4389
|
+
if ([HMSNotificationTypes8.ROOM_ENDED, HMSNotificationTypes8.REMOVED_FROM_ROOM].includes(notification.type)) {
|
4390
|
+
redirectToLeave(1e3);
|
4391
|
+
}
|
4392
|
+
}, [notification]);
|
4393
|
+
return /* @__PURE__ */ React33.createElement(React33.Fragment, null);
|
4394
|
+
}
|
4395
|
+
|
4377
4396
|
// src/Prebuilt/components/PostLeave.jsx
|
4378
|
-
import
|
4397
|
+
import React40 from "react";
|
4379
4398
|
import { useNavigate as useNavigate3, useParams as useParams3 } from "react-router-dom";
|
4380
4399
|
import { ExitIcon } from "@100mslive/react-icons";
|
4381
4400
|
|
4382
4401
|
// src/Prebuilt/components/Header/Header.tsx
|
4383
|
-
import
|
4402
|
+
import React39 from "react";
|
4384
4403
|
import { useMedia as useMedia3 } from "react-use";
|
4385
4404
|
import { HMSRoomState as HMSRoomState4, selectRoomState as selectRoomState4, useHMSStore as useHMSStore16 } from "@100mslive/react-sdk";
|
4386
4405
|
|
4387
4406
|
// src/Prebuilt/components/Header/HeaderComponents.jsx
|
4388
|
-
import
|
4407
|
+
import React34, { useEffect as useEffect19, useState as useState11 } from "react";
|
4389
4408
|
import { selectDominantSpeaker, useHMSStore as useHMSStore8 } from "@100mslive/react-sdk";
|
4390
4409
|
import { VolumeOneIcon } from "@100mslive/react-icons";
|
4391
4410
|
var SpeakerTag = () => {
|
4392
4411
|
const dominantSpeaker = useHMSStore8(selectDominantSpeaker);
|
4393
|
-
return dominantSpeaker && dominantSpeaker.name && /* @__PURE__ */
|
4412
|
+
return dominantSpeaker && dominantSpeaker.name && /* @__PURE__ */ React34.createElement(
|
4394
4413
|
Flex,
|
4395
4414
|
{
|
4396
4415
|
align: "center",
|
4397
4416
|
justify: "center",
|
4398
4417
|
css: { flex: "1 1 0", color: "$on_primary_high", "@md": { display: "none" } }
|
4399
4418
|
},
|
4400
|
-
/* @__PURE__ */
|
4401
|
-
/* @__PURE__ */
|
4402
|
-
/* @__PURE__ */
|
4419
|
+
/* @__PURE__ */ React34.createElement(VerticalDivider, { css: { ml: "$8" } }),
|
4420
|
+
/* @__PURE__ */ React34.createElement(VolumeOneIcon, null),
|
4421
|
+
/* @__PURE__ */ React34.createElement(Text, { variant: "md", css: __spreadProps(__spreadValues({}, textEllipsis(200)), { ml: "$2" }), title: dominantSpeaker.name }, dominantSpeaker.name)
|
4403
4422
|
);
|
4404
4423
|
};
|
4405
4424
|
var LogoImg = styled("img", {
|
@@ -4415,12 +4434,12 @@ var Logo = () => {
|
|
4415
4434
|
const roomLayout = useRoomLayout();
|
4416
4435
|
const logo = (_a7 = roomLayout == null ? void 0 : roomLayout.logo) == null ? void 0 : _a7.url;
|
4417
4436
|
const [hideImage, setHideImage] = useState11(false);
|
4418
|
-
|
4437
|
+
useEffect19(() => {
|
4419
4438
|
if (hideImage) {
|
4420
4439
|
setHideImage(false);
|
4421
4440
|
}
|
4422
4441
|
}, [logo]);
|
4423
|
-
return logo && !hideImage ? /* @__PURE__ */
|
4442
|
+
return logo && !hideImage ? /* @__PURE__ */ React34.createElement(
|
4424
4443
|
LogoImg,
|
4425
4444
|
{
|
4426
4445
|
src: logo,
|
@@ -4434,7 +4453,7 @@ var Logo = () => {
|
|
4434
4453
|
};
|
4435
4454
|
|
4436
4455
|
// src/Prebuilt/components/Header/StreamActions.tsx
|
4437
|
-
import
|
4456
|
+
import React37, { useCallback as useCallback13, useEffect as useEffect21, useRef as useRef6, useState as useState13 } from "react";
|
4438
4457
|
import { useMedia as useMedia2 } from "react-use";
|
4439
4458
|
import {
|
4440
4459
|
HMSRoomState as HMSRoomState3,
|
@@ -4449,7 +4468,7 @@ import {
|
|
4449
4468
|
import { AlertTriangleIcon, CrossIcon as CrossIcon4, RecordIcon } from "@100mslive/react-icons";
|
4450
4469
|
|
4451
4470
|
// src/Sheet/Sheet.tsx
|
4452
|
-
import
|
4471
|
+
import React35 from "react";
|
4453
4472
|
import * as DialogPrimitive2 from "@radix-ui/react-dialog";
|
4454
4473
|
var SheetRoot = styled(DialogPrimitive2.Root, {
|
4455
4474
|
minHeight: "240px",
|
@@ -4523,10 +4542,10 @@ var StyledContent6 = styled(DialogPrimitive2.Content, {
|
|
4523
4542
|
side: "bottom"
|
4524
4543
|
}
|
4525
4544
|
});
|
4526
|
-
var SheetContent =
|
4545
|
+
var SheetContent = React35.forwardRef(
|
4527
4546
|
(_a7, forwardedRef) => {
|
4528
4547
|
var _b7 = _a7, { children } = _b7, props = __objRest(_b7, ["children"]);
|
4529
|
-
return /* @__PURE__ */
|
4548
|
+
return /* @__PURE__ */ React35.createElement(Dialog.Portal, null, /* @__PURE__ */ React35.createElement(StyledOverlay, null), /* @__PURE__ */ React35.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
|
4530
4549
|
}
|
4531
4550
|
);
|
4532
4551
|
var SheetClose = Dialog.Close;
|
@@ -4546,7 +4565,7 @@ var Sheet = {
|
|
4546
4565
|
};
|
4547
4566
|
|
4548
4567
|
// src/Prebuilt/components/Header/AdditionalRoomState.jsx
|
4549
|
-
import
|
4568
|
+
import React36, { useState as useState12 } from "react";
|
4550
4569
|
import { selectLocalPeerID as selectLocalPeerID3, selectPeerSharingVideoPlaylist, useHMSStore as useHMSStore13, useScreenShare } from "@100mslive/react-sdk";
|
4551
4570
|
import {
|
4552
4571
|
AudioPlayerIcon,
|
@@ -4559,7 +4578,7 @@ import {
|
|
4559
4578
|
} from "@100mslive/react-icons";
|
4560
4579
|
|
4561
4580
|
// src/Prebuilt/plugins/whiteboard/useWhiteboardMetadata.js
|
4562
|
-
import { useCallback as useCallback10, useEffect as
|
4581
|
+
import { useCallback as useCallback10, useEffect as useEffect20, useMemo as useMemo2 } from "react";
|
4563
4582
|
import { selectLocalPeerID as selectLocalPeerID2, selectPeerByCondition, useHMSStore as useHMSStore10 } from "@100mslive/react-sdk";
|
4564
4583
|
|
4565
4584
|
// src/Prebuilt/components/hooks/useMetadata.jsx
|
@@ -4641,7 +4660,7 @@ var useWhiteboardMetadata = () => {
|
|
4641
4660
|
console.error("failed to toggle whiteboard to ", !whiteboardOwner, error);
|
4642
4661
|
}
|
4643
4662
|
}), [whiteboardOwner, updateMetaData, amIWhiteboardOwner]);
|
4644
|
-
|
4663
|
+
useEffect20(() => {
|
4645
4664
|
window.toggleWhiteboard = toggleWhiteboard;
|
4646
4665
|
}, [toggleWhiteboard]);
|
4647
4666
|
return {
|
@@ -4755,7 +4774,7 @@ var AdditionalRoomState = () => {
|
|
4755
4774
|
if (isPlaylistInactive && isAudioshareInactive && !shouldShowScreenShareState && !shouldShowVideoState && !whiteboardOwner) {
|
4756
4775
|
return null;
|
4757
4776
|
}
|
4758
|
-
return /* @__PURE__ */
|
4777
|
+
return /* @__PURE__ */ React36.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React36.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React36.createElement(
|
4759
4778
|
Flex,
|
4760
4779
|
{
|
4761
4780
|
align: "center",
|
@@ -4768,13 +4787,13 @@ var AdditionalRoomState = () => {
|
|
4768
4787
|
},
|
4769
4788
|
"data-testid": "record_status_dropdown"
|
4770
4789
|
},
|
4771
|
-
!isAudioshareInactive && /* @__PURE__ */
|
4772
|
-
shouldShowScreenShareState && /* @__PURE__ */
|
4773
|
-
shouldShowVideoState && /* @__PURE__ */
|
4774
|
-
!isPlaylistInactive && /* @__PURE__ */
|
4775
|
-
whiteboardOwner && /* @__PURE__ */
|
4776
|
-
/* @__PURE__ */
|
4777
|
-
)), /* @__PURE__ */
|
4790
|
+
!isAudioshareInactive && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Screenshare Audio" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(MusicIcon, { width: 24, height: 24 }))),
|
4791
|
+
shouldShowScreenShareState && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Screenshare" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(ShareScreenIcon, { width: 24, height: 24 }))),
|
4792
|
+
shouldShowVideoState && /* @__PURE__ */ React36.createElement(Tooltip, { title: "video playlist" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(VideoPlayerIcon, { width: 24, height: 24 }))),
|
4793
|
+
!isPlaylistInactive && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Playlist Music" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(AudioPlayerIcon, { width: 24, height: 24 }))),
|
4794
|
+
whiteboardOwner && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Whiteboard" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(PencilDrawIcon, { width: 24, height: 24 }))),
|
4795
|
+
/* @__PURE__ */ React36.createElement(Box, { css: { "@lg": { display: "none" }, color: "$on_surface_low" } }, open ? /* @__PURE__ */ React36.createElement(ChevronUpIcon2, null) : /* @__PURE__ */ React36.createElement(ChevronDownIcon2, null))
|
4796
|
+
)), /* @__PURE__ */ React36.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { w: "$60" } }, !isPlaylistInactive && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(AudioPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Playlist is playing"), playlist.peer.isLocal ? /* @__PURE__ */ React36.createElement(
|
4778
4797
|
Text,
|
4779
4798
|
{
|
4780
4799
|
variant: "sm",
|
@@ -4785,7 +4804,7 @@ var AdditionalRoomState = () => {
|
|
4785
4804
|
}
|
4786
4805
|
},
|
4787
4806
|
playlist.selection.playing ? "Pause" : "Play"
|
4788
|
-
) : /* @__PURE__ */
|
4807
|
+
) : /* @__PURE__ */ React36.createElement(
|
4789
4808
|
Text,
|
4790
4809
|
{
|
4791
4810
|
variant: "sm",
|
@@ -4796,7 +4815,7 @@ var AdditionalRoomState = () => {
|
|
4796
4815
|
}
|
4797
4816
|
},
|
4798
4817
|
playlist.track.volume === 0 ? "Unmute" : "Mute"
|
4799
|
-
)), !isAudioshareInactive && /* @__PURE__ */
|
4818
|
+
)), !isAudioshareInactive && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(MusicIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Music is playing"), /* @__PURE__ */ React36.createElement(
|
4800
4819
|
Text,
|
4801
4820
|
{
|
4802
4821
|
variant: "sm",
|
@@ -4807,7 +4826,7 @@ var AdditionalRoomState = () => {
|
|
4807
4826
|
}
|
4808
4827
|
},
|
4809
4828
|
screenshareAudio.muted ? "Unmute" : "Mute"
|
4810
|
-
)), shouldShowScreenShareState && /* @__PURE__ */
|
4829
|
+
)), shouldShowScreenShareState && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(ShareScreenIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${screenSharingPeerId === localPeerID ? "You" : screenSharingPeerName}`)), shouldShowVideoState && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(VideoPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${peerSharingPlaylist.id === localPeerID ? "You" : peerSharingPlaylist.name}`)), whiteboardOwner && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(PencilDrawIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Whiteboard Owner - ", whiteboardOwner.name, amIWhiteboardOwner && "(You)"), amIWhiteboardOwner && /* @__PURE__ */ React36.createElement(
|
4811
4830
|
Text,
|
4812
4831
|
{
|
4813
4832
|
variant: "sm",
|
@@ -4837,7 +4856,7 @@ var LiveStatus = () => {
|
|
4837
4856
|
}
|
4838
4857
|
}, 1e3);
|
4839
4858
|
}, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants]);
|
4840
|
-
|
4859
|
+
useEffect21(() => {
|
4841
4860
|
if (hlsState == null ? void 0 : hlsState.running) {
|
4842
4861
|
startTimer();
|
4843
4862
|
}
|
@@ -4853,7 +4872,7 @@ var LiveStatus = () => {
|
|
4853
4872
|
if (!isHLSRunning && !isRTMPRunning) {
|
4854
4873
|
return null;
|
4855
4874
|
}
|
4856
|
-
return /* @__PURE__ */
|
4875
|
+
return /* @__PURE__ */ React37.createElement(
|
4857
4876
|
Flex,
|
4858
4877
|
{
|
4859
4878
|
align: "center",
|
@@ -4864,8 +4883,8 @@ var LiveStatus = () => {
|
|
4864
4883
|
borderRadius: "$1"
|
4865
4884
|
}
|
4866
4885
|
},
|
4867
|
-
/* @__PURE__ */
|
4868
|
-
/* @__PURE__ */
|
4886
|
+
/* @__PURE__ */ React37.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }),
|
4887
|
+
/* @__PURE__ */ React37.createElement(Flex, { align: "center", gap: "2" }, /* @__PURE__ */ React37.createElement(Text, { variant: !isMobile ? "button" : "body2" }, "LIVE"), /* @__PURE__ */ React37.createElement(Text, { variant: "caption" }, ((_a7 = hlsState == null ? void 0 : hlsState.variants) == null ? void 0 : _a7.length) > 0 ? formatTime(liveTime) : ""))
|
4869
4888
|
);
|
4870
4889
|
};
|
4871
4890
|
var RecordingStatus = () => {
|
@@ -4880,7 +4899,7 @@ var RecordingStatus = () => {
|
|
4880
4899
|
if (!(isMobile && isRecordingOn))
|
4881
4900
|
return null;
|
4882
4901
|
}
|
4883
|
-
return /* @__PURE__ */
|
4902
|
+
return /* @__PURE__ */ React37.createElement(
|
4884
4903
|
Tooltip,
|
4885
4904
|
{
|
4886
4905
|
boxCss: { zIndex: 1 },
|
@@ -4890,7 +4909,7 @@ var RecordingStatus = () => {
|
|
4890
4909
|
isHLSRecordingOn
|
4891
4910
|
})
|
4892
4911
|
},
|
4893
|
-
/* @__PURE__ */
|
4912
|
+
/* @__PURE__ */ React37.createElement(
|
4894
4913
|
Flex,
|
4895
4914
|
{
|
4896
4915
|
css: {
|
@@ -4898,7 +4917,7 @@ var RecordingStatus = () => {
|
|
4898
4917
|
alignItems: "center"
|
4899
4918
|
}
|
4900
4919
|
},
|
4901
|
-
/* @__PURE__ */
|
4920
|
+
/* @__PURE__ */ React37.createElement(RecordIcon, { width: 24, height: 24 })
|
4902
4921
|
)
|
4903
4922
|
);
|
4904
4923
|
};
|
@@ -4912,7 +4931,7 @@ var StartRecording = () => {
|
|
4912
4931
|
return null;
|
4913
4932
|
}
|
4914
4933
|
if (isBrowserRecordingOn) {
|
4915
|
-
return /* @__PURE__ */
|
4934
|
+
return /* @__PURE__ */ React37.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React37.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React37.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React37.createElement(RecordIcon, null), /* @__PURE__ */ React37.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React37.createElement(Popover2.Portal, null, /* @__PURE__ */ React37.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React37.createElement(
|
4916
4935
|
Button,
|
4917
4936
|
{
|
4918
4937
|
"data-testid": "stop_recording_confirm",
|
@@ -4935,7 +4954,7 @@ var StartRecording = () => {
|
|
4935
4954
|
"Stop"
|
4936
4955
|
))));
|
4937
4956
|
}
|
4938
|
-
return /* @__PURE__ */
|
4957
|
+
return /* @__PURE__ */ React37.createElement(
|
4939
4958
|
Button,
|
4940
4959
|
{
|
4941
4960
|
"data-testid": "start_recording",
|
@@ -4965,21 +4984,21 @@ var StartRecording = () => {
|
|
4965
4984
|
}
|
4966
4985
|
})
|
4967
4986
|
},
|
4968
|
-
recordingStarted ? /* @__PURE__ */
|
4969
|
-
/* @__PURE__ */
|
4987
|
+
recordingStarted ? /* @__PURE__ */ React37.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React37.createElement(RecordIcon, null),
|
4988
|
+
/* @__PURE__ */ React37.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
|
4970
4989
|
);
|
4971
4990
|
};
|
4972
4991
|
var StreamActions = () => {
|
4973
4992
|
const isConnected = useHMSStore14(selectIsConnectedToRoom2);
|
4974
4993
|
const isMobile = useMedia2(config.media.md);
|
4975
4994
|
const roomState = useHMSStore14(selectRoomState3);
|
4976
|
-
return /* @__PURE__ */
|
4995
|
+
return /* @__PURE__ */ React37.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React37.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React37.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React37.createElement(RecordingStatus, null), roomState !== HMSRoomState3.Preview ? /* @__PURE__ */ React37.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React37.createElement(StartRecording, null) : null);
|
4977
4996
|
};
|
4978
4997
|
var StopRecordingInSheet = ({
|
4979
4998
|
onStopRecording,
|
4980
4999
|
onClose
|
4981
5000
|
}) => {
|
4982
|
-
return /* @__PURE__ */
|
5001
|
+
return /* @__PURE__ */ React37.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React37.createElement(Sheet.Content, null, /* @__PURE__ */ React37.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React37.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React37.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React37.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React37.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React37.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React37.createElement(CrossIcon4, null)))), /* @__PURE__ */ React37.createElement(HorizontalDivider, null), /* @__PURE__ */ React37.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "caption", css: { c: "$on_surface_medium", pb: "$8" } }, "Are you sure you want to stop recording? You can\u2019t undo this action."), /* @__PURE__ */ React37.createElement(
|
4983
5002
|
Button,
|
4984
5003
|
{
|
4985
5004
|
variant: "danger",
|
@@ -4993,7 +5012,7 @@ var StopRecordingInSheet = ({
|
|
4993
5012
|
};
|
4994
5013
|
|
4995
5014
|
// src/Prebuilt/components/Header/common.jsx
|
4996
|
-
import
|
5015
|
+
import React38 from "react";
|
4997
5016
|
import {
|
4998
5017
|
DeviceType,
|
4999
5018
|
selectIsLocalVideoEnabled as selectIsLocalVideoEnabled2,
|
@@ -5014,7 +5033,7 @@ var CamaraFlipActions = () => {
|
|
5014
5033
|
if (!videoInput || !(videoInput == null ? void 0 : videoInput.length) || !(localVideoTrack == null ? void 0 : localVideoTrack.facingMode)) {
|
5015
5034
|
return null;
|
5016
5035
|
}
|
5017
|
-
return /* @__PURE__ */
|
5036
|
+
return /* @__PURE__ */ React38.createElement(Box, null, /* @__PURE__ */ React38.createElement(
|
5018
5037
|
IconButton_default,
|
5019
5038
|
{
|
5020
5039
|
disabled: !isVideoOn,
|
@@ -5029,7 +5048,7 @@ var CamaraFlipActions = () => {
|
|
5029
5048
|
}
|
5030
5049
|
})
|
5031
5050
|
},
|
5032
|
-
/* @__PURE__ */
|
5051
|
+
/* @__PURE__ */ React38.createElement(CameraFlipIcon, null)
|
5033
5052
|
));
|
5034
5053
|
};
|
5035
5054
|
var AudioOutputActions = () => {
|
@@ -5041,7 +5060,7 @@ var AudioOutputActions = () => {
|
|
5041
5060
|
if (!shouldShowAudioOutput || !(audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) > 0) {
|
5042
5061
|
return null;
|
5043
5062
|
}
|
5044
|
-
return /* @__PURE__ */
|
5063
|
+
return /* @__PURE__ */ React38.createElement(
|
5045
5064
|
AudioOutputSelectionSheet,
|
5046
5065
|
{
|
5047
5066
|
outputDevices: audioOutput,
|
@@ -5060,11 +5079,11 @@ var AudioOutputActions = () => {
|
|
5060
5079
|
}
|
5061
5080
|
})
|
5062
5081
|
},
|
5063
|
-
/* @__PURE__ */
|
5082
|
+
/* @__PURE__ */ React38.createElement(Box, null, /* @__PURE__ */ React38.createElement(IconButton_default, null, /* @__PURE__ */ React38.createElement(SpeakerIcon, null)))
|
5064
5083
|
);
|
5065
5084
|
};
|
5066
5085
|
var AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, children }) => {
|
5067
|
-
return /* @__PURE__ */
|
5086
|
+
return /* @__PURE__ */ React38.createElement(Sheet.Root, null, /* @__PURE__ */ React38.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React38.createElement(Sheet.Content, null, /* @__PURE__ */ React38.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React38.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React38.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio Output"), /* @__PURE__ */ React38.createElement(Sheet.Close, null, /* @__PURE__ */ React38.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React38.createElement(CrossIcon5, null))))), /* @__PURE__ */ React38.createElement(HorizontalDivider, null), /* @__PURE__ */ React38.createElement(
|
5068
5087
|
Flex,
|
5069
5088
|
{
|
5070
5089
|
direction: "column",
|
@@ -5075,7 +5094,7 @@ var AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, chil
|
|
5075
5094
|
}
|
5076
5095
|
},
|
5077
5096
|
outputDevices.map((audioDevice) => {
|
5078
|
-
return /* @__PURE__ */
|
5097
|
+
return /* @__PURE__ */ React38.createElement(
|
5079
5098
|
SelectWithLabel,
|
5080
5099
|
{
|
5081
5100
|
key: audioDevice.deviceId,
|
@@ -5088,8 +5107,8 @@ var AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, chil
|
|
5088
5107
|
})
|
5089
5108
|
)));
|
5090
5109
|
};
|
5091
|
-
var SelectWithLabel = ({ label, icon = /* @__PURE__ */
|
5092
|
-
return /* @__PURE__ */
|
5110
|
+
var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React38.createElement(React38.Fragment, null), checked, id, onChange }) => {
|
5111
|
+
return /* @__PURE__ */ React38.createElement(
|
5093
5112
|
Flex,
|
5094
5113
|
{
|
5095
5114
|
align: "center",
|
@@ -5101,7 +5120,7 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React37.createElement(Rea
|
|
5101
5120
|
},
|
5102
5121
|
onClick: onChange
|
5103
5122
|
},
|
5104
|
-
/* @__PURE__ */
|
5123
|
+
/* @__PURE__ */ React38.createElement(
|
5105
5124
|
Label3,
|
5106
5125
|
{
|
5107
5126
|
htmlFor: id,
|
@@ -5119,7 +5138,7 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React37.createElement(Rea
|
|
5119
5138
|
icon,
|
5120
5139
|
label
|
5121
5140
|
),
|
5122
|
-
checked && /* @__PURE__ */
|
5141
|
+
checked && /* @__PURE__ */ React38.createElement(CheckIcon2, { width: 24, height: 24 })
|
5123
5142
|
);
|
5124
5143
|
};
|
5125
5144
|
|
@@ -5128,9 +5147,9 @@ var Header2 = () => {
|
|
5128
5147
|
const roomState = useHMSStore16(selectRoomState4);
|
5129
5148
|
const isMobile = useMedia3(config.media.md);
|
5130
5149
|
if (roomState !== HMSRoomState4.Connected) {
|
5131
|
-
return /* @__PURE__ */
|
5150
|
+
return /* @__PURE__ */ React39.createElement(React39.Fragment, null);
|
5132
5151
|
}
|
5133
|
-
return /* @__PURE__ */
|
5152
|
+
return /* @__PURE__ */ React39.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ React39.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ React39.createElement(Logo, null), /* @__PURE__ */ React39.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ React39.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React39.createElement(LiveStatus, null), /* @__PURE__ */ React39.createElement(RecordingStatus, null))), /* @__PURE__ */ React39.createElement(
|
5134
5153
|
Flex,
|
5135
5154
|
{
|
5136
5155
|
align: "center",
|
@@ -5140,8 +5159,8 @@ var Header2 = () => {
|
|
5140
5159
|
gap: "$4"
|
5141
5160
|
}
|
5142
5161
|
},
|
5143
|
-
/* @__PURE__ */
|
5144
|
-
isMobile ? /* @__PURE__ */
|
5162
|
+
/* @__PURE__ */ React39.createElement(StreamActions, null),
|
5163
|
+
isMobile ? /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(CamaraFlipActions, null), /* @__PURE__ */ React39.createElement(AudioOutputActions, null)) : null
|
5145
5164
|
));
|
5146
5165
|
};
|
5147
5166
|
|
@@ -5152,7 +5171,7 @@ var PostLeave = () => {
|
|
5152
5171
|
const { roomCode } = useHMSPrebuiltContext();
|
5153
5172
|
const { roomId, role } = useParams3();
|
5154
5173
|
const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
|
5155
|
-
return /* @__PURE__ */
|
5174
|
+
return /* @__PURE__ */ React40.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React40.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ React40.createElement(Header2, null)), /* @__PURE__ */ React40.createElement(
|
5156
5175
|
Flex,
|
5157
5176
|
{
|
5158
5177
|
justify: "center",
|
@@ -5160,9 +5179,9 @@ var PostLeave = () => {
|
|
5160
5179
|
align: "center",
|
5161
5180
|
css: { bg: "$background_dim", flex: "1 1 0", position: "relative" }
|
5162
5181
|
},
|
5163
|
-
/* @__PURE__ */
|
5164
|
-
/* @__PURE__ */
|
5165
|
-
/* @__PURE__ */
|
5182
|
+
/* @__PURE__ */ React40.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
|
5183
|
+
/* @__PURE__ */ React40.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the room"),
|
5184
|
+
/* @__PURE__ */ React40.createElement(
|
5166
5185
|
Text,
|
5167
5186
|
{
|
5168
5187
|
variant: "body1",
|
@@ -5174,10 +5193,10 @@ var PostLeave = () => {
|
|
5174
5193
|
}
|
5175
5194
|
},
|
5176
5195
|
"Have a nice day",
|
5177
|
-
previewPreference.name && /* @__PURE__ */
|
5196
|
+
previewPreference.name && /* @__PURE__ */ React40.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
|
5178
5197
|
"!"
|
5179
5198
|
),
|
5180
|
-
/* @__PURE__ */
|
5199
|
+
/* @__PURE__ */ React40.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ React40.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ React40.createElement(
|
5181
5200
|
Button,
|
5182
5201
|
{
|
5183
5202
|
onClick: () => {
|
@@ -5189,20 +5208,20 @@ var PostLeave = () => {
|
|
5189
5208
|
},
|
5190
5209
|
"data-testid": "join_again_btn"
|
5191
5210
|
},
|
5192
|
-
/* @__PURE__ */
|
5193
|
-
/* @__PURE__ */
|
5211
|
+
/* @__PURE__ */ React40.createElement(ExitIcon, null),
|
5212
|
+
/* @__PURE__ */ React40.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
|
5194
5213
|
))
|
5195
5214
|
));
|
5196
5215
|
};
|
5197
5216
|
var PostLeave_default = PostLeave;
|
5198
5217
|
|
5199
5218
|
// src/Prebuilt/components/Preview/PreviewContainer.tsx
|
5200
|
-
import
|
5219
|
+
import React54 from "react";
|
5201
5220
|
import { useNavigate as useNavigate4, useParams as useParams4 } from "react-router-dom";
|
5202
5221
|
import { useSearchParam } from "react-use";
|
5203
5222
|
|
5204
5223
|
// src/Prebuilt/components/Preview/PreviewJoin.tsx
|
5205
|
-
import
|
5224
|
+
import React53, { Fragment as Fragment4, Suspense, useCallback as useCallback16, useEffect as useEffect24, useState as useState16 } from "react";
|
5206
5225
|
import { useMedia as useMedia6 } from "react-use";
|
5207
5226
|
import {
|
5208
5227
|
HMSRoomState as HMSRoomState6,
|
@@ -5219,7 +5238,7 @@ import {
|
|
5219
5238
|
import { MicOffIcon as MicOffIcon2, SettingsIcon as SettingsIcon2 } from "@100mslive/react-icons";
|
5220
5239
|
|
5221
5240
|
// src/Prebuilt/components/AudioVideoToggle.jsx
|
5222
|
-
import
|
5241
|
+
import React42, { Fragment as Fragment2 } from "react";
|
5223
5242
|
import {
|
5224
5243
|
DeviceType as DeviceType2,
|
5225
5244
|
HMSRoomState as HMSRoomState5,
|
@@ -5234,7 +5253,7 @@ import {
|
|
5234
5253
|
import { CameraFlipIcon as CameraFlipIcon2, MicOffIcon, MicOnIcon as MicOnIcon3, VideoOffIcon, VideoOnIcon } from "@100mslive/react-icons";
|
5235
5254
|
|
5236
5255
|
// src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx
|
5237
|
-
import
|
5256
|
+
import React41 from "react";
|
5238
5257
|
import { VerticalMenuIcon } from "@100mslive/react-icons";
|
5239
5258
|
var IconSection = styled(IconButton_default, {
|
5240
5259
|
w: "unset",
|
@@ -5286,7 +5305,7 @@ var IconButtonWithOptions = ({
|
|
5286
5305
|
}) => {
|
5287
5306
|
const bgCss = { backgroundColor: disabled ? "$surface_brighter" : active ? "$transparent" : "$secondary_dim" };
|
5288
5307
|
const iconCss = { color: disabled ? "$on_surface_low" : active ? "$on_surface_high" : "$on_primary_high" };
|
5289
|
-
return /* @__PURE__ */
|
5308
|
+
return /* @__PURE__ */ React41.createElement(Flex, null, /* @__PURE__ */ React41.createElement(IconSection, { css: bgCss, onClick }, /* @__PURE__ */ React41.createElement(Tooltip, { disabled: !tooltipMessage, title: tooltipMessage }, /* @__PURE__ */ React41.createElement(Flex, { align: "center", justify: "center", css: iconCss }, icon))), /* @__PURE__ */ React41.createElement(Dropdown.Root, null, /* @__PURE__ */ React41.createElement(
|
5290
5309
|
Dropdown.Trigger,
|
5291
5310
|
{
|
5292
5311
|
asChild: true,
|
@@ -5297,8 +5316,8 @@ var IconButtonWithOptions = ({
|
|
5297
5316
|
}
|
5298
5317
|
}
|
5299
5318
|
},
|
5300
|
-
/* @__PURE__ */
|
5301
|
-
), /* @__PURE__ */
|
5319
|
+
/* @__PURE__ */ React41.createElement(OptionsSection, { css: bgCss }, /* @__PURE__ */ React41.createElement(Tooltip, { title: "View Options" }, /* @__PURE__ */ React41.createElement(Box, { css: iconCss }, /* @__PURE__ */ React41.createElement(VerticalMenuIcon, null))))
|
5320
|
+
), /* @__PURE__ */ React41.createElement(
|
5302
5321
|
Dropdown.Content,
|
5303
5322
|
{
|
5304
5323
|
sideOffset: 5,
|
@@ -5310,7 +5329,7 @@ var IconButtonWithOptions = ({
|
|
5310
5329
|
border: "none"
|
5311
5330
|
}
|
5312
5331
|
},
|
5313
|
-
options.map((option, index) => /* @__PURE__ */
|
5332
|
+
options.map((option, index) => /* @__PURE__ */ React41.createElement(
|
5314
5333
|
Dropdown.Item,
|
5315
5334
|
{
|
5316
5335
|
key: option.title,
|
@@ -5337,7 +5356,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
|
|
5337
5356
|
const { videoInput, audioInput } = allDevices;
|
5338
5357
|
const formattedVideoInputList = videoInput == null ? void 0 : videoInput.map((videoInput2) => ({
|
5339
5358
|
active: selectedDeviceIDs.videoInput === videoInput2.deviceId,
|
5340
|
-
content: /* @__PURE__ */
|
5359
|
+
content: /* @__PURE__ */ React42.createElement(
|
5341
5360
|
Text,
|
5342
5361
|
{
|
5343
5362
|
variant: "sm",
|
@@ -5353,7 +5372,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
|
|
5353
5372
|
}));
|
5354
5373
|
const formattedAudioInputList = audioInput == null ? void 0 : audioInput.map((audioInput2) => ({
|
5355
5374
|
active: selectedDeviceIDs.audioInput === audioInput2.deviceId,
|
5356
|
-
content: /* @__PURE__ */
|
5375
|
+
content: /* @__PURE__ */ React42.createElement(
|
5357
5376
|
Text,
|
5358
5377
|
{
|
5359
5378
|
variant: "sm",
|
@@ -5374,7 +5393,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
|
|
5374
5393
|
const roomState = useHMSStore17(selectRoomState5);
|
5375
5394
|
const hasAudioDevices = (audioInput == null ? void 0 : audioInput.length) > 0;
|
5376
5395
|
const hasVideoDevices = (videoInput == null ? void 0 : videoInput.length) > 0;
|
5377
|
-
return /* @__PURE__ */
|
5396
|
+
return /* @__PURE__ */ React42.createElement(Fragment2, null, toggleAudio ? hideOptions || !hasAudioDevices ? /* @__PURE__ */ React42.createElement(Tooltip, { title: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)` }, /* @__PURE__ */ React42.createElement(
|
5378
5397
|
IconButton_default,
|
5379
5398
|
{
|
5380
5399
|
active: isLocalAudioEnabled,
|
@@ -5384,20 +5403,20 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
|
|
5384
5403
|
"data-testid": "audio_btn",
|
5385
5404
|
className: "__cancel-drag-event"
|
5386
5405
|
},
|
5387
|
-
!isLocalAudioEnabled ? /* @__PURE__ */
|
5388
|
-
)) : /* @__PURE__ */
|
5406
|
+
!isLocalAudioEnabled ? /* @__PURE__ */ React42.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React42.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" })
|
5407
|
+
)) : /* @__PURE__ */ React42.createElement(
|
5389
5408
|
IconButtonWithOptions,
|
5390
5409
|
{
|
5391
5410
|
options: formattedAudioInputList,
|
5392
5411
|
disabled: !toggleAudio,
|
5393
5412
|
onDisabledClick: toggleAudio,
|
5394
5413
|
tooltipMessage: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)`,
|
5395
|
-
icon: !isLocalAudioEnabled ? /* @__PURE__ */
|
5414
|
+
icon: !isLocalAudioEnabled ? /* @__PURE__ */ React42.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React42.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" }),
|
5396
5415
|
active: isLocalAudioEnabled,
|
5397
5416
|
onClick: toggleAudio,
|
5398
5417
|
key: "toggleAudio"
|
5399
5418
|
}
|
5400
|
-
) : null, toggleVideo ? hideOptions || !hasVideoDevices ? /* @__PURE__ */
|
5419
|
+
) : null, toggleVideo ? hideOptions || !hasVideoDevices ? /* @__PURE__ */ React42.createElement(Tooltip, { title: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)` }, /* @__PURE__ */ React42.createElement(
|
5401
5420
|
IconButton_default,
|
5402
5421
|
{
|
5403
5422
|
key: "toggleVideo",
|
@@ -5407,20 +5426,20 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
|
|
5407
5426
|
"data-testid": "video_btn",
|
5408
5427
|
className: "__cancel-drag-event"
|
5409
5428
|
},
|
5410
|
-
!isLocalVideoEnabled ? /* @__PURE__ */
|
5411
|
-
)) : /* @__PURE__ */
|
5429
|
+
!isLocalVideoEnabled ? /* @__PURE__ */ React42.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React42.createElement(VideoOnIcon, { "data-testid": "video_on_btn" })
|
5430
|
+
)) : /* @__PURE__ */ React42.createElement(
|
5412
5431
|
IconButtonWithOptions,
|
5413
5432
|
{
|
5414
5433
|
disabled: !toggleVideo,
|
5415
5434
|
onDisabledClick: toggleVideo,
|
5416
5435
|
options: formattedVideoInputList,
|
5417
5436
|
tooltipMessage: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)`,
|
5418
|
-
icon: !isLocalVideoEnabled ? /* @__PURE__ */
|
5437
|
+
icon: !isLocalVideoEnabled ? /* @__PURE__ */ React42.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React42.createElement(VideoOnIcon, { "data-testid": "video_on_btn" }),
|
5419
5438
|
key: "toggleVideo",
|
5420
5439
|
active: isLocalVideoEnabled,
|
5421
5440
|
onClick: toggleVideo
|
5422
5441
|
}
|
5423
|
-
) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState5.Preview ? /* @__PURE__ */
|
5442
|
+
) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState5.Preview ? /* @__PURE__ */ React42.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ React42.createElement(
|
5424
5443
|
IconButton_default,
|
5425
5444
|
{
|
5426
5445
|
onClick: () => __async(void 0, null, function* () {
|
@@ -5434,14 +5453,14 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
|
|
5434
5453
|
}
|
5435
5454
|
})
|
5436
5455
|
},
|
5437
|
-
/* @__PURE__ */
|
5456
|
+
/* @__PURE__ */ React42.createElement(CameraFlipIcon2, null)
|
5438
5457
|
)) : null);
|
5439
5458
|
};
|
5440
5459
|
|
5441
5460
|
// src/Prebuilt/components/Chip.tsx
|
5442
|
-
import
|
5461
|
+
import React43 from "react";
|
5443
5462
|
var Chip = ({
|
5444
|
-
icon = /* @__PURE__ */
|
5463
|
+
icon = /* @__PURE__ */ React43.createElement(React43.Fragment, null),
|
5445
5464
|
content = "",
|
5446
5465
|
backgroundColor = "$surface_default",
|
5447
5466
|
textColor = "$on_surface_high",
|
@@ -5452,16 +5471,25 @@ var Chip = ({
|
|
5452
5471
|
if (hideIfNoContent && !content) {
|
5453
5472
|
return null;
|
5454
5473
|
}
|
5455
|
-
return /* @__PURE__ */
|
5474
|
+
return /* @__PURE__ */ React43.createElement(
|
5475
|
+
Flex,
|
5476
|
+
{
|
5477
|
+
align: "center",
|
5478
|
+
css: __spreadValues({ backgroundColor, p: "$4 $6", gap: "$2", borderRadius: "$4" }, css2),
|
5479
|
+
onClick: () => onClick == null ? void 0 : onClick()
|
5480
|
+
},
|
5481
|
+
icon,
|
5482
|
+
/* @__PURE__ */ React43.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: textColor } }, content)
|
5483
|
+
);
|
5456
5484
|
};
|
5457
5485
|
var Chip_default = Chip;
|
5458
5486
|
|
5459
5487
|
// src/Prebuilt/components/Connection/TileConnection.tsx
|
5460
|
-
import
|
5488
|
+
import React45 from "react";
|
5461
5489
|
import { PinIcon, SpotlightIcon } from "@100mslive/react-icons";
|
5462
5490
|
|
5463
5491
|
// src/Prebuilt/components/Connection/ConnectionIndicator.tsx
|
5464
|
-
import
|
5492
|
+
import React44 from "react";
|
5465
5493
|
import { selectConnectionQualityByPeerID as selectConnectionQualityByPeerID2, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
|
5466
5494
|
import { PoorConnectivityIcon as PoorConnectivityIcon2 } from "@100mslive/react-icons";
|
5467
5495
|
|
@@ -5523,10 +5551,10 @@ var ConnectionIndicator = ({
|
|
5523
5551
|
return null;
|
5524
5552
|
}
|
5525
5553
|
if (downlinkQuality === 0) {
|
5526
|
-
return /* @__PURE__ */
|
5554
|
+
return /* @__PURE__ */ React44.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React44.createElement(Wrapper, { isTile, css: { color: "#ED4C5A" }, "data-testid": "tile_network" }, /* @__PURE__ */ React44.createElement(PoorConnectivityIcon2, null)));
|
5527
5555
|
}
|
5528
5556
|
const size = isTile ? 12 : 16;
|
5529
|
-
return /* @__PURE__ */
|
5557
|
+
return /* @__PURE__ */ React44.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React44.createElement(Wrapper, { isTile, "data-testid": "tile_network", css: { backgroundColor: hideBg ? "" : "$surface_bright" } }, /* @__PURE__ */ React44.createElement(
|
5530
5558
|
"svg",
|
5531
5559
|
{
|
5532
5560
|
width: size,
|
@@ -5541,7 +5569,7 @@ var ConnectionIndicator = ({
|
|
5541
5569
|
strokeMiterlimit: 2
|
5542
5570
|
}
|
5543
5571
|
},
|
5544
|
-
/* @__PURE__ */
|
5572
|
+
/* @__PURE__ */ React44.createElement(
|
5545
5573
|
"path",
|
5546
5574
|
{
|
5547
5575
|
d: "M6.875 0c2.549.035 4.679.902 6.445 2.648.366.362.45.796.216 1.096-.239.306-.714.34-1.142.072a2.28 2.28 0 0 1-.341-.271C9.24.862 4.924.775 1.992 3.346c-.284.249-.594.419-.983.393-.272-.019-.49-.135-.613-.388-.125-.261-.05-.498.114-.713.073-.092.156-.177.245-.254C2.516.804 4.591.039 6.875 0Z",
|
@@ -5549,7 +5577,7 @@ var ConnectionIndicator = ({
|
|
5549
5577
|
transform: "translate(-.333)"
|
5550
5578
|
}
|
5551
5579
|
),
|
5552
|
-
/* @__PURE__ */
|
5580
|
+
/* @__PURE__ */ React44.createElement(
|
5553
5581
|
"path",
|
5554
5582
|
{
|
5555
5583
|
d: "M7.056 2.964c1.756.035 3.208.7 4.499 1.763.162.134.277.315.354.512.098.251.114.503-.075.72-.193.222-.452.259-.725.198-.293-.066-.518-.247-.738-.443a4.859 4.859 0 0 0-6.198-.26c-.166.127-.318.271-.475.409-.242.211-.513.343-.843.317-.43-.034-.679-.397-.561-.81.062-.211.181-.4.345-.546 1.265-1.162 2.733-1.836 4.417-1.86Z",
|
@@ -5557,14 +5585,14 @@ var ConnectionIndicator = ({
|
|
5557
5585
|
transform: "translate(-.333)"
|
5558
5586
|
}
|
5559
5587
|
),
|
5560
|
-
/* @__PURE__ */
|
5588
|
+
/* @__PURE__ */ React44.createElement(
|
5561
5589
|
"path",
|
5562
5590
|
{
|
5563
5591
|
d: "M7.384,6.052C8.293,6.068 9.157,6.449 9.783,7.108C10.005,7.339 10.157,7.6 10.07,7.942C9.959,8.377 9.435,8.581 9.071,8.243C7.935,7.191 6.356,7.183 5.152,8.183C4.816,8.462 4.6,8.485 4.332,8.27C4.063,8.055 3.998,7.691 4.177,7.358C4.273,7.179 4.414,7.038 4.57,6.911C5.26,6.349 6.149,6.05 7.384,6.052L7.384,6.052Z",
|
5564
5592
|
fill: getColor(2, downlinkQuality, defaultColor, theme2)
|
5565
5593
|
}
|
5566
5594
|
),
|
5567
|
-
/* @__PURE__ */
|
5595
|
+
/* @__PURE__ */ React44.createElement(
|
5568
5596
|
"path",
|
5569
5597
|
{
|
5570
5598
|
d: "M8.214,9.941C8.214,10.234 8.097,10.515 7.888,10.721C7.68,10.928 7.398,11.042 7.104,11.039C6.471,11.036 5.982,10.541 5.993,9.912C6.004,9.259 6.499,8.766 7.133,8.779C7.744,8.791 8.22,9.301 8.214,9.941Z",
|
@@ -5583,7 +5611,7 @@ var TileConnection = ({
|
|
5583
5611
|
spotlighted,
|
5584
5612
|
pinned
|
5585
5613
|
}) => {
|
5586
|
-
return /* @__PURE__ */
|
5614
|
+
return /* @__PURE__ */ React45.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(Flex, { align: "center" }, pinned && /* @__PURE__ */ React45.createElement(IconWrapper, null, /* @__PURE__ */ React45.createElement(PinIcon, { width: "15", height: "15" })), spotlighted && /* @__PURE__ */ React45.createElement(IconWrapper, null, /* @__PURE__ */ React45.createElement(SpotlightIcon, { width: "15", height: "15" })), /* @__PURE__ */ React45.createElement(
|
5587
5615
|
Text,
|
5588
5616
|
{
|
5589
5617
|
css: __spreadValues({
|
@@ -5593,7 +5621,7 @@ var TileConnection = ({
|
|
5593
5621
|
variant: "xs"
|
5594
5622
|
},
|
5595
5623
|
name
|
5596
|
-
)), /* @__PURE__ */
|
5624
|
+
)), /* @__PURE__ */ React45.createElement(ConnectionIndicator, { isTile: true, peerId, hideBg: true })) : null);
|
5597
5625
|
};
|
5598
5626
|
var IconWrapper = styled("div", { c: "$on_surface_high", ml: "$3", mt: "$1" });
|
5599
5627
|
var Wrapper2 = styled("div", {
|
@@ -5612,8 +5640,12 @@ var Wrapper2 = styled("div", {
|
|
5612
5640
|
});
|
5613
5641
|
var TileConnection_default = TileConnection;
|
5614
5642
|
|
5643
|
+
// src/Prebuilt/components/PrebuiltTileElements.tsx
|
5644
|
+
var PrebuiltAudioIndicator = styled(StyledVideoTile.AudioIndicator, { height: "$12", width: "$12" });
|
5645
|
+
var PrebuiltAttributeBox = styled(StyledVideoTile.AttributeBox, { height: "$12", width: "$12" });
|
5646
|
+
|
5615
5647
|
// src/Prebuilt/components/Settings/SettingsModal.jsx
|
5616
|
-
import
|
5648
|
+
import React51, { useCallback as useCallback15, useEffect as useEffect23, useState as useState15 } from "react";
|
5617
5649
|
import { useMedia as useMedia4 } from "react-use";
|
5618
5650
|
import { ChevronLeftIcon, CrossIcon as CrossIcon6 } from "@100mslive/react-icons";
|
5619
5651
|
|
@@ -5621,7 +5653,7 @@ import { ChevronLeftIcon, CrossIcon as CrossIcon6 } from "@100mslive/react-icons
|
|
5621
5653
|
import { GridFourIcon, NotificationsIcon, SettingsIcon } from "@100mslive/react-icons";
|
5622
5654
|
|
5623
5655
|
// src/Prebuilt/components/Settings/DeviceSettings.jsx
|
5624
|
-
import
|
5656
|
+
import React47, { Fragment as Fragment3, useEffect as useEffect22, useRef as useRef7, useState as useState14 } from "react";
|
5625
5657
|
import {
|
5626
5658
|
DeviceType as DeviceType3,
|
5627
5659
|
selectIsLocalVideoEnabled as selectIsLocalVideoEnabled3,
|
@@ -5633,10 +5665,10 @@ import {
|
|
5633
5665
|
import { MicOnIcon as MicOnIcon4, SpeakerIcon as SpeakerIcon2, VideoOnIcon as VideoOnIcon2 } from "@100mslive/react-icons";
|
5634
5666
|
|
5635
5667
|
// src/Prebuilt/primitives/DropdownTrigger.jsx
|
5636
|
-
import
|
5668
|
+
import React46 from "react";
|
5637
5669
|
import { ChevronDownIcon as ChevronDownIcon3, ChevronUpIcon as ChevronUpIcon3 } from "@100mslive/react-icons";
|
5638
|
-
var DialogDropdownTrigger =
|
5639
|
-
return /* @__PURE__ */
|
5670
|
+
var DialogDropdownTrigger = React46.forwardRef(({ title, css: css2, open, icon, titleCSS = {} }, ref) => {
|
5671
|
+
return /* @__PURE__ */ React46.createElement(
|
5640
5672
|
Dropdown.Trigger,
|
5641
5673
|
{
|
5642
5674
|
asChild: true,
|
@@ -5650,7 +5682,7 @@ var DialogDropdownTrigger = React45.forwardRef(({ title, css: css2, open, icon,
|
|
5650
5682
|
}, css2),
|
5651
5683
|
ref
|
5652
5684
|
},
|
5653
|
-
/* @__PURE__ */
|
5685
|
+
/* @__PURE__ */ React46.createElement(
|
5654
5686
|
Flex,
|
5655
5687
|
{
|
5656
5688
|
css: {
|
@@ -5661,7 +5693,7 @@ var DialogDropdownTrigger = React45.forwardRef(({ title, css: css2, open, icon,
|
|
5661
5693
|
}
|
5662
5694
|
},
|
5663
5695
|
icon,
|
5664
|
-
/* @__PURE__ */
|
5696
|
+
/* @__PURE__ */ React46.createElement(
|
5665
5697
|
Text,
|
5666
5698
|
{
|
5667
5699
|
css: __spreadValues(__spreadProps(__spreadValues({
|
@@ -5673,14 +5705,14 @@ var DialogDropdownTrigger = React45.forwardRef(({ title, css: css2, open, icon,
|
|
5673
5705
|
},
|
5674
5706
|
title
|
5675
5707
|
),
|
5676
|
-
open ? /* @__PURE__ */
|
5708
|
+
open ? /* @__PURE__ */ React46.createElement(ChevronUpIcon3, null) : /* @__PURE__ */ React46.createElement(ChevronDownIcon3, null)
|
5677
5709
|
)
|
5678
5710
|
);
|
5679
5711
|
});
|
5680
5712
|
|
5681
5713
|
// src/Prebuilt/components/hooks/useDropdownSelection.jsx
|
5682
5714
|
var useDropdownSelection = () => {
|
5683
|
-
return "$
|
5715
|
+
return "$surface_bright";
|
5684
5716
|
};
|
5685
5717
|
|
5686
5718
|
// src/Prebuilt/components/Settings/DeviceSettings.jsx
|
@@ -5698,7 +5730,7 @@ var Settings = ({ setHide }) => {
|
|
5698
5730
|
if (!(videoInput == null ? void 0 : videoInput.length) && !(audioInput == null ? void 0 : audioInput.length) && !(audioOutputFiltered == null ? void 0 : audioOutputFiltered.length)) {
|
5699
5731
|
setHide(true);
|
5700
5732
|
}
|
5701
|
-
return /* @__PURE__ */
|
5733
|
+
return /* @__PURE__ */ React47.createElement(Box, { className: settingOverflow() }, (videoInput == null ? void 0 : videoInput.length) ? /* @__PURE__ */ React47.createElement(Fragment3, null, isVideoOn && /* @__PURE__ */ React47.createElement(
|
5702
5734
|
StyledVideoTile.Container,
|
5703
5735
|
{
|
5704
5736
|
css: {
|
@@ -5709,24 +5741,24 @@ var Settings = ({ setHide }) => {
|
|
5709
5741
|
m: "$10 auto"
|
5710
5742
|
}
|
5711
5743
|
},
|
5712
|
-
/* @__PURE__ */
|
5713
|
-
), /* @__PURE__ */
|
5744
|
+
/* @__PURE__ */ React47.createElement(Video, { trackId: videoTrackId, mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo })
|
5745
|
+
), /* @__PURE__ */ React47.createElement(
|
5714
5746
|
DeviceSelector,
|
5715
5747
|
{
|
5716
5748
|
title: "Video",
|
5717
5749
|
devices: videoInput,
|
5718
|
-
icon: /* @__PURE__ */
|
5750
|
+
icon: /* @__PURE__ */ React47.createElement(VideoOnIcon2, null),
|
5719
5751
|
selection: selectedDeviceIDs.videoInput,
|
5720
5752
|
onChange: (deviceId) => updateDevice({
|
5721
5753
|
deviceId,
|
5722
5754
|
deviceType: DeviceType3.videoInput
|
5723
5755
|
})
|
5724
5756
|
}
|
5725
|
-
)) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */
|
5757
|
+
)) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */ React47.createElement(
|
5726
5758
|
DeviceSelector,
|
5727
5759
|
{
|
5728
5760
|
title: shouldShowAudioOutput ? "Microphone" : "Audio",
|
5729
|
-
icon: /* @__PURE__ */
|
5761
|
+
icon: /* @__PURE__ */ React47.createElement(MicOnIcon4, null),
|
5730
5762
|
devices: audioInput,
|
5731
5763
|
selection: selectedDeviceIDs.audioInput,
|
5732
5764
|
onChange: (deviceId) => updateDevice({
|
@@ -5734,11 +5766,11 @@ var Settings = ({ setHide }) => {
|
|
5734
5766
|
deviceType: DeviceType3.audioInput
|
5735
5767
|
})
|
5736
5768
|
}
|
5737
|
-
) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */
|
5769
|
+
) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */ React47.createElement(
|
5738
5770
|
DeviceSelector,
|
5739
5771
|
{
|
5740
5772
|
title: "Speaker",
|
5741
|
-
icon: /* @__PURE__ */
|
5773
|
+
icon: /* @__PURE__ */ React47.createElement(SpeakerIcon2, null),
|
5742
5774
|
devices: audioOutput,
|
5743
5775
|
selection: selectedDeviceIDs.audioOutput,
|
5744
5776
|
onChange: (deviceId) => updateDevice({
|
@@ -5746,7 +5778,7 @@ var Settings = ({ setHide }) => {
|
|
5746
5778
|
deviceType: DeviceType3.audioOutput
|
5747
5779
|
})
|
5748
5780
|
},
|
5749
|
-
/* @__PURE__ */
|
5781
|
+
/* @__PURE__ */ React47.createElement(TestAudio, { id: selectedDeviceIDs.audioOutput })
|
5750
5782
|
) : null);
|
5751
5783
|
};
|
5752
5784
|
var DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {
|
@@ -5754,7 +5786,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
|
|
5754
5786
|
const [open, setOpen] = useState14(false);
|
5755
5787
|
const selectionBg = useDropdownSelection();
|
5756
5788
|
const ref = useRef7(null);
|
5757
|
-
return /* @__PURE__ */
|
5789
|
+
return /* @__PURE__ */ React47.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ React47.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ React47.createElement(
|
5758
5790
|
Flex,
|
5759
5791
|
{
|
5760
5792
|
align: "center",
|
@@ -5766,7 +5798,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
|
|
5766
5798
|
}
|
5767
5799
|
}
|
5768
5800
|
},
|
5769
|
-
/* @__PURE__ */
|
5801
|
+
/* @__PURE__ */ React47.createElement(
|
5770
5802
|
Box,
|
5771
5803
|
{
|
5772
5804
|
css: {
|
@@ -5780,7 +5812,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
|
|
5780
5812
|
}
|
5781
5813
|
}
|
5782
5814
|
},
|
5783
|
-
/* @__PURE__ */
|
5815
|
+
/* @__PURE__ */ React47.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React47.createElement(
|
5784
5816
|
DialogDropdownTrigger,
|
5785
5817
|
{
|
5786
5818
|
ref,
|
@@ -5788,8 +5820,8 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
|
|
5788
5820
|
title: ((_a7 = devices.find(({ deviceId }) => deviceId === selection)) == null ? void 0 : _a7.label) || "Select device from list",
|
5789
5821
|
open
|
5790
5822
|
}
|
5791
|
-
), /* @__PURE__ */
|
5792
|
-
return /* @__PURE__ */
|
5823
|
+
), /* @__PURE__ */ React47.createElement(Dropdown.Portal, null, /* @__PURE__ */ React47.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_b7 = ref.current) == null ? void 0 : _b7.clientWidth, zIndex: 1001 } }, devices.map((device) => {
|
5824
|
+
return /* @__PURE__ */ React47.createElement(
|
5793
5825
|
Dropdown.Item,
|
5794
5826
|
{
|
5795
5827
|
key: device.label,
|
@@ -5810,7 +5842,7 @@ var TEST_AUDIO_URL = "https://100ms.live/test-audio.wav";
|
|
5810
5842
|
var TestAudio = ({ id }) => {
|
5811
5843
|
const audioRef = useRef7(null);
|
5812
5844
|
const [playing, setPlaying] = useState14(false);
|
5813
|
-
|
5845
|
+
useEffect22(() => {
|
5814
5846
|
if (audioRef.current && id) {
|
5815
5847
|
try {
|
5816
5848
|
if (typeof audioRef.current.setSinkId !== "undefined") {
|
@@ -5821,7 +5853,7 @@ var TestAudio = ({ id }) => {
|
|
5821
5853
|
}
|
5822
5854
|
}
|
5823
5855
|
}, [id]);
|
5824
|
-
return /* @__PURE__ */
|
5856
|
+
return /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
|
5825
5857
|
Button,
|
5826
5858
|
{
|
5827
5859
|
variant: "standard",
|
@@ -5838,22 +5870,22 @@ var TestAudio = ({ id }) => {
|
|
5838
5870
|
},
|
5839
5871
|
disabled: playing
|
5840
5872
|
},
|
5841
|
-
/* @__PURE__ */
|
5873
|
+
/* @__PURE__ */ React47.createElement(SpeakerIcon2, null),
|
5842
5874
|
"\xA0Test",
|
5843
5875
|
" ",
|
5844
|
-
/* @__PURE__ */
|
5845
|
-
), /* @__PURE__ */
|
5876
|
+
/* @__PURE__ */ React47.createElement(Text, { as: "span", css: { display: "none", "@md": { display: "inline" } } }, "\xA0 speaker")
|
5877
|
+
), /* @__PURE__ */ React47.createElement("audio", { ref: audioRef, src: TEST_AUDIO_URL, onEnded: () => setPlaying(false), onPlay: () => setPlaying(true) }));
|
5846
5878
|
};
|
5847
5879
|
var DeviceSettings_default = Settings;
|
5848
5880
|
|
5849
5881
|
// src/Prebuilt/components/Settings/LayoutSettings.jsx
|
5850
|
-
import
|
5882
|
+
import React49, { useCallback as useCallback14 } from "react";
|
5851
5883
|
import { selectIsLocalScreenShared, selectIsLocalVideoEnabled as selectIsLocalVideoEnabled4, useHMSActions as useHMSActions15, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
|
5852
5884
|
|
5853
5885
|
// src/Prebuilt/components/Settings/SwitchWithLabel.jsx
|
5854
|
-
import
|
5886
|
+
import React48 from "react";
|
5855
5887
|
var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) => {
|
5856
|
-
return /* @__PURE__ */
|
5888
|
+
return /* @__PURE__ */ React48.createElement(
|
5857
5889
|
Flex,
|
5858
5890
|
{
|
5859
5891
|
align: "center",
|
@@ -5865,7 +5897,7 @@ var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) =>
|
|
5865
5897
|
display: hide ? "none" : "flex"
|
5866
5898
|
}
|
5867
5899
|
},
|
5868
|
-
/* @__PURE__ */
|
5900
|
+
/* @__PURE__ */ React48.createElement(
|
5869
5901
|
Label3,
|
5870
5902
|
{
|
5871
5903
|
htmlFor: id,
|
@@ -5883,7 +5915,7 @@ var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) =>
|
|
5883
5915
|
icon,
|
5884
5916
|
label
|
5885
5917
|
),
|
5886
|
-
/* @__PURE__ */
|
5918
|
+
/* @__PURE__ */ React48.createElement(Switch, { id, checked, onCheckedChange: onChange })
|
5887
5919
|
);
|
5888
5920
|
};
|
5889
5921
|
var SwitchWithLabel_default = SwitchWithLabel;
|
@@ -5904,7 +5936,7 @@ var LayoutSettings = () => {
|
|
5904
5936
|
}),
|
5905
5937
|
[hmsActions, isLocalVideoEnabled, isLocalScreenShared, setUISettings]
|
5906
5938
|
);
|
5907
|
-
return /* @__PURE__ */
|
5939
|
+
return /* @__PURE__ */ React49.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React49.createElement(SwitchWithLabel_default, { label: "Audio Only Mode", id: "audioOnlyMode", checked: isAudioOnly, onChange: toggleIsAudioOnly }), /* @__PURE__ */ React49.createElement(
|
5908
5940
|
SwitchWithLabel_default,
|
5909
5941
|
{
|
5910
5942
|
label: "Mirror Local Video",
|
@@ -5916,7 +5948,7 @@ var LayoutSettings = () => {
|
|
5916
5948
|
});
|
5917
5949
|
}
|
5918
5950
|
}
|
5919
|
-
), /* @__PURE__ */
|
5951
|
+
), /* @__PURE__ */ React49.createElement(Flex, { align: "center", css: { w: "100%", my: "$2", py: "$8", "@md": { display: "none" } } }, /* @__PURE__ */ React49.createElement(Text, { variant: "md", css: { fontWeight: "$semiBold" } }, "Tiles In View(", maxTileCount, ")"), /* @__PURE__ */ React49.createElement(Flex, { justify: "end", css: { flex: "1 1 0" } }, /* @__PURE__ */ React49.createElement(
|
5920
5952
|
Slider,
|
5921
5953
|
{
|
5922
5954
|
step: 1,
|
@@ -5932,11 +5964,11 @@ var LayoutSettings = () => {
|
|
5932
5964
|
};
|
5933
5965
|
|
5934
5966
|
// src/Prebuilt/components/Settings/NotificationSettings.jsx
|
5935
|
-
import
|
5967
|
+
import React50 from "react";
|
5936
5968
|
import { AlertOctagonIcon, HandIcon as HandIcon2, PeopleAddIcon as PeopleAddIcon2, PeopleRemoveIcon as PeopleRemoveIcon2 } from "@100mslive/react-icons";
|
5937
5969
|
var NotificationItem = ({ type, label, icon, checked }) => {
|
5938
5970
|
const [, setSubscribedNotifications] = useSetSubscribedNotifications(type);
|
5939
|
-
return /* @__PURE__ */
|
5971
|
+
return /* @__PURE__ */ React50.createElement(
|
5940
5972
|
SwitchWithLabel_default,
|
5941
5973
|
{
|
5942
5974
|
label,
|
@@ -5951,36 +5983,36 @@ var NotificationItem = ({ type, label, icon, checked }) => {
|
|
5951
5983
|
};
|
5952
5984
|
var NotificationSettings = () => {
|
5953
5985
|
const subscribedNotifications = useSubscribedNotifications();
|
5954
|
-
return /* @__PURE__ */
|
5986
|
+
return /* @__PURE__ */ React50.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React50.createElement(
|
5955
5987
|
NotificationItem,
|
5956
5988
|
{
|
5957
5989
|
label: "Peer Joined",
|
5958
5990
|
type: SUBSCRIBED_NOTIFICATIONS.PEER_JOINED,
|
5959
|
-
icon: /* @__PURE__ */
|
5991
|
+
icon: /* @__PURE__ */ React50.createElement(PeopleAddIcon2, null),
|
5960
5992
|
checked: subscribedNotifications.PEER_JOINED
|
5961
5993
|
}
|
5962
|
-
), /* @__PURE__ */
|
5994
|
+
), /* @__PURE__ */ React50.createElement(
|
5963
5995
|
NotificationItem,
|
5964
5996
|
{
|
5965
5997
|
label: "Peer Leave",
|
5966
5998
|
type: SUBSCRIBED_NOTIFICATIONS.PEER_LEFT,
|
5967
|
-
icon: /* @__PURE__ */
|
5999
|
+
icon: /* @__PURE__ */ React50.createElement(PeopleRemoveIcon2, null),
|
5968
6000
|
checked: subscribedNotifications.PEER_LEFT
|
5969
6001
|
}
|
5970
|
-
), /* @__PURE__ */
|
6002
|
+
), /* @__PURE__ */ React50.createElement(
|
5971
6003
|
NotificationItem,
|
5972
6004
|
{
|
5973
6005
|
label: "Hand Raised",
|
5974
6006
|
type: SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED,
|
5975
|
-
icon: /* @__PURE__ */
|
6007
|
+
icon: /* @__PURE__ */ React50.createElement(HandIcon2, null),
|
5976
6008
|
checked: subscribedNotifications.METADATA_UPDATED
|
5977
6009
|
}
|
5978
|
-
), /* @__PURE__ */
|
6010
|
+
), /* @__PURE__ */ React50.createElement(
|
5979
6011
|
NotificationItem,
|
5980
6012
|
{
|
5981
6013
|
label: "Error",
|
5982
6014
|
type: SUBSCRIBED_NOTIFICATIONS.ERROR,
|
5983
|
-
icon: /* @__PURE__ */
|
6015
|
+
icon: /* @__PURE__ */ React50.createElement(AlertOctagonIcon, null),
|
5984
6016
|
checked: subscribedNotifications.ERROR
|
5985
6017
|
}
|
5986
6018
|
));
|
@@ -6022,7 +6054,7 @@ var settingsList = [
|
|
6022
6054
|
];
|
6023
6055
|
|
6024
6056
|
// src/Prebuilt/components/Settings/SettingsModal.jsx
|
6025
|
-
var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */
|
6057
|
+
var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */ React51.createElement(React51.Fragment, null) }) => {
|
6026
6058
|
const mediaQueryLg = config.media.md;
|
6027
6059
|
const isMobile = useMedia4(mediaQueryLg);
|
6028
6060
|
const [showSetting, setShowSetting] = useState15(
|
@@ -6032,7 +6064,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
|
|
6032
6064
|
(key) => (hide) => setShowSetting((prev) => __spreadProps(__spreadValues({}, prev), { [key]: !hide })),
|
6033
6065
|
[setShowSetting]
|
6034
6066
|
);
|
6035
|
-
|
6067
|
+
useEffect23(() => {
|
6036
6068
|
if (screenType === "hls_live_streaming") {
|
6037
6069
|
hideSettingByTabName("layout")(true);
|
6038
6070
|
}
|
@@ -6044,7 +6076,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
|
|
6044
6076
|
const resetSelection = useCallback15(() => {
|
6045
6077
|
setSelection("");
|
6046
6078
|
}, []);
|
6047
|
-
|
6079
|
+
useEffect23(() => {
|
6048
6080
|
var _a7;
|
6049
6081
|
if (isMobile) {
|
6050
6082
|
setSelection("");
|
@@ -6053,7 +6085,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
|
|
6053
6085
|
setSelection(firstNotHiddenTabName);
|
6054
6086
|
}
|
6055
6087
|
}, [isMobile, showSetting]);
|
6056
|
-
return isMobile ? /* @__PURE__ */
|
6088
|
+
return isMobile ? /* @__PURE__ */ React51.createElement(
|
6057
6089
|
MobileSettingModal,
|
6058
6090
|
{
|
6059
6091
|
open,
|
@@ -6065,7 +6097,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
|
|
6065
6097
|
resetSelection,
|
6066
6098
|
children
|
6067
6099
|
}
|
6068
|
-
) : /* @__PURE__ */
|
6100
|
+
) : /* @__PURE__ */ React51.createElement(
|
6069
6101
|
DesktopSettingModal,
|
6070
6102
|
{
|
6071
6103
|
open,
|
@@ -6087,9 +6119,9 @@ var MobileSettingModal = ({
|
|
6087
6119
|
showSetting,
|
6088
6120
|
hideSettingByTabName,
|
6089
6121
|
resetSelection,
|
6090
|
-
children = /* @__PURE__ */
|
6122
|
+
children = /* @__PURE__ */ React51.createElement(React51.Fragment, null)
|
6091
6123
|
}) => {
|
6092
|
-
return /* @__PURE__ */
|
6124
|
+
return /* @__PURE__ */ React51.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React51.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React51.createElement(
|
6093
6125
|
Sheet.Content,
|
6094
6126
|
{
|
6095
6127
|
css: {
|
@@ -6097,9 +6129,9 @@ var MobileSettingModal = ({
|
|
6097
6129
|
overflowY: "auto"
|
6098
6130
|
}
|
6099
6131
|
},
|
6100
|
-
/* @__PURE__ */
|
6101
|
-
/* @__PURE__ */
|
6102
|
-
!selection ? /* @__PURE__ */
|
6132
|
+
/* @__PURE__ */ React51.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React51.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, !selection ? /* @__PURE__ */ React51.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Settings") : /* @__PURE__ */ React51.createElement(Text, { variant: "h6", css: { display: "flex" } }, /* @__PURE__ */ React51.createElement(Box, { as: "span", css: { r: "$round", mr: "$2" }, onClick: resetSelection }, /* @__PURE__ */ React51.createElement(ChevronLeftIcon, null)), (selection == null ? void 0 : selection.charAt(0).toUpperCase()) + selection.slice(1)), /* @__PURE__ */ React51.createElement(Sheet.Close, null, /* @__PURE__ */ React51.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React51.createElement(CrossIcon6, null))))),
|
6133
|
+
/* @__PURE__ */ React51.createElement(HorizontalDivider, null),
|
6134
|
+
!selection ? /* @__PURE__ */ React51.createElement(
|
6103
6135
|
Flex,
|
6104
6136
|
{
|
6105
6137
|
direction: "column",
|
@@ -6110,7 +6142,7 @@ var MobileSettingModal = ({
|
|
6110
6142
|
}
|
6111
6143
|
},
|
6112
6144
|
settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon2, tabName, title }) => {
|
6113
|
-
return /* @__PURE__ */
|
6145
|
+
return /* @__PURE__ */ React51.createElement(
|
6114
6146
|
Box,
|
6115
6147
|
{
|
6116
6148
|
key: tabName,
|
@@ -6140,18 +6172,18 @@ var MobileSettingModal = ({
|
|
6140
6172
|
borderBottom: "1px solid $border_default"
|
6141
6173
|
}
|
6142
6174
|
},
|
6143
|
-
/* @__PURE__ */
|
6175
|
+
/* @__PURE__ */ React51.createElement(Icon2, null),
|
6144
6176
|
title
|
6145
6177
|
);
|
6146
6178
|
})
|
6147
|
-
) : /* @__PURE__ */
|
6179
|
+
) : /* @__PURE__ */ React51.createElement(
|
6148
6180
|
Box,
|
6149
6181
|
{
|
6150
6182
|
direction: "column",
|
6151
6183
|
css: { overflowY: "scroll", px: "$8", py: "$10", maxHeight: "70vh", overflowX: "hidden" }
|
6152
6184
|
},
|
6153
6185
|
settingsList.filter(({ tabName }) => showSetting[tabName] && selection === tabName).map(({ content: Content10, title, tabName }) => {
|
6154
|
-
return /* @__PURE__ */
|
6186
|
+
return /* @__PURE__ */ React51.createElement(Content10, { key: title, setHide: hideSettingByTabName(tabName) });
|
6155
6187
|
})
|
6156
6188
|
)
|
6157
6189
|
));
|
@@ -6164,9 +6196,9 @@ var DesktopSettingModal = ({
|
|
6164
6196
|
showSetting,
|
6165
6197
|
hideSettingByTabName,
|
6166
6198
|
resetSelection,
|
6167
|
-
children = /* @__PURE__ */
|
6199
|
+
children = /* @__PURE__ */ React51.createElement(React51.Fragment, null)
|
6168
6200
|
}) => {
|
6169
|
-
return /* @__PURE__ */
|
6201
|
+
return /* @__PURE__ */ React51.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React51.createElement(Dialog.Trigger, { asChild: true }, children), /* @__PURE__ */ React51.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React51.createElement(Dialog.Overlay, null), /* @__PURE__ */ React51.createElement(
|
6170
6202
|
Dialog.Content,
|
6171
6203
|
{
|
6172
6204
|
css: {
|
@@ -6176,7 +6208,7 @@ var DesktopSettingModal = ({
|
|
6176
6208
|
r: "$4"
|
6177
6209
|
}
|
6178
6210
|
},
|
6179
|
-
/* @__PURE__ */
|
6211
|
+
/* @__PURE__ */ React51.createElement(
|
6180
6212
|
Tabs.Root,
|
6181
6213
|
{
|
6182
6214
|
value: selection,
|
@@ -6184,7 +6216,7 @@ var DesktopSettingModal = ({
|
|
6184
6216
|
onValueChange: setSelection,
|
6185
6217
|
css: { size: "100%", position: "relative" }
|
6186
6218
|
},
|
6187
|
-
/* @__PURE__ */
|
6219
|
+
/* @__PURE__ */ React51.createElement(
|
6188
6220
|
Tabs.List,
|
6189
6221
|
{
|
6190
6222
|
css: {
|
@@ -6196,12 +6228,12 @@ var DesktopSettingModal = ({
|
|
6196
6228
|
borderBottomLeftRadius: "$4"
|
6197
6229
|
}
|
6198
6230
|
},
|
6199
|
-
/* @__PURE__ */
|
6200
|
-
/* @__PURE__ */
|
6201
|
-
return /* @__PURE__ */
|
6231
|
+
/* @__PURE__ */ React51.createElement(Text, { variant: "h5" }, "Settings "),
|
6232
|
+
/* @__PURE__ */ React51.createElement(Flex, { direction: "column", css: { mx: 0, overflowY: "auto", pt: "$10" } }, settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon2, tabName, title }) => {
|
6233
|
+
return /* @__PURE__ */ React51.createElement(Tabs.Trigger, { key: tabName, value: tabName, css: { gap: "$8" } }, /* @__PURE__ */ React51.createElement(Icon2, null), title);
|
6202
6234
|
}))
|
6203
6235
|
),
|
6204
|
-
selection && /* @__PURE__ */
|
6236
|
+
selection && /* @__PURE__ */ React51.createElement(
|
6205
6237
|
Flex,
|
6206
6238
|
{
|
6207
6239
|
direction: "column",
|
@@ -6212,20 +6244,20 @@ var DesktopSettingModal = ({
|
|
6212
6244
|
}
|
6213
6245
|
},
|
6214
6246
|
settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ content: Content10, title, tabName }) => {
|
6215
|
-
return /* @__PURE__ */
|
6247
|
+
return /* @__PURE__ */ React51.createElement(Tabs.Content, { key: tabName, value: tabName, className: settingContent() }, /* @__PURE__ */ React51.createElement(SettingsContentHeader, { onBack: resetSelection, isMobile: false }, title), /* @__PURE__ */ React51.createElement(Content10, { setHide: hideSettingByTabName(tabName) }));
|
6216
6248
|
})
|
6217
6249
|
)
|
6218
6250
|
),
|
6219
|
-
/* @__PURE__ */
|
6251
|
+
/* @__PURE__ */ React51.createElement(Dialog.Close, { css: { position: "absolute", right: "$10", top: "$10" } }, /* @__PURE__ */ React51.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React51.createElement(CrossIcon6, null)))
|
6220
6252
|
)));
|
6221
6253
|
};
|
6222
6254
|
var SettingsContentHeader = ({ children, isMobile, onBack }) => {
|
6223
|
-
return /* @__PURE__ */
|
6255
|
+
return /* @__PURE__ */ React51.createElement(Text, { variant: "h6", css: { mb: "$12", display: "flex", alignItems: "center" } }, isMobile && /* @__PURE__ */ React51.createElement(Box, { as: "span", css: { bg: "$surface_bright", mr: "$4", r: "$round", p: "$2" }, onClick: onBack }, /* @__PURE__ */ React51.createElement(ChevronLeftIcon, null)), children);
|
6224
6256
|
};
|
6225
6257
|
var SettingsModal_default = SettingsModal;
|
6226
6258
|
|
6227
6259
|
// src/Prebuilt/components/Preview/PreviewForm.tsx
|
6228
|
-
import
|
6260
|
+
import React52 from "react";
|
6229
6261
|
import { useMedia as useMedia5 } from "react-use";
|
6230
6262
|
import { JoinForm_JoinBtnType as JoinForm_JoinBtnType2 } from "@100mslive/types-prebuilt/elements/join_form";
|
6231
6263
|
import { useRecordingStreaming as useRecordingStreaming3 } from "@100mslive/react-sdk";
|
@@ -6247,13 +6279,13 @@ var PreviewForm = ({
|
|
6247
6279
|
const layout = useRoomLayout();
|
6248
6280
|
const { join_form: joinForm = {} } = ((_c = (_b7 = (_a7 = layout == null ? void 0 : layout.screens) == null ? void 0 : _a7.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
|
6249
6281
|
const showGoLive = (joinForm == null ? void 0 : joinForm.join_btn_type) === JoinForm_JoinBtnType2.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning;
|
6250
|
-
return /* @__PURE__ */
|
6282
|
+
return /* @__PURE__ */ React52.createElement(
|
6251
6283
|
Form,
|
6252
6284
|
{
|
6253
6285
|
css: { flexDirection: cannotPublishVideo ? "column" : "row", "@md": { flexDirection: "row" } },
|
6254
6286
|
onSubmit: formSubmit
|
6255
6287
|
},
|
6256
|
-
/* @__PURE__ */
|
6288
|
+
/* @__PURE__ */ React52.createElement(Flex, { align: "center", css: { gap: "$8", w: "100%" } }, /* @__PURE__ */ React52.createElement(
|
6257
6289
|
Input,
|
6258
6290
|
{
|
6259
6291
|
required: true,
|
@@ -6274,8 +6306,8 @@ var PreviewForm = ({
|
|
6274
6306
|
}
|
6275
6307
|
}
|
6276
6308
|
}
|
6277
|
-
), cannotPublishAudio && cannotPublishVideo && !isMobile ? /* @__PURE__ */
|
6278
|
-
/* @__PURE__ */
|
6309
|
+
), cannotPublishAudio && cannotPublishVideo && !isMobile ? /* @__PURE__ */ React52.createElement(PreviewSettings, null) : null),
|
6310
|
+
/* @__PURE__ */ React52.createElement(Button, { type: "submit", icon: true, disabled: !name || !enableJoin, onClick: onJoin }, showGoLive ? /* @__PURE__ */ React52.createElement(RadioIcon, { height: 18, width: 18 }) : null, showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label)
|
6279
6311
|
);
|
6280
6312
|
};
|
6281
6313
|
var Form = styled("form", {
|
@@ -6292,7 +6324,7 @@ var Form = styled("form", {
|
|
6292
6324
|
var PreviewForm_default = PreviewForm;
|
6293
6325
|
|
6294
6326
|
// src/Prebuilt/components/Preview/PreviewJoin.tsx
|
6295
|
-
var VirtualBackground =
|
6327
|
+
var VirtualBackground = React53.lazy(() => import("./VirtualBackground-UVZJVOA2.js"));
|
6296
6328
|
var getParticipantChipContent = (peerCount = 0) => {
|
6297
6329
|
if (peerCount === 0) {
|
6298
6330
|
return "You are the first to join";
|
@@ -6349,7 +6381,7 @@ var PreviewJoin = ({
|
|
6349
6381
|
const videoTrack = useHMSStore21(selectVideoTrackByID4(localPeer == null ? void 0 : localPeer.videoTrack));
|
6350
6382
|
const isMobile = useMedia6(config.media.md);
|
6351
6383
|
const aspectRatio = (videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
|
6352
|
-
|
6384
|
+
useEffect24(() => {
|
6353
6385
|
if (authToken) {
|
6354
6386
|
if (skipPreview) {
|
6355
6387
|
savePreferenceAndJoin();
|
@@ -6358,34 +6390,34 @@ var PreviewJoin = ({
|
|
6358
6390
|
}
|
6359
6391
|
}
|
6360
6392
|
}, [authToken, skipPreview]);
|
6361
|
-
|
6393
|
+
useEffect24(() => {
|
6362
6394
|
if (initialName) {
|
6363
6395
|
setName(initialName);
|
6364
6396
|
}
|
6365
6397
|
}, [initialName]);
|
6366
|
-
return roomState === HMSRoomState6.Preview ? /* @__PURE__ */
|
6398
|
+
return roomState === HMSRoomState6.Preview ? /* @__PURE__ */ React53.createElement(Container3, { css: { h: "100%", pt: "$10", "@md": { justifyContent: "space-between" } } }, toggleVideo ? null : /* @__PURE__ */ React53.createElement(Box, null), /* @__PURE__ */ React53.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", maxWidth: "640px" } }, /* @__PURE__ */ React53.createElement(Logo, null), /* @__PURE__ */ React53.createElement(
|
6367
6399
|
Text,
|
6368
6400
|
{
|
6369
6401
|
variant: "h4",
|
6370
6402
|
css: { wordBreak: "break-word", textAlign: "center", mt: "$14", mb: "$4", "@md": { mt: "$8", mb: "$2" } }
|
6371
6403
|
},
|
6372
6404
|
previewHeader.title
|
6373
|
-
), /* @__PURE__ */
|
6405
|
+
), /* @__PURE__ */ React53.createElement(
|
6374
6406
|
Text,
|
6375
6407
|
{
|
6376
6408
|
css: { c: "$on_surface_medium", my: "0", textAlign: "center", maxWidth: "100%", wordWrap: "break-word" },
|
6377
6409
|
variant: "sm"
|
6378
6410
|
},
|
6379
6411
|
previewHeader.sub_title
|
6380
|
-
), /* @__PURE__ */
|
6412
|
+
), /* @__PURE__ */ React53.createElement(Flex, { justify: "center", css: { mt: "$14", "@md": { mt: "$8", mb: "0" }, gap: "$4" } }, isStreamingOn ? /* @__PURE__ */ React53.createElement(
|
6381
6413
|
Chip_default,
|
6382
6414
|
{
|
6383
6415
|
content: "LIVE",
|
6384
6416
|
backgroundColor: "$alert_error_default",
|
6385
6417
|
textColor: "#FFF",
|
6386
|
-
icon: /* @__PURE__ */
|
6418
|
+
icon: /* @__PURE__ */ React53.createElement(Box, { css: { h: "$sm", w: "$sm", backgroundColor: "$on_primary_high", borderRadius: "$round" } })
|
6387
6419
|
}
|
6388
|
-
) : null, /* @__PURE__ */
|
6420
|
+
) : null, /* @__PURE__ */ React53.createElement(Chip_default, { content: getParticipantChipContent(peerCount), hideIfNoContent: true }))), toggleVideo ? /* @__PURE__ */ React53.createElement(
|
6389
6421
|
Flex,
|
6390
6422
|
{
|
6391
6423
|
align: "center",
|
@@ -6397,8 +6429,8 @@ var PreviewJoin = ({
|
|
6397
6429
|
flexDirection: "column"
|
6398
6430
|
}
|
6399
6431
|
},
|
6400
|
-
/* @__PURE__ */
|
6401
|
-
) : null, /* @__PURE__ */
|
6432
|
+
/* @__PURE__ */ React53.createElement(PreviewTile, { name, error: previewError })
|
6433
|
+
) : null, /* @__PURE__ */ React53.createElement(Box, { css: { w: "100%", maxWidth: `${Math.max(aspectRatio, 1) * 360}px` } }, /* @__PURE__ */ React53.createElement(PreviewControls, { hideSettings: !toggleVideo && !toggleAudio }), /* @__PURE__ */ React53.createElement(
|
6402
6434
|
PreviewForm_default,
|
6403
6435
|
{
|
6404
6436
|
name,
|
@@ -6408,7 +6440,7 @@ var PreviewJoin = ({
|
|
6408
6440
|
cannotPublishVideo: !toggleVideo,
|
6409
6441
|
cannotPublishAudio: !toggleAudio
|
6410
6442
|
}
|
6411
|
-
))) : /* @__PURE__ */
|
6443
|
+
))) : /* @__PURE__ */ React53.createElement(FullPageProgress_default, null);
|
6412
6444
|
};
|
6413
6445
|
var Container3 = styled("div", __spreadProps(__spreadValues({
|
6414
6446
|
width: "100%"
|
@@ -6427,7 +6459,7 @@ var PreviewTile = ({ name, error }) => {
|
|
6427
6459
|
const videoTrack = useHMSStore21(selectVideoTrackByID4(localPeer == null ? void 0 : localPeer.videoTrack));
|
6428
6460
|
const isMobile = useMedia6(config.media.md);
|
6429
6461
|
const aspectRatio = (videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
|
6430
|
-
return /* @__PURE__ */
|
6462
|
+
return /* @__PURE__ */ React53.createElement(
|
6431
6463
|
StyledVideoTile.Container,
|
6432
6464
|
{
|
6433
6465
|
css: {
|
@@ -6443,20 +6475,20 @@ var PreviewTile = ({ name, error }) => {
|
|
6443
6475
|
}
|
6444
6476
|
}
|
6445
6477
|
},
|
6446
|
-
localPeer ? /* @__PURE__ */
|
6478
|
+
localPeer ? /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(TileConnection_default, { name, peerId: localPeer.id, hideLabel: true }), /* @__PURE__ */ React53.createElement(
|
6447
6479
|
Video,
|
6448
6480
|
{
|
6449
6481
|
mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo,
|
6450
6482
|
trackId: localPeer.videoTrack,
|
6451
6483
|
"data-testid": "preview_tile"
|
6452
6484
|
}
|
6453
|
-
), !isVideoOn ? /* @__PURE__ */
|
6454
|
-
showMuteIcon ? /* @__PURE__ */
|
6485
|
+
), !isVideoOn ? /* @__PURE__ */ React53.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React53.createElement(Avatar, { name, "data-testid": "preview_avatar_tile", size: "medium" })) : null) : !error ? /* @__PURE__ */ React53.createElement(FullPageProgress_default, null) : null,
|
6486
|
+
showMuteIcon ? /* @__PURE__ */ React53.createElement(PrebuiltAudioIndicator, null, /* @__PURE__ */ React53.createElement(MicOffIcon2, { height: 16, width: 16 })) : /* @__PURE__ */ React53.createElement(PrebuiltAudioIndicator, null, /* @__PURE__ */ React53.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack }))
|
6455
6487
|
);
|
6456
6488
|
};
|
6457
6489
|
var PreviewControls = ({ hideSettings }) => {
|
6458
6490
|
const isMobile = useMedia6(config.media.md);
|
6459
|
-
return /* @__PURE__ */
|
6491
|
+
return /* @__PURE__ */ React53.createElement(
|
6460
6492
|
Flex,
|
6461
6493
|
{
|
6462
6494
|
justify: hideSettings && isMobile ? "center" : "between",
|
@@ -6465,13 +6497,13 @@ var PreviewControls = ({ hideSettings }) => {
|
|
6465
6497
|
mt: "$8"
|
6466
6498
|
}
|
6467
6499
|
},
|
6468
|
-
/* @__PURE__ */
|
6469
|
-
!hideSettings ? /* @__PURE__ */
|
6500
|
+
/* @__PURE__ */ React53.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React53.createElement(AudioVideoToggle, null), /* @__PURE__ */ React53.createElement(Suspense, { fallback: "" }, !isMobile ? /* @__PURE__ */ React53.createElement(VirtualBackground, null) : null)),
|
6501
|
+
!hideSettings ? /* @__PURE__ */ React53.createElement(PreviewSettings, null) : null
|
6470
6502
|
);
|
6471
6503
|
};
|
6472
|
-
var PreviewSettings =
|
6504
|
+
var PreviewSettings = React53.memo(() => {
|
6473
6505
|
const [open, setOpen] = useState16(false);
|
6474
|
-
return /* @__PURE__ */
|
6506
|
+
return /* @__PURE__ */ React53.createElement(Fragment4, null, /* @__PURE__ */ React53.createElement(IconButton_default, { "data-testid": "preview_setting_btn", css: { flexShrink: 0 }, onClick: () => setOpen((value) => !value) }, /* @__PURE__ */ React53.createElement(SettingsIcon2, null)), open && /* @__PURE__ */ React53.createElement(SettingsModal_default, { open, onOpenChange: setOpen }));
|
6475
6507
|
});
|
6476
6508
|
var PreviewJoin_default = PreviewJoin;
|
6477
6509
|
|
@@ -6495,14 +6527,14 @@ var PreviewContainer = () => {
|
|
6495
6527
|
}
|
6496
6528
|
navigate(meetingURL);
|
6497
6529
|
};
|
6498
|
-
return /* @__PURE__ */
|
6530
|
+
return /* @__PURE__ */ React54.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React54.createElement(
|
6499
6531
|
Flex,
|
6500
6532
|
{
|
6501
6533
|
css: { flex: "1 1 0", position: "relative", overflowY: "auto", color: "$primary_default" },
|
6502
6534
|
justify: "center",
|
6503
6535
|
align: "center"
|
6504
6536
|
},
|
6505
|
-
authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */
|
6537
|
+
authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */ React54.createElement(
|
6506
6538
|
PreviewJoin_default,
|
6507
6539
|
{
|
6508
6540
|
initialName,
|
@@ -6510,20 +6542,20 @@ var PreviewContainer = () => {
|
|
6510
6542
|
asRole: previewAsRole != null ? previewAsRole : void 0,
|
6511
6543
|
onJoin
|
6512
6544
|
}
|
6513
|
-
) : /* @__PURE__ */
|
6545
|
+
) : /* @__PURE__ */ React54.createElement(FullPageProgress_default, null)
|
6514
6546
|
));
|
6515
6547
|
};
|
6516
6548
|
var PreviewContainer_default = PreviewContainer;
|
6517
6549
|
|
6518
6550
|
// src/Prebuilt/components/Toast/ToastContainer.jsx
|
6519
|
-
import
|
6551
|
+
import React56, { useEffect as useEffect25, useState as useState17 } from "react";
|
6520
6552
|
import { selectIsConnectedToRoom as selectIsConnectedToRoom3, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
|
6521
6553
|
|
6522
6554
|
// src/Prebuilt/components/Toast/Toast.jsx
|
6523
|
-
import
|
6555
|
+
import React55 from "react";
|
6524
6556
|
var Toast2 = (_a7) => {
|
6525
6557
|
var _b7 = _a7, { title, description, close = true, open, duration, onOpenChange, icon } = _b7, props = __objRest(_b7, ["title", "description", "close", "open", "duration", "onOpenChange", "icon"]);
|
6526
|
-
return /* @__PURE__ */
|
6558
|
+
return /* @__PURE__ */ React55.createElement(
|
6527
6559
|
Toast.HMSToast,
|
6528
6560
|
__spreadValues({
|
6529
6561
|
title,
|
@@ -6541,15 +6573,15 @@ var Toast2 = (_a7) => {
|
|
6541
6573
|
var ToastContainer = () => {
|
6542
6574
|
const isConnected = useHMSStore22(selectIsConnectedToRoom3);
|
6543
6575
|
const [toasts, setToast] = useState17([]);
|
6544
|
-
|
6576
|
+
useEffect25(() => {
|
6545
6577
|
ToastManager.addListener(setToast);
|
6546
6578
|
return () => {
|
6547
6579
|
ToastManager.removeListener(setToast);
|
6548
6580
|
};
|
6549
6581
|
}, []);
|
6550
|
-
return /* @__PURE__ */
|
6551
|
-
return /* @__PURE__ */
|
6552
|
-
}), /* @__PURE__ */
|
6582
|
+
return /* @__PURE__ */ React56.createElement(Toast.Provider, { swipeDirection: "left", duration: 3e3 }, toasts.slice(0, MAX_TOASTS).map((toast) => {
|
6583
|
+
return /* @__PURE__ */ React56.createElement(Toast2, __spreadProps(__spreadValues({ key: toast.id }, toast), { onOpenChange: (value) => !value && ToastManager.removeToast(toast.id) }));
|
6584
|
+
}), /* @__PURE__ */ React56.createElement(
|
6553
6585
|
Toast.Viewport,
|
6554
6586
|
{
|
6555
6587
|
css: __spreadValues({
|
@@ -6560,7 +6592,7 @@ var ToastContainer = () => {
|
|
6560
6592
|
};
|
6561
6593
|
|
6562
6594
|
// src/Prebuilt/plugins/FlyingEmoji.jsx
|
6563
|
-
import
|
6595
|
+
import React57, { useCallback as useCallback17, useEffect as useEffect26, useMemo as useMemo3, useState as useState18 } from "react";
|
6564
6596
|
import { useMedia as useMedia7 } from "react-use";
|
6565
6597
|
import {
|
6566
6598
|
selectLocalPeerID as selectLocalPeerID4,
|
@@ -6626,10 +6658,10 @@ function FlyingEmoji() {
|
|
6626
6658
|
type: EMOJI_REACTION_TYPE,
|
6627
6659
|
onEvent: showFlyingEmoji
|
6628
6660
|
});
|
6629
|
-
|
6661
|
+
useEffect26(() => {
|
6630
6662
|
window.showFlyingEmoji = showFlyingEmoji;
|
6631
6663
|
}, [showFlyingEmoji]);
|
6632
|
-
return /* @__PURE__ */
|
6664
|
+
return /* @__PURE__ */ React57.createElement(
|
6633
6665
|
Box,
|
6634
6666
|
{
|
6635
6667
|
css: {
|
@@ -6645,7 +6677,7 @@ function FlyingEmoji() {
|
|
6645
6677
|
}
|
6646
6678
|
},
|
6647
6679
|
emojis.map((emoji) => {
|
6648
|
-
return /* @__PURE__ */
|
6680
|
+
return /* @__PURE__ */ React57.createElement(
|
6649
6681
|
Flex,
|
6650
6682
|
{
|
6651
6683
|
key: emoji.id,
|
@@ -6661,8 +6693,8 @@ function FlyingEmoji() {
|
|
6661
6693
|
setEmojis(emojis.filter((item) => item.id !== emoji.id));
|
6662
6694
|
}
|
6663
6695
|
},
|
6664
|
-
/* @__PURE__ */
|
6665
|
-
/* @__PURE__ */
|
6696
|
+
/* @__PURE__ */ React57.createElement(Box, null, /* @__PURE__ */ React57.createElement("em-emoji", { id: emoji.emojiId, size: "48px", set: "apple" })),
|
6697
|
+
/* @__PURE__ */ React57.createElement(
|
6666
6698
|
Box,
|
6667
6699
|
{
|
6668
6700
|
css: {
|
@@ -6672,7 +6704,7 @@ function FlyingEmoji() {
|
|
6672
6704
|
borderRadius: "$1"
|
6673
6705
|
}
|
6674
6706
|
},
|
6675
|
-
/* @__PURE__ */
|
6707
|
+
/* @__PURE__ */ React57.createElement(
|
6676
6708
|
Text,
|
6677
6709
|
{
|
6678
6710
|
css: {
|
@@ -6690,7 +6722,7 @@ function FlyingEmoji() {
|
|
6690
6722
|
}
|
6691
6723
|
|
6692
6724
|
// src/Prebuilt/plugins/RemoteStopScreenshare.jsx
|
6693
|
-
import
|
6725
|
+
import React58, { useCallback as useCallback18 } from "react";
|
6694
6726
|
import { useCustomEvent as useCustomEvent3, useHMSActions as useHMSActions16 } from "@100mslive/react-sdk";
|
6695
6727
|
function RemoteStopScreenshare() {
|
6696
6728
|
const actions = useHMSActions16();
|
@@ -6701,11 +6733,11 @@ function RemoteStopScreenshare() {
|
|
6701
6733
|
type: REMOTE_STOP_SCREENSHARE_TYPE,
|
6702
6734
|
onEvent: onRemoteStopScreenshare
|
6703
6735
|
});
|
6704
|
-
return /* @__PURE__ */
|
6736
|
+
return /* @__PURE__ */ React58.createElement(React58.Fragment, null);
|
6705
6737
|
}
|
6706
6738
|
|
6707
6739
|
// src/Prebuilt/components/hooks/useAutoStartStreaming.tsx
|
6708
|
-
import { useCallback as useCallback19, useEffect as
|
6740
|
+
import { useCallback as useCallback19, useEffect as useEffect28, useRef as useRef9 } from "react";
|
6709
6741
|
import {
|
6710
6742
|
selectIsConnectedToRoom as selectIsConnectedToRoom5,
|
6711
6743
|
selectPermissions as selectPermissions2,
|
@@ -6715,7 +6747,7 @@ import {
|
|
6715
6747
|
} from "@100mslive/react-sdk";
|
6716
6748
|
|
6717
6749
|
// src/Prebuilt/common/hooks.js
|
6718
|
-
import { useEffect as
|
6750
|
+
import { useEffect as useEffect27, useRef as useRef8, useState as useState19 } from "react";
|
6719
6751
|
import { JoinForm_JoinBtnType as JoinForm_JoinBtnType3 } from "@100mslive/types-prebuilt/elements/join_form";
|
6720
6752
|
import {
|
6721
6753
|
selectAvailableRoleNames as selectAvailableRoleNames2,
|
@@ -6786,12 +6818,12 @@ var useAutoStartStreaming = () => {
|
|
6786
6818
|
setHLSStarted(false);
|
6787
6819
|
}
|
6788
6820
|
}), [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI]);
|
6789
|
-
|
6821
|
+
useEffect28(() => {
|
6790
6822
|
if (!isHLSStarted && !isHLSRunning) {
|
6791
6823
|
streamStartedRef.current = false;
|
6792
6824
|
}
|
6793
6825
|
}, [isHLSStarted, isHLSRunning]);
|
6794
|
-
|
6826
|
+
useEffect28(() => {
|
6795
6827
|
if (!isConnected || streamStartedRef.current || !(permissions == null ? void 0 : permissions.hlsStreaming)) {
|
6796
6828
|
return;
|
6797
6829
|
}
|
@@ -6800,8 +6832,8 @@ var useAutoStartStreaming = () => {
|
|
6800
6832
|
};
|
6801
6833
|
|
6802
6834
|
// src/Prebuilt/App.tsx
|
6803
|
-
var Conference =
|
6804
|
-
var HMSPrebuilt =
|
6835
|
+
var Conference = React59.lazy(() => import("./conference-N7S47TDK.js"));
|
6836
|
+
var HMSPrebuilt = React59.forwardRef(
|
6805
6837
|
({
|
6806
6838
|
roomCode = "",
|
6807
6839
|
authToken = "",
|
@@ -6812,13 +6844,14 @@ var HMSPrebuilt = React58.forwardRef(
|
|
6812
6844
|
themes,
|
6813
6845
|
options: { userName = "", userId = "", endpoints } = {},
|
6814
6846
|
screens,
|
6815
|
-
onLeave
|
6847
|
+
onLeave,
|
6848
|
+
onJoin
|
6816
6849
|
}, ref) => {
|
6817
6850
|
var _a7, _b7, _c, _d;
|
6818
6851
|
const metadata = "";
|
6819
6852
|
const reactiveStore = useRef10();
|
6820
|
-
const [hydrated, setHydrated] =
|
6821
|
-
|
6853
|
+
const [hydrated, setHydrated] = React59.useState(false);
|
6854
|
+
useEffect29(() => {
|
6822
6855
|
setHydrated(true);
|
6823
6856
|
const hms = new HMSReactiveStore();
|
6824
6857
|
const hmsStore = hms.getStore();
|
@@ -6833,13 +6866,13 @@ var HMSPrebuilt = React58.forwardRef(
|
|
6833
6866
|
hmsNotifications
|
6834
6867
|
};
|
6835
6868
|
}, []);
|
6836
|
-
|
6869
|
+
useEffect29(() => {
|
6837
6870
|
if (!ref || !reactiveStore.current) {
|
6838
6871
|
return;
|
6839
6872
|
}
|
6840
6873
|
ref.current = __spreadValues({}, reactiveStore.current);
|
6841
6874
|
}, [ref]);
|
6842
|
-
|
6875
|
+
useEffect29(
|
6843
6876
|
() => () => {
|
6844
6877
|
var _a8;
|
6845
6878
|
(_a8 = reactiveStore == null ? void 0 : reactiveStore.current) == null ? void 0 : _a8.hmsActions.leave();
|
@@ -6869,7 +6902,7 @@ var HMSPrebuilt = React58.forwardRef(
|
|
6869
6902
|
return null;
|
6870
6903
|
}
|
6871
6904
|
globalStyles();
|
6872
|
-
return /* @__PURE__ */
|
6905
|
+
return /* @__PURE__ */ React59.createElement(ErrorBoundary, null, /* @__PURE__ */ React59.createElement(
|
6873
6906
|
HMSPrebuiltContext.Provider,
|
6874
6907
|
{
|
6875
6908
|
value: {
|
@@ -6877,6 +6910,7 @@ var HMSPrebuilt = React58.forwardRef(
|
|
6877
6910
|
roomId,
|
6878
6911
|
role,
|
6879
6912
|
onLeave,
|
6913
|
+
onJoin,
|
6880
6914
|
userName,
|
6881
6915
|
userId,
|
6882
6916
|
endpoints: {
|
@@ -6887,7 +6921,7 @@ var HMSPrebuilt = React58.forwardRef(
|
|
6887
6921
|
}
|
6888
6922
|
}
|
6889
6923
|
},
|
6890
|
-
/* @__PURE__ */
|
6924
|
+
/* @__PURE__ */ React59.createElement(
|
6891
6925
|
HMSRoomProvider,
|
6892
6926
|
{
|
6893
6927
|
isHMSStatsOn: FeatureFlags.enableStatsForNerds,
|
@@ -6896,7 +6930,7 @@ var HMSPrebuilt = React58.forwardRef(
|
|
6896
6930
|
notifications: (_c = reactiveStore.current) == null ? void 0 : _c.hmsNotifications,
|
6897
6931
|
stats: (_d = reactiveStore.current) == null ? void 0 : _d.hmsStats
|
6898
6932
|
},
|
6899
|
-
/* @__PURE__ */
|
6933
|
+
/* @__PURE__ */ React59.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ React59.createElement(RoomLayoutContext.Consumer, null, (data) => {
|
6900
6934
|
var _a8;
|
6901
6935
|
const layout = data == null ? void 0 : data.layout;
|
6902
6936
|
const theme2 = ((_a8 = layout == null ? void 0 : layout.themes) == null ? void 0 : _a8[0]) || {};
|
@@ -6905,7 +6939,7 @@ var HMSPrebuilt = React58.forwardRef(
|
|
6905
6939
|
if (typography2 == null ? void 0 : typography2.font_family) {
|
6906
6940
|
fontFamily = [`${typography2 == null ? void 0 : typography2.font_family}`, ...fontFamily];
|
6907
6941
|
}
|
6908
|
-
return /* @__PURE__ */
|
6942
|
+
return /* @__PURE__ */ React59.createElement(
|
6909
6943
|
HMSThemeProvider,
|
6910
6944
|
{
|
6911
6945
|
themeType: `${theme2.name}-${Date.now()}`,
|
@@ -6918,9 +6952,9 @@ var HMSPrebuilt = React58.forwardRef(
|
|
6918
6952
|
}
|
6919
6953
|
}
|
6920
6954
|
},
|
6921
|
-
/* @__PURE__ */
|
6922
|
-
/* @__PURE__ */
|
6923
|
-
/* @__PURE__ */
|
6955
|
+
/* @__PURE__ */ React59.createElement(AppData, { appDetails: metadata, tokenEndpoint: tokenByRoomIdRoleEndpoint }),
|
6956
|
+
/* @__PURE__ */ React59.createElement(Init, null),
|
6957
|
+
/* @__PURE__ */ React59.createElement(
|
6924
6958
|
Box,
|
6925
6959
|
{
|
6926
6960
|
id: "prebuilt-container",
|
@@ -6931,7 +6965,7 @@ var HMSPrebuilt = React58.forwardRef(
|
|
6931
6965
|
"-webkit-text-size-adjust": "100%"
|
6932
6966
|
}
|
6933
6967
|
},
|
6934
|
-
/* @__PURE__ */
|
6968
|
+
/* @__PURE__ */ React59.createElement(AppRoutes, { authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint, defaultAuthToken: authToken })
|
6935
6969
|
)
|
6936
6970
|
);
|
6937
6971
|
}))
|
@@ -6942,42 +6976,42 @@ var HMSPrebuilt = React58.forwardRef(
|
|
6942
6976
|
HMSPrebuilt.displayName = "HMSPrebuilt";
|
6943
6977
|
var Redirector = ({ showPreview }) => {
|
6944
6978
|
const { roomId, role } = useParams5();
|
6945
|
-
return /* @__PURE__ */
|
6979
|
+
return /* @__PURE__ */ React59.createElement(Navigate, { to: `/${showPreview ? "preview" : "meeting"}/${roomId}/${role || ""}` });
|
6946
6980
|
};
|
6947
6981
|
var RouteList = () => {
|
6948
6982
|
const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
|
6949
6983
|
const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
|
6950
6984
|
useAutoStartStreaming();
|
6951
|
-
return /* @__PURE__ */
|
6985
|
+
return /* @__PURE__ */ React59.createElement(Routes, null, isPreviewScreenEnabled ? /* @__PURE__ */ React59.createElement(Route, { path: "preview" }, /* @__PURE__ */ React59.createElement(
|
6952
6986
|
Route,
|
6953
6987
|
{
|
6954
6988
|
path: ":roomId/:role",
|
6955
|
-
element: /* @__PURE__ */
|
6989
|
+
element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React59.createElement(PreviewContainer_default, null))
|
6956
6990
|
}
|
6957
|
-
), /* @__PURE__ */
|
6991
|
+
), /* @__PURE__ */ React59.createElement(
|
6958
6992
|
Route,
|
6959
6993
|
{
|
6960
6994
|
path: ":roomId",
|
6961
|
-
element: /* @__PURE__ */
|
6995
|
+
element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React59.createElement(PreviewContainer_default, null))
|
6962
6996
|
}
|
6963
|
-
)) : null, /* @__PURE__ */
|
6997
|
+
)) : null, /* @__PURE__ */ React59.createElement(Route, { path: "meeting" }, /* @__PURE__ */ React59.createElement(
|
6964
6998
|
Route,
|
6965
6999
|
{
|
6966
7000
|
path: ":roomId/:role",
|
6967
|
-
element: /* @__PURE__ */
|
7001
|
+
element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React59.createElement(Conference, null))
|
6968
7002
|
}
|
6969
|
-
), /* @__PURE__ */
|
7003
|
+
), /* @__PURE__ */ React59.createElement(
|
6970
7004
|
Route,
|
6971
7005
|
{
|
6972
7006
|
path: ":roomId",
|
6973
|
-
element: /* @__PURE__ */
|
7007
|
+
element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React59.createElement(Conference, null))
|
6974
7008
|
}
|
6975
|
-
)), isLeaveScreenEnabled ? /* @__PURE__ */
|
7009
|
+
)), isLeaveScreenEnabled ? /* @__PURE__ */ React59.createElement(Route, { path: "leave" }, /* @__PURE__ */ React59.createElement(Route, { path: ":roomId/:role", element: /* @__PURE__ */ React59.createElement(PostLeave_default, null) }), /* @__PURE__ */ React59.createElement(Route, { path: ":roomId", element: /* @__PURE__ */ React59.createElement(PostLeave_default, null) })) : null, /* @__PURE__ */ React59.createElement(Route, { path: "/:roomId/:role", element: /* @__PURE__ */ React59.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }), /* @__PURE__ */ React59.createElement(Route, { path: "/:roomId/", element: /* @__PURE__ */ React59.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }));
|
6976
7010
|
};
|
6977
7011
|
var BackSwipe = () => {
|
6978
7012
|
const isConnectedToRoom = useHMSStore26(selectIsConnectedToRoom6);
|
6979
7013
|
const hmsActions = useHMSActions18();
|
6980
|
-
|
7014
|
+
useEffect29(() => {
|
6981
7015
|
const onRouteLeave = () => __async(void 0, null, function* () {
|
6982
7016
|
if (isConnectedToRoom) {
|
6983
7017
|
yield hmsActions.leave();
|
@@ -6992,7 +7026,7 @@ var BackSwipe = () => {
|
|
6992
7026
|
};
|
6993
7027
|
var Router = ({ children }) => {
|
6994
7028
|
const { roomId, role, roomCode } = useHMSPrebuiltContext();
|
6995
|
-
return [roomId, role, roomCode].every((value) => !value) ? /* @__PURE__ */
|
7029
|
+
return [roomId, role, roomCode].every((value) => !value) ? /* @__PURE__ */ React59.createElement(BrowserRouter, null, children) : /* @__PURE__ */ React59.createElement(MemoryRouter, { initialEntries: [`/${roomCode ? roomCode : `${roomId}/${role || ""}`}`], initialIndex: 0 }, children);
|
6996
7030
|
};
|
6997
7031
|
function AppRoutes({
|
6998
7032
|
authTokenByRoomCodeEndpoint,
|
@@ -7000,7 +7034,7 @@ function AppRoutes({
|
|
7000
7034
|
}) {
|
7001
7035
|
const roomLayout = useRoomLayout();
|
7002
7036
|
const isNotificationsDisabled = useIsNotificationDisabled();
|
7003
|
-
return /* @__PURE__ */
|
7037
|
+
return /* @__PURE__ */ React59.createElement(Router, null, /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(ToastContainer, null), /* @__PURE__ */ React59.createElement(Notifications, null), /* @__PURE__ */ React59.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ React59.createElement(FlyingEmoji, null), /* @__PURE__ */ React59.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ React59.createElement(HeadlessEndRoomListener, null), /* @__PURE__ */ React59.createElement(KeyboardHandler, null), /* @__PURE__ */ React59.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && /* @__PURE__ */ React59.createElement(Routes, null, /* @__PURE__ */ React59.createElement(Route, { path: "/*", element: /* @__PURE__ */ React59.createElement(RouteList, null) }))));
|
7004
7038
|
}
|
7005
7039
|
|
7006
7040
|
// src/Progress/index.tsx
|
@@ -7109,9 +7143,10 @@ export {
|
|
7109
7143
|
StopRecordingInSheet,
|
7110
7144
|
Header2 as Header,
|
7111
7145
|
AudioVideoToggle,
|
7112
|
-
Chip_default,
|
7113
7146
|
ConnectionIndicator,
|
7114
7147
|
TileConnection_default,
|
7148
|
+
PrebuiltAudioIndicator,
|
7149
|
+
PrebuiltAttributeBox,
|
7115
7150
|
DialogDropdownTrigger,
|
7116
7151
|
useDropdownSelection,
|
7117
7152
|
SettingsModal_default,
|
@@ -7122,4 +7157,4 @@ export {
|
|
7122
7157
|
HMSPrebuilt,
|
7123
7158
|
Progress
|
7124
7159
|
};
|
7125
|
-
//# sourceMappingURL=chunk-
|
7160
|
+
//# sourceMappingURL=chunk-PRM33R4R.js.map
|