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

package/dist/chunk-7FD3VT6Q.js

@@ -0,0 +1,114 @@
+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

@@ -0,0 +1,7 @@
+{
+  "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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,7 @@
+{
+  "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": []
+}