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

package/dist/chunk-DVVFWHQG.js

@@ -1,136 +0,0 @@
-import {
-  useVideoTileContext
-} from "./chunk-B3HHL3ND.js";
-import {
-  AudioVideoToggle,
-  VideoTile_default
-} from "./chunk-4BQ3AMVG.js";
-import {
-  Text
-} from "./chunk-BXBPZGSP.js";
-import {
-  Box,
-  Flex
-} from "./chunk-4L5OKEIV.js";
-import {
-  IconButton_default,
-  useSetAppDataByKey
-} from "./chunk-6BX3VCVC.js";
-import {
-  APP_DATA,
-  __spreadProps,
-  __spreadValues,
-  config,
-  init_define_process_env
-} from "./chunk-YDIB6WKJ.js";
-
-// src/Prebuilt/components/InsetTile.tsx
-init_define_process_env();
-import React, { useEffect, useRef } from "react";
-import Draggable from "react-draggable";
-import { useMedia } from "react-use";
-import {
-  selectIsAllowedToPublish,
-  selectLocalPeer,
-  selectPeerByID,
-  selectVideoTrackByID,
-  useHMSStore
-} from "@100mslive/react-sdk";
-import { ExpandIcon } from "@100mslive/react-icons";
-var MinimisedTile = ({ setMinimised }) => {
-  return /* @__PURE__ */ React.createElement(Flex, { align: "center", css: { gap: "$6", r: "$1", bg: "$surface_default", p: "$4", color: "$on_surface_high" } }, /* @__PURE__ */ React.createElement(AudioVideoToggle, { hideOptions: true }), /* @__PURE__ */ React.createElement(Text, null, "You"), /* @__PURE__ */ React.createElement(
-    IconButton_default,
-    {
-      className: "__cancel-drag-event",
-      onClick: () => setMinimised(false),
-      css: { bg: "transparent", border: "transparent" }
-    },
-    /* @__PURE__ */ React.createElement(ExpandIcon, null)
-  ));
-};
-var insetHeightPx = 180;
-var insetMaxWidthPx = 240;
-var defaultMobileAspectRatio = 9 / 16;
-var desktopAspectRatio = 1 / defaultMobileAspectRatio;
-var InsetTile = ({ peerId }) => {
-  const isMobile = useMedia(config.media.md);
-  const isLandscape = useMedia(config.media.ls);
-  const selector = peerId ? selectPeerByID(peerId) : selectLocalPeer;
-  const peer = useHMSStore(selector);
-  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const videoTrack = useHMSStore(selectVideoTrackByID(peer == null ? void 0 : peer.videoTrack));
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const videoTileProps = useVideoTileContext();
-  let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
-  if ((videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) && !isMobile) {
-    aspectRatio = videoTrack.width / videoTrack.height;
-  }
-  let height = insetHeightPx;
-  let width = height * aspectRatio;
-  if (isLandscape && width > insetMaxWidthPx) {
-    width = 240;
-    height = width / aspectRatio;
-  }
-  const nodeRef = useRef(null);
-  useEffect(() => {
-    const node = nodeRef.current;
-    if (!node || !window.ResizeObserver) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.target === node.parentElement) {
-          node.style.transform = `translate(0,0)`;
-        }
-      });
-    });
-    node.parentElement && resizeObserver.observe(node.parentElement);
-    return () => {
-      (node == null ? void 0 : node.parentElement) && (resizeObserver == null ? void 0 : resizeObserver.unobserve(node.parentElement));
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-    };
-  }, []);
-  if (!isAllowedToPublish.video && !isAllowedToPublish.audio) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Draggable, { bounds: "parent", nodeRef, cancel: ".__cancel-drag-event" }, /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      ref: nodeRef,
-      css: __spreadValues({
-        position: "absolute",
-        bottom: 0,
-        right: 0,
-        zIndex: 10,
-        boxShadow: "0 0 8px 0 rgba(0,0,0,0.3)",
-        r: "$2"
-      }, !minimised ? {
-        aspectRatio,
-        h: height
-      } : {})
-    },
-    minimised ? /* @__PURE__ */ React.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ React.createElement(
-      VideoTile_default,
-      __spreadProps(__spreadValues({
-        peerId: peer == null ? void 0 : peer.id,
-        trackId: peer == null ? void 0 : peer.videoTrack,
-        rootCSS: {
-          size: "100%",
-          padding: 0
-        },
-        width,
-        height,
-        containerCSS: { background: "$surface_default" },
-        canMinimise: true,
-        isDragabble: true
-      }, videoTileProps), {
-        hideParticipantNameOnTile: true
-      })
-    )
-  ));
-};
-
-export {
-  InsetTile
-};
-//# sourceMappingURL=chunk-DVVFWHQG.js.map

package/dist/chunk-DVVFWHQG.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/components/InsetTile.tsx"],
-  "sourcesContent": ["import React, { useEffect, useRef } from 'react';\nimport Draggable from 'react-draggable';\nimport { useMedia } from 'react-use';\nimport {\n  selectIsAllowedToPublish,\n  selectLocalPeer,\n  selectPeerByID,\n  selectVideoTrackByID,\n  useHMSStore,\n} from '@100mslive/react-sdk';\nimport { ExpandIcon } from '@100mslive/react-icons';\nimport { Box, Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport { config as cssConfig } from '../../Theme';\n// @ts-ignore: No implicit Any\nimport IconButton from '../IconButton';\n// @ts-ignore: No implicit Any\nimport { AudioVideoToggle } from './AudioVideoToggle';\n// @ts-ignore: No implicit Any\nimport VideoTile from './VideoTile';\n// @ts-ignore: No implicit Any\nimport { useSetAppDataByKey } from './AppData/useUISettings';\nimport { useVideoTileContext } from './hooks/useVideoTileLayout';\n// @ts-ignore: No implicit Any\nimport { APP_DATA } from '../common/constants';\n\nconst MinimisedTile = ({ setMinimised }: { setMinimised: (value: boolean) => void }) => {\n  return (\n    <Flex align=\"center\" css={{ gap: '$6', r: '$1', bg: '$surface_default', p: '$4', color: '$on_surface_high' }}>\n      <AudioVideoToggle hideOptions={true} />\n      <Text>You</Text>\n      <IconButton\n        className=\"__cancel-drag-event\"\n        onClick={() => setMinimised(false)}\n        css={{ bg: 'transparent', border: 'transparent' }}\n      >\n        <ExpandIcon />\n      </IconButton>\n    </Flex>\n  );\n};\n\nconst insetHeightPx = 180;\nconst insetMaxWidthPx = 240;\nconst defaultMobileAspectRatio = 9 / 16;\nconst desktopAspectRatio = 1 / defaultMobileAspectRatio;\n\nexport const InsetTile = ({ peerId }: { peerId?: string }) => {\n  const isMobile = useMedia(cssConfig.media.md);\n  const isLandscape = useMedia(cssConfig.media.ls);\n  const selector = peerId ? selectPeerByID(peerId) : selectLocalPeer;\n  const peer = useHMSStore(selector);\n  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);\n  const videoTrack = useHMSStore(selectVideoTrackByID(peer?.videoTrack));\n  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);\n  const videoTileProps = useVideoTileContext();\n  let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;\n  if (videoTrack?.width && videoTrack?.height && !isMobile) {\n    aspectRatio = videoTrack.width / videoTrack.height;\n  }\n  let height = insetHeightPx;\n  let width = height * aspectRatio;\n  // Convert to 16/9 in landscape mode with a max width of 240\n  if (isLandscape && width > insetMaxWidthPx) {\n    width = 240;\n    height = width / aspectRatio;\n  }\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const node = nodeRef.current;\n    if (!node || !window.ResizeObserver) {\n      return;\n    }\n    const resizeObserver = new ResizeObserver(entries => {\n      entries.forEach(entry => {\n        if (entry.target === node.parentElement) {\n          // reset to original position on resize\n          node.style.transform = `translate(0,0)`;\n        }\n      });\n    });\n    node.parentElement && resizeObserver.observe(node.parentElement);\n    return () => {\n      node?.parentElement && resizeObserver?.unobserve(node.parentElement);\n      resizeObserver?.disconnect();\n    };\n  }, []);\n\n  if (!isAllowedToPublish.video && !isAllowedToPublish.audio) {\n    return null;\n  }\n\n  return (\n    <Draggable bounds=\"parent\" nodeRef={nodeRef} cancel=\".__cancel-drag-event\">\n      <Box\n        ref={nodeRef}\n        css={{\n          position: 'absolute',\n          bottom: 0,\n          right: 0,\n          zIndex: 10,\n          boxShadow: '0 0 8px 0 rgba(0,0,0,0.3)',\n          r: '$2',\n          ...(!minimised\n            ? {\n                aspectRatio: aspectRatio,\n                h: height,\n              }\n            : {}),\n        }}\n      >\n        {minimised ? (\n          <MinimisedTile setMinimised={setMinimised} />\n        ) : (\n          <VideoTile\n            peerId={peer?.id}\n            trackId={peer?.videoTrack}\n            rootCSS={{\n              size: '100%',\n              padding: 0,\n            }}\n            width={width}\n            height={height}\n            containerCSS={{ background: '$surface_default' }}\n            canMinimise\n            isDragabble\n            {...videoTileProps}\n            hideParticipantNameOnTile\n          />\n        )}\n      </Box>\n    </Draggable>\n  );\n};\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/chunk-GV2DTYSU.js

@@ -1,262 +0,0 @@
-import {
-  LiveStatus,
-  RecordingPauseStatus,
-  RecordingStatus,
-  StreamActions
-} from "./chunk-KF2YEUWU.js";
-import {
-  HorizontalDivider,
-  Label,
-  Logo,
-  Sheet,
-  SpeakerTag,
-  useSheetToggle,
-  useSidepaneToggle
-} from "./chunk-4BQ3AMVG.js";
-import {
-  Text
-} from "./chunk-BXBPZGSP.js";
-import {
-  ToastManager
-} from "./chunk-USEEH3QW.js";
-import {
-  Box,
-  Flex
-} from "./chunk-4L5OKEIV.js";
-import {
-  IconButton_default,
-  useRoomLayoutHeader
-} from "./chunk-6BX3VCVC.js";
-import {
-  SHEET_OPTIONS,
-  SIDE_PANE_OPTIONS,
-  __async,
-  config,
-  init_define_process_env
-} from "./chunk-YDIB6WKJ.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-GV2DTYSU.js.map

package/dist/chunk-GV2DTYSU.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/components/Header/Header.tsx", "../src/Prebuilt/components/Header/RoomDetailsHeader.tsx", "../src/Prebuilt/components/Header/common.jsx", "../src/Prebuilt/components/Header/index.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { useMedia } from 'react-use';\nimport { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';\nimport { config as cssConfig, Flex } from '../../..';\n// @ts-ignore: No implicit any\nimport { Logo, SpeakerTag } from './HeaderComponents';\n// @ts-ignore: No implicit any\nimport { RoomDetailsHeader } from './RoomDetailsHeader';\nimport { LiveStatus, RecordingPauseStatus, RecordingStatus, StreamActions } from './StreamActions';\n// @ts-ignore: No implicit any\nimport { AudioActions, CamaraFlipActions } from './common';\n\nexport const Header = () => {\n  const roomState = useHMSStore(selectRoomState);\n  const isMobile = useMedia(cssConfig.media.md);\n  // Header should be present only inside the call - not in preview, leave room states\n  if (roomState !== HMSRoomState.Connected) {\n    return <></>;\n  }\n  return (\n    <Flex justify=\"between\" align=\"center\" css={{ position: 'relative', height: '100%' }}>\n      <Flex align=\"center\" gap=\"2\" css={{ position: 'absolute', left: '$10' }}>\n        <Logo />\n        <RoomDetailsHeader />\n        <SpeakerTag />\n        {isMobile && (\n          <Flex align=\"center\" css={{ gap: '$4' }}>\n            <LiveStatus />\n            <RecordingStatus />\n            <RecordingPauseStatus />\n          </Flex>\n        )}\n      </Flex>\n      <Flex\n        align=\"center\"\n        css={{\n          position: 'absolute',\n          right: '$10',\n          gap: '$4',\n        }}\n      >\n        <StreamActions />\n        {isMobile ? (\n          <>\n            <CamaraFlipActions />\n            <AudioActions />\n          </>\n        ) : null}\n      </Flex>\n    </Flex>\n  );\n};\n", "import React from 'react';\nimport { useMedia } from 'react-use';\nimport { ChevronRightIcon } from '@100mslive/react-icons';\nimport { Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport { config as cssConfig } from '../../../Theme';\nimport { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';\nimport { useSheetToggle } from '../AppData/useSheet';\n// @ts-ignore\nimport { useSidepaneToggle } from '../AppData/useSidepane';\nimport { SHEET_OPTIONS, SIDE_PANE_OPTIONS } from '../../common/constants';\n\nexport const RoomDetailsHeader = () => {\n  const { title, description } = useRoomLayoutHeader();\n  const isMobile = useMedia(cssConfig.media.md);\n  const clipLength = 30;\n  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);\n  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);\n\n  if ((!title && !description) || (isMobile && !title)) {\n    return null;\n  }\n\n  return (\n    <Flex direction={isMobile ? 'row' : 'column'} css={{ ml: '$8', alignItems: isMobile ? 'center' : 'start' }}>\n      <Text variant=\"sm\" css={{ c: '$on_surface_high', fontWeight: '$semiBold' }}>\n        {title}\n      </Text>\n      {!isMobile && (\n        <Flex align=\"end\" css={{ color: '$on_surface_high' }}>\n          <Text variant=\"xs\" css={{ c: '$on_surface_medium' }}>\n            {description.slice(0, clipLength)}\n          </Text>\n          {description.length > clipLength ? (\n            <span\n              style={{ fontWeight: '600', fontSize: '12px', cursor: 'pointer', lineHeight: '1rem' }}\n              onClick={toggleDetailsPane}\n            >\n              &nbsp;...more\n            </span>\n          ) : null}\n        </Flex>\n      )}\n      {isMobile && description ? (\n        <Flex css={{ color: '$on_surface_medium' }}>\n          <ChevronRightIcon height={16} width={16} onClick={toggleDetailsSheet} />\n        </Flex>\n      ) : null}\n    </Flex>\n  );\n};\n", "import React from 'react';\nimport {\n  DeviceType,\n  getAudioDeviceCategory,\n  HMSAudioDeviceCategory,\n  selectIsLocalVideoEnabled,\n  selectLocalVideoTrackID,\n  selectVideoTrackByID,\n  useDevices,\n  useHMSActions,\n  useHMSStore,\n} from '@100mslive/react-sdk';\nimport {\n  BluetoothIcon,\n  CameraFlipIcon,\n  CheckIcon,\n  CrossIcon,\n  HeadphonesIcon,\n  SpeakerIcon,\n  TelePhoneIcon,\n} from '@100mslive/react-icons';\nimport { HorizontalDivider } from '../../../Divider';\nimport { Label } from '../../../Label';\nimport { Box, Flex } from '../../../Layout';\nimport { Sheet } from '../../../Sheet';\nimport { Text } from '../../../Text';\nimport IconButton from '../../IconButton';\nimport { ToastManager } from '../Toast/ToastManager';\n\nexport const CamaraFlipActions = () => {\n  const actions = useHMSActions();\n  const { allDevices } = useDevices();\n  const { videoInput } = allDevices;\n  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);\n\n  const videoTrackId = useHMSStore(selectLocalVideoTrackID);\n  const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));\n  if (!videoInput || !videoInput?.length || !localVideoTrack?.facingMode) {\n    return null;\n  }\n  return (\n    <Box>\n      <IconButton\n        disabled={!isVideoOn}\n        onClick={async () => {\n          try {\n            await actions.switchCamera();\n          } catch (e) {\n            ToastManager.addToast({\n              title: `Error while flipping camera ${e.message || ''}`,\n              variant: 'error',\n            });\n          }\n        }}\n      >\n        <CameraFlipIcon />\n      </IconButton>\n    </Box>\n  );\n};\n\n// It will handle and show audio input devices in Mweb while audio output devices in desktop\nexport const AudioActions = () => {\n  const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();\n\n  // don't show speaker selector where the API is not supported, and use\n  // a generic word(\"Audio\") for Mic. In some cases(Chrome Android for example) this changes both mic and speaker keeping them in sync.\n  const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype;\n  const { audioInput, audioOutput } = allDevices;\n  let availableAudioDevices = audioInput;\n  let selectedAudio = selectedDeviceIDs.audioInput;\n  if (shouldShowAudioOutput) {\n    availableAudioDevices = audioOutput;\n    selectedAudio = selectedDeviceIDs.audioOutput;\n  }\n  const hmsActions = useHMSActions();\n  const audioFiltered = availableAudioDevices?.find(item => !!item.label);\n  const currentSelection = availableAudioDevices?.find(item => item.deviceId === selectedAudio);\n\n  if (!audioFiltered) {\n    return null;\n  }\n  const deviceCategory = getAudioDeviceCategory(currentSelection?.label);\n  let AudioIcon = <SpeakerIcon />;\n  if (deviceCategory === HMSAudioDeviceCategory.BLUETOOTH) {\n    AudioIcon = <BluetoothIcon />;\n  } else if (deviceCategory === HMSAudioDeviceCategory.WIRED) {\n    AudioIcon = <HeadphonesIcon />;\n  } else if (deviceCategory === HMSAudioDeviceCategory.EARPIECE) {\n    AudioIcon = <TelePhoneIcon />;\n  }\n  return (\n    <AudioSelectionSheet\n      audioDevices={availableAudioDevices}\n      audioSelected={selectedAudio}\n      onChange={async deviceId => {\n        try {\n          await updateDevice({\n            deviceId,\n            deviceType: shouldShowAudioOutput ? DeviceType.audioOutput : DeviceType.audioInput,\n          });\n        } catch (e) {\n          ToastManager.addToast({\n            title: `Error while changing audio device ${e.message || ''}`,\n            variant: 'error',\n          });\n        }\n      }}\n    >\n      <Box\n        onClick={async () => {\n          // refresh device as `devicechange` listener won't work in mobile device\n          await hmsActions.refreshDevices();\n        }}\n      >\n        <IconButton>{AudioIcon}</IconButton>\n      </Box>\n    </AudioSelectionSheet>\n  );\n};\n\nconst AudioSelectionSheet = ({ audioDevices, audioSelected, onChange, children }) => {\n  return (\n    <Sheet.Root>\n      <Sheet.Trigger asChild>{children}</Sheet.Trigger>\n      <Sheet.Content>\n        <Sheet.Title css={{ py: '$10', px: '$8', alignItems: 'center' }}>\n          <Flex direction=\"row\" justify=\"between\" css={{ w: '100%' }}>\n            <Text variant=\"h6\" css={{ display: 'flex' }}>\n              Audio\n            </Text>\n            <Sheet.Close>\n              <IconButton as=\"div\" data-testid=\"dialog_cross_icon\">\n                <CrossIcon />\n              </IconButton>\n            </Sheet.Close>\n          </Flex>\n        </Sheet.Title>\n        <HorizontalDivider />\n        <Flex\n          direction=\"column\"\n          css={{\n            px: '$8',\n            maxHeight: '80vh',\n            overflowY: 'auto',\n          }}\n        >\n          {audioDevices.map(audioDevice => {\n            return (\n              <SelectWithLabel\n                key={audioDevice.deviceId}\n                label={audioDevice.label}\n                id={audioDevice.deviceId}\n                checked={audioDevice.deviceId === audioSelected}\n                onChange={() => onChange(audioDevice.deviceId)}\n              />\n            );\n          })}\n        </Flex>\n      </Sheet.Content>\n    </Sheet.Root>\n  );\n};\n\nconst SelectWithLabel = ({ label, icon = <></>, checked, id, onChange }) => {\n  return (\n    <Flex\n      align=\"center\"\n      css={{\n        my: '$2',\n        py: '$8',\n        w: '100%',\n        borderBottom: '1px solid $border_default',\n      }}\n      onClick={onChange}\n    >\n      <Label\n        htmlFor={id}\n        css={{\n          fontSize: '$md',\n          fontWeight: '$semiBold',\n          color: '$on_surface_high',\n          cursor: 'pointer',\n          display: 'flex',\n          alignItems: 'center',\n          gap: '$8',\n          flex: '1 1 0',\n        }}\n      >\n        {icon}\n        {label}\n      </Label>\n      {checked && <CheckIcon width={24} height={24} />}\n    </Flex>\n  );\n};\n", "export { Header } from './Header';\n"],
-  "mappings": "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",
-  "names": ["React", "useMedia", "useHMSStore", "React", "React", "useHMSStore", "useMedia", "React"]
-}