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

package/dist/chunk-KF2YEUWU.js

@@ -0,0 +1,254 @@
+import {
+  Button,
+  HorizontalDivider,
+  Loading,
+  Popover,
+  Sheet,
+  _s
+} from "./chunk-4BQ3AMVG.js";
+import {
+  Text
+} from "./chunk-BXBPZGSP.js";
+import {
+  ToastManager,
+  useRecordingHandler
+} from "./chunk-USEEH3QW.js";
+import {
+  Box,
+  Flex
+} from "./chunk-4L5OKEIV.js";
+import {
+  Tooltip,
+  formatTime,
+  useRoomLayoutConferencingScreen
+} from "./chunk-6BX3VCVC.js";
+import {
+  __async,
+  config,
+  init_define_process_env
+} from "./chunk-YDIB6WKJ.js";
+
+// src/Prebuilt/components/Header/StreamActions.tsx
+init_define_process_env();
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useMedia } from "react-use";
+import {
+  HMSRoomState,
+  selectHLSState,
+  selectIsConnectedToRoom,
+  selectPermissions,
+  selectRecordingState,
+  selectRoomState,
+  useHMSActions,
+  useHMSStore,
+  useRecordingStreaming
+} from "@100mslive/react-sdk";
+import { AlertTriangleIcon, CrossIcon, PauseCircleIcon, RecordIcon } from "@100mslive/react-icons";
+var getRecordingText = ({
+  isBrowserRecordingOn,
+  isServerRecordingOn,
+  isHLSRecordingOn
+}, delimiter = ", ") => {
+  if (!isBrowserRecordingOn && !isServerRecordingOn && !isHLSRecordingOn) {
+    return "";
+  }
+  const title = [];
+  if (isBrowserRecordingOn) {
+    title.push("Browser");
+  }
+  if (isServerRecordingOn) {
+    title.push("Server");
+  }
+  if (isHLSRecordingOn) {
+    title.push("HLS");
+  }
+  return title.join(delimiter);
+};
+var LiveStatus = () => {
+  var _a;
+  const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
+  const hlsState = useHMSStore(selectHLSState);
+  const isMobile = useMedia(config.media.md);
+  const intervalRef = useRef(null);
+  const { screenType } = useRoomLayoutConferencingScreen();
+  const [liveTime, setLiveTime] = useState(0);
+  const startTimer = useCallback(() => {
+    intervalRef.current = setInterval(() => {
+      var _a2;
+      const timeStamp = (_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2[screenType === "hls_live_streaming" ? "startedAt" : "initialisedAt"];
+      if ((hlsState == null ? void 0 : hlsState.running) && timeStamp) {
+        setLiveTime(Date.now() - timeStamp.getTime());
+      }
+    }, 1e3);
+  }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants, screenType]);
+  useEffect(() => {
+    if (hlsState == null ? void 0 : hlsState.running) {
+      startTimer();
+    }
+    if (!(hlsState == null ? void 0 : hlsState.running) && intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [hlsState.running, isMobile, startTimer]);
+  if (!isHLSRunning && !isRTMPRunning) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Flex,
+    {
+      align: "center",
+      gap: "1",
+      css: {
+        border: "1px solid $border_default",
+        padding: "$4 $6 $4 $6",
+        borderRadius: "$1"
+      }
+    },
+    /* @__PURE__ */ React.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }),
+    /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: "2" }, /* @__PURE__ */ React.createElement(Text, { variant: !isMobile ? "button" : "body2" }, "LIVE"), /* @__PURE__ */ React.createElement(Text, { variant: "caption" }, ((_a = hlsState == null ? void 0 : hlsState.variants) == null ? void 0 : _a.length) > 0 && isHLSRunning ? formatTime(liveTime) : ""))
+  );
+};
+var RecordingStatus = () => {
+  const { isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn, isRecordingOn } = useRecordingStreaming();
+  const permissions = useHMSStore(selectPermissions);
+  const isMobile = useMedia(config.media.md);
+  if (!isRecordingOn || // if only browser recording is enabled, stop recording is shown
+  // so no need to show this as it duplicates
+  [permissions == null ? void 0 : permissions.browserRecording, !isServerRecordingOn, !isHLSRecordingOn, isBrowserRecordingOn].every(
+    (value) => !!value
+  )) {
+    if (!(isMobile && isRecordingOn))
+      return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      boxCss: { zIndex: 1 },
+      title: getRecordingText({
+        isBrowserRecordingOn,
+        isServerRecordingOn,
+        isHLSRecordingOn
+      })
+    },
+    /* @__PURE__ */ React.createElement(
+      Flex,
+      {
+        css: {
+          color: "$alert_error_default",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ React.createElement(RecordIcon, { width: 24, height: 24 })
+    )
+  );
+};
+var RecordingPauseStatus = () => {
+  const recording = useHMSStore(selectRecordingState);
+  if (recording.hls && recording.hls.state === _s.PAUSED) {
+    return /* @__PURE__ */ React.createElement(
+      Tooltip,
+      {
+        boxCss: { zIndex: 1 },
+        title: getRecordingText({
+          isBrowserRecordingOn: false,
+          isServerRecordingOn: false,
+          isHLSRecordingOn: true
+        })
+      },
+      /* @__PURE__ */ React.createElement(
+        Flex,
+        {
+          css: {
+            color: "$on_surface_high",
+            alignItems: "center"
+          }
+        },
+        /* @__PURE__ */ React.createElement(PauseCircleIcon, { width: 24, height: 24 })
+      )
+    );
+  }
+  return null;
+};
+var StartRecording = () => {
+  const permissions = useHMSStore(selectPermissions);
+  const [open, setOpen] = useState(false);
+  const { startRecording, recordingStarted } = useRecordingHandler();
+  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
+  const hmsActions = useHMSActions();
+  if (!(permissions == null ? void 0 : permissions.browserRecording) || isHLSRunning) {
+    return null;
+  }
+  if (isBrowserRecordingOn) {
+    return /* @__PURE__ */ React.createElement(Popover.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(Popover.Trigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React.createElement(RecordIcon, null), /* @__PURE__ */ React.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        "data-testid": "stop_recording_confirm",
+        variant: "danger",
+        icon: true,
+        css: { ml: "auto" },
+        onClick: () => __async(void 0, null, function* () {
+          try {
+            yield hmsActions.stopRTMPAndRecording();
+          } catch (error) {
+            const err = error;
+            ToastManager.addToast({
+              title: err.message,
+              variant: "error"
+            });
+          }
+          setOpen(false);
+        })
+      },
+      "Stop"
+    ))));
+  }
+  return /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      "data-testid": "start_recording",
+      variant: "standard",
+      icon: true,
+      disabled: recordingStarted || isStreamingOn,
+      onClick: () => __async(void 0, null, function* () {
+        yield startRecording();
+      })
+    },
+    recordingStarted ? /* @__PURE__ */ React.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React.createElement(RecordIcon, null),
+    /* @__PURE__ */ React.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
+  );
+};
+var StreamActions = () => {
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const isMobile = useMedia(config.media.md);
+  const roomState = useHMSStore(selectRoomState);
+  return /* @__PURE__ */ React.createElement(Flex, { align: "center", css: { gap: "$4" } }, !isMobile && /* @__PURE__ */ React.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React.createElement(RecordingPauseStatus, null), /* @__PURE__ */ React.createElement(RecordingStatus, null), roomState !== HMSRoomState.Preview ? /* @__PURE__ */ React.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React.createElement(StartRecording, null) : null);
+};
+var StopRecordingInSheet = ({
+  onStopRecording,
+  onClose
+}) => {
+  return /* @__PURE__ */ React.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React.createElement(Sheet.Content, null, /* @__PURE__ */ React.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React.createElement(CrossIcon, null)))), /* @__PURE__ */ React.createElement(HorizontalDivider, null), /* @__PURE__ */ React.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React.createElement(Text, { variant: "caption", css: { c: "$on_surface_medium", pb: "$8" } }, "Are you sure you want to stop recording? You can\u2019t undo this action."), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "danger",
+      css: { width: "100%" },
+      type: "submit",
+      "data-testid": "popup_change_btn",
+      onClick: onStopRecording
+    },
+    "Stop"
+  ))));
+};
+
+export {
+  LiveStatus,
+  RecordingStatus,
+  RecordingPauseStatus,
+  StreamActions,
+  StopRecordingInSheet
+};
+//# sourceMappingURL=chunk-KF2YEUWU.js.map

package/dist/chunk-KF2YEUWU.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/components/Header/StreamActions.tsx"],
+  "sourcesContent": ["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { HMSRecordingState } from '@100mslive/hms-video-store';\nimport {\n  HMSRoomState,\n  selectHLSState,\n  selectIsConnectedToRoom,\n  selectPermissions,\n  selectRecordingState,\n  selectRoomState,\n  useHMSActions,\n  useHMSStore,\n  useRecordingStreaming,\n} from '@100mslive/react-sdk';\nimport { AlertTriangleIcon, CrossIcon, PauseCircleIcon, RecordIcon } from '@100mslive/react-icons';\nimport { Box, Button, config as cssConfig, Flex, HorizontalDivider, Loading, Popover, Text, Tooltip } from '../../..';\nimport { Sheet } from '../../../Sheet';\n// @ts-ignore\nimport { ToastManager } from '../Toast/ToastManager';\nimport { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';\nimport { useRecordingHandler } from '../../common/hooks';\n// @ts-ignore\nimport { formatTime } from '../../common/utils';\n\nexport const getRecordingText = (\n  {\n    isBrowserRecordingOn,\n    isServerRecordingOn,\n    isHLSRecordingOn,\n  }: { isBrowserRecordingOn: boolean; isServerRecordingOn: boolean; isHLSRecordingOn: boolean },\n  delimiter = ', ',\n) => {\n  if (!isBrowserRecordingOn && !isServerRecordingOn && !isHLSRecordingOn) {\n    return '';\n  }\n  const title: string[] = [];\n  if (isBrowserRecordingOn) {\n    title.push('Browser');\n  }\n  if (isServerRecordingOn) {\n    title.push('Server');\n  }\n  if (isHLSRecordingOn) {\n    title.push('HLS');\n  }\n  return title.join(delimiter);\n};\n\nexport const LiveStatus = () => {\n  const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();\n  const hlsState = useHMSStore(selectHLSState);\n  const isMobile = useMedia(cssConfig.media.md);\n  const intervalRef = useRef<NodeJS.Timeout | null>(null);\n  const { screenType } = useRoomLayoutConferencingScreen();\n  const [liveTime, setLiveTime] = useState(0);\n\n  const startTimer = useCallback(() => {\n    intervalRef.current = setInterval(() => {\n      const timeStamp = hlsState?.variants[0]?.[screenType === 'hls_live_streaming' ? 'startedAt' : 'initialisedAt'];\n      if (hlsState?.running && timeStamp) {\n        setLiveTime(Date.now() - timeStamp.getTime());\n      }\n    }, 1000);\n  }, [hlsState?.running, hlsState?.variants, screenType]);\n\n  useEffect(() => {\n    if (hlsState?.running) {\n      startTimer();\n    }\n    if (!hlsState?.running && intervalRef.current) {\n      clearInterval(intervalRef.current);\n    }\n    return () => {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n      }\n    };\n  }, [hlsState.running, isMobile, startTimer]);\n\n  if (!isHLSRunning && !isRTMPRunning) {\n    return null;\n  }\n  return (\n    <Flex\n      align=\"center\"\n      gap=\"1\"\n      css={{\n        border: '1px solid $border_default',\n        padding: '$4 $6 $4 $6',\n        borderRadius: '$1',\n      }}\n    >\n      <Box css={{ w: '$4', h: '$4', r: '$round', bg: '$alert_error_default', mr: '$2' }} />\n      <Flex align=\"center\" gap=\"2\">\n        <Text variant={!isMobile ? 'button' : 'body2'}>LIVE</Text>\n        <Text variant=\"caption\">{hlsState?.variants?.length > 0 && isHLSRunning ? formatTime(liveTime) : ''}</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport const RecordingStatus = () => {\n  const { isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn, isRecordingOn } = useRecordingStreaming();\n  const permissions = useHMSStore(selectPermissions);\n  const isMobile = useMedia(cssConfig.media.md);\n\n  if (\n    !isRecordingOn ||\n    // if only browser recording is enabled, stop recording is shown\n    // so no need to show this as it duplicates\n    [permissions?.browserRecording, !isServerRecordingOn, !isHLSRecordingOn, isBrowserRecordingOn].every(\n      value => !!value,\n    )\n  ) {\n    // show recording icon in mobile without popover\n    if (!(isMobile && isRecordingOn)) return null;\n  }\n\n  return (\n    <Tooltip\n      boxCss={{ zIndex: 1 }}\n      title={getRecordingText({\n        isBrowserRecordingOn,\n        isServerRecordingOn,\n        isHLSRecordingOn,\n      })}\n    >\n      <Flex\n        css={{\n          color: '$alert_error_default',\n          alignItems: 'center',\n        }}\n      >\n        <RecordIcon width={24} height={24} />\n      </Flex>\n    </Tooltip>\n  );\n};\n\nexport const RecordingPauseStatus = () => {\n  const recording = useHMSStore(selectRecordingState);\n  if (recording.hls && recording.hls.state === HMSRecordingState.PAUSED) {\n    return (\n      <Tooltip\n        boxCss={{ zIndex: 1 }}\n        title={getRecordingText({\n          isBrowserRecordingOn: false,\n          isServerRecordingOn: false,\n          isHLSRecordingOn: true,\n        })}\n      >\n        <Flex\n          css={{\n            color: '$on_surface_high',\n            alignItems: 'center',\n          }}\n        >\n          <PauseCircleIcon width={24} height={24} />\n        </Flex>\n      </Tooltip>\n    );\n  }\n  return null;\n};\n\nconst StartRecording = () => {\n  const permissions = useHMSStore(selectPermissions);\n  const [open, setOpen] = useState(false);\n  const { startRecording, recordingStarted } = useRecordingHandler();\n  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();\n  const hmsActions = useHMSActions();\n  if (!permissions?.browserRecording || isHLSRunning) {\n    return null;\n  }\n  if (isBrowserRecordingOn) {\n    return (\n      <Popover.Root open={open} onOpenChange={setOpen}>\n        <Popover.Trigger asChild>\n          <Button variant=\"danger\" data-testid=\"stop_recording\" icon outlined onClick={() => setOpen(true)}>\n            <RecordIcon />\n            <Text as=\"span\" css={{ '@md': { display: 'none' }, color: 'currentColor' }}>\n              Stop Recording\n            </Text>\n          </Button>\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content align=\"end\" sideOffset={8} css={{ w: '$64' }}>\n            <Text variant=\"body1\" css={{ color: '$on_surface_medium' }}>\n              Are you sure you want to end the recording?\n            </Text>\n            <Button\n              data-testid=\"stop_recording_confirm\"\n              variant=\"danger\"\n              icon\n              css={{ ml: 'auto' }}\n              onClick={async () => {\n                try {\n                  await hmsActions.stopRTMPAndRecording();\n                } catch (error) {\n                  const err = error as Error;\n                  ToastManager.addToast({\n                    title: err.message,\n                    variant: 'error',\n                  });\n                }\n                setOpen(false);\n              }}\n            >\n              Stop\n            </Button>\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    );\n  }\n  return (\n    <Button\n      data-testid=\"start_recording\"\n      variant=\"standard\"\n      icon\n      disabled={recordingStarted || isStreamingOn}\n      onClick={async () => {\n        await startRecording();\n      }}\n    >\n      {recordingStarted ? <Loading size={24} color=\"currentColor\" /> : <RecordIcon />}\n      <Text as=\"span\" css={{ '@md': { display: 'none' }, color: 'currentColor' }}>\n        {recordingStarted ? 'Starting' : 'Start'} Recording\n      </Text>\n    </Button>\n  );\n};\n\n/**\n * @description only start recording button will be shown.\n */\nexport const StreamActions = () => {\n  const isConnected = useHMSStore(selectIsConnectedToRoom);\n  const isMobile = useMedia(cssConfig.media.md);\n  const roomState = useHMSStore(selectRoomState);\n\n  return (\n    <Flex align=\"center\" css={{ gap: '$4' }}>\n      {!isMobile && (\n        <Flex align=\"center\" css={{ gap: '$4' }}>\n          <RecordingPauseStatus />\n          <RecordingStatus />\n          {roomState !== HMSRoomState.Preview ? <LiveStatus /> : null}\n        </Flex>\n      )}\n      {isConnected && !isMobile ? <StartRecording /> : null}\n    </Flex>\n  );\n};\n\nexport const StopRecordingInSheet = ({\n  onStopRecording,\n  onClose,\n}: {\n  onStopRecording: () => void;\n  onClose: () => void;\n}) => {\n  return (\n    <Sheet.Root open={true}>\n      <Sheet.Content>\n        <Sheet.Title css={{ p: '$10' }}>\n          <Flex direction=\"row\" justify=\"between\" css={{ w: '100%', c: '$alert_error_default' }}>\n            <Flex justify=\"start\" align=\"center\" gap=\"3\">\n              <AlertTriangleIcon />\n              <Text variant=\"h5\" css={{ c: '$alert_error_default' }}>\n                Stop Recording\n              </Text>\n            </Flex>\n            <Sheet.Close css={{ color: 'white' }} onClick={onClose}>\n              <CrossIcon />\n            </Sheet.Close>\n          </Flex>\n        </Sheet.Title>\n        <HorizontalDivider />\n        <Box as=\"div\" css={{ p: '$10', overflowY: 'scroll', maxHeight: '70vh' }}>\n          <Text variant=\"caption\" css={{ c: '$on_surface_medium', pb: '$8' }}>\n            Are you sure you want to stop recording? You can\u2019t undo this action.\n          </Text>\n          <Button\n            variant=\"danger\"\n            css={{ width: '100%' }}\n            type=\"submit\"\n            data-testid=\"popup_change_btn\"\n            onClick={onStopRecording}\n          >\n            Stop\n          </Button>\n        </Box>\n      </Sheet.Content>\n    </Sheet.Root>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["_a"]
+}

package/dist/chunk-KQXTIHI6.js

@@ -0,0 +1,59 @@
+import {
+  useVideoTileContext
+} from "./chunk-B3HHL3ND.js";
+import {
+  VideoTile_default
+} from "./chunk-4BQ3AMVG.js";
+import {
+  Box
+} from "./chunk-4L5OKEIV.js";
+import {
+  __spreadValues,
+  init_define_process_env
+} from "./chunk-YDIB6WKJ.js";
+
+// src/Prebuilt/components/VideoLayouts/Grid.tsx
+init_define_process_env();
+import React from "react";
+var Grid = React.forwardRef(
+  ({ tiles, edgeToEdge }, ref) => {
+    const videoTileProps = useVideoTileContext();
+    return /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        ref,
+        css: {
+          flex: "1 1 0",
+          gap: "$4",
+          display: "flex",
+          placeContent: "center",
+          alignItems: "center",
+          justifyContent: "center",
+          flexFlow: "row wrap",
+          minHeight: 0,
+          "@md": { gap: edgeToEdge ? 0 : "$4" }
+        }
+      },
+      tiles == null ? void 0 : tiles.map((tile) => {
+        var _a, _b, _c, _d;
+        return /* @__PURE__ */ React.createElement(
+          VideoTile_default,
+          __spreadValues({
+            key: ((_a = tile.track) == null ? void 0 : _a.id) || ((_b = tile.peer) == null ? void 0 : _b.id),
+            width: tile.width,
+            height: tile.height,
+            peerId: (_c = tile.peer) == null ? void 0 : _c.id,
+            trackId: (_d = tile.track) == null ? void 0 : _d.id,
+            rootCSS: { padding: 0 },
+            objectFit: "contain"
+          }, videoTileProps)
+        );
+      })
+    );
+  }
+);
+
+export {
+  Grid
+};
+//# sourceMappingURL=chunk-KQXTIHI6.js.map

package/dist/chunk-KQXTIHI6.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/components/VideoLayouts/Grid.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';\nimport { Box } from '../../../Layout';\n// @ts-ignore: No implicit Any\nimport VideoTile from '../VideoTile';\nimport { useVideoTileContext } from '../hooks/useVideoTileLayout';\n\nexport const Grid = React.forwardRef<HTMLDivElement, { tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean }>(\n  ({ tiles, edgeToEdge }, ref) => {\n    const videoTileProps = useVideoTileContext();\n    return (\n      <Box\n        ref={ref}\n        css={{\n          flex: '1 1 0',\n          gap: '$4',\n          display: 'flex',\n          placeContent: 'center',\n          alignItems: 'center',\n          justifyContent: 'center',\n          flexFlow: 'row wrap',\n          minHeight: 0,\n          '@md': { gap: edgeToEdge ? 0 : '$4' },\n        }}\n      >\n        {tiles?.map(tile => {\n          return (\n            <VideoTile\n              key={tile.track?.id || tile.peer?.id}\n              width={tile.width}\n              height={tile.height}\n              peerId={tile.peer?.id}\n              trackId={tile.track?.id}\n              rootCSS={{ padding: 0 }}\n              objectFit=\"contain\"\n              {...videoTileProps}\n            />\n          );\n        })}\n      </Box>\n    );\n  },\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA,OAAO,WAAW;AAOX,IAAM,OAAO,MAAM;AAAA,EACxB,CAAC,EAAE,OAAO,WAAW,GAAG,QAAQ;AAC9B,UAAM,iBAAiB,oBAAoB;AAC3C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,UACH,MAAM;AAAA,UACN,KAAK;AAAA,UACL,SAAS;AAAA,UACT,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,WAAW;AAAA,UACX,OAAO,EAAE,KAAK,aAAa,IAAI,KAAK;AAAA,QACtC;AAAA;AAAA,MAEC,+BAAO,IAAI,UAAQ;AAzB5B;AA0BU,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAK,UAAK,UAAL,mBAAY,SAAM,UAAK,SAAL,mBAAW;AAAA,YAClC,OAAO,KAAK;AAAA,YACZ,QAAQ,KAAK;AAAA,YACb,SAAQ,UAAK,SAAL,mBAAW;AAAA,YACnB,UAAS,UAAK,UAAL,mBAAY;AAAA,YACrB,SAAS,EAAE,SAAS,EAAE;AAAA,YACtB,WAAU;AAAA,aACN;AAAA,QACN;AAAA,MAEJ;AAAA,IACF;AAAA,EAEJ;AACF;",
+  "names": []
+}