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

package/dist/chunk-JKWX7W4K.js

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

package/dist/chunk-JKWX7W4K.js.map

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

package/dist/chunk-LO4BXA4G.js

@@ -1,114 +0,0 @@
-import {
-  Dropdown,
-  useDropdownList,
-  useLandscapeHLSStream,
-  useMobileHLSStream
-} from "./chunk-BQOT4DK7.js";
-import {
-  Box,
-  Flex
-} from "./chunk-7QZJMUHM.js";
-import {
-  IconButton_default,
-  Tooltip,
-  useRoomLayoutConferencingScreen
-} from "./chunk-ENHSO6YN.js";
-import {
-  EMOJI_REACTION_TYPE,
-  __async,
-  config,
-  init_define_process_env,
-  styled
-} from "./chunk-TBXRX6MK.js";
-
-// src/Prebuilt/components/EmojiReaction.jsx
-init_define_process_env();
-import React2, { useState } from "react";
-import { useMedia } from "react-use";
-import data from "@emoji-mart/data/sets/14/apple.json";
-import { init } from "emoji-mart";
-import {
-  selectAvailableRoleNames,
-  selectIsConnectedToRoom,
-  selectLocalPeerID,
-  useCustomEvent,
-  useHMSStore
-} from "@100mslive/react-sdk";
-import { EmojiIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Footer/EmojiCard.jsx
-init_define_process_env();
-import React from "react";
-var emojiReactionList = [
-  [{ emojiId: "+1" }, { emojiId: "-1" }, { emojiId: "wave" }, { emojiId: "clap" }, { emojiId: "fire" }],
-  [{ emojiId: "tada" }, { emojiId: "heart_eyes" }, { emojiId: "joy" }, { emojiId: "open_mouth" }, { emojiId: "sob" }]
-];
-var EmojiCard = ({ sendReaction }) => {
-  return emojiReactionList.map((emojiLine, index) => /* @__PURE__ */ React.createElement(Flex, { key: index, justify: "between", css: { mb: "$8" } }, emojiLine.map((emoji) => /* @__PURE__ */ React.createElement(EmojiContainer, { key: emoji.emojiId, onClick: () => sendReaction(emoji.emojiId) }, /* @__PURE__ */ React.createElement("em-emoji", { id: emoji.emojiId, size: "100%", set: "apple" })))));
-};
-var EmojiContainer = styled("span", {
-  position: "relative",
-  cursor: "pointer",
-  width: "$16",
-  height: "$16",
-  p: "$4",
-  "&:hover": {
-    p: "7px",
-    bg: "$surface_brighter",
-    borderRadius: "$1"
-  }
-});
-
-// src/Prebuilt/components/EmojiReaction.jsx
-init({ data });
-var EmojiReaction = ({ showCard = false }) => {
-  const [open, setOpen] = useState(false);
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const { elements } = useRoomLayoutConferencingScreen();
-  useDropdownList({ open, name: "EmojiReaction" });
-  const roles = useHMSStore(selectAvailableRoleNames);
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const isMobile = useMedia(config.media.md);
-  const isLandscape = useMedia(config.media.ls);
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeStream = useLandscapeHLSStream();
-  const { sendEvent } = useCustomEvent({
-    type: EMOJI_REACTION_TYPE
-  });
-  const sendReaction = (emojiId) => __async(void 0, null, function* () {
-    var _a;
-    const data2 = {
-      type: EMOJI_REACTION_TYPE,
-      emojiId,
-      senderId: localPeerId
-    };
-    sendEvent(data2, { roleNames: roles });
-    (_a = window.showFlyingEmoji) == null ? void 0 : _a.call(window, { emojiId, senderId: localPeerId });
-  });
-  if (!isConnected || !elements.emoji_reactions) {
-    return null;
-  }
-  if (showCard) {
-    return /* @__PURE__ */ React2.createElement(EmojiCard, { sendReaction });
-  }
-  return /* @__PURE__ */ React2.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React2.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "emoji_reaction_btn" }, /* @__PURE__ */ React2.createElement(
-    IconButton_default,
-    {
-      css: isMobile || isLandscape ? { bg: "$surface_default", r: "$round", border: "1px solid $border_bright" } : {}
-    },
-    /* @__PURE__ */ React2.createElement(Tooltip, { title: "Emoji reaction" }, /* @__PURE__ */ React2.createElement(Box, null, /* @__PURE__ */ React2.createElement(EmojiIcon, null)))
-  )), /* @__PURE__ */ React2.createElement(
-    Dropdown.Content,
-    {
-      sideOffset: 5,
-      align: isMobileHLSStream || isLandscapeStream ? "end" : "center",
-      css: { p: "$8", bg: "$surface_default" }
-    },
-    /* @__PURE__ */ React2.createElement(EmojiCard, { sendReaction })
-  ));
-};
-
-export {
-  EmojiReaction
-};
-//# sourceMappingURL=chunk-LO4BXA4G.js.map

package/dist/chunk-LO4BXA4G.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/components/EmojiReaction.jsx", "../src/Prebuilt/components/Footer/EmojiCard.jsx"],
-  "sourcesContent": ["import React, { useState } from 'react';\nimport { useMedia } from 'react-use';\nimport data from '@emoji-mart/data/sets/14/apple.json';\nimport { init } from 'emoji-mart';\nimport {\n  selectAvailableRoleNames,\n  selectIsConnectedToRoom,\n  selectLocalPeerID,\n  useCustomEvent,\n  useHMSStore,\n} from '@100mslive/react-sdk';\nimport { EmojiIcon } from '@100mslive/react-icons';\nimport { EmojiCard } from './Footer/EmojiCard';\n// import { ToastManager } from './Toast/ToastManager';\nimport { Dropdown } from '../../Dropdown';\nimport { Box } from '../../Layout';\nimport { config as cssConfig } from '../../Theme';\nimport { Tooltip } from '../../Tooltip';\nimport IconButton from '../IconButton';\nimport { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';\nimport { useDropdownList } from './hooks/useDropdownList';\nimport { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';\nimport { EMOJI_REACTION_TYPE } from '../common/constants';\n\ninit({ data });\n\nexport const EmojiReaction = ({ showCard = false }) => {\n  const [open, setOpen] = useState(false);\n  const isConnected = useHMSStore(selectIsConnectedToRoom);\n  const { elements } = useRoomLayoutConferencingScreen();\n  useDropdownList({ open: open, name: 'EmojiReaction' });\n  // const hmsActions = useHMSActions();\n  const roles = useHMSStore(selectAvailableRoleNames);\n  const localPeerId = useHMSStore(selectLocalPeerID);\n  // const { isStreamingOn } = useRecordingStreaming();\n  const isMobile = useMedia(cssConfig.media.md);\n  const isLandscape = useMedia(cssConfig.media.ls);\n  const isMobileHLSStream = useMobileHLSStream();\n  const isLandscapeStream = useLandscapeHLSStream();\n\n  const { sendEvent } = useCustomEvent({\n    type: EMOJI_REACTION_TYPE,\n  });\n\n  const sendReaction = async emojiId => {\n    const data = {\n      type: EMOJI_REACTION_TYPE,\n      emojiId: emojiId,\n      senderId: localPeerId,\n    };\n    // TODO: RT find a way to figure out hls-viewer roles\n    sendEvent(data, { roleNames: roles });\n    window.showFlyingEmoji?.({ emojiId, senderId: localPeerId });\n    /* if (isStreamingOn) {\n      try {\n        await hmsActions.sendHLSTimedMetadata([\n          {\n            payload: JSON.stringify(data),\n            duration: 2,\n          },\n        ]);\n      } catch (error) {\n        console.log(error);\n        ToastManager.addToast({ title: error.message });\n      }\n    } */\n  };\n\n  if (!isConnected || !elements.emoji_reactions) {\n    return null;\n  }\n\n  if (showCard) {\n    return <EmojiCard sendReaction={sendReaction} />;\n  }\n  return (\n    <Dropdown.Root open={open} onOpenChange={setOpen}>\n      <Dropdown.Trigger asChild data-testid=\"emoji_reaction_btn\">\n        <IconButton\n          css={\n            isMobile || isLandscape ? { bg: '$surface_default', r: '$round', border: '1px solid $border_bright' } : {}\n          }\n        >\n          <Tooltip title=\"Emoji reaction\">\n            <Box>\n              <EmojiIcon />\n            </Box>\n          </Tooltip>\n        </IconButton>\n      </Dropdown.Trigger>\n      <Dropdown.Content\n        sideOffset={5}\n        align={isMobileHLSStream || isLandscapeStream ? 'end' : 'center'}\n        css={{ p: '$8', bg: '$surface_default' }}\n      >\n        <EmojiCard sendReaction={sendReaction} />\n      </Dropdown.Content>\n    </Dropdown.Root>\n  );\n};\n", "import React from 'react';\nimport { Flex } from '../../../Layout';\nimport { styled } from '../../../Theme';\n\n// When changing emojis in the grid, keep in mind that the payload used in sendHLSTimedMetadata has a limit of 100 characters. Using bigger emoji Ids can cause the limit to be exceeded.\nconst emojiReactionList = [\n  [{ emojiId: '+1' }, { emojiId: '-1' }, { emojiId: 'wave' }, { emojiId: 'clap' }, { emojiId: 'fire' }],\n  [{ emojiId: 'tada' }, { emojiId: 'heart_eyes' }, { emojiId: 'joy' }, { emojiId: 'open_mouth' }, { emojiId: 'sob' }],\n];\n\nexport const EmojiCard = ({ sendReaction }) => {\n  return emojiReactionList.map((emojiLine, index) => (\n    <Flex key={index} justify=\"between\" css={{ mb: '$8' }}>\n      {emojiLine.map(emoji => (\n        <EmojiContainer key={emoji.emojiId} onClick={() => sendReaction(emoji.emojiId)}>\n          <em-emoji id={emoji.emojiId} size=\"100%\" set=\"apple\"></em-emoji>\n        </EmojiContainer>\n      ))}\n    </Flex>\n  ));\n};\n\nconst EmojiContainer = styled('span', {\n  position: 'relative',\n  cursor: 'pointer',\n  width: '$16',\n  height: '$16',\n  p: '$4',\n  '&:hover': {\n    p: '7px',\n    bg: '$surface_brighter',\n    borderRadius: '$1',\n  },\n});\n"],
-  "mappings": "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",
-  "names": ["React", "data", "React"]
-}

package/dist/chunk-MRVWNFXC.js

@@ -1,59 +0,0 @@
-import {
-  useVideoTileContext
-} from "./chunk-PJQSPAFZ.js";
-import {
-  VideoTile_default
-} from "./chunk-26D5FDBW.js";
-import {
-  Box
-} from "./chunk-7QZJMUHM.js";
-import {
-  __spreadValues,
-  init_define_process_env
-} from "./chunk-TBXRX6MK.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-MRVWNFXC.js.map

package/dist/chunk-MRVWNFXC.js.map

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

package/dist/chunk-OA4HW7HW.js

@@ -1,262 +0,0 @@
-import {
-  LiveStatus,
-  RecordingPauseStatus,
-  RecordingStatus,
-  StreamActions
-} from "./chunk-QKXHQ6DV.js";
-import {
-  HorizontalDivider,
-  Label,
-  Logo,
-  Sheet,
-  SpeakerTag,
-  useSheetToggle,
-  useSidepaneToggle
-} from "./chunk-26D5FDBW.js";
-import {
-  Text
-} from "./chunk-JKWX7W4K.js";
-import {
-  ToastManager
-} from "./chunk-BQOT4DK7.js";
-import {
-  Box,
-  Flex
-} from "./chunk-7QZJMUHM.js";
-import {
-  IconButton_default,
-  useRoomLayoutHeader
-} from "./chunk-ENHSO6YN.js";
-import {
-  SHEET_OPTIONS,
-  SIDE_PANE_OPTIONS,
-  __async,
-  config,
-  init_define_process_env
-} from "./chunk-TBXRX6MK.js";
-
-// src/Prebuilt/components/Header/Header.tsx
-init_define_process_env();
-import React3 from "react";
-import { useMedia as useMedia2 } from "react-use";
-import { HMSRoomState, selectRoomState, useHMSStore as useHMSStore2 } from "@100mslive/react-sdk";
-
-// src/Prebuilt/components/Header/RoomDetailsHeader.tsx
-init_define_process_env();
-import React from "react";
-import { useMedia } from "react-use";
-import { ChevronRightIcon } from "@100mslive/react-icons";
-var RoomDetailsHeader = () => {
-  const { title, description } = useRoomLayoutHeader();
-  const isMobile = useMedia(config.media.md);
-  const clipLength = 30;
-  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
-  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
-  if (!title && !description || isMobile && !title) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Flex, { direction: isMobile ? "row" : "column", css: { ml: "$8", alignItems: isMobile ? "center" : "start" } }, /* @__PURE__ */ React.createElement(Text, { variant: "sm", css: { c: "$on_surface_high", fontWeight: "$semiBold" } }, title), !isMobile && /* @__PURE__ */ React.createElement(Flex, { align: "end", css: { color: "$on_surface_high" } }, /* @__PURE__ */ React.createElement(Text, { variant: "xs", css: { c: "$on_surface_medium" } }, description.slice(0, clipLength)), description.length > clipLength ? /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      style: { fontWeight: "600", fontSize: "12px", cursor: "pointer", lineHeight: "1rem" },
-      onClick: toggleDetailsPane
-    },
-    "\xA0...more"
-  ) : null), isMobile && description ? /* @__PURE__ */ React.createElement(Flex, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ React.createElement(ChevronRightIcon, { height: 16, width: 16, onClick: toggleDetailsSheet })) : null);
-};
-
-// src/Prebuilt/components/Header/common.jsx
-init_define_process_env();
-import React2 from "react";
-import {
-  DeviceType,
-  getAudioDeviceCategory,
-  HMSAudioDeviceCategory,
-  selectIsLocalVideoEnabled,
-  selectLocalVideoTrackID,
-  selectVideoTrackByID,
-  useDevices,
-  useHMSActions,
-  useHMSStore
-} from "@100mslive/react-sdk";
-import {
-  BluetoothIcon,
-  CameraFlipIcon,
-  CheckIcon,
-  CrossIcon,
-  HeadphonesIcon,
-  SpeakerIcon,
-  TelePhoneIcon
-} from "@100mslive/react-icons";
-var CamaraFlipActions = () => {
-  const actions = useHMSActions();
-  const { allDevices } = useDevices();
-  const { videoInput } = allDevices;
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
-  const videoTrackId = useHMSStore(selectLocalVideoTrackID);
-  const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
-  if (!videoInput || !(videoInput == null ? void 0 : videoInput.length) || !(localVideoTrack == null ? void 0 : localVideoTrack.facingMode)) {
-    return null;
-  }
-  return /* @__PURE__ */ React2.createElement(Box, null, /* @__PURE__ */ React2.createElement(
-    IconButton_default,
-    {
-      disabled: !isVideoOn,
-      onClick: () => __async(void 0, null, function* () {
-        try {
-          yield actions.switchCamera();
-        } catch (e) {
-          ToastManager.addToast({
-            title: `Error while flipping camera ${e.message || ""}`,
-            variant: "error"
-          });
-        }
-      })
-    },
-    /* @__PURE__ */ React2.createElement(CameraFlipIcon, null)
-  ));
-};
-var AudioActions = () => {
-  const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
-  const shouldShowAudioOutput = "setSinkId" in HTMLMediaElement.prototype;
-  const { audioInput, audioOutput } = allDevices;
-  let availableAudioDevices = audioInput;
-  let selectedAudio = selectedDeviceIDs.audioInput;
-  if (shouldShowAudioOutput) {
-    availableAudioDevices = audioOutput;
-    selectedAudio = selectedDeviceIDs.audioOutput;
-  }
-  const hmsActions = useHMSActions();
-  const audioFiltered = availableAudioDevices == null ? void 0 : availableAudioDevices.find((item) => !!item.label);
-  const currentSelection = availableAudioDevices == null ? void 0 : availableAudioDevices.find((item) => item.deviceId === selectedAudio);
-  if (!audioFiltered) {
-    return null;
-  }
-  const deviceCategory = getAudioDeviceCategory(currentSelection == null ? void 0 : currentSelection.label);
-  let AudioIcon = /* @__PURE__ */ React2.createElement(SpeakerIcon, null);
-  if (deviceCategory === HMSAudioDeviceCategory.BLUETOOTH) {
-    AudioIcon = /* @__PURE__ */ React2.createElement(BluetoothIcon, null);
-  } else if (deviceCategory === HMSAudioDeviceCategory.WIRED) {
-    AudioIcon = /* @__PURE__ */ React2.createElement(HeadphonesIcon, null);
-  } else if (deviceCategory === HMSAudioDeviceCategory.EARPIECE) {
-    AudioIcon = /* @__PURE__ */ React2.createElement(TelePhoneIcon, null);
-  }
-  return /* @__PURE__ */ React2.createElement(
-    AudioSelectionSheet,
-    {
-      audioDevices: availableAudioDevices,
-      audioSelected: selectedAudio,
-      onChange: (deviceId) => __async(void 0, null, function* () {
-        try {
-          yield updateDevice({
-            deviceId,
-            deviceType: shouldShowAudioOutput ? DeviceType.audioOutput : DeviceType.audioInput
-          });
-        } catch (e) {
-          ToastManager.addToast({
-            title: `Error while changing audio device ${e.message || ""}`,
-            variant: "error"
-          });
-        }
-      })
-    },
-    /* @__PURE__ */ React2.createElement(
-      Box,
-      {
-        onClick: () => __async(void 0, null, function* () {
-          yield hmsActions.refreshDevices();
-        })
-      },
-      /* @__PURE__ */ React2.createElement(IconButton_default, null, AudioIcon)
-    )
-  );
-};
-var AudioSelectionSheet = ({ audioDevices, audioSelected, onChange, children }) => {
-  return /* @__PURE__ */ React2.createElement(Sheet.Root, null, /* @__PURE__ */ React2.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React2.createElement(Sheet.Content, null, /* @__PURE__ */ React2.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React2.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React2.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio"), /* @__PURE__ */ React2.createElement(Sheet.Close, null, /* @__PURE__ */ React2.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React2.createElement(CrossIcon, null))))), /* @__PURE__ */ React2.createElement(HorizontalDivider, null), /* @__PURE__ */ React2.createElement(
-    Flex,
-    {
-      direction: "column",
-      css: {
-        px: "$8",
-        maxHeight: "80vh",
-        overflowY: "auto"
-      }
-    },
-    audioDevices.map((audioDevice) => {
-      return /* @__PURE__ */ React2.createElement(
-        SelectWithLabel,
-        {
-          key: audioDevice.deviceId,
-          label: audioDevice.label,
-          id: audioDevice.deviceId,
-          checked: audioDevice.deviceId === audioSelected,
-          onChange: () => onChange(audioDevice.deviceId)
-        }
-      );
-    })
-  )));
-};
-var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React2.createElement(React2.Fragment, null), checked, id, onChange }) => {
-  return /* @__PURE__ */ React2.createElement(
-    Flex,
-    {
-      align: "center",
-      css: {
-        my: "$2",
-        py: "$8",
-        w: "100%",
-        borderBottom: "1px solid $border_default"
-      },
-      onClick: onChange
-    },
-    /* @__PURE__ */ React2.createElement(
-      Label,
-      {
-        htmlFor: id,
-        css: {
-          fontSize: "$md",
-          fontWeight: "$semiBold",
-          color: "$on_surface_high",
-          cursor: "pointer",
-          display: "flex",
-          alignItems: "center",
-          gap: "$8",
-          flex: "1 1 0"
-        }
-      },
-      icon,
-      label
-    ),
-    checked && /* @__PURE__ */ React2.createElement(CheckIcon, { width: 24, height: 24 })
-  );
-};
-
-// src/Prebuilt/components/Header/Header.tsx
-var Header = () => {
-  const roomState = useHMSStore2(selectRoomState);
-  const isMobile = useMedia2(config.media.md);
-  if (roomState !== HMSRoomState.Connected) {
-    return /* @__PURE__ */ React3.createElement(React3.Fragment, null);
-  }
-  return /* @__PURE__ */ React3.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ React3.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ React3.createElement(Logo, null), /* @__PURE__ */ React3.createElement(RoomDetailsHeader, null), /* @__PURE__ */ React3.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ React3.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React3.createElement(LiveStatus, null), /* @__PURE__ */ React3.createElement(RecordingStatus, null), /* @__PURE__ */ React3.createElement(RecordingPauseStatus, null))), /* @__PURE__ */ React3.createElement(
-    Flex,
-    {
-      align: "center",
-      css: {
-        position: "absolute",
-        right: "$10",
-        gap: "$4"
-      }
-    },
-    /* @__PURE__ */ React3.createElement(StreamActions, null),
-    isMobile ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(CamaraFlipActions, null), /* @__PURE__ */ React3.createElement(AudioActions, null)) : null
-  ));
-};
-
-// src/Prebuilt/components/Header/index.tsx
-init_define_process_env();
-
-export {
-  Header
-};
-//# sourceMappingURL=chunk-OA4HW7HW.js.map