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

package/dist/ScreenshareLayout-PSQMS3NC.js

@@ -1,358 +0,0 @@
-import {
-  InsetTile
-} from "./chunk-YEL5ZTFU.js";
-import {
-  ProminenceLayout,
-  SecondaryTiles
-} from "./chunk-HVYTC3PX.js";
-import {
-  Pagination
-} from "./chunk-P6NV2XO4.js";
-import {
-  Button,
-  LayoutMode,
-  LayoutModeIconMapping,
-  Popover,
-  StyledVideoTile,
-  TileMenu_default,
-  Video,
-  VideoTileStats,
-  getVideoTileLabel,
-  useTheme
-} from "./chunk-MG3UGW66.js";
-import {
-  Text
-} from "./chunk-MUKUP7JU.js";
-import "./chunk-DANANDDE.js";
-import {
-  Box,
-  Flex
-} from "./chunk-GOXRTCTY.js";
-import {
-  useSetAppDataByKey,
-  useSetUiSettings,
-  useUISettings
-} from "./chunk-BGSYLCVD.js";
-import {
-  APP_DATA,
-  UI_SETTINGS,
-  __async,
-  config,
-  init_define_process_env
-} from "./chunk-GLAJUP3O.js";
-
-// src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
-init_define_process_env();
-import React4, { useEffect, useMemo, useState as useState3 } from "react";
-import { useMedia as useMedia2 } from "react-use";
-import { selectPeersScreenSharing, useHMSStore as useHMSStore2 } from "@100mslive/react-sdk";
-
-// src/Prebuilt/components/ScreenshareTile.tsx
-init_define_process_env();
-import React3, { useRef, useState as useState2 } from "react";
-import { useFullscreen, useMedia } from "react-use";
-import screenfull from "screenfull";
-import {
-  selectLocalPeerID,
-  selectPeerByID,
-  selectScreenShareAudioByPeerID,
-  selectScreenShareByPeerID,
-  useHMSStore
-} from "@100mslive/react-sdk";
-import { ExpandIcon, ShrinkIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/LayoutModeSelector.tsx
-init_define_process_env();
-import React, { useCallback, useState } from "react";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@100mslive/react-icons";
-var LayoutModeSelector = () => {
-  const [open, setOpen] = useState(false);
-  const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
-  const updateLayoutMode = useCallback(
-    (value) => {
-      setLayoutMode(value);
-      setOpen(false);
-    },
-    [setLayoutMode, setOpen]
-  );
-  return /* @__PURE__ */ React.createElement(Popover.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(Popover.Trigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-    Flex,
-    {
-      align: "center",
-      css: {
-        gap: "$4",
-        color: open ? "$on_surface_low" : "$on_surface_medium",
-        r: "$1",
-        p: "$2 $4",
-        height: "100%"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      Flex,
-      {
-        align: "center",
-        justify: "center",
-        css: {
-          color: "inherit",
-          "& > svg": {
-            w: "$9",
-            h: "$9"
-          }
-        }
-      },
-      LayoutModeIconMapping[layoutMode]
-    ),
-    /* @__PURE__ */ React.createElement(Text, { variant: "caption", css: { color: "inherit", lineHeight: "$sm" } }, layoutMode),
-    open ? /* @__PURE__ */ React.createElement(ChevronUpIcon, { width: 16, height: 16 }) : /* @__PURE__ */ React.createElement(ChevronDownIcon, { width: 16, height: 16 })
-  )), /* @__PURE__ */ React.createElement(
-    Popover.Content,
-    {
-      css: {
-        w: "10.75rem",
-        r: "$1",
-        py: "$4",
-        px: 0,
-        backgroundColor: "$surface_default",
-        overflowY: "auto",
-        boxShadow: "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
-        fontFamily: "$sans",
-        color: "$on_surface_high"
-      },
-      side: "bottom",
-      sideOffset: 8,
-      align: "end"
-    },
-    Object.keys(LayoutMode).map((key) => {
-      const value = LayoutMode[key];
-      return /* @__PURE__ */ React.createElement(
-        Flex,
-        {
-          key,
-          onClick: () => updateLayoutMode(value),
-          align: "center",
-          css: {
-            gap: "$4",
-            borderBottom: "1px solid $border_bright",
-            p: "$8",
-            "&:hover": {
-              cursor: "pointer",
-              bg: "$surface_bright"
-            },
-            "&:focus-visible": {
-              bg: "$surface_bright"
-            }
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          Flex,
-          {
-            align: "center",
-            justify: "center",
-            css: {
-              color: "$on_surface_medium",
-              "& > svg": {
-                w: "$9",
-                h: "$9"
-              }
-            }
-          },
-          LayoutModeIconMapping[value]
-        ),
-        /* @__PURE__ */ React.createElement(Text, { variant: "caption", css: { lineHeight: "$sm" } }, value),
-        value === layoutMode ? /* @__PURE__ */ React.createElement(CheckIcon, { width: 20, height: 20, style: { marginLeft: "auto" } }) : null
-      );
-    })
-  ));
-};
-
-// src/Prebuilt/components/ScreenshareDisplay.tsx
-init_define_process_env();
-import React2 from "react";
-import { useHMSActions } from "@100mslive/react-sdk";
-import { CrossIcon, ShareScreenIcon } from "@100mslive/react-icons";
-var ScreenshareDisplay = () => {
-  const hmsActions = useHMSActions();
-  return /* @__PURE__ */ React2.createElement(
-    Flex,
-    {
-      direction: "column",
-      align: "center",
-      justify: "center",
-      css: {
-        size: "100%",
-        bg: "$background_default",
-        color: "$on_surface_high"
-      }
-    },
-    /* @__PURE__ */ React2.createElement(ShareScreenIcon, { width: 48, height: 48 }),
-    /* @__PURE__ */ React2.createElement(Text, { variant: "h5", css: { m: "$8 0" } }, "You are sharing your screen"),
-    /* @__PURE__ */ React2.createElement(
-      Button,
-      {
-        variant: "danger",
-        css: { fontWeight: "$semiBold" },
-        onClick: () => __async(void 0, null, function* () {
-          yield hmsActions.setScreenShareEnabled(false);
-        }),
-        "data-testid": "stop_screen_share_btn"
-      },
-      /* @__PURE__ */ React2.createElement(CrossIcon, { width: 18, height: 18 }),
-      "\xA0 Stop screen share"
-    )
-  );
-};
-
-// src/Prebuilt/components/ScreenshareTile.tsx
-var labelStyles = {
-  position: "unset",
-  width: "100%",
-  textAlign: "center",
-  c: "$on_surface_high",
-  transform: "none",
-  flexShrink: 0
-};
-var Tile = ({ peerId, width = "100%", height = "100%" }) => {
-  const isLocal = useHMSStore(selectLocalPeerID) === peerId;
-  const track = useHMSStore(selectScreenShareByPeerID(peerId));
-  const { theme } = useTheme();
-  const peer = useHMSStore(selectPeerByID(peerId));
-  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const [isMouseHovered, setIsMouseHovered] = useState2(false);
-  const isMobile = useMedia(config.media.md);
-  const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const fullscreenRef = useRef(null);
-  const [fullscreen, setFullscreen] = useState2(false);
-  const isFullscreen = useFullscreen(fullscreenRef, fullscreen, {
-    onClose: () => setFullscreen(false)
-  });
-  const isFullScreenSupported = screenfull.isEnabled;
-  const audioTrack = useHMSStore(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
-  if (isLocal && (track == null ? void 0 : track.displaySurface) && !["browser", "window", "application"].includes(track.displaySurface)) {
-    return /* @__PURE__ */ React3.createElement(ScreenshareDisplay, null);
-  }
-  if (!peer) {
-    return null;
-  }
-  const label = getVideoTileLabel({
-    peerName: peer == null ? void 0 : peer.name,
-    isLocal: false,
-    videoTrack: track,
-    audioTrack
-  });
-  return /* @__PURE__ */ React3.createElement(
-    StyledVideoTile.Root,
-    {
-      css: {
-        width,
-        height,
-        p: 0,
-        minHeight: 0
-      },
-      "data-testid": "screenshare_tile"
-    },
-    /* @__PURE__ */ React3.createElement(
-      StyledVideoTile.Container,
-      {
-        transparentBg: true,
-        ref: fullscreenRef,
-        css: { flexDirection: "column", gap: "$2" },
-        onMouseEnter: () => setIsMouseHovered(true),
-        onMouseLeave: () => {
-          setIsMouseHovered(false);
-        }
-      },
-      showStatsOnTiles ? /* @__PURE__ */ React3.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
-      isFullScreenSupported && isMouseHovered ? /* @__PURE__ */ React3.createElement(
-        StyledVideoTile.FullScreenButton,
-        {
-          css: { bg: `${theme.colors.background_dim.value}A3` },
-          onClick: () => setFullscreen(!fullscreen)
-        },
-        isFullscreen ? /* @__PURE__ */ React3.createElement(ShrinkIcon, null) : /* @__PURE__ */ React3.createElement(ExpandIcon, null)
-      ) : null,
-      !isMobile && isMouseHovered && !isFullscreen && /* @__PURE__ */ React3.createElement(
-        Box,
-        {
-          css: {
-            position: "absolute",
-            top: "$2",
-            r: "$1",
-            h: "$14",
-            right: isFullScreenSupported ? "$17" : "$2",
-            zIndex: 5,
-            bg: `${theme.colors.background_dim.value}A3`
-          }
-        },
-        /* @__PURE__ */ React3.createElement(LayoutModeSelector, null)
-      ),
-      track ? /* @__PURE__ */ React3.createElement(Video, { screenShare: true, mirror: false, attach: !isAudioOnly, trackId: track.id, css: { minHeight: 0 } }) : null,
-      /* @__PURE__ */ React3.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
-      isMouseHovered && !peer.isLocal ? /* @__PURE__ */ React3.createElement(
-        TileMenu_default,
-        {
-          isScreenshare: true,
-          peerID: peer.id,
-          audioTrackID: audioTrack == null ? void 0 : audioTrack.id,
-          videoTrackID: track == null ? void 0 : track.id,
-          enableSpotlightingPeer: false
-        }
-      ) : null
-    )
-  );
-};
-var ScreenshareTile = React3.memo(Tile);
-var ScreenshareTile_default = ScreenshareTile;
-
-// src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
-var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
-  var _a;
-  const peersSharing = useHMSStore2(selectPeersScreenSharing);
-  const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-  const [page, setPage] = useState3(0);
-  const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
-  const activeSharePeer = peersSharing[page];
-  const isMobile = useMedia2(config.media.md);
-  const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
-  const secondaryPeers = useMemo(() => {
-    if (layoutMode === LayoutMode.SPOTLIGHT) {
-      return [];
-    }
-    if (isMobile || layoutMode === LayoutMode.SIDEBAR) {
-      return activeSharePeer ? [activeSharePeer, ...peers.filter((p) => p.id !== (activeSharePeer == null ? void 0 : activeSharePeer.id))] : peers;
-    }
-    return peers.filter((p) => p.id !== (activeSharePeer == null ? void 0 : activeSharePeer.id));
-  }, [activeSharePeer, peers, isMobile, layoutMode]);
-  useEffect(() => {
-    if (isMobile) {
-      setLayoutMode(LayoutMode.GALLERY);
-      return;
-    }
-    if (layoutMode === LayoutMode.SIDEBAR) {
-      return;
-    }
-    setLayoutMode(LayoutMode.SIDEBAR);
-    return () => {
-      setLayoutMode(LayoutMode.GALLERY);
-    };
-  }, [isMobile]);
-  useEffect(() => {
-    setActiveScreenSharePeer(activeSharePeer == null ? void 0 : activeSharePeer.id);
-    return () => {
-      setActiveScreenSharePeer("");
-    };
-  }, [activeSharePeer == null ? void 0 : activeSharePeer.id, setActiveScreenSharePeer]);
-  return /* @__PURE__ */ React4.createElement(ProminenceLayout.Root, { edgeToEdge, hasSidebar }, /* @__PURE__ */ React4.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React4.createElement(ScreenshareTile_default, { peerId: (_a = peersSharing[page]) == null ? void 0 : _a.id }), !edgeToEdge && /* @__PURE__ */ React4.createElement(Pagination, { page, onPageChange: setPage, numPages: peersSharing.length })), /* @__PURE__ */ React4.createElement(
-    SecondaryTiles,
-    {
-      peers: secondaryPeers,
-      onPageChange,
-      onPageSize,
-      edgeToEdge,
-      hasSidebar
-    }
-  ), layoutMode === LayoutMode.SPOTLIGHT && activeSharePeer && /* @__PURE__ */ React4.createElement(InsetTile, { peerId: activeSharePeer == null ? void 0 : activeSharePeer.id }));
-};
-export {
-  ScreenshareLayout
-};
-//# sourceMappingURL=ScreenshareLayout-PSQMS3NC.js.map

package/dist/ScreenshareLayout-PSQMS3NC.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx", "../src/Prebuilt/components/ScreenshareTile.tsx", "../src/Prebuilt/components/LayoutModeSelector.tsx", "../src/Prebuilt/components/ScreenshareDisplay.tsx"],
-  "sourcesContent": ["import React, { useEffect, useMemo, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { selectPeersScreenSharing, useHMSStore } from '@100mslive/react-sdk';\nimport { config as cssConfig } from '../../../Theme';\nimport { InsetTile } from '../InsetTile';\nimport { Pagination } from '../Pagination';\n// @ts-ignore: No implicit Any\nimport ScreenshareTile from '../ScreenshareTile';\nimport { SecondaryTiles } from '../SecondaryTiles';\nimport { LayoutMode } from '../Settings/LayoutSettings';\nimport { LayoutProps } from './interface';\nimport { ProminenceLayout } from './ProminenceLayout';\n// @ts-ignore: No implicit Any\nimport { useSetAppDataByKey, useSetUiSettings } from '../AppData/useUISettings';\nimport { APP_DATA, UI_SETTINGS } from '../../common/constants';\n\nexport const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => {\n  const peersSharing = useHMSStore(selectPeersScreenSharing);\n  const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);\n  const [page, setPage] = useState(0);\n  const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);\n  const activeSharePeer = peersSharing[page];\n  const isMobile = useMedia(cssConfig.media.md);\n  const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;\n  const secondaryPeers = useMemo(() => {\n    if (layoutMode === LayoutMode.SPOTLIGHT) {\n      return [];\n    }\n    if (isMobile || layoutMode === LayoutMode.SIDEBAR) {\n      return activeSharePeer\n        ? [activeSharePeer, ...peers.filter(p => p.id !== activeSharePeer?.id)] //keep active sharing peer as first tile\n        : peers;\n    }\n    return peers.filter(p => p.id !== activeSharePeer?.id);\n  }, [activeSharePeer, peers, isMobile, layoutMode]);\n\n  useEffect(() => {\n    if (isMobile) {\n      setLayoutMode(LayoutMode.GALLERY);\n      return;\n    }\n    if (layoutMode === LayoutMode.SIDEBAR) {\n      return;\n    }\n    setLayoutMode(LayoutMode.SIDEBAR);\n    return () => {\n      // reset to gallery once screenshare is stopped\n      setLayoutMode(LayoutMode.GALLERY);\n    };\n  }, [isMobile]); // eslint-disable-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    setActiveScreenSharePeer(activeSharePeer?.id);\n    return () => {\n      setActiveScreenSharePeer('');\n    };\n  }, [activeSharePeer?.id, setActiveScreenSharePeer]);\n\n  return (\n    <ProminenceLayout.Root edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>\n      <ProminenceLayout.ProminentSection>\n        <ScreenshareTile peerId={peersSharing[page]?.id} />\n        {!edgeToEdge && <Pagination page={page} onPageChange={setPage} numPages={peersSharing.length} />}\n      </ProminenceLayout.ProminentSection>\n      <SecondaryTiles\n        peers={secondaryPeers}\n        onPageChange={onPageChange}\n        onPageSize={onPageSize}\n        edgeToEdge={edgeToEdge}\n        hasSidebar={hasSidebar}\n      />\n      {layoutMode === LayoutMode.SPOTLIGHT && activeSharePeer && <InsetTile peerId={activeSharePeer?.id} />}\n    </ProminenceLayout.Root>\n  );\n};\n", "import React, { useRef, useState } from 'react';\nimport { useFullscreen, useMedia } from 'react-use';\nimport screenfull from 'screenfull';\nimport {\n  selectLocalPeerID,\n  selectPeerByID,\n  selectScreenShareAudioByPeerID,\n  selectScreenShareByPeerID,\n  useHMSStore,\n} from '@100mslive/react-sdk';\nimport { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';\nimport TileMenu from './TileMenu/TileMenu';\nimport { Box } from '../../Layout';\nimport { VideoTileStats } from '../../Stats';\nimport { config as cssConfig, useTheme } from '../../Theme';\nimport { Video } from '../../Video';\nimport { StyledVideoTile } from '../../VideoTile';\nimport { LayoutModeSelector } from './LayoutModeSelector';\nimport { getVideoTileLabel } from './peerTileUtils';\nimport { ScreenshareDisplay } from './ScreenshareDisplay';\n// @ts-ignore: No implicit Any\nimport { useUISettings } from './AppData/useUISettings';\nimport { UI_SETTINGS } from '../common/constants';\n\nconst labelStyles = {\n  position: 'unset',\n  width: '100%',\n  textAlign: 'center',\n  c: '$on_surface_high',\n  transform: 'none',\n  flexShrink: 0,\n};\n\nconst Tile = ({ peerId, width = '100%', height = '100%' }: { peerId: string; width?: string; height?: string }) => {\n  const isLocal = useHMSStore(selectLocalPeerID) === peerId;\n  const track = useHMSStore(selectScreenShareByPeerID(peerId));\n  const { theme } = useTheme();\n  const peer = useHMSStore(selectPeerByID(peerId));\n  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);\n  const [isMouseHovered, setIsMouseHovered] = useState(false);\n  const isMobile = useMedia(cssConfig.media.md);\n  const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);\n  const fullscreenRef = useRef<HTMLDivElement | null>(null);\n  // fullscreen is for desired state\n  const [fullscreen, setFullscreen] = useState(false);\n  // isFullscreen is for true state\n  const isFullscreen = useFullscreen(fullscreenRef, fullscreen, {\n    onClose: () => setFullscreen(false),\n  });\n  const isFullScreenSupported = screenfull.isEnabled;\n  const audioTrack = useHMSStore(selectScreenShareAudioByPeerID(peer?.id));\n\n  if (isLocal && track?.displaySurface && !['browser', 'window', 'application'].includes(track.displaySurface)) {\n    return <ScreenshareDisplay />;\n  }\n\n  if (!peer) {\n    return null;\n  }\n\n  const label = getVideoTileLabel({\n    peerName: peer?.name,\n    isLocal: false,\n    videoTrack: track,\n    audioTrack,\n  });\n\n  return (\n    <StyledVideoTile.Root\n      css={{\n        width,\n        height,\n        p: 0,\n        minHeight: 0,\n      }}\n      data-testid=\"screenshare_tile\"\n    >\n      <StyledVideoTile.Container\n        transparentBg\n        ref={fullscreenRef}\n        css={{ flexDirection: 'column', gap: '$2' }}\n        onMouseEnter={() => setIsMouseHovered(true)}\n        onMouseLeave={() => {\n          setIsMouseHovered(false);\n        }}\n      >\n        {showStatsOnTiles ? (\n          <VideoTileStats audioTrackID={audioTrack?.id} videoTrackID={track?.id} peerID={peerId} isLocal={isLocal} />\n        ) : null}\n        {isFullScreenSupported && isMouseHovered ? (\n          <StyledVideoTile.FullScreenButton\n            css={{ bg: `${theme.colors.background_dim.value}A3` }}\n            onClick={() => setFullscreen(!fullscreen)}\n          >\n            {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}\n          </StyledVideoTile.FullScreenButton>\n        ) : null}\n        {!isMobile && isMouseHovered && !isFullscreen && (\n          <Box\n            css={{\n              position: 'absolute',\n              top: '$2',\n              r: '$1',\n              h: '$14',\n              right: isFullScreenSupported ? '$17' : '$2',\n              zIndex: 5,\n              bg: `${theme.colors.background_dim.value}A3`,\n            }}\n          >\n            <LayoutModeSelector />\n          </Box>\n        )}\n\n        {track ? (\n          <Video screenShare={true} mirror={false} attach={!isAudioOnly} trackId={track.id} css={{ minHeight: 0 }} />\n        ) : null}\n        <StyledVideoTile.Info css={labelStyles}>{label}</StyledVideoTile.Info>\n        {isMouseHovered && !peer.isLocal ? (\n          <TileMenu\n            isScreenshare\n            peerID={peer.id}\n            audioTrackID={audioTrack?.id}\n            videoTrackID={track?.id}\n            enableSpotlightingPeer={false}\n          />\n        ) : null}\n      </StyledVideoTile.Container>\n    </StyledVideoTile.Root>\n  );\n};\n\nconst ScreenshareTile = React.memo(Tile);\n\nexport default ScreenshareTile;\n", "import React, { useCallback, useState } from 'react';\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';\nimport { LayoutMode, LayoutModeIconMapping, LayoutModeKeys } from './Settings/LayoutSettings';\nimport { Flex } from '../../Layout';\nimport { Popover } from '../../Popover';\nimport { Text } from '../../Text';\n// @ts-ignore: No implicit Any\nimport { useSetUiSettings } from '../components/AppData/useUISettings';\nimport { UI_SETTINGS } from '../common/constants';\n\nexport const LayoutModeSelector = () => {\n  const [open, setOpen] = useState(false);\n  const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);\n  const updateLayoutMode = useCallback(\n    (value: string) => {\n      setLayoutMode(value);\n      setOpen(false);\n    },\n    [setLayoutMode, setOpen],\n  );\n  return (\n    <Popover.Root open={open} onOpenChange={setOpen}>\n      <Popover.Trigger asChild>\n        <Flex\n          align=\"center\"\n          css={{\n            gap: '$4',\n            color: open ? '$on_surface_low' : '$on_surface_medium',\n            r: '$1',\n            p: '$2 $4',\n            height: '100%',\n          }}\n        >\n          <Flex\n            align=\"center\"\n            justify=\"center\"\n            css={{\n              color: 'inherit',\n              '& > svg': {\n                w: '$9',\n                h: '$9',\n              },\n            }}\n          >\n            {LayoutModeIconMapping[layoutMode as LayoutModeKeys]}\n          </Flex>\n          <Text variant=\"caption\" css={{ color: 'inherit', lineHeight: '$sm' }}>\n            {layoutMode}\n          </Text>\n          {open ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />}\n        </Flex>\n      </Popover.Trigger>\n      <Popover.Content\n        css={{\n          w: '10.75rem',\n          r: '$1',\n          py: '$4',\n          px: 0,\n          backgroundColor: '$surface_default',\n          overflowY: 'auto',\n          boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',\n          fontFamily: '$sans',\n          color: '$on_surface_high',\n        }}\n        side=\"bottom\"\n        sideOffset={8}\n        align=\"end\"\n      >\n        {Object.keys(LayoutMode).map(key => {\n          const value = LayoutMode[key as LayoutModeKeys];\n          return (\n            <Flex\n              key={key}\n              onClick={() => updateLayoutMode(value)}\n              align=\"center\"\n              css={{\n                gap: '$4',\n                borderBottom: '1px solid $border_bright',\n                p: '$8',\n                '&:hover': {\n                  cursor: 'pointer',\n                  bg: '$surface_bright',\n                },\n                '&:focus-visible': {\n                  bg: '$surface_bright',\n                },\n              }}\n            >\n              <Flex\n                align=\"center\"\n                justify=\"center\"\n                css={{\n                  color: '$on_surface_medium',\n                  '& > svg': {\n                    w: '$9',\n                    h: '$9',\n                  },\n                }}\n              >\n                {LayoutModeIconMapping[value]}\n              </Flex>\n              <Text variant=\"caption\" css={{ lineHeight: '$sm' }}>\n                {value}\n              </Text>\n              {value === layoutMode ? <CheckIcon width={20} height={20} style={{ marginLeft: 'auto' }} /> : null}\n            </Flex>\n          );\n        })}\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n", "import React from 'react';\nimport { useHMSActions } from '@100mslive/react-sdk';\nimport { CrossIcon, ShareScreenIcon } from '@100mslive/react-icons';\nimport { Button } from '../../Button';\nimport { Flex } from '../../Layout';\nimport { Text } from '../../Text';\n\nexport const ScreenshareDisplay = () => {\n  const hmsActions = useHMSActions();\n\n  return (\n    <Flex\n      direction=\"column\"\n      align=\"center\"\n      justify=\"center\"\n      css={{\n        size: '100%',\n        bg: '$background_default',\n        color: '$on_surface_high',\n      }}\n    >\n      <ShareScreenIcon width={48} height={48} />\n      <Text variant=\"h5\" css={{ m: '$8 0' }}>\n        You are sharing your screen\n      </Text>\n      <Button\n        variant=\"danger\"\n        css={{ fontWeight: '$semiBold' }}\n        onClick={async () => {\n          await hmsActions.setScreenShareEnabled(false);\n        }}\n        data-testid=\"stop_screen_share_btn\"\n      >\n        <CrossIcon width={18} height={18} />\n        &nbsp; Stop screen share\n      </Button>\n    </Flex>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["React", "useState", "useMedia", "useHMSStore", "React", "useState", "React", "React", "useState", "React", "useHMSStore", "useState", "useMedia", "React"]
-}