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

package/dist/chunk-OA4HW7HW.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/components/Header/Header.tsx", "../src/Prebuilt/components/Header/RoomDetailsHeader.tsx", "../src/Prebuilt/components/Header/common.jsx", "../src/Prebuilt/components/Header/index.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { useMedia } from 'react-use';\nimport { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';\nimport { config as cssConfig, Flex } from '../../..';\n// @ts-ignore: No implicit any\nimport { Logo, SpeakerTag } from './HeaderComponents';\n// @ts-ignore: No implicit any\nimport { RoomDetailsHeader } from './RoomDetailsHeader';\nimport { LiveStatus, RecordingPauseStatus, RecordingStatus, StreamActions } from './StreamActions';\n// @ts-ignore: No implicit any\nimport { AudioActions, CamaraFlipActions } from './common';\n\nexport const Header = () => {\n  const roomState = useHMSStore(selectRoomState);\n  const isMobile = useMedia(cssConfig.media.md);\n  // Header should be present only inside the call - not in preview, leave room states\n  if (roomState !== HMSRoomState.Connected) {\n    return <></>;\n  }\n  return (\n    <Flex justify=\"between\" align=\"center\" css={{ position: 'relative', height: '100%' }}>\n      <Flex align=\"center\" gap=\"2\" css={{ position: 'absolute', left: '$10' }}>\n        <Logo />\n        <RoomDetailsHeader />\n        <SpeakerTag />\n        {isMobile && (\n          <Flex align=\"center\" css={{ gap: '$4' }}>\n            <LiveStatus />\n            <RecordingStatus />\n            <RecordingPauseStatus />\n          </Flex>\n        )}\n      </Flex>\n      <Flex\n        align=\"center\"\n        css={{\n          position: 'absolute',\n          right: '$10',\n          gap: '$4',\n        }}\n      >\n        <StreamActions />\n        {isMobile ? (\n          <>\n            <CamaraFlipActions />\n            <AudioActions />\n          </>\n        ) : null}\n      </Flex>\n    </Flex>\n  );\n};\n", "import React from 'react';\nimport { useMedia } from 'react-use';\nimport { ChevronRightIcon } from '@100mslive/react-icons';\nimport { Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport { config as cssConfig } from '../../../Theme';\nimport { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';\nimport { useSheetToggle } from '../AppData/useSheet';\n// @ts-ignore\nimport { useSidepaneToggle } from '../AppData/useSidepane';\nimport { SHEET_OPTIONS, SIDE_PANE_OPTIONS } from '../../common/constants';\n\nexport const RoomDetailsHeader = () => {\n  const { title, description } = useRoomLayoutHeader();\n  const isMobile = useMedia(cssConfig.media.md);\n  const clipLength = 30;\n  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);\n  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);\n\n  if ((!title && !description) || (isMobile && !title)) {\n    return null;\n  }\n\n  return (\n    <Flex direction={isMobile ? 'row' : 'column'} css={{ ml: '$8', alignItems: isMobile ? 'center' : 'start' }}>\n      <Text variant=\"sm\" css={{ c: '$on_surface_high', fontWeight: '$semiBold' }}>\n        {title}\n      </Text>\n      {!isMobile && (\n        <Flex align=\"end\" css={{ color: '$on_surface_high' }}>\n          <Text variant=\"xs\" css={{ c: '$on_surface_medium' }}>\n            {description.slice(0, clipLength)}\n          </Text>\n          {description.length > clipLength ? (\n            <span\n              style={{ fontWeight: '600', fontSize: '12px', cursor: 'pointer', lineHeight: '1rem' }}\n              onClick={toggleDetailsPane}\n            >\n              &nbsp;...more\n            </span>\n          ) : null}\n        </Flex>\n      )}\n      {isMobile && description ? (\n        <Flex css={{ color: '$on_surface_medium' }}>\n          <ChevronRightIcon height={16} width={16} onClick={toggleDetailsSheet} />\n        </Flex>\n      ) : null}\n    </Flex>\n  );\n};\n", "import React from 'react';\nimport {\n  DeviceType,\n  getAudioDeviceCategory,\n  HMSAudioDeviceCategory,\n  selectIsLocalVideoEnabled,\n  selectLocalVideoTrackID,\n  selectVideoTrackByID,\n  useDevices,\n  useHMSActions,\n  useHMSStore,\n} from '@100mslive/react-sdk';\nimport {\n  BluetoothIcon,\n  CameraFlipIcon,\n  CheckIcon,\n  CrossIcon,\n  HeadphonesIcon,\n  SpeakerIcon,\n  TelePhoneIcon,\n} from '@100mslive/react-icons';\nimport { HorizontalDivider } from '../../../Divider';\nimport { Label } from '../../../Label';\nimport { Box, Flex } from '../../../Layout';\nimport { Sheet } from '../../../Sheet';\nimport { Text } from '../../../Text';\nimport IconButton from '../../IconButton';\nimport { ToastManager } from '../Toast/ToastManager';\n\nexport const CamaraFlipActions = () => {\n  const actions = useHMSActions();\n  const { allDevices } = useDevices();\n  const { videoInput } = allDevices;\n  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);\n\n  const videoTrackId = useHMSStore(selectLocalVideoTrackID);\n  const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));\n  if (!videoInput || !videoInput?.length || !localVideoTrack?.facingMode) {\n    return null;\n  }\n  return (\n    <Box>\n      <IconButton\n        disabled={!isVideoOn}\n        onClick={async () => {\n          try {\n            await actions.switchCamera();\n          } catch (e) {\n            ToastManager.addToast({\n              title: `Error while flipping camera ${e.message || ''}`,\n              variant: 'error',\n            });\n          }\n        }}\n      >\n        <CameraFlipIcon />\n      </IconButton>\n    </Box>\n  );\n};\n\n// It will handle and show audio input devices in Mweb while audio output devices in desktop\nexport const AudioActions = () => {\n  const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();\n\n  // don't show speaker selector where the API is not supported, and use\n  // a generic word(\"Audio\") for Mic. In some cases(Chrome Android for example) this changes both mic and speaker keeping them in sync.\n  const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype;\n  const { audioInput, audioOutput } = allDevices;\n  let availableAudioDevices = audioInput;\n  let selectedAudio = selectedDeviceIDs.audioInput;\n  if (shouldShowAudioOutput) {\n    availableAudioDevices = audioOutput;\n    selectedAudio = selectedDeviceIDs.audioOutput;\n  }\n  const hmsActions = useHMSActions();\n  const audioFiltered = availableAudioDevices?.find(item => !!item.label);\n  const currentSelection = availableAudioDevices?.find(item => item.deviceId === selectedAudio);\n\n  if (!audioFiltered) {\n    return null;\n  }\n  const deviceCategory = getAudioDeviceCategory(currentSelection?.label);\n  let AudioIcon = <SpeakerIcon />;\n  if (deviceCategory === HMSAudioDeviceCategory.BLUETOOTH) {\n    AudioIcon = <BluetoothIcon />;\n  } else if (deviceCategory === HMSAudioDeviceCategory.WIRED) {\n    AudioIcon = <HeadphonesIcon />;\n  } else if (deviceCategory === HMSAudioDeviceCategory.EARPIECE) {\n    AudioIcon = <TelePhoneIcon />;\n  }\n  return (\n    <AudioSelectionSheet\n      audioDevices={availableAudioDevices}\n      audioSelected={selectedAudio}\n      onChange={async deviceId => {\n        try {\n          await updateDevice({\n            deviceId,\n            deviceType: shouldShowAudioOutput ? DeviceType.audioOutput : DeviceType.audioInput,\n          });\n        } catch (e) {\n          ToastManager.addToast({\n            title: `Error while changing audio device ${e.message || ''}`,\n            variant: 'error',\n          });\n        }\n      }}\n    >\n      <Box\n        onClick={async () => {\n          // refresh device as `devicechange` listener won't work in mobile device\n          await hmsActions.refreshDevices();\n        }}\n      >\n        <IconButton>{AudioIcon}</IconButton>\n      </Box>\n    </AudioSelectionSheet>\n  );\n};\n\nconst AudioSelectionSheet = ({ audioDevices, audioSelected, onChange, children }) => {\n  return (\n    <Sheet.Root>\n      <Sheet.Trigger asChild>{children}</Sheet.Trigger>\n      <Sheet.Content>\n        <Sheet.Title css={{ py: '$10', px: '$8', alignItems: 'center' }}>\n          <Flex direction=\"row\" justify=\"between\" css={{ w: '100%' }}>\n            <Text variant=\"h6\" css={{ display: 'flex' }}>\n              Audio\n            </Text>\n            <Sheet.Close>\n              <IconButton as=\"div\" data-testid=\"dialog_cross_icon\">\n                <CrossIcon />\n              </IconButton>\n            </Sheet.Close>\n          </Flex>\n        </Sheet.Title>\n        <HorizontalDivider />\n        <Flex\n          direction=\"column\"\n          css={{\n            px: '$8',\n            maxHeight: '80vh',\n            overflowY: 'auto',\n          }}\n        >\n          {audioDevices.map(audioDevice => {\n            return (\n              <SelectWithLabel\n                key={audioDevice.deviceId}\n                label={audioDevice.label}\n                id={audioDevice.deviceId}\n                checked={audioDevice.deviceId === audioSelected}\n                onChange={() => onChange(audioDevice.deviceId)}\n              />\n            );\n          })}\n        </Flex>\n      </Sheet.Content>\n    </Sheet.Root>\n  );\n};\n\nconst SelectWithLabel = ({ label, icon = <></>, checked, id, onChange }) => {\n  return (\n    <Flex\n      align=\"center\"\n      css={{\n        my: '$2',\n        py: '$8',\n        w: '100%',\n        borderBottom: '1px solid $border_default',\n      }}\n      onClick={onChange}\n    >\n      <Label\n        htmlFor={id}\n        css={{\n          fontSize: '$md',\n          fontWeight: '$semiBold',\n          color: '$on_surface_high',\n          cursor: 'pointer',\n          display: 'flex',\n          alignItems: 'center',\n          gap: '$8',\n          flex: '1 1 0',\n        }}\n      >\n        {icon}\n        {label}\n      </Label>\n      {checked && <CheckIcon width={24} height={24} />}\n    </Flex>\n  );\n};\n", "export { Header } from './Header';\n"],
+  "mappings": "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",
+  "names": ["React", "useMedia", "useHMSStore", "React", "React", "useHMSStore", "useMedia", "React"]
+}

package/dist/chunk-PJQSPAFZ.js

@@ -0,0 +1,178 @@
+import {
+  StyledPagination
+} from "./chunk-26D5FDBW.js";
+import {
+  config,
+  init_define_process_env
+} from "./chunk-TBXRX6MK.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-PJQSPAFZ.js.map

package/dist/chunk-PJQSPAFZ.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"]
+}