@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.
@@ -9,7 +9,7 @@ import {
9
9
  Slider,
10
10
  ToastManager,
11
11
  useTheme
12
- } from "./chunk-ANQRGVIX.js";
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-XQ2NRKIW.js";
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-U53QN3AC.js.map
863
+ //# sourceMappingURL=HLSView-VGJ2XUDT.js.map
@@ -1,3 +1,3 @@
1
1
  export declare const useRedirectToLeave: () => {
2
- redirectToLeave: (timeout?: number) => Promise<void>;
2
+ redirectToLeave: (timeout?: number) => void;
3
3
  };
@@ -4,7 +4,7 @@ import {
4
4
  Loading,
5
5
  Tooltip,
6
6
  __async
7
- } from "./chunk-XQ2NRKIW.js";
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-PMLQPJB6.js.map
175
+ //# sourceMappingURL=VirtualBackground-2VZVBRIC.js.map
@@ -38,7 +38,7 @@ import {
38
38
  theme,
39
39
  toastAnimation,
40
40
  translateAcross
41
- } from "./chunk-XQ2NRKIW.js";
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]: id ? POLL_VIEWS.VOTE : isOpen && view ? null : POLL_VIEWS.CREATE_POLL_QUIZ
2497
+ [POLL_STATE.view]: newView
2497
2498
  });
2498
- toggleSidepane();
2499
+ hmsActions.setAppData(APP_DATA.sidePane, newView ? SIDE_PANE_OPTIONS.POLLS : "");
2499
2500
  },
2500
- [view, setPollState, isOpen, toggleSidepane]
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
- console.log("Stopping HLS stream");
3704
- yield hmsActions.stopHLSStreaming();
3705
- ToastManager.addToast({ title: "Stopping the stream" });
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-PMLQPJB6.js"));
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-PMLQPJB6.js"));
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-U53QN3AC.js"));
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
- return new Promise((resolve) => {
13106
- setTimeout(() => {
13107
- PictureInPicture.stop().catch(() => console.error("stopping pip"));
13108
- ToastManager.clearAllToast();
13109
- onLeave == null ? void 0 : onLeave();
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
- redirectToLeave().then(() => {
13152
- const goTo = isPreviewScreenEnabled ? "preview" /* PREVIEW */ : "meeting" /* MEETING */;
13153
- setActiveState(isLeaveScreenEnabled ? "leave" /* LEAVE */ : goTo);
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 useMedia26 } from "react-use";
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 = useMedia26(config.media.md);
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 useMedia27 } from "react-use";
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 = useMedia27(config.media.md);
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-ANQRGVIX.js.map
14450
+ //# sourceMappingURL=chunk-EDGWHFCM.js.map