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

package/dist/chunk-JKWX7W4K.js

@@ -0,0 +1,161 @@
+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

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

@@ -0,0 +1,114 @@
+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

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

@@ -0,0 +1,59 @@
+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

@@ -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": []
+}

package/dist/chunk-OA4HW7HW.js

@@ -0,0 +1,262 @@
+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