@100mslive/roomkit-react 0.3.22-alpha.0 → 0.3.22-alpha.2

package/dist/chunk-A3COGXMF.js

@@ -0,0 +1,114 @@
+import {
+  Dropdown,
+  useDropdownList,
+  useLandscapeHLSStream,
+  useMobileHLSStream
+} from "./chunk-USEEH3QW.js";
+import {
+  Box,
+  Flex
+} from "./chunk-4L5OKEIV.js";
+import {
+  IconButton_default,
+  Tooltip,
+  useRoomLayoutConferencingScreen
+} from "./chunk-6BX3VCVC.js";
+import {
+  EMOJI_REACTION_TYPE,
+  __async,
+  config,
+  init_define_process_env,
+  styled
+} from "./chunk-YDIB6WKJ.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-A3COGXMF.js.map

package/dist/chunk-A3COGXMF.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-B3HHL3ND.js

@@ -0,0 +1,178 @@
+import {
+  StyledPagination
+} from "./chunk-4BQ3AMVG.js";
+import {
+  config,
+  init_define_process_env
+} from "./chunk-YDIB6WKJ.js";
+
+// src/Prebuilt/components/Pagination.tsx
+init_define_process_env();
+import React, { useEffect } from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@100mslive/react-icons";
+var Pagination = ({
+  page,
+  onPageChange,
+  numPages
+}) => {
+  const disableLeft = page === 0;
+  const disableRight = page === numPages - 1;
+  const nextPage = (e) => {
+    e.stopPropagation();
+    onPageChange(Math.min(page + 1, numPages - 1));
+  };
+  const prevPage = (e) => {
+    e.stopPropagation();
+    onPageChange(Math.max(page - 1, 0));
+  };
+  useEffect(() => {
+    if (page >= numPages) {
+      onPageChange(Math.max(0, numPages - 1));
+    }
+  }, [numPages, onPageChange, page]);
+  if (numPages <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(StyledPagination.Root, { css: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement(StyledPagination.Chevron, { disabled: disableLeft, onClick: prevPage }, /* @__PURE__ */ React.createElement(ChevronLeftIcon, { width: 16, height: 16, style: { cursor: disableLeft ? "not-allowed" : "pointer" } })), numPages <= 5 ? /* @__PURE__ */ React.createElement(StyledPagination.Dots, null, [...Array(numPages)].map((_, i) => /* @__PURE__ */ React.createElement(
+    StyledPagination.Dot,
+    {
+      key: i,
+      active: page === i,
+      onClick: (e) => {
+        e.stopPropagation();
+        onPageChange(i);
+      }
+    }
+  ))) : null, /* @__PURE__ */ React.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ React.createElement(ChevronRightIcon, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
+};
+
+// src/Prebuilt/components/hooks/useTileLayout.tsx
+init_define_process_env();
+import { useEffect as useEffect2, useMemo, useState } from "react";
+import { useMeasure, useMedia } from "react-use";
+import {
+  getPeersWithTiles,
+  selectTracksMap,
+  useHMSVanillaStore
+} from "@100mslive/react-sdk";
+var aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4, 9 / 16] };
+var usePagesWithTiles = ({ peers, maxTileCount }) => {
+  const vanillaStore = useHMSVanillaStore();
+  const tracksMap = vanillaStore.getState(selectTracksMap);
+  const peersWithTiles = useMemo(
+    () => getPeersWithTiles(peers, tracksMap, () => false),
+    [peers, tracksMap]
+  );
+  const noOfPages = Math.ceil(peersWithTiles.length / maxTileCount);
+  const pagesList = useMemo(() => {
+    let sliceStart = 0;
+    let remaining = peersWithTiles.length;
+    const list = [];
+    for (let i = 0; i < noOfPages; i++) {
+      const count = Math.min(remaining, maxTileCount);
+      list.push(peersWithTiles.slice(sliceStart, sliceStart + count));
+      remaining = remaining - count;
+      sliceStart += count;
+    }
+    return list;
+  }, [peersWithTiles, noOfPages, maxTileCount]);
+  return pagesList;
+};
+var useTileLayout = ({
+  pageList,
+  maxTileCount,
+  edgeToEdge = false
+}) => {
+  const vanillaStore = useHMSVanillaStore();
+  const [ref, { width, height }] = useMeasure();
+  const isMobile = useMedia(config.media.lg);
+  const [pagesWithTiles, setPagesWithTiles] = useState([]);
+  useEffect2(() => {
+    if (width === 0 || height === 0) {
+      return;
+    }
+    for (const page of pageList) {
+      const noOfTilesInPage = page.length;
+      let maxCols = noOfTilesInPage > 2 && noOfTilesInPage < 9 ? Math.ceil(noOfTilesInPage / 2) : Math.ceil(Math.sqrt(noOfTilesInPage));
+      if (isMobile) {
+        maxCols = noOfTilesInPage < 4 ? 1 : Math.min(maxCols, 2);
+      }
+      const maxRows = Math.ceil(noOfTilesInPage / maxCols);
+      let index = 0;
+      const matrix = new Array(maxRows).fill(null).map((_, i) => {
+        const numCols = Math.min(maxCols, noOfTilesInPage - i * maxCols);
+        const rowElements = [];
+        for (let j = 0; j < numCols; j++) {
+          if (index < page.length) {
+            rowElements.push(page[index++]);
+          }
+        }
+        return rowElements;
+      });
+      const gap = edgeToEdge && isMobile ? 0 : 8;
+      const maxHeight = height - (maxRows - 1) * gap;
+      const maxRowHeight = maxHeight / matrix.length;
+      const aspectRatios = isMobile && (noOfTilesInPage === 1 || noOfTilesInPage > 3) ? aspectRatioConfig.mobile : aspectRatioConfig.default;
+      for (const row of matrix) {
+        let tileWidth = (width - (row.length - 1) * gap) / row.length;
+        let tileHeight = 0;
+        if (edgeToEdge) {
+          tileHeight = maxRowHeight;
+        } else {
+          const calcHeights = aspectRatios.map((aR) => tileWidth / aR);
+          for (const h of calcHeights) {
+            if (h < maxRowHeight) {
+              if (tileHeight < h) {
+                tileHeight = h;
+              }
+            }
+          }
+          if (tileHeight === 0) {
+            tileHeight = maxRowHeight;
+            const calcWidths = aspectRatios.map((aR) => tileHeight * aR);
+            tileWidth = 0;
+            for (const w of calcWidths) {
+              if (w < width) {
+                if (tileWidth < w) {
+                  tileWidth = w;
+                }
+              }
+            }
+          }
+        }
+        for (let i = 0; i < row.length; i++) {
+          row[i].width = tileWidth;
+          row[i].height = tileHeight;
+        }
+      }
+    }
+    setPagesWithTiles([...pageList]);
+  }, [width, height, maxTileCount, pageList, vanillaStore, isMobile, edgeToEdge]);
+  return { pagesWithTiles, ref };
+};
+
+// src/Prebuilt/components/hooks/useVideoTileLayout.ts
+init_define_process_env();
+import React2, { useContext } from "react";
+var VideoTileContext = React2.createContext({
+  enableSpotlightingPeer: true,
+  hideParticipantNameOnTile: false,
+  roundedVideoTile: true,
+  hideAudioMuteOnTile: false,
+  hideAudioLevelOnTile: false,
+  objectFit: "contain",
+  hideMetadataOnTile: false
+});
+var useVideoTileContext = () => {
+  const context = useContext(VideoTileContext);
+  return context;
+};
+
+export {
+  VideoTileContext,
+  useVideoTileContext,
+  Pagination,
+  usePagesWithTiles,
+  useTileLayout
+};
+//# sourceMappingURL=chunk-B3HHL3ND.js.map

package/dist/chunk-B3HHL3ND.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/components/Pagination.tsx", "../src/Prebuilt/components/hooks/useTileLayout.tsx", "../src/Prebuilt/components/hooks/useVideoTileLayout.ts"],
+  "sourcesContent": ["import React, { useEffect } from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';\nimport { StyledPagination } from '../../Pagination';\n\nexport const Pagination = ({\n  page,\n  onPageChange,\n  numPages,\n}: {\n  page: number;\n  onPageChange: (page: number) => void;\n  numPages: number;\n}) => {\n  const disableLeft = page === 0;\n  const disableRight = page === numPages - 1;\n  const nextPage = (e: React.SyntheticEvent) => {\n    e.stopPropagation();\n    onPageChange(Math.min(page + 1, numPages - 1));\n  };\n  const prevPage = (e: React.SyntheticEvent) => {\n    e.stopPropagation();\n    onPageChange(Math.max(page - 1, 0));\n  };\n\n  useEffect(() => {\n    // currentPageIndex should not exceed pages length\n    if (page >= numPages) {\n      onPageChange(Math.max(0, numPages - 1));\n    }\n  }, [numPages, onPageChange, page]);\n\n  if (numPages <= 1) {\n    return null;\n  }\n\n  return (\n    <StyledPagination.Root css={{ flexShrink: 0 }}>\n      <StyledPagination.Chevron disabled={disableLeft} onClick={prevPage}>\n        <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />\n      </StyledPagination.Chevron>\n      {numPages <= 5 ? (\n        <StyledPagination.Dots>\n          {[...Array(numPages)].map((_, i) => (\n            <StyledPagination.Dot\n              key={i}\n              active={page === i}\n              onClick={e => {\n                e.stopPropagation();\n                onPageChange(i);\n              }}\n            />\n          ))}\n        </StyledPagination.Dots>\n      ) : null}\n      <StyledPagination.Chevron disabled={disableRight} onClick={nextPage}>\n        <ChevronRightIcon width={16} height={16} style={{ cursor: disableRight ? 'not-allowed' : 'pointer' }} />\n      </StyledPagination.Chevron>\n    </StyledPagination.Root>\n  );\n};\n", "import { useEffect, useMemo, useState } from 'react';\nimport { useMeasure, useMedia } from 'react-use';\nimport {\n  getPeersWithTiles,\n  HMSPeer,\n  selectTracksMap,\n  TrackWithPeerAndDimensions,\n  useHMSVanillaStore,\n} from '@100mslive/react-sdk';\nimport { config as cssConfig } from '../../../Theme';\n\nconst aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4, 9 / 16] };\n\nexport const usePagesWithTiles = ({ peers, maxTileCount }: { peers: HMSPeer[]; maxTileCount: number }) => {\n  const vanillaStore = useHMSVanillaStore();\n  const tracksMap = vanillaStore.getState(selectTracksMap);\n  const peersWithTiles = useMemo(\n    () => getPeersWithTiles(peers, tracksMap, () => false) as TrackWithPeerAndDimensions[],\n    [peers, tracksMap],\n  );\n  const noOfPages = Math.ceil(peersWithTiles.length / maxTileCount);\n  const pagesList = useMemo(() => {\n    let sliceStart = 0;\n    let remaining = peersWithTiles.length;\n    const list = [];\n    // split into pages\n    for (let i = 0; i < noOfPages; i++) {\n      const count = Math.min(remaining, maxTileCount);\n      list.push(peersWithTiles.slice(sliceStart, sliceStart + count));\n      remaining = remaining - count;\n      sliceStart += count;\n    }\n    return list;\n  }, [peersWithTiles, noOfPages, maxTileCount]);\n  return pagesList;\n};\n\nexport const useTileLayout = ({\n  pageList,\n  maxTileCount,\n  edgeToEdge = false,\n}: {\n  pageList: TrackWithPeerAndDimensions[][];\n  maxTileCount: number;\n  edgeToEdge?: boolean;\n}) => {\n  const vanillaStore = useHMSVanillaStore();\n  const [ref, { width, height }] = useMeasure<HTMLDivElement>();\n  const isMobile = useMedia(cssConfig.media.lg);\n  const [pagesWithTiles, setPagesWithTiles] = useState<TrackWithPeerAndDimensions[][]>([]);\n\n  useEffect(() => {\n    if (width === 0 || height === 0) {\n      return;\n    }\n    // calculate dimesions for each page\n    for (const page of pageList) {\n      const noOfTilesInPage = page.length;\n      let maxCols =\n        noOfTilesInPage > 2 && noOfTilesInPage < 9\n          ? Math.ceil(noOfTilesInPage / 2)\n          : Math.ceil(Math.sqrt(noOfTilesInPage));\n      if (isMobile) {\n        maxCols = noOfTilesInPage < 4 ? 1 : Math.min(maxCols, 2);\n      }\n      const maxRows = Math.ceil(noOfTilesInPage / maxCols);\n      let index = 0;\n      // convert the current page to a matrix(grid)\n      const matrix = new Array(maxRows).fill(null).map((_, i) => {\n        const numCols = Math.min(maxCols, noOfTilesInPage - i * maxCols);\n        const rowElements = [];\n        for (let j = 0; j < numCols; j++) {\n          if (index < page.length) {\n            rowElements.push(page[index++]);\n          }\n        }\n        return rowElements;\n      });\n\n      const gap = edgeToEdge && isMobile ? 0 : 8; // gap between flex items\n      const maxHeight = height - (maxRows - 1) * gap;\n      const maxRowHeight = maxHeight / matrix.length;\n      const aspectRatios =\n        isMobile && (noOfTilesInPage === 1 || noOfTilesInPage > 3)\n          ? aspectRatioConfig.mobile\n          : aspectRatioConfig.default;\n      // calculate height and width of each tile in a row\n      for (const row of matrix) {\n        let tileWidth = (width - (row.length - 1) * gap) / row.length;\n        let tileHeight = 0;\n        if (edgeToEdge) {\n          tileHeight = maxRowHeight;\n        } else {\n          const calcHeights = aspectRatios.map(aR => tileWidth / aR);\n          for (const h of calcHeights) {\n            if (h < maxRowHeight) {\n              if (tileHeight < h) {\n                tileHeight = h;\n              }\n            }\n          }\n\n          // tileHeight is not calculated as it could be exceeding the max possible height\n          // find the max possible width instead\n          if (tileHeight === 0) {\n            tileHeight = maxRowHeight;\n            const calcWidths = aspectRatios.map(aR => tileHeight * aR);\n            tileWidth = 0;\n            for (const w of calcWidths) {\n              if (w < width) {\n                if (tileWidth < w) {\n                  tileWidth = w;\n                }\n              }\n            }\n          }\n        }\n        for (let i = 0; i < row.length; i++) {\n          row[i].width = tileWidth;\n          row[i].height = tileHeight;\n        }\n      }\n    }\n    setPagesWithTiles([...pageList]);\n  }, [width, height, maxTileCount, pageList, vanillaStore, isMobile, edgeToEdge]);\n  return { pagesWithTiles, ref };\n};\n", "import React, { useContext } from 'react';\n\ntype TileContextType = {\n  enableSpotlightingPeer: boolean;\n  hideParticipantNameOnTile?: boolean;\n  roundedVideoTile?: boolean;\n  hideAudioMuteOnTile?: boolean;\n  hideAudioLevelOnTile?: boolean;\n  objectFit?: 'cover' | 'contain';\n  hideMetadataOnTile?: boolean;\n};\n\nexport const VideoTileContext = React.createContext<TileContextType>({\n  enableSpotlightingPeer: true,\n  hideParticipantNameOnTile: false,\n  roundedVideoTile: true,\n  hideAudioMuteOnTile: false,\n  hideAudioLevelOnTile: false,\n  objectFit: 'contain',\n  hideMetadataOnTile: false,\n});\n\nexport const useVideoTileContext = () => {\n  const context = useContext(VideoTileContext);\n  return context;\n};\n"],
+  "mappings": "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",
+  "names": ["useEffect", "useEffect", "React"]
+}

package/dist/chunk-B5NLX6N6.js

@@ -0,0 +1,41 @@
+import {
+  useMyMetadata
+} from "./chunk-ZFTULCCP.js";
+import {
+  IconButton_default,
+  Tooltip,
+  useRoomLayoutConferencingScreen
+} from "./chunk-6BX3VCVC.js";
+import {
+  __async,
+  init_define_process_env
+} from "./chunk-YDIB6WKJ.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-B5NLX6N6.js.map

package/dist/chunk-B5NLX6N6.js.map

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

@@ -0,0 +1,161 @@
+import {
+  init_define_process_env,
+  styled
+} from "./chunk-YDIB6WKJ.js";
+
+// src/Text/Text.tsx
+init_define_process_env();
+var textVariants = {
+  h1: {
+    fontWeight: "$semiBold",
+    letterSpacing: "-1.5px",
+    fontSize: "$h1",
+    lineHeight: "$h1",
+    "@md": {
+      fontSize: "4.5rem",
+      lineHeight: "4.75rem"
+    }
+  },
+  h2: {
+    fontSize: "$h2",
+    lineHeight: "$h2",
+    fontWeight: "$semiBold",
+    letterSpacing: "-0.5px",
+    "@md": {
+      fontSize: "3rem",
+      lineHeight: "3.25rem"
+    }
+  },
+  h3: {
+    fontSize: "$h3",
+    lineHeight: "$h3",
+    fontWeight: "$semiBold",
+    "@md": {
+      fontSize: "2.5rem",
+      lineHeight: "2.75rem"
+    }
+  },
+  h4: {
+    fontSize: "$h4",
+    lineHeight: "$h4",
+    fontWeight: "$semiBold",
+    letterSpacing: "0.25px",
+    "@md": {
+      fontSize: "1.75rem",
+      lineHeight: "2rem"
+    }
+  },
+  h5: {
+    fontSize: "$h5",
+    lineHeight: "$h5",
+    fontWeight: "$semiBold",
+    "@md": {
+      fontSize: "1.5rem",
+      lineHeight: "1.75rem"
+    }
+  },
+  h6: {
+    fontSize: "$h6",
+    lineHeight: "$h6",
+    fontWeight: "$semiBold",
+    letterSpacing: "0.15px",
+    "@md": {
+      fontSize: "1.25rem",
+      lineHeight: "1.5rem"
+    }
+  },
+  sub1: {
+    fontSize: "$md",
+    lineHeight: "$h5",
+    fontWeight: "$medium",
+    letterSpacing: "0.15px"
+  },
+  sub2: {
+    fontSize: "$sm",
+    lineHeight: "$sm",
+    fontWeight: "$medium",
+    letterSpacing: "0.1px"
+  },
+  body1: {
+    fontSize: "$md",
+    lineHeight: "$h6",
+    fontWeight: "$medium",
+    letterSpacing: "0.1px"
+  },
+  body2: {
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+    fontWeight: "$medium",
+    letterSpacing: "0.25px"
+  },
+  button: {
+    fontSize: "1rem",
+    lineHeight: "1.5rem",
+    fontWeight: "$semiBold",
+    letterSpacing: "0.5px"
+  },
+  caption: {
+    fontSize: "0.75rem",
+    lineHeight: "1rem",
+    letterSpacing: "0.4px",
+    fontWeight: "$regular"
+  },
+  overline: {
+    fontSize: "0.625rem",
+    lineHeight: "1rem",
+    letterSpacing: "1.5px",
+    fontWeight: "$medium"
+  },
+  tiny: {
+    fontSize: "$tiny",
+    lineHeight: "$tiny"
+  },
+  xs: {
+    fontSize: "$xs",
+    lineHeight: "$xs"
+  },
+  sm: {
+    fontSize: "$sm",
+    lineHeight: "$sm"
+  },
+  md: {
+    fontSize: "$md",
+    lineHeight: "$md"
+  },
+  lg: {
+    fontSize: "$lg",
+    lineHeight: "$md",
+    fontWeight: "$semiBold",
+    letterSpacing: "0.15px"
+  }
+};
+var Text = styled("p", {
+  fontFamily: "$sans",
+  fontWeight: "$regular",
+  margin: 0,
+  color: "$on_surface_high",
+  variants: {
+    variant: textVariants,
+    color: {
+      white: {
+        color: "$on_surface_high"
+      }
+    },
+    inline: {
+      true: {
+        display: "inline"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "md"
+  }
+});
+
+// src/Text/index.tsx
+init_define_process_env();
+
+export {
+  Text
+};
+//# sourceMappingURL=chunk-BXBPZGSP.js.map

package/dist/chunk-BXBPZGSP.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Text/Text.tsx", "../src/Text/index.tsx"],
+  "sourcesContent": ["import { styled } from '../Theme';\n\nexport const textVariants = {\n  h1: {\n    fontWeight: '$semiBold',\n    letterSpacing: '-1.5px',\n    fontSize: '$h1',\n    lineHeight: '$h1',\n    '@md': {\n      fontSize: '4.5rem',\n      lineHeight: '4.75rem',\n    },\n  },\n  h2: {\n    fontSize: '$h2',\n    lineHeight: '$h2',\n    fontWeight: '$semiBold',\n    letterSpacing: '-0.5px',\n    '@md': {\n      fontSize: '3rem',\n      lineHeight: '3.25rem',\n    },\n  },\n  h3: {\n    fontSize: '$h3',\n    lineHeight: '$h3',\n    fontWeight: '$semiBold',\n    '@md': {\n      fontSize: '2.5rem',\n      lineHeight: '2.75rem',\n    },\n  },\n  h4: {\n    fontSize: '$h4',\n    lineHeight: '$h4',\n    fontWeight: '$semiBold',\n    letterSpacing: '0.25px',\n    '@md': {\n      fontSize: '1.75rem',\n      lineHeight: '2rem',\n    },\n  },\n  h5: {\n    fontSize: '$h5',\n    lineHeight: '$h5',\n    fontWeight: '$semiBold',\n    '@md': {\n      fontSize: '1.5rem',\n      lineHeight: '1.75rem',\n    },\n  },\n  h6: {\n    fontSize: '$h6',\n    lineHeight: '$h6',\n    fontWeight: '$semiBold',\n    letterSpacing: '0.15px',\n    '@md': {\n      fontSize: '1.25rem',\n      lineHeight: '1.5rem',\n    },\n  },\n  sub1: {\n    fontSize: '$md',\n    lineHeight: '$h5',\n    fontWeight: '$medium',\n    letterSpacing: '0.15px',\n  },\n  sub2: {\n    fontSize: '$sm',\n    lineHeight: '$sm',\n    fontWeight: '$medium',\n    letterSpacing: '0.1px',\n  },\n  body1: {\n    fontSize: '$md',\n    lineHeight: '$h6',\n    fontWeight: '$medium',\n    letterSpacing: '0.1px',\n  },\n  body2: {\n    fontSize: '0.875rem',\n    lineHeight: '1.25rem',\n    fontWeight: '$medium',\n    letterSpacing: '0.25px',\n  },\n  button: {\n    fontSize: '1rem',\n    lineHeight: '1.5rem',\n    fontWeight: '$semiBold',\n    letterSpacing: '0.5px',\n  },\n  caption: {\n    fontSize: '0.75rem',\n    lineHeight: '1rem',\n    letterSpacing: '0.4px',\n    fontWeight: '$regular',\n  },\n  overline: {\n    fontSize: '0.625rem',\n    lineHeight: '1rem',\n    letterSpacing: '1.5px',\n    fontWeight: '$medium',\n  },\n  tiny: {\n    fontSize: '$tiny',\n    lineHeight: '$tiny',\n  },\n  xs: {\n    fontSize: '$xs',\n    lineHeight: '$xs',\n  },\n  sm: {\n    fontSize: '$sm',\n    lineHeight: '$sm',\n  },\n  md: {\n    fontSize: '$md',\n    lineHeight: '$md',\n  },\n  lg: {\n    fontSize: '$lg',\n    lineHeight: '$md',\n    fontWeight: '$semiBold',\n    letterSpacing: '0.15px',\n  },\n};\n\nexport const Text = styled('p', {\n  fontFamily: '$sans',\n  fontWeight: '$regular',\n  margin: 0,\n  color: '$on_surface_high',\n  variants: {\n    variant: textVariants,\n    color: {\n      white: {\n        color: '$on_surface_high',\n      },\n    },\n    inline: {\n      true: {\n        display: 'inline',\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'md',\n  },\n});\n", "export { Text } from './Text';\n"],
+  "mappings": "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",
+  "names": []
+}