@100mslive/roomkit-react 0.3.22-alpha.3 → 0.3.22-alpha.5

package/dist/chunk-VKORP2LF.js

@@ -1,41 +0,0 @@
-import {
-  useMyMetadata
-} from "./chunk-RTWNTT77.js";
-import {
-  IconButton_default,
-  Tooltip,
-  useRoomLayoutConferencingScreen
-} from "./chunk-ENHSO6YN.js";
-import {
-  __async,
-  init_define_process_env
-} from "./chunk-TBXRX6MK.js";
-
-// src/Prebuilt/components/RaiseHand.tsx
-init_define_process_env();
-import React from "react";
-import { HandIcon, HandRaiseSlashedIcon } from "@100mslive/react-icons";
-var RaiseHand = ({ css }) => {
-  const { isHandRaised, toggleHandRaise } = useMyMetadata();
-  const { elements } = useRoomLayoutConferencingScreen();
-  if (!elements.hand_raise) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ React.createElement(
-    IconButton_default,
-    {
-      "data-testid": "hand_raise_btn",
-      css,
-      active: !isHandRaised,
-      onClick: () => __async(void 0, null, function* () {
-        return yield toggleHandRaise();
-      })
-    },
-    isHandRaised ? /* @__PURE__ */ React.createElement(HandRaiseSlashedIcon, null) : /* @__PURE__ */ React.createElement(HandIcon, null)
-  ));
-};
-
-export {
-  RaiseHand
-};
-//# sourceMappingURL=chunk-VKORP2LF.js.map

package/dist/chunk-VKORP2LF.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/components/RaiseHand.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { HandIcon, HandRaiseSlashedIcon } from '@100mslive/react-icons';\nimport { CSS } from '../../Theme';\nimport { Tooltip } from '../../Tooltip';\n// @ts-ignore: No implicit Any\nimport IconButton from '../IconButton';\nimport { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';\nimport { useMyMetadata } from './hooks/useMetadata';\n\nexport const RaiseHand = ({ css }: { css?: CSS }) => {\n  const { isHandRaised, toggleHandRaise } = useMyMetadata();\n  const { elements } = useRoomLayoutConferencingScreen();\n\n  if (!elements.hand_raise) {\n    return null;\n  }\n\n  return (\n    <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>\n      <IconButton\n        data-testid=\"hand_raise_btn\"\n        css={css}\n        active={!isHandRaised}\n        onClick={async () => await toggleHandRaise()}\n      >\n        {isHandRaised ? <HandRaiseSlashedIcon /> : <HandIcon />}\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA,OAAO,WAAW;AAClB,SAAS,UAAU,4BAA4B;AAQxC,IAAM,YAAY,CAAC,EAAE,IAAI,MAAqB;AACnD,QAAM,EAAE,cAAc,gBAAgB,IAAI,cAAc;AACxD,QAAM,EAAE,SAAS,IAAI,gCAAgC;AAErD,MAAI,CAAC,SAAS,YAAY;AACxB,WAAO;AAAA,EACT;AAEA,SACE,oCAAC,WAAQ,OAAO,eAAe,eAAe,gBAC5C;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ;AAAA,MACA,QAAQ,CAAC;AAAA,MACT,SAAS,MAAS;AAAG,qBAAM,gBAAgB;AAAA;AAAA;AAAA,IAE1C,eAAe,oCAAC,0BAAqB,IAAK,oCAAC,cAAS;AAAA,EACvD,CACF;AAEJ;",
-  "names": []
-}

package/dist/chunk-YYVDCP5Z.js

@@ -1,136 +0,0 @@
-import {
-  useVideoTileContext
-} from "./chunk-PJQSPAFZ.js";
-import {
-  AudioVideoToggle,
-  VideoTile_default
-} from "./chunk-26D5FDBW.js";
-import {
-  Text
-} from "./chunk-JKWX7W4K.js";
-import {
-  Box,
-  Flex
-} from "./chunk-7QZJMUHM.js";
-import {
-  IconButton_default,
-  useSetAppDataByKey
-} from "./chunk-ENHSO6YN.js";
-import {
-  APP_DATA,
-  __spreadProps,
-  __spreadValues,
-  config,
-  init_define_process_env
-} from "./chunk-TBXRX6MK.js";
-
-// src/Prebuilt/components/InsetTile.tsx
-init_define_process_env();
-import React, { useEffect, useRef } from "react";
-import Draggable from "react-draggable";
-import { useMedia } from "react-use";
-import {
-  selectIsAllowedToPublish,
-  selectLocalPeer,
-  selectPeerByID,
-  selectVideoTrackByID,
-  useHMSStore
-} from "@100mslive/react-sdk";
-import { ExpandIcon } from "@100mslive/react-icons";
-var MinimisedTile = ({ setMinimised }) => {
-  return /* @__PURE__ */ React.createElement(Flex, { align: "center", css: { gap: "$6", r: "$1", bg: "$surface_default", p: "$4", color: "$on_surface_high" } }, /* @__PURE__ */ React.createElement(AudioVideoToggle, { hideOptions: true }), /* @__PURE__ */ React.createElement(Text, null, "You"), /* @__PURE__ */ React.createElement(
-    IconButton_default,
-    {
-      className: "__cancel-drag-event",
-      onClick: () => setMinimised(false),
-      css: { bg: "transparent", border: "transparent" }
-    },
-    /* @__PURE__ */ React.createElement(ExpandIcon, null)
-  ));
-};
-var insetHeightPx = 180;
-var insetMaxWidthPx = 240;
-var defaultMobileAspectRatio = 9 / 16;
-var desktopAspectRatio = 1 / defaultMobileAspectRatio;
-var InsetTile = ({ peerId }) => {
-  const isMobile = useMedia(config.media.md);
-  const isLandscape = useMedia(config.media.ls);
-  const selector = peerId ? selectPeerByID(peerId) : selectLocalPeer;
-  const peer = useHMSStore(selector);
-  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const videoTrack = useHMSStore(selectVideoTrackByID(peer == null ? void 0 : peer.videoTrack));
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const videoTileProps = useVideoTileContext();
-  let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
-  if ((videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) && !isMobile) {
-    aspectRatio = videoTrack.width / videoTrack.height;
-  }
-  let height = insetHeightPx;
-  let width = height * aspectRatio;
-  if (isLandscape && width > insetMaxWidthPx) {
-    width = 240;
-    height = width / aspectRatio;
-  }
-  const nodeRef = useRef(null);
-  useEffect(() => {
-    const node = nodeRef.current;
-    if (!node || !window.ResizeObserver) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.target === node.parentElement) {
-          node.style.transform = `translate(0,0)`;
-        }
-      });
-    });
-    node.parentElement && resizeObserver.observe(node.parentElement);
-    return () => {
-      (node == null ? void 0 : node.parentElement) && (resizeObserver == null ? void 0 : resizeObserver.unobserve(node.parentElement));
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-    };
-  }, []);
-  if (!isAllowedToPublish.video && !isAllowedToPublish.audio) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Draggable, { bounds: "parent", nodeRef, cancel: ".__cancel-drag-event" }, /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      ref: nodeRef,
-      css: __spreadValues({
-        position: "absolute",
-        bottom: 0,
-        right: 0,
-        zIndex: 10,
-        boxShadow: "0 0 8px 0 rgba(0,0,0,0.3)",
-        r: "$2"
-      }, !minimised ? {
-        aspectRatio,
-        h: height
-      } : {})
-    },
-    minimised ? /* @__PURE__ */ React.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ React.createElement(
-      VideoTile_default,
-      __spreadProps(__spreadValues({
-        peerId: peer == null ? void 0 : peer.id,
-        trackId: peer == null ? void 0 : peer.videoTrack,
-        rootCSS: {
-          size: "100%",
-          padding: 0
-        },
-        width,
-        height,
-        containerCSS: { background: "$surface_default" },
-        canMinimise: true,
-        isDragabble: true
-      }, videoTileProps), {
-        hideParticipantNameOnTile: true
-      })
-    )
-  ));
-};
-
-export {
-  InsetTile
-};
-//# sourceMappingURL=chunk-YYVDCP5Z.js.map

package/dist/chunk-YYVDCP5Z.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/components/InsetTile.tsx"],
-  "sourcesContent": ["import React, { useEffect, useRef } from 'react';\nimport Draggable from 'react-draggable';\nimport { useMedia } from 'react-use';\nimport {\n  selectIsAllowedToPublish,\n  selectLocalPeer,\n  selectPeerByID,\n  selectVideoTrackByID,\n  useHMSStore,\n} from '@100mslive/react-sdk';\nimport { ExpandIcon } from '@100mslive/react-icons';\nimport { Box, Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport { config as cssConfig } from '../../Theme';\n// @ts-ignore: No implicit Any\nimport IconButton from '../IconButton';\n// @ts-ignore: No implicit Any\nimport { AudioVideoToggle } from './AudioVideoToggle';\n// @ts-ignore: No implicit Any\nimport VideoTile from './VideoTile';\n// @ts-ignore: No implicit Any\nimport { useSetAppDataByKey } from './AppData/useUISettings';\nimport { useVideoTileContext } from './hooks/useVideoTileLayout';\n// @ts-ignore: No implicit Any\nimport { APP_DATA } from '../common/constants';\n\nconst MinimisedTile = ({ setMinimised }: { setMinimised: (value: boolean) => void }) => {\n  return (\n    <Flex align=\"center\" css={{ gap: '$6', r: '$1', bg: '$surface_default', p: '$4', color: '$on_surface_high' }}>\n      <AudioVideoToggle hideOptions={true} />\n      <Text>You</Text>\n      <IconButton\n        className=\"__cancel-drag-event\"\n        onClick={() => setMinimised(false)}\n        css={{ bg: 'transparent', border: 'transparent' }}\n      >\n        <ExpandIcon />\n      </IconButton>\n    </Flex>\n  );\n};\n\nconst insetHeightPx = 180;\nconst insetMaxWidthPx = 240;\nconst defaultMobileAspectRatio = 9 / 16;\nconst desktopAspectRatio = 1 / defaultMobileAspectRatio;\n\nexport const InsetTile = ({ peerId }: { peerId?: string }) => {\n  const isMobile = useMedia(cssConfig.media.md);\n  const isLandscape = useMedia(cssConfig.media.ls);\n  const selector = peerId ? selectPeerByID(peerId) : selectLocalPeer;\n  const peer = useHMSStore(selector);\n  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);\n  const videoTrack = useHMSStore(selectVideoTrackByID(peer?.videoTrack));\n  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);\n  const videoTileProps = useVideoTileContext();\n  let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;\n  if (videoTrack?.width && videoTrack?.height && !isMobile) {\n    aspectRatio = videoTrack.width / videoTrack.height;\n  }\n  let height = insetHeightPx;\n  let width = height * aspectRatio;\n  // Convert to 16/9 in landscape mode with a max width of 240\n  if (isLandscape && width > insetMaxWidthPx) {\n    width = 240;\n    height = width / aspectRatio;\n  }\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const node = nodeRef.current;\n    if (!node || !window.ResizeObserver) {\n      return;\n    }\n    const resizeObserver = new ResizeObserver(entries => {\n      entries.forEach(entry => {\n        if (entry.target === node.parentElement) {\n          // reset to original position on resize\n          node.style.transform = `translate(0,0)`;\n        }\n      });\n    });\n    node.parentElement && resizeObserver.observe(node.parentElement);\n    return () => {\n      node?.parentElement && resizeObserver?.unobserve(node.parentElement);\n      resizeObserver?.disconnect();\n    };\n  }, []);\n\n  if (!isAllowedToPublish.video && !isAllowedToPublish.audio) {\n    return null;\n  }\n\n  return (\n    <Draggable bounds=\"parent\" nodeRef={nodeRef} cancel=\".__cancel-drag-event\">\n      <Box\n        ref={nodeRef}\n        css={{\n          position: 'absolute',\n          bottom: 0,\n          right: 0,\n          zIndex: 10,\n          boxShadow: '0 0 8px 0 rgba(0,0,0,0.3)',\n          r: '$2',\n          ...(!minimised\n            ? {\n                aspectRatio: aspectRatio,\n                h: height,\n              }\n            : {}),\n        }}\n      >\n        {minimised ? (\n          <MinimisedTile setMinimised={setMinimised} />\n        ) : (\n          <VideoTile\n            peerId={peer?.id}\n            trackId={peer?.videoTrack}\n            rootCSS={{\n              size: '100%',\n              padding: 0,\n            }}\n            width={width}\n            height={height}\n            containerCSS={{ background: '$surface_default' }}\n            canMinimise\n            isDragabble\n            {...videoTileProps}\n            hideParticipantNameOnTile\n          />\n        )}\n      </Box>\n    </Draggable>\n  );\n};\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/empty-chat.svg

@@ -1,12 +0,0 @@
-<svg width="184" height="133" viewBox="0 0 184 133" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M144.885 91.3998C145.318 91.023 145.861 90.7947 146.433 90.7483L146.446 90.7473L169.355 89.1614C169.702 89.1376 170.049 89.2101 170.358 89.3712C170.662 89.5305 170.918 89.7702 171.096 90.0642C171.098 90.0672 171.1 90.0703 171.102 90.0734L171.104 90.0766C171.281 90.3744 171.373 90.7154 171.369 91.062C171.365 91.4097 171.265 91.7496 171.08 92.044L158.85 111.504C158.539 111.986 158.081 112.356 157.544 112.56C157.007 112.764 156.419 112.791 155.866 112.636C155.313 112.482 154.823 112.155 154.469 111.703C154.115 111.25 153.915 110.697 153.898 110.123C153.898 110.109 153.898 110.094 153.898 110.08L153.996 100.307L145.347 95.7858C145.334 95.779 145.321 95.7721 145.308 95.7649C144.811 95.4785 144.417 95.0404 144.186 94.5146C143.955 93.9888 143.898 93.4029 144.024 92.8425C144.15 92.2821 144.451 91.7765 144.885 91.3998ZM167.441 91.0088L146.603 92.8952C146.49 92.9053 146.383 92.9508 146.298 93.0251C146.211 93.1005 146.151 93.2016 146.125 93.3137C146.1 93.4257 146.112 93.5429 146.158 93.6481C146.202 93.7484 146.276 93.8327 146.369 93.89L155.26 98.296L167.441 91.0088ZM156.32 100.171L168.547 92.8564L157.039 110.339C156.976 110.434 156.886 110.506 156.78 110.547C156.673 110.587 156.555 110.593 156.444 110.562C156.334 110.531 156.236 110.466 156.165 110.375C156.097 110.289 156.058 110.184 156.052 110.075L156.32 100.171Z" fill="#444954"/>
-<path d="M83.3248 35.4156C71.7182 47.1017 51.2098 75.5175 62.0292 95.6918C75.5536 120.91 140.453 79.2983 115.364 67.6657C90.2756 56.0331 65.8818 122.018 101.568 120.391C116.398 118.62 131.221 114.699 145.703 105.512" stroke="#293042" stroke-width="2.25" stroke-dasharray="6 6"/>
-<rect x="0.00256348" y="0.5" width="173.524" height="58.3398" rx="29.1699" fill="#272A31"/>
-<g opacity="0.4">
-<rect x="24.7526" y="20.9312" width="111" height="4.5" rx="2.25" fill="#444954"/>
-</g>
-<g opacity="0.4">
-<rect x="38.2526" y="34.4312" width="110.25" height="4.5" rx="2.25" fill="#444954"/>
-</g>
-<path d="M40.3918 71.5547L28.4246 55.0999L52.3589 55.0999L40.3918 71.5547Z" fill="#272A31"/>
-</svg>

package/dist/transaction_error.svg

@@ -1,12 +0,0 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M70 68.3333V26.6667C70 24.825 68.5083 23.3333 66.6667 23.3333H13.3333C11.4917 23.3333 10 24.825 10 26.6667V68.3333C10 70.175 11.4917 71.6667 13.3333 71.6667H66.6667C68.5083 71.6667 70 70.175 70 68.3333Z" fill="#272A31"/>
-<path d="M20 31.6667H60C61.8417 31.6667 63.3333 33.1583 63.3333 35C63.3333 36.8417 61.8417 38.3333 60 38.3333H20C18.1583 38.3333 16.6667 36.8417 16.6667 35C16.6667 33.1583 18.1583 31.6667 20 31.6667Z" fill="#8F9099"/>
-<path d="M58.3333 36.6667V10C58.3333 9.08 57.5867 8.33334 56.6667 8.33334H55C55 9.25334 54.2533 10 53.3333 10C52.4133 10 51.6667 9.25334 51.6667 8.33334H48.3333C48.3333 9.25334 47.5867 10 46.6667 10C45.7467 10 45 9.25334 45 8.33334H41.6667C41.6667 9.25334 40.92 10 40 10C39.08 10 38.3333 9.25334 38.3333 8.33334H35C35 9.25334 34.2533 10 33.3333 10C32.4133 10 31.6667 9.25334 31.6667 8.33334H28.3333C28.3333 9.25334 27.5867 10 26.6667 10C25.7467 10 25 9.25334 25 8.33334H23.3333C22.4133 8.33334 21.6667 9.08 21.6667 10V36.6667H58.3333Z" fill="#C74E5B"/>
-<path d="M21.6667 43.3333H58.3333C60.175 43.3333 61.6667 44.825 61.6667 46.6667V50C61.6667 51.8417 60.175 53.3333 58.3333 53.3333H21.6667C19.825 53.3333 18.3333 51.8417 18.3333 50V46.6667C18.3333 44.825 19.825 43.3333 21.6667 43.3333Z" fill="#C5C6D0"/>
-<path d="M60 66.6667H55C54.08 66.6667 53.3333 65.92 53.3333 65V60C53.3333 59.08 54.08 58.3333 55 58.3333H60C60.92 58.3333 61.6667 59.08 61.6667 60V65C61.6667 65.92 60.92 66.6667 60 66.6667Z" fill="#C5C6D0"/>
-<path d="M25 66.6667H20C19.08 66.6667 18.3333 65.92 18.3333 65V60C18.3333 59.08 19.08 58.3333 20 58.3333H25C25.92 58.3333 26.6667 59.08 26.6667 60V65C26.6667 65.92 25.92 66.6667 25 66.6667ZM36.6667 66.6667H31.6667C30.7467 66.6667 30 65.92 30 65V60C30 59.08 30.7467 58.3333 31.6667 58.3333H36.6667C37.5867 58.3333 38.3333 59.08 38.3333 60V65C38.3333 65.92 37.5867 66.6667 36.6667 66.6667ZM48.3333 66.6667H43.3333C42.4133 66.6667 41.6667 65.92 41.6667 65V60C41.6667 59.08 42.4133 58.3333 43.3333 58.3333H48.3333C49.2533 58.3333 50 59.08 50 60V65C50 65.92 49.2533 66.6667 48.3333 66.6667Z" fill="#C5C6D0"/>
-<path d="M58.3333 35H21.6667V38.3333H58.3333V35Z" fill="#C74E5B"/>
-<path opacity="0.05" d="M45.3033 32.315C44.6383 32.315 44.01 32.0567 43.5367 31.585L40 28.0467L36.465 31.5817C35.9917 32.0533 35.365 32.3133 34.6967 32.3133C34.0283 32.3133 33.4 32.0533 32.9267 31.58L31.75 30.4033C31.2783 29.9333 31.0183 29.3033 31.0183 28.6333C31.0183 27.9667 31.2783 27.3383 31.75 26.8667L35.2867 23.3333L31.7517 19.7983C31.28 19.3283 31.02 18.7 31.02 18.0317C31.02 17.3617 31.28 16.7333 31.7517 16.2617L32.93 15.0833C33.4017 14.6117 34.0283 14.3517 34.6983 14.3517C35.3633 14.3517 35.9917 14.61 36.465 15.0817L40 18.62L43.535 15.0833C44.0083 14.6117 44.635 14.3517 45.3033 14.3517C45.9683 14.3517 46.5967 14.61 47.07 15.0817L48.25 16.2617C48.7217 16.7317 48.9817 17.3617 48.9817 18.0317C48.9817 18.6983 48.7217 19.3267 48.25 19.7983L44.7117 23.3333L48.2483 26.87C49.2217 27.84 49.2233 29.425 48.2517 30.4017L47.07 31.5833C46.5983 32.055 45.9717 32.315 45.3033 32.315Z" fill="black"/>
-<path opacity="0.07" d="M45.3033 31.4817C44.8583 31.4817 44.44 31.3083 44.125 30.995L40 26.8683L35.875 30.9933C35.56 31.3083 35.1417 31.48 34.6967 31.48C34.25 31.48 33.8317 31.3067 33.5183 30.9917L32.34 29.8133C32.025 29.4983 31.8517 29.08 31.8517 28.6333C31.8517 28.1883 32.025 27.77 32.34 27.455L36.465 23.3333L32.34 19.2083C32.0267 18.895 31.8517 18.4767 31.8517 18.0317C31.8517 17.585 32.025 17.1667 32.34 16.8517L33.5183 15.6733C33.8317 15.36 34.25 15.1867 34.6967 15.1867C35.1417 15.1867 35.56 15.36 35.875 15.6733L40 19.7983L44.125 15.6717C44.44 15.3567 44.8583 15.185 45.3033 15.185C45.7483 15.185 46.1667 15.3583 46.4817 15.6717L47.66 16.8517C47.975 17.1667 48.1483 17.585 48.1483 18.0317C48.1483 18.4767 47.975 18.895 47.66 19.21L43.5333 23.3333L47.66 27.46C48.31 28.1067 48.31 29.1633 47.6617 29.815L46.4817 30.995C46.1667 31.3083 45.7483 31.4817 45.3033 31.4817Z" fill="black"/>
-<path d="M42.3567 23.3333L47.0717 18.6183C47.3967 18.2933 47.3967 17.765 47.0717 17.44L45.8933 16.2617C45.5667 15.9367 45.04 15.9367 44.715 16.2617L40 20.9767L35.2867 16.2633C34.9617 15.9383 34.4333 15.9383 34.1083 16.2633L32.93 17.4417C32.605 17.7667 32.605 18.295 32.93 18.62L37.6433 23.3333L32.93 28.0467C32.605 28.3717 32.605 28.9 32.93 29.225L34.1083 30.4033C34.4333 30.7283 34.9617 30.7283 35.2867 30.4033L40 25.69L44.715 30.405C45.04 30.73 45.5683 30.73 45.8933 30.405L47.0717 29.2267C47.3967 28.9 47.3967 28.3733 47.0717 28.0483L42.3567 23.3333Z" fill="#FFEDEC"/>
-</svg>

package/src/Prebuilt/components/Notifications/DeviceChangeNotifications.tsx

@@ -1,18 +0,0 @@
-import { useEffect } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-
-export const DeviceChangeNotifications = () => {
-  const notification = useHMSNotifications(HMSNotificationTypes.DEVICE_CHANGE_UPDATE);
-
-  useEffect(() => {
-    if (notification) {
-      ToastManager.addToast({
-        title: notification.message,
-      });
-    }
-  }, [notification]);
-
-  return null;
-};

package/src/Prebuilt/components/Notifications/ErrorNotifications.tsx

@@ -1,56 +0,0 @@
-import React, { useEffect } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-import { GroupIcon } from '@100mslive/react-icons';
-import { Box } from '../../../Layout';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-// @ts-ignore: No implicit Any
-import { useSubscribedNotifications } from '../AppData/useUISettings';
-
-export const ErrorNotifications = () => {
-  const notification = useHMSNotifications(HMSNotificationTypes.ERROR);
-  const subscribedNotifications = useSubscribedNotifications() || {};
-
-  useEffect(() => {
-    if (!notification || !notification.data) return;
-
-    const { isTerminal, action, code, message, description } = notification.data;
-
-    if (isTerminal && action !== 'INIT') {
-      if ([500, 6008].includes(code)) {
-        ToastManager.addToast({
-          title: `Error: ${message}`,
-        });
-      } else if (message === 'role limit reached') {
-        ToastManager.addToast({
-          title: 'The room is currently full, try joining later',
-          close: true,
-          icon: (
-            <Box css={{ color: '$alert_error_default' }}>
-              <GroupIcon />
-            </Box>
-          ),
-        });
-      } else {
-        ToastManager.addToast({
-          title: message || 'We couldn’t reconnect you. When you’re back online, try joining the room.',
-          close: false,
-        });
-      }
-      return;
-    }
-    // Autoplay error or user denied screen share (cancelled browser pop-up)
-    if ([3008, 3001, 3011].includes(code)) {
-      return;
-    }
-    if (action === 'INIT') {
-      return;
-    }
-    if (!subscribedNotifications.ERROR) return;
-    ToastManager.addToast({
-      title: `Error: ${message} - ${description}`,
-    });
-  }, [notification, subscribedNotifications.ERROR]);
-
-  return null;
-};

package/src/Prebuilt/components/Notifications/MessageNotifications.tsx

@@ -1,24 +0,0 @@
-import { useEffect } from 'react';
-import { HMSNotificationTypes, selectIsLocalScreenShared } from '@100mslive/hms-video-store';
-import { useAwayNotifications, useHMSNotifications, useHMSStore } from '@100mslive/react-sdk';
-import { useRoomLayout } from '../../provider/roomLayoutProvider';
-import { usePIPWindow } from '../PIP/usePIPWindow';
-
-export const MessageNotifications = () => {
-  const notification = useHMSNotifications(HMSNotificationTypes.NEW_MESSAGE);
-  const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
-  const logoURL = useRoomLayout()?.logo?.url;
-  const { pipWindow } = usePIPWindow();
-  const { showNotification } = useAwayNotifications();
-
-  useEffect(() => {
-    if (notification && amIScreenSharing && !notification.data?.ignored && !pipWindow) {
-      showNotification(`New message from ${notification.data.senderName}`, {
-        body: notification.data.message,
-        icon: logoURL,
-      });
-    }
-  }, [notification]);
-
-  return null;
-};

package/src/Prebuilt/components/Notifications/PollNotificationModal.tsx

@@ -1,71 +0,0 @@
-import React, { useEffect } from 'react';
-import {
-  HMSNotificationTypes,
-  selectLocalPeerID,
-  selectPeerNameByID,
-  useHMSNotifications,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-import { Button } from '../../../Button';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { usePollViewToggle } from '../AppData/useSidepane';
-
-const notificationTypes = [HMSNotificationTypes.POLL_STARTED, HMSNotificationTypes.POLL_STOPPED];
-
-const pollToastKey: Record<string, string> = {};
-
-export const PollNotificationModal = () => {
-  const togglePollView = usePollViewToggle();
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const vanillaStore = useHMSVanillaStore();
-  const screenProps = useRoomLayoutConferencingScreen();
-
-  const notification = useHMSNotifications(notificationTypes);
-
-  useEffect(() => {
-    switch (notification?.type) {
-      case HMSNotificationTypes.POLL_STARTED:
-        if (notification.data.startedBy !== localPeerID && screenProps.screenType !== 'hls_live_streaming') {
-          const pollStartedBy = vanillaStore.getState(selectPeerNameByID(notification.data.startedBy)) || 'Participant';
-
-          const pollToastID = ToastManager.addToast({
-            title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`,
-            action: (
-              <Button
-                onClick={() => togglePollView(notification.data.id)}
-                variant="standard"
-                css={{
-                  backgroundColor: '$surface_bright',
-                  fontWeight: '$semiBold',
-                  color: '$on_surface_high',
-                  p: '$xs $md',
-                }}
-              >
-                {notification.data.type === 'quiz' ? 'Answer' : 'Vote'}
-              </Button>
-            ),
-            duration: Infinity,
-          });
-          pollToastKey[notification.data.id] = pollToastID;
-        }
-        break;
-      case HMSNotificationTypes.POLL_STOPPED:
-        {
-          const pollID = notification?.data.id;
-          if (pollID && pollToastKey?.[pollID]) {
-            ToastManager.removeToast(pollToastKey?.[notification.data.id]);
-            delete pollToastKey[notification?.data.id];
-          }
-        }
-        break;
-      default:
-        break;
-    }
-  }, [notification]);
-
-  return null;
-};

package/src/Prebuilt/components/Notifications/RoleChangeNotification.tsx

@@ -1,24 +0,0 @@
-import { useEffect } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-
-export const RoleChangeNotification = () => {
-  const notification = useHMSNotifications(HMSNotificationTypes.ROLE_UPDATED);
-  const updateRoomLayoutForRole = useUpdateRoomLayout();
-
-  useEffect(() => {
-    if (!notification?.data) {
-      return;
-    }
-    if (notification.data?.isLocal && notification.data?.roleName) {
-      ToastManager.addToast({
-        title: `You are now a ${notification.data.roleName}`,
-      });
-      updateRoomLayoutForRole?.(notification.data.roleName);
-    }
-  }, [notification]);
-
-  return null;
-};