@100mslive/roomkit-react 0.3.24-alpha.0 → 0.3.24-alpha.1

package/dist/chunk-7FD3VT6Q.js

@@ -1,114 +0,0 @@
-import {
-  Dropdown,
-  useDropdownList,
-  useLandscapeHLSStream,
-  useMobileHLSStream
-} from "./chunk-DANANDDE.js";
-import {
-  Box,
-  Flex
-} from "./chunk-GOXRTCTY.js";
-import {
-  IconButton_default,
-  Tooltip,
-  useRoomLayoutConferencingScreen
-} from "./chunk-BGSYLCVD.js";
-import {
-  EMOJI_REACTION_TYPE,
-  __async,
-  config,
-  init_define_process_env,
-  styled
-} from "./chunk-GLAJUP3O.js";
-
-// src/Prebuilt/components/EmojiReaction.jsx
-init_define_process_env();
-import React2, { useState } from "react";
-import { useMedia } from "react-use";
-import data from "@emoji-mart/data/sets/14/apple.json";
-import { init } from "emoji-mart";
-import {
-  selectAvailableRoleNames,
-  selectIsConnectedToRoom,
-  selectLocalPeerID,
-  useCustomEvent,
-  useHMSStore
-} from "@100mslive/react-sdk";
-import { EmojiIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Footer/EmojiCard.jsx
-init_define_process_env();
-import React from "react";
-var emojiReactionList = [
-  [{ emojiId: "+1" }, { emojiId: "-1" }, { emojiId: "wave" }, { emojiId: "clap" }, { emojiId: "fire" }],
-  [{ emojiId: "tada" }, { emojiId: "heart_eyes" }, { emojiId: "joy" }, { emojiId: "open_mouth" }, { emojiId: "sob" }]
-];
-var EmojiCard = ({ sendReaction }) => {
-  return emojiReactionList.map((emojiLine, index) => /* @__PURE__ */ React.createElement(Flex, { key: index, justify: "between", css: { mb: "$8" } }, emojiLine.map((emoji) => /* @__PURE__ */ React.createElement(EmojiContainer, { key: emoji.emojiId, onClick: () => sendReaction(emoji.emojiId) }, /* @__PURE__ */ React.createElement("em-emoji", { id: emoji.emojiId, size: "100%", set: "apple" })))));
-};
-var EmojiContainer = styled("span", {
-  position: "relative",
-  cursor: "pointer",
-  width: "$16",
-  height: "$16",
-  p: "$4",
-  "&:hover": {
-    p: "7px",
-    bg: "$surface_brighter",
-    borderRadius: "$1"
-  }
-});
-
-// src/Prebuilt/components/EmojiReaction.jsx
-init({ data });
-var EmojiReaction = ({ showCard = false }) => {
-  const [open, setOpen] = useState(false);
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const { elements } = useRoomLayoutConferencingScreen();
-  useDropdownList({ open, name: "EmojiReaction" });
-  const roles = useHMSStore(selectAvailableRoleNames);
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const isMobile = useMedia(config.media.md);
-  const isLandscape = useMedia(config.media.ls);
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeStream = useLandscapeHLSStream();
-  const { sendEvent } = useCustomEvent({
-    type: EMOJI_REACTION_TYPE
-  });
-  const sendReaction = (emojiId) => __async(void 0, null, function* () {
-    var _a;
-    const data2 = {
-      type: EMOJI_REACTION_TYPE,
-      emojiId,
-      senderId: localPeerId
-    };
-    sendEvent(data2, { roleNames: roles });
-    (_a = window.showFlyingEmoji) == null ? void 0 : _a.call(window, { emojiId, senderId: localPeerId });
-  });
-  if (!isConnected || !elements.emoji_reactions) {
-    return null;
-  }
-  if (showCard) {
-    return /* @__PURE__ */ React2.createElement(EmojiCard, { sendReaction });
-  }
-  return /* @__PURE__ */ React2.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React2.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "emoji_reaction_btn" }, /* @__PURE__ */ React2.createElement(
-    IconButton_default,
-    {
-      css: isMobile || isLandscape ? { bg: "$surface_default", r: "$round", border: "1px solid $border_bright" } : {}
-    },
-    /* @__PURE__ */ React2.createElement(Tooltip, { title: "Emoji reaction" }, /* @__PURE__ */ React2.createElement(Box, null, /* @__PURE__ */ React2.createElement(EmojiIcon, null)))
-  )), /* @__PURE__ */ React2.createElement(
-    Dropdown.Content,
-    {
-      sideOffset: 5,
-      align: isMobileHLSStream || isLandscapeStream ? "end" : "center",
-      css: { p: "$8", bg: "$surface_default" }
-    },
-    /* @__PURE__ */ React2.createElement(EmojiCard, { sendReaction })
-  ));
-};
-
-export {
-  EmojiReaction
-};
-//# sourceMappingURL=chunk-7FD3VT6Q.js.map

package/dist/chunk-7FD3VT6Q.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/components/EmojiReaction.jsx", "../src/Prebuilt/components/Footer/EmojiCard.jsx"],
-  "sourcesContent": ["import React, { useState } from 'react';\nimport { useMedia } from 'react-use';\nimport data from '@emoji-mart/data/sets/14/apple.json';\nimport { init } from 'emoji-mart';\nimport {\n  selectAvailableRoleNames,\n  selectIsConnectedToRoom,\n  selectLocalPeerID,\n  useCustomEvent,\n  useHMSStore,\n} from '@100mslive/react-sdk';\nimport { EmojiIcon } from '@100mslive/react-icons';\nimport { EmojiCard } from './Footer/EmojiCard';\n// import { ToastManager } from './Toast/ToastManager';\nimport { Dropdown } from '../../Dropdown';\nimport { Box } from '../../Layout';\nimport { config as cssConfig } from '../../Theme';\nimport { Tooltip } from '../../Tooltip';\nimport IconButton from '../IconButton';\nimport { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';\nimport { useDropdownList } from './hooks/useDropdownList';\nimport { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';\nimport { EMOJI_REACTION_TYPE } from '../common/constants';\n\ninit({ data });\n\nexport const EmojiReaction = ({ showCard = false }) => {\n  const [open, setOpen] = useState(false);\n  const isConnected = useHMSStore(selectIsConnectedToRoom);\n  const { elements } = useRoomLayoutConferencingScreen();\n  useDropdownList({ open: open, name: 'EmojiReaction' });\n  // const hmsActions = useHMSActions();\n  const roles = useHMSStore(selectAvailableRoleNames);\n  const localPeerId = useHMSStore(selectLocalPeerID);\n  // const { isStreamingOn } = useRecordingStreaming();\n  const isMobile = useMedia(cssConfig.media.md);\n  const isLandscape = useMedia(cssConfig.media.ls);\n  const isMobileHLSStream = useMobileHLSStream();\n  const isLandscapeStream = useLandscapeHLSStream();\n\n  const { sendEvent } = useCustomEvent({\n    type: EMOJI_REACTION_TYPE,\n  });\n\n  const sendReaction = async emojiId => {\n    const data = {\n      type: EMOJI_REACTION_TYPE,\n      emojiId: emojiId,\n      senderId: localPeerId,\n    };\n    // TODO: RT find a way to figure out hls-viewer roles\n    sendEvent(data, { roleNames: roles });\n    window.showFlyingEmoji?.({ emojiId, senderId: localPeerId });\n    /* if (isStreamingOn) {\n      try {\n        await hmsActions.sendHLSTimedMetadata([\n          {\n            payload: JSON.stringify(data),\n            duration: 2,\n          },\n        ]);\n      } catch (error) {\n        console.log(error);\n        ToastManager.addToast({ title: error.message });\n      }\n    } */\n  };\n\n  if (!isConnected || !elements.emoji_reactions) {\n    return null;\n  }\n\n  if (showCard) {\n    return <EmojiCard sendReaction={sendReaction} />;\n  }\n  return (\n    <Dropdown.Root open={open} onOpenChange={setOpen}>\n      <Dropdown.Trigger asChild data-testid=\"emoji_reaction_btn\">\n        <IconButton\n          css={\n            isMobile || isLandscape ? { bg: '$surface_default', r: '$round', border: '1px solid $border_bright' } : {}\n          }\n        >\n          <Tooltip title=\"Emoji reaction\">\n            <Box>\n              <EmojiIcon />\n            </Box>\n          </Tooltip>\n        </IconButton>\n      </Dropdown.Trigger>\n      <Dropdown.Content\n        sideOffset={5}\n        align={isMobileHLSStream || isLandscapeStream ? 'end' : 'center'}\n        css={{ p: '$8', bg: '$surface_default' }}\n      >\n        <EmojiCard sendReaction={sendReaction} />\n      </Dropdown.Content>\n    </Dropdown.Root>\n  );\n};\n", "import React from 'react';\nimport { Flex } from '../../../Layout';\nimport { styled } from '../../../Theme';\n\n// When changing emojis in the grid, keep in mind that the payload used in sendHLSTimedMetadata has a limit of 100 characters. Using bigger emoji Ids can cause the limit to be exceeded.\nconst emojiReactionList = [\n  [{ emojiId: '+1' }, { emojiId: '-1' }, { emojiId: 'wave' }, { emojiId: 'clap' }, { emojiId: 'fire' }],\n  [{ emojiId: 'tada' }, { emojiId: 'heart_eyes' }, { emojiId: 'joy' }, { emojiId: 'open_mouth' }, { emojiId: 'sob' }],\n];\n\nexport const EmojiCard = ({ sendReaction }) => {\n  return emojiReactionList.map((emojiLine, index) => (\n    <Flex key={index} justify=\"between\" css={{ mb: '$8' }}>\n      {emojiLine.map(emoji => (\n        <EmojiContainer key={emoji.emojiId} onClick={() => sendReaction(emoji.emojiId)}>\n          <em-emoji id={emoji.emojiId} size=\"100%\" set=\"apple\"></em-emoji>\n        </EmojiContainer>\n      ))}\n    </Flex>\n  ));\n};\n\nconst EmojiContainer = styled('span', {\n  position: 'relative',\n  cursor: 'pointer',\n  width: '$16',\n  height: '$16',\n  p: '$4',\n  '&:hover': {\n    p: '7px',\n    bg: '$surface_brighter',\n    borderRadius: '$1',\n  },\n});\n"],
-  "mappings": "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",
-  "names": ["React", "data", "React"]
-}

package/dist/chunk-AHI4HCY3.js

@@ -1,62 +0,0 @@
-import {
-  __async,
-  init_define_process_env
-} from "./chunk-GLAJUP3O.js";
-
-// src/Prebuilt/components/hooks/useMetadata.tsx
-init_define_process_env();
-import { useCallback } from "react";
-import {
-  selectHasPeerHandRaised,
-  selectLocalPeerID,
-  selectPeerMetadata,
-  useHMSActions,
-  useHMSStore,
-  useHMSVanillaStore
-} from "@100mslive/react-sdk";
-var useMyMetadata = () => {
-  const hmsActions = useHMSActions();
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const vanillaStore = useHMSVanillaStore();
-  const metaData = useHMSStore(selectPeerMetadata(localPeerId));
-  const isHandRaised = useHMSStore(selectHasPeerHandRaised(localPeerId));
-  const update = (updatedFields) => __async(void 0, null, function* () {
-    try {
-      const currentMetadata = vanillaStore.getState(selectPeerMetadata(localPeerId));
-      yield hmsActions.changeMetadata(Object.assign(currentMetadata, updatedFields));
-      return true;
-    } catch (error) {
-      console.error("failed to update metadata ", updatedFields);
-    }
-    return false;
-  });
-  const toggleHandRaise = useCallback(() => __async(void 0, null, function* () {
-    if (isHandRaised) {
-      yield hmsActions.lowerLocalPeerHand();
-      yield update({ handRaisedAt: void 0 });
-    } else {
-      yield hmsActions.raiseLocalPeerHand();
-      yield update({ isBRBOn: false, handRaisedAt: Date.now() });
-    }
-  }), [isHandRaised]);
-  const toggleBRB = useCallback(() => __async(void 0, null, function* () {
-    const newValue = !(metaData == null ? void 0 : metaData.isBRBOn);
-    yield update({ isBRBOn: newValue });
-    if (newValue) {
-      yield hmsActions.lowerLocalPeerHand();
-    }
-  }), [metaData == null ? void 0 : metaData.isBRBOn]);
-  return {
-    isHandRaised,
-    isBRBOn: !!(metaData == null ? void 0 : metaData.isBRBOn),
-    metaData,
-    updateMetaData: update,
-    toggleHandRaise,
-    toggleBRB
-  };
-};
-
-export {
-  useMyMetadata
-};
-//# sourceMappingURL=chunk-AHI4HCY3.js.map

package/dist/chunk-AHI4HCY3.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/components/hooks/useMetadata.tsx"],
-  "sourcesContent": ["import { useCallback } from 'react';\nimport {\n  selectHasPeerHandRaised,\n  selectLocalPeerID,\n  selectPeerMetadata,\n  useHMSActions,\n  useHMSStore,\n  useHMSVanillaStore,\n} from '@100mslive/react-sdk';\n\nexport const useMyMetadata = () => {\n  const hmsActions = useHMSActions();\n  const localPeerId = useHMSStore(selectLocalPeerID);\n  const vanillaStore = useHMSVanillaStore();\n  const metaData = useHMSStore(selectPeerMetadata(localPeerId));\n  const isHandRaised = useHMSStore(selectHasPeerHandRaised(localPeerId));\n\n  const update = async (updatedFields: Record<string, any>) => {\n    try {\n      // get current state from store and merge updated fields\n      const currentMetadata = vanillaStore.getState(selectPeerMetadata(localPeerId));\n      await hmsActions.changeMetadata(Object.assign(currentMetadata, updatedFields));\n      return true;\n    } catch (error) {\n      console.error('failed to update metadata ', updatedFields);\n    }\n    return false;\n  };\n\n  const toggleHandRaise = useCallback(async () => {\n    if (isHandRaised) {\n      await hmsActions.lowerLocalPeerHand();\n      await update({ handRaisedAt: undefined });\n    } else {\n      await hmsActions.raiseLocalPeerHand();\n      await update({ isBRBOn: false, handRaisedAt: Date.now() });\n    }\n  }, [isHandRaised]); //eslint-disable-line\n\n  const toggleBRB = useCallback(async () => {\n    const newValue = !metaData?.isBRBOn;\n    await update({ isBRBOn: newValue });\n    if (newValue) {\n      await hmsActions.lowerLocalPeerHand();\n    }\n  }, [metaData?.isBRBOn]); //eslint-disable-line\n\n  return {\n    isHandRaised,\n    isBRBOn: !!metaData?.isBRBOn,\n    metaData,\n    updateMetaData: update,\n    toggleHandRaise,\n    toggleBRB,\n  };\n};\n"],
-  "mappings": ";;;;;;AAAA;AAAA,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,IAAM,gBAAgB,MAAM;AACjC,QAAM,aAAa,cAAc;AACjC,QAAM,cAAc,YAAY,iBAAiB;AACjD,QAAM,eAAe,mBAAmB;AACxC,QAAM,WAAW,YAAY,mBAAmB,WAAW,CAAC;AAC5D,QAAM,eAAe,YAAY,wBAAwB,WAAW,CAAC;AAErE,QAAM,SAAS,CAAO,kBAAuC;AAC3D,QAAI;AAEF,YAAM,kBAAkB,aAAa,SAAS,mBAAmB,WAAW,CAAC;AAC7E,YAAM,WAAW,eAAe,OAAO,OAAO,iBAAiB,aAAa,CAAC;AAC7E,aAAO;AAAA,IACT,SAAS,OAAO;AACd,cAAQ,MAAM,8BAA8B,aAAa;AAAA,IAC3D;AACA,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,YAAY,MAAY;AAC9C,QAAI,cAAc;AAChB,YAAM,WAAW,mBAAmB;AACpC,YAAM,OAAO,EAAE,cAAc,OAAU,CAAC;AAAA,IAC1C,OAAO;AACL,YAAM,WAAW,mBAAmB;AACpC,YAAM,OAAO,EAAE,SAAS,OAAO,cAAc,KAAK,IAAI,EAAE,CAAC;AAAA,IAC3D;AAAA,EACF,IAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,YAAY,YAAY,MAAY;AACxC,UAAM,WAAW,EAAC,qCAAU;AAC5B,UAAM,OAAO,EAAE,SAAS,SAAS,CAAC;AAClC,QAAI,UAAU;AACZ,YAAM,WAAW,mBAAmB;AAAA,IACtC;AAAA,EACF,IAAG,CAAC,qCAAU,OAAO,CAAC;AAEtB,SAAO;AAAA,IACL;AAAA,IACA,SAAS,CAAC,EAAC,qCAAU;AAAA,IACrB;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,EACF;AACF;",
-  "names": []
-}