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

package/dist/ScreenshareLayout-TM7DLYLH.js

@@ -0,0 +1,358 @@
+import {
+  InsetTile
+} from "./chunk-DVVFWHQG.js";
+import {
+  ProminenceLayout,
+  SecondaryTiles
+} from "./chunk-UZW3C3ML.js";
+import {
+  Pagination
+} from "./chunk-B3HHL3ND.js";
+import {
+  Button,
+  LayoutMode,
+  LayoutModeIconMapping,
+  Popover,
+  StyledVideoTile,
+  TileMenu_default,
+  Video,
+  VideoTileStats,
+  getVideoTileLabel,
+  useTheme
+} from "./chunk-4BQ3AMVG.js";
+import {
+  Text
+} from "./chunk-BXBPZGSP.js";
+import "./chunk-USEEH3QW.js";
+import {
+  Box,
+  Flex
+} from "./chunk-4L5OKEIV.js";
+import {
+  useSetAppDataByKey,
+  useSetUiSettings,
+  useUISettings
+} from "./chunk-6BX3VCVC.js";
+import {
+  APP_DATA,
+  UI_SETTINGS,
+  __async,
+  config,
+  init_define_process_env
+} from "./chunk-YDIB6WKJ.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-TM7DLYLH.js.map

package/dist/ScreenshareLayout-TM7DLYLH.js.map

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