@100mslive/roomkit-react 0.1.9-alpha.0 → 0.1.9
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-U53QN3AC.js → HLSView-VGJ2XUDT.js} +3 -3
- package/dist/Prebuilt/components/hooks/useRedirectToLeave.d.ts +1 -1
- package/dist/{VirtualBackground-PMLQPJB6.js → VirtualBackground-2VZVBRIC.js} +2 -2
- package/dist/{chunk-ANQRGVIX.js → chunk-EDGWHFCM.js} +45 -36
- package/dist/chunk-EDGWHFCM.js.map +7 -0
- package/dist/{chunk-XQ2NRKIW.js → chunk-SONHO3VM.js} +2 -2
- package/dist/{chunk-XQ2NRKIW.js.map → chunk-SONHO3VM.js.map} +1 -1
- package/dist/index.cjs.js +48 -38
- package/dist/index.cjs.js.map +3 -3
- package/dist/index.js +2 -2
- package/dist/meta.cjs.json +36 -21
- package/dist/meta.esbuild.json +55 -40
- package/package.json +6 -6
- package/src/Prebuilt/AppStateContext.tsx +3 -4
- package/src/Prebuilt/components/AppData/useSidepane.js +5 -4
- package/src/Prebuilt/components/Leave/LeaveRoom.tsx +5 -3
- package/src/Prebuilt/components/MwebLandscapePrompt.tsx +10 -4
- package/src/Prebuilt/components/Notifications/Notifications.tsx +1 -1
- package/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx +5 -1
- package/src/Prebuilt/components/Polls/CreateQuestions/QuestionForm.jsx +6 -2
- package/src/Prebuilt/components/Polls/Voting/Voting.jsx +1 -1
- package/src/Prebuilt/components/hooks/useRedirectToLeave.tsx +5 -8
- package/dist/chunk-ANQRGVIX.js.map +0 -7
- /package/dist/{HLSView-U53QN3AC.js.map → HLSView-VGJ2XUDT.js.map} +0 -0
- /package/dist/{VirtualBackground-PMLQPJB6.js.map → VirtualBackground-2VZVBRIC.js.map} +0 -0
@@ -9,7 +9,7 @@ import {
|
|
9
9
|
Slider,
|
10
10
|
ToastManager,
|
11
11
|
useTheme
|
12
|
-
} from "./chunk-
|
12
|
+
} from "./chunk-EDGWHFCM.js";
|
13
13
|
import {
|
14
14
|
Box,
|
15
15
|
Flex,
|
@@ -23,7 +23,7 @@ import {
|
|
23
23
|
__spreadValues,
|
24
24
|
config,
|
25
25
|
styled
|
26
|
-
} from "./chunk-
|
26
|
+
} from "./chunk-SONHO3VM.js";
|
27
27
|
|
28
28
|
// src/Prebuilt/layouts/HLSView.jsx
|
29
29
|
import React10, { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
|
@@ -860,4 +860,4 @@ var HLSView_default = HLSView;
|
|
860
860
|
export {
|
861
861
|
HLSView_default as default
|
862
862
|
};
|
863
|
-
//# sourceMappingURL=HLSView-
|
863
|
+
//# sourceMappingURL=HLSView-VGJ2XUDT.js.map
|
@@ -4,7 +4,7 @@ import {
|
|
4
4
|
Loading,
|
5
5
|
Tooltip,
|
6
6
|
__async
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-SONHO3VM.js";
|
8
8
|
|
9
9
|
// src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
|
10
10
|
import React, { useEffect, useRef, useState } from "react";
|
@@ -172,4 +172,4 @@ export {
|
|
172
172
|
VirtualBackground,
|
173
173
|
VirtualBackground_default as default
|
174
174
|
};
|
175
|
-
//# sourceMappingURL=VirtualBackground-
|
175
|
+
//# sourceMappingURL=VirtualBackground-2VZVBRIC.js.map
|
@@ -38,7 +38,7 @@ import {
|
|
38
38
|
theme,
|
39
39
|
toastAnimation,
|
40
40
|
translateAcross
|
41
|
-
} from "./chunk-
|
41
|
+
} from "./chunk-SONHO3VM.js";
|
42
42
|
|
43
43
|
// src/Button/Button.tsx
|
44
44
|
import React2 from "react";
|
@@ -2485,19 +2485,20 @@ var useSidepaneToggle = (sidepaneType) => {
|
|
2485
2485
|
return toggleSidepane;
|
2486
2486
|
};
|
2487
2487
|
var usePollViewToggle = () => {
|
2488
|
+
const hmsActions = useHMSActions2();
|
2488
2489
|
const { view, setPollState } = usePollViewState();
|
2489
2490
|
const isOpen = useSidepaneState() === SIDE_PANE_OPTIONS.POLLS;
|
2490
|
-
const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.POLLS);
|
2491
2491
|
const togglePollView = useCallback4(
|
2492
2492
|
(id) => {
|
2493
2493
|
id = typeof id === "string" ? id : void 0;
|
2494
|
+
const newView = id ? POLL_VIEWS.VOTE : isOpen && view ? null : POLL_VIEWS.CREATE_POLL_QUIZ;
|
2494
2495
|
setPollState({
|
2495
2496
|
[POLL_STATE.pollInView]: id,
|
2496
|
-
[POLL_STATE.view]:
|
2497
|
+
[POLL_STATE.view]: newView
|
2497
2498
|
});
|
2498
|
-
|
2499
|
+
hmsActions.setAppData(APP_DATA.sidePane, newView ? SIDE_PANE_OPTIONS.POLLS : "");
|
2499
2500
|
},
|
2500
|
-
[view, setPollState, isOpen
|
2501
|
+
[hmsActions, view, setPollState, isOpen]
|
2501
2502
|
);
|
2502
2503
|
return togglePollView;
|
2503
2504
|
};
|
@@ -3700,9 +3701,11 @@ var LeaveRoom = ({ screenType }) => {
|
|
3700
3701
|
const hmsActions = useHMSActions6();
|
3701
3702
|
const stopStream = () => __async(void 0, null, function* () {
|
3702
3703
|
try {
|
3703
|
-
|
3704
|
-
|
3705
|
-
|
3704
|
+
if (permissions == null ? void 0 : permissions.hlsStreaming) {
|
3705
|
+
console.log("Stopping HLS stream");
|
3706
|
+
yield hmsActions.stopHLSStreaming();
|
3707
|
+
ToastManager.addToast({ title: "Stopping the stream" });
|
3708
|
+
}
|
3706
3709
|
} catch (e) {
|
3707
3710
|
console.error("Error stopping stream", e);
|
3708
3711
|
ToastManager.addToast({ title: "Error in stopping the stream", type: "error" });
|
@@ -8093,7 +8096,7 @@ var PollsToggle = () => {
|
|
8093
8096
|
};
|
8094
8097
|
|
8095
8098
|
// src/Prebuilt/components/Footer/Footer.tsx
|
8096
|
-
var VirtualBackground = React71.lazy(() => import("./VirtualBackground-
|
8099
|
+
var VirtualBackground = React71.lazy(() => import("./VirtualBackground-2VZVBRIC.js"));
|
8097
8100
|
var Footer2 = ({
|
8098
8101
|
screenType,
|
8099
8102
|
elements
|
@@ -8424,7 +8427,7 @@ var Form = styled("form", {
|
|
8424
8427
|
var PreviewForm_default = PreviewForm;
|
8425
8428
|
|
8426
8429
|
// src/Prebuilt/components/Preview/PreviewJoin.tsx
|
8427
|
-
var VirtualBackground2 = React78.lazy(() => import("./VirtualBackground-
|
8430
|
+
var VirtualBackground2 = React78.lazy(() => import("./VirtualBackground-2VZVBRIC.js"));
|
8428
8431
|
var getParticipantChipContent = (peerCount = 0) => {
|
8429
8432
|
if (peerCount === 0) {
|
8430
8433
|
return "You are the first to join";
|
@@ -10406,7 +10409,10 @@ var AddMenu = () => {
|
|
10406
10409
|
};
|
10407
10410
|
var PrevMenu = () => {
|
10408
10411
|
var _a7;
|
10409
|
-
const polls = (_a7 = useHMSStore48(selectPolls2)) == null ? void 0 : _a7.filter((poll) => poll.state === "started" || poll.state === "stopped")
|
10412
|
+
const polls = (_a7 = useHMSStore48(selectPolls2)) == null ? void 0 : _a7.filter((poll) => poll.state === "started" || poll.state === "stopped").sort((a, b) => {
|
10413
|
+
var _a8, _b7;
|
10414
|
+
return (((_a8 = b.createdAt) == null ? void 0 : _a8.getTime()) || 0) - (((_b7 = a.createdAt) == null ? void 0 : _b7.getTime()) || 0);
|
10415
|
+
}).sort((a, b) => (b.state === "started" ? 1 : 0) - (a.state === "started" ? 1 : 0));
|
10410
10416
|
return (polls == null ? void 0 : polls.length) ? /* @__PURE__ */ React100.createElement(
|
10411
10417
|
Flex,
|
10412
10418
|
{
|
@@ -10871,7 +10877,7 @@ var QuestionForm = ({ question, index, length, onSave, removeQuestion, isQuiz })
|
|
10871
10877
|
Tooltip,
|
10872
10878
|
{
|
10873
10879
|
disabled: isValid,
|
10874
|
-
title: `Please fill all the fields ${isQuiz ? "and mark the correct answer(s)" : ""} to continue`,
|
10880
|
+
title: options.length === 0 ? "At least one option is required for a question" : `Please fill all the fields ${isQuiz ? "and mark the correct answer(s)" : ""} to continue`,
|
10875
10881
|
boxCss: { maxWidth: "$40" }
|
10876
10882
|
},
|
10877
10883
|
/* @__PURE__ */ React107.createElement(
|
@@ -10901,7 +10907,7 @@ var isValidQuestion = ({ text, type, options, isQuiz = false }) => {
|
|
10901
10907
|
if (![QUESTION_TYPE.SINGLE_CHOICE, QUESTION_TYPE.MULTIPLE_CHOICE].includes(type)) {
|
10902
10908
|
return true;
|
10903
10909
|
}
|
10904
|
-
const everyOptionHasText = options.every((option) => option && isValidTextInput(option.text, 1));
|
10910
|
+
const everyOptionHasText = options.length > 0 && options.every((option) => option && isValidTextInput(option.text, 1));
|
10905
10911
|
const hasCorrectAnswer = options.some((option) => option.isCorrectAnswer);
|
10906
10912
|
if (!isQuiz) {
|
10907
10913
|
return everyOptionHasText;
|
@@ -11357,7 +11363,7 @@ var Voting = ({ id, toggleVoting }) => {
|
|
11357
11363
|
},
|
11358
11364
|
/* @__PURE__ */ React113.createElement(CrossIcon14, { onClick: toggleVoting })
|
11359
11365
|
)
|
11360
|
-
), /* @__PURE__ */ React113.createElement(Flex, { direction: "column", css: { p: "$8 $10" } }, /* @__PURE__ */ React113.createElement(Flex, { align: "center" }, /* @__PURE__ */ React113.createElement(Box, { css: { flex: "auto" } }, /* @__PURE__ */ React113.createElement(Text, { css: { color: "$on_surface_medium", fontWeight: "$semiBold" } }, pollCreatorName || "Participant", " started a ", poll.type)), poll.state === "started" && isLocalPeerCreator && /* @__PURE__ */ React113.createElement(Box, { css: { flex: "initial" } }, /* @__PURE__ */ React113.createElement(
|
11366
|
+
), /* @__PURE__ */ React113.createElement(Flex, { direction: "column", css: { p: "$8 $10", overflowY: "auto" } }, /* @__PURE__ */ React113.createElement(Flex, { align: "center" }, /* @__PURE__ */ React113.createElement(Box, { css: { flex: "auto" } }, /* @__PURE__ */ React113.createElement(Text, { css: { color: "$on_surface_medium", fontWeight: "$semiBold" } }, pollCreatorName || "Participant", " started a ", poll.type)), poll.state === "started" && isLocalPeerCreator && /* @__PURE__ */ React113.createElement(Box, { css: { flex: "initial" } }, /* @__PURE__ */ React113.createElement(
|
11361
11367
|
Button,
|
11362
11368
|
{
|
11363
11369
|
variant: "danger",
|
@@ -12543,7 +12549,7 @@ var WaitingView = React121.memo(() => {
|
|
12543
12549
|
});
|
12544
12550
|
|
12545
12551
|
// src/Prebuilt/layouts/VideoStreamingSection.tsx
|
12546
|
-
var HLSView = React122.lazy(() => import("./HLSView-
|
12552
|
+
var HLSView = React122.lazy(() => import("./HLSView-VGJ2XUDT.js"));
|
12547
12553
|
var VideoStreamingSection = ({
|
12548
12554
|
screenType,
|
12549
12555
|
elements,
|
@@ -13102,14 +13108,11 @@ var useRedirectToLeave = () => {
|
|
13102
13108
|
const { onLeave } = useHMSPrebuiltContext();
|
13103
13109
|
const redirect = useCallback29(
|
13104
13110
|
(timeout = 0) => {
|
13105
|
-
|
13106
|
-
|
13107
|
-
|
13108
|
-
|
13109
|
-
|
13110
|
-
resolve();
|
13111
|
-
}, timeout);
|
13112
|
-
});
|
13111
|
+
setTimeout(() => {
|
13112
|
+
PictureInPicture.stop().catch(() => console.error("stopping pip"));
|
13113
|
+
ToastManager.clearAllToast();
|
13114
|
+
onLeave == null ? void 0 : onLeave();
|
13115
|
+
}, timeout);
|
13113
13116
|
},
|
13114
13117
|
[onLeave]
|
13115
13118
|
);
|
@@ -13148,10 +13151,9 @@ var useAppStateManager = () => {
|
|
13148
13151
|
if (roomState === HMSRoomState7.Connected) {
|
13149
13152
|
setActiveState("meeting" /* MEETING */);
|
13150
13153
|
} else if (prevRoomState && [HMSRoomState7.Reconnecting, HMSRoomState7.Connected].includes(prevRoomState) && [HMSRoomState7.Disconnecting, HMSRoomState7.Disconnected].includes(roomState)) {
|
13151
|
-
|
13152
|
-
|
13153
|
-
|
13154
|
-
});
|
13154
|
+
const goTo = isPreviewScreenEnabled ? "preview" /* PREVIEW */ : "meeting" /* MEETING */;
|
13155
|
+
setActiveState(isLeaveScreenEnabled ? "leave" /* LEAVE */ : goTo);
|
13156
|
+
redirectToLeave(1e3);
|
13155
13157
|
} else if (!prevRoomState && roomState === HMSRoomState7.Disconnected) {
|
13156
13158
|
setActiveState(isPreviewScreenEnabled ? "preview" /* PREVIEW */ : "meeting" /* MEETING */);
|
13157
13159
|
}
|
@@ -13205,21 +13207,28 @@ var LeaveScreen = () => {
|
|
13205
13207
|
|
13206
13208
|
// src/Prebuilt/components/MwebLandscapePrompt.tsx
|
13207
13209
|
import React130, { useEffect as useEffect44, useState as useState53 } from "react";
|
13210
|
+
import { useMedia as useMedia26 } from "react-use";
|
13208
13211
|
import { RefreshIcon } from "@100mslive/react-icons";
|
13209
13212
|
var MwebLandscapePrompt = () => {
|
13210
13213
|
const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState53(false);
|
13214
|
+
const isLandscape = useMedia26(config.media.ls);
|
13211
13215
|
useEffect44(() => {
|
13216
|
+
var _a7;
|
13217
|
+
if (!((_a7 = window.screen) == null ? void 0 : _a7.orientation)) {
|
13218
|
+
setShowMwebLandscapePrompt(isLandscape);
|
13219
|
+
return;
|
13220
|
+
}
|
13212
13221
|
const handleRotation = () => {
|
13213
13222
|
const angle = window.screen.orientation.angle;
|
13214
|
-
const type = window.screen.orientation.type;
|
13215
|
-
setShowMwebLandscapePrompt(angle >= 90 && type.includes("landscape"));
|
13223
|
+
const type = window.screen.orientation.type || "";
|
13224
|
+
setShowMwebLandscapePrompt(angle ? angle >= 90 && type.includes("landscape") : isLandscape);
|
13216
13225
|
};
|
13217
13226
|
handleRotation();
|
13218
13227
|
window.screen.orientation.addEventListener("change", handleRotation);
|
13219
13228
|
return () => {
|
13220
13229
|
window.screen.orientation.removeEventListener("change", handleRotation);
|
13221
13230
|
};
|
13222
|
-
}, []);
|
13231
|
+
}, [isLandscape]);
|
13223
13232
|
return /* @__PURE__ */ React130.createElement(Dialog.Root, { open: showMwebLandscapePrompt, onOpenChange: setShowMwebLandscapePrompt }, /* @__PURE__ */ React130.createElement(Dialog.Portal, null, /* @__PURE__ */ React130.createElement(Dialog.Overlay, null), /* @__PURE__ */ React130.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React130.createElement(Box, null, /* @__PURE__ */ React130.createElement(
|
13224
13233
|
Flex,
|
13225
13234
|
{
|
@@ -13563,7 +13572,7 @@ var PeerNotifications = () => {
|
|
13563
13572
|
|
13564
13573
|
// src/Prebuilt/components/Notifications/PermissionErrorModal.tsx
|
13565
13574
|
import React134, { useEffect as useEffect47, useState as useState55 } from "react";
|
13566
|
-
import { useMedia as
|
13575
|
+
import { useMedia as useMedia27 } from "react-use";
|
13567
13576
|
import { HMSNotificationTypes as HMSNotificationTypes4, useHMSNotifications as useHMSNotifications4 } from "@100mslive/react-sdk";
|
13568
13577
|
|
13569
13578
|
// src/Prebuilt/images/android-perm-1.png
|
@@ -13577,7 +13586,7 @@ function PermissionErrorModal() {
|
|
13577
13586
|
const notification = useHMSNotifications4(HMSNotificationTypes4.ERROR);
|
13578
13587
|
const [deviceType, setDeviceType] = useState55("");
|
13579
13588
|
const [isSystemError, setIsSystemError] = useState55(false);
|
13580
|
-
const isMobile =
|
13589
|
+
const isMobile = useMedia27(config.media.md);
|
13581
13590
|
useEffect47(() => {
|
13582
13591
|
var _a7, _b7, _c, _d, _e;
|
13583
13592
|
if (!notification || ((_a7 = notification.data) == null ? void 0 : _a7.code) !== 3001 && ((_b7 = notification.data) == null ? void 0 : _b7.code) !== 3011 || ((_c = notification.data) == null ? void 0 : _c.code) === 3001 && ((_d = notification.data) == null ? void 0 : _d.message.includes("screen"))) {
|
@@ -13895,7 +13904,7 @@ function Notifications() {
|
|
13895
13904
|
break;
|
13896
13905
|
case HMSNotificationTypes9.POLL_STARTED:
|
13897
13906
|
if (notification.data.startedBy !== localPeerID) {
|
13898
|
-
const pollStartedBy = vanillaStore.getState(selectPeerNameByID6(notification.data.startedBy));
|
13907
|
+
const pollStartedBy = vanillaStore.getState(selectPeerNameByID6(notification.data.startedBy)) || "Participant";
|
13899
13908
|
ToastManager.addToast({
|
13900
13909
|
title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`,
|
13901
13910
|
action: /* @__PURE__ */ React138.createElement(
|
@@ -13995,7 +14004,7 @@ var ToastContainer = () => {
|
|
13995
14004
|
|
13996
14005
|
// src/Prebuilt/plugins/FlyingEmoji.jsx
|
13997
14006
|
import React142, { useCallback as useCallback32, useEffect as useEffect54, useMemo as useMemo17, useState as useState60 } from "react";
|
13998
|
-
import { useMedia as
|
14007
|
+
import { useMedia as useMedia28 } from "react-use";
|
13999
14008
|
import {
|
14000
14009
|
selectLocalPeerID as selectLocalPeerID15,
|
14001
14010
|
selectPeerNameByID as selectPeerNameByID7,
|
@@ -14030,7 +14039,7 @@ function FlyingEmoji() {
|
|
14030
14039
|
const localPeerId = useHMSStore68(selectLocalPeerID15);
|
14031
14040
|
const vanillaStore = useHMSVanillaStore13();
|
14032
14041
|
const [emojis, setEmojis] = useState60([]);
|
14033
|
-
const isMobile =
|
14042
|
+
const isMobile = useMedia28(config.media.md);
|
14034
14043
|
const startingPoints = useMemo17(() => getStartingPoints(isMobile), [isMobile]);
|
14035
14044
|
const showFlyingEmoji = useCallback32(
|
14036
14045
|
({ emojiId, senderId }) => {
|
@@ -14438,4 +14447,4 @@ export {
|
|
14438
14447
|
HMSPrebuilt,
|
14439
14448
|
Progress
|
14440
14449
|
};
|
14441
|
-
//# sourceMappingURL=chunk-
|
14450
|
+
//# sourceMappingURL=chunk-EDGWHFCM.js.map
|