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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/{ActiveSpeakerView-4XPIRZOK.js → ActiveSpeakerView-N7C6WL27.js} +6 -6
  2. package/dist/{ActiveSpeakerView-ADEYHQMU.css → ActiveSpeakerView-ZOCC7LQW.css} +2 -2
  3. package/dist/{PinnedTrackView-5DPVVOZW.css.map → ActiveSpeakerView-ZOCC7LQW.css.map} +1 -1
  4. package/dist/{HLSView-I26CVF5U.js → HLSView-3ILTIGBT.js} +5 -5
  5. package/dist/{HLSView-DWEEMZ6Z.css → HLSView-OVDMVJX5.css} +2 -2
  6. package/dist/{HLSView-DWEEMZ6Z.css.map → HLSView-OVDMVJX5.css.map} +1 -1
  7. package/dist/{PinnedTrackView-GGTCNH5V.js → PinnedTrackView-6N6N5WOF.js} +6 -6
  8. package/dist/{PinnedTrackView-5DPVVOZW.css → PinnedTrackView-RIL5IW5A.css} +2 -2
  9. package/dist/{conference-BDCDGBIS.css.map → PinnedTrackView-RIL5IW5A.css.map} +1 -1
  10. package/dist/{VirtualBackground-ZRRE4DUA.js → VirtualBackground-R3JHARN5.js} +3 -3
  11. package/dist/{chunk-MYK3T45M.js → chunk-DH3QSV4E.js} +2 -2
  12. package/dist/{chunk-4ISMCWQA.js → chunk-DRKV2LAC.js} +2 -2
  13. package/dist/{chunk-4ISMCWQA.js.map → chunk-DRKV2LAC.js.map} +1 -1
  14. package/dist/{chunk-KKLZ7K2L.js → chunk-G56Z3JA5.js} +7 -7
  15. package/dist/{chunk-KKLZ7K2L.js.map → chunk-G56Z3JA5.js.map} +1 -1
  16. package/dist/{chunk-THORW2WT.js → chunk-INRXWU7L.js} +2 -2
  17. package/dist/{chunk-LUND6FLY.js → chunk-TZJCHZPD.js} +9 -9
  18. package/dist/{chunk-LUND6FLY.js.map → chunk-TZJCHZPD.js.map} +1 -1
  19. package/dist/{conference-BDCDGBIS.css → conference-AIOOA5ON.css} +2 -2
  20. package/dist/{ActiveSpeakerView-ADEYHQMU.css.map → conference-AIOOA5ON.css.map} +1 -1
  21. package/dist/{conference-5TDUAQ6K.js → conference-IKSFGLVK.js} +258 -434
  22. package/dist/conference-IKSFGLVK.js.map +7 -0
  23. package/dist/index.cjs.css +1 -1
  24. package/dist/index.cjs.css.map +1 -1
  25. package/dist/index.cjs.js +419 -614
  26. package/dist/index.cjs.js.map +4 -4
  27. package/dist/index.css +1 -1
  28. package/dist/index.css.map +1 -1
  29. package/dist/index.js +4 -4
  30. package/dist/meta.cjs.json +10 -128
  31. package/dist/meta.esbuild.json +94 -212
  32. package/dist/{transcription-PYTSSAOB.js → transcription-XYVVYRAS.js} +3 -3
  33. package/package.json +6 -6
  34. package/src/Prebuilt/AppContext.jsx +1 -1
  35. package/src/Prebuilt/components/Footer/ConferencingFooter.jsx +1 -4
  36. package/src/Prebuilt/components/Preview/PreviewJoin.jsx +2 -2
  37. package/dist/conference-5TDUAQ6K.js.map +0 -7
  38. /package/dist/{ActiveSpeakerView-4XPIRZOK.js.map → ActiveSpeakerView-N7C6WL27.js.map} +0 -0
  39. /package/dist/{HLSView-I26CVF5U.js.map → HLSView-3ILTIGBT.js.map} +0 -0
  40. /package/dist/{PinnedTrackView-GGTCNH5V.js.map → PinnedTrackView-6N6N5WOF.js.map} +0 -0
  41. /package/dist/{VirtualBackground-ZRRE4DUA.js.map → VirtualBackground-R3JHARN5.js.map} +0 -0
  42. /package/dist/{chunk-MYK3T45M.js.map → chunk-DH3QSV4E.js.map} +0 -0
  43. /package/dist/{chunk-THORW2WT.js.map → chunk-INRXWU7L.js.map} +0 -0
  44. /package/dist/{transcription-PYTSSAOB.js.map → transcription-XYVVYRAS.js.map} +0 -0
package/dist/{chunk-LUND6FLY.js.map → chunk-TZJCHZPD.js.map} RENAMED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/index.ts", "../src/Button/index.tsx", "../src/Button/Button.tsx", "../src/Theme/ThemeProvider.tsx", "../src/Theme/useSSR.tsx", "../src/Avatar/index.ts", "../src/Avatar/Avatar.tsx", "../src/Avatar/getAvatarBg.ts", "../src/Divider/index.ts", "../src/Divider/Divider.tsx", "../src/Switch/index.ts", "../src/Switch/Switch.tsx", "../src/Select/index.ts", "../src/Select/Select.tsx", "../src/Slider/index.ts", "../src/Slider/Slider.tsx", "../src/Modal/index.ts", "../src/Modal/Dialog.tsx", "../src/Modal/DialogContent.tsx", "../src/Input/Input.tsx", "../src/VideoTile/index.tsx", "../src/VideoTile/StyledVideoTile.tsx", "../src/VideoList/index.tsx", "../src/VideoList/videoListUtils.tsx", "../src/VideoList/StyledVideoList.tsx", "../src/Pagination/index.tsx", "../src/Pagination/StyledPagination.tsx", "../src/Dropdown/Dropdown.tsx", "../src/Video/index.tsx", "../src/Video/Video.tsx", "../src/TileMenu/index.tsx", "../src/TileMenu/StyledMenuTile.tsx", "../src/AudioLevel/index.ts", "../src/AudioLevel/AudioLevel.tsx", "../src/Popover/index.tsx", "../src/Stats/index.tsx", "../src/Stats/Stats.tsx", "../src/Stats/formatBytes.ts", "../src/Stats/StyledStats.tsx", "../src/Checkbox/Checkbox.tsx", "../src/Label/Label.tsx", "../src/RadioGroup/RadioGroup.tsx", "../src/Toast/Toast.tsx", "../src/Accordion/index.ts", "../src/Accordion/Accordion.tsx", "../src/Fieldset/Fieldset.tsx", "../src/Footer/index.tsx", "../src/Footer/Footer.tsx", "../src/ReactSelect/index.ts", "../src/ReactSelect/ReactSelect.tsx", "../src/Tabs/Tabs.tsx", "../src/QRCode/QRCode.tsx", "../src/Link/index.tsx", "../src/Link/Link.tsx", "../src/Collapsible/Collapsible.tsx", "../src/Prebuilt/index.js", "../src/Prebuilt/App.jsx", "../src/Prebuilt/components/AppData/AppData.jsx", "../src/Prebuilt/components/init/initUtils.js", "../src/Prebuilt/components/hooks/useUserPreferences.jsx", "../src/Prebuilt/components/AppData/useSidepane.js", "../src/Prebuilt/components/AppData/useUISettings.js", "../src/Prebuilt/common/utils.js", "../src/Prebuilt/components/AudioLevel/BeamSpeakerLabelsLogging.jsx", "../src/Prebuilt/services/FeatureFlags.jsx", "../src/Prebuilt/components/AuthToken.jsx", "../src/Prebuilt/AppContext.jsx", "../src/Prebuilt/primitives/DialogContent.jsx", "../src/Prebuilt/services/tokenService.js", "../src/Prebuilt/components/ErrorBoundary.jsx", "../src/Prebuilt/components/FullPageProgress.jsx", "../src/Prebuilt/components/init/Init.jsx", "../src/Prebuilt/components/Input/KeyboardInputManager.js", "../src/Prebuilt/components/Notifications/index.jsx", "../src/Prebuilt/components/Notifications/Notifications.jsx", "../src/Prebuilt/components/Toast/ToastBatcher.js", "../src/Prebuilt/components/Toast/ToastConfig.jsx", "../src/Prebuilt/components/Toast/ToastManager.js", "../src/Prebuilt/components/Notifications/AutoplayBlockedModal.jsx", "../src/Prebuilt/components/Notifications/InitErrorModal.jsx", "../src/Prebuilt/components/Notifications/MessageNotifications.jsx", "../src/Prebuilt/components/Notifications/PeerNotifications.jsx", "../src/Prebuilt/components/Notifications/PermissionErrorModal.jsx", "../src/Prebuilt/components/Notifications/ReconnectNotifications.jsx", "../src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.jsx", "../src/Prebuilt/components/Notifications/TrackNotifications.jsx", "../src/Prebuilt/components/Notifications/TrackUnmuteModal.jsx", "../src/Prebuilt/components/hooks/useNavigation.js", "../src/Prebuilt/components/PostLeave.jsx", "../src/Prebuilt/components/Header/index.jsx", "../src/Prebuilt/components/Header/Header.jsx", "../src/Prebuilt/components/Header/ConferencingHeader.jsx", "../src/Prebuilt/components/Header/HeaderComponents.jsx", "../src/Prebuilt/provider/roomLayoutProvider/index.tsx", "../src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts", "../src/Prebuilt/provider/roomLayoutProvider/constants/index.ts", "../src/Prebuilt/components/Header/ParticipantList.jsx", "../src/Prebuilt/components/Connection/ConnectionIndicator.jsx", "../src/Prebuilt/components/Connection/connectionQualityUtils.js", "../src/Prebuilt/components/RoleChangeModal.jsx", "../src/Prebuilt/components/hooks/useDropdownSelection.jsx", "../src/Prebuilt/common/hooks.js", "../src/Prebuilt/components/Header/ParticipantFilter.jsx", "../src/Prebuilt/components/Header/StreamActions.jsx", "../src/Prebuilt/components/GoLiveButton.jsx", "../src/Prebuilt/components/Streaming/ResolutionInput.jsx", "../src/Prebuilt/components/Streaming/RTMPStreaming.jsx", "../src/Prebuilt/components/Streaming/Common.jsx", "../src/Prebuilt/components/Header/AdditionalRoomState.jsx", "../src/Prebuilt/plugins/whiteboard/useWhiteboardMetadata.js", "../src/Prebuilt/components/hooks/useMetadata.jsx", "../src/Prebuilt/components/hooks/usePlaylistMusic.js", "../src/Prebuilt/components/hooks/useScreenshareAudio.js", "../src/Prebuilt/components/Header/StreamingHeader.jsx", "../src/Prebuilt/components/EmojiReaction.jsx", "../src/Prebuilt/components/hooks/useDropdownList.jsx", "../src/Prebuilt/components/LeaveRoom.jsx", "../src/Prebuilt/components/MetaActions.jsx", "../src/Prebuilt/components/Preview/PreviewContainer.jsx", "../src/Prebuilt/layouts/SidePane.jsx", "../src/Prebuilt/components/Chat/Chat.jsx", "../src/Prebuilt/components/Chat/ChatBody.jsx", "../src/Prebuilt/components/hooks/useSetPinnedMessage.js", "../src/Prebuilt/components/Chat/ChatFooter.jsx", "../src/Prebuilt/components/AppData/useChatState.js", "../src/Prebuilt/components/Chat/useEmojiPickerStyles.js", "../src/Prebuilt/components/Chat/ChatHeader.jsx", "../src/Prebuilt/components/Chat/ChatSelector.jsx", "../src/Prebuilt/components/Chat/useUnreadCount.js", "../src/Prebuilt/components/Streaming/StreamingLanding.jsx", "../src/Prebuilt/components/Streaming/HLSStreaming.jsx", "../src/Prebuilt/components/Preview/PreviewJoin.jsx", "../src/Prebuilt/components/AudioVideoToggle.jsx", "../src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx", "../src/Prebuilt/components/Chip.jsx", "../src/Prebuilt/components/Connection/TileConnection.jsx", "../src/Prebuilt/components/Settings/SettingsModal.jsx", "../src/Prebuilt/components/Settings/common.js", "../src/Prebuilt/components/Settings/DeviceSettings.jsx", "../src/Prebuilt/primitives/DropdownTrigger.jsx", "../src/Prebuilt/components/Settings/LayoutSettings.jsx", "../src/Prebuilt/components/Settings/SwitchWithLabel.jsx", "../src/Prebuilt/components/Settings/NotificationSettings.jsx", "../src/Prebuilt/components/Preview/PreviewForm.jsx", "../src/Prebuilt/components/hooks/useSkipPreview.jsx", "../src/Prebuilt/components/Toast/ToastContainer.jsx", "../src/Prebuilt/components/Toast/Toast.jsx", "../src/Prebuilt/plugins/FlyingEmoji.jsx", "../src/Prebuilt/plugins/RemoteStopScreenshare.jsx", "../src/Progress/index.tsx"],
4
- "sourcesContent": ["export * from './Button';\nexport * from './Text';\nexport * from './IconButton';\nexport * from './Layout';\nexport * from './Avatar';\nexport * from './Divider';\nexport * from './Switch';\nexport * from './Tooltip';\nexport * from './Select';\nexport * from './Slider';\nexport * from './Modal';\nexport * from './Loading';\nexport * from './Input';\nexport * from './VideoTile';\nexport * from './VideoList';\nexport * from './Pagination';\nexport * from './Dropdown';\nexport { textEllipsis, flexCenter, slideLeftAndFade } from './utils';\nexport * from './Video';\nexport * from './TileMenu';\nexport * from './AudioLevel';\nexport * from './Popover';\nexport * from './Stats';\nexport * from './Theme';\nexport * from './Checkbox';\nexport * from './Label';\nexport * from './RadioGroup';\nexport * from './Toast';\nexport * from './Accordion';\nexport * from './Fieldset';\nexport * from './Footer';\nexport * as HMSSelect from './ReactSelect';\nexport * from './Tabs';\nexport * from './QRCode';\nexport * from './Link';\nexport * from './Collapsible';\nexport * from './Prebuilt';\nexport * from './Progress';\n", "export { Button } from './Button';\n", "import React, { ComponentPropsWithRef, PropsWithChildren } from 'react';\nimport { Flex } from '../Layout';\nimport { Loading } from '../Loading';\nimport { styled } from '../Theme';\nimport { flexCenter } from '../utils/styles';\n\n/**\n * @param base bg color\n * @param hover hover state bg color\n * @param active active state bg color\n * @returns CSS object based on the state\n */\n\nconst getOutlinedVariants = (\n base: string,\n hover: string,\n active: string,\n disabled: string,\n text: string,\n textDisabled: string,\n) => {\n return {\n bg: '$transparent',\n border: `solid $space$px $colors${base}`,\n c: text,\n '&[disabled]': {\n c: textDisabled,\n bg: '$transparent',\n border: `solid $space$px $colors${disabled}`,\n cursor: 'not-allowed',\n },\n '&:not([disabled]):hover': {\n border: `solid $space$px $colors${hover}`,\n bg: '$transparent',\n },\n '&:not([disabled]):active': {\n border: `solid $space$px $colors${active}`,\n bg: '$transparent',\n },\n '&:not([disabled]):focus-visible': {\n boxShadow: `0 0 0 3px $colors${base}`,\n },\n };\n};\n\nconst getButtonVariants = (\n base: string,\n hover: string,\n active: string,\n disabled: string,\n text: string,\n textDisabled: string,\n) => {\n return {\n bg: base,\n border: `1px solid ${base}`,\n c: text,\n '&[disabled]': {\n c: textDisabled,\n cursor: 'not-allowed',\n bg: disabled,\n border: `1px solid ${disabled}`,\n },\n '&:not([disabled]):hover': {\n bg: hover,\n border: `1px solid ${hover}`,\n },\n '&:not([disabled]):active': {\n bg: active,\n border: `1px solid ${active}`,\n },\n '&:not([disabled]):focus-visible': {\n boxShadow: `0 0 0 3px ${base}`,\n },\n };\n};\n\nconst StyledButton = styled('button', {\n ...flexCenter,\n cursor: 'pointer',\n fontFamily: '$sans',\n lineHeight: 'inherit',\n textTransform: 'none',\n position: 'relative',\n outline: 'none',\n border: 'none',\n fs: '$md',\n r: '$1',\n backgroundColor: '$primary_default',\n fontWeight: '500',\n whiteSpace: 'nowrap',\n p: '$4 $8',\n '-webkit-appearance': 'button',\n '&:focus': {\n outline: 'none',\n },\n '&:not([disabled]):focus-visible': {\n boxShadow: '0 0 0 3px $colors$primary_default',\n },\n transition: 'all 0.2s ease',\n compoundVariants: [\n {\n variant: 'standard',\n outlined: true,\n css: getOutlinedVariants(\n '$secondary_default',\n '$secondary_bright',\n '$secondary_dim',\n '$secondary_disabled',\n '$on_secondary_high',\n '$on_secondary_low',\n ),\n },\n {\n variant: 'danger',\n outlined: true,\n css: getOutlinedVariants(\n '$alert_error_default',\n '$alert_error_bright',\n '$alert_error_dim',\n '$alert_error_brighter',\n '$on_surface_high',\n '$on_surface_low',\n ),\n },\n {\n variant: 'primary',\n outlined: true,\n css: getOutlinedVariants(\n '$primary_default',\n '$primary_bright',\n '$primary_dim',\n '$primary_disabled',\n '$on_primary_high',\n '$on_primary_low',\n ),\n },\n ],\n variants: {\n variant: {\n standard: getButtonVariants(\n '$secondary_default',\n '$secondary_bright',\n '$secondary_dim',\n '$secondary_disabled',\n '$on_secondary_high',\n '$on_secondary_low',\n ),\n danger: getButtonVariants(\n '$alert_error_default',\n '$alert_error_bright',\n '$alert_error_dim',\n '$alert_error_dim',\n '$on_surface_high',\n '$on_surface_low',\n ),\n primary: getButtonVariants(\n '$primary_default',\n '$primary_bright',\n '$primary_dim',\n '$primary_disabled',\n '$on_primary_high',\n '$on_primary_low',\n ),\n },\n outlined: {\n true: {},\n },\n icon: {\n true: {},\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n});\n\nexport const Button = React.forwardRef<\n HTMLButtonElement,\n PropsWithChildren<{ loading?: boolean } & ComponentPropsWithRef<typeof StyledButton>>\n>(({ children, loading = false, icon, ...buttonProps }, ref) => {\n return (\n <StyledButton {...buttonProps} ref={ref}>\n <>\n {loading && (\n <Flex align=\"center\" justify=\"center\" css={{ w: '100%', position: 'absolute', left: '0' }}>\n <Loading />\n </Flex>\n )}\n <Flex\n align=\"center\"\n justify=\"center\"\n css={{ visibility: loading ? 'hidden' : 'visible', gap: icon ? '$4' : '0' }}\n >\n {children}\n </Flex>\n </>\n </StyledButton>\n );\n});\n", "import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { Theme } from './stitches.config';\nimport { createTheme, theme } from './stitches.config';\nimport useSSR from './useSSR';\n\nconst defaultAspectRatio = {\n width: 1,\n height: 1,\n};\n\nexport enum ThemeTypes {\n // eslint-disable-next-line no-unused-vars\n default = 'default',\n}\n\nexport type ThemeContextValue = {\n themeType: ThemeTypes;\n theme: Theme;\n aspectRatio: { width: number; height: number };\n /**\n * @param {ThemeTypes} themeToUpdateTo - optional\n * Use this to toggle or update the currentTheme.\n * if a param is passed, it will set the theme to passed value, otherwise will toggle between light and dark\n * depending on current applied theme\n */\n toggleTheme: (themeToUpdateTo?: ThemeTypes) => void;\n};\n\nexport type ThemeProviderProps = {\n themeType?: ThemeTypes;\n theme?: Theme;\n aspectRatio?: { width: number; height: number };\n};\n\nconst defaultContext = {\n themeType: ThemeTypes.default,\n theme,\n aspectRatio: { width: 1, height: 1 },\n toggleTheme: (_themeToUpdateTo?: ThemeTypes) => {\n return;\n },\n};\nexport const ThemeContext = React.createContext(defaultContext);\n\n/**\n * Wrap this around your root component to get access to theme\n * eg:\n * <ThemeProvider type=\"dark\" appBuilder={{ aspectRatio: { width:1, height: 1} }}>\n * <App />\n * </ThemeProvider>\n */\nexport const HMSThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>> = ({\n themeType,\n theme: userTheme,\n aspectRatio = defaultAspectRatio,\n children,\n}) => {\n const systemTheme = ThemeTypes.default;\n const [currentTheme, setCurrentTheme] = useState(themeType || systemTheme);\n const previousClassName = useRef('');\n const { isBrowser } = useSSR();\n const updatedTheme = useMemo(() => {\n const updatedTheme = createTheme({ themeType: currentTheme, theme: userTheme || {} });\n if (!isBrowser) {\n return updatedTheme;\n }\n if (previousClassName.current) {\n document.documentElement.classList.remove(previousClassName.current);\n }\n previousClassName.current = updatedTheme.className;\n document.documentElement.classList.add(updatedTheme);\n return updatedTheme;\n }, [userTheme, currentTheme, isBrowser]);\n\n const toggleTheme = useCallback(\n (themeToUpdateTo?: ThemeTypes) => {\n if (themeToUpdateTo) {\n setCurrentTheme(themeToUpdateTo);\n return;\n }\n setCurrentTheme(ThemeTypes.default);\n },\n [currentTheme],\n );\n\n useEffect(() => {\n if (themeType) {\n setCurrentTheme(themeType);\n }\n }, [themeType]);\n\n return (\n <ThemeContext.Provider\n value={{ themeType: currentTheme, theme: updatedTheme as unknown as Theme, aspectRatio, toggleTheme }}\n >\n {children}\n </ThemeContext.Provider>\n );\n};\n\nexport const useTheme = () => React.useContext(ThemeContext);\n", "import { useEffect, useState } from 'react';\n\nconst isBrowser = (): boolean => {\n return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);\n};\n\nexport type SSRState = {\n isBrowser: boolean;\n isServer: boolean;\n};\n\nconst useSSR = (): SSRState => {\n const [browser, setBrowser] = useState<boolean>(false);\n useEffect(() => {\n setBrowser(isBrowser());\n }, []);\n\n return {\n isBrowser: browser,\n isServer: !browser,\n };\n};\n\nexport default useSSR;\n", "export { Avatar, StyledAvatar } from './Avatar';\n", "import React from 'react';\nimport { VariantProps } from '@stitches/react';\nimport { PersonIcon } from '@100mslive/react-icons';\nimport { styled } from '../Theme';\nimport { getAvatarBg } from './getAvatarBg';\nimport { flexCenter } from '../utils/styles';\n\nconst getAvatarShape = (radii: string) => ({\n borderRadius: radii,\n});\n\nexport const StyledAvatar = styled('div', {\n ...flexCenter,\n color: '$colors$on_primary_high',\n fontFamily: '$sans',\n aspectRatio: 1,\n fontWeight: 600,\n fontSize: '$space$9',\n variants: {\n shape: {\n circle: getAvatarShape('$round'),\n square: getAvatarShape('$1'),\n },\n size: {\n small: {\n height: '$16 !important',\n fontSize: '$space$6',\n },\n medium: {\n height: '$18 !important',\n fontSize: '$space$10',\n },\n large: {\n height: '$20 !important',\n fontSize: '$space$12',\n },\n },\n },\n defaultVariants: {\n shape: 'circle',\n },\n});\n\ntype Props = VariantProps<typeof StyledAvatar> &\n React.ComponentProps<typeof StyledAvatar> & {\n name: string;\n };\n\nexport const Avatar: React.FC<Props> = ({ name, css, ...props }) => {\n const { initials } = getAvatarBg(name);\n let { color } = getAvatarBg(name);\n if (!name) {\n color = '#7E47EB';\n }\n return (\n <StyledAvatar css={{ bg: color, ...css }} {...props}>\n {initials || <PersonIcon height={40} width={40} />}\n </StyledAvatar>\n );\n};\n", "const getInitials = (name: string | undefined) => {\n if (!name) {\n return undefined;\n } else {\n return name\n .trim()\n .match(/(^\\S\\S?|\\b\\S)?/g)\n ?.join('')\n ?.match(/(^\\S|\\S$)?/g)\n ?.join('')\n .toUpperCase();\n }\n};\n\n/**\n calculates the initials of the name and choose a background color based on the first later of the initials\n */\nexport const getAvatarBg = (name: string): { initials: string; color: string } => {\n const initials = getInitials(name);\n const indexFactor = 20;\n const colorIndex = ((initials?.codePointAt(0) || 0) % indexFactor) + 1;\n return { initials: initials || '', color: colorsList[colorIndex - 1] };\n};\n\nconst colorsList = [\n '#616161',\n '#F44336',\n '#3F51B5',\n '#4CAF50',\n '#FFA000',\n '#795548',\n '#E91E63',\n '#2F80FF',\n '#8BC34A',\n '#F57C00',\n '#4E342E',\n '#9C27B0',\n '#00BCD4',\n '#C0CA33',\n '#F4511E',\n '#673AB7',\n '#009688',\n '#FBC02D',\n '#BF360C',\n '#455A64',\n];\n", "export { HorizontalDivider, VerticalDivider } from './Divider';\n", "import { styled } from '../Theme';\n\nconst getVerticalSpace = (space: string) => ({\n marginLeft: space,\n marginRight: space,\n});\nconst getHorizontalSpace = (space: string) => ({\n marginTop: space,\n marginBottom: space,\n});\n\nexport const VerticalDivider = styled('span', {\n height: '25px',\n width: '1px',\n backgroundColor: '$border_bright',\n variants: {\n space: {\n 1: getVerticalSpace('$1'),\n 2: getVerticalSpace('$2'),\n 3: getVerticalSpace('$3'),\n 4: getVerticalSpace('$4'),\n },\n },\n defaultVariants: {\n space: 1,\n },\n});\n\nexport const HorizontalDivider = styled('span', {\n height: '1px',\n width: '100%',\n display: 'block',\n backgroundColor: '$border_bright',\n variants: {\n space: {\n 1: getHorizontalSpace('$1'),\n 2: getHorizontalSpace('$2'),\n 3: getHorizontalSpace('$3'),\n 4: getHorizontalSpace('$4'),\n },\n },\n defaultVariants: {\n space: 1,\n },\n});\n", "export { Switch } from './Switch';\n", "import React from 'react';\nimport * as BaseSwitch from '@radix-ui/react-switch';\nimport { styled } from '../Theme';\n\nconst SwitchRoot = styled(BaseSwitch.Root, {\n all: 'unset',\n width: '30px',\n height: '14px',\n border: 'solid $space$px $secondary_default',\n borderRadius: '$3',\n p: '$2',\n position: 'relative',\n cursor: 'pointer',\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary_default',\n border: 'solid $space$px $primary_default',\n },\n '&:focus': {\n outline: 'none',\n },\n '&[disabled]': {\n opacity: 0.5,\n cursor: 'not-allowed',\n },\n});\n\nconst SwitchThumb = styled(BaseSwitch.Thumb, {\n display: 'block',\n top: '3px',\n position: 'absolute',\n width: '$md',\n height: '$md',\n backgroundColor: '$secondary_default',\n borderRadius: '$round',\n transition: 'right 500ms ease-in',\n left: '$2',\n '&[data-state=\"checked\"]': {\n left: 'unset',\n right: '$2',\n backgroundColor: '$on_primary_high',\n },\n});\n\ntype SwitchProps = React.ComponentProps<typeof SwitchRoot>;\n\nexport const Switch: React.FC<SwitchProps> = props => (\n <SwitchRoot {...props}>\n <SwitchThumb />\n </SwitchRoot>\n);\n\nSwitch.displayName = 'Switch';\n", "export { Select } from './Select';\n", "import React from 'react';\nimport { ChevronDownIcon } from '@100mslive/react-icons';\nimport { styled } from '../Theme';\n\nconst Root = styled('div', {\n color: '$on_primary_high',\n display: 'inline-flex',\n position: 'relative',\n outline: 'none',\n overflow: 'hidden',\n borderRadius: '$1',\n backgroundColor: '$surface_default',\n maxWidth: '100%',\n});\n\n// TODO: replace these with tokens\nconst SelectRoot = styled('select', {\n h: '$16',\n fontSize: '$md',\n fontWeight: '500',\n lineHeight: 'inherit',\n textTransform: 'none',\n appearance: 'none',\n color: '$on_secondary_high',\n padding: '5px',\n paddingLeft: '12px',\n paddingRight: '30px',\n border: 'none',\n borderRadius: '8px',\n backgroundColor: '$secondary_default',\n '&:not([disabled]):focus-visible': {\n boxShadow: '0 0 0 3px $colors$primary_default',\n },\n '&[disabled]': {\n opacity: 0.5,\n cursor: 'not-allowed',\n },\n});\n\nconst Arrow = styled('span', {\n color: '$on_secondary_high',\n width: '30px',\n height: '100%',\n position: 'absolute',\n right: 0,\n pointerEvents: 'none',\n display: 'flex',\n alignItems: 'center',\n transition: 'border .2s ease 0s',\n});\n\nconst DefaultDownIcon = ({ ...props }) => (\n <Arrow {...props}>\n <ChevronDownIcon />\n </Arrow>\n);\n\nexport const Select = {\n Root,\n DownIcon: Arrow,\n DefaultDownIcon,\n Select: SelectRoot,\n};\n", "export { Slider } from './Slider';\n", "import React from 'react';\nimport * as BaseSlider from '@radix-ui/react-slider';\nimport { CSS } from '@stitches/react';\nimport { styled } from '../Theme';\nimport { Tooltip } from '../Tooltip';\n\nconst Root = styled(BaseSlider.Root, {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n userSelect: 'none',\n touchAction: 'none',\n width: '100%',\n '&[data-orientation=\"horizontal\"]': {\n height: 20,\n },\n});\n\nconst Track = styled(BaseSlider.Track, {\n backgroundColor: '$surface_bright',\n position: 'relative',\n flexGrow: 1,\n borderRadius: '$round',\n cursor: 'pointer',\n '&[data-orientation=\"horizontal\"]': { height: 3 },\n});\n\nconst Range = styled(BaseSlider.Range, {\n position: 'absolute',\n backgroundColor: '$primary_default',\n borderRadius: '$round',\n height: '100%',\n});\n\nconst Thumb = styled(BaseSlider.Thumb, {\n all: 'unset',\n display: 'block',\n width: '$8',\n height: '$8',\n backgroundColor: '$primary_default',\n cursor: 'pointer',\n boxShadow: `0 2px 10px $colors$surface_default`,\n borderRadius: 10,\n '&:hover': { backgroundColor: '$primary_default' },\n '&:focus': { boxShadow: 'none' },\n});\n\ntype SliderProps = React.ComponentProps<typeof Root> & {\n thumbStyles?: CSS;\n showTooltip?: boolean;\n};\n\nexport const Slider: React.FC<SliderProps & { showTooltip?: boolean }> = ({\n showTooltip = true,\n thumbStyles,\n ...props\n}) => (\n <Root {...props}>\n <Track>\n <Range />\n </Track>\n {showTooltip ? (\n <Tooltip title={String(props.value?.[0])}>\n <Thumb css={thumbStyles} />\n </Tooltip>\n ) : (\n <Thumb css={thumbStyles} />\n )}\n </Root>\n);\n", "export { Dialog } from './Dialog';\n", "import { Root } from '@radix-ui/react-dialog';\nimport { styled } from '@stitches/react';\nimport {\n DialogClose,\n DialogDefaultCloseIcon,\n DialogDescription,\n DialogTitle,\n StyledDialogContent,\n StyledDialogOverlay,\n StyledDialogPortal,\n StyledDialogTrigger,\n} from './DialogContent';\n\nconst StyledDialog = styled(Root, {});\n\nexport const Dialog = {\n Root: StyledDialog,\n Trigger: StyledDialogTrigger,\n Overlay: StyledDialogOverlay,\n Content: StyledDialogContent,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n DefaultClose: DialogDefaultCloseIcon,\n Portal: StyledDialogPortal,\n};\n", "import React, { ComponentProps } from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { CrossIcon } from '@100mslive/react-icons';\nimport { IconButton } from '../IconButton';\nimport { styled } from '../Theme';\nimport { dialogClose, dialogOpen } from '../utils/animations';\n\nexport const DialogClose = styled(DialogPrimitive.Close, {\n backgroundColor: 'transparent',\n padding: '0',\n margin: '0',\n border: 'none',\n backgroundImage: 'none',\n});\n\nexport const StyledDialogTrigger = styled(DialogPrimitive.Trigger, {\n appearance: 'none !important', // Needed for safari it shows white overlay\n});\n\nexport const StyledDialogOverlay = styled(DialogPrimitive.Overlay, {\n backgroundColor: 'rgba(0, 0, 0, 0.5);',\n position: 'fixed',\n inset: 0,\n});\n\nexport const StyledDialogPortal = styled(DialogPrimitive.Portal, {});\n\nexport const StyledDialogContent = styled(DialogPrimitive.Content, {\n color: '$on_surface_medium',\n backgroundColor: '$surface_default',\n borderRadius: '8px',\n position: 'fixed',\n top: '50%',\n left: '50%',\n border: '$space$px solid $border_bright',\n boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',\n transform: 'translate(-50%, -50%)',\n zIndex: 999,\n padding: '$12',\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${dialogOpen} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,\n },\n '&[data-state=\"closed\"]': {\n animation: `${dialogClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,\n },\n },\n '&:focus': { outline: 'none' },\n});\n\nexport const DialogTitle = styled(DialogPrimitive.Title, {\n margin: 0,\n});\n\nexport const DialogDescription = styled(DialogPrimitive.Description, {});\n\nexport const DialogDefaultCloseIcon = (props: ComponentProps<typeof IconButton>) => (\n <DialogClose asChild>\n <IconButton {...props}>\n <CrossIcon />\n </IconButton>\n </DialogClose>\n);\n", "import React, { ComponentProps, PropsWithChildren, PropsWithRef } from 'react';\nimport { CSS } from '@stitches/react';\nimport { CopyIcon, EyeCloseIcon, EyeOpenIcon } from '@100mslive/react-icons';\nimport { Flex } from '../Layout';\nimport { styled } from '../Theme';\n\nexport const Input = styled('input', {\n fontFamily: '$sans',\n lineHeight: 'inherit',\n backgroundColor: '$surface_default',\n borderRadius: '8px',\n outline: 'none',\n border: '1px solid $border_default',\n padding: '0.5rem 0.75rem',\n minHeight: '30px',\n color: '$on_surface_high',\n fontSize: '$md',\n '&:focus': {\n boxShadow: '0 0 0 1px $colors$primary_default',\n border: '1px solid transparent',\n },\n '&::placeholder': {\n color: '$on_surface_low',\n },\n variants: {\n alert_error_default: {\n true: {\n '&:focus': {\n boxShadow: '0 0 0 3px $colors$alert_error_default',\n },\n },\n },\n },\n});\n\nconst PasswordRoot = styled('div', {\n w: '100%',\n position: 'relative',\n display: 'flex',\n});\n\nconst PasswordShowIcon: React.FC<ComponentProps<typeof Flex> & { showPassword?: boolean; css?: CSS }> = ({\n showPassword,\n css,\n ...props\n}) => {\n return (\n <Flex css={{ ...css }} {...props}>\n {showPassword ? <EyeOpenIcon /> : <EyeCloseIcon />}\n </Flex>\n );\n};\n\nconst PasswordCopyIcon: React.FC<ComponentProps<typeof Flex & { css?: CSS }>> = ({ css, ...props }) => {\n return (\n <Flex css={{ ...css }} {...props}>\n <CopyIcon />\n </Flex>\n );\n};\n\nconst PasswordIcons = React.forwardRef<HTMLDivElement, PropsWithChildren<ComponentProps<typeof Flex & { css?: CSS }>>>(\n ({ css, ...props }, ref) => {\n return (\n <Flex\n css={{\n position: 'absolute',\n top: 0,\n height: '100%',\n zIndex: 10,\n right: '$4',\n bg: '$surface_bright',\n alignItems: 'center',\n ...css,\n }}\n ref={ref}\n {...props}\n >\n {props.children}\n </Flex>\n );\n },\n);\n\nconst ReactInput: React.FC<PropsWithRef<ComponentProps<typeof Input> & { showPassword?: boolean; css?: CSS }>> =\n React.forwardRef<\n HTMLInputElement,\n PropsWithRef<ComponentProps<typeof Input> & { showPassword?: boolean; css?: CSS }>\n >(({ showPassword = false, css, ...props }, ref) => {\n return (\n <Input\n css={{ flexGrow: 1, width: '100%', ...css }}\n type={showPassword ? 'text' : 'password'}\n {...props}\n ref={ref}\n />\n );\n });\n\nexport const PasswordInput = {\n Root: PasswordRoot,\n Icons: PasswordIcons,\n Input: ReactInput,\n ShowIcon: PasswordShowIcon,\n CopyIcon: PasswordCopyIcon,\n};\n", "export { StyledVideoTile } from './StyledVideoTile';\n", "import { Box } from '../Layout';\nimport { styled } from '../Theme';\nimport { flexCenter } from '../utils';\n\nexport const Root = styled('div', {\n padding: '0.75rem',\n // show videotile context menu on hover\n // [`&:hover .tile-menu`]: {\n // display: 'inline-block',\n // },\n});\n\nconst Container = styled('div', {\n width: '100%',\n height: '100%',\n position: 'relative',\n borderRadius: '$2',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: '$surface_default',\n variants: {\n transparentBg: {\n true: {\n background: 'transparent',\n },\n },\n noRadius: {\n true: {\n borderRadius: 0,\n },\n },\n },\n});\n\nconst Overlay = styled('div', {\n position: 'absolute',\n width: '100%',\n height: '100%',\n});\n\nconst Info = styled('div', {\n color: '$on_primary_high',\n position: 'absolute',\n bottom: '5px',\n left: '50%',\n fontSize: '$sm',\n transform: 'translateX(-50%)',\n textAlign: 'center',\n width: '80%',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n fontFamily: '$sans',\n});\n\nconst AttributeBox = styled('div', {\n position: 'absolute',\n color: '$on_primary_high',\n});\n\nconst AudioIndicator = styled('div', {\n position: 'absolute',\n top: '$4',\n right: '$4',\n color: '$on_primary_high',\n bg: '$secondary_dim',\n borderRadius: '$round',\n width: '$14',\n height: '$14',\n mb: '5px',\n ...flexCenter,\n variants: {\n size: {\n small: {\n width: '$10',\n height: '$10',\n '& > svg': {\n width: '$8',\n height: '$8',\n },\n },\n medium: {\n width: '$13',\n height: '$13',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\nconst FullScreenButton = styled('button', {\n width: '2.25rem',\n height: '2.25rem',\n color: '$on_surface_high',\n borderRadius: '$round',\n backgroundColor: '$surface_default',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'absolute',\n top: '$2',\n right: '$2',\n zIndex: 5,\n '&:not([disabled]):focus': {\n outline: 'none',\n boxShadow: '0 0 0 3px $colors$primary_bright',\n },\n});\n\nconst AvatarContainer = styled(Box, {\n ...flexCenter,\n flexDirection: 'column',\n position: 'absolute',\n left: '50%',\n top: '50%',\n transform: 'translateX(-50%) translateY(-50%)',\n width: '40%',\n height: '40%',\n '& > div': {\n maxHeight: '$20',\n height: '100%',\n },\n});\n\ninterface VideoTileType {\n Root: typeof Root;\n Container: typeof Container;\n Overlay: typeof Overlay;\n Info: typeof Info;\n AudioIndicator: typeof AudioIndicator;\n AvatarContainer: typeof AvatarContainer;\n AttributeBox: typeof AttributeBox;\n FullScreenButton: typeof FullScreenButton;\n}\n\nexport const StyledVideoTile: VideoTileType = {\n Root,\n Container,\n Overlay,\n Info,\n AudioIndicator,\n AvatarContainer,\n AttributeBox,\n FullScreenButton,\n};\n", "export { getLeft } from './videoListUtils';\nexport { StyledVideoList } from './StyledVideoList';\n", "export const getLeft = (index: number, currentPageIndex: number) => {\n //active slide\n if (index === currentPageIndex) {\n return 0;\n }\n //prev slide\n if (index + 1 === currentPageIndex) {\n return '-100%';\n }\n //next slide\n if (index - 1 === currentPageIndex) {\n return '100%';\n }\n //all slides before prev\n if (index < currentPageIndex) {\n return '-200%';\n }\n //all slides after next\n return '200%';\n};\n", "import { styled } from '../Theme';\n\nconst Root = styled('div', {\n height: '100%',\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n});\n\nconst Container = styled('div', {\n height: '100%',\n width: '100%',\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n overflow: 'hidden',\n});\n\nconst View = styled('div', {\n height: '100%',\n width: '100%',\n position: 'absolute',\n display: 'flex',\n placeContent: 'center',\n flexWrap: 'wrap',\n alignItems: 'center',\n});\n\ninterface VideoListType {\n Root: typeof Root;\n Container: typeof Container;\n View: typeof View;\n}\n\nexport const StyledVideoList: VideoListType = {\n Root,\n Container,\n View,\n};\n", "export { StyledPagination } from './StyledPagination';\n", "import { styled } from '../Theme';\n\nconst Root = styled('div', {\n height: '2rem',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: '100%',\n '& > * + *': {\n marginRight: '0',\n marginLeft: '0.5rem',\n },\n});\n\nconst Chevron = styled('button', {\n color: '$on_surface_high',\n '&:focus': {\n outline: 'none',\n },\n '&[disabled]': {\n color: '$on_surface_low',\n cursor: 'not-allowed',\n },\n display: 'flex',\n});\n\nconst Dots = styled('div', {\n display: 'flex',\n alignItems: 'center',\n '& > * + *': {\n marginRight: '0',\n marginLeft: '0.5rem',\n },\n});\n\nconst Dot = styled('button', {\n '&:focus': {\n outline: 'none',\n },\n borderRadius: '9999px',\n width: '0.5rem',\n height: '0.5rem',\n backgroundColor: '$on_surface_low',\n padding: '0px',\n border: 'none',\n cursor: 'pointer',\n variants: {\n active: {\n true: {\n backgroundColor: '$on_surface_high',\n },\n },\n },\n});\n\ninterface PaginationType {\n Root: typeof Root;\n Chevron: typeof Chevron;\n Dots: typeof Dots;\n Dot: typeof Dot;\n}\n\nexport const StyledPagination: PaginationType = {\n Root,\n Chevron,\n Dots,\n Dot,\n};\n", "import {\n CheckboxItem,\n Content,\n Group,\n Item,\n ItemIndicator,\n Label,\n Portal,\n Root,\n Separator,\n Sub,\n SubContent,\n SubTrigger,\n Trigger,\n} from '@radix-ui/react-dropdown-menu';\nimport { styled } from '../Theme';\n\nconst DropdownRoot = styled(Root, {});\n\nconst DropdownTrigger = styled(Trigger, {\n cursor: 'pointer',\n appearance: 'none !important',\n '&[data-state=\"open\"]': {\n backgroundColor: '$surface_bright',\n },\n '&:focus': {\n outline: 'none',\n },\n '&:focus-visible': {\n boxShadow: '0 0 0 3px $colors$primary_default',\n },\n});\n\nconst DropdownTriggerItem = styled(SubTrigger, {\n w: '100%',\n color: '$on_surface_high',\n p: '$8',\n display: 'flex',\n alignItems: 'center',\n '&:hover': {\n cursor: 'pointer',\n bg: '$surface_brighter',\n },\n '&:focus-visible': {\n bg: '$surface_brighter',\n outline: 'none',\n },\n});\n\nconst DropdownItem = styled(Item, {\n color: '$on_surface_high',\n p: '$8',\n display: 'flex',\n alignItems: 'center',\n outline: 'none',\n backgroundColor: '$surface_default',\n '&:hover': {\n cursor: 'pointer',\n bg: '$surface_bright',\n },\n '&:focus-visible': {\n bg: '$surface_bright',\n },\n});\n\nconst DropdownItemSeparator = styled(Separator, {\n h: 1,\n backgroundColor: '$border_bright',\n m: '$4 $8',\n});\n\nconst DropdownContent = styled(Content, {\n w: '$80',\n maxHeight: '$64',\n r: '$1',\n py: '$4',\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 zIndex: 20,\n fontFamily: '$sans',\n});\n\nconst DropdownLabel = styled(Label, {\n display: 'flex',\n alignItems: 'center',\n h: '$12',\n w: '100%',\n p: '$8 $4',\n});\n\nconst DropdownGroup = styled(Group, {});\n\nconst DropdownSubMenu = styled(Sub, {});\n\nconst DropdownSubMenuContent = styled(SubContent, {\n w: '$80',\n maxHeight: '$64',\n r: '$1',\n py: '$4',\n backgroundColor: '$surface_bright',\n overflowY: 'auto',\n boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',\n zIndex: 20,\n});\n\nconst DropdownCheckboxItem = styled(CheckboxItem, {\n color: '$on_surface_high',\n p: '$8',\n display: 'flex',\n alignItems: 'center',\n outline: 'none',\n '&:hover': {\n cursor: 'pointer',\n bg: '$surface_brighter',\n },\n '&:focus-visible': {\n bg: '$surface_brighter',\n },\n gap: '$2',\n});\n\nconst DropdownItemIndicator = styled(ItemIndicator, {\n w: '$10',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n});\n\nexport const Dropdown = {\n Root: DropdownRoot,\n Trigger: DropdownTrigger,\n TriggerItem: DropdownTriggerItem,\n Content: DropdownContent,\n Portal: Portal,\n SubMenu: DropdownSubMenu,\n SubMenuContent: DropdownSubMenuContent,\n Item: DropdownItem,\n Label: DropdownLabel,\n Group: DropdownGroup,\n ItemSeparator: DropdownItemSeparator,\n CheckboxItem: DropdownCheckboxItem,\n ItemIndicator: DropdownItemIndicator,\n};\n", "export { StyledVideo, Video } from './Video';\n", "import React from 'react';\nimport type { VariantProps } from '@stitches/react';\nimport { HMSPeer, useVideo } from '@100mslive/react-sdk';\nimport { styled } from '../Theme';\n\nexport const StyledVideo = styled('video', {\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '$2',\n objectFit: 'cover',\n background: '$background_default',\n variants: {\n mirror: {\n true: {\n transform: 'scaleX(-1)',\n },\n },\n screenShare: {\n true: {\n objectFit: 'contain',\n },\n },\n degraded: {\n // send the video behind when it's degraded so avatar can show on top of it. Video will be stuck frame in this case.\n // not hiding by using display none, because it will lead it to be detached as it will no longer be in view.\n true: {\n zIndex: -100,\n },\n },\n noRadius: {\n true: {\n borderRadius: 0,\n },\n },\n },\n defaultVariants: {\n mirror: false,\n },\n});\n\ntype StyledProps = VariantProps<typeof StyledVideo> & React.ComponentProps<typeof StyledVideo>;\n\ninterface Props {\n /**\n * trackID for peer (videoTrack)\n */\n trackId: HMSPeer['videoTrack'];\n /**\n * Boolean stating whether to override the internal behaviour.\n * when attach is false, even if tile is inView or enabled, it won't be rendered\n */\n attach?: boolean;\n}\n\nexport const Video: React.FC<Props & StyledProps> = ({ trackId, attach, ...props }) => {\n const { videoRef } = useVideo({ trackId, attach });\n return <StyledVideo autoPlay muted playsInline controls={false} ref={videoRef} {...props} />;\n};\n", "export { StyledMenuTile } from './StyledMenuTile';\n", "import * as Popover from '@radix-ui/react-popover';\nimport { styled } from '../Theme';\nimport { popoverAnimation } from '../utils/animations';\nimport { flexCenter } from '../utils/styles';\n\nconst Root = Popover.Root;\n\nconst StyledTrigger = styled(Popover.Trigger, {\n position: 'absolute',\n bottom: '$2',\n right: '$2',\n zIndex: 10,\n width: '$13',\n height: '$13',\n color: '$on_surface_high',\n borderRadius: '$round',\n backgroundColor: '$surface_bright',\n cursor: 'pointer',\n border: 'none',\n ...flexCenter,\n '&:not([disabled]):focus': {\n outline: 'none',\n boxShadow: '0 0 0 3px $colors$primary_bright',\n },\n});\n\nconst StyledContent = styled(Popover.Content, {\n fontFamily: '$sans',\n backgroundColor: '$surface_bright',\n padding: '$5 0',\n display: 'flex',\n flexDirection: 'column',\n borderRadius: '$space$6',\n zIndex: 11,\n width: '$60',\n ...popoverAnimation,\n});\n\nconst styledItem = {\n fontSize: '$sm',\n color: '$on_surface_high',\n display: 'flex',\n alignItems: 'center',\n padding: '$4 $6',\n width: '100%',\n backgroundColor: '$menuBg',\n};\n\nconst StyledItemButton = styled('button', {\n ...styledItem,\n height: '$14',\n '&:hover': {\n backgroundColor: '$surface_brighter',\n },\n cursor: 'pointer',\n // TODO: default focus applied cause issues with this style\n '&:focus': {\n outline: 'none',\n // backgroundColor: '$grey3',\n },\n '& > * + *': {\n marginRight: '0',\n marginLeft: '$4',\n },\n});\n\nconst StyledVolumeItem = styled('div', {\n // TODO: maybe keep this as base comp and extend button variant\n ...styledItem,\n alignItems: 'start',\n flexDirection: 'column',\n marginBottom: '0',\n});\n\nexport const Flex = styled('div', {\n display: 'flex',\n '& > * + *': {\n marginRight: '0',\n marginLeft: '$4',\n },\n});\n\nconst RemoveMenuItem = styled(StyledItemButton, {\n color: '$alert_error_default',\n borderTop: '1px solid $border_bright',\n});\n\ninterface MenuTileType {\n Root: typeof Root;\n Trigger: typeof StyledTrigger;\n Content: typeof StyledContent;\n ItemButton: typeof StyledItemButton;\n VolumeItem: typeof StyledVolumeItem;\n RemoveItem: typeof RemoveMenuItem;\n}\n\nexport const StyledMenuTile: MenuTileType = {\n Root,\n Trigger: StyledTrigger,\n Content: StyledContent,\n ItemButton: StyledItemButton,\n VolumeItem: StyledVolumeItem,\n RemoveItem: RemoveMenuItem,\n};\n", "export { useBorderAudioLevel } from './AudioLevel';\n", "import { useCallback, useRef } from 'react';\nimport { HMSTrackID } from '@100mslive/hms-video-store';\nimport { useAudioLevelStyles } from '@100mslive/react-sdk';\nimport { useTheme } from '../Theme';\n\n/**\n * pass in a track id and get a ref. That ref can be attached to an element which will have border\n * as per audio level post that.\n */\nexport function useBorderAudioLevel(audioTrackId?: HMSTrackID) {\n const { theme } = useTheme();\n const color = theme.colors.primary_default.value;\n const getStyle = useCallback(\n (level: number) => {\n const style: Record<string, string> = {\n transition: 'outline 0.4s ease-in-out',\n };\n style['outline'] = level ? `${sigmoid(level) * 4}px solid ${color}` : '0px solid transparent';\n return style;\n },\n [color],\n );\n const ref = useRef(null);\n useAudioLevelStyles({\n trackId: audioTrackId,\n getStyle,\n ref,\n });\n return ref;\n}\n\nexport const sigmoid = (z: number) => {\n return 1 / (1 + Math.exp(-z));\n};\n", "import { Arrow, Content, Popover as Root, Portal, Trigger } from '@radix-ui/react-popover';\nimport { styled } from '../Theme';\nimport { popoverAnimation } from '../utils/animations';\n\nconst StyledContent = styled(Content, {\n padding: '$6',\n borderRadius: '$2',\n backgroundColor: '$background_default',\n boxShadow: '$sm',\n zIndex: 12,\n ...popoverAnimation,\n});\n\nconst StyledArrow = styled(Arrow, {\n ...popoverAnimation,\n});\n\nconst StyledTrigger = styled(Trigger, {});\n\nexport const Popover = {\n Root,\n Content: StyledContent,\n Trigger: StyledTrigger,\n Portal: Portal,\n Arrow: StyledArrow,\n};\n", "export { VideoTileStats } from './Stats';\n", "import React, { Fragment } from 'react';\nimport {\n HMSPeerID,\n HMSTrackID,\n HMSTrackStats,\n RID,\n selectConnectionQualityByPeerID,\n selectHMSStats,\n simulcastMapping,\n useHMSStatsStore,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { Tooltip } from '../Tooltip';\nimport { formatBytes } from './formatBytes';\nimport { Stats } from './StyledStats';\n\nexport interface VideoTileStatsProps {\n videoTrackID?: HMSTrackID;\n audioTrackID?: HMSTrackID;\n peerID?: HMSPeerID;\n isLocal: boolean;\n}\n\n/**\n * This component can be used to overlay webrtc stats over the Video Tile. For the local tracks it also includes\n * remote inbound stats as sent by the SFU in receiver report.\n */\nexport function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = false }: VideoTileStatsProps) {\n const audioSelector = isLocal ? selectHMSStats.localAudioTrackStatsByID : selectHMSStats.trackStatsByID;\n const audioTrackStats = useHMSStatsStore(audioSelector(audioTrackID));\n const localVideoTrackStats = useHMSStatsStore(selectHMSStats.localVideoTrackStatsByID(videoTrackID));\n const remoteVideoTrackStats = useHMSStatsStore(selectHMSStats.trackStatsByID(videoTrackID));\n const videoTrackStats = isLocal ? localVideoTrackStats?.[0] : remoteVideoTrackStats;\n const downlinkScore = useHMSStore(selectConnectionQualityByPeerID(peerID))?.downlinkQuality;\n const availableOutgoingBitrate = useHMSStatsStore(selectHMSStats.availablePublishBitrate);\n\n // Viewer role - no stats to show\n if (!(audioTrackStats || videoTrackStats)) {\n return null;\n }\n return (\n <Stats.Root>\n <table>\n <tbody>\n {isLocal ? (\n <Fragment>\n <StatsRow\n show={isNotNullishAndNot0(availableOutgoingBitrate)}\n label=\"AOBR\"\n tooltip=\"Available Outgoing Bitrate\"\n value={formatBytes(availableOutgoingBitrate, 'b/s')}\n />\n {localVideoTrackStats?.map(stat => {\n if (!stat) {\n return null;\n }\n const layer = stat.rid ? simulcastMapping[stat.rid as RID] : '';\n return (\n <Fragment>\n {layer && <StatsRow label={layer.toUpperCase()} value=\"\" />}\n <StatsRow\n show={isNotNullishAndNot0(stat.frameWidth)}\n label=\"Width\"\n value={stat.frameWidth?.toString()}\n />\n <StatsRow\n show={isNotNullishAndNot0(stat.frameHeight)}\n label=\"Height\"\n value={stat.frameHeight?.toString()}\n />\n <StatsRow\n show={isNotNullishAndNot0(stat.framesPerSecond)}\n label=\"FPS\"\n value={`${stat.framesPerSecond} ${\n isNotNullishAndNot0(stat.framesDropped) ? `(${stat.framesDropped} dropped)` : ''\n }`}\n />\n <StatsRow\n show={isNotNullish(stat.bitrate)}\n label=\"Bitrate(V)\"\n value={formatBytes(stat.bitrate, 'b/s')}\n />\n <Stats.Gap />\n </Fragment>\n );\n })}\n </Fragment>\n ) : (\n <Fragment>\n <StatsRow\n show={isNotNullishAndNot0(videoTrackStats?.frameWidth)}\n label=\"Width\"\n value={videoTrackStats?.frameWidth?.toString()}\n />\n <StatsRow\n show={isNotNullishAndNot0(videoTrackStats?.frameHeight)}\n label=\"Height\"\n value={videoTrackStats?.frameHeight?.toString()}\n />\n <StatsRow\n show={isNotNullishAndNot0(videoTrackStats?.framesPerSecond)}\n label=\"FPS\"\n value={`${videoTrackStats?.framesPerSecond} ${\n isNotNullishAndNot0(videoTrackStats?.framesDropped)\n ? `(${videoTrackStats?.framesDropped} dropped)`\n : ''\n }`}\n />\n <StatsRow\n show={isNotNullish(videoTrackStats?.bitrate)}\n label=\"Bitrate(V)\"\n value={formatBytes(videoTrackStats?.bitrate, 'b/s')}\n />\n </Fragment>\n )}\n\n <StatsRow\n show={isNotNullish(audioTrackStats?.bitrate)}\n label=\"Bitrate(A)\"\n value={formatBytes(audioTrackStats?.bitrate, 'b/s')}\n />\n\n <StatsRow show={isNotNullish(downlinkScore)} label=\"Downlink\" value={downlinkScore} />\n\n <StatsRow show={isNotNullish(videoTrackStats?.codec)} label=\"Codec(V)\" value={videoTrackStats?.codec} />\n\n <StatsRow show={isNotNullish(audioTrackStats?.codec)} label=\"Codec(A)\" value={audioTrackStats?.codec} />\n\n <PacketLostAndJitter audioTrackStats={audioTrackStats} videoTrackStats={videoTrackStats} />\n </tbody>\n </table>\n </Stats.Root>\n );\n}\n\nconst PacketLostAndJitter = ({\n audioTrackStats,\n videoTrackStats,\n}: {\n audioTrackStats?: HMSTrackStats;\n videoTrackStats?: HMSTrackStats;\n}) => {\n // for local peer, we'll use the remote inbound stats to get packet loss and jitter, to know whether the track is\n // local we check if the stats type has outbound in it as it's being published from local. Both audio and video\n // tracks are checked in case the user has permission to publish only one of them.\n const isLocalPeer = audioTrackStats?.type.includes('outbound') || videoTrackStats?.type.includes('outbound');\n const audioStats = isLocalPeer ? audioTrackStats?.remote : audioTrackStats;\n const videoStats = isLocalPeer ? videoTrackStats?.remote : videoTrackStats;\n return (\n <>\n <TrackPacketsLostRow label=\"Packet Loss(V)\" stats={videoStats} />\n <TrackPacketsLostRow label=\"Packet Loss(A)\" stats={audioStats} />\n <StatsRow show={isNotNullish(videoStats?.jitter)} label=\"Jitter(V)\" value={videoStats?.jitter?.toFixed(4)} />\n <StatsRow show={isNotNullish(audioStats?.jitter)} label=\"Jitter(A)\" value={audioStats?.jitter?.toFixed(4)} />\n </>\n );\n};\n\nconst TrackPacketsLostRow = ({\n stats,\n label,\n}: {\n stats?: Pick<HMSTrackStats, 'packetsLost' | 'packetsLostRate'>;\n label: string;\n}) => {\n const packetsLostRate = `${stats?.packetsLostRate ? stats.packetsLostRate.toFixed(2) : 0}/s`;\n\n return (\n <StatsRow\n show={isNotNullishAndNot0(stats?.packetsLost)}\n label={label}\n value={`${stats?.packetsLost}(${packetsLostRate})`}\n />\n );\n};\n\nconst RawStatsRow = ({\n label = '',\n value = '',\n tooltip = '',\n show = true,\n}: {\n label: string;\n value?: string | number;\n show?: boolean;\n tooltip?: string;\n}) => {\n const statsLabel = <Stats.Label css={{ fontWeight: !value ? '$semiBold' : '$regular' }}>{label}</Stats.Label>;\n\n return (\n <>\n {show ? (\n <Stats.Row>\n {tooltip ? (\n <Tooltip side=\"top\" title={tooltip}>\n {statsLabel}\n </Tooltip>\n ) : (\n statsLabel\n )}\n {value === '' ? <Stats.Value /> : <Stats.Value>{value}</Stats.Value>}\n </Stats.Row>\n ) : null}\n </>\n );\n};\n\n// memoize so only the rows which change rerender\nconst StatsRow = React.memo(RawStatsRow);\n\nexport function isNotNullishAndNot0(value: number | undefined | null) {\n return isNotNullish(value) && value !== 0;\n}\n\n/**\n * Check only for presence(not truthy) of a value.\n * Use in places where 0, false need to be considered valid.\n */\nexport function isNotNullish(value: number | string | undefined | null) {\n return value !== undefined && value !== null;\n}\n", "export const formatBytes = (bytes?: number, unit = 'B', decimals = 2) => {\n if (bytes === 0) {\n return `0 ${unit}`;\n }\n if (!bytes) {\n return '-';\n }\n\n const k = 1024;\n const dm = decimals < 0 ? 0 : decimals;\n const sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'].map(size => size + unit);\n\n let i = Math.floor(Math.log(bytes) / Math.log(k));\n\n // B to KB\n i === 0 && i++;\n\n return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;\n};\n", "import { styled } from '../Theme';\n\nexport const Root = styled('div', {\n backgroundColor: 'rgba(0,0,0,0.75)',\n position: 'absolute',\n top: '$3',\n left: '$3',\n zIndex: 7,\n borderRadius: '$2',\n padding: '$2',\n fontSize: '$xs',\n overflowY: 'auto',\n maxHeight: '75%',\n maxWidth: '85%',\n});\n\nexport const Table = styled('table', {});\n\nexport const Row = styled('tr', {\n width: '100%',\n '& > * + *': {\n px: '$4',\n },\n whiteSpace: 'nowrap',\n textAlign: 'left',\n});\n\nexport const Label = styled('td', {\n color: '$on_primary_high',\n fontWeight: '$regular',\n});\n\nexport const Value = styled('td', {\n color: '$on_primary_high',\n});\n\nexport const Gap = styled('tr', {\n height: '$4',\n});\n\ninterface StatsType {\n Root: typeof Root;\n Row: typeof Row;\n Label: typeof Label;\n Value: typeof Value;\n Table: typeof Table;\n Gap: typeof Gap;\n}\n\nexport const Stats: StatsType = {\n Root,\n Row,\n Label,\n Value,\n Table,\n Gap,\n};\n", "import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { styled } from '../Theme';\n\nconst CheckboxRoot = styled(CheckboxPrimitive.Root, {\n all: 'unset',\n border: '1px solid $primary_default',\n backgroundColor: '$on_primary_high',\n width: '$8',\n height: '$8',\n borderRadius: '$0',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n boxShadow: 'none',\n outline: 'none',\n cursor: 'pointer',\n '&:focus': {\n boxShadow: 'none',\n outline: 'none',\n },\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary_default',\n },\n});\n\nconst CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {\n color: '$on_primary_high',\n});\n\nexport const Checkbox = {\n Root: CheckboxRoot,\n Indicator: CheckboxIndicator,\n};\n", "import * as LabelPrimitive from '@radix-ui/react-label';\nimport { styled } from '../Theme';\n\nexport const Label = styled(LabelPrimitive.Root, {\n fontFamily: '$sans',\n fontSize: '$md',\n color: '$on_primary_high',\n});\n", "import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { styled } from '../Theme';\n\nconst RadioGroupRoot = styled(RadioGroupPrimitive.Root, {\n display: 'flex',\n alignItems: 'center',\n});\n\nconst RadioGroupItem = styled(RadioGroupPrimitive.Item, {\n bg: '$on_primary_high',\n width: '$8',\n height: '$8',\n border: '1px solid $primary_default',\n cursor: 'pointer',\n borderRadius: '$round',\n '&:focus': {\n boxShadow: 'none',\n outline: 'none',\n },\n '&[data-state=\"checked\"]': {\n borderWidth: '$space$2',\n p: '$1',\n },\n});\nconst RadioGroupIndicator = styled(RadioGroupPrimitive.Indicator, {\n bg: '$primary_default',\n});\n\nexport const RadioGroup = {\n Root: RadioGroupRoot,\n Item: RadioGroupItem,\n Indicator: RadioGroupIndicator,\n};\n", "import React, { ComponentProps } from 'react';\nimport type { ToastProps } from '@radix-ui/react-toast';\nimport * as ToastPrimitives from '@radix-ui/react-toast';\nimport { CrossIcon } from '@100mslive/react-icons';\nimport { IconButton } from '../IconButton';\nimport { Box, Flex } from '../Layout';\nimport { Text } from '../Text';\nimport { styled } from '../Theme';\nimport { toastAnimation } from '../utils';\n\nconst getToastVariant = (base: string) => {\n return {\n borderLeftColor: base,\n borderLeft: 0,\n '&:before': {\n position: 'absolute',\n top: '-1px',\n left: '-$4',\n width: '$8',\n borderLeft: `solid $space$px ${base}`,\n borderTop: `solid $space$px ${base}`,\n borderBottom: `solid $space$px ${base}`,\n borderTopLeftRadius: '$3',\n borderBottomLeftRadius: '$3',\n bg: base,\n content: ' ',\n height: '100%',\n zIndex: 10,\n },\n '@sm': {\n '&:before': {\n content: 'none',\n },\n border: `solid $space$px ${base}`,\n },\n };\n};\n\nconst ToastRoot = styled(ToastPrimitives.Root, {\n r: '$3',\n bg: '$surface_default',\n p: '$10',\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n fontFamily: '$sans',\n border: 'solid $space$px $border_bright',\n overflow: 'hidden',\n ...toastAnimation,\n '@sm': {\n p: '$8 $11',\n },\n variants: {\n variant: {\n standard: getToastVariant('$secondary_default'),\n warning: getToastVariant('$alert_warning'),\n error: getToastVariant('$alert_error_default'),\n success: getToastVariant('$alert_success'),\n },\n },\n defaultVariants: {\n variant: 'standard',\n },\n});\n\nconst ToastTitle = styled(ToastPrimitives.Title, {\n fontSize: '$md',\n color: '$on_surface_high',\n fontWeight: '$semiBold',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n});\nconst ToastDescription = styled(ToastPrimitives.Description, {\n color: '$on_surface_medium',\n});\nconst ToastClose = styled(ToastPrimitives.Close, {});\nconst ToastAction = styled(ToastPrimitives.Action, {\n cursor: 'pointer',\n background: 'none',\n});\nconst ToastViewport = styled(ToastPrimitives.Viewport, {\n position: 'fixed',\n bottom: 0,\n left: 0,\n display: 'flex',\n flexDirection: 'column',\n padding: '$8',\n gap: 10,\n width: 390,\n '@sm': {\n width: '100%',\n padding: '$6',\n },\n maxWidth: '100vw',\n margin: 0,\n listStyle: 'none',\n zIndex: 1000,\n});\n\nconst DefaultClose = ({ css }: Pick<ComponentProps<typeof ToastClose>, 'css'>) => {\n return (\n <ToastClose css={css} asChild>\n <IconButton>\n <CrossIcon />\n </IconButton>\n </ToastClose>\n );\n};\n\ninterface HMSToastProps extends ToastProps {\n title: string;\n description?: string;\n isClosable?: boolean;\n icon?: React.ReactNode;\n action?: React.ReactNode;\n inlineAction?: boolean;\n}\n\nconst HMSToast: React.FC<HMSToastProps> = ({\n title,\n description,\n isClosable = true,\n icon,\n action,\n inlineAction = false,\n ...props\n}) => {\n return (\n <>\n <ToastRoot {...props}>\n <ToastTitle>\n <Flex align=\"center\" css={{ gap: '$4', flex: '1 1 0', minWidth: 0 }}>\n {icon ? <Box css={{ w: '$10', h: '$10', alignSelf: 'start', mt: '$2' }}>{icon}</Box> : null}\n <Text variant=\"sub1\" css={{ c: 'inherit', wordBreak: 'break-word' }}>\n {title}\n </Text>\n </Flex>\n {isClosable ? <DefaultClose /> : null}\n {!isClosable && inlineAction && action ? (\n <ToastAction altText={`${title}Action`}>{action}</ToastAction>\n ) : null}\n </ToastTitle>\n {description ? (\n <ToastDescription>\n <Text variant=\"body1\" css={{ fontWeight: '$regular', c: '$on_surface_medium' }}>\n {description}\n </Text>\n </ToastDescription>\n ) : null}\n {!inlineAction && action ? (\n <ToastAction altText={`${title}Action`} css={{ mt: '$10' }}>\n {action}\n </ToastAction>\n ) : null}\n </ToastRoot>\n </>\n );\n};\nexport const Toast = {\n Provider: ToastPrimitives.Provider,\n Root: ToastRoot,\n Title: ToastTitle,\n Description: ToastDescription,\n Close: DefaultClose,\n Action: ToastAction,\n Viewport: ToastViewport,\n HMSToast: HMSToast,\n};\n", "import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot } from './Accordion';\n\nexport const Accordion = {\n Root: AccordionRoot,\n Item: AccordionItem,\n Content: AccordionContent,\n Header: AccordionHeader,\n};\n", "import React, { PropsWithChildren } from 'react';\nimport * as BaseAccordion from '@radix-ui/react-accordion';\nimport { CSS } from '@stitches/react';\nimport { ChevronUpIcon } from '@100mslive/react-icons';\nimport { Box } from '../Layout';\nimport { styled } from '../Theme';\nimport { slideDown, slideUp } from '../utils';\n\nconst StyledAccordion = styled(BaseAccordion.Root, {});\n\nconst StyledItem = styled(BaseAccordion.Item, {\n marginTop: '$px',\n display: 'block',\n '&:first-child': {\n marginTop: 0,\n borderTopLeftRadius: '$0',\n borderTopRightRadius: '$0',\n },\n '&:last-child': {\n borderBottomLeftRadius: '$4',\n borderBottomRightRadius: '$4',\n },\n});\n\nconst StyledHeader = styled(BaseAccordion.Header, {\n all: 'unset',\n display: 'flex',\n fontFamily: '$sans',\n});\n\nconst StyledTrigger = styled(BaseAccordion.Trigger, {\n all: 'unset',\n fontFamily: '$sans',\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n fontSize: '$md',\n lineHeight: '$md',\n color: '$on_surface_high',\n});\n\nconst StyledContent = styled(BaseAccordion.Content, {\n display: 'contents',\n fontSize: '$md',\n fontFamily: '$sans',\n color: '$on_surface_medium',\n '&[data-state=\"open\"]': {\n animation: `${slideDown('--radix-accordion-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,\n },\n '&[data-state=\"closed\"]': {\n animation: `${slideUp('--radix-accordion-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,\n },\n});\n\nconst StyledChevron = styled(ChevronUpIcon, {\n color: '$on_primary_high',\n transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',\n '[data-state=closed] &': { transform: 'rotate(180deg)' },\n});\n\n// Exports\nexport const AccordionRoot = StyledAccordion;\nexport const AccordionItem = StyledItem;\n\nexport const AccordionHeader: React.FC<\n PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>\n> = React.forwardRef<\n HTMLButtonElement,\n PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>\n>(({ children, iconStyles, css, ...props }, forwardedRef) => (\n <StyledHeader css={css}>\n <StyledTrigger {...props} ref={forwardedRef}>\n {children}\n <StyledChevron aria-hidden css={iconStyles} />\n </StyledTrigger>\n </StyledHeader>\n));\n\nexport const AccordionContent: React.FC<\n PropsWithChildren<BaseAccordion.AccordionContentProps & { contentStyles?: CSS }>\n> = React.forwardRef<HTMLDivElement, PropsWithChildren<BaseAccordion.AccordionContentProps & { contentStyles?: CSS }>>(\n ({ children, contentStyles, ...props }, forwardedRef) => (\n <StyledContent {...props} ref={forwardedRef}>\n <Box css={contentStyles}>{children}</Box>\n </StyledContent>\n ),\n);\n", "import { styled } from '../Theme';\n\nconst StyledFieldset = styled('fieldset', {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n border: 'none',\n backgroundColor: '$transparent',\n});\n\nexport const Fieldset = StyledFieldset;\n", "export { Footer } from './Footer';\n", "import { Flex } from '../Layout';\nimport { styled } from '../Theme';\n\nconst Root = styled(Flex, {\n justifyContent: 'space-between',\n alignItems: 'center',\n py: '$4',\n position: 'relative',\n height: '100%',\n '@md': { flexWrap: 'wrap', gap: '$4' },\n});\n\nconst Left = styled(Flex, {\n alignItems: 'center',\n position: 'absolute',\n left: '$10',\n gap: '$8',\n '@md': {\n position: 'unset',\n justifyContent: 'center',\n w: '100%',\n },\n});\n\nconst Center = styled(Flex, {\n w: '100%',\n justifyContent: 'center',\n alignItems: 'center',\n gap: '$8',\n});\n\nconst Right = styled(Flex, {\n alignItems: 'center',\n position: 'absolute',\n right: '$10',\n gap: '$8',\n '@md': {\n display: 'none',\n },\n});\n\nexport const Footer = {\n Root,\n Left,\n Center,\n Right,\n};\n", "export { Select } from './ReactSelect';\n", "import * as SelectPrimitive from '@radix-ui/react-select';\nimport { styled } from '../Theme';\n\nconst StyledRoot = styled(SelectPrimitive.Root, {});\n\nconst StyledTrigger = styled(SelectPrimitive.SelectTrigger, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '$2',\n padding: '$8',\n lineHeight: '$px',\n gap: '$8',\n backgroundColor: '$secondary_default',\n color: '$on_primary_high',\n fontSize: '$8',\n cursor: 'pointer',\n r: '$1',\n});\n\nconst StyledContent = styled(SelectPrimitive.Content, {\n overflow: 'hidden',\n backgroundColor: '$surface_bright',\n r: '$1',\n h: '$80',\n});\n\nconst StyledViewport = styled(SelectPrimitive.Viewport, {\n padding: '$3',\n});\n\nconst StyledItem = styled(SelectPrimitive.Item, {\n all: 'unset',\n fontSize: '$7',\n r: '$1',\n display: 'flex',\n p: '$4 $8',\n w: '$52',\n position: 'relative',\n userSelect: 'none',\n cursor: 'pointer',\n});\n\nconst StyledLabel = styled(SelectPrimitive.Label, {\n p: '$4 $8',\n lineHeight: '$10',\n color: '$on_primary_high',\n});\n\nconst StyledSeparator = styled(SelectPrimitive.Separator, {\n height: '$px',\n backgroundColor: '$on_primary_high',\n margin: '$4',\n opacity: 0.4,\n});\n\nconst StyledItemIndicator = styled(SelectPrimitive.ItemIndicator, {\n position: 'absolute',\n right: '$8',\n width: '$8',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: '$on_primary_high',\n});\n\nconst scrollButtonStyles = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n p: '$4',\n backgroundColor: '$surface_bright',\n color: '$on_primary_high',\n cursor: 'default',\n};\n\nconst StyledScrollUpButton = styled(SelectPrimitive.ScrollUpButton, scrollButtonStyles);\n\nconst StyledScrollDownButton = styled(SelectPrimitive.ScrollDownButton, scrollButtonStyles);\n\nexport const Select = {\n Root: StyledRoot,\n Trigger: StyledTrigger,\n Content: StyledContent,\n Viewport: StyledViewport,\n Item: StyledItem,\n Label: StyledLabel,\n Separator: StyledSeparator,\n ItemIndicator: StyledItemIndicator,\n ScrollUpButton: StyledScrollUpButton,\n ScrollDownButton: StyledScrollDownButton,\n Value: SelectPrimitive.Value,\n Icon: SelectPrimitive.Icon,\n ItemText: SelectPrimitive.ItemText,\n Group: SelectPrimitive.Group,\n};\n", "import * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { styled } from '../Theme';\n\nconst StyledTabsRoot = styled(TabsPrimitive.Root, {\n display: 'flex',\n});\n\nconst StyledList = styled(TabsPrimitive.List, {\n flexShrink: 0,\n display: 'flex',\n});\n\nconst StyledTrigger = styled(TabsPrimitive.Trigger, {\n all: 'unset',\n fontFamily: '$sans',\n p: '$8',\n display: 'flex',\n alignItems: 'center',\n fontSize: '$sm',\n lineHeight: '$sm',\n color: '$on_surface_high',\n userSelect: 'none',\n cursor: 'pointer',\n '&[data-state=\"active\"]': {\n bg: '$surface_brighter',\n r: '$1',\n },\n});\n\nconst StyledContent = styled(TabsPrimitive.Content, {\n flex: '1 1 0',\n padding: '$10',\n outline: 'none',\n});\n\nexport const Tabs = {\n Root: StyledTabsRoot,\n List: StyledList,\n Content: StyledContent,\n Trigger: StyledTrigger,\n};\n", "import React, { ComponentProps } from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nexport const QRCode = (props: ComponentProps<typeof QRCodeSVG>) => {\n return <QRCodeSVG style={{ width: '100%', height: '100%' }} {...props} />;\n};\n", "export { Link } from './Link';\nexport type { LinkProps } from './Link';\n", "import React from 'react';\nimport * as icons from '@100mslive/react-icons';\nimport { Flex } from '../Layout';\nimport { Text } from '../Text';\nimport { styled } from '../Theme';\n\nconst LinkComponent = styled('a', {\n textDecoration: 'none',\n display: 'flex',\n alignItems: 'center',\n gap: '$5',\n variants: {\n color: {\n highEmp: {\n color: '$on_surface_high',\n '&:hover': {\n color: '$on_surface_medium',\n },\n },\n primary: {\n color: '$primary_default',\n '&:hover': {\n color: '$primary_bright',\n },\n },\n },\n },\n});\n\nexport interface LinkProps extends React.ComponentProps<typeof LinkComponent> {\n as?: React.ElementType;\n iconSide?: 'left' | 'right' | 'none';\n icon?: keyof typeof icons;\n color?: 'highEmp' | 'primary';\n}\n\nexport const Link = ({ iconSide = 'left', icon, color = 'primary', children, ...rest }: LinkProps) => {\n const Icon = icon ? icons[icon] : React.Fragment;\n const renderedIcon = icon ? (\n <Flex as=\"span\">\n <Icon height={13.33} width={13.33} />{' '}\n </Flex>\n ) : null;\n\n return (\n <LinkComponent {...rest} color={color}>\n {iconSide === 'left' && renderedIcon}\n <Text as=\"span\" variant=\"body2\" css={{ color: 'inherit' }}>\n {children}\n </Text>\n {iconSide === 'right' && renderedIcon}\n </LinkComponent>\n );\n};\n", "import { Content, Root, Trigger } from '@radix-ui/react-collapsible';\nimport { styled } from '../Theme';\nimport { slideDown, slideUp } from '../utils';\n\nconst CollapsibleRoot = styled(Root, {});\n\nconst CollapsibleTrigger = styled(Trigger, {\n cursor: 'pointer',\n appearance: 'none !important',\n '&:focus': {\n outline: 'none',\n },\n '&:focus-visible': {\n boxShadow: '0 0 0 3px $colors$primary_default',\n },\n});\n\nconst CollapsibleContent = styled(Content, {\n w: '$80',\n r: '$1',\n overflowY: 'auto',\n '&[data-state=\"open\"]': {\n animation: `${slideDown('--radix-collapsible-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,\n },\n '&[data-state=\"closed\"]': {\n animation: `${slideUp('--radix-collapsible-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,\n },\n});\n\nexport const Collapsible = {\n Root: CollapsibleRoot,\n Trigger: CollapsibleTrigger,\n Content: CollapsibleContent,\n};\n", "import { HMSPrebuilt } from './App.jsx';\nexport { HMSPrebuilt };\n", "import React, { Suspense, useEffect, useRef } from 'react';\nimport { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams } from 'react-router-dom';\nimport {\n HMSReactiveStore,\n HMSRoomProvider,\n selectIsConnectedToRoom,\n useHMSActions,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { AppData } from './components/AppData/AppData';\nimport { BeamSpeakerLabelsLogging } from './components/AudioLevel/BeamSpeakerLabelsLogging';\nimport AuthToken from './components/AuthToken';\nimport { ErrorBoundary } from './components/ErrorBoundary';\nimport FullPageProgress from './components/FullPageProgress';\nimport { Init } from './components/init/Init';\nimport { KeyboardHandler } from './components/Input/KeyboardInputManager';\nimport { Notifications } from './components/Notifications';\nimport PostLeave from './components/PostLeave';\nimport PreviewContainer from './components/Preview/PreviewContainer';\nimport { ToastContainer } from './components/Toast/ToastContainer';\nimport { RoomLayoutContext, RoomLayoutProvider } from './provider/roomLayoutProvider/index.tsx';\nimport { Box } from '../Layout';\nimport { globalStyles, HMSThemeProvider } from '../Theme';\nimport { HMSPrebuiltContext, useHMSPrebuiltContext } from './AppContext';\nimport { FlyingEmoji } from './plugins/FlyingEmoji';\nimport { RemoteStopScreenshare } from './plugins/RemoteStopScreenshare';\nimport { getRoutePrefix } from './common/utils';\nimport { FeatureFlags } from './services/FeatureFlags';\n\nconst Conference = React.lazy(() => import('./components/conference'));\n\n// TODO: remove now that there are options to change to portrait\nconst getAspectRatio = ({ width, height }) => {\n const host = process.env.REACT_APP_HOST_NAME;\n const portraitDomains = (process.env.REACT_APP_PORTRAIT_MODE_DOMAINS || '').split(',');\n if (portraitDomains.includes(host) && width > height) {\n return { width: height, height: width };\n }\n return { width, height };\n};\n\nexport const HMSPrebuilt = React.forwardRef(\n (\n {\n roomCode = '',\n logo,\n typography,\n themes,\n options: {\n userName = '',\n userId = '',\n endpoints: {\n init: initEndpoint = '',\n tokenByRoomCode: tokenByRoomCodeEndpoint = '',\n tokenByRoomIdRole: tokenByRoomIdRoleEndpoint = '',\n roomLayout: roomLayoutEndpoint = '',\n } = {},\n } = {},\n screens,\n onLeave,\n },\n ref,\n ) => {\n const aspectRatio = '1-1';\n const metadata = '';\n const { 0: width, 1: height } = aspectRatio.split('-').map(el => parseInt(el));\n const reactiveStore = useRef();\n\n const [hydrated, setHydrated] = React.useState(false);\n useEffect(() => {\n setHydrated(true);\n const hms = new HMSReactiveStore();\n const hmsStore = hms.getStore();\n const hmsActions = hms.getActions();\n const hmsNotifications = hms.getNotifications();\n const hmsStats = hms.getStats();\n\n reactiveStore.current = {\n hmsActions,\n hmsStats,\n hmsStore,\n hmsNotifications,\n };\n }, []);\n\n useEffect(() => {\n if (!ref || !reactiveStore.current) {\n return;\n }\n\n ref.current = { ...reactiveStore.current };\n }, [ref]);\n\n // leave room when component unmounts\n useEffect(\n () => () => {\n return reactiveStore.current.hmsActions.leave();\n },\n [],\n );\n\n const endpoints = {\n tokenByRoomCode: tokenByRoomCodeEndpoint,\n init: initEndpoint,\n tokenByRoomIdRole: tokenByRoomIdRoleEndpoint,\n roomLayout: roomLayoutEndpoint,\n };\n\n const overrideLayout = {\n logo,\n themes,\n typography,\n screens,\n };\n\n if (!hydrated) {\n return null;\n }\n\n globalStyles();\n\n return (\n <ErrorBoundary>\n <HMSPrebuiltContext.Provider\n value={{\n roomCode,\n showPreview: true,\n showLeave: true,\n onLeave,\n userName,\n userId,\n endpoints,\n }}\n >\n <HMSRoomProvider\n isHMSStatsOn={FeatureFlags.enableStatsForNerds}\n actions={reactiveStore.current.hmsActions}\n store={reactiveStore.current.hmsStore}\n notifications={reactiveStore.current.hmsNotifications}\n stats={reactiveStore.current.hmsStats}\n >\n <RoomLayoutProvider roomLayoutEndpoint={roomLayoutEndpoint} overrideLayout={overrideLayout}>\n <RoomLayoutContext.Consumer>\n {layout => {\n const theme = layout.themes?.[0] || {};\n const { typography } = layout;\n let fontFamily = ['sans-serif'];\n if (typography?.font_family) {\n fontFamily = [`${typography?.font_family}`, ...fontFamily];\n }\n\n return (\n <HMSThemeProvider\n themeType={theme.name}\n aspectRatio={getAspectRatio({ width, height })}\n theme={{\n colors: theme.palette,\n fonts: {\n sans: fontFamily,\n },\n }}\n >\n <AppData appDetails={metadata} tokenEndpoint={tokenByRoomIdRoleEndpoint} />\n <Init />\n <Box\n css={{\n bg: '$background_dim',\n size: '100%',\n lineHeight: '1.5',\n '-webkit-text-size-adjust': '100%',\n }}\n >\n <AppRoutes authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint} />\n </Box>\n </HMSThemeProvider>\n );\n }}\n </RoomLayoutContext.Consumer>\n </RoomLayoutProvider>\n </HMSRoomProvider>\n </HMSPrebuiltContext.Provider>\n </ErrorBoundary>\n );\n },\n);\n\nHMSPrebuilt.displayName = 'HMSPrebuilt';\n\nconst Redirector = ({ showPreview }) => {\n const { roomId, role } = useParams();\n\n if (!roomId && !role) {\n return <Navigate to=\"/\" />;\n }\n if (!roomId) {\n return <Navigate to=\"/\" />;\n }\n if (['streaming', 'preview', 'meeting', 'leave'].includes(roomId) && !role) {\n return <Navigate to=\"/\" />;\n }\n\n return <Navigate to={`${getRoutePrefix()}/${showPreview ? 'preview' : 'meeting'}/${roomId}/${role || ''}`} />;\n};\n\nconst RouteList = () => {\n const { showPreview, showLeave } = useHMSPrebuiltContext();\n\n return (\n <Routes>\n {showPreview && (\n <Route path=\"preview\">\n <Route\n path=\":roomId/:role\"\n element={\n <Suspense fallback={<FullPageProgress loadingText=\"Loading preview...\" />}>\n <PreviewContainer />\n </Suspense>\n }\n />\n <Route\n path=\":roomId\"\n element={\n <Suspense fallback={<FullPageProgress loadingText=\"Loading preview...\" />}>\n <PreviewContainer />\n </Suspense>\n }\n />\n </Route>\n )}\n <Route path=\"meeting\">\n <Route\n path=\":roomId/:role\"\n element={\n <Suspense fallback={<FullPageProgress loadingText=\"Joining...\" />}>\n <Conference />\n </Suspense>\n }\n />\n <Route\n path=\":roomId\"\n element={\n <Suspense fallback={<FullPageProgress loadingText=\"Joining...\" />}>\n <Conference />\n </Suspense>\n }\n />\n </Route>\n {showLeave && (\n <Route path=\"leave\">\n <Route path=\":roomId/:role\" element={<PostLeave />} />\n <Route path=\":roomId\" element={<PostLeave />} />\n </Route>\n )}\n\n <Route path=\"/:roomId/:role\" element={<Redirector showPreview={showPreview} />} />\n <Route path=\"/:roomId/\" element={<Redirector showPreview={showPreview} />} />\n </Routes>\n );\n};\n\nconst BackSwipe = () => {\n const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);\n const hmsActions = useHMSActions();\n useEffect(() => {\n const onRouteLeave = async () => {\n if (isConnectedToRoom) {\n await hmsActions.leave();\n }\n };\n window.addEventListener('popstate', onRouteLeave);\n return () => {\n window.removeEventListener('popstate', onRouteLeave);\n };\n }, [hmsActions, isConnectedToRoom]);\n return null;\n};\n\nconst Router = ({ children }) => {\n const { roomId, role, roomCode } = useHMSPrebuiltContext();\n return [roomId, role, roomCode].every(value => !value) ? (\n <BrowserRouter>{children}</BrowserRouter>\n ) : (\n <MemoryRouter initialEntries={[`/${roomCode ? roomCode : `${roomId}/${role || ''}`}`]} initialIndex={0}>\n {children}\n </MemoryRouter>\n );\n};\n\nfunction AppRoutes({ authTokenByRoomCodeEndpoint }) {\n return (\n <Router>\n <ToastContainer />\n <Notifications />\n <BackSwipe />\n <FlyingEmoji />\n <RemoteStopScreenshare />\n <KeyboardHandler />\n <BeamSpeakerLabelsLogging />\n <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} />\n <Routes>\n <Route path=\"/*\" element={<RouteList />} />\n <Route path=\"/streaming/*\" element={<RouteList />} />\n </Routes>\n </Router>\n );\n}\n", "import React, { useEffect } from 'react';\nimport { useSearchParam } from 'react-use';\nimport {\n HMSRoomState,\n selectAvailableRoleNames,\n selectHLSState,\n selectIsConnectedToRoom,\n selectLocalPeerRoleName,\n selectRolesMap,\n selectRoomState,\n selectRTMPState,\n useHMSActions,\n useHMSStore,\n useRecordingStreaming,\n} from '@100mslive/react-sdk';\nimport { normalizeAppPolicyConfig } from '../init/initUtils';\nimport { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';\nimport { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneState, useSidepaneToggle } from './useSidepane';\nimport { useSetAppDataByKey } from './useUISettings';\nimport { getMetadata } from '../../common/utils';\nimport {\n APP_DATA,\n CHAT_SELECTOR,\n DEFAULT_HLS_ROLE_KEY,\n DEFAULT_HLS_VIEWER_ROLE,\n DEFAULT_WAITING_VIEWER_ROLE,\n QUERY_PARAM_VIEW_MODE,\n SIDE_PANE_OPTIONS,\n UI_MODE_ACTIVE_SPEAKER,\n UI_MODE_GRID,\n UI_SETTINGS,\n} from '../../common/constants';\n\nexport const getAppDetails = appDetails => {\n try {\n return !appDetails ? {} : JSON.parse(appDetails);\n } catch (error) {\n return {};\n }\n};\n\nconst initialAppData = {\n [APP_DATA.uiSettings]: {\n [UI_SETTINGS.isAudioOnly]: false,\n [UI_SETTINGS.isHeadless]: false,\n [UI_SETTINGS.maxTileCount]: 9,\n [UI_SETTINGS.showStatsOnTiles]: false,\n [UI_SETTINGS.enableAmbientMusic]: false,\n [UI_SETTINGS.uiViewMode]: UI_MODE_GRID,\n [UI_SETTINGS.mirrorLocalVideo]: true,\n [UI_SETTINGS.activeSpeakerSorting]: process.env.REACT_APP_ENV === 'qa',\n [UI_SETTINGS.hideLocalVideo]: false,\n },\n [APP_DATA.subscribedNotifications]: {\n PEER_JOINED: false,\n PEER_LEFT: false,\n NEW_MESSAGE: true,\n ERROR: true,\n METADATA_UPDATED: true,\n },\n [APP_DATA.chatOpen]: false,\n [APP_DATA.chatSelector]: {\n [CHAT_SELECTOR.ROLE]: '',\n [CHAT_SELECTOR.PEER_ID]: '',\n },\n [APP_DATA.chatDraft]: '',\n [APP_DATA.sidePane]: '',\n [APP_DATA.hlsStarted]: false,\n [APP_DATA.rtmpStarted]: false,\n [APP_DATA.recordingStarted]: false,\n [APP_DATA.hlsViewerRole]: DEFAULT_HLS_VIEWER_ROLE,\n [APP_DATA.waitingViewerRole]: DEFAULT_WAITING_VIEWER_ROLE,\n [APP_DATA.dropdownList]: [],\n [APP_DATA.authToken]: '',\n};\n\nexport const AppData = React.memo(({ appDetails, tokenEndpoint }) => {\n const hmsActions = useHMSActions();\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const sidePane = useSidepaneState();\n const resetSidePane = useSidepaneReset();\n const [preferences = {}] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);\n const roleNames = useHMSStore(selectAvailableRoleNames);\n const rolesMap = useHMSStore(selectRolesMap);\n const localPeerRole = useHMSStore(selectLocalPeerRoleName);\n const isDefaultModeActiveSpeaker = useSearchParam(QUERY_PARAM_VIEW_MODE) === UI_MODE_ACTIVE_SPEAKER;\n\n useEffect(() => {\n if (!isConnected && sidePane && sidePane !== SIDE_PANE_OPTIONS.PARTICIPANTS) {\n resetSidePane();\n }\n }, [isConnected, sidePane, resetSidePane]);\n\n useEffect(() => {\n hmsActions.initAppData(initialAppData);\n hmsActions.setFrameworkInfo({\n type: 'react-web',\n isPrebuilt: true,\n version: React.version,\n });\n }, [hmsActions]);\n\n useEffect(() => {\n const uiSettings = preferences || {};\n const updatedSettings = {\n ...uiSettings,\n [UI_SETTINGS.uiViewMode]: isDefaultModeActiveSpeaker\n ? UI_MODE_ACTIVE_SPEAKER\n : uiSettings.uiViewMode || UI_MODE_GRID,\n };\n hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);\n }, [preferences, isDefaultModeActiveSpeaker, hmsActions]);\n\n useEffect(() => {\n const appData = {\n [APP_DATA.tokenEndpoint]: tokenEndpoint,\n [APP_DATA.hlsViewerRole]: getMetadata(appDetails)[DEFAULT_HLS_ROLE_KEY] || DEFAULT_HLS_VIEWER_ROLE,\n [APP_DATA.appConfig]: getAppDetails(appDetails),\n };\n for (const key in appData) {\n hmsActions.setAppData([key], appData[key]);\n }\n }, [appDetails, tokenEndpoint, hmsActions]);\n\n useEffect(() => {\n if (!preferences.subscribedNotifications) {\n return;\n }\n hmsActions.setAppData(APP_DATA.subscribedNotifications, preferences.subscribedNotifications, true);\n }, [preferences.subscribedNotifications, hmsActions]);\n\n useEffect(() => {\n if (localPeerRole) {\n const config = normalizeAppPolicyConfig(roleNames, rolesMap);\n hmsActions.setAppData(APP_DATA.appLayout, config[localPeerRole]);\n }\n }, [roleNames, rolesMap, localPeerRole, hmsActions]);\n\n return <ResetStreamingStart />;\n});\n\n/**\n * reset hlsStarted, rtmpStarted values when streaming starts\n */\nconst ResetStreamingStart = () => {\n const { isHLSRunning, isRTMPRunning, isBrowserRecordingOn } = useRecordingStreaming();\n const hlsError = useHMSStore(selectHLSState).error;\n const rtmpError = useHMSStore(selectRTMPState).error;\n const roomState = useHMSStore(selectRoomState);\n const [hlsStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);\n const [recordingStarted, setRecordingStarted] = useSetAppDataByKey(APP_DATA.recordingStarted);\n const [rtmpStarted, setRTMPStarted] = useSetAppDataByKey(APP_DATA.rtmpStarted);\n const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);\n const isStreamingOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.STREAMING);\n\n useEffect(() => {\n if (isBrowserRecordingOn && recordingStarted) {\n setRecordingStarted(false);\n }\n }, [isBrowserRecordingOn, recordingStarted, setRecordingStarted]);\n /**\n * Reset on leave\n */\n useEffect(() => {\n if (roomState === HMSRoomState.Disconnected) {\n setHLSStarted(false);\n setRecordingStarted(false);\n setRTMPStarted(false);\n }\n }, [roomState, setHLSStarted, setRTMPStarted, setRecordingStarted]);\n useEffect(() => {\n if (isHLSRunning || hlsError) {\n if (hlsStarted) {\n setHLSStarted(false);\n if (isStreamingOpen) {\n toggleStreaming();\n }\n }\n }\n }, [isHLSRunning, hlsStarted, setHLSStarted, hlsError, isStreamingOpen, toggleStreaming]);\n useEffect(() => {\n if (isRTMPRunning || rtmpError || isBrowserRecordingOn) {\n if (rtmpStarted) {\n setRTMPStarted(false);\n if (isStreamingOpen) {\n toggleStreaming();\n }\n }\n }\n }, [isRTMPRunning, setRTMPStarted, rtmpStarted, rtmpError, isBrowserRecordingOn, isStreamingOpen, toggleStreaming]);\n return null;\n};\n", "import { identify } from 'zipyai';\n\nconst zipyKey = process.env.REACT_APP_ZIPY_KEY;\nexport const setUpZipy = ({ localPeer, roomId, sessionId }) => {\n if (!zipyKey) {\n return;\n }\n\n let domain;\n if (typeof window !== 'undefined') {\n domain = window.location.hostname;\n }\n\n identify(localPeer.id, {\n firstName: localPeer.name,\n customerName: domain,\n email: domain,\n role: localPeer.roleName,\n sessionId,\n roomId,\n });\n};\n\n// interface RoleConfig {\n// center?: HMSRoleName[];\n// sidepane?: HMSRoleName[];\n// selfRoleChangeTo?: HMSRoleName[];\n// remoteRoleChangeFor?: HMSRoleName[];\n// }\n\n// interface PolicyConfig {\n// [role: string]: RoleConfig;\n// }\n\n/**\n * check if a role is allowed to publish either of audio or video\n */\nfunction canPublishAV(role) {\n const params = role?.publishParams;\n if (params?.allowed) {\n return params.allowed.includes('video') || params.allowed.includes('audio');\n }\n return false;\n}\n\n/**\n * Figure out the layout for each role. There is some extra work being done\n * here currently to figure out the layout for roles other than local peer too\n * which can be avoided.\n */\nexport const normalizeAppPolicyConfig = (roleNames, rolesMap, appPolicyConfig = {}) => {\n const newConfig = Object.assign({}, appPolicyConfig);\n // eslint-disable-next-line complexity\n roleNames.forEach(roleName => {\n if (!newConfig[roleName]) {\n newConfig[roleName] = {};\n }\n const subscribedRoles = rolesMap[roleName].subscribeParams?.subscribeToRoles || [];\n\n const isNotSubscribingOrSubscribingToSelf =\n subscribedRoles.length === 0 || (subscribedRoles.length === 1 && subscribedRoles[0] === roleName);\n if (!newConfig[roleName].center) {\n const publishingRoleNames = roleNames.filter(\n roleName => canPublishAV(rolesMap[roleName]) && subscribedRoles.includes(roleName),\n );\n if (isNotSubscribingOrSubscribingToSelf) {\n newConfig[roleName].center = [roleName];\n } else {\n // all other publishing roles apart from local role in center by default\n newConfig[roleName].center = publishingRoleNames.filter(rName => rName !== roleName);\n }\n }\n // everyone from my role is in sidepane by default if they can publish\n if (!newConfig[roleName].sidepane) {\n if (isNotSubscribingOrSubscribingToSelf) {\n newConfig[roleName].sidepane = [];\n } else {\n newConfig[roleName].sidepane = canPublishAV(rolesMap[roleName]) ? [roleName] : [];\n }\n }\n if (!newConfig[roleName].selfRoleChangeTo) {\n newConfig[roleName].selfRoleChangeTo = roleNames;\n }\n if (!newConfig[roleName].remoteRoleChangeFor) {\n newConfig[roleName].remoteRoleChangeFor = roleNames;\n }\n });\n\n return newConfig;\n};\n", "import { useState } from 'react';\nimport { useLocalStorage } from 'react-use';\n\nexport const UserPreferencesKeys = {\n PREVIEW: 'preview',\n NOTIFICATIONS: 'notifications',\n UI_SETTINGS: 'uiSettings',\n RTMP_URLS: 'rtmpUrls',\n};\n\nexport const defaultPreviewPreference = {\n name: '',\n isAudioMuted: false,\n isVideoMuted: false,\n};\n\nexport const useUserPreferences = (key, defaultPreference) => {\n const [localStorageValue, setStorageValue] = useLocalStorage(key, defaultPreference);\n const [preference, setPreference] = useState(localStorageValue || defaultPreference);\n const changePreference = value => {\n setPreference(value);\n setStorageValue(value);\n };\n return [preference, changePreference];\n};\n", "import { useCallback } from 'react';\nimport { selectAppData, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';\nimport { APP_DATA } from '../../common/constants';\n\n/**\n * Gives a boolean value if the sidepaneType matches current sidepane value in store\n * @param {string} sidepaneType\n * @returns {boolean} - if the sidepaneType is passed returns boolean else the current value\n */\nexport const useIsSidepaneTypeOpen = sidepaneType => {\n if (!sidepaneType) {\n throw Error('Pass one of the side pane options');\n }\n return useHMSStore(selectAppData(APP_DATA.sidePane)) === sidepaneType;\n};\n\n/**\n * Gives the current value of sidepane in store\n * @returns {string} - if the sidepaneType is passed returns boolean else the current value\n */\nexport const useSidepaneState = () => {\n const sidePane = useHMSStore(selectAppData(APP_DATA.sidePane));\n return sidePane;\n};\n\n/**\n * Toggle the sidepane value between passed sidePaneType and '';\n * @param {string} sidepaneType\n */\nexport const useSidepaneToggle = sidepaneType => {\n const hmsActions = useHMSActions();\n const vanillaStore = useHMSVanillaStore();\n const toggleSidepane = useCallback(() => {\n const isOpen = vanillaStore.getState(selectAppData(APP_DATA.sidePane)) === sidepaneType;\n hmsActions.setAppData(APP_DATA.sidePane, !isOpen ? sidepaneType : '');\n }, [vanillaStore, hmsActions, sidepaneType]);\n return toggleSidepane;\n};\n\n/**\n * reset's the sidepane value\n */\nexport const useSidepaneReset = () => {\n const hmsActions = useHMSActions();\n const resetSidepane = useCallback(() => {\n hmsActions.setAppData(APP_DATA.sidePane, '');\n }, [hmsActions]);\n return resetSidepane;\n};\n", "import { useCallback } from 'react';\nimport {\n selectAppData,\n selectAppDataByPath,\n selectSessionStore,\n selectTrackByID,\n useHMSActions,\n useHMSStore,\n useHMSVanillaStore,\n} from '@100mslive/react-sdk';\nimport { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';\nimport { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../../common/constants';\n\n/**\n * fields saved related to UI settings in store's app data can be\n * accessed using this hook. key is optional if not passed\n * the whole UI settings object is returned. Usage -\n * 1. val = useUiSettings(\"isAudioOnly\");\n * console.log(val); // false\n * 2. val = useUISettings();\n * console.log(val); // {isAudioOnly: false}\n * @param {string | undefined} uiSettingKey\n */\nexport const useUISettings = uiSettingKey => {\n const uiSettings = useHMSStore(selectAppDataByPath(APP_DATA.uiSettings, uiSettingKey));\n return uiSettings;\n};\n\n/**\n * fields saved related to UI settings in store's app data can be\n * accessed using this hook. key is optional if not passed\n * the whole UI settings object is returned. Usage -\n * [val, setVal] = useUiSettings(\"isAudioOnly\");\n * console.log(val); // false\n * setVal(true);\n * @param {string} uiSettingKey\n */\nexport const useSetUiSettings = uiSettingKey => {\n const value = useUISettings(uiSettingKey);\n const setValue = useSetAppData({\n key1: APP_DATA.uiSettings,\n key2: uiSettingKey,\n });\n return [value, setValue];\n};\n\nexport const useIsHeadless = () => {\n const isHeadless = useUISettings(UI_SETTINGS.isHeadless);\n return isHeadless;\n};\n\nexport const useActiveSpeakerSorting = () => {\n const activeSpeakerSorting = useUISettings(UI_SETTINGS.activeSpeakerSorting);\n return activeSpeakerSorting;\n};\n\nexport const useHLSViewerRole = () => {\n return useHMSStore(selectAppData(APP_DATA.hlsViewerRole));\n};\n\nexport const useWaitingViewerRole = () => {\n return useHMSStore(selectAppData(APP_DATA.waitingViewerRole));\n};\nexport const useIsHLSStartedFromUI = () => {\n return useHMSStore(selectAppData(APP_DATA.hlsStarted));\n};\n\nexport const useIsRTMPStartedFromUI = () => {\n return useHMSStore(selectAppData(APP_DATA.rtmpStarted));\n};\n\nexport const useTokenEndpoint = () => {\n return useHMSStore(selectAppData(APP_DATA.tokenEndpoint));\n};\n\nexport const useAuthToken = () => {\n return useHMSStore(selectAppData(APP_DATA.authToken));\n};\n\nexport const useUrlToEmbed = () => {\n return useHMSStore(selectAppData(APP_DATA.embedConfig))?.url;\n};\n\nexport const usePDFAnnotator = () => {\n return useHMSStore(selectAppData(APP_DATA.pdfConfig))?.state;\n};\nexport const usePinnedTrack = () => {\n const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));\n const spotlightTrackId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));\n return useHMSStore(selectTrackByID(pinnedTrackId || spotlightTrackId));\n};\n\nexport const useSubscribedNotifications = notificationKey => {\n const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.subscribedNotifications, notificationKey));\n return notificationPreference;\n};\n\nexport const useSetSubscribedNotifications = notificationKey => {\n const value = useSubscribedNotifications(notificationKey);\n const setValue = useSetAppData({\n key1: APP_DATA.subscribedNotifications,\n key2: notificationKey,\n });\n return [value, setValue];\n};\n\nexport const useSubscribeChatSelector = chatSelectorKey => {\n const chatSelectorPreference = useHMSStore(selectAppDataByPath(APP_DATA.chatSelector, chatSelectorKey));\n return chatSelectorPreference;\n};\n\nexport const useSetSubscribedChatSelector = chatSelectorKey => {\n const value = useSubscribeChatSelector(chatSelectorKey);\n const setValue = useSetAppData({\n key1: APP_DATA.chatSelector,\n key2: chatSelectorKey,\n });\n return [value, setValue];\n};\n\nexport const useSetAppDataByKey = appDataKey => {\n const value = useHMSStore(selectAppData(appDataKey));\n const actions = useHMSActions();\n const setValue = useCallback(\n value => {\n actions.setAppData(appDataKey, value);\n },\n [actions, appDataKey],\n );\n return [value, setValue];\n};\n\nconst useSetAppData = ({ key1, key2 }) => {\n const actions = useHMSActions();\n const store = useHMSVanillaStore();\n const [, setPreferences] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);\n const setValue = useCallback(\n value => {\n if (!key1) {\n return;\n }\n actions.setAppData(\n key1,\n key2\n ? {\n [key2]: value,\n }\n : value,\n true,\n );\n const appData = store.getState(selectAppData());\n setPreferences({\n ...appData.uiSettings,\n subscribedNotifications: appData.subscribedNotifications,\n });\n },\n [actions, key1, key2, store, setPreferences],\n );\n return setValue;\n};\n", "// eslint-disable-next-line complexity\nexport function shadeColor(color, percent) {\n let R = parseInt(color.substring(1, 3), 16);\n let G = parseInt(color.substring(3, 5), 16);\n let B = parseInt(color.substring(5, 7), 16);\n\n R = Math.floor((R * (100 + percent)) / 100);\n G = Math.floor((G * (100 + percent)) / 100);\n B = Math.floor((B * (100 + percent)) / 100);\n\n R = R < 255 ? R : 255;\n G = G < 255 ? G : 255;\n B = B < 255 ? B : 255;\n\n const RR = R.toString(16).length === 1 ? `0${R.toString(16)}` : R.toString(16);\n const GG = G.toString(16).length === 1 ? `0${G.toString(16)}` : G.toString(16);\n const BB = B.toString(16).length === 1 ? `0${B.toString(16)}` : B.toString(16);\n\n return `#${RR}${GG}${BB}`;\n}\n\n/**\n * TODO: this is currently an O(N**2) function, don't use with peer lists, it's currently\n * being used to find intersection between list of role names where the complexity shouldn't matter much.\n */\nexport const arrayIntersection = (a, b) => {\n if (a === undefined || b === undefined) {\n return [];\n }\n // ensure \"a\" is the bigger array\n if (b.length > a.length) {\n let t = b;\n b = a;\n a = t;\n }\n return a.filter(function (e) {\n return b.indexOf(e) > -1;\n });\n};\n\nexport const getMetadata = metadataString => {\n try {\n return metadataString === '' ? {} : JSON.parse(metadataString);\n } catch (error) {\n return {};\n }\n};\n\nexport const metadataProps = function (peer) {\n return {\n isHandRaised: getMetadata(peer.metadata)?.isHandRaised,\n };\n};\n\nexport const isScreenshareSupported = () => {\n return typeof navigator.mediaDevices.getDisplayMedia !== 'undefined';\n};\n\nexport const getRoutePrefix = () => {\n return window.location.pathname.startsWith('/streaming') ? '/streaming' : '';\n};\n\nexport const isStreamingKit = () => {\n return window.location.pathname.startsWith('/streaming');\n};\n\nexport const isInternalRole = role => role && role.startsWith('__internal');\n\nexport const metadataPayloadParser = payload => {\n try {\n const data = window.atob(payload);\n const parsedData = JSON.parse(data);\n return parsedData;\n } catch (e) {\n return { payload };\n }\n};\n\n// For bottom action sheet, returns updated height based on drag\nexport const getUpdatedHeight = (e, MINIMUM_HEIGHT) => {\n const heightToPercentage = 100 - ((e?.touches?.[0] || e).pageY / window.innerHeight) * 100;\n // Snap to top if height > 80%, should be at least 40vh\n const sheetHeightInVH = Math.max(MINIMUM_HEIGHT, heightToPercentage > 80 ? 100 : heightToPercentage);\n return `${sheetHeightInVH}vh`;\n};\n", "import { useEffect } from 'react';\nimport { useHMSActions } from '@100mslive/react-sdk';\nimport { useIsHeadless } from '../AppData/useUISettings';\nimport { FeatureFlags } from '../../services/FeatureFlags';\n\nexport function BeamSpeakerLabelsLogging() {\n const hmsActions = useHMSActions();\n const isHeadless = useIsHeadless();\n\n useEffect(() => {\n if (FeatureFlags.enableBeamSpeakersLogging && isHeadless) {\n hmsActions.enableBeamSpeakerLabelsLogging();\n }\n }, [hmsActions, isHeadless]);\n return null;\n}\n", "import { useEffect } from 'react';\nimport { selectRoomID, useHMSStore } from '@100mslive/react-sdk';\n\nexport class FeatureFlags {\n static enableTranscription = process.env.REACT_APP_ENABLE_TRANSCRIPTION === 'true';\n static enableStatsForNerds = process.env.REACT_APP_ENABLE_STATS_FOR_NERDS === 'true';\n static enableWhiteboard =\n process.env.REACT_APP_ENABLE_WHITEBOARD &&\n process.env.REACT_APP_PUSHER_APP_KEY &&\n process.env.REACT_APP_PUSHER_AUTHENDPOINT;\n static enableBeamSpeakersLogging = process.env.REACT_APP_ENABLE_BEAM_SPEAKERS_LOGGING === 'true';\n\n static init(roomId) {\n if (!window.HMS) {\n window.HMS = {};\n }\n // some extra config to hls js to bring down latency\n window.HMS.OPTIMISE_HLS_LATENCY = false;\n // ask permissions in preview even if role doesn't have it\n window.HMS.ALWAYS_REQUEST_PERMISSIONS = false;\n window.HMS.SHOW_NS = process.env.REACT_APP_ENV !== 'prod';\n\n this.enableTranscription = process.env.REACT_APP_TRANSCRIPTION_ROOM_ID === roomId;\n }\n\n static showNS() {\n return window.HMS.SHOW_NS;\n }\n\n static optimiseHLSLatency() {\n return window.HMS.OPTIMISE_HLS_LATENCY;\n }\n\n static alwaysRequestPermissions() {\n return window.HMS.ALWAYS_REQUEST_PERMISSIONS;\n }\n}\n\nexport function FeatureFlagsInit() {\n const roomId = useHMSStore(selectRoomID);\n useEffect(() => {\n if (roomId) {\n FeatureFlags.init(roomId);\n }\n }, [roomId]);\n return null;\n}\n", "import React, { useEffect, useMemo, useState } from 'react';\nimport { matchPath, useLocation } from 'react-router-dom';\nimport { useSearchParam } from 'react-use';\nimport { v4 as uuid } from 'uuid';\nimport { useHMSActions } from '@100mslive/react-sdk';\nimport { styled } from '../../Theme';\nimport { useHMSPrebuiltContext } from '../AppContext';\nimport { ErrorDialog } from '../primitives/DialogContent';\nimport { useSetAppDataByKey, useTokenEndpoint } from './AppData/useUISettings';\nimport getToken from '../services/tokenService';\nimport { APP_DATA, QUERY_PARAM_AUTH_TOKEN } from '../common/constants';\n\n/**\n * query params exposed -\n * skip_preview=true => used by recording and streaming service, skips preview and directly joins\n * header and footer don't show up in this case\n * skip_preview_headful=true => used by automation testing to skip preview without impacting the UI\n * name=abc => gives the initial name for the peer joining\n * auth_token=123 => uses the passed in token to join instead of fetching from token endpoint\n * ui_mode=activespeaker => lands in active speaker mode after joining the room\n */\nconst AuthToken = React.memo(({ authTokenByRoomCodeEndpoint }) => {\n const hmsActions = useHMSActions();\n const tokenEndpoint = useTokenEndpoint();\n const { showPreview, roomCode } = useHMSPrebuiltContext();\n const location = useLocation();\n const matches = useMemo(\n () =>\n matchPath(`${showPreview ? 'preview' : 'meeting'}/:roomId/:role`, location.pathname) ||\n matchPath(`${showPreview ? 'preview' : 'meeting'}/:roomCode/`, location.pathname),\n [location, showPreview],\n );\n const { roomCode: urlRoomCode, roomId: urlRoomId, role: userRole } = matches?.params || {};\n const [error, setError] = useState({ title: '', body: '' });\n let authToken = useSearchParam(QUERY_PARAM_AUTH_TOKEN);\n const [, setAuthTokenInAppData] = useSetAppDataByKey(APP_DATA.authToken);\n\n useEffect(() => {\n if (authToken) {\n setAuthTokenInAppData(authToken);\n return;\n }\n if (!tokenEndpoint && !urlRoomId && !roomCode && !urlRoomCode) {\n return;\n }\n const code = !userRole && (roomCode || urlRoomCode);\n\n const getTokenFn = code\n ? () => hmsActions.getAuthTokenByRoomCode({ roomCode: code }, { endpoint: authTokenByRoomCodeEndpoint })\n : () => getToken(tokenEndpoint, uuid(), userRole, urlRoomId);\n\n getTokenFn()\n .then(token => {\n setAuthTokenInAppData(token);\n })\n .catch(error => {\n setError(convertError(error));\n });\n }, [\n hmsActions,\n tokenEndpoint,\n urlRoomId,\n urlRoomCode,\n userRole,\n authToken,\n authTokenByRoomCodeEndpoint,\n setAuthTokenInAppData,\n roomCode,\n ]);\n\n if (error.title) {\n return <ErrorDialog title={error.title}>{error.body}</ErrorDialog>;\n }\n return null;\n});\n\nconst convertError = error => {\n console.error('[error]', { error });\n if (error.action === 'GET_TOKEN' && error.code === 403) {\n return {\n title: 'Room code is disabled',\n body: ErrorWithSupportLink('Room code corresponding to this link is no more active.'),\n };\n } else if (error.action === 'GET_TOKEN' && error.code === 404) {\n return {\n title: 'Room code does not exist',\n body: ErrorWithSupportLink('We could not find a room code corresponding to this link.'),\n };\n } else if (error.action === 'GET_TOKEN' && error.code === 2003) {\n return {\n title: 'Endpoint is not reachable',\n body: ErrorWithSupportLink(`Endpoint is not reachable. ${error.description}.`),\n };\n } else if (error.response && error.response.status === 404) {\n return {\n title: 'Room does not exist',\n body: ErrorWithSupportLink('We could not find a room corresponding to this link.'),\n };\n } else if (error.response && error.response.status === 403) {\n return {\n title: 'Accessing room using this link format is disabled',\n body: ErrorWithSupportLink('You can re-enable this from the developer section in Dashboard.'),\n };\n } else {\n console.error('Token API Error', error);\n return {\n title: 'Error fetching token',\n body: ErrorWithSupportLink(\n 'An error occurred while fetching the app token. Please look into logs for more details.',\n ),\n };\n }\n};\n\nconst Link = styled('a', {\n color: '#2f80e1',\n});\n\nexport const ErrorWithSupportLink = errorMessage => (\n <div>\n {errorMessage} If you think this is a mistake on our side, please create{' '}\n <Link target=\"_blank\" href=\"https://github.com/100mslive/100ms-web/issues\" rel=\"noreferrer\">\n an issue\n </Link>{' '}\n or reach out over{' '}\n <Link target=\"_blank\" href=\"https://discord.com/invite/kGdmszyzq2\" rel=\"noreferrer\">\n Discord\n </Link>\n .\n </div>\n);\n\nexport default AuthToken;\n", "import React, { useContext } from 'react';\n\nexport const HMSPrebuiltContext = React.createContext({\n showPreview: true,\n showLeave: true,\n roomCode: '',\n userName: '',\n userId: '',\n endPoints: {},\n onLeave: undefined,\n});\n\nHMSPrebuiltContext.displayName = 'HMSPrebuiltContext';\n\nexport const useHMSPrebuiltContext = () => {\n const context = useContext(HMSPrebuiltContext);\n if (!context) {\n throw Error('Make sure HMSPrebuiltContext.Provider is present at the top level of your application');\n }\n return context;\n};\n", "import React, { useRef } from 'react';\nimport { CheckIcon, CloudUploadIcon, CrossIcon } from '@100mslive/react-icons';\nimport { Button } from '../../Button';\nimport { Checkbox } from '../../Checkbox';\nimport { HorizontalDivider } from '../../Divider';\nimport { IconButton } from '../../IconButton';\nimport { Input } from '../../Input';\nimport { Label } from '../../Label';\nimport { Box, Flex } from '../../Layout';\nimport { Dialog } from '../../Modal';\nimport { Select } from '../../Select';\nimport { Switch } from '../../Switch';\nimport { Text } from '../../Text';\n\nexport const DialogContent = ({ Icon, title, closeable = true, children, css, iconCSS = {}, ...props }) => {\n return (\n <Dialog.Portal>\n <Dialog.Overlay />\n <Dialog.Content css={{ width: 'min(600px, 100%)', ...css }} {...props}>\n <Dialog.Title>\n <Flex justify=\"between\">\n <Flex align=\"center\" css={{ mb: '$1' }}>\n {Icon ? (\n <Box css={{ mr: '$2', color: '$on_primary_high', ...iconCSS }}>\n <Icon />\n </Box>\n ) : null}\n <Text variant=\"h6\" inline>\n {title}\n </Text>\n </Flex>\n {closeable && <Dialog.DefaultClose data-testid=\"dialoge_cross_icon\" />}\n </Flex>\n </Dialog.Title>\n <HorizontalDivider css={{ mt: '0.8rem' }} />\n <Box>{children}</Box>\n </Dialog.Content>\n </Dialog.Portal>\n );\n};\n\nexport const ErrorDialog = ({ open = true, onOpenChange, title, children, ...props }) => {\n return (\n <Dialog.Root open={open} onOpenChange={onOpenChange}>\n <DialogContent\n Icon={CrossIcon}\n title={title}\n onInteractOutside={e => e.preventDefault()}\n onEscapeKeyDown={e => e.preventDefault()}\n onPointerDownOutside={e => e.preventDefault()}\n closeable={false}\n iconCSS={{ color: '$alert_error_default' }}\n {...props}\n >\n <Box css={{ mt: '$lg' }}>{children}</Box>\n </DialogContent>\n </Dialog.Root>\n );\n};\n\nexport const RequestDialog = ({ open = true, onOpenChange, title, body, actionText = 'Accept', onAction, Icon }) => (\n <Dialog.Root open={open} onOpenChange={onOpenChange}>\n <Dialog.Portal>\n <Dialog.Overlay />\n <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>\n <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md' }}>\n {Icon ? Icon : null}\n <Text variant=\"h6\">{title}</Text>\n </Dialog.Title>\n <Text\n variant=\"md\"\n css={{\n fontWeight: 400,\n mt: '$4',\n mb: '$10',\n c: '$on_surface_medium',\n }}\n >\n {body}\n </Text>\n <Flex justify=\"center\" align=\"center\" css={{ width: '100%', gap: '$md' }}>\n <Box css={{ width: '50%' }}>\n <Dialog.Close css={{ width: '100%' }}>\n <Button variant=\"standard\" outlined css={{ width: '100%' }}>\n Cancel\n </Button>\n </Dialog.Close>\n </Box>\n <Box css={{ width: '50%' }}>\n <Button variant=\"primary\" css={{ width: '100%' }} onClick={onAction}>\n {actionText}\n </Button>\n </Box>\n </Flex>\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n);\n\n/**\n * a row of items which breaks into column on small screen. For e.g. title on left and options to select\n * from on right for select component.\n */\nexport const DialogRow = ({ children, breakSm = false, css, justify = 'between' }) => {\n let finalCSS = {\n margin: '$10 0',\n w: '100%',\n };\n if (breakSm) {\n finalCSS['@sm'] = {\n flexDirection: 'column',\n alignItems: 'flex-start',\n };\n }\n if (css) {\n finalCSS = Object.assign(finalCSS, css);\n }\n return (\n <Flex align=\"center\" justify={justify} css={finalCSS}>\n {children}\n </Flex>\n );\n};\n\nexport const DialogCol = ({ children, breakSm = false, css, align = 'center', justify = 'between', ...props }) => {\n let finalCSS = {\n margin: '$10 0',\n w: '100%',\n };\n if (breakSm) {\n finalCSS['@sm'] = {\n alignItems: 'flex-start',\n };\n }\n if (css) {\n finalCSS = Object.assign(finalCSS, css);\n }\n return (\n <Flex direction=\"column\" align={align} justify={justify} css={finalCSS} {...props}>\n {children}\n </Flex>\n );\n};\n\n/**\n * key field and label field are optional, option is directly used if not passed\n */\nexport const DialogSelect = ({ title, options, keyField, labelField, selected, onChange, ...props }) => {\n return (\n <DialogRow breakSm>\n <Label>{title}</Label>\n <Select.Root data-testid={`dialog_select_${title}`} css={{ width: '70%', '@sm': { width: '100%' } }} {...props}>\n <Select.DefaultDownIcon />\n <Select.Select onChange={e => onChange(e.target.value)} value={selected} css={{ width: '100%' }}>\n {options.map(option => {\n const id = keyField ? option[keyField] : option;\n const label = labelField ? option[labelField] : option;\n return (\n <option value={id} key={id}>\n {label}\n </option>\n );\n })}\n </Select.Select>\n </Select.Root>\n </DialogRow>\n );\n};\n\nexport const DialogInput = ({ title, value, onChange, placeholder, disabled, type, ...props }) => {\n return (\n <DialogRow breakSm>\n <Label>{title}</Label>\n <Input\n css={{ width: '70%', '@sm': { width: '100%' } }}\n value={value}\n onChange={e => onChange(e.target.value)}\n placeholder={placeholder}\n disabled={disabled}\n type={type}\n {...props}\n />\n </DialogRow>\n );\n};\n\nexport const DialogInputFile = ({ value, onChange, placeholder, disabled, type, ...props }) => {\n const inputRef = useRef();\n return (\n <DialogCol\n breakSm\n onClick={() => inputRef.current?.click()}\n css={{\n justifyContent: 'center',\n position: 'relative',\n cursor: 'pointer',\n py: '$12',\n border: '1px dashed $border_bright',\n r: '$1',\n height: 'max(140px, 30%)',\n alignItems: 'center',\n m: '$6 0',\n }}\n gap=\"8\"\n >\n <IconButton\n variant=\"standard\"\n css={{\n border: 'none',\n background: 'none',\n '&:hover': {\n border: 'none',\n background: 'none',\n bg: '$transparent !important',\n },\n }}\n >\n <CloudUploadIcon\n style={{\n width: '3rem',\n height: '3rem',\n }}\n />\n </IconButton>\n <Flex direction=\"row\">\n <Input\n ref={inputRef}\n css={{ width: '70%', '@sm': { width: '100%' } }}\n value={value}\n onChange={e => onChange(e.target)}\n placeholder={placeholder}\n disabled={disabled}\n type={type}\n hidden={true}\n {...props}\n />\n <IconButton\n variant=\"standard\"\n css={{\n background: 'none',\n border: 'none',\n textDecoration: 'underline',\n '&:hover': {\n background: 'none !important',\n border: 'none !important',\n },\n }}\n >\n <Text variant=\"md\">{placeholder}</Text>\n </IconButton>\n </Flex>\n </DialogCol>\n );\n};\n\nexport const DialogSwitch = ({ title, value, onChange, disabled }) => {\n return (\n <DialogRow>\n <Text>{title}</Text>\n <Flex justify=\"end\" css={{ width: '70%' }}>\n <Switch checked={value} disabled={disabled} onCheckedChange={onChange} />\n </Flex>\n </DialogRow>\n );\n};\n\nexport const DialogCheckbox = ({ title, value, onChange, disabled, css, id }) => {\n return (\n <DialogRow css={css}>\n <Label htmlFor={id} css={{ cursor: 'pointer' }}>\n {title}\n </Label>\n <Checkbox.Root checked={value} onCheckedChange={value => onChange(value)} disabled={disabled} id={id}>\n <Checkbox.Indicator>\n <CheckIcon width={16} height={16} />\n </Checkbox.Indicator>\n </Checkbox.Root>\n </DialogRow>\n );\n};\n", "/**\n * @param {RequestInfo} url\n * @param {RequestInit} options\n * @returns {Promise<Response>}\n */\nconst fetchWithRetry = async (url, options) => {\n const MAX_RETRIES = 4;\n let error = Error('something went wrong');\n for (let i = 0; i < MAX_RETRIES; i++) {\n try {\n return await fetch(url, options);\n } catch (err) {\n error = err;\n }\n }\n console.error('Fetch failed after max retries', { url, options });\n throw error;\n};\n\nexport default async function getToken(tokenEndpoint, userId, role, roomId) {\n try {\n const response = await fetchWithRetry(`${tokenEndpoint}api/token`, {\n method: 'POST',\n body: JSON.stringify({\n role,\n room_id: roomId,\n user_id: userId,\n }),\n });\n\n if (!response.ok) {\n let error = new Error('Request failed!');\n error.response = response;\n throw error;\n }\n\n const data = await response.json();\n const { token } = data;\n // response will be sucess and token is null when url is valid but response\n // domain is not present in 100ms\n if (token === null) {\n throw Error(data.msg);\n }\n return token;\n } catch (err) {\n console.error(err);\n throw err;\n }\n}\n", "import React, { Component } from 'react';\nimport { logMessage } from 'zipyai';\nimport { CopyIcon } from '@100mslive/react-icons';\nimport { Button } from '../../Button';\nimport { Box, Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport { Tooltip } from '../../Tooltip';\nimport { ErrorWithSupportLink } from './AuthToken';\n\nexport class ErrorBoundary extends Component {\n constructor(props) {\n super(props);\n this.state = { error: null, errorInfo: null, isErrorCopied: false };\n }\n\n componentDidCatch(error, errorInfo) {\n console.error(`react error boundary - ${error.message}`, error, errorInfo);\n // Catch errors in any components below and re-render with error message\n this.setState(\n {\n error: error?.message,\n errorInfo: errorInfo,\n },\n () => {\n logMessage(`uiError - ${this.state.error} - ${JSON.stringify(this.state.errorInfo)}`);\n },\n );\n }\n\n render() {\n if (this.state.errorInfo) {\n return (\n <Flex\n align=\"center\"\n justify=\"center\"\n css={{\n size: '100%',\n height: '100vh',\n width: '100%',\n color: '$on_primary_high',\n backgroundColor: '$background_default',\n }}\n >\n <Box css={{ position: 'relative', overflow: 'hidden', r: '$3', height: '100%', width: '100%' }}>\n <Flex\n direction=\"column\"\n css={{\n position: 'absolute',\n size: '100%',\n top: '33.33%',\n left: 0,\n }}\n >\n <div style={{ margin: '1.5rem', width: '100%' }}>\n <Text>Something went wrong</Text>\n <Text>Message: ${this.state.error}</Text>\n <br />\n {ErrorWithSupportLink(`Please reload to see if it works.`)}\n </div>\n <Flex>\n <Tooltip title=\"Reload page\">\n <Button\n onClick={() => {\n window.location.reload();\n }}\n css={{ mx: '$8' }}\n data-testid=\"join_again_btn\"\n >\n Reload\n </Button>\n </Tooltip>\n <Tooltip title=\"Copy error details to clipboard\">\n <Button\n onClick={() => {\n const { error, errorInfo } = this.state;\n navigator.clipboard.writeText(\n JSON.stringify({\n error,\n errorInfo,\n }),\n );\n this.setState({ isErrorCopied: true });\n }}\n css={{ mx: '$8' }}\n data-testid=\"join_again_btn\"\n >\n <CopyIcon /> {this.state.isErrorCopied ? 'Copied' : 'Copy Details'}\n </Button>\n </Tooltip>\n </Flex>\n\n <details style={{ whiteSpace: 'pre-wrap', margin: '1.5rem' }}>\n <Text>{this.state.error && this.state.error.toString()}</Text>\n <br />\n <Text>{JSON.stringify(this.state.errorInfo)}</Text>\n </details>\n </Flex>\n </Box>\n </Flex>\n );\n }\n\n return this.props.children;\n }\n}\n", "import React from 'react';\nimport { Flex } from '../../Layout';\nimport { Loading } from '../../Loading';\nimport { Text } from '../../Text';\n\nconst FullPageProgress = ({ loaderColor = '$primary_default', loadingText = '' }) => (\n <Flex direction=\"column\" justify=\"center\" align=\"center\" css={{ size: '100%', color: loaderColor }}>\n <Loading color=\"currentColor\" size={100} />\n {loadingText ? <Text css={{ mt: '$10', color: '$on_surface_high' }}>{loadingText}</Text> : null}\n </Flex>\n);\n\nexport default FullPageProgress;\n", "import React, { useEffect } from 'react';\nimport {\n selectLocalPeerID,\n selectLocalPeerName,\n selectLocalPeerRoleName,\n selectSessionId,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { useTheme } from '../../../';\nimport { setUpZipy } from './initUtils';\nimport { FeatureFlagsInit } from '../../services/FeatureFlags';\n\nconst Init = () => {\n const localPeerID = useHMSStore(selectLocalPeerID);\n const localPeerRole = useHMSStore(selectLocalPeerRoleName);\n const localPeerName = useHMSStore(selectLocalPeerName);\n const sessionId = useHMSStore(selectSessionId);\n const { toggleTheme } = useTheme();\n\n useEffect(() => {\n window.toggleUiTheme = toggleTheme;\n }, [toggleTheme]);\n\n useEffect(() => {\n function resetHeight() {\n // reset the body height to that of the inner browser\n // The window.innerHeight property returns integer values. When the actual height is in decimal, window.innerHeight returns a larger value than the actual value. This can cause a scrollbar to appear on some screens.\n // Hence using window.visualViewport.height which returns a decimal value.\n document.body.style.height = `${window.visualViewport?.height || window.innerHeight}px`;\n }\n // reset the height whenever the window's resized\n window.addEventListener('resize', resetHeight);\n // called to initially set the height.\n resetHeight();\n return () => {\n window.removeEventListener('resize', resetHeight);\n };\n }, []);\n\n useEffect(() => {\n if (localPeerID && localPeerRole && localPeerName) {\n const peerData = {\n localPeer: {\n id: localPeerID,\n name: localPeerName,\n roleName: localPeerRole,\n },\n sessionId,\n };\n setUpZipy(peerData);\n }\n // eslint-disable-next-line\n }, [localPeerID, localPeerName, localPeerRole, sessionId]);\n\n return <FeatureFlagsInit />;\n};\n\nexport { Init };\n", "import { useEffect } from 'react';\nimport {\n selectAppData,\n selectIsLocalAudioEnabled,\n selectIsLocalVideoEnabled,\n useHMSActions,\n useHMSVanillaStore,\n} from '@100mslive/react-sdk';\nimport { APP_DATA, isMacOS } from '../../common/constants';\n\nlet isEvenListenersAttached = false;\nexport class KeyboardInputManager {\n #actions;\n #store;\n constructor(store, actions) {\n this.#actions = actions;\n this.#store = store;\n }\n #toggleAudio = async () => {\n const enabled = this.#store.getState(selectIsLocalAudioEnabled);\n await this.#actions.setLocalAudioEnabled(!enabled);\n };\n\n #toggleVideo = async () => {\n const enabled = this.#store.getState(selectIsLocalVideoEnabled);\n await this.#actions.setLocalVideoEnabled(!enabled);\n };\n\n #hideSidepane = () => {\n if (this.#store.getState(selectAppData(APP_DATA.sidePane))) {\n this.#actions.setAppData(APP_DATA.sidePane, '');\n }\n };\n\n #toggleStatsForNerds = () => {\n const uiSettings = this.#store.getState(selectAppData(APP_DATA.uiSettings));\n const statsEnabled = uiSettings.showStatsOnTiles;\n this.#actions.setAppData(APP_DATA.uiSettings, {\n ...uiSettings,\n showStatsOnTiles: !statsEnabled,\n });\n };\n\n #toggleHlsStats = () => {\n this.#actions.setAppData(APP_DATA.hlsStats, !this.#store.getState(selectAppData(APP_DATA.hlsStats)));\n };\n\n // eslint-disable-next-line complexity\n #keyDownHandler = async e => {\n const CONTROL_KEY = isMacOS ? e.metaKey : e.ctrlKey;\n const D_KEY = e.key === 'd' || e.key === 'D';\n const E_KEY = e.key === 'e' || e.key === 'E';\n const SNF_KEY = e.key === ']' || e.key === '}';\n\n const SHORTCUT_TOGGLE_AUDIO = CONTROL_KEY && D_KEY;\n const SHORTCUT_TOGGLE_VIDEO = CONTROL_KEY && E_KEY;\n const SHORTCUT_SIDEPANE_CLOSE = e.key === 'Escape';\n const SHORTCUT_STATS_FOR_NERDS = CONTROL_KEY && SNF_KEY;\n\n if (SHORTCUT_TOGGLE_AUDIO) {\n e.preventDefault();\n await this.#toggleAudio();\n } else if (SHORTCUT_TOGGLE_VIDEO) {\n e.preventDefault();\n await this.#toggleVideo();\n } else if (SHORTCUT_SIDEPANE_CLOSE) {\n this.#hideSidepane();\n } else if (SHORTCUT_STATS_FOR_NERDS) {\n this.#toggleHlsStats();\n this.#toggleStatsForNerds();\n }\n };\n\n #bind = () => {\n document.addEventListener('keydown', this.#keyDownHandler, false);\n };\n\n #unbind = () => {\n document.removeEventListener('keydown', this.#keyDownHandler, false);\n };\n\n bindAllShortcuts = () => {\n if (!isEvenListenersAttached) {\n this.#bind();\n isEvenListenersAttached = true;\n }\n };\n\n unbindAllShortcuts = () => {\n if (isEvenListenersAttached) {\n this.#unbind();\n isEvenListenersAttached = false;\n }\n };\n}\n\nexport const KeyboardHandler = () => {\n const store = useHMSVanillaStore();\n const actions = useHMSActions();\n\n useEffect(() => {\n const keyboardManager = new KeyboardInputManager(store, actions);\n keyboardManager.bindAllShortcuts();\n return keyboardManager.unbindAllShortcuts;\n }, [actions, store]);\n return null;\n};\n", "export { Notifications } from './Notifications';\n", "/* eslint-disable no-case-declarations */\nimport React, { useEffect } from 'react';\nimport { logMessage } from 'zipyai';\nimport { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';\nimport { Button } from '../../../';\nimport { ToastBatcher } from '../Toast/ToastBatcher';\nimport { ToastManager } from '../Toast/ToastManager';\nimport { AutoplayBlockedModal } from './AutoplayBlockedModal';\nimport { InitErrorModal } from './InitErrorModal';\nimport { MessageNotifications } from './MessageNotifications';\nimport { PeerNotifications } from './PeerNotifications';\nimport { PermissionErrorModal } from './PermissionErrorModal';\nimport { ReconnectNotifications } from './ReconnectNotifications';\nimport { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';\nimport { TrackNotifications } from './TrackNotifications';\nimport { TrackUnmuteModal } from './TrackUnmuteModal';\nimport { useHLSViewerRole, useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';\nimport { useNavigation } from '../hooks/useNavigation';\nimport { getMetadata } from '../../common/utils';\n\nexport function Notifications() {\n const notification = useHMSNotifications();\n const navigate = useNavigation();\n const HLS_VIEWER_ROLE = useHLSViewerRole();\n const subscribedNotifications = useSubscribedNotifications() || {};\n const isHeadless = useIsHeadless();\n\n useEffect(() => {\n if (!notification) {\n return;\n }\n switch (notification.type) {\n case HMSNotificationTypes.METADATA_UPDATED:\n // Don't toast message when metadata is updated and raiseHand is false.\n // Don't toast message in case of local peer.\n const metadata = getMetadata(notification.data?.metadata);\n if (!metadata?.isHandRaised || notification.data.isLocal || isHeadless) return;\n\n console.debug('Metadata updated', notification.data);\n if (!subscribedNotifications.METADATA_UPDATED) return;\n ToastBatcher.showToast({ notification });\n break;\n case HMSNotificationTypes.NAME_UPDATED:\n console.log(notification.data.id + ' changed their name to ' + notification.data.name);\n break;\n case HMSNotificationTypes.ERROR:\n if (notification.data?.isTerminal && notification.data?.action !== 'INIT') {\n if ([500, 6008].includes(notification.data?.code)) {\n ToastManager.addToast({\n title: `Error: ${notification.data?.message}`,\n });\n } else {\n logMessage('Disconnected');\n // show button action when the error is terminal\n const toastId = ToastManager.addToast({\n title:\n notification.data?.message ||\n 'We couldn\u2019t reconnect you. When you\u2019re back online, try joining the room.',\n inlineAction: true,\n action: (\n <Button\n onClick={() => {\n ToastManager.removeToast(toastId);\n window.location.reload();\n }}\n >\n Rejoin\n </Button>\n ),\n close: false,\n });\n }\n // goto leave for terminal if any action is not performed within 2secs\n // if network is still unavailable going to preview will throw an error\n setTimeout(() => {\n const previewLocation = window.location.pathname.replace('meeting', 'leave');\n ToastManager.clearAllToast();\n navigate(previewLocation);\n }, 2000);\n return;\n }\n // Autoplay error or user denied screen share (cancelled browser pop-up)\n if (notification.data?.code === 3008 || notification.data?.code === 3001 || notification.data?.code === 3011) {\n return;\n }\n if (notification.data?.action === 'INIT') {\n return;\n }\n if (!subscribedNotifications.ERROR) return;\n ToastManager.addToast({\n title: `Error: ${notification.data?.message} - ${notification.data?.description}`,\n });\n break;\n case HMSNotificationTypes.ROLE_UPDATED:\n if (notification.data.roleName === HLS_VIEWER_ROLE) {\n return;\n }\n if (notification.data?.isLocal) {\n ToastManager.addToast({\n title: `You are now a ${notification.data.roleName}`,\n });\n }\n break;\n case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:\n const track = notification.data?.track;\n if (!notification.data.enabled) {\n ToastManager.addToast({\n title: `Your ${track.source} ${track.type} was muted by\n ${notification.data.requestedBy?.name}.`,\n });\n }\n break;\n case HMSNotificationTypes.REMOVED_FROM_ROOM:\n case HMSNotificationTypes.ROOM_ENDED:\n ToastManager.addToast({\n title: `${notification.message}. \n ${notification.data.reason && `Reason: ${notification.data.reason}`}`,\n });\n setTimeout(() => {\n const leaveLocation = window.location.pathname.replace('meeting', 'leave');\n navigate(leaveLocation);\n ToastManager.clearAllToast();\n }, 2000);\n break;\n case HMSNotificationTypes.DEVICE_CHANGE_UPDATE:\n ToastManager.addToast({\n title: notification.message,\n });\n break;\n default:\n break;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED, HLS_VIEWER_ROLE]);\n\n return (\n <>\n {!isHeadless && <TrackUnmuteModal />}\n {!isHeadless && <TrackBulkUnmuteModal />}\n <TrackNotifications />\n <PeerNotifications />\n <ReconnectNotifications />\n <AutoplayBlockedModal />\n <PermissionErrorModal />\n <MessageNotifications />\n <InitErrorModal notification={notification} />\n </>\n );\n}\n", "import { ToastConfig } from './ToastConfig';\nimport { ToastManager } from './ToastManager';\n\nexport const ToastBatcher = {\n toastsType: new Map(),\n showToastInternal({ notification, duration, type }) {\n let notificationType = type;\n if (!type) {\n notificationType = notification.type;\n }\n const toastType = this.toastsType.has(notificationType);\n if (toastType) {\n let { notifications } = this.toastsType.get(notificationType);\n const { id } = this.toastsType.get(notificationType);\n notifications.push(notification);\n const toastObject = ToastConfig[notificationType].multiple(notifications);\n const toastId = ToastManager.replaceToast(id, {\n ...toastObject,\n duration: duration,\n });\n this.toastsType.set(notificationType, {\n id: toastId,\n notifications: notifications,\n duration: duration,\n });\n } else {\n const toastObject = ToastConfig[notificationType].single(notification);\n const toastId = ToastManager.addToast({\n ...toastObject,\n duration: duration,\n });\n let notifications = [];\n notifications.push(notification);\n this.toastsType.set(notificationType, {\n id: toastId,\n notifications: [...notifications],\n duration: duration,\n });\n }\n },\n showToast({ notification, duration = 3000, type }) {\n try {\n this.showToastInternal({ notification, duration, type });\n } catch (err) {\n console.debug('Notifications', err);\n }\n },\n syncUItoast(toastsDisplaying) {\n for (const [toastType, toastInfo] of this.toastsType.entries()) {\n if (!toastsDisplaying.find(toast => toast.id === toastInfo.id)) {\n this.toastsType.delete(toastType);\n }\n }\n },\n};\n\nToastManager.addListener(ToastBatcher.syncUItoast.bind(ToastBatcher));\n", "import React from 'react';\nimport { ChatIcon, ConnectivityIcon, HandIcon, PersonIcon, PoorConnectivityIcon } from '@100mslive/react-icons';\nimport { Button } from '../../../Button';\nimport { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';\nimport { SIDE_PANE_OPTIONS } from '../../common/constants';\n\nconst ChatAction = React.forwardRef((_, ref) => {\n const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);\n const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);\n\n if (isChatOpen) {\n return null;\n }\n\n return (\n <Button outlined as=\"div\" variant=\"standard\" css={{ w: 'max-content' }} onClick={toggleChat} ref={ref}>\n Open Chat\n </Button>\n );\n});\nexport const ToastConfig = {\n PEER_LIST: {\n single: function (notification) {\n if (notification.data.length === 1) {\n return {\n title: `${notification.data[0]?.name} joined`,\n icon: <PersonIcon />,\n };\n }\n return {\n title: `${notification.data[notification.data.length - 1]?.name} and ${\n notification.data.length - 1\n } others joined`,\n icon: <PersonIcon />,\n };\n },\n multiple: notifications => {\n return {\n title: `${notifications[0].data.name} and ${notifications.length - 1} others joined`,\n icon: <PersonIcon />,\n };\n },\n },\n PEER_JOINED: {\n single: function (notification) {\n return {\n title: `${notification.data?.name} joined`,\n icon: <PersonIcon />,\n };\n },\n multiple: function (notifications) {\n return {\n title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others joined`,\n icon: <PersonIcon />,\n };\n },\n },\n PEER_LEFT: {\n single: function (notification) {\n return {\n title: `${notification.data?.name} left`,\n icon: <PersonIcon />,\n };\n },\n multiple: function (notifications) {\n return {\n title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others left`,\n icon: <PersonIcon />,\n };\n },\n },\n METADATA_UPDATED: {\n single: notification => {\n return {\n title: `${notification.data?.name} raised hand`,\n icon: <HandIcon />,\n };\n },\n multiple: notifications => {\n return {\n title: `${notifications[notifications.length - 1].data?.name} and ${\n notifications.length - 1\n } others raised hand`,\n icon: <HandIcon />,\n };\n },\n },\n NEW_MESSAGE: {\n single: notification => {\n return {\n title: `New message from ${notification.data?.senderName}`,\n icon: <ChatIcon />,\n action: <ChatAction />,\n };\n },\n multiple: notifications => {\n return {\n title: `${notifications.length} new messages`,\n icon: <ChatIcon />,\n action: <ChatAction />,\n };\n },\n },\n RECONNECTED: {\n single: () => {\n return {\n title: `You are now connected`,\n icon: <ConnectivityIcon />,\n variant: 'success',\n duration: 3000,\n };\n },\n },\n RECONNECTING: {\n single: message => {\n return {\n title: `You are offline for now. while we try to reconnect, please check\n your internet connection. ${message}.\n `,\n icon: <PoorConnectivityIcon />,\n variant: 'warning',\n duration: 30000,\n };\n },\n },\n};\n", "import { v4 } from 'uuid';\n\nexport const ToastManager = {\n toasts: new Map(),\n listeners: new Map(),\n addToast(toast) {\n const id = toast.id ? toast.id : v4();\n this.toasts.set(id, { ...toast, id });\n this.onChange();\n return id;\n },\n\n clearAllToast() {\n this.toasts.clear();\n this.onChange();\n },\n\n removeToast(id) {\n this.toasts.delete(id);\n this.onChange();\n },\n replaceToast(id, toast) {\n if (this.isActive(id)) {\n this.toasts.set(id, { ...this.toasts.get(id), ...toast });\n this.onChange();\n return id;\n } else {\n return this.addToast(toast);\n }\n },\n addListener(cb) {\n this.listeners.set(cb, cb);\n },\n removeListener(cb) {\n this.listeners.delete(cb);\n },\n isActive(id) {\n return this.toasts.has(id);\n },\n onChange() {\n const toasts = Array.from(this.toasts.values());\n this.listeners.forEach(listener => listener(toasts));\n },\n};\n", "import React from 'react';\nimport { useAutoplayError } from '@100mslive/react-sdk';\nimport { Button, Dialog, Text } from '../../../';\nimport { DialogContent, DialogRow } from '../../primitives/DialogContent';\n\nexport function AutoplayBlockedModal() {\n const { error, resetError, unblockAudio } = useAutoplayError();\n return (\n <Dialog.Root\n open={!!error}\n onOpenChange={value => {\n if (!value) {\n unblockAudio();\n }\n resetError();\n }}\n >\n <DialogContent title=\"Permission Error\" closeable={false}>\n <DialogRow>\n <Text variant=\"md\">\n The browser wants us to get a confirmation for playing the Audio. Please allow audio to proceed.\n </Text>\n </DialogRow>\n <DialogRow justify=\"end\">\n <Button\n variant=\"primary\"\n onClick={() => {\n unblockAudio();\n resetError();\n }}\n >\n Allow Audio\n </Button>\n </DialogRow>\n </DialogContent>\n </Dialog.Root>\n );\n}\n", "import React, { useEffect, useState } from 'react';\nimport { Text } from '../../../';\nimport { ErrorDialog } from '../../primitives/DialogContent';\n\nexport const InitErrorModal = ({ notification }) => {\n const [showModal, setShowModal] = useState(false);\n const [info, setInfo] = useState({ title: 'Init Error', description: '' });\n\n useEffect(() => {\n const data = notification?.data;\n if (!data || data.action !== 'INIT') {\n return;\n }\n let description;\n let title;\n if (data.description.includes('role is invalid')) {\n description = 'This role does not exist for the given room. Try again with a valid role.';\n title = 'Invalid Role';\n } else if (data.description.includes('room is not active')) {\n title = 'Room is disabled';\n description =\n 'This room is disabled and cannot be joined. To enable the room, use the 100ms dashboard or the API.';\n } else {\n description = data.description;\n title = 'Init Error';\n }\n setInfo({ title, description });\n setShowModal(true);\n }, [notification]);\n\n return (\n <ErrorDialog open={showModal} onOpenChange={setShowModal} title={info.title}>\n <Text variant=\"sm\" css={{ wordBreak: 'break-word' }}>\n {info.description} <br />\n Current URL - {window.location.href}\n </Text>\n </ErrorDialog>\n );\n};\n", "import { useEffect } from 'react';\nimport { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';\nimport { ToastBatcher } from '../Toast/ToastBatcher';\nimport { useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';\nimport { useIsFeatureEnabled } from '../hooks/useFeatures';\nimport { FEATURE_LIST, SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';\n\nexport const MessageNotifications = () => {\n const notification = useHMSNotifications(HMSNotificationTypes.NEW_MESSAGE);\n const isChatEnabled = useIsFeatureEnabled(FEATURE_LIST.CHAT);\n const isNewMessageSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.NEW_MESSAGE);\n const isHeadless = useIsHeadless();\n useEffect(() => {\n if (!notification) {\n return;\n }\n console.debug(`[${notification.type}]`, notification);\n if (!isNewMessageSubscribed || notification.data?.ignored || !isChatEnabled) {\n return;\n }\n ToastBatcher.showToast({ notification });\n }, [notification, isNewMessageSubscribed, isHeadless, isChatEnabled]);\n\n return null;\n};\n", "import { useEffect } from 'react';\nimport { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';\nimport { ToastBatcher } from '../Toast/ToastBatcher';\nimport { useSubscribedNotifications } from '../AppData/useUISettings';\nimport { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';\n\nconst notificationTypes = [\n HMSNotificationTypes.PEER_LIST,\n HMSNotificationTypes.PEER_JOINED,\n HMSNotificationTypes.PEER_LEFT,\n];\n\nexport const PeerNotifications = () => {\n const notification = useHMSNotifications(notificationTypes);\n const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);\n const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);\n useEffect(() => {\n if (!notification) {\n return;\n }\n console.debug(`[${notification.type}]`, notification);\n switch (notification.type) {\n case HMSNotificationTypes.PEER_LIST:\n if (!isPeerJoinSubscribed || notification.data?.length === 0) {\n return;\n }\n break;\n case HMSNotificationTypes.PEER_JOINED:\n if (!isPeerJoinSubscribed) {\n return;\n }\n break;\n case HMSNotificationTypes.PEER_LEFT:\n if (!isPeerLeftSubscribed) {\n return;\n }\n break;\n default:\n return;\n }\n ToastBatcher.showToast({ notification });\n }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);\n\n return null;\n};\n", "import React, { useEffect, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';\nimport { Button, config as cssConfig, Dialog, Flex, Text } from '../../../';\nimport androidPermissions from '../../../assets/android-perm-0.png';\nimport androidPermissionAlert from '../../../assets/android-perm-1.png';\nimport iosPermissions from '../../../assets/ios-perm-0.png';\nimport { isAndroid, isIOS } from '../../common/constants';\n\nexport function PermissionErrorModal() {\n const notification = useHMSNotifications(HMSNotificationTypes.ERROR);\n const [deviceType, setDeviceType] = useState('');\n const [isSystemError, setIsSystemError] = useState(false);\n const [showAndroidPrompt, setShowAndroidPrompt] = useState(true);\n const isMobile = useMedia(cssConfig.media.md);\n\n useEffect(() => {\n if (showAndroidPrompt && isAndroid && isMobile) {\n setDeviceType('camera and microphone');\n }\n }, []);\n\n useEffect(() => {\n if (\n !notification ||\n (notification.data?.code !== 3001 && notification.data?.code !== 3011) ||\n (notification.data?.code === 3001 && notification.data?.message.includes('screen'))\n ) {\n return;\n }\n console.error(`[${notification.type}]`, notification);\n const errorMessage = notification.data?.message;\n const hasAudio = errorMessage.includes('audio');\n const hasVideo = errorMessage.includes('video');\n const hasScreen = errorMessage.includes('screen');\n if (hasAudio && hasVideo) {\n setDeviceType('camera and microphone');\n } else if (hasAudio) {\n setDeviceType('microphone');\n } else if (hasVideo) {\n setDeviceType('camera');\n } else if (hasScreen) {\n setDeviceType('screen');\n }\n setIsSystemError(notification.data.code === 3011);\n }, [notification]);\n\n return deviceType ? (\n <Dialog.Root open={!!deviceType}>\n <Dialog.Portal>\n <Dialog.Overlay />\n <Dialog.Content css={{ w: 'min(380px, 90%)', p: '$8' }}>\n <Dialog.Title\n css={{\n borderBottom: '1px solid $border_default',\n }}\n >\n {isMobile && isIOS ? <img style={{ maxWidth: '100%', maxHeight: '100%' }} src={iosPermissions} /> : null}\n\n {/* Images for android */}\n {isMobile && isAndroid ? (\n showAndroidPrompt ? (\n <img src={androidPermissions} style={{ maxWidth: '100%', maxHeight: '100%' }} />\n ) : (\n <img src={androidPermissionAlert} style={{ maxWidth: '100%', maxHeight: '100%' }} />\n )\n ) : null}\n\n <Text variant=\"h6\">\n {showAndroidPrompt ? `Allow access to your ${deviceType}` : `We can't access your ${deviceType}`}\n </Text>\n </Dialog.Title>\n\n <Text variant=\"sm\" css={{ pt: '$4', pb: '$10', color: '$on_surface_medium' }}>\n {/* IOS prompt text */}\n {isMobile && isIOS\n ? 'Enable permissions by reloading this page and clicking \u201CAllow\u201D on the pop-up, or change settings from the address bar.'\n : null}\n\n {/* Initial prompt for android devices */}\n {isMobile && showAndroidPrompt && isAndroid\n ? 'In order for others to see and hear you, your browser will request camera and microphone access.'\n : null}\n\n {/* Successive prompts for android devices */}\n {isMobile && !showAndroidPrompt && isAndroid\n ? 'To allow other users to see and hear you, click the blocked camera icon in your browser\u2019s address bar.'\n : null}\n\n {/* Prompt for desktops */}\n {!isMobile ? `Access to ${deviceType} is required. ` : null}\n\n {isSystemError && !isMobile\n ? `Enable permissions for ${deviceType}${deviceType === 'screen' ? 'share' : ''} from sytem settings`\n : null}\n {!isSystemError && !isMobile\n ? `Enable permissions for ${deviceType}${\n deviceType === 'screen' ? 'share' : ''\n } from address bar or browser settings.`\n : null}\n </Text>\n\n {/* CTA section */}\n {isMobile && isIOS ? (\n <>\n <Button onClick={() => window.location.reload()} css={{ w: '100%', mb: '$6' }}>\n Reload\n </Button>\n <Button outlined variant=\"standard\" onClick={() => setDeviceType('')} css={{ w: '100%' }}>\n Continue anyway\n </Button>\n </>\n ) : null}\n\n {isMobile && isAndroid ? (\n showAndroidPrompt ? (\n <Button\n css={{ w: '100%' }}\n onClick={() => {\n setDeviceType('');\n setShowAndroidPrompt(false);\n }}\n >\n Continue\n </Button>\n ) : (\n <>\n <Button onClick={() => setDeviceType('')} css={{ w: '100%', mb: '$6' }}>\n I've allowed access\n </Button>\n <Button outlined variant=\"standard\" onClick={() => setDeviceType('')} css={{ w: '100%' }}>\n Continue anyway\n </Button>\n </>\n )\n ) : null}\n\n {!isMobile ? (\n <Flex justify=\"end\" css={{ w: '100%' }}>\n <Button outlined variant=\"standard\" onClick={() => setDeviceType('')}>\n Dismiss\n </Button>\n </Flex>\n ) : null}\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n ) : null;\n}\n", "import React, { useEffect, useState } from 'react';\nimport { logMessage } from 'zipyai';\nimport { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';\nimport { Dialog, Flex, Loading, Text } from '../../../';\nimport { ToastConfig } from '../Toast/ToastConfig';\nimport { ToastManager } from '../Toast/ToastManager';\n\nconst notificationTypes = [\n HMSNotificationTypes.RECONNECTED,\n HMSNotificationTypes.RECONNECTING,\n HMSNotificationTypes.ERROR,\n];\nlet notificationId = null;\n\nconst isQA = process.env.REACT_APP_ENV === 'qa';\nexport const ReconnectNotifications = () => {\n const notification = useHMSNotifications(notificationTypes);\n const [open, setOpen] = useState(false);\n useEffect(() => {\n if (notification?.type === HMSNotificationTypes.ERROR && notification?.data?.isTerminal) {\n logMessage('Error ', notification.data?.description);\n setOpen(false);\n } else if (notification?.type === HMSNotificationTypes.RECONNECTED) {\n logMessage('Reconnected');\n notificationId = ToastManager.replaceToast(notificationId, ToastConfig.RECONNECTED.single());\n setOpen(false);\n } else if (notification?.type === HMSNotificationTypes.RECONNECTING) {\n logMessage('Reconnecting');\n if (isQA) {\n ToastManager.removeToast(notificationId);\n setOpen(true);\n } else {\n notificationId = ToastManager.replaceToast(\n notificationId,\n ToastConfig.RECONNECTING.single(notification.data.message),\n );\n }\n }\n }, [notification]);\n if (!open || !isQA) return null;\n return (\n <Dialog.Root open={open} modal={true}>\n <Dialog.Portal container={document.getElementById('conferencing')}>\n <Dialog.Overlay />\n <Dialog.Content\n css={{\n width: 'fit-content',\n maxWidth: '80%',\n p: '$4 $8',\n position: 'relative',\n top: 'unset',\n bottom: '$9',\n transform: 'translate(-50%, -100%)',\n animation: 'none !important',\n }}\n >\n <Flex align=\"center\">\n <div style={{ display: 'inline', margin: '0.25rem' }}>\n <Loading size={16} />\n </div>\n <Text css={{ fontSize: '$space$8', color: '$on_surface_high' }}>\n You lost your network connection. Trying to reconnect.\n </Text>\n </Flex>\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n );\n};\n", "import React, { useEffect, useState } from 'react';\nimport { HMSNotificationTypes, useHMSActions, useHMSNotifications } from '@100mslive/react-sdk';\nimport { MicOnIcon } from '@100mslive/react-icons';\nimport { RequestDialog } from '../../primitives/DialogContent';\n\nexport const TrackBulkUnmuteModal = () => {\n const hmsActions = useHMSActions();\n const [muteNotification, setMuteNotification] = useState(null);\n const notification = useHMSNotifications([\n HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST,\n HMSNotificationTypes.ROOM_ENDED,\n HMSNotificationTypes.REMOVED_FROM_ROOM,\n ]);\n\n useEffect(() => {\n switch (notification?.type) {\n case HMSNotificationTypes.REMOVED_FROM_ROOM:\n case HMSNotificationTypes.ROOM_ENDED:\n setMuteNotification(null);\n break;\n case HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST:\n if (notification?.data.enabled) {\n setMuteNotification(notification.data);\n }\n break;\n default:\n return;\n }\n }, [notification]);\n\n if (!muteNotification) {\n return null;\n }\n\n const { requestedBy: peer, tracks, enabled } = muteNotification;\n\n return (\n <RequestDialog\n title=\"Track Unmute Request\"\n body={`${peer?.name} has requested you to unmute your tracks.`}\n onOpenChange={value => !value && setMuteNotification(null)}\n onAction={() => {\n tracks.forEach(track => {\n hmsActions.setEnabledTrack(track.id, enabled);\n });\n setMuteNotification(null);\n }}\n Icon={MicOnIcon}\n />\n );\n};\n", "import { useEffect } from 'react';\nimport { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';\n\nconst notificationTypes = [\n HMSNotificationTypes.TRACK_ADDED,\n HMSNotificationTypes.TRACK_REMOVED,\n HMSNotificationTypes.TRACK_MUTED,\n HMSNotificationTypes.TRACK_UNMUTED,\n];\nexport const TrackNotifications = () => {\n const notification = useHMSNotifications(notificationTypes);\n useEffect(() => {\n if (notification) {\n console.debug(`[${notification.type}]`, notification);\n }\n }, [notification]);\n\n return null;\n};\n", "import React, { useEffect, useState } from 'react';\nimport { HMSNotificationTypes, useHMSActions, useHMSNotifications } from '@100mslive/react-sdk';\nimport { MicOnIcon } from '@100mslive/react-icons';\nimport { RequestDialog } from '../../primitives/DialogContent';\n\nexport const TrackUnmuteModal = () => {\n const hmsActions = useHMSActions();\n const notification = useHMSNotifications([\n HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,\n HMSNotificationTypes.ROOM_ENDED,\n HMSNotificationTypes.REMOVED_FROM_ROOM,\n ]);\n const [muteNotification, setMuteNotification] = useState(null);\n\n useEffect(() => {\n switch (notification?.type) {\n case HMSNotificationTypes.REMOVED_FROM_ROOM:\n case HMSNotificationTypes.ROOM_ENDED:\n setMuteNotification(null);\n break;\n case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:\n if (notification?.data.enabled) {\n setMuteNotification(notification.data);\n }\n break;\n default:\n return;\n }\n }, [notification]);\n\n if (!muteNotification) {\n return null;\n }\n\n const { requestedBy: peer, track, enabled } = muteNotification;\n\n return (\n <RequestDialog\n title=\"Track Unmute Request\"\n onOpenChange={value => !value && setMuteNotification(null)}\n body={`${peer?.name} has requested you to unmute your ${track?.source} ${track?.type}.`}\n onAction={() => {\n hmsActions.setEnabledTrack(track.id, enabled);\n setMuteNotification(null);\n }}\n Icon={MicOnIcon}\n />\n );\n};\n", "import { useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { getRoutePrefix } from '../../common/utils';\n\nexport const useNavigation = () => {\n const navigate = useNavigate();\n const navigation = useCallback(\n path => {\n const prefix = getRoutePrefix();\n let route = path;\n if (prefix && !path.startsWith(prefix)) {\n route = `${prefix}${path}`;\n }\n navigate(route);\n },\n [navigate],\n );\n return navigation;\n};\n", "import React from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ExitIcon } from '@100mslive/react-icons';\nimport { ToastManager } from './Toast/ToastManager';\nimport { Button } from '../../Button';\nimport { Box, Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport { useHMSPrebuiltContext } from '../AppContext';\nimport { Header } from './Header';\nimport { useNavigation } from './hooks/useNavigation';\nimport { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from './hooks/useUserPreferences';\nimport { getRoutePrefix } from '../common/utils';\nimport { textEllipsis } from '../../utils';\n\nconst PostLeave = () => {\n const navigate = useNavigation();\n const { showPreview, roomCode } = useHMSPrebuiltContext();\n const { roomId, role } = useParams();\n const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);\n return (\n <Flex direction=\"column\" css={{ size: '100%' }}>\n <Box css={{ h: '$18', '@md': { h: '$17' } }} data-testid=\"header\">\n <Header />\n </Box>\n <Flex\n justify=\"center\"\n direction=\"column\"\n align=\"center\"\n css={{ bg: '$background_dim', flex: '1 1 0', position: 'relative' }}\n >\n <Text variant=\"h2\" css={{ fontWeight: '$semiBold' }}>\n \uD83D\uDC4B\n </Text>\n <Text variant=\"h4\" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mt: '$12' }}>\n You left the {getRoutePrefix() ? 'stream' : 'room'}\n </Text>\n <Text\n variant=\"body1\"\n css={{\n color: '$on_surface_medium',\n mt: '$8',\n fontWeight: '$regular',\n textAlign: 'center',\n }}\n >\n Have a nice day\n {previewPreference.name && (\n <Box as=\"span\" css={{ ...textEllipsis(100) }}>\n , {previewPreference.name}\n </Box>\n )}\n !\n </Text>\n <Flex css={{ mt: '$14', gap: '$10', alignItems: 'center' }}>\n <Text variant=\"body1\" css={{ color: '$on_surface_medium', fontWeight: '$regular' }}>\n Left by mistake?\n </Text>\n <Button\n onClick={() => {\n let redirectUrl = `${showPreview ? '/preview/' : '/meeting/'}${roomCode || roomId}`;\n if (role && roomId) redirectUrl += '/' + role;\n navigate(redirectUrl);\n ToastManager.clearAllToast();\n }}\n data-testid=\"join_again_btn\"\n >\n <ExitIcon />\n <Text css={{ ml: '$3', fontWeight: '$semiBold', color: 'inherit' }}>Rejoin</Text>\n </Button>\n </Flex>\n </Flex>\n </Flex>\n );\n};\n\nexport default PostLeave;\n", "export { Header } from './Header';\n", "import React from 'react';\nimport { ConferencingHeader } from './ConferencingHeader';\nimport { StreamingHeader } from './StreamingHeader';\nimport { isStreamingKit } from '../../common/utils';\n\nexport const Header = () => {\n return isStreamingKit() ? <StreamingHeader /> : <ConferencingHeader />;\n};\n", "import React from 'react';\nimport { Flex } from '../../../';\nimport { SpeakerTag } from './HeaderComponents';\nimport { ParticipantCount } from './ParticipantList';\nimport { StreamActions } from './StreamActions';\n\nexport const ConferencingHeader = () => {\n return (\n <Flex justify=\"between\" align=\"center\" css={{ position: 'relative', height: '100%' }}>\n <Flex align=\"center\" css={{ position: 'absolute', left: '$10' }}>\n <SpeakerTag />\n </Flex>\n\n <Flex\n align=\"center\"\n css={{\n position: 'absolute',\n right: '$10',\n gap: '$4',\n }}\n >\n <StreamActions />\n <ParticipantCount />\n </Flex>\n </Flex>\n );\n};\n", "import React from 'react';\nimport { useMedia } from 'react-use';\nimport { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';\nimport { VolumeOneIcon } from '@100mslive/react-icons';\nimport { config as cssConfig, Flex, styled, Text, textEllipsis } from '../../../';\nimport { useRoomLayout } from '../../provider/roomLayoutProvider';\nimport { isStreamingKit } from '../../common/utils';\n\nexport const SpeakerTag = () => {\n const dominantSpeaker = useHMSStore(selectDominantSpeaker);\n return dominantSpeaker && dominantSpeaker.name ? (\n <Flex\n align=\"center\"\n justify=\"center\"\n css={{ flex: '1 1 0', color: '$on_primary_high', '@md': { display: 'none' } }}\n >\n <VolumeOneIcon />\n <Text variant=\"md\" css={{ ...textEllipsis(200), ml: '$2' }} title={dominantSpeaker.name}>\n {dominantSpeaker.name}\n </Text>\n </Flex>\n ) : (\n <></>\n );\n};\n\nconst LogoImg = styled('img', {\n maxHeight: '$14',\n w: 'auto',\n objectFit: 'contain',\n '@md': {\n maxHeight: '$12',\n },\n});\n\nexport const Logo = () => {\n const roomLayout = useRoomLayout();\n const logo = roomLayout?.logo?.url;\n const isMobile = useMedia(cssConfig.media.md);\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n // Hide logo for now as there is not enough space\n if (isConnected && isMobile && isStreamingKit()) {\n return null;\n }\n return logo ? <LogoImg src={logo} alt=\"Brand Logo\" /> : null;\n};\n", "import React from 'react';\nimport type { Layout } from '@100mslive/types-prebuilt';\nimport merge from 'lodash.merge';\n// @ts-ignore: fix types\nimport { useAuthToken } from '../../components/AppData/useUISettings';\nimport { useFetchRoomLayout } from './hooks/useFetchRoomLayout';\n\nexport type RoomLayoutProviderProps = {\n roomLayoutEndpoint?: string;\n overrideLayout?: Layout;\n};\n\nexport const RoomLayoutContext = React.createContext<Layout | undefined>(undefined);\n\nexport const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProviderProps>> = ({\n children,\n roomLayoutEndpoint,\n overrideLayout,\n}) => {\n const authToken: string = useAuthToken();\n let { layout } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });\n layout = merge(layout, overrideLayout);\n return <RoomLayoutContext.Provider value={layout}>{children}</RoomLayoutContext.Provider>;\n};\n\nexport const useRoomLayout = (): Layout | undefined => React.useContext(RoomLayoutContext);\n", "import { useEffect, useRef, useState } from 'react';\nimport type { GetResponse, Layout } from '@100mslive/types-prebuilt';\nimport { defaultLayout } from '../constants';\n\n// TODO: remove this usage\nconst fetchWithRetry = async (url = '', options = {}) => {\n const MAX_RETRIES = 4;\n let error = Error('something went wrong');\n for (let i = 0; i < MAX_RETRIES; i++) {\n try {\n return await fetch(url, options);\n } catch (err) {\n error = err as Error;\n }\n }\n console.error('Fetch failed after max retries', { url, options });\n throw error;\n};\n\n// this should take endpoint and return\nexport type useFetchRoomLayoutProps = {\n endpoint?: string;\n authToken: string;\n};\n\nexport type useFetchRoomLayoutResponse = {\n layout: Layout | undefined;\n};\n\nexport const useFetchRoomLayout = ({\n endpoint = '',\n authToken = '',\n}: useFetchRoomLayoutProps): useFetchRoomLayoutResponse => {\n const [layout, setLayout] = useState<Layout | undefined>(undefined);\n const isFetchInProgress = useRef(false);\n useEffect(() => {\n (async () => {\n if (isFetchInProgress.current || !authToken) {\n return;\n }\n if (!endpoint) {\n setLayout(defaultLayout);\n }\n isFetchInProgress.current = true;\n const resp = await fetchWithRetry(endpoint, {\n headers: {\n Authorization: `Bearer ${authToken}`,\n },\n });\n const layoutResp: GetResponse = await resp.json();\n setLayout(layoutResp.data[0]);\n isFetchInProgress.current = false;\n })();\n }, [authToken, endpoint]);\n\n return { layout };\n};\n", "import type { Layout } from '@100mslive/types-prebuilt';\nimport { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';\n\nexport const defaultLayout: Layout = {\n id: '',\n role_id: '',\n template_id: '',\n app_id: '',\n typography: {\n font_family: 'Inter',\n },\n themes: [],\n options: {},\n screens: {\n preview: {\n default: {\n elements: {\n preview_header: {\n title: 'Get Started',\n sub_title: 'Setup your audio and video before joining',\n },\n join_form: {\n join_btn_type: JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE,\n join_btn_label: 'Join Now',\n go_live_btn_label: 'Go Live',\n },\n },\n },\n },\n conferencing: {},\n leave: {},\n },\n};\n", "import React, { Fragment, useCallback, useEffect, useState } from 'react';\nimport { useDebounce, useMeasure } from 'react-use';\nimport { FixedSizeList } from 'react-window';\nimport {\n selectAudioTrackByPeerID,\n selectLocalPeerID,\n selectPeerCount,\n selectPeerMetadata,\n selectPermissions,\n useHMSActions,\n useHMSStore,\n useParticipants,\n} from '@100mslive/react-sdk';\nimport {\n ChangeRoleIcon,\n CrossIcon,\n HandRaiseIcon,\n PeopleIcon,\n RemoveUserIcon,\n SearchIcon,\n SpeakerIcon,\n VerticalMenuIcon,\n} from '@100mslive/react-icons';\nimport { Avatar, Box, Dropdown, Flex, Input, Slider, Text, textEllipsis } from '../../../';\nimport IconButton from '../../IconButton';\nimport { ConnectionIndicator } from '../Connection/ConnectionIndicator';\nimport { RoleChangeModal } from '../RoleChangeModal';\nimport { ParticipantFilter } from './ParticipantFilter';\nimport { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';\nimport { isInternalRole } from '../../common/utils';\nimport { SIDE_PANE_OPTIONS } from '../../common/constants';\n\nexport const ParticipantList = () => {\n const [filter, setFilter] = useState();\n const { participants, isConnected, peerCount, rolesWithParticipants } = useParticipants(filter);\n const [selectedPeerId, setSelectedPeerId] = useState(null);\n const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);\n const onSearch = useCallback(value => {\n setFilter(filterValue => {\n if (!filterValue) {\n filterValue = {};\n }\n filterValue.search = value;\n return { ...filterValue };\n });\n }, []);\n if (peerCount === 0) {\n return null;\n }\n\n return (\n <Fragment>\n <Flex direction=\"column\" css={{ size: '100%' }}>\n <Flex align=\"center\" css={{ w: '100%', mb: '$10' }}>\n <Text css={{ fontWeight: '$semiBold', mr: '$4' }}>Participants</Text>\n <ParticipantFilter\n selection={filter}\n onSelection={setFilter}\n isConnected={isConnected}\n roles={rolesWithParticipants}\n />\n <IconButton onClick={toggleSidepane} css={{ w: '$11', h: '$11', ml: 'auto' }}>\n <CrossIcon />\n </IconButton>\n </Flex>\n {!filter?.search && participants.length === 0 ? null : <ParticipantSearch onSearch={onSearch} />}\n {participants.length === 0 && (\n <Flex align=\"center\" justify=\"center\" css={{ w: '100%', p: '$8 0' }}>\n <Text variant=\"sm\">{!filter ? 'No participants' : 'No matching participants'}</Text>\n </Flex>\n )}\n <VirtualizedParticipants\n participants={participants}\n isConnected={isConnected}\n setSelectedPeerId={setSelectedPeerId}\n />\n </Flex>\n {selectedPeerId && (\n <RoleChangeModal\n peerId={selectedPeerId}\n onOpenChange={value => {\n !value && setSelectedPeerId(null);\n }}\n />\n )}\n </Fragment>\n );\n};\n\nexport const ParticipantCount = () => {\n const peerCount = useHMSStore(selectPeerCount);\n const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);\n const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);\n useEffect(() => {\n if (isParticipantsOpen && peerCount === 0) {\n toggleSidepane();\n }\n }, [isParticipantsOpen, peerCount, toggleSidepane]);\n\n if (peerCount === 0) {\n return null;\n }\n return (\n <IconButton\n css={{\n w: 'auto',\n p: '$4',\n h: 'auto',\n }}\n onClick={() => {\n if (peerCount > 0) {\n toggleSidepane();\n }\n }}\n active={!isParticipantsOpen}\n data-testid=\"participant_list\"\n >\n <PeopleIcon />\n <Text variant=\"sm\" css={{ mx: '$4', c: 'inherit' }}>\n {peerCount}\n </Text>\n </IconButton>\n );\n};\n\nfunction itemKey(index, data) {\n return data.participants[index].id;\n}\n\nconst VirtualizedParticipants = ({ participants, isConnected, setSelectedPeerId }) => {\n const [ref, { width, height }] = useMeasure();\n return (\n <Box\n ref={ref}\n css={{\n flex: '1 1 0',\n mr: '-$10',\n }}\n >\n <FixedSizeList\n itemSize={68}\n itemData={{ participants, isConnected, setSelectedPeerId }}\n itemKey={itemKey}\n itemCount={participants.length}\n width={width}\n height={height}\n >\n {VirtualisedParticipantListItem}\n </FixedSizeList>\n </Box>\n );\n};\n\nconst VirtualisedParticipantListItem = React.memo(({ style, index, data }) => {\n return (\n <div style={style} key={data.participants[index].id}>\n <Participant\n peer={data.participants[index]}\n isConnected={data.isConnected}\n setSelectedPeerId={data.setSelectedPeerId}\n />\n </div>\n );\n});\n\nconst Participant = ({ peer, isConnected, setSelectedPeerId }) => {\n return (\n <Fragment>\n <Flex\n key={peer.id}\n css={{ w: '100%', py: '$4', pr: '$10' }}\n align=\"center\"\n data-testid={'participant_' + peer.name}\n >\n <Avatar\n name={peer.name}\n css={{\n position: 'unset',\n transform: 'unset',\n mr: '$8',\n fontSize: '$sm',\n size: '$12',\n p: '$4',\n }}\n />\n <Flex direction=\"column\" css={{ flex: '1 1 0' }}>\n <Text variant=\"md\" css={{ ...textEllipsis(150), fontWeight: '$semiBold' }}>\n {peer.name}\n </Text>\n <Text variant=\"sub2\">{peer.roleName}</Text>\n </Flex>\n {isConnected && (\n <ParticipantActions\n peerId={peer.id}\n role={peer.roleName}\n onSettings={() => {\n setSelectedPeerId(peer.id);\n }}\n />\n )}\n </Flex>\n </Fragment>\n );\n};\n\n/**\n * shows settings to change for a participant like changing their role\n */\nconst ParticipantActions = React.memo(({ onSettings, peerId, role }) => {\n const isHandRaised = useHMSStore(selectPeerMetadata(peerId))?.isHandRaised;\n const canChangeRole = useHMSStore(selectPermissions)?.changeRole;\n const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));\n const localPeerId = useHMSStore(selectLocalPeerID);\n const canChangeVolume = peerId !== localPeerId && audioTrack;\n const shouldShowMoreActions = canChangeRole || canChangeVolume;\n\n return (\n <Flex align=\"center\" css={{ flexShrink: 0 }}>\n <ConnectionIndicator peerId={peerId} />\n {isHandRaised && <HandRaiseIcon />}\n {shouldShowMoreActions && !isInternalRole(role) && (\n <ParticipantMoreActions onRoleChange={onSettings} peerId={peerId} role={role} />\n )}\n </Flex>\n );\n});\n\nconst ParticipantMoreActions = ({ onRoleChange, peerId }) => {\n const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore(selectPermissions);\n const localPeerId = useHMSStore(selectLocalPeerID);\n const isLocal = localPeerId === peerId;\n const actions = useHMSActions();\n const [open, setOpen] = useState(false);\n return (\n <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>\n <Dropdown.Trigger asChild data-testid=\"participant_more_actions\" css={{ p: '$2', r: '$0' }} tabIndex={0}>\n <Text>\n <VerticalMenuIcon />\n </Text>\n </Dropdown.Trigger>\n <Dropdown.Portal>\n <Dropdown.Content align=\"end\" sideOffset={8} css={{ w: '$64' }}>\n {canChangeRole && (\n <Dropdown.Item onClick={() => onRoleChange(peerId)}>\n <ChangeRoleIcon />\n <Text css={{ ml: '$4' }}>Change Role</Text>\n </Dropdown.Item>\n )}\n <ParticipantVolume peerId={peerId} />\n {!isLocal && canRemoveOthers && (\n <Dropdown.Item\n onClick={async () => {\n try {\n await actions.removePeer(peerId, '');\n } catch (error) {\n // TODO: Toast here\n }\n }}\n >\n <RemoveUserIcon />\n <Text css={{ ml: '$4', color: '$alert_error_default' }}>Remove Participant</Text>\n </Dropdown.Item>\n )}\n </Dropdown.Content>\n </Dropdown.Portal>\n </Dropdown.Root>\n );\n};\n\nconst ParticipantVolume = ({ peerId }) => {\n const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));\n const localPeerId = useHMSStore(selectLocalPeerID);\n const hmsActions = useHMSActions();\n // No volume control for local peer or non audio publishing role\n if (peerId === localPeerId || !audioTrack) {\n return null;\n }\n\n return (\n <Dropdown.Item css={{ h: 'auto' }}>\n <Flex direction=\"column\" css={{ w: '100%' }}>\n <Flex align=\"center\">\n <SpeakerIcon />\n <Text css={{ ml: '$4' }}>Volume{audioTrack.volume ? `(${audioTrack.volume})` : ''}</Text>\n </Flex>\n <Slider\n css={{ my: '0.5rem' }}\n step={5}\n value={[audioTrack.volume]}\n onValueChange={e => {\n hmsActions.setVolume(e[0], audioTrack?.id);\n }}\n />\n </Flex>\n </Dropdown.Item>\n );\n};\n\nexport const ParticipantSearch = ({ onSearch, placeholder }) => {\n const [value, setValue] = React.useState('');\n useDebounce(\n () => {\n onSearch(value);\n },\n 300,\n [value, onSearch],\n );\n return (\n <Box css={{ p: '$4 0', my: '$8', position: 'relative' }}>\n <Box\n css={{\n position: 'absolute',\n left: '$4',\n top: '$2',\n transform: 'translateY(50%)',\n color: '$on_surface_medium',\n }}\n >\n <SearchIcon />\n </Box>\n <Input\n type=\"text\"\n placeholder={placeholder || 'Find what you are looking for'}\n css={{ w: '100%', pl: '$14' }}\n value={value}\n onKeyDown={event => {\n event.stopPropagation();\n }}\n onChange={event => {\n setValue(event.currentTarget.value);\n }}\n autoComplete=\"off\"\n aria-autocomplete=\"none\"\n />\n </Box>\n );\n};\n", "import React from 'react';\nimport { selectConnectionQualityByPeerID, useHMSStore } from '@100mslive/react-sdk';\nimport { PoorConnectivityIcon } from '@100mslive/react-icons';\nimport { styled, Tooltip, useTheme } from '../../../';\nimport { getColor, getTooltipText } from './connectionQualityUtils';\n\nconst Wrapper = styled('span', {\n width: '28px',\n height: '28px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: '$background_dim',\n borderRadius: '$round',\n variants: {\n isTile: {\n true: {\n width: 'unset',\n height: 'unset',\n },\n },\n },\n});\n\nexport const ConnectionIndicator = ({ peerId, isTile = false }) => {\n const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;\n const { theme } = useTheme();\n const defaultColor = theme.colors.surface_brighter;\n if (downlinkQuality === -1 || downlinkQuality === undefined) {\n return null;\n }\n if (downlinkQuality === 0) {\n return (\n <Tooltip title={getTooltipText(downlinkQuality)}>\n <Wrapper isTile={isTile} css={{ color: '#ED4C5A' }} data-testid=\"tile_network\">\n <PoorConnectivityIcon />\n </Wrapper>\n </Tooltip>\n );\n }\n const size = isTile ? 12 : 16;\n return (\n <Tooltip title={getTooltipText(downlinkQuality)}>\n <Wrapper isTile={isTile} data-testid=\"tile_network\">\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 14 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlSpace=\"preserve\"\n style={{\n fillRule: 'evenodd',\n clipRule: 'evenodd',\n strokeLinejoin: 'round',\n strokeMiterlimit: 2,\n }}\n >\n <path\n d=\"M6.875 0c2.549.035 4.679.902 6.445 2.648.366.362.45.796.216 1.096-.239.306-.714.34-1.142.072a2.28 2.28 0 0 1-.341-.271C9.24.862 4.924.775 1.992 3.346c-.284.249-.594.419-.983.393-.272-.019-.49-.135-.613-.388-.125-.261-.05-.498.114-.713.073-.092.156-.177.245-.254C2.516.804 4.591.039 6.875 0Z\"\n fill={getColor(4, downlinkQuality, defaultColor, theme)}\n transform=\"translate(-.333)\"\n />\n <path\n d=\"M7.056 2.964c1.756.035 3.208.7 4.499 1.763.162.134.277.315.354.512.098.251.114.503-.075.72-.193.222-.452.259-.725.198-.293-.066-.518-.247-.738-.443a4.859 4.859 0 0 0-6.198-.26c-.166.127-.318.271-.475.409-.242.211-.513.343-.843.317-.43-.034-.679-.397-.561-.81.062-.211.181-.4.345-.546 1.265-1.162 2.733-1.836 4.417-1.86Z\"\n fill={getColor(3, downlinkQuality, defaultColor, theme)}\n transform=\"translate(-.333)\"\n />\n <path\n d=\"M7.384,6.052C8.293,6.068 9.157,6.449 9.783,7.108C10.005,7.339 10.157,7.6 10.07,7.942C9.959,8.377 9.435,8.581 9.071,8.243C7.935,7.191 6.356,7.183 5.152,8.183C4.816,8.462 4.6,8.485 4.332,8.27C4.063,8.055 3.998,7.691 4.177,7.358C4.273,7.179 4.414,7.038 4.57,6.911C5.26,6.349 6.149,6.05 7.384,6.052L7.384,6.052Z\"\n fill={getColor(2, downlinkQuality, defaultColor, theme)}\n />\n <path\n d=\"M8.214,9.941C8.214,10.234 8.097,10.515 7.888,10.721C7.68,10.928 7.398,11.042 7.104,11.039C6.471,11.036 5.982,10.541 5.993,9.912C6.004,9.259 6.499,8.766 7.133,8.779C7.744,8.791 8.22,9.301 8.214,9.941Z\"\n fill={getColor(1, downlinkQuality, defaultColor, theme)}\n />\n </svg>\n </Wrapper>\n </Tooltip>\n );\n};\n", "const connectionTooltip = {\n 0: 'Reconnecting',\n 1: 'Very Bad Connection',\n 2: 'Bad Connection',\n 3: 'Moderate Connection',\n 4: 'Good Connection',\n 5: 'Excellent Connection',\n};\nconnectionTooltip[-1] = 'Network Unknown';\n\n/**\n * @param connectionScore -> 1-5 connection score for network quality\n */\nexport const getTooltipText = connectionScore => {\n return connectionTooltip[connectionScore];\n};\n\n/**\n * position is needed here as we don't want all the dots/arcs to be colored,\n * the non colored ones will be passed in the default color. If user is\n * disconnected(score=0), no dot/arc will be colored.\n * @param position -> 1 to 5\n * @param connectionScore -> 0 to 5, 0 means disconnected\n * @param defaultColor -> color for components not taking the connection color\n */\nexport const getColor = (position, connectionScore, defaultColor, theme) => {\n const shouldBeColored = position <= connectionScore;\n if (!shouldBeColored) {\n return defaultColor;\n }\n if (connectionScore >= 4) {\n return theme.colors.alert_success;\n } else if (connectionScore >= 3) {\n return theme.colors.alert_warning;\n } else if (connectionScore >= 1) {\n return theme.colors.alert_default;\n }\n return defaultColor;\n};\n", "import React, { forwardRef, useRef, useState } from 'react';\nimport { selectPeerByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';\nimport { Button } from '../../Button';\nimport { Checkbox } from '../../Checkbox';\nimport { Dropdown } from '../../Dropdown';\nimport { Label } from '../../Label';\nimport { Box, Flex } from '../../Layout';\nimport { Dialog } from '../../Modal';\nimport { Text } from '../../Text';\nimport { Tooltip } from '../../Tooltip';\nimport { useDropdownSelection } from './hooks/useDropdownSelection';\nimport { useFilteredRoles } from '../common/hooks';\nimport { textEllipsis } from '../../utils';\n\nconst PeerName = forwardRef(({ children, maxWidth, ...rest }, ref) => (\n <Text\n {...rest}\n ref={ref}\n as=\"strong\"\n variant=\"body2\"\n css={{\n ...textEllipsis(maxWidth),\n display: 'inline-block',\n fontWeight: '$semiBold',\n c: 'inherit',\n }}\n >\n {children}\n </Text>\n));\n\nexport const RoleChangeModal = ({ peerId, onOpenChange }) => {\n const peer = useHMSStore(selectPeerByID(peerId));\n const roles = useFilteredRoles();\n const [selectedRole, setRole] = useState(peer?.roleName);\n const [requestPermission, setRequestPermission] = useState(true);\n const hmsActions = useHMSActions();\n const [open, setOpen] = useState(false);\n const selectionBg = useDropdownSelection();\n const [peerNameRef, setPeerNameRef] = useState();\n const ref = useRef();\n if (!peer) {\n return null;\n }\n\n const peerNameMaxWidth = 200;\n return (\n <Dialog.Root defaultOpen onOpenChange={onOpenChange}>\n <Dialog.Portal>\n <Dialog.Overlay />\n <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>\n <Dialog.Title css={{ p: 0 }} asChild>\n <Text as=\"h6\" variant=\"h6\">\n Change Role\n </Text>\n </Dialog.Title>\n <Dialog.Description asChild>\n <Text\n variant=\"body2\"\n css={{\n mt: '$4',\n mb: '$8',\n c: '$on_surface_medium',\n display: 'flex',\n flexWrap: 'wrap',\n columnGap: '4px',\n }}\n >\n Change the role of\n {peerNameRef && peerNameRef.clientWidth === peerNameMaxWidth ? (\n <Tooltip title={peer.name} side=\"top\">\n <PeerName ref={setPeerNameRef} maxWidth={peerNameMaxWidth}>\n {peer.name}\n </PeerName>\n </Tooltip>\n ) : (\n <PeerName ref={setPeerNameRef} maxWidth={peerNameMaxWidth}>\n {peer.name}\n </PeerName>\n )}\n to\n </Text>\n </Dialog.Description>\n <Flex\n align=\"center\"\n css={{\n w: '100%',\n mb: '$10',\n }}\n >\n <Box\n css={{\n position: 'relative',\n flex: '1 1 0',\n minWidth: 0,\n }}\n >\n <Dropdown.Root open={open} onOpenChange={setOpen} css={{ width: '100%' }}>\n <Dropdown.Trigger\n data-testid=\"open_role_selection_dropdown\"\n asChild\n css={{\n border: '1px solid $border_bright',\n bg: '$surface_bright',\n r: '$1',\n p: '$6 $9',\n }}\n ref={ref}\n >\n <Flex align=\"center\" justify=\"between\" css={{ width: '100%' }}>\n <Text>{selectedRole}</Text>\n {open ? <ChevronUpIcon /> : <ChevronDownIcon />}\n </Flex>\n </Dropdown.Trigger>\n <Dropdown.Portal>\n <Dropdown.Content\n align=\"start\"\n sideOffset={8}\n css={{ zIndex: 1000, width: ref.current?.clientWidth }}\n >\n {roles.map(role => {\n return (\n <Dropdown.Item\n data-testid={role}\n key={role}\n onSelect={() => setRole(role)}\n css={{\n px: '$9',\n bg: role === selectedRole ? selectionBg : undefined,\n }}\n >\n {role}\n </Dropdown.Item>\n );\n })}\n </Dropdown.Content>\n </Dropdown.Portal>\n </Dropdown.Root>\n </Box>\n </Flex>\n {!peer.isLocal && (\n <Flex justify=\"between\" css={{ w: '100%', mb: '$10' }}>\n <Label htmlFor=\"requestRoleChangePermission\" css={{ cursor: 'pointer' }}>\n Request Permission\n </Label>\n <Checkbox.Root\n checked={requestPermission}\n onCheckedChange={value => setRequestPermission(value)}\n id=\"requestRoleChangePermission\"\n data-testid=\"force_role_change_checkbox\"\n >\n <Checkbox.Indicator>\n <CheckIcon width={16} height={16} />\n </Checkbox.Indicator>\n </Checkbox.Root>\n </Flex>\n )}\n <Flex justify=\"center\" align=\"center\" css={{ width: '100%', gap: '$md' }}>\n <Box css={{ width: '50%' }}>\n <Dialog.Close css={{ width: '100%', p: '$4 $8' }} asChild>\n <Button variant=\"standard\" outlined css={{ width: '100%' }} data-testid=\"cancel_button\">\n Cancel\n </Button>\n </Dialog.Close>\n </Box>\n <Box css={{ width: '50%' }}>\n <Button\n data-testid=\"change_button\"\n variant=\"primary\"\n css={{ width: '100%' }}\n onClick={async () => {\n await hmsActions.changeRole(peerId, selectedRole, peer.isLocal ? true : !requestPermission);\n onOpenChange(false);\n }}\n >\n Change\n </Button>\n </Box>\n </Flex>\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n );\n};\n", "export const useDropdownSelection = () => {\n return '$primary_dim';\n};\n", "// @ts-check\nimport { useEffect, useRef, useState } from 'react';\nimport { selectAvailableRoleNames, selectIsConnectedToRoom, selectPeerCount, useHMSStore } from '@100mslive/react-sdk';\nimport { isInternalRole } from './utils';\n\n/**\n * Hook to execute a callback when alone in room(after a certain 5d of time)\n * @param {number} thresholdMs The threshold(in ms) after which the callback is executed,\n * starting from the instant when alone in room.\n * note: the cb is not called when another peer joins during this period.\n */\nexport const useWhenAloneInRoom = (thresholdMs = 5 * 60 * 1000) => {\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const peerCount = useHMSStore(selectPeerCount);\n const [aloneForLong, setAloneForLong] = useState(false);\n const cbTimeout = useRef(null);\n const alone = isConnected && peerCount === 1;\n\n useEffect(() => {\n if (alone && !cbTimeout.current) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n cbTimeout.current = setTimeout(() => {\n setAloneForLong(true);\n }, thresholdMs);\n } else if (!alone) {\n cbTimeout.current && clearTimeout(cbTimeout.current);\n cbTimeout.current = null;\n setAloneForLong(false);\n }\n }, [alone, thresholdMs]);\n\n useEffect(() => {\n return () => {\n if (cbTimeout.current) {\n clearTimeout(cbTimeout.current);\n }\n };\n }, []);\n\n return { alone, aloneForLong };\n};\n\nexport const useFilteredRoles = () => {\n const roles = useHMSStore(selectAvailableRoleNames).filter(role => !isInternalRole(role));\n return roles;\n};\n", "import React, { useCallback, useState } from 'react';\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon, HandRaiseIcon, PeopleIcon } from '@100mslive/react-icons';\nimport { Box, Dropdown, Flex, Text, textEllipsis } from '../../../';\nimport { isInternalRole } from '../../common/utils';\n\nexport const ParticipantFilter = ({ selection, onSelection, isConnected, roles }) => {\n const [open, setOpen] = useState(false);\n const selectionValue = selection?.role || (selection?.metadata?.isHandRaised ? 'Raised Hand' : '');\n const onItemClick = useCallback(value => {\n onSelection(value);\n setOpen(false);\n }, []); //eslint-disable-line\n if (!isConnected) {\n return null;\n }\n return (\n <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>\n <Dropdown.Trigger\n asChild\n data-testid=\"participant_list_filter\"\n css={{\n border: '1px solid $on_surface_low',\n r: '$0',\n p: '$2 $4',\n }}\n tabIndex={0}\n >\n <Flex align=\"center\">\n <Text variant=\"sm\" css={{ ...textEllipsis(80) }}>\n {selectionValue || 'Everyone'}\n </Text>\n <Box css={{ ml: '$2', color: '$on_surface_low' }}>\n {open ? <ChevronUpIcon width={14} height={14} /> : <ChevronDownIcon width={14} height={14} />}\n </Box>\n </Flex>\n </Dropdown.Trigger>\n <Dropdown.Content\n align=\"start\"\n sideOffset={8}\n css={{\n height: 'auto',\n maxHeight: '$96',\n boxShadow: '$md',\n w: '$48',\n }}\n >\n <Item selected={!selection} title=\"Everyone\" onSelection={onItemClick} icon={<PeopleIcon />} />\n <Item\n selected={selection?.metadata?.isHandRaised}\n title=\"Raised Hand\"\n onSelection={onItemClick}\n icon={<HandRaiseIcon />}\n value={{ metadata: { isHandRaised: true }, role: '' }}\n />\n <Dropdown.ItemSeparator />\n {roles\n .filter(role => !isInternalRole(role))\n .map(role => (\n <Item\n key={role}\n selected={selectionValue === role}\n title={role}\n value={{ metadata: { isHandRaised: false }, role }}\n onSelection={onItemClick}\n />\n ))}\n </Dropdown.Content>\n </Dropdown.Root>\n );\n};\n\nconst Item = ({ selected, title, onSelection, value, icon }) => {\n return (\n <Dropdown.Item\n onClick={e => {\n e.preventDefault();\n onSelection(value);\n }}\n >\n <Flex align=\"center\" css={{ flex: '1 1 0' }}>\n {icon && <Text>{icon}</Text>}\n <Text css={{ ml: '$4' }}>{title}</Text>\n </Flex>\n {selected && (\n <Text>\n <CheckIcon widht={16} height={16} />\n </Text>\n )}\n </Dropdown.Item>\n );\n};\n", "import React, { Fragment, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport {\n HMSRoomState,\n selectIsConnectedToRoom,\n selectPermissions,\n selectRoomState,\n useHMSActions,\n useHMSStore,\n useRecordingStreaming,\n} from '@100mslive/react-sdk';\nimport { RecordIcon, WrenchIcon } from '@100mslive/react-icons';\nimport { Box, Button, config as cssConfig, Flex, Loading, Popover, Text, Tooltip } from '../../../';\nimport GoLiveButton from '../GoLiveButton';\nimport { ResolutionInput } from '../Streaming/ResolutionInput';\nimport { getResolution } from '../Streaming/RTMPStreaming';\nimport { ToastManager } from '../Toast/ToastManager';\nimport { AdditionalRoomState, getRecordingText } from './AdditionalRoomState';\nimport { useSidepaneToggle } from '../AppData/useSidepane';\nimport { useSetAppDataByKey } from '../AppData/useUISettings';\nimport { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION, SIDE_PANE_OPTIONS } from '../../common/constants';\n\nexport const LiveStatus = () => {\n const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();\n if (!isHLSRunning && !isRTMPRunning) {\n return null;\n }\n return (\n <Flex align=\"center\">\n <Box css={{ w: '$4', h: '$4', r: '$round', bg: '$alert_error_default', mr: '$2' }} />\n <Text>\n Live\n <Text as=\"span\" css={{ '@md': { display: 'none' } }}>\n &nbsp;with {isHLSRunning ? 'HLS' : 'RTMP'}\n </Text>\n </Text>\n </Flex>\n );\n};\n\nexport const RecordingStatus = () => {\n const { isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn, isRecordingOn } = useRecordingStreaming();\n const permissions = useHMSStore(selectPermissions);\n\n if (\n !isRecordingOn ||\n // if only browser recording is enabled, stop recording is shown\n // so no need to show this as it duplicates\n [permissions?.browserRecording, !isServerRecordingOn, !isHLSRecordingOn, isBrowserRecordingOn].every(\n value => !!value,\n )\n ) {\n return null;\n }\n return (\n <Tooltip\n title={getRecordingText({\n isBrowserRecordingOn,\n isServerRecordingOn,\n isHLSRecordingOn,\n })}\n >\n <Box\n css={{\n color: '$alert_error_default',\n }}\n >\n <RecordIcon width={24} height={24} />\n </Box>\n </Tooltip>\n );\n};\n\nconst EndStream = () => {\n const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);\n\n return (\n <Button data-testid=\"end_stream\" variant=\"danger\" icon onClick={toggleStreaming}>\n <WrenchIcon />\n Manage Stream\n </Button>\n );\n};\n\nconst StartRecording = () => {\n const permissions = useHMSStore(selectPermissions);\n const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);\n const [open, setOpen] = useState(false);\n const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);\n const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();\n const hmsActions = useHMSActions();\n if (!permissions?.browserRecording || isHLSRunning) {\n return null;\n }\n if (isBrowserRecordingOn) {\n return (\n <Popover.Root open={open} onOpenChange={setOpen}>\n <Popover.Trigger asChild>\n <Button variant=\"danger\" data-testid=\"stop_recording\" icon outlined onClick={() => setOpen(true)}>\n <RecordIcon />\n <Text as=\"span\" css={{ '@md': { display: 'none' }, color: 'currentColor' }}>\n Stop Recording\n </Text>\n </Button>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content align=\"end\" sideOffset={8} css={{ w: '$64' }}>\n <Text variant=\"body\" css={{ color: '$on_surface_medium' }}>\n Are you sure you want to end the recording?\n </Text>\n <Button\n data-testid=\"stop_recording_confirm\"\n variant=\"danger\"\n icon\n css={{ ml: 'auto' }}\n onClick={async () => {\n try {\n await hmsActions.stopRTMPAndRecording();\n } catch (error) {\n ToastManager.addToast({\n title: error.message,\n variant: 'error',\n });\n }\n setOpen(false);\n }}\n >\n Stop\n </Button>\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n );\n }\n return (\n <Popover.Root open={open} onOpenChange={setOpen}>\n <Popover.Trigger asChild>\n <Button\n data-testid=\"start_recording\"\n variant=\"standard\"\n icon\n disabled={recordingStarted || isStreamingOn}\n onClick={() => setOpen(true)}\n >\n {recordingStarted ? <Loading size={24} color=\"currentColor\" /> : <RecordIcon />}\n <Text as=\"span\" css={{ '@md': { display: 'none' }, color: 'currentColor' }}>\n {recordingStarted ? 'Starting' : 'Start'} Recording\n </Text>\n </Button>\n </Popover.Trigger>\n <Popover.Content align=\"end\" sideOffset={8} css={{ w: '$64' }}>\n <ResolutionInput\n testId=\"recording_resolution\"\n css={{ flexDirection: 'column', alignItems: 'start' }}\n onResolutionChange={setResolution}\n />\n <Button\n data-testid=\"start_recording_confirm\"\n variant=\"primary\"\n icon\n css={{ ml: 'auto' }}\n type=\"submit\"\n disabled={recordingStarted || isStreamingOn}\n onClick={async () => {\n try {\n setRecordingState(true);\n await hmsActions.startRTMPOrRecording({\n resolution: getResolution(resolution),\n record: true,\n });\n } catch (error) {\n if (error.message.includes('stream already running')) {\n ToastManager.addToast({\n title: 'Recording already running',\n variant: 'error',\n });\n } else {\n ToastManager.addToast({\n title: error.message,\n variant: 'error',\n });\n }\n setRecordingState(false);\n }\n setOpen(false);\n }}\n >\n Start\n </Button>\n </Popover.Content>\n </Popover.Root>\n );\n};\n\nexport const StreamActions = () => {\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const permissions = useHMSStore(selectPermissions);\n const isMobile = useMedia(cssConfig.media.md);\n const { isStreamingOn } = useRecordingStreaming();\n const roomState = useHMSStore(selectRoomState);\n\n return (\n <Flex align=\"center\" css={{ gap: '$4' }}>\n <AdditionalRoomState />\n <Flex align=\"center\" css={{ gap: '$4', '@md': { display: 'none' } }}>\n {roomState !== HMSRoomState.Preview ? <LiveStatus /> : null}\n <RecordingStatus />\n </Flex>\n {isConnected && !isMobile ? <StartRecording /> : null}\n {isConnected && (permissions.hlsStreaming || permissions.rtmpStreaming) && (\n <Fragment>{isStreamingOn ? <EndStream /> : <GoLiveButton />}</Fragment>\n )}\n </Flex>\n );\n};\n", "import React from 'react';\nimport { useRecordingStreaming } from '@100mslive/react-sdk';\nimport { GoLiveIcon } from '@100mslive/react-icons';\nimport { Button } from '../../Button';\nimport { Tooltip } from '../../Tooltip';\nimport { useIsSidepaneTypeOpen, useSidepaneToggle } from './AppData/useSidepane';\nimport { useIsHLSStartedFromUI, useIsRTMPStartedFromUI } from './AppData/useUISettings';\nimport { SIDE_PANE_OPTIONS } from './../common/constants';\n\nconst GoLiveButton = () => {\n const isStreamingSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.STREAMING);\n const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);\n const { isStreamingOn, isBrowserRecordingOn } = useRecordingStreaming();\n const isHLSStartedFromUI = useIsHLSStartedFromUI();\n const isRTMPStartedFromUI = useIsRTMPStartedFromUI();\n let tooltipText = 'Start streaming';\n if (isHLSStartedFromUI || isRTMPStartedFromUI) {\n if (isHLSStartedFromUI) {\n tooltipText = 'HLS start in progress';\n }\n if (isRTMPStartedFromUI) {\n tooltipText = 'RTMP start in progress';\n }\n }\n return (\n <Tooltip title={tooltipText}>\n <Button\n data-testid=\"go_live\"\n variant={isStreamingSidepaneOpen ? 'standard' : 'primary'}\n onClick={toggleStreaming}\n icon\n loading={isRTMPStartedFromUI || isHLSStartedFromUI}\n disabled={isBrowserRecordingOn && !isStreamingOn}\n >\n <GoLiveIcon />\n Go Live\n </Button>\n </Tooltip>\n );\n};\n\nexport default GoLiveButton;\n", "import React, { useCallback, useState } from 'react';\nimport { InfoIcon } from '@100mslive/react-icons';\nimport { Flex, Input, Label, Text, Tooltip } from '../../../';\nimport { DialogRow } from '../../primitives/DialogContent';\nimport {\n RTMP_RECORD_DEFAULT_RESOLUTION,\n RTMP_RECORD_RESOLUTION_MAX,\n RTMP_RECORD_RESOLUTION_MIN,\n} from '../../common/constants';\n\nexport const ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css, testId }) => {\n const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);\n\n const resolutionChangeHandler = useCallback(\n event => {\n const { name, value } = event.target;\n let width = name === 'resWidth' ? Number(value) : resolution.width;\n let height = name === 'resHeight' ? Number(value) : resolution.height;\n\n if (width === 0) {\n width = null;\n }\n if (height === 0) {\n height = null;\n }\n const newResolution = {\n width: !isNaN(width) ? width : RTMP_RECORD_DEFAULT_RESOLUTION.width,\n height: !isNaN(height) ? height : RTMP_RECORD_DEFAULT_RESOLUTION.height,\n };\n setResolution(newResolution);\n },\n [resolution],\n );\n\n return (\n <DialogRow breakSm css={css}>\n <Flex gap={1}>\n <Label css={{ mb: '$8' }}>Resolution</Label>\n {tooltipText && (\n <Tooltip title={tooltipText}>\n <div>\n <InfoIcon color=\"#B0C3DB\" />\n </div>\n </Tooltip>\n )}\n </Flex>\n <Flex\n justify=\"between\"\n css={{ width: !tooltipText ? '100%' : '70%', '@sm': { width: '100%' } }}\n gap={2}\n direction=\"column\"\n >\n <Flex justify=\"between\" gap={2}>\n <Flex direction=\"column\" css={{ width: '50%' }}>\n <Text variant=\"xs\">Width</Text>\n <Input\n data-testid={`${testId}_width`}\n css={{ width: '100%', mt: '$4' }}\n name=\"resWidth\"\n value={resolution.width}\n onChange={resolutionChangeHandler}\n readOnly={disabled}\n min={RTMP_RECORD_RESOLUTION_MIN}\n max={RTMP_RECORD_RESOLUTION_MAX}\n onBlur={() => onResolutionChange(resolution)}\n type=\"number\"\n />\n </Flex>\n <Flex direction=\"column\" css={{ width: '50%' }}>\n <Text variant=\"xs\">Height</Text>\n <Input\n data-testid={`${testId}_height`}\n css={{ width: '100%', mt: '$4' }}\n name=\"resHeight\"\n value={resolution.height}\n onChange={resolutionChangeHandler}\n onBlur={() => onResolutionChange(resolution)}\n readOnly={disabled}\n min={RTMP_RECORD_RESOLUTION_MIN}\n max={RTMP_RECORD_RESOLUTION_MAX}\n type=\"number\"\n />\n </Flex>\n </Flex>\n </Flex>\n </DialogRow>\n );\n};\n", "import React, { useEffect, useRef, useState } from 'react';\nimport { useHMSActions, useRecordingStreaming } from '@100mslive/react-sdk';\nimport { AddCircleIcon, EndStreamIcon, GoLiveIcon, PencilIcon, SettingsIcon, TrashIcon } from '@100mslive/react-icons';\nimport { Accordion, Box, Button, Flex, Input, Label, Loading, Text } from '../../../';\nimport { Container, ContentBody, ContentHeader, ErrorText, RecordStream } from './Common';\nimport { ResolutionInput } from './ResolutionInput';\nimport { useSetAppDataByKey } from '../AppData/useUISettings';\nimport { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';\nimport { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants';\n\nexport const RTMPStreaming = ({ onBack }) => {\n const { isRTMPRunning } = useRecordingStreaming();\n\n return (\n <Container>\n <ContentHeader title=\"Start Streaming\" content=\"Choose a destination\" onBack={onBack} />\n <ContentBody Icon={SettingsIcon} title=\"RTMP\">\n Live Stream your call to Twitch, YouTube, Facebook and any app which supports RTMP, all at the same time\n </ContentBody>\n {!isRTMPRunning ? <StartRTMP /> : <EndRTMP />}\n </Container>\n );\n};\n\nconst StartRTMP = () => {\n const [rtmpPreference = [], setRTMPPreference] = useUserPreferences(UserPreferencesKeys.RTMP_URLS);\n const [rtmpStreams, setRTMPStreams] = useState(\n rtmpPreference.length > 0\n ? rtmpPreference\n : [\n {\n name: 'Stream',\n id: Date.now(),\n rtmpURL: '',\n streamKey: '',\n },\n ],\n );\n const hmsActions = useHMSActions();\n const [error, setError] = useState(false);\n const [record, setRecord] = useState(false);\n const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);\n const [isRTMPStarted, setRTMPStarted] = useSetAppDataByKey(APP_DATA.rtmpStarted);\n const hasRTMPURL = rtmpStreams.some(value => value.rtmpURL && value.streamKey);\n\n return (\n <Box\n css={{ overflowY: 'auto' }}\n as=\"form\"\n onSubmit={e => {\n e.preventDefault();\n }}\n >\n {rtmpStreams.length > 0 && (\n <Box css={{ px: '$10' }}>\n <Accordion.Root type=\"single\" collapsible defaultValue={rtmpStreams[0].id}>\n {rtmpStreams.map((rtmp, index) => {\n return (\n <Accordion.Item\n value={rtmp.id}\n key={rtmp.id}\n css={{\n border: '2px solid $surface_bright !important',\n r: '$1',\n my: '$4',\n }}\n >\n <AccordionHeader rtmp={rtmp} setRTMPStreams={setRTMPStreams} />\n <Accordion.Content css={{ px: '$8', py: 0 }}>\n <RTMPForm {...rtmp} setRTMPStreams={setRTMPStreams} testId={`${index}_rtmp`} />\n </Accordion.Content>\n </Accordion.Item>\n );\n })}\n </Accordion.Root>\n </Box>\n )}\n <ResolutionInput\n testId=\"rtmp_resolution\"\n onResolutionChange={setResolution}\n css={{\n flexDirection: 'column',\n alignItems: 'start',\n px: '$10',\n my: '$8',\n }}\n />\n <RecordStream record={record} setRecord={setRecord} testId=\"rtmp_recording\" />\n <Box css={{ p: '$8 $10', '@lg': { display: 'flex', gap: '$4' } }}>\n {rtmpStreams.length < 3 && (\n <Button\n data-testid=\"add_stream\"\n variant=\"standard\"\n outlined\n icon\n css={{ my: '$4', w: '100%' }}\n onClick={() => {\n setRTMPStreams(streams => [\n ...streams,\n {\n name: 'Stream',\n id: Date.now(),\n rtmpURL: '',\n streamKey: '',\n },\n ]);\n }}\n >\n <AddCircleIcon /> Add Stream\n </Button>\n )}\n\n <Button\n data-testid=\"start_rtmp\"\n variant=\"primary\"\n icon\n type=\"submit\"\n css={{ w: '100%', my: '$4' }}\n disabled={isRTMPStarted || (rtmpStreams.length === 0 && !record)}\n onClick={async () => {\n try {\n const hasInvalidData = rtmpStreams.find(\n value => (value.rtmpURL && !value.streamKey) || (value.streamKey && !value.rtmpURL),\n );\n if (hasInvalidData || (rtmpStreams.length > 0 && !hasRTMPURL)) {\n return;\n }\n setError('');\n setRTMPStarted(true);\n const urls = hasRTMPURL ? rtmpStreams.map(value => `${value.rtmpURL}/${value.streamKey}`) : [];\n await hmsActions.startRTMPOrRecording({\n rtmpURLs: urls,\n resolution: getResolution(resolution),\n record: record,\n });\n setRTMPPreference(rtmpStreams);\n } catch (error) {\n console.error(error);\n setError(error.message);\n setRTMPStarted(false);\n }\n }}\n >\n {isRTMPStarted ? <Loading size={24} color=\"currentColor\" /> : <GoLiveIcon />}\n {isRTMPStarted ? 'Starting stream...' : 'Go Live'}\n </Button>\n <ErrorText error={error} />\n </Box>\n </Box>\n );\n};\n\nconst EndRTMP = () => {\n const hmsActions = useHMSActions();\n const [inProgress, setInProgress] = useState(false);\n const [error, setError] = useState('');\n const { isRTMPRunning } = useRecordingStreaming();\n\n useEffect(() => {\n if (inProgress && !isRTMPRunning) {\n setInProgress(false);\n }\n }, [inProgress, isRTMPRunning]);\n\n return (\n <Box css={{ p: '$4 $10' }}>\n <ErrorText error={error} />\n <Button\n data-testid=\"stop_rtmp\"\n variant=\"danger\"\n css={{ w: '100%', r: '$0', my: '$8' }}\n icon\n loading={inProgress}\n disabled={inProgress}\n onClick={async () => {\n try {\n setInProgress(true);\n await hmsActions.stopRTMPAndRecording();\n } catch (error) {\n setError(error.message);\n setInProgress(false);\n }\n }}\n >\n <EndStreamIcon />\n End Stream\n </Button>\n </Box>\n );\n};\n\nconst ActionIcon = ({ icon: Icon, onClick }) => {\n return (\n <Text as=\"span\" css={{ mx: '$2', cursor: 'pointer' }} onClick={onClick}>\n <Icon width={16} height={16} />\n </Text>\n );\n};\n\nconst FormLabel = ({ id, children }) => {\n return (\n <Label htmlFor={id} css={{ color: '$on_surface_high', my: '$4', fontSize: '$sm' }}>\n {children}\n </Label>\n );\n};\n\nconst RTMPForm = ({ rtmpURL, id, streamKey, setRTMPStreams, testId }) => {\n const formRef = useRef(null);\n return (\n <Flex id={id} direction=\"column\" css={{ mb: '$8', px: '$8' }} ref={formRef}>\n <FormLabel id=\"rtmpURL\">\n RTMP URL\n <Asterik />\n </FormLabel>\n <Input\n data-testid={`${testId}_url`}\n placeholder=\"Enter RTMP URL\"\n id=\"rtmpURL\"\n name=\"rtmpURL\"\n value={rtmpURL}\n onChange={e => {\n setRTMPStreams(streams =>\n updateStream({\n streams,\n id,\n value: e.target.value,\n key: e.target.name,\n }),\n );\n }}\n required\n />\n <FormLabel id=\"streamKey\">\n Stream Key\n <Asterik />\n </FormLabel>\n <Input\n placeholder=\"Enter Stream Key\"\n id=\"streamKey\"\n name=\"streamKey\"\n value={streamKey}\n data-testid={`${testId}_key`}\n onChange={e => {\n setRTMPStreams(streams =>\n updateStream({\n streams,\n id,\n value: e.target.value,\n key: e.target.name,\n }),\n );\n }}\n required\n />\n </Flex>\n );\n};\n\nconst Asterik = () => {\n return (\n <Text variant=\"sm\" as=\"span\" css={{ color: '$alert_error_default', mx: '$2' }}>\n *\n </Text>\n );\n};\nconst AccordionHeader = ({ rtmp, setRTMPStreams }) => {\n const [edit, setEdit] = useState(false);\n return (\n <Accordion.Header css={{ px: '$8' }}>\n {edit ? (\n <Input\n defaultValue={rtmp.name}\n autoFocus\n onBlur={e => {\n const value = e.currentTarget.value.trim();\n if (value) {\n setRTMPStreams(streams =>\n streams.map(stream => {\n if (stream.id === rtmp.id) {\n stream.name = value;\n }\n return stream;\n }),\n );\n setEdit(false);\n }\n }}\n />\n ) : (\n <Text css={{ flex: '1 1 0' }}>{rtmp.name}</Text>\n )}\n <Flex css={{ mx: '$4', gap: '$2' }}>\n <ActionIcon\n onClick={e => {\n e.stopPropagation();\n setEdit(true);\n }}\n icon={PencilIcon}\n />\n <ActionIcon\n onClick={() => {\n setRTMPStreams(streams => streams.filter(stream => stream.id !== rtmp.id));\n }}\n icon={TrashIcon}\n />\n </Flex>\n </Accordion.Header>\n );\n};\n\nconst updateStream = ({ streams, id, key, value }) =>\n streams.map(stream => {\n if (stream.id === id) {\n return {\n ...stream,\n [key]: value,\n };\n }\n return stream;\n });\n\nexport function getResolution(recordingResolution) {\n const resolution = {};\n if (recordingResolution.width) {\n resolution.width = recordingResolution.width;\n }\n if (recordingResolution.height) {\n resolution.height = recordingResolution.height;\n }\n if (Object.keys(resolution).length > 0) {\n return resolution;\n }\n}\n", "import React from 'react';\nimport { selectPermissions, useHMSStore } from '@100mslive/react-sdk';\nimport { ChevronLeftIcon, ChevronRightIcon, CrossIcon, RecordIcon } from '@100mslive/react-icons';\nimport { Box, Flex, IconButton, slideLeftAndFade, Switch, Text } from '../../../';\n\nexport const StreamCard = ({ title, subtitle, Icon, imgSrc = '', css = {}, onClick, testId }) => {\n return (\n <Flex\n css={{\n w: '100%',\n p: '$10',\n r: '$1',\n cursor: 'pointer',\n bg: '$surface_bright',\n mb: '$10',\n mt: '$8',\n ...css,\n }}\n data-testid={testId}\n onClick={onClick}\n >\n <Text css={{ alignSelf: 'center', p: '$4' }}>\n {imgSrc ? <img src={imgSrc} height={40} width={40} /> : <Icon width={40} height={40} />}\n </Text>\n <Box css={{ flex: '1 1 0', mx: '$8' }}>\n <Text variant=\"h6\" css={{ mb: '$4' }}>\n {title}\n </Text>\n <Text variant=\"sm\" css={{ color: '$on_surface_medium' }}>\n {subtitle}\n </Text>\n </Box>\n <Text css={{ alignSelf: 'center' }}>\n <ChevronRightIcon />\n </Text>\n </Flex>\n );\n};\n\nexport const ContentHeader = ({ onBack, title, content }) => {\n return (\n <Flex css={{ w: '100%', py: '$8', px: '$10', cursor: 'pointer' }}>\n <Text\n css={{ p: '$2', bg: '$surface_bright', r: '$round', alignSelf: 'center' }}\n onClick={onBack}\n data-testid=\"go_back\"\n >\n <ChevronLeftIcon width={16} height={16} />\n </Text>\n <Box css={{ flex: '1 1 0', mx: '$8' }}>\n <Text\n variant=\"tiny\"\n css={{\n textTransform: 'uppercase',\n fontWeight: '$semiBold',\n color: '$on_surface_medium',\n }}\n >\n {title}\n </Text>\n <Text variant=\"h6\">{content}</Text>\n </Box>\n <IconButton onClick={onBack} css={{ alignSelf: 'flex-start' }} data-testid=\"close_stream_section\">\n <CrossIcon width={16} height={16} />\n </IconButton>\n </Flex>\n );\n};\n\nexport const Container = ({ children, rounded = false }) => {\n return (\n <Box\n css={{\n size: '100%',\n zIndex: 2,\n position: 'absolute',\n top: 0,\n left: 0,\n bg: '$surface_default',\n transform: 'translateX(10%)',\n animation: `${slideLeftAndFade('10%')} 100ms ease-out forwards`,\n display: 'flex',\n flexDirection: 'column',\n borderRadius: rounded ? '$2' : '0',\n }}\n >\n {children}\n </Box>\n );\n};\n\nexport const ContentBody = ({ Icon, title, removeVerticalPadding = false, children }) => {\n return (\n <Box css={{ p: removeVerticalPadding ? '$0 $10' : '$10' }}>\n <Text css={{ display: 'flex', alignItems: 'center', mb: '$4' }}>\n <Icon />\n <Text as=\"span\" css={{ fontWeight: '$semiBold', ml: '$4' }}>\n {title}\n </Text>\n </Text>\n <Text variant=\"sm\" css={{ color: '$on_surface_medium' }}>\n {children}\n </Text>\n </Box>\n );\n};\n\nexport const RecordStream = ({ record, setRecord, testId }) => {\n const permissions = useHMSStore(selectPermissions);\n return permissions?.browserRecording ? (\n <Flex align=\"center\" css={{ bg: '$surface_bright', m: '$8 $10', p: '$8', r: '$0' }}>\n <Text css={{ color: '$alert_error_default' }}>\n <RecordIcon />\n </Text>\n <Text variant=\"sm\" css={{ flex: '1 1 0', mx: '$8' }}>\n Record the stream\n </Text>\n <Switch checked={record} onCheckedChange={setRecord} data-testid={testId} />\n </Flex>\n ) : null;\n};\n\nexport const ErrorText = ({ error }) => {\n if (!error) {\n return null;\n }\n return (\n <Text variant=\"sm\" css={{ mb: '$8', color: '$alert_error_default' }}>\n {error}\n </Text>\n );\n};\n", "import React, { useState } from 'react';\nimport { selectLocalPeerID, selectPeerSharingVideoPlaylist, useHMSStore, useScreenShare } from '@100mslive/react-sdk';\nimport {\n AudioPlayerIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n MusicIcon,\n PencilDrawIcon,\n ShareScreenIcon,\n VideoPlayerIcon,\n} from '@100mslive/react-icons';\nimport { Box, Dropdown, Flex, Text, Tooltip } from '../../../';\nimport { useWhiteboardMetadata } from '../../plugins/whiteboard/useWhiteboardMetadata';\nimport { useUISettings } from '../AppData/useUISettings';\nimport { usePlaylistMusic } from '../hooks/usePlaylistMusic';\nimport { useScreenshareAudio } from '../hooks/useScreenshareAudio';\nimport { UI_SETTINGS } from '../../common/constants';\n\nexport const getRecordingText = ({ isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn }, delimiter = ', ') => {\n if (!isBrowserRecordingOn && !isServerRecordingOn && !isHLSRecordingOn) {\n return '';\n }\n const title = [];\n if (isBrowserRecordingOn) {\n title.push('Browser');\n }\n if (isServerRecordingOn) {\n title.push('Server');\n }\n if (isHLSRecordingOn) {\n title.push('HLS');\n }\n return title.join(delimiter);\n};\n\n/**\n * Display state of recording, streaming, playlist, whiteboard\n */\nexport const AdditionalRoomState = () => {\n const playlist = usePlaylistMusic();\n const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);\n const screenshareAudio = useScreenshareAudio();\n const [open, setOpen] = useState(false);\n const isPlaylistInactive = [\n !playlist.peer || !playlist.track,\n !playlist.peer?.isLocal && !playlist.track?.enabled,\n playlist.peer?.isLocal && !playlist.selection,\n ].some(Boolean);\n const isAudioshareInactive = [\n !screenshareAudio.peer || !screenshareAudio.track,\n !screenshareAudio.peer?.isLocal && !screenshareAudio.track?.enabled,\n ].some(Boolean);\n\n const peerSharingPlaylist = useHMSStore(selectPeerSharingVideoPlaylist);\n const localPeerID = useHMSStore(selectLocalPeerID);\n const isVideoPlayListPlaying = !!peerSharingPlaylist?.id;\n const { screenSharingPeerName, screenSharingPeerId, screenShareVideoTrackId } = useScreenShare();\n\n const isVideoScreenSharingOn = !!screenShareVideoTrackId;\n const { whiteboardOwner, amIWhiteboardOwner, toggleWhiteboard } = useWhiteboardMetadata();\n const shouldShowScreenShareState = isAudioOnly && isVideoScreenSharingOn;\n const shouldShowVideoState = isAudioOnly && isVideoPlayListPlaying;\n if (\n isPlaylistInactive &&\n isAudioshareInactive &&\n !shouldShowScreenShareState &&\n !shouldShowVideoState &&\n !whiteboardOwner\n ) {\n return null;\n }\n\n return (\n <Dropdown.Root open={open} onOpenChange={setOpen}>\n <Dropdown.Trigger asChild>\n <Flex\n align=\"center\"\n css={{\n color: '$on_primary_high',\n borderRadius: '$1',\n border: '1px solid $on_surface_low',\n padding: '$4',\n '@sm': { display: 'none' },\n }}\n data-testid=\"record_status_dropdown\"\n >\n {!isAudioshareInactive && (\n <Tooltip title=\"Screenshare Audio\">\n <Flex align=\"center\" css={{ color: '$on_primary_high', mx: '$2' }}>\n <MusicIcon width={24} height={24} />\n </Flex>\n </Tooltip>\n )}\n {shouldShowScreenShareState && (\n <Tooltip title=\"Screenshare\">\n <Flex align=\"center\" css={{ color: '$on_primary_high', mx: '$2' }}>\n <ShareScreenIcon width={24} height={24} />\n </Flex>\n </Tooltip>\n )}\n {shouldShowVideoState && (\n <Tooltip title=\"video playlist\">\n <Flex align=\"center\" css={{ color: '$on_primary_high', mx: '$2' }}>\n <VideoPlayerIcon width={24} height={24} />\n </Flex>\n </Tooltip>\n )}\n {!isPlaylistInactive && (\n <Tooltip title=\"Playlist Music\">\n <Flex align=\"center\" css={{ color: '$on_primary_high', mx: '$2' }}>\n <AudioPlayerIcon width={24} height={24} />\n </Flex>\n </Tooltip>\n )}\n {whiteboardOwner && (\n <Tooltip title=\"Whiteboard\">\n <Flex align=\"center\" css={{ color: '$on_primary_high', mx: '$2' }}>\n <PencilDrawIcon width={24} height={24} />\n </Flex>\n </Tooltip>\n )}\n <Box css={{ '@lg': { display: 'none' }, color: '$on_surface_low' }}>\n {open ? <ChevronUpIcon /> : <ChevronDownIcon />}\n </Box>\n </Flex>\n </Dropdown.Trigger>\n <Dropdown.Content sideOffset={5} align=\"end\" css={{ w: '$60' }}>\n {!isPlaylistInactive && (\n <Dropdown.Item css={{ color: '$on_primary_high' }}>\n <AudioPlayerIcon width={24} height={24} />\n <Text variant=\"sm\" css={{ ml: '$2', flex: '1 1 0' }}>\n Playlist is playing\n </Text>\n {playlist.peer.isLocal ? (\n <Text\n variant=\"sm\"\n css={{ color: '$alert_error_default', cursor: 'pointer', ml: '$2' }}\n onClick={e => {\n e.preventDefault();\n playlist.selection.playing ? playlist.pause() : playlist.play(playlist.selection.id);\n }}\n >\n {playlist.selection.playing ? 'Pause' : 'Play'}\n </Text>\n ) : (\n <Text\n variant=\"sm\"\n css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}\n onClick={e => {\n e.preventDefault();\n playlist.setVolume(!playlist.track.volume ? 100 : 0);\n }}\n >\n {playlist.track.volume === 0 ? 'Unmute' : 'Mute'}\n </Text>\n )}\n </Dropdown.Item>\n )}\n {!isAudioshareInactive && (\n <Dropdown.Item css={{ color: '$on_primary_high' }}>\n <MusicIcon width={24} height={24} />\n <Text variant=\"sm\" css={{ ml: '$2', flex: '1 1 0' }}>\n Music is playing\n </Text>\n <Text\n variant=\"sm\"\n css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}\n onClick={e => {\n e.preventDefault();\n screenshareAudio.onToggle();\n }}\n >\n {screenshareAudio.muted ? 'Unmute' : 'Mute'}\n </Text>\n </Dropdown.Item>\n )}\n {shouldShowScreenShareState && (\n <Dropdown.Item css={{ color: '$on_primary_high' }}>\n <ShareScreenIcon width={24} height={24} />\n <Text variant=\"sm\" css={{ ml: '$2', flex: '1 1 0' }}>\n {`Shared by: ${screenSharingPeerId === localPeerID ? 'You' : screenSharingPeerName}`}\n </Text>\n </Dropdown.Item>\n )}\n {shouldShowVideoState && (\n <Dropdown.Item css={{ color: '$on_primary_high' }}>\n <VideoPlayerIcon width={24} height={24} />\n <Text variant=\"sm\" css={{ ml: '$2', flex: '1 1 0' }}>\n {`Shared by: ${peerSharingPlaylist.id === localPeerID ? 'You' : peerSharingPlaylist.name}`}\n </Text>\n </Dropdown.Item>\n )}\n {whiteboardOwner && (\n <Dropdown.Item css={{ color: '$on_primary_high' }}>\n <PencilDrawIcon width={24} height={24} />\n <Text variant=\"sm\" css={{ ml: '$2', flex: '1 1 0' }}>\n Whiteboard Owner - {whiteboardOwner.name}\n {amIWhiteboardOwner && '(You)'}\n </Text>\n {amIWhiteboardOwner && (\n <Text\n variant=\"sm\"\n css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}\n onClick={e => {\n e.preventDefault();\n toggleWhiteboard();\n }}\n >\n Stop\n </Text>\n )}\n </Dropdown.Item>\n )}\n </Dropdown.Content>\n </Dropdown.Root>\n );\n};\n", "import { useCallback, useEffect, useMemo } from 'react';\nimport { selectLocalPeerID, selectPeerByCondition, useHMSStore } from '@100mslive/react-sdk';\nimport { useMyMetadata } from '../../components/hooks/useMetadata';\nimport { getMetadata } from '../../common/utils';\nimport { FeatureFlags } from '../../services/FeatureFlags';\n\nconst isWhiteboardOwner = peer => {\n return !!getMetadata(peer?.metadata).whiteboardOwner;\n};\n\nexport const useWhiteboardMetadata = () => {\n const localPeerID = useHMSStore(selectLocalPeerID);\n const { updateMetaData } = useMyMetadata();\n const whiteboardOwner = useHMSStore(selectPeerByCondition(isWhiteboardOwner));\n const amIWhiteboardOwner = useMemo(() => localPeerID === whiteboardOwner?.id, [localPeerID, whiteboardOwner]);\n\n /**\n * @param enabled {boolean}\n */\n const toggleWhiteboard = useCallback(async () => {\n if (!process.env.REACT_APP_PUSHER_APP_KEY) {\n console.error('Cannot start whiteboard - Pusher Key unavailable');\n }\n try {\n if (!whiteboardOwner || amIWhiteboardOwner) {\n await updateMetaData({ whiteboardOwner: !whiteboardOwner });\n } else {\n console.warn('Cannot toggle whiteboard as it was shared by another peer');\n }\n } catch (error) {\n console.error('failed to toggle whiteboard to ', !whiteboardOwner, error);\n }\n }, [whiteboardOwner, updateMetaData, amIWhiteboardOwner]);\n\n useEffect(() => {\n window.toggleWhiteboard = toggleWhiteboard;\n }, [toggleWhiteboard]);\n\n return {\n /** is whiteboard enabled for the room */\n whiteboardEnabled: FeatureFlags.enableWhiteboard,\n /** owner of the active whiteboard, can also be used to check if whiteboard is active */\n whiteboardOwner,\n amIWhiteboardOwner,\n toggleWhiteboard,\n };\n};\n", "import { useCallback, useState } from 'react';\nimport { selectLocalPeerID, selectPeerMetadata, useHMSActions, useHMSStore } from '@100mslive/react-sdk';\n\nexport const useMyMetadata = () => {\n const hmsActions = useHMSActions();\n const localPeerId = useHMSStore(selectLocalPeerID);\n const metaData = useHMSStore(selectPeerMetadata(localPeerId));\n const [isHandRaised, setHandRaised] = useState(metaData?.isHandRaised || false);\n const [isBRBOn, setBRBOn] = useState(metaData?.isBRBOn || false); // BRB = be right back\n\n const update = async updatedFields => {\n try {\n await hmsActions.changeMetadata(Object.assign(metaData, updatedFields));\n return true;\n } catch (error) {\n console.error('failed to update metadata ', metaData, updatedFields);\n }\n };\n\n const toggleHandRaise = useCallback(async () => {\n const brbUpdate = !isHandRaised ? false : isBRBOn;\n const success = await update({\n isHandRaised: !isHandRaised,\n isBRBOn: brbUpdate,\n });\n if (success) {\n setBRBOn(brbUpdate);\n setHandRaised(!isHandRaised);\n }\n }, [isHandRaised, isBRBOn]); //eslint-disable-line\n\n const toggleBRB = useCallback(async () => {\n const handRaiseUpdate = !isBRBOn ? false : isHandRaised;\n const success = await update({\n isHandRaised: handRaiseUpdate,\n isBRBOn: !isBRBOn,\n });\n if (success) {\n setBRBOn(!isBRBOn);\n setHandRaised(handRaiseUpdate);\n }\n }, [isHandRaised, isBRBOn]); //eslint-disable-line\n\n return {\n isHandRaised,\n isBRBOn,\n metaData,\n updateMetaData: update,\n toggleHandRaise,\n toggleBRB,\n };\n};\n", "import { useCallback } from 'react';\nimport {\n selectAudioPlaylist,\n selectAudioPlaylistTrackByPeerID,\n selectPeerSharingAudioPlaylist,\n useHMSActions,\n useHMSStore,\n} from '@100mslive/react-sdk';\n\nexport const usePlaylistMusic = () => {\n const peer = useHMSStore(selectPeerSharingAudioPlaylist);\n const track = useHMSStore(selectAudioPlaylistTrackByPeerID(peer?.id));\n const selection = useHMSStore(selectAudioPlaylist.selectedItem);\n const hmsActions = useHMSActions();\n\n const play = useCallback(\n async selectedId => {\n await hmsActions.audioPlaylist.play(selectedId);\n },\n [hmsActions],\n );\n\n const pause = useCallback(() => {\n hmsActions.audioPlaylist.pause();\n }, [hmsActions]);\n\n const setVolume = useCallback(\n value => {\n hmsActions.setVolume(value, track?.id);\n },\n [hmsActions, track],\n );\n\n return { selection, peer, track, play, pause, setVolume };\n};\n", "import { useCallback } from 'react';\nimport {\n selectPeerSharingAudio,\n selectScreenShareAudioByPeerID,\n useHMSActions,\n useHMSStore,\n} from '@100mslive/react-sdk';\n\nexport const useScreenshareAudio = () => {\n const hmsActions = useHMSActions();\n const peer = useHMSStore(selectPeerSharingAudio);\n const track = useHMSStore(selectScreenShareAudioByPeerID(peer?.id));\n\n const handleMute = useCallback(() => {\n if (!peer.isLocal) {\n hmsActions.setVolume(!track.volume ? 100 : 0, track.id);\n } else {\n hmsActions.setEnabledTrack(track.id, !track.enabled).catch(console.error);\n }\n }, [peer, hmsActions, track]);\n\n let muted = undefined;\n if (peer && track) {\n muted = peer.isLocal ? !track.enabled : track.volume === 0;\n }\n\n return { peer, track, muted, onToggle: handleMute };\n};\n", "import React from 'react';\nimport { useMedia } from 'react-use';\nimport { config as cssConfig, Flex } from '../../../';\nimport { EmojiReaction } from '../EmojiReaction';\nimport { LeaveRoom } from '../LeaveRoom';\nimport MetaActions from '../MetaActions';\nimport { SpeakerTag } from './HeaderComponents';\nimport { ParticipantCount } from './ParticipantList';\nimport { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';\n\nexport const StreamingHeader = () => {\n const isMobile = useMedia(cssConfig.media.md);\n return (\n <Flex justify=\"between\" align=\"center\" css={{ position: 'relative', height: '100%' }}>\n <Flex\n align=\"center\"\n css={{\n position: 'absolute',\n left: '$10',\n }}\n >\n {isMobile ? (\n <Flex align=\"center\" gap={2}>\n <LeaveRoom />\n <LiveStatus />\n <RecordingStatus />\n </Flex>\n ) : null}\n <SpeakerTag />\n </Flex>\n\n <Flex\n align=\"center\"\n css={{\n position: 'absolute',\n right: '$10',\n gap: '$4',\n }}\n >\n {isMobile ? (\n <>\n <EmojiReaction />\n <MetaActions compact />\n </>\n ) : (\n <Flex css={{ gap: '$4' }}>\n <StreamActions />\n </Flex>\n )}\n <ParticipantCount />\n </Flex>\n </Flex>\n );\n};\n", "import React, { Fragment, useCallback, useMemo, useState } from 'react';\nimport data from '@emoji-mart/data/sets/14/apple.json';\nimport { init } from 'emoji-mart';\nimport {\n selectAvailableRoleNames,\n selectIsConnectedToRoom,\n selectLocalPeerID,\n selectLocalPeerRoleName,\n useCustomEvent,\n useHMSActions,\n useHMSStore,\n useRecordingStreaming,\n} from '@100mslive/react-sdk';\nimport { EmojiIcon } from '@100mslive/react-icons';\nimport { Dropdown } from '../../Dropdown';\nimport { Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport { styled } from '../../Theme';\nimport { Tooltip } from '../../Tooltip';\nimport IconButton from '../IconButton';\nimport { useHLSViewerRole } from './AppData/useUISettings';\nimport { useDropdownList } from './hooks/useDropdownList';\nimport { useIsFeatureEnabled } from './hooks/useFeatures';\nimport { EMOJI_REACTION_TYPE, FEATURE_LIST, HLS_TIMED_METADATA_DOC_URL } from '../common/constants';\n\ninit({ data });\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 EmojiReaction = () => {\n const [open, setOpen] = useState(false);\n const hmsActions = useHMSActions();\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const roles = useHMSStore(selectAvailableRoleNames);\n const localPeerRole = useHMSStore(selectLocalPeerRoleName);\n const localPeerId = useHMSStore(selectLocalPeerID);\n const hlsViewerRole = useHLSViewerRole();\n const { isStreamingOn } = useRecordingStreaming();\n const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.EMOJI_REACTION);\n const filteredRoles = useMemo(() => roles.filter(role => role !== hlsViewerRole), [roles, hlsViewerRole]);\n useDropdownList({ open: open, name: 'EmojiReaction' });\n\n const onEmojiEvent = useCallback(data => {\n window.showFlyingEmoji(data?.emojiId, data?.senderId);\n }, []);\n\n const { sendEvent } = useCustomEvent({\n type: EMOJI_REACTION_TYPE,\n onEvent: onEmojiEvent,\n });\n\n const sendReaction = async emojiId => {\n const data = {\n type: EMOJI_REACTION_TYPE,\n emojiId: emojiId,\n senderId: localPeerId,\n };\n sendEvent(data, { roleNames: filteredRoles });\n if (isStreamingOn) {\n await hmsActions.sendHLSTimedMetadata([\n {\n payload: JSON.stringify(data),\n duration: 2,\n },\n ]);\n }\n };\n\n if (!isConnected || localPeerRole === hlsViewerRole || !isFeatureEnabled) {\n return null;\n }\n return (\n <Fragment>\n <Dropdown.Root open={open} onOpenChange={setOpen}>\n <Dropdown.Trigger asChild data-testid=\"emoji_reaction_btn\">\n <IconButton>\n <Tooltip title=\"Emoji reaction\">\n <EmojiIcon />\n </Tooltip>\n </IconButton>\n </Dropdown.Trigger>\n <Dropdown.Content sideOffset={5} align=\"center\" css={{ p: '$8', bg: '$surface_default' }}>\n {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 <div style={{ textAlign: 'center' }}>\n <Text\n variant=\"sm\"\n inline={true}\n css={{\n color: '$on_primary_medium',\n }}\n >\n Reactions will be timed for Live Streaming viewers.{' '}\n </Text>\n <Text\n variant=\"sm\"\n inline={true}\n css={{\n color: '$primary_bright',\n fontWeight: '$semiBold',\n }}\n >\n <a\n href={HLS_TIMED_METADATA_DOC_URL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n style={{ color: 'inherit', textDecoration: 'none' }}\n >\n Learn more.\n </a>\n </Text>\n </div>\n </Dropdown.Content>\n </Dropdown.Root>\n </Fragment>\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", "import { useEffect } from 'react';\nimport { useSetAppDataByKey } from '../AppData/useUISettings';\nimport { APP_DATA } from '../../common/constants';\n\nexport const useDropdownList = ({ name, open }) => {\n const [dropdownList = [], setDropdownList] = useSetAppDataByKey(APP_DATA.dropdownList);\n\n useEffect(() => {\n if (open) {\n if (!dropdownList.includes(name)) {\n setDropdownList([...dropdownList, name]);\n }\n } else {\n const index = dropdownList.indexOf(name);\n if (index >= 0) {\n const newDropdownList = [...dropdownList];\n newDropdownList.splice(index, 1);\n setDropdownList(newDropdownList);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, name]);\n};\n", "import React, { Fragment, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { selectIsConnectedToRoom, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';\nimport { AlertTriangleIcon, ExitIcon, HangUpIcon, VerticalMenuIcon } from '@100mslive/react-icons';\nimport { ToastManager } from './Toast/ToastManager';\nimport { Button } from '../../Button';\nimport { Dropdown } from '../../Dropdown';\nimport { IconButton } from '../../IconButton';\nimport { Box, Flex } from '../../Layout';\nimport { Dialog } from '../../Modal';\nimport { Text } from '../../Text';\nimport { styled } from '../../Theme';\nimport { Tooltip } from '../../Tooltip';\nimport { useHMSPrebuiltContext } from '../AppContext';\nimport { DialogCheckbox, DialogContent, DialogRow } from '../primitives/DialogContent';\nimport { useDropdownList } from './hooks/useDropdownList';\nimport { useNavigation } from './hooks/useNavigation';\nimport { isStreamingKit } from '../common/utils';\n\nexport const LeaveRoom = () => {\n const navigate = useNavigation();\n const params = useParams();\n const [open, setOpen] = useState(false);\n const [showEndRoomModal, setShowEndRoomModal] = useState(false);\n const [lockRoom, setLockRoom] = useState(false);\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const permissions = useHMSStore(selectPermissions);\n const hmsActions = useHMSActions();\n const { showLeave, onLeave } = useHMSPrebuiltContext();\n useDropdownList({ open, name: 'LeaveRoom' });\n\n const redirectToLeavePage = () => {\n if (showLeave) {\n if (params.role) {\n navigate('/leave/' + params.roomId + '/' + params.role);\n } else {\n navigate('/leave/' + params.roomId);\n }\n }\n ToastManager.clearAllToast();\n onLeave?.();\n };\n\n const leaveRoom = () => {\n hmsActions.leave();\n redirectToLeavePage();\n };\n\n const endRoom = () => {\n hmsActions.endRoom(lockRoom, 'End Room');\n redirectToLeavePage();\n };\n\n const isStreamKit = isStreamingKit();\n if (!permissions || !isConnected) {\n return null;\n }\n\n return (\n <Fragment>\n {permissions.endRoom ? (\n <Flex>\n <LeaveIconButton\n variant=\"danger\"\n key=\"LeaveRoom\"\n data-testid=\"leave_room_btn\"\n css={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}\n onClick={leaveRoom}\n >\n <Tooltip title=\"Leave Room\">\n {!isStreamKit ? (\n <Box>\n <HangUpIcon key=\"hangUp\" />\n </Box>\n ) : (\n <Flex gap={2}>\n <Box css={{ '@md': { transform: 'rotate(180deg)' } }}>\n <ExitIcon key=\"hangUp\" />\n </Box>\n <Text css={{ '@md': { display: 'none' }, color: 'inherit' }} variant=\"button\">\n Leave Studio\n </Text>\n </Flex>\n )}\n </Tooltip>\n </LeaveIconButton>\n <Dropdown.Root open={open} onOpenChange={setOpen}>\n <Dropdown.Trigger\n asChild\n css={{\n '&[data-state=\"open\"]': {\n bg: '$alert_error_dim',\n },\n }}\n >\n <MenuTriggerButton variant=\"danger\" data-testid=\"leave_end_dropdown_trigger\">\n <VerticalMenuIcon />\n </MenuTriggerButton>\n </Dropdown.Trigger>\n <Dropdown.Content css={{ p: 0 }} alignOffset={-50} sideOffset={10}>\n <Dropdown.Item\n css={{ w: '100%', bg: 'rgba(178, 71, 81, 0.1)' }}\n onClick={() => {\n setShowEndRoomModal(true);\n }}\n data-testid=\"end_room_btn\"\n >\n <Flex gap={4}>\n <Box css={{ color: '$alert_error_default' }}>\n <AlertTriangleIcon />\n </Box>\n <Flex direction=\"column\" align=\"start\">\n <Text variant=\"lg\" css={{ c: '$alert_error_default' }}>\n End Room for All\n </Text>\n <Text variant=\"sm\" css={{ c: '$on_surface_medium', mt: '$2' }}>\n Warning: You can\u2019t undo this action\n </Text>\n </Flex>\n </Flex>\n </Dropdown.Item>\n <Dropdown.Item css={{ bg: '$surface_default' }} onClick={leaveRoom} data-testid=\"just_leave_btn\">\n <Flex gap={4}>\n <Box>\n <ExitIcon />\n </Box>\n <Flex direction=\"column\" align=\"start\">\n <Text variant=\"lg\">Leave {isStreamKit ? 'Studio' : 'Room'}</Text>\n <Text variant=\"sm\" css={{ c: '$on_surface_medium', mt: '$2' }}>\n You can always rejoin later\n </Text>\n </Flex>\n </Flex>\n </Dropdown.Item>\n </Dropdown.Content>\n </Dropdown.Root>\n </Flex>\n ) : (\n <LeaveIconButton onClick={leaveRoom} variant=\"danger\" key=\"LeaveRoom\" data-testid=\"leave_room_btn\">\n <Tooltip title=\"Leave Room\">\n <Box>\n {isStreamKit ? (\n <Box css={{ '@md': { transform: 'rotate(180deg)' } }}>\n <ExitIcon />\n </Box>\n ) : (\n <HangUpIcon key=\"hangUp\" />\n )}\n </Box>\n </Tooltip>\n </LeaveIconButton>\n )}\n\n <Dialog.Root\n open={showEndRoomModal}\n onOpenChange={value => {\n if (!value) {\n setLockRoom(false);\n }\n setShowEndRoomModal(value);\n }}\n >\n <DialogContent title=\"End Room\" Icon={HangUpIcon}>\n <DialogCheckbox id=\"lockRoom\" title=\"Disable future joins\" value={lockRoom} onChange={setLockRoom} />\n <DialogRow justify=\"end\">\n <Button variant=\"danger\" onClick={endRoom} data-testid=\"lock_end_room\">\n End Room\n </Button>\n </DialogRow>\n </DialogContent>\n </Dialog.Root>\n </Fragment>\n );\n};\n\nconst LeaveIconButton = styled(IconButton, {\n color: '$on_primary_high',\n h: '$14',\n px: '$8',\n r: '$1',\n bg: '$alert_error_default',\n '&:not([disabled]):hover': {\n bg: '$alert_error_default',\n },\n '&:not([disabled]):active': {\n bg: '$alert_error_default',\n },\n '@md': {\n px: '$4',\n mx: 0,\n },\n});\n\nconst MenuTriggerButton = styled(LeaveIconButton, {\n borderLeft: '1px solid $alert_error_dim',\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n px: '$3',\n '@md': {\n px: '$2',\n },\n});\n", "import React from 'react';\nimport { selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';\nimport { BrbIcon, HandIcon } from '@100mslive/react-icons';\nimport { Flex } from '../../Layout';\nimport { Tooltip } from '../../Tooltip';\nimport IconButton from '../IconButton';\nimport { useIsFeatureEnabled } from './hooks/useFeatures';\nimport { useMyMetadata } from './hooks/useMetadata';\nimport { FEATURE_LIST } from '../common/constants';\n\nconst MetaActions = ({ isMobile = false, compact = false }) => {\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata();\n const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE);\n const isBRBEnabled = useIsFeatureEnabled(FEATURE_LIST.BRB);\n\n if (!isConnected || (!isHandRaiseEnabled && !isBRBEnabled)) {\n return null;\n }\n\n return (\n <Flex align=\"center\" css={{ gap: compact ? '$4' : '$8' }}>\n {isHandRaiseEnabled && (\n <Tooltip title={`${!isHandRaised ? 'Raise' : 'Unraise'} hand`}>\n <IconButton\n onClick={toggleHandRaise}\n active={!isHandRaised}\n data-testid={isMobile ? 'raise_hand_btn_mobile' : 'raise_hand_btn'}\n >\n <HandIcon />\n </IconButton>\n </Tooltip>\n )}\n {isBRBEnabled && (\n <Tooltip title={isBRBOn ? `I'm back` : `I'll be right back`}>\n <IconButton onClick={toggleBRB} active={!isBRBOn} data-testid=\"brb_btn\">\n <BrbIcon />\n </IconButton>\n </Tooltip>\n )}\n </Flex>\n );\n};\n\nexport default MetaActions;\n", "import React from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useSearchParam } from 'react-use';\nimport { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';\nimport { Box, Flex } from '../../../';\nimport SidePane from '../../layouts/SidePane';\nimport FullPageProgress from '../FullPageProgress';\nimport { Header } from '../Header';\nimport PreviewJoin from './PreviewJoin';\nimport { useAuthToken } from '../AppData/useUISettings';\nimport { useNavigation } from '../hooks/useNavigation';\nimport { useSkipPreview } from '../hooks/useSkipPreview';\nimport { QUERY_PARAM_NAME, QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';\n\nconst PreviewContainer = () => {\n const navigate = useNavigation();\n const skipPreview = useSkipPreview();\n const previewAsRole = useSearchParam(QUERY_PARAM_PREVIEW_AS_ROLE);\n const initialName = useSearchParam(QUERY_PARAM_NAME) || (skipPreview ? 'Beam' : '');\n const { roomId: urlRoomId, role: userRole } = useParams(); // from the url\n const authToken = useAuthToken();\n\n const roomState = useHMSStore(selectRoomState);\n const isPreview = roomState === HMSRoomState.Preview;\n\n const onJoin = () => {\n let meetingURL = `/meeting/${urlRoomId}`;\n if (userRole) {\n meetingURL += `/${userRole}`;\n }\n navigate(meetingURL);\n };\n return (\n <Flex direction=\"column\" css={{ size: '100%' }}>\n {isPreview ? null : (\n <Box css={{ h: '$18', '@md': { h: '$17', flexShrink: 0 } }} data-testid=\"header\">\n <Header />\n </Box>\n )}\n <Flex\n css={{ flex: '1 1 0', position: 'relative', overflowY: 'auto', color: '$primary_default' }}\n justify=\"center\"\n align=\"center\"\n >\n {authToken ? (\n <PreviewJoin initialName={initialName} skipPreview={skipPreview} asRole={previewAsRole} onJoin={onJoin} />\n ) : (\n <FullPageProgress />\n )}\n <SidePane\n css={{\n position: 'unset',\n mr: '$10',\n '@lg': { position: 'fixed', mr: '$0' },\n }}\n />\n </Flex>\n </Flex>\n );\n};\n\nexport default PreviewContainer;\n", "import React from 'react';\nimport { selectAppData, useHMSStore } from '@100mslive/react-sdk';\nimport { Chat } from '../components/Chat/Chat';\nimport { ParticipantList } from '../components/Header/ParticipantList';\nimport { StreamingLanding } from '../components/Streaming/StreamingLanding';\nimport { Box } from '../../Layout';\nimport { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';\n\nconst SidePane = ({ css = {} }) => {\n const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));\n let ViewComponent;\n if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS) {\n ViewComponent = ParticipantList;\n } else if (sidepane === SIDE_PANE_OPTIONS.CHAT) {\n ViewComponent = Chat;\n } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {\n ViewComponent = StreamingLanding;\n }\n if (!ViewComponent) {\n return null;\n }\n return (\n <Box\n css={{\n position: 'absolute',\n w: '$100',\n h: '100%',\n p: '$10',\n bg: '$surface_default',\n r: '$1',\n top: 0,\n right: '$10',\n zIndex: 10,\n boxShadow: '$md',\n ...css,\n '@lg': {\n w: '100%',\n right: 0,\n position: 'fixed',\n bottom: 0,\n height: 'unset',\n ...(css['@lg'] || {}),\n },\n }}\n >\n <ViewComponent />\n </Box>\n );\n};\n\nexport default SidePane;\n", "import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n HMSNotificationTypes,\n selectHMSMessagesCount,\n selectPeerNameByID,\n selectPermissions,\n selectSessionStore,\n useHMSActions,\n useHMSNotifications,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { ChevronDownIcon, CrossIcon, PinIcon } from '@100mslive/react-icons';\nimport { Button } from '../../../Button';\nimport { Box, Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport IconButton from '../../IconButton';\nimport { AnnotisedMessage, ChatBody } from './ChatBody';\nimport { ChatFooter } from './ChatFooter';\nimport { ChatHeader } from './ChatHeader';\nimport { useSetSubscribedChatSelector } from '../AppData/useUISettings';\nimport { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';\nimport { useUnreadCount } from './useUnreadCount';\nimport { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';\n\nconst PinnedMessage = ({ clearPinnedMessage }) => {\n const permissions = useHMSStore(selectPermissions);\n const pinnedMessage = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGE));\n\n return pinnedMessage ? (\n <Flex\n css={{ p: '$8', color: '$on_surface_medium', bg: '$surface_bright', r: '$1' }}\n align=\"center\"\n justify=\"between\"\n >\n <Box>\n <PinIcon />\n </Box>\n <Box\n css={{\n ml: '$8',\n color: '$on_surface_medium',\n w: '100%',\n maxHeight: '$18',\n overflowY: 'auto',\n }}\n >\n <Text variant=\"sm\">\n <AnnotisedMessage message={pinnedMessage} />\n </Text>\n </Box>\n {permissions.removeOthers && (\n <IconButton onClick={() => clearPinnedMessage()}>\n <CrossIcon />\n </IconButton>\n )}\n </Flex>\n ) : null;\n};\n\nexport const Chat = () => {\n const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);\n const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);\n const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);\n const peerName = useHMSStore(selectPeerNameByID(peerSelector));\n const [chatOptions, setChatOptions] = useState({\n role: roleSelector || '',\n peerId: peerSelector && peerName ? peerSelector : '',\n selection: roleSelector ? roleSelector : peerSelector && peerName ? peerName : 'Everyone',\n });\n const [isSelectorOpen, setSelectorOpen] = useState(false);\n const listRef = useRef(null);\n const hmsActions = useHMSActions();\n const { setPinnedMessage } = useSetPinnedMessage();\n useEffect(() => {\n if (notification && notification.data && peerSelector === notification.data.id) {\n setPeerSelector('');\n setChatOptions({\n role: '',\n peerId: '',\n selection: 'Everyone',\n });\n }\n }, [notification, peerSelector, setPeerSelector]);\n\n const storeMessageSelector = selectHMSMessagesCount;\n\n const messagesCount = useHMSStore(storeMessageSelector) || 0;\n const scrollToBottom = useCallback(\n (unreadCount = 0) => {\n if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {\n listRef.current?.scrollToItem(messagesCount, 'end');\n requestAnimationFrame(() => {\n listRef.current?.scrollToItem(messagesCount, 'end');\n });\n hmsActions.setMessageRead(true);\n }\n },\n [hmsActions, messagesCount],\n );\n\n return (\n <Flex direction=\"column\" css={{ size: '100%' }}>\n <ChatHeader\n selectorOpen={isSelectorOpen}\n selection={chatOptions.selection}\n onSelect={({ role, peerId, selection }) => {\n setChatOptions({\n role,\n peerId,\n selection,\n });\n setPeerSelector(peerId);\n setRoleSelector(role);\n }}\n role={chatOptions.role}\n peerId={chatOptions.peerId}\n onToggle={() => {\n setSelectorOpen(value => !value);\n }}\n />\n <PinnedMessage clearPinnedMessage={setPinnedMessage} />\n\n <ChatBody role={chatOptions.role} peerId={chatOptions.peerId} ref={listRef} scrollToBottom={scrollToBottom} />\n <ChatFooter role={chatOptions.role} peerId={chatOptions.peerId} onSend={() => scrollToBottom(1)}>\n {!isSelectorOpen && (\n <NewMessageIndicator role={chatOptions.role} peerId={chatOptions.peerId} scrollToBottom={scrollToBottom} />\n )}\n </ChatFooter>\n </Flex>\n );\n};\n\nconst NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {\n const unreadCount = useUnreadCount({ role, peerId });\n if (!unreadCount) {\n return null;\n }\n return (\n <Flex\n justify=\"center\"\n css={{\n width: '100%',\n left: 0,\n bottom: '100%',\n position: 'absolute',\n }}\n >\n <Button\n onClick={() => {\n scrollToBottom(unreadCount);\n }}\n css={{ p: '$2 $4', '& > svg': { ml: '$4' } }}\n >\n New Messages\n <ChevronDownIcon width={16} height={16} />\n </Button>\n </Flex>\n );\n};\n", "import React, { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { useInView } from 'react-intersection-observer';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { VariableSizeList } from 'react-window';\nimport {\n selectHMSMessages,\n selectLocalPeerID,\n selectLocalPeerRoleName,\n selectMessagesByPeerID,\n selectMessagesByRole,\n selectPeerNameByID,\n selectPermissions,\n useHMSActions,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { HorizontalMenuIcon, PinIcon } from '@100mslive/react-icons';\nimport { Dropdown } from '../../../Dropdown';\nimport { IconButton } from '../../../IconButton';\nimport { Box, Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport { styled } from '../../../Theme';\nimport { Tooltip } from '../../../Tooltip';\nimport { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';\n\nconst formatTime = date => {\n if (!(date instanceof Date)) {\n return '';\n }\n let hours = date.getHours();\n let mins = date.getMinutes();\n const suffix = hours > 11 ? 'PM' : 'AM';\n if (hours < 10) {\n hours = '0' + hours;\n }\n if (mins < 10) {\n mins = '0' + mins;\n }\n return `${hours}:${mins} ${suffix}`;\n};\n\nconst MessageTypeContainer = ({ left, right }) => {\n return (\n <Flex\n align=\"center\"\n css={{\n ml: 'auto',\n mr: '$4',\n p: '$2 $4',\n border: '1px solid $on_surface_low',\n r: '$0',\n }}\n >\n {left && (\n <SenderName variant=\"tiny\" as=\"span\" css={{ color: '$on_surface_medium' }}>\n {left}\n </SenderName>\n )}\n {left && right && <Box css={{ borderLeft: '1px solid $on_surface_low', mx: '$4', h: '$8' }} />}\n {right && (\n <SenderName as=\"span\" variant=\"tiny\">\n {right}\n </SenderName>\n )}\n </Flex>\n );\n};\n\nconst MessageType = ({ roles, hasCurrentUserSent, receiver }) => {\n const peerName = useHMSStore(selectPeerNameByID(receiver));\n const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);\n if (receiver) {\n return (\n <MessageTypeContainer\n left={hasCurrentUserSent ? `${peerName ? `TO ${peerName}` : ''}` : 'TO YOU'}\n right=\"PRIVATE\"\n />\n );\n }\n\n if (roles && roles.length) {\n return <MessageTypeContainer left=\"TO\" right={hasCurrentUserSent ? roles.join(',') : localPeerRoleName} />;\n }\n return null;\n};\n\nconst URL_REGEX =\n /^https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;\n\nconst Link = styled('a', {\n color: '$primary_default',\n wordBreak: 'break-word',\n '&:hover': {\n textDecoration: 'underline',\n },\n});\n\nexport const AnnotisedMessage = ({ message }) => {\n if (!message) {\n return <Fragment />;\n }\n\n return (\n <Fragment>\n {message\n .trim()\n .split(/(\\s)/)\n .map(part =>\n URL_REGEX.test(part) ? (\n <Link href={part} key={part} target=\"_blank\" rel=\"noopener noreferrer\">\n {part}\n </Link>\n ) : (\n part\n ),\n )}\n </Fragment>\n );\n};\n\nconst getMessageType = ({ roles, receiver }) => {\n if (roles && roles.length > 0) {\n return 'role';\n }\n return receiver ? 'private' : '';\n};\n\nconst ChatActions = ({ onPin }) => {\n const [open, setOpen] = useState(false);\n\n return (\n <Dropdown.Root open={open} onOpenChange={setOpen}>\n <Dropdown.Trigger asChild>\n <IconButton>\n <Tooltip title=\"More options\">\n <HorizontalMenuIcon />\n </Tooltip>\n </IconButton>\n </Dropdown.Trigger>\n <Dropdown.Portal>\n <Dropdown.Content\n sideOffset={5}\n align=\"end\"\n css={{ width: '$48', backgroundColor: '$surface_bright', py: '$0' }}\n >\n <Dropdown.Item data-testid=\"pin_message_btn\" onClick={onPin}>\n <PinIcon />\n <Text variant=\"sm\" css={{ ml: '$4' }}>\n Pin Message\n </Text>\n </Dropdown.Item>\n </Dropdown.Content>\n </Dropdown.Portal>\n </Dropdown.Root>\n );\n};\n\nconst SenderName = styled(Text, {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n maxWidth: '24ch',\n minWidth: 0,\n});\n\nconst ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPin }) => {\n const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });\n const rowRef = useRef(null);\n useEffect(() => {\n if (rowRef.current) {\n setRowHeight(index, rowRef.current.clientHeight);\n }\n }, [index, setRowHeight]);\n\n const hmsActions = useHMSActions();\n const localPeerId = useHMSStore(selectLocalPeerID);\n const permissions = useHMSStore(selectPermissions);\n const messageType = getMessageType({\n roles: message.recipientRoles,\n receiver: message.recipientPeer,\n });\n // show pin action only if peer has remove others permission and the message is of broadcast type\n const showPinAction = permissions.removeOthers && !messageType;\n\n useEffect(() => {\n if (message.id && !message.read && inView) {\n hmsActions.setMessageRead(true, message.id);\n }\n }, [message.read, hmsActions, inView, message.id]);\n\n return (\n <Box ref={ref} as=\"div\" css={{ mb: '$10', pr: '$10' }} style={style}>\n <Flex\n ref={rowRef}\n align=\"center\"\n css={{\n flexWrap: 'wrap',\n bg: messageType ? '$surface_bright' : undefined,\n r: messageType ? '$1' : undefined,\n px: messageType ? '$4' : '$2',\n py: messageType ? '$4' : 0,\n userSelect: 'none',\n }}\n key={message.time}\n data-testid=\"chat_msg\"\n >\n <Text\n css={{\n color: '$on_surface_high',\n fontWeight: '$semiBold',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n width: '100%',\n }}\n as=\"div\"\n >\n <Flex align=\"center\">\n {message.senderName === 'You' || !message.senderName ? (\n <SenderName as=\"span\">{message.senderName || 'Anonymous'}</SenderName>\n ) : (\n <Tooltip title={message.senderName} side=\"top\" align=\"start\">\n <SenderName as=\"span\">{message.senderName}</SenderName>\n </Tooltip>\n )}\n <Text\n as=\"span\"\n variant=\"sm\"\n css={{\n ml: '$4',\n color: '$on_primary_medium',\n flexShrink: 0,\n }}\n >\n {formatTime(message.time)}\n </Text>\n </Flex>\n <MessageType\n hasCurrentUserSent={message.sender === localPeerId}\n receiver={message.recipientPeer}\n roles={message.recipientRoles}\n />\n {showPinAction && <ChatActions onPin={onPin} />}\n </Text>\n <Text\n variant=\"body2\"\n css={{\n w: '100%',\n mt: '$2',\n wordBreak: 'break-word',\n whiteSpace: 'pre-wrap',\n userSelect: 'all',\n }}\n onClick={e => e.stopPropagation()}\n >\n <AnnotisedMessage message={message.message} />\n </Text>\n </Flex>\n </Box>\n );\n});\nconst ChatList = React.forwardRef(\n ({ width, height, setRowHeight, getRowHeight, messages, scrollToBottom }, listRef) => {\n const { setPinnedMessage } = useSetPinnedMessage();\n useLayoutEffect(() => {\n if (listRef.current && listRef.current.scrollToItem) {\n scrollToBottom(1);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [listRef]);\n\n return (\n <VariableSizeList\n ref={listRef}\n itemCount={messages.length}\n itemSize={getRowHeight}\n width={width}\n height={height - 1}\n style={{\n overflowX: 'hidden',\n }}\n >\n {({ index, style }) => (\n <ChatMessage\n style={style}\n index={index}\n key={messages[index].id}\n message={messages[index]}\n setRowHeight={setRowHeight}\n onPin={() => setPinnedMessage(messages[index])}\n />\n )}\n </VariableSizeList>\n );\n },\n);\nconst VirtualizedChatMessages = React.forwardRef(({ messages, scrollToBottom }, listRef) => {\n const rowHeights = useRef({});\n\n function getRowHeight(index) {\n // 72 will be default row height for any message length\n // 16 will add margin value as clientHeight don't include margin\n return rowHeights.current[index] + 16 || 72;\n }\n\n const setRowHeight = useCallback(\n (index, size) => {\n listRef.current.resetAfterIndex(0);\n rowHeights.current = { ...rowHeights.current, [index]: size };\n },\n [listRef],\n );\n\n return (\n <Box\n css={{\n mr: '-$10',\n h: '100%',\n }}\n as=\"div\"\n >\n <AutoSizer\n style={{\n width: '90%',\n }}\n >\n {({ height, width }) => (\n <ChatList\n width={width}\n height={height}\n messages={messages}\n setRowHeight={setRowHeight}\n getRowHeight={getRowHeight}\n scrollToBottom={scrollToBottom}\n ref={listRef}\n />\n )}\n </AutoSizer>\n </Box>\n );\n});\n\nexport const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {\n const storeMessageSelector = role\n ? selectMessagesByRole(role)\n : peerId\n ? selectMessagesByPeerID(peerId)\n : selectHMSMessages;\n const messages = useHMSStore(storeMessageSelector) || [];\n\n if (messages.length === 0) {\n return (\n <Flex\n css={{\n width: '100%',\n height: '100%',\n textAlign: 'center',\n px: '$4',\n }}\n align=\"center\"\n justify=\"center\"\n >\n <Text>There are no messages here</Text>\n </Flex>\n );\n }\n\n return (\n <Fragment>\n <VirtualizedChatMessages messages={messages} scrollToBottom={scrollToBottom} ref={listRef} />\n </Fragment>\n );\n});\n", "// @ts-check\nimport { useCallback } from 'react';\nimport {\n selectPeerNameByID,\n selectSessionMetadata,\n useHMSActions,\n useHMSStore,\n useHMSVanillaStore,\n} from '@100mslive/react-sdk';\nimport { ToastManager } from '../Toast/ToastManager';\nimport { SESSION_STORE_KEY } from '../../common/constants';\n\n/**\n * set pinned chat message by updating the session store\n */\nexport const useSetPinnedMessage = () => {\n const hmsActions = useHMSActions();\n const vanillaStore = useHMSVanillaStore();\n const pinnedMessage = useHMSStore(selectSessionMetadata);\n\n const setPinnedMessage = useCallback(\n /**\n * @param {import(\"@100mslive/react-sdk\").HMSMessage | undefined} message\n */\n async message => {\n const peerName = vanillaStore.getState(selectPeerNameByID(message?.sender)) || message?.senderName;\n const newPinnedMessage = message ? (peerName ? `${peerName}: ${message.message}` : message.message) : null;\n if (newPinnedMessage !== pinnedMessage) {\n await hmsActions.sessionStore\n .set(SESSION_STORE_KEY.PINNED_MESSAGE, newPinnedMessage)\n .catch(err => ToastManager.addToast({ title: err.description }));\n }\n },\n [hmsActions, vanillaStore, pinnedMessage],\n );\n\n return { setPinnedMessage };\n};\n", "import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { useHMSActions } from '@100mslive/react-sdk';\nimport { EmojiIcon, SendIcon } from '@100mslive/react-icons';\nimport { Box, Flex, IconButton, Popover, styled } from '../../../';\nimport { ToastManager } from '../Toast/ToastManager';\nimport { useChatDraftMessage } from '../AppData/useChatState';\nimport { useEmojiPickerStyles } from './useEmojiPickerStyles';\n\nconst TextArea = styled('textarea', {\n width: '100%',\n bg: 'transparent',\n color: '$on_primary_high',\n resize: 'none',\n lineHeight: '1rem',\n position: 'relative',\n fontFamily: '$sans',\n fontSize: '100%',\n margin: 0,\n padding: 0,\n top: '$3',\n '&:focus': {\n boxShadow: 'none',\n outline: 'none',\n },\n});\n\nfunction EmojiPicker({ onSelect }) {\n const [showEmoji, setShowEmoji] = useState(false);\n const ref = useEmojiPickerStyles(showEmoji);\n return (\n <Popover.Root open={showEmoji} onOpenChange={setShowEmoji}>\n <Popover.Trigger asChild css={{ appearance: 'none' }}>\n <IconButton as=\"div\">\n <EmojiIcon />\n </IconButton>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n alignOffset={-40}\n sideOffset={16}\n align=\"end\"\n css={{\n p: 0,\n }}\n >\n <Box\n css={{\n minWidth: 352,\n minHeight: 435,\n }}\n ref={ref}\n >\n <Picker onEmojiSelect={onSelect} data={data} previewPosition=\"none\" skinPosition=\"search\" />\n </Box>\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n );\n}\n\nexport const ChatFooter = ({ role, peerId, onSend, children }) => {\n const hmsActions = useHMSActions();\n const inputRef = useRef(null);\n const [draftMessage, setDraftMessage] = useChatDraftMessage();\n\n const sendMessage = useCallback(async () => {\n const message = inputRef.current.value;\n if (!message || !message.trim().length) {\n return;\n }\n try {\n if (role) {\n await hmsActions.sendGroupMessage(message, [role]);\n } else if (peerId) {\n await hmsActions.sendDirectMessage(message, peerId);\n } else {\n await hmsActions.sendBroadcastMessage(message);\n }\n inputRef.current.value = '';\n setTimeout(() => {\n onSend();\n }, 0);\n } catch (error) {\n ToastManager.addToast({ title: error.message });\n }\n }, [role, peerId, hmsActions, onSend]);\n\n useEffect(() => {\n const messageElement = inputRef.current;\n if (messageElement) {\n messageElement.value = draftMessage;\n }\n }, [draftMessage]);\n\n useEffect(() => {\n const messageElement = inputRef.current;\n return () => {\n setDraftMessage(messageElement?.value || '');\n };\n }, [setDraftMessage]);\n\n return (\n <Flex\n align=\"center\"\n css={{\n bg: '$surface_bright',\n minHeight: '$16',\n maxHeight: '$24',\n position: 'relative',\n py: '$6',\n pl: '$8',\n r: '$1',\n }}\n >\n {children}\n <TextArea\n placeholder=\"Write something here\"\n ref={inputRef}\n autoFocus\n onKeyPress={async event => {\n if (event.key === 'Enter') {\n if (!event.shiftKey) {\n event.preventDefault();\n await sendMessage();\n }\n }\n }}\n autoComplete=\"off\"\n aria-autocomplete=\"none\"\n onPaste={e => e.stopPropagation()}\n onCut={e => e.stopPropagation()}\n onCopy={e => e.stopPropagation()}\n />\n <EmojiPicker\n onSelect={emoji => {\n inputRef.current.value += ` ${emoji.native} `;\n }}\n />\n <IconButton\n onClick={sendMessage}\n css={{ ml: 'auto', height: 'max-content', mr: '$4' }}\n data-testid=\"send_msg_btn\"\n >\n <SendIcon />\n </IconButton>\n </Flex>\n );\n};\n", "import { useCallback } from 'react';\nimport { selectAppData, useHMSActions, useHMSStore } from '@100mslive/react-sdk';\nimport { APP_DATA } from '../../common/constants';\n\nexport const useChatDraftMessage = () => {\n const hmsActions = useHMSActions();\n let chatDraftMessage = useHMSStore(selectAppData(APP_DATA.chatDraft));\n if (chatDraftMessage === undefined || chatDraftMessage === null) {\n chatDraftMessage = '';\n }\n const setDraftMessage = useCallback(\n message => {\n hmsActions.setAppData(APP_DATA.chatDraft, message, true);\n },\n [hmsActions],\n );\n return [chatDraftMessage, setDraftMessage];\n};\n", "import { useEffect, useRef } from 'react';\n\nexport const useEmojiPickerStyles = showing => {\n const ref = useRef(null);\n useEffect(() => {\n if (showing) {\n setTimeout(() => {\n const root = ref.current?.querySelector('em-emoji-picker')?.shadowRoot;\n const style = document.createElement('style');\n style.textContent = `\n #root {\n --em-rgb-color: var(--hms-ui-colors-on_primary_high);\n --em-rgb-input: var(--hms-ui-colors-on_primary_high);\n --em-color-border: var(--hms-ui-colors-surface_default);\n --color-b: var(--hms-ui-colors-on_primary_high);\n --rgb-background: transparent;\n color: var(--hms-ui-colors-on_primary_high);\n font-family: var(--hms-ui-fonts-sans);\n }\n .sticky {\n background-color: var(--hms-ui-colors-surface_bright);\n }\n `;\n root?.appendChild(style);\n }, 0);\n }\n }, [showing]);\n\n return ref;\n};\n", "import React, { useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@100mslive/react-icons';\nimport { Box, Dropdown, Flex, IconButton, Text, textEllipsis } from '../../../';\nimport { ChatSelector } from './ChatSelector';\nimport { useSidepaneToggle } from '../AppData/useSidepane';\nimport { SIDE_PANE_OPTIONS } from '../../common/constants';\n\nexport const ChatHeader = React.memo(({ selection, selectorOpen, onToggle, onSelect, role, peerId }) => {\n const [open, setOpen] = useState(false);\n const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);\n return (\n <Flex\n onClick={onToggle}\n align=\"center\"\n css={{\n color: '$on_primary_high',\n h: '$16',\n mb: '$2',\n }}\n >\n <Text variant=\"h6\">Chat </Text>\n <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>\n <Dropdown.Trigger\n asChild\n data-testid=\"participant_list_filter\"\n css={{\n border: '1px solid $on_surface_low',\n r: '$0',\n p: '$2 $4',\n ml: '$8',\n }}\n tabIndex={0}\n >\n <Flex align=\"center\">\n <Text variant=\"sm\" css={{ ...textEllipsis(80) }}>\n {selection}\n </Text>\n <Box css={{ ml: '$2', color: '$on_surface_low' }}>\n {open ? <ChevronUpIcon width={14} height={14} /> : <ChevronDownIcon width={14} height={14} />}\n </Box>\n </Flex>\n </Dropdown.Trigger>\n <Dropdown.Content\n css={{\n w: '$64',\n overflow: 'hidden',\n maxHeight: 'unset',\n }}\n align=\"start\"\n sideOffset={8}\n >\n <ChatSelector onSelect={onSelect} role={role} peerId={peerId} />\n </Dropdown.Content>\n </Dropdown.Root>\n <IconButton\n css={{ ml: 'auto' }}\n onClick={e => {\n e.stopPropagation();\n selectorOpen ? onToggle() : toggleChat();\n }}\n data-testid=\"close_chat\"\n >\n <CrossIcon />\n </IconButton>\n </Flex>\n );\n});\n", "import React, { Fragment, useMemo, useState } from 'react';\nimport { useMeasure } from 'react-use';\nimport { FixedSizeList } from 'react-window';\nimport {\n selectMessagesUnreadCountByPeerID,\n selectMessagesUnreadCountByRole,\n selectRemotePeers,\n selectUnreadHMSMessagesCount,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { CheckIcon } from '@100mslive/react-icons';\nimport { Box, Dropdown, Flex, HorizontalDivider, Text, Tooltip } from '../../../';\nimport { ParticipantSearch } from '../Header/ParticipantList';\nimport { useFilteredRoles } from '../../common/hooks';\n\nconst ChatDotIcon = () => {\n return <Box css={{ size: '$6', bg: '$primary_default', mx: '$2', r: '$round' }} />;\n};\n\nconst SelectorItem = ({ value, active, onClick, unreadCount }) => {\n return (\n <Dropdown.Item data-testid=\"chat_members\" css={{ align: 'center', px: '$10' }} onClick={onClick}>\n <Text variant=\"sm\">{value}</Text>\n <Flex align=\"center\" css={{ ml: 'auto', color: '$on_primary_high' }}>\n {unreadCount > 0 && (\n <Tooltip title={`${unreadCount} unread`}>\n <Box css={{ mr: active ? '$3' : 0 }}>\n <ChatDotIcon />\n </Box>\n </Tooltip>\n )}\n {active && <CheckIcon width={16} height={16} />}\n </Flex>\n </Dropdown.Item>\n );\n};\n\nconst SelectorHeader = React.memo(({ children }) => {\n return (\n <Box css={{ flexShrink: 0 }}>\n <HorizontalDivider space={4} />\n <Text variant=\"md\" css={{ p: '$4 $10', fontWeight: '$semiBold' }}>\n {children}\n </Text>\n </Box>\n );\n});\n\nconst Everyone = React.memo(({ onSelect, active }) => {\n const unreadCount = useHMSStore(selectUnreadHMSMessagesCount);\n return (\n <SelectorItem\n value=\"Everyone\"\n active={active}\n unreadCount={unreadCount}\n onClick={() => {\n onSelect({ role: '', peerId: '', selection: 'Everyone' });\n }}\n />\n );\n});\n\nconst RoleItem = React.memo(({ onSelect, role, active }) => {\n const unreadCount = useHMSStore(selectMessagesUnreadCountByRole(role));\n return (\n <SelectorItem\n value={role}\n active={active}\n unreadCount={unreadCount}\n onClick={() => {\n onSelect({ role: role, selection: role });\n }}\n />\n );\n});\n\nconst PeerItem = ({ onSelect, peerId, name, active }) => {\n const unreadCount = useHMSStore(selectMessagesUnreadCountByPeerID(peerId));\n return (\n <SelectorItem\n value={name}\n active={active}\n unreadCount={unreadCount}\n onClick={() => {\n onSelect({ role: '', peerId, selection: name });\n }}\n />\n );\n};\n\nconst VirtualizedSelectItemList = ({ peers, selectedRole, selectedPeerId, searchValue, onSelect }) => {\n const [ref, { width, height }] = useMeasure();\n const roles = useFilteredRoles();\n const filteredPeers = useMemo(\n () =>\n peers.filter(\n // search should be empty or search phrase should be included in name\n peer => !searchValue || peer.name.toLowerCase().includes(searchValue.toLowerCase()),\n ),\n [peers, searchValue],\n );\n\n const listItems = useMemo(() => {\n const selectItems = [<Everyone onSelect={onSelect} active={!selectedRole && !selectedPeerId} />];\n\n roles.length > 0 && selectItems.push(<SelectorHeader>Roles</SelectorHeader>);\n roles.forEach(userRole =>\n selectItems.push(\n <RoleItem key={userRole} active={selectedRole === userRole} role={userRole} onSelect={onSelect} />,\n ),\n );\n\n filteredPeers.length > 0 && selectItems.push(<SelectorHeader>Participants</SelectorHeader>);\n filteredPeers.forEach(peer =>\n selectItems.push(\n <PeerItem\n key={peer.id}\n name={peer.name}\n peerId={peer.id}\n active={peer.id === selectedPeerId}\n onSelect={onSelect}\n />,\n ),\n );\n\n return selectItems;\n }, [onSelect, selectedRole, selectedPeerId, roles, filteredPeers]);\n\n return (\n <Dropdown.Group ref={ref} css={{ height: '$64', overflowY: 'auto' }}>\n <FixedSizeList itemSize={52} itemCount={listItems.length} width={width} height={height}>\n {({ index, style }) => (\n <div style={style} key={index}>\n {listItems[index]}\n </div>\n )}\n </FixedSizeList>\n </Dropdown.Group>\n );\n};\n\nexport const ChatSelector = ({ role, peerId, onSelect }) => {\n const peers = useHMSStore(selectRemotePeers);\n const [search, setSearch] = useState('');\n\n return (\n <Fragment>\n {peers.length > 0 && (\n <Box css={{ px: '$8' }}>\n <ParticipantSearch onSearch={setSearch} placeholder=\"Search participants\" />\n </Box>\n )}\n <VirtualizedSelectItemList\n selectedRole={role}\n selectedPeerId={peerId}\n onSelect={onSelect}\n peers={peers}\n searchValue={search}\n />\n </Fragment>\n );\n};\n", "import {\n selectMessagesUnreadCountByPeerID,\n selectMessagesUnreadCountByRole,\n selectUnreadHMSMessagesCount,\n useHMSStore,\n} from '@100mslive/react-sdk';\n\nexport const useUnreadCount = ({ role, peerId }) => {\n const unreadCountSelector = role\n ? selectMessagesUnreadCountByRole(role)\n : peerId\n ? selectMessagesUnreadCountByPeerID(peerId)\n : selectUnreadHMSMessagesCount;\n\n const unreadCount = useHMSStore(unreadCountSelector);\n return unreadCount;\n};\n", "import React, { Fragment, useState } from 'react';\nimport { selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';\nimport { ColoredHandIcon, CrossIcon, GoLiveIcon } from '@100mslive/react-icons';\nimport { Box, Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport IconButton from '../../IconButton';\nimport RTMPIcon from '../../images/rtmp.png';\nimport { StreamCard } from './Common';\nimport { HLSStreaming } from './HLSStreaming';\nimport { RTMPStreaming } from './RTMPStreaming';\nimport { useSidepaneToggle } from '../AppData/useSidepane';\nimport { SIDE_PANE_OPTIONS } from '../../common/constants';\n\nexport const StreamingLanding = () => {\n const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);\n const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();\n const permissions = useHMSStore(selectPermissions);\n const [showHLS, setShowHLS] = useState(isHLSRunning);\n const [showRTMP, setShowRTMP] = useState(isRTMPRunning);\n\n if (!permissions?.hlsStreaming && !permissions?.rtmpStreaming) {\n toggleStreaming();\n return null;\n }\n\n return (\n <Fragment>\n <Flex css={{ w: '100%', py: '$8' }}>\n <Box\n css={{\n alignSelf: 'center',\n p: '$4',\n bg: '$surface_bright',\n r: '$round',\n }}\n >\n <ColoredHandIcon width={40} height={40} />\n </Box>\n <Box css={{ flex: '1 1 0', mx: '$8' }}>\n <Text variant=\"sm\">Welcome !</Text>\n <Text variant=\"h6\">Let\u2019s get you started</Text>\n </Box>\n <IconButton onClick={toggleStreaming} css={{ alignSelf: 'flex-start' }} data-testid=\"close_streaming\">\n <CrossIcon />\n </IconButton>\n </Flex>\n <Text variant=\"tiny\" color=\"$on_surface_medium\">\n Start Streaming\n </Text>\n {permissions?.hlsStreaming && (\n <StreamCard\n testId=\"hls_stream\"\n title=\"Live Stream with HLS\"\n subtitle=\"Stream to millions, edit and control what the viewer sees and more!\"\n css={{ my: '$8' }}\n onClick={() => setShowHLS(true)}\n Icon={GoLiveIcon}\n />\n )}\n {permissions?.rtmpStreaming && (\n <StreamCard\n testId=\"rtmp_stream\"\n title=\"Stream live to Facebook, Twitch, and others\"\n subtitle=\"Stream to a specific destination directly from your app.\"\n css={{ my: '$8' }}\n onClick={() => {\n setShowRTMP(true);\n }}\n imgSrc={RTMPIcon}\n />\n )}\n {showHLS && <HLSStreaming onBack={() => setShowHLS(false)} />}\n {showRTMP && <RTMPStreaming onBack={() => setShowRTMP(false)} />}\n </Fragment>\n );\n};\n", "import React, { Fragment, useCallback, useEffect, useState } from 'react';\nimport { selectRoomID, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';\nimport {\n EndStreamIcon,\n EyeOpenIcon,\n GoLiveIcon,\n InfoIcon,\n LinkIcon,\n PeopleIcon,\n SupportIcon,\n WrenchIcon,\n} from '@100mslive/react-icons';\nimport { Box, Button, Flex, Loading, Text } from '../../../';\nimport { Container, ContentBody, ContentHeader, ErrorText, RecordStream } from './Common';\nimport { useSetAppDataByKey } from '../AppData/useUISettings';\nimport { useFilteredRoles } from '../../common/hooks';\nimport { APP_DATA } from '../../common/constants';\n\nconst getCardData = (roleName, roomId) => {\n let data = {};\n const formattedRoleName = roleName[0].toUpperCase() + roleName.slice(1);\n\n switch (roleName) {\n case 'broadcaster': {\n data = {\n title: formattedRoleName,\n content: 'Broadcasters can livestream audio or video, manage stream appearance and control the room via HLS.',\n icon: <SupportIcon />,\n };\n break;\n }\n case 'hls-viewer': {\n data = {\n title: 'HLS Viewer',\n content:\n 'Viewers can view and send chat messages, but need to be made broadcasters to participate with audio or video.',\n icon: <EyeOpenIcon />,\n };\n break;\n }\n default:\n data = {\n title: formattedRoleName,\n content: `${formattedRoleName} is customised with specific permissions, which will determine how it interacts with this room.`,\n icon: <WrenchIcon />,\n order: 1,\n };\n }\n data['link'] = `/${roomId}/${roleName}`;\n return data;\n};\n\nconst Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {\n const [copied, setCopied] = useState(false);\n return isHLSRunning ? (\n <Box\n key={title}\n css={{\n backgroundColor: '$surface_bright',\n padding: '$10',\n order,\n borderRadius: '$2',\n }}\n >\n <Flex align=\"center\" gap=\"2\" css={{ color: '$primary_bright' }}>\n {icon}\n <Text variant=\"h6\" css={{ fontWeight: '$semiBold' }}>\n {title}\n </Text>\n </Flex>\n <Text variant=\"sm\" css={{ color: '$on_surface_medium', mt: '$6' }}>\n {content}\n </Text>\n <Button\n variant=\"standard\"\n onClick={() => {\n navigator.clipboard.writeText(`${window.location.origin}${link}`);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }}\n css={{ w: '100%', r: '$1', mt: '$10', fontWeight: '$semiBold' }}\n icon\n >\n {copied ? (\n <>Link copied!</>\n ) : (\n <>\n <LinkIcon style={{ color: 'inherit' }} />\n Copy Invite Link\n </>\n )}\n </Button>\n </Box>\n ) : null;\n};\n\nexport const HLSStreaming = ({ onBack }) => {\n const roleNames = useFilteredRoles();\n const roomId = useHMSStore(selectRoomID);\n const cards = roleNames.map(roleName => getCardData(roleName, roomId));\n\n const { isHLSRunning } = useRecordingStreaming();\n const [showLinks, setShowLinks] = useState(false);\n return !showLinks ? (\n <Container rounded>\n <ContentHeader title=\"Start Streaming\" content=\"HLS\" onBack={onBack} />\n <ContentBody title=\"HLS Streaming\" Icon={GoLiveIcon} removeVerticalPadding>\n Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this\n platform.\n </ContentBody>\n {isHLSRunning ? <EndHLS setShowLinks={setShowLinks} /> : <StartHLS />}\n </Container>\n ) : (\n <Container rounded>\n <ContentHeader title=\"Invite People\" content=\"Start the conversation\" onBack={() => setShowLinks(false)} />\n\n <Flex direction=\"column\" css={{ gap: '$10', p: '$0 $10', overflowY: 'auto', mb: '$10' }}>\n {cards.map(card => (\n <Card key={card.title} {...card} isHLSRunning={isHLSRunning} />\n ))}\n </Flex>\n </Container>\n );\n};\n\nconst StartHLS = () => {\n const [record, setRecord] = useState(false);\n const [error, setError] = useState(false);\n const hmsActions = useHMSActions();\n const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);\n const startHLS = useCallback(\n async variants => {\n try {\n if (isHLSStarted) {\n return;\n }\n setHLSStarted(true);\n setError('');\n await hmsActions.startHLSStreaming({\n variants,\n recording: { hlsVod: record, singleFilePerLayer: record },\n });\n } catch (error) {\n setHLSStarted(false);\n setError(error.message);\n }\n },\n [hmsActions, record, isHLSStarted, setHLSStarted],\n );\n\n return (\n <Fragment>\n <RecordStream record={record} setRecord={setRecord} testId=\"hls-recording\" />\n <Box css={{ p: '$4 $10' }}>\n <ErrorText error={error} />\n <Button\n data-testid=\"start_hls\"\n css={{ w: '100%', r: '$0' }}\n icon\n onClick={() => startHLS()}\n disabled={isHLSStarted}\n >\n {isHLSStarted ? <Loading size={24} color=\"currentColor\" /> : <GoLiveIcon />}\n {isHLSStarted ? 'Starting stream...' : 'Go Live'}\n </Button>\n </Box>\n <Flex align=\"center\" css={{ p: '$4 $10' }}>\n <Text>\n <InfoIcon width={16} height={16} />\n </Text>\n <Text variant=\"tiny\" color=\"$on_surface_medium\" css={{ mx: '$8' }}>\n You cannot start recording once the stream starts, you will have to stop the stream to enable recording.\n </Text>\n </Flex>\n </Fragment>\n );\n};\n\nconst EndHLS = ({ setShowLinks }) => {\n const hmsActions = useHMSActions();\n\n const [inProgress, setInProgress] = useState(false);\n const [error, setError] = useState('');\n const { isHLSRunning } = useRecordingStreaming();\n\n useEffect(() => {\n if (inProgress && !isHLSRunning) {\n setInProgress(false);\n }\n }, [inProgress, isHLSRunning]);\n\n return (\n <Box css={{ p: '$4 $10' }}>\n <ErrorText error={error} />\n <Button\n data-testid=\"stop_hls\"\n variant=\"danger\"\n css={{ w: '100%', r: '$0', mt: '$8' }}\n icon\n loading={inProgress}\n disabled={inProgress}\n onClick={async () => {\n try {\n setInProgress(true);\n await hmsActions.stopHLSStreaming();\n } catch (error) {\n setError(error.message);\n setInProgress(false);\n }\n }}\n >\n <EndStreamIcon />\n End Stream\n </Button>\n <Button icon css={{ w: '100%', r: '$0', mt: '$8' }} onClick={() => setShowLinks(true)}>\n <PeopleIcon /> Invite People\n </Button>\n </Box>\n );\n};\n", "import React, { Fragment, Suspense, useCallback, useEffect, useState } from 'react';\nimport {\n HMSRoomState,\n selectIsLocalVideoEnabled,\n selectLocalPeer,\n selectRoomState,\n selectVideoTrackByID,\n useAVToggle,\n useHMSStore,\n useParticipants,\n usePreviewJoin,\n useRecordingStreaming,\n} from '@100mslive/react-sdk';\nimport { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';\nimport {\n Avatar,\n Box,\n Flex,\n flexCenter,\n styled,\n StyledVideoTile,\n Text,\n useBorderAudioLevel,\n useTheme,\n Video,\n} from '../../../';\nimport { useHMSPrebuiltContext } from '../../AppContext';\nimport IconButton from '../../IconButton';\nimport { useRoomLayout } from '../../provider/roomLayoutProvider';\nimport { AudioVideoToggle } from '../AudioVideoToggle';\nimport Chip from '../Chip';\nimport TileConnection from '../Connection/TileConnection';\nimport FullPageProgress from '../FullPageProgress';\nimport { Logo } from '../Header/HeaderComponents';\nimport SettingsModal from '../Settings/SettingsModal';\nimport PreviewForm from './PreviewForm';\nimport { useAuthToken, useUISettings } from '../AppData/useUISettings';\nimport { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';\nimport { UI_SETTINGS } from '../../common/constants';\n\nconst VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));\n\nconst getParticipantChipContent = (peerCount = 0) => {\n if (peerCount === 0) {\n return 'You are the first to join';\n }\n const formatter = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 });\n const formattedNum = formatter.format(peerCount);\n return `${formattedNum} other${parseInt(formattedNum) === 1 ? '' : 's'} in the session`;\n};\n\nconst PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {\n const [previewPreference, setPreviewPreference] = useUserPreferences(\n UserPreferencesKeys.PREVIEW,\n defaultPreviewPreference,\n );\n const { isStreamingOn } = useRecordingStreaming();\n const authToken = useAuthToken();\n const [name, setName] = useState(initialName || previewPreference.name);\n const { isLocalAudioEnabled, isLocalVideoEnabled, toggleAudio, toggleVideo } = useAVToggle();\n const [previewError, setPreviewError] = useState(false);\n const { endPoints } = useHMSPrebuiltContext();\n const { peerCount } = useParticipants();\n const { enableJoin, preview, join } = usePreviewJoin({\n name,\n token: authToken,\n initEndpoint: endPoints?.init,\n initialSettings: {\n isAudioMuted: skipPreview || previewPreference.isAudioMuted,\n isVideoMuted: skipPreview || previewPreference.isVideoMuted,\n speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],\n },\n captureNetworkQualityInPreview: true,\n handleError: (_, method) => {\n if (method === 'preview') {\n setPreviewError(true);\n }\n },\n asRole,\n });\n const roomState = useHMSStore(selectRoomState);\n\n const savePreferenceAndJoin = useCallback(() => {\n setPreviewPreference({\n name,\n isAudioMuted: !isLocalAudioEnabled,\n isVideoMuted: !isLocalVideoEnabled,\n });\n join();\n onJoin && onJoin();\n }, [join, isLocalAudioEnabled, isLocalVideoEnabled, name, setPreviewPreference, onJoin]);\n const roomLayout = useRoomLayout();\n\n const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};\n\n useEffect(() => {\n if (authToken) {\n if (skipPreview) {\n savePreferenceAndJoin();\n } else {\n preview();\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [authToken, skipPreview]);\n\n return roomState === HMSRoomState.Preview ? (\n <Container css={{ h: '100%', pt: '$10', '@md': { justifyContent: 'space-between' } }}>\n {toggleVideo ? null : <Box />}\n <Flex direction=\"column\" justify=\"center\" css={{ w: '100%', maxWidth: '360px' }}>\n <Logo />\n <Text variant=\"h4\" css={{ wordBreak: 'break-word', textAlign: 'center', mt: '$14', '@md': { mt: '$8' } }}>\n {previewHeader.title}\n </Text>\n <Text css={{ c: '$on_surface_medium', my: '0', textAlign: 'center' }} variant=\"body1\">\n {previewHeader.sub_title}\n </Text>\n <Flex justify=\"center\" css={{ my: '$8', gap: '$4' }}>\n {isStreamingOn ? (\n <Chip\n content=\"LIVE\"\n backgroundColor=\"$alert_error_default\"\n textColor=\"#FFF\"\n icon={<Box css={{ h: '$sm', w: '$sm', backgroundColor: '$on_primary_high', borderRadius: '$round' }} />}\n />\n ) : null}\n <Chip content={getParticipantChipContent(peerCount)} hideIfNoContent />\n </Flex>\n </Flex>\n\n {toggleVideo ? (\n <Flex\n align=\"center\"\n justify=\"center\"\n css={{\n '@sm': { width: '100%' },\n flexDirection: 'column',\n }}\n >\n <PreviewTile name={name} error={previewError} />\n </Flex>\n ) : null}\n\n <Box css={{ w: '100%', maxWidth: '360px' }}>\n <PreviewControls\n enableJoin={enableJoin}\n savePreferenceAndJoin={savePreferenceAndJoin}\n hideSettings={!toggleVideo && !toggleAudio}\n />\n <PreviewForm\n name={name}\n onChange={setName}\n enableJoin={enableJoin}\n onJoin={savePreferenceAndJoin}\n cannotPublishVideo={!toggleVideo}\n cannotPublishAudio={!toggleAudio}\n />\n </Box>\n </Container>\n ) : (\n <FullPageProgress />\n );\n};\n\nconst Container = styled('div', {\n width: '100%',\n ...flexCenter,\n flexDirection: 'column',\n px: '$10',\n});\n\nconst PreviewTile = ({ name, error }) => {\n const localPeer = useHMSStore(selectLocalPeer);\n const borderAudioRef = useBorderAudioLevel(localPeer?.audioTrack);\n const { isLocalAudioEnabled, toggleAudio } = useAVToggle();\n const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);\n const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);\n const trackSelector = selectVideoTrackByID(localPeer?.videoTrack);\n const track = useHMSStore(trackSelector);\n const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;\n\n const {\n aspectRatio: { width, height },\n } = useTheme();\n return (\n <StyledVideoTile.Container\n css={{\n bg: '$surface_default',\n aspectRatio: width / height,\n width: 'unset',\n height: 'min(360px, 60vh)',\n '@sm': {\n height: 'unset',\n width: 'min(360px, 100%)',\n maxWidth: '100%',\n },\n }}\n ref={borderAudioRef}\n >\n {localPeer ? (\n <>\n <TileConnection name={name} peerId={localPeer.id} hideLabel={true} />\n <Video\n mirror={track?.facingMode !== 'environment' && mirrorLocalVideo}\n trackId={localPeer.videoTrack}\n data-testid=\"preview_tile\"\n />\n {!isVideoOn ? (\n <StyledVideoTile.AvatarContainer>\n <Avatar name={name} data-testid=\"preview_avatar_tile\" />\n </StyledVideoTile.AvatarContainer>\n ) : null}\n </>\n ) : !error ? (\n <FullPageProgress />\n ) : null}\n {showMuteIcon ? (\n <StyledVideoTile.AudioIndicator size=\"medium\">\n <MicOffIcon />\n </StyledVideoTile.AudioIndicator>\n ) : null}\n </StyledVideoTile.Container>\n );\n};\n\nconst PreviewControls = ({ hideSettings }) => {\n const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);\n return (\n <Flex\n justify=\"between\"\n css={{\n width: '100%',\n mt: '$8',\n }}\n >\n <Flex css={{ gap: '$4' }}>\n <AudioVideoToggle compact />\n <Suspense fallback=\"\">{isVideoOn ? <VirtualBackground /> : null}</Suspense>\n </Flex>\n {!hideSettings ? <PreviewSettings /> : null}\n </Flex>\n );\n};\n\n// Bottom action sheet goes here, if isMobile\nexport const PreviewSettings = React.memo(() => {\n const [open, setOpen] = useState(false);\n\n return (\n <Fragment>\n <IconButton data-testid=\"preview_setting_btn\" css={{ flexShrink: 0 }} onClick={() => setOpen(value => !value)}>\n <SettingsIcon />\n </IconButton>\n {open && <SettingsModal open={open} onOpenChange={setOpen} />}\n </Fragment>\n );\n});\n\nexport default PreviewJoin;\n", "import React, { Fragment } from 'react';\nimport {\n DeviceType,\n selectLocalVideoTrackID,\n selectVideoTrackByID,\n useAVToggle,\n useDevices,\n useHMSActions,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { CameraFlipIcon, MicOffIcon, MicOnIcon, VideoOffIcon, VideoOnIcon } from '@100mslive/react-icons';\nimport { IconButtonWithOptions } from './IconButtonWithOptions/IconButtonWithOptions';\nimport { ToastManager } from './Toast/ToastManager';\nimport { Text } from '../../Text';\nimport { Tooltip } from '../../Tooltip';\nimport IconButton from '../IconButton';\nimport { isMacOS } from '../common/constants';\n\nconst optionsCSS = { fontWeight: '$semiBold', color: '$on_surface_high', w: '100%', p: '$8' };\n\nexport const AudioVideoToggle = () => {\n const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();\n const { videoInput, audioInput } = allDevices;\n\n const formattedVideoInputList = videoInput?.map(videoInput => ({\n active: selectedDeviceIDs.videoInput === videoInput.deviceId,\n content: (\n <Text\n variant=\"sm\"\n onClick={() =>\n updateDevice({\n deviceType: DeviceType.videoInput,\n deviceId: videoInput.deviceId,\n })\n }\n css={optionsCSS}\n >\n {videoInput.label}\n </Text>\n ),\n title: videoInput.label,\n }));\n\n const formattedAudioInputList = audioInput?.map(audioInput => ({\n active: selectedDeviceIDs.audioInput === audioInput.deviceId,\n content: (\n <Text\n variant=\"sm\"\n onClick={() =>\n updateDevice({\n deviceType: DeviceType.audioInput,\n deviceId: audioInput.deviceId,\n })\n }\n css={optionsCSS}\n >\n {audioInput.label}\n </Text>\n ),\n title: audioInput.label,\n }));\n\n const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();\n const actions = useHMSActions();\n const videoTrackId = useHMSStore(selectLocalVideoTrackID);\n const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));\n\n return (\n <Fragment>\n {toggleAudio ? (\n <IconButtonWithOptions\n options={formattedAudioInputList}\n tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '\u2318' : 'ctrl'} + d)`}\n icon={\n !isLocalAudioEnabled ? <MicOffIcon data-testid=\"audio_off_btn\" /> : <MicOnIcon data-testid=\"audio_on_btn\" />\n }\n active={isLocalAudioEnabled}\n onClick={toggleAudio}\n key=\"toggleAudio\"\n />\n ) : null}\n\n {toggleVideo ? (\n <IconButtonWithOptions\n options={formattedVideoInputList}\n tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '\u2318' : 'ctrl'} + e)`}\n icon={\n !isLocalVideoEnabled ? (\n <VideoOffIcon data-testid=\"video_off_btn\" />\n ) : (\n <VideoOnIcon data-testid=\"video_on_btn\" />\n )\n }\n key=\"toggleVideo\"\n active={isLocalVideoEnabled}\n onClick={toggleVideo}\n />\n ) : null}\n\n {localVideoTrack?.facingMode ? (\n <Tooltip title=\"Switch Camera\" key=\"switchCamera\">\n <IconButton\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 </Tooltip>\n ) : null}\n </Fragment>\n );\n};\n", "import { VerticalMenuIcon } from '@100mslive/react-icons';\nimport { Dropdown } from '../../../Dropdown';\nimport { Box, Flex } from '../../../Layout';\nimport { styled } from '../../../Theme';\nimport { Tooltip } from '../../../Tooltip';\nimport IconButton from '../../IconButton';\n\nconst IconSection = styled(IconButton, {\n w: 'unset',\n h: '$14',\n p: '$4',\n r: '$1',\n borderTopRightRadius: 0,\n borderColor: '$border_default',\n borderBottomRightRadius: 0,\n '@md': {\n mx: 0,\n borderTopRightRadius: '$1',\n borderBottomRightRadius: '$1',\n },\n});\n\nconst OptionsSection = styled(IconButton, {\n w: 'unset',\n h: '$14',\n p: '$4',\n r: '$1',\n borderTopLeftRadius: 0,\n borderColor: '$border_default',\n borderBottomLeftRadius: 0,\n borderLeftWidth: 0,\n '&:not([disabled]):focus-visible': {\n boxShadow: 'none',\n },\n '@md': {\n display: 'none',\n },\n});\n\nexport const IconButtonWithOptions = ({\n tooltipMessage = '',\n icon,\n options = [],\n active,\n onClick = () => {\n return;\n },\n key = '',\n}) => {\n const bgCss = { backgroundColor: active ? '$transparent' : '$secondary_dim' };\n const iconCss = { color: active ? '$on_surface_high' : '$on_primary_high' };\n return (\n <Flex>\n <IconSection css={bgCss} onClick={onClick} key={key}>\n <Tooltip disabled={!tooltipMessage} title={tooltipMessage}>\n <Flex align=\"center\" justify=\"center\" css={iconCss}>\n {icon}\n </Flex>\n </Tooltip>\n </IconSection>\n <Dropdown.Root>\n <Dropdown.Trigger asChild>\n <OptionsSection css={bgCss}>\n <Tooltip title=\"View Options\">\n <Box css={iconCss}>\n <VerticalMenuIcon />\n </Box>\n </Tooltip>\n </OptionsSection>\n </Dropdown.Trigger>\n <Dropdown.Content\n sideOffset={5}\n align=\"center\"\n css={{\n w: '$64',\n maxHeight: '$96',\n p: 0,\n border: 'none',\n }}\n >\n {options.map((option, index) => (\n <Dropdown.Item\n key={option.title}\n css={{\n flexDirection: 'column',\n alignItems: 'flex-start',\n backgroundColor: option.active ? '$surface_bright' : '$surface_dim',\n borderTop: index === 0 ? 'none' : '1px solid $border_default',\n '&:hover': {\n cursor: 'pointer',\n },\n p: '0',\n }}\n >\n {option.content}\n </Dropdown.Item>\n ))}\n </Dropdown.Content>\n </Dropdown.Root>\n </Flex>\n );\n};\n", "import { Flex } from '../../Layout';\nimport { Text } from '../../Text';\n\nconst Chip = ({\n icon = <></>,\n content = '',\n backgroundColor = '$surface_default',\n textColor = '$on_surface_high',\n hideIfNoContent = false,\n}) => {\n if (hideIfNoContent && !content) {\n return;\n }\n return (\n <Flex align=\"center\" css={{ backgroundColor, p: '$4 $6', borderRadius: '$4' }}>\n {icon}\n <Text variant=\"sm\" css={{ fontWeight: '$semiBold', color: textColor, ml: '$2' }}>\n {content}\n </Text>\n </Flex>\n );\n};\n\nexport default Chip;\n", "import React from 'react';\nimport { styled, Text, textEllipsis } from '../../../';\nimport { ConnectionIndicator } from './ConnectionIndicator';\n\nconst TileConnection = ({ name, peerId, hideLabel, width }) => {\n return (\n <Wrapper>\n {!hideLabel ? (\n <Text\n css={{\n c: '$on_surface_high',\n ...textEllipsis(width - 60),\n }}\n variant=\"xs\"\n >\n {name}\n </Text>\n ) : null}\n <ConnectionIndicator isTile peerId={peerId} />\n </Wrapper>\n );\n};\n\nconst Wrapper = styled('div', {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n position: 'absolute',\n bottom: '$2',\n left: '$2',\n backgroundColor: '$background_dim',\n borderRadius: '$1',\n maxWidth: '85%',\n zIndex: 1,\n '& p,span': {\n p: '$2 $3',\n },\n});\n\nexport default TileConnection;\n", "import React, { useCallback, useEffect, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk';\nimport { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';\nimport { Box, config as cssConfig, Dialog, Flex, IconButton, Tabs, Text } from '../../../';\nimport { useHLSViewerRole } from '../AppData/useUISettings';\nimport { settingContent, settingsList } from './common.js';\n\nconst SettingsModal = ({ open, onOpenChange, children }) => {\n const mediaQueryLg = cssConfig.media.md;\n const isMobile = useMedia(mediaQueryLg);\n\n const hlsViewerRole = useHLSViewerRole();\n const localPeerRole = useHMSStore(selectLocalPeerRoleName);\n const isHlsViewer = hlsViewerRole === localPeerRole;\n\n const [showSetting, setShowSetting] = useState(() =>\n settingsList.reduce((obj, { tabName }) => ({ ...obj, [tabName]: true }), {}),\n );\n\n const hideSettingByTabName = useCallback(\n key => hide => setShowSetting(prev => ({ ...prev, [key]: !hide })),\n [setShowSetting],\n );\n\n useEffect(() => {\n if (isHlsViewer) {\n hideSettingByTabName('layout')(true);\n }\n }, [isHlsViewer, hideSettingByTabName]);\n\n const [selection, setSelection] = useState(() => Object.keys(showSetting).find(key => showSetting[key]) ?? '');\n const resetSelection = useCallback(() => {\n setSelection('');\n }, []);\n\n useEffect(() => {\n if (isMobile) {\n setSelection('');\n } else {\n const firstNotHiddenTabName = Object.keys(showSetting).find(key => showSetting[key]) ?? '';\n setSelection(firstNotHiddenTabName);\n }\n }, [isMobile, showSetting]);\n\n return (\n <Dialog.Root open={open} onOpenChange={onOpenChange}>\n <Dialog.Trigger asChild>{children}</Dialog.Trigger>\n <Dialog.Portal>\n <Dialog.Overlay />\n <Dialog.Content\n css={{\n w: 'min(800px, 90%)',\n height: 'min(656px, 90%)',\n p: 0,\n r: '$4',\n }}\n >\n <Tabs.Root\n value={selection}\n activationMode={isMobile ? 'manual' : 'automatic'}\n onValueChange={setSelection}\n css={{ size: '100%', position: 'relative' }}\n >\n <Tabs.List\n css={{\n w: isMobile ? '100%' : '18.625rem',\n flexDirection: 'column',\n bg: '$background_default',\n p: '$14 $10',\n borderTopLeftRadius: '$4',\n borderBottomLeftRadius: '$4',\n }}\n >\n <Text variant=\"h5\">Settings </Text>\n <Flex direction=\"column\" css={{ mx: isMobile ? '-$8' : 0, overflowY: 'auto', pt: '$10' }}>\n {settingsList\n .filter(({ tabName }) => showSetting[tabName])\n .map(({ icon: Icon, tabName, title }) => {\n return (\n <Tabs.Trigger key={tabName} value={tabName} css={{ gap: '$8' }}>\n <Icon />\n {title}\n </Tabs.Trigger>\n );\n })}\n </Flex>\n </Tabs.List>\n {selection && (\n <Flex\n direction=\"column\"\n css={{\n flex: '1 1 0',\n minWidth: 0,\n mr: '$4',\n ...(isMobile\n ? {\n position: 'absolute',\n left: 0,\n right: 0,\n bg: '$surface_default',\n width: '100%',\n height: '100%',\n }\n : {}),\n }}\n >\n {settingsList\n .filter(({ tabName }) => showSetting[tabName])\n .map(({ content: Content, title, tabName }) => {\n return (\n <Tabs.Content key={tabName} value={tabName} className={settingContent()}>\n <SettingsContentHeader onBack={resetSelection} isMobile={isMobile}>\n {title}\n </SettingsContentHeader>\n <Content setHide={hideSettingByTabName(tabName)} />\n </Tabs.Content>\n );\n })}\n </Flex>\n )}\n </Tabs.Root>\n <Dialog.Close css={{ position: 'absolute', right: '$10', top: '$10' }}>\n <IconButton as=\"div\" data-testid=\"dialog_cross_icon\">\n <CrossIcon />\n </IconButton>\n </Dialog.Close>\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n );\n};\n\nconst SettingsContentHeader = ({ children, isMobile, onBack }) => {\n return (\n <Text variant=\"h6\" css={{ mb: '$12', display: 'flex', alignItems: 'center' }}>\n {isMobile && (\n <Box as=\"span\" css={{ bg: '$surface_bright', mr: '$4', r: '$round', p: '$2' }} onClick={onBack}>\n <ChevronLeftIcon />\n </Box>\n )}\n {children}\n </Text>\n );\n};\n\nexport default SettingsModal;\n", "import { GridFourIcon, NotificationsIcon, SettingsIcon } from '@100mslive/react-icons';\nimport { css } from '../../..';\nimport DeviceSettings from '../Settings/DeviceSettings';\nimport { LayoutSettings } from '../Settings/LayoutSettings';\nimport { NotificationSettings } from '../Settings/NotificationSettings';\n\nexport const settingOverflow = css({\n flex: '1 1 0',\n pr: '$12',\n mr: '-$12',\n overflowY: 'auto',\n});\n\nexport const settingContent = css({\n display: 'flex',\n flexDirection: 'column',\n '&[hidden]': {\n display: 'none',\n },\n});\n\nexport const settingsList = [\n {\n tabName: 'devices',\n title: 'Device Settings',\n icon: SettingsIcon,\n content: DeviceSettings,\n },\n {\n tabName: 'notifications',\n title: 'Notifications',\n icon: NotificationsIcon,\n content: NotificationSettings,\n },\n {\n tabName: 'layout',\n title: 'Layout',\n icon: GridFourIcon,\n content: LayoutSettings,\n },\n];\n", "import React, { Fragment, useEffect, useRef, useState } from 'react';\nimport {\n DeviceType,\n selectIsLocalVideoEnabled,\n selectLocalVideoTrackID,\n selectVideoTrackByID,\n useDevices,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { MicOnIcon, SpeakerIcon, VideoOnIcon } from '@100mslive/react-icons';\nimport { Box, Button, Dropdown, Flex, StyledVideoTile, Text, Video } from '../../../';\nimport { DialogDropdownTrigger } from '../../primitives/DropdownTrigger';\nimport { useUISettings } from '../AppData/useUISettings';\nimport { useDropdownSelection } from '../hooks/useDropdownSelection';\nimport { settingOverflow } from './common.js';\nimport { UI_SETTINGS } from '../../common/constants';\n\n/**\n * wrap the button on click of whom settings should open, this component will take care of the rest,\n * it'll give the user options to change input/output device as well as check speaker.\n * There is also another controlled way of using this by passing in open and onOpenChange.\n */\nconst Settings = ({ setHide }) => {\n const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();\n const { videoInput, audioInput, audioOutput } = allDevices;\n const videoTrackId = useHMSStore(selectLocalVideoTrackID);\n const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);\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 e.g.) this changes both mic and speaker keeping them in sync.\n const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype;\n const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);\n const trackSelector = selectVideoTrackByID(videoTrackId);\n const track = useHMSStore(trackSelector);\n\n /**\n * Chromium browsers return an audioOutput with empty label when no permissions are given\n */\n const audioOutputFiltered = audioOutput?.filter(item => !!item.label) ?? [];\n\n if (!videoInput?.length && !audioInput?.length && !audioOutputFiltered?.length) {\n setHide(true);\n }\n\n return (\n <Box className={settingOverflow()}>\n {videoInput?.length ? (\n <Fragment>\n {isVideoOn && (\n <StyledVideoTile.Container\n css={{\n w: '90%',\n px: '$10',\n height: '$48',\n bg: 'transparent',\n m: '$10 auto',\n }}\n >\n <Video trackId={videoTrackId} mirror={track?.facingMode !== 'environment' && mirrorLocalVideo} />\n </StyledVideoTile.Container>\n )}\n <DeviceSelector\n title=\"Video\"\n devices={videoInput}\n icon={<VideoOnIcon />}\n selection={selectedDeviceIDs.videoInput}\n onChange={deviceId =>\n updateDevice({\n deviceId,\n deviceType: DeviceType.videoInput,\n })\n }\n />\n </Fragment>\n ) : null}\n\n {audioInput?.length ? (\n <DeviceSelector\n title={shouldShowAudioOutput ? 'Microphone' : 'Audio'}\n icon={<MicOnIcon />}\n devices={audioInput}\n selection={selectedDeviceIDs.audioInput}\n onChange={deviceId =>\n updateDevice({\n deviceId,\n deviceType: DeviceType.audioInput,\n })\n }\n />\n ) : null}\n\n {audioOutputFiltered?.length && shouldShowAudioOutput ? (\n <DeviceSelector\n title=\"Speaker\"\n icon={<SpeakerIcon />}\n devices={audioOutput}\n selection={selectedDeviceIDs.audioOutput}\n onChange={deviceId =>\n updateDevice({\n deviceId,\n deviceType: DeviceType.audioOutput,\n })\n }\n >\n <TestAudio id={selectedDeviceIDs.audioOutput} />\n </DeviceSelector>\n ) : null}\n </Box>\n );\n};\n\nconst DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {\n const [open, setOpen] = useState(false);\n const selectionBg = useDropdownSelection();\n const ref = useRef(null);\n\n return (\n <Box css={{ mb: '$10' }}>\n <Text css={{ mb: '$4' }}>{title}</Text>\n <Flex\n align=\"center\"\n css={{\n gap: '$4',\n '@md': {\n flexDirection: children ? 'column' : 'row',\n alignItems: children ? 'start' : 'center',\n },\n }}\n >\n <Box\n css={{\n position: 'relative',\n flex: '1 1 0',\n minWidth: 0,\n maxWidth: '100%',\n '@md': {\n mb: children ? '$8' : 0,\n },\n }}\n >\n <Dropdown.Root open={open} onOpenChange={setOpen}>\n <DialogDropdownTrigger\n ref={ref}\n icon={icon}\n title={devices.find(({ deviceId }) => deviceId === selection)?.label || 'Select device from list'}\n open={open}\n />\n <Dropdown.Portal>\n <Dropdown.Content align=\"start\" sideOffset={8} css={{ w: ref.current?.clientWidth, zIndex: 1000 }}>\n {devices.map(device => {\n return (\n <Dropdown.Item\n key={device.label}\n onSelect={() => onChange(device.deviceId)}\n css={{\n px: '$9',\n bg: device.deviceId === selection ? selectionBg : undefined,\n }}\n >\n {device.label}\n </Dropdown.Item>\n );\n })}\n </Dropdown.Content>\n </Dropdown.Portal>\n </Dropdown.Root>\n </Box>\n {children}\n </Flex>\n </Box>\n );\n};\n\nconst TEST_AUDIO_URL = 'https://100ms.live/test-audio.wav';\n\nconst TestAudio = ({ id }) => {\n const audioRef = useRef(null);\n const [playing, setPlaying] = useState(false);\n useEffect(() => {\n if (audioRef.current && id) {\n try {\n if (typeof audioRef.current.setSinkId !== 'undefined') {\n audioRef.current.setSinkId(id);\n }\n } catch (error) {\n console.log(error);\n }\n }\n }, [id]);\n return (\n <>\n <Button\n variant=\"standard\"\n css={{\n flexShrink: 0,\n p: '$6 $9',\n '@md': {\n w: '100%',\n },\n }}\n onClick={() => audioRef.current?.play()}\n disabled={playing}\n >\n <SpeakerIcon />\n &nbsp;Test{' '}\n <Text as=\"span\" css={{ display: 'none', '@md': { display: 'inline' } }}>\n &nbsp; speaker\n </Text>\n </Button>\n <audio ref={audioRef} src={TEST_AUDIO_URL} onEnded={() => setPlaying(false)} onPlay={() => setPlaying(true)} />\n </>\n );\n};\n\nexport default Settings;\n", "import React from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';\nimport { Dropdown, Flex, Text, textEllipsis } from '../../index';\n\nconst DialogDropdownTrigger = React.forwardRef(({ title, css, open, icon, titleCSS = {} }, ref) => {\n return (\n <Dropdown.Trigger\n asChild\n data-testid={`${title}_selector`}\n css={{\n border: '1px solid $border_bright',\n bg: '$surface_bright',\n r: '$1',\n p: '$6 $9',\n zIndex: 10,\n ...css,\n }}\n ref={ref}\n >\n <Flex\n css={{\n display: 'flex',\n justifyContent: 'space-between',\n color: '$on_surface_high',\n w: '100%',\n }}\n >\n {icon}\n <Text\n css={{\n color: 'inherit',\n ...textEllipsis('90%'),\n flex: '1 1 0',\n mx: icon ? '$6' : '0',\n ...titleCSS,\n }}\n >\n {title}\n </Text>\n {open ? <ChevronUpIcon /> : <ChevronDownIcon />}\n </Flex>\n </Dropdown.Trigger>\n );\n});\n\nexport { DialogDropdownTrigger };\n", "import React, { useCallback } from 'react';\nimport { selectIsLocalScreenShared, selectIsLocalVideoEnabled, useHMSActions, useHMSStore } from '@100mslive/react-sdk';\nimport { Box, Flex, Slider, Text } from '../../../';\nimport SwitchWithLabel from './SwitchWithLabel';\nimport { useSetUiSettings } from '../AppData/useUISettings';\nimport { settingOverflow } from './common.js';\nimport { UI_MODE_ACTIVE_SPEAKER, UI_MODE_GRID, UI_SETTINGS } from '../../common/constants';\n\nexport const LayoutSettings = () => {\n const hmsActions = useHMSActions();\n const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);\n const isLocalScreenShared = useHMSStore(selectIsLocalScreenShared);\n const [\n { isAudioOnly, uiViewMode, maxTileCount, mirrorLocalVideo, activeSpeakerSorting, hideLocalVideo },\n setUISettings,\n ] = useSetUiSettings();\n const toggleIsAudioOnly = useCallback(\n async isAudioOnlyModeOn => {\n if (isAudioOnlyModeOn) {\n // turn off video and screen share if user switches to audio only mode\n isLocalVideoEnabled && (await hmsActions.setLocalVideoEnabled(false));\n isLocalScreenShared && (await hmsActions.setScreenShareEnabled(false));\n }\n setUISettings({ [UI_SETTINGS.isAudioOnly]: isAudioOnlyModeOn });\n },\n [hmsActions, isLocalVideoEnabled, isLocalScreenShared, setUISettings],\n );\n\n return (\n <Box className={settingOverflow()}>\n <SwitchWithLabel\n checked={uiViewMode === UI_MODE_ACTIVE_SPEAKER}\n onChange={value => {\n setUISettings({\n [UI_SETTINGS.uiViewMode]: value ? UI_MODE_ACTIVE_SPEAKER : UI_MODE_GRID,\n });\n }}\n id=\"activeSpeakerMode\"\n label=\"Active Speaker Mode\"\n />\n <SwitchWithLabel\n label=\"Active Speaker Sorting\"\n id=\"activeSpeakerSortingMode\"\n checked={activeSpeakerSorting}\n onChange={value => {\n setUISettings({\n [UI_SETTINGS.activeSpeakerSorting]: value,\n });\n }}\n />\n <SwitchWithLabel label=\"Audio Only Mode\" id=\"audioOnlyMode\" checked={isAudioOnly} onChange={toggleIsAudioOnly} />\n <SwitchWithLabel\n label=\"Mirror Local Video\"\n id=\"mirrorMode\"\n checked={mirrorLocalVideo}\n onChange={value => {\n setUISettings({\n [UI_SETTINGS.mirrorLocalVideo]: value,\n });\n }}\n />\n <SwitchWithLabel\n label=\"Hide Local Video\"\n id=\"hideLocalVideo\"\n checked={hideLocalVideo}\n onChange={value => {\n setUISettings({\n [UI_SETTINGS.hideLocalVideo]: value,\n });\n }}\n />\n <Flex align=\"center\" css={{ w: '100%', my: '$2', py: '$8', '@md': { display: 'none' } }}>\n <Text variant=\"md\" css={{ fontWeight: '$semiBold' }}>\n Tiles In View({maxTileCount})\n </Text>\n <Flex justify=\"end\" css={{ flex: '1 1 0' }}>\n <Slider\n step={1}\n value={[maxTileCount]}\n min={1}\n max={49}\n onValueChange={e => {\n setUISettings({ [UI_SETTINGS.maxTileCount]: e[0] });\n }}\n css={{ w: '70%' }}\n />\n </Flex>\n </Flex>\n </Box>\n );\n};\n", "import React from 'react';\nimport { Label } from '../../../Label';\nimport { Flex } from '../../../Layout';\nimport { Switch } from '../../../Switch';\n\nconst SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) => {\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 display: hide ? 'none' : 'flex',\n }}\n >\n <Label\n htmlFor={id}\n css={{\n fontSize: '$md',\n fontWeight: '$semiBold',\n color: checked ? '$on_surface_high' : '$on_surface_low',\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 <Switch id={id} checked={checked} onCheckedChange={onChange} />\n </Flex>\n );\n};\n\nexport default SwitchWithLabel;\n", "import React from 'react';\nimport { AlertOctagonIcon, ChatIcon, ExitIcon, HandIcon, PersonIcon } from '@100mslive/react-icons';\nimport { Box } from '../../../';\nimport SwitchWithLabel from './SwitchWithLabel';\nimport { useSetSubscribedNotifications, useSubscribedNotifications } from '../AppData/useUISettings';\nimport { settingOverflow } from './common.js';\nimport { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';\n\nconst NotificationItem = ({ type, label, icon, checked }) => {\n const [, setSubscribedNotifications] = useSetSubscribedNotifications(type);\n return (\n <SwitchWithLabel\n label={label}\n id={type}\n icon={icon}\n checked={checked}\n onChange={value => {\n setSubscribedNotifications(value);\n }}\n />\n );\n};\n\nexport const NotificationSettings = () => {\n const subscribedNotifications = useSubscribedNotifications();\n\n return (\n <Box className={settingOverflow()}>\n <NotificationItem\n label=\"Peer Joined\"\n type={SUBSCRIBED_NOTIFICATIONS.PEER_JOINED}\n icon={<PersonIcon />}\n checked={subscribedNotifications.PEER_JOINED}\n />\n <NotificationItem\n label=\"Peer Leave\"\n type={SUBSCRIBED_NOTIFICATIONS.PEER_LEFT}\n icon={<ExitIcon />}\n checked={subscribedNotifications.PEER_LEFT}\n />\n <NotificationItem\n label=\"New Message\"\n type={SUBSCRIBED_NOTIFICATIONS.NEW_MESSAGE}\n icon={<ChatIcon />}\n checked={subscribedNotifications.NEW_MESSAGE}\n />\n <NotificationItem\n label=\"Hand Raised\"\n type={SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED}\n icon={<HandIcon />}\n checked={subscribedNotifications.METADATA_UPDATED}\n />\n <NotificationItem\n label=\"Error\"\n type={SUBSCRIBED_NOTIFICATIONS.ERROR}\n icon={<AlertOctagonIcon />}\n checked={subscribedNotifications.ERROR}\n />\n </Box>\n );\n};\n", "import React from 'react';\nimport { useMedia } from 'react-use';\nimport { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';\nimport { selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';\nimport { RadioIcon } from '@100mslive/react-icons';\nimport { Button, config as cssConfig, Flex, Input, styled } from '../../..';\nimport { useRoomLayout } from '../../provider/roomLayoutProvider';\nimport { PreviewSettings } from './PreviewJoin';\n\nconst PreviewForm = ({\n name,\n onChange,\n onJoin,\n enableJoin,\n cannotPublishVideo = false,\n cannotPublishAudio = false,\n}) => {\n const formSubmit = e => {\n e.preventDefault();\n };\n const mediaQueryLg = cssConfig.media.md;\n const isMobile = useMedia(mediaQueryLg);\n const { isHLSRunning } = useRecordingStreaming();\n const permissions = useHMSStore(selectPermissions);\n const layout = useRoomLayout();\n const { join_form: joinForm = {} } = layout?.screens?.preview?.default?.elements || {};\n const showGoLive =\n joinForm.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE &&\n !isHLSRunning &&\n permissions?.hlsStreaming;\n\n return (\n <Form\n css={{ flexDirection: cannotPublishVideo ? 'column' : 'row', '@md': { flexDirection: 'row' } }}\n onSubmit={formSubmit}\n >\n <Flex align=\"center\" css={{ gap: '$8', w: '100%' }}>\n <Input\n required\n id=\"name\"\n css={{ w: '100%', boxSizing: 'border-box' }}\n value={name}\n onChange={e => onChange(e.target.value.trimStart())}\n placeholder=\"Enter name\"\n autoFocus\n autoComplete=\"name\"\n />\n {cannotPublishAudio && cannotPublishVideo && !isMobile ? <PreviewSettings /> : null}\n </Flex>\n\n {Object.keys(joinForm).length > 0 ? (\n <Button type=\"submit\" icon disabled={!name || !enableJoin} onClick={onJoin}>\n {/* Conditions to show go live: The first broadcaster joins a streaming kit that is not live */}\n {showGoLive ? <RadioIcon height={18} width={18} /> : null}\n {showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label}\n </Button>\n ) : null}\n </Form>\n );\n};\n\nconst Form = styled('form', {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n gap: '$8',\n mt: '$10',\n mb: '$10',\n '@md': {\n gap: '$4',\n },\n});\n\nexport default PreviewForm;\n", "import { useEffect } from 'react';\nimport { useSearchParam } from 'react-use';\nimport { useSetUiSettings } from '../AppData/useUISettings';\nimport { QUERY_PARAM_SKIP_PREVIEW, QUERY_PARAM_SKIP_PREVIEW_HEADFUL, UI_SETTINGS } from '../../common/constants';\n\nexport const useSkipPreview = () => {\n // way to skip preview for automated tests, beam recording and streaming\n const beamInToken = useSearchParam('token') === 'beam_recording'; // old format to remove\n // use this field to join directly for quick testing while in local\n const directJoinHeadfulFromEnv = process.env.REACT_APP_HEADLESS_JOIN === 'true';\n const directJoinHeadful = useSearchParam(QUERY_PARAM_SKIP_PREVIEW_HEADFUL) === 'true' || directJoinHeadfulFromEnv;\n let skipPreview = useSearchParam(QUERY_PARAM_SKIP_PREVIEW) === 'true';\n skipPreview = skipPreview || beamInToken || directJoinHeadful;\n const [, setIsHeadless] = useSetUiSettings(UI_SETTINGS.isHeadless);\n useEffect(() => {\n !directJoinHeadful && setIsHeadless(skipPreview);\n }, [directJoinHeadful, skipPreview]); //eslint-disable-line\n\n return skipPreview;\n};\n", "import React, { useEffect, useState } from 'react';\nimport { selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';\nimport { Toast as ToastPrimitive } from '../../../Toast';\nimport { Toast } from './Toast';\nimport { ToastManager } from './ToastManager';\nimport { MAX_TOASTS } from '../../common/constants';\n\nexport const ToastContainer = () => {\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const [toasts, setToast] = useState([]);\n useEffect(() => {\n ToastManager.addListener(setToast);\n return () => {\n ToastManager.removeListener(setToast);\n };\n }, []);\n return (\n <ToastPrimitive.Provider swipeDirection=\"left\" duration={3000}>\n {toasts.slice(0, MAX_TOASTS).map(toast => {\n return <Toast key={toast.id} {...toast} onOpenChange={value => !value && ToastManager.removeToast(toast.id)} />;\n })}\n <ToastPrimitive.Viewport\n css={{\n position: 'absolute',\n ...(!isConnected ? {} : { bottom: '$24' }),\n }}\n />\n </ToastPrimitive.Provider>\n );\n};\n", "import React from 'react';\nimport { Toast as ToastPrimitive } from '../../../Toast';\n\nexport const Toast = ({ title, description, close = true, open, duration, onOpenChange, icon, ...props }) => {\n return (\n <ToastPrimitive.HMSToast\n title={title}\n description={description}\n open={open}\n isClosable={close}\n onOpenChange={onOpenChange}\n duration={!close ? 600000 : duration}\n icon={icon}\n {...props}\n />\n );\n};\n", "import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { selectLocalPeerID, selectPeerNameByID, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';\nimport { Box, Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport { config as cssConfig, keyframes } from '../../Theme';\n\nlet emojiCount = 1;\n\nconst flyAndFade = keyframes({\n '20%': { opacity: 1 },\n '100%': { bottom: '60%', opacity: 0 },\n});\n\nconst wiggleLeftRight = keyframes({\n '0%': { marginLeft: '-50px' },\n '100%': { marginLeft: '50px' },\n});\n\nconst wiggleRightLeft = keyframes({\n '0%': { marginLeft: '50px' },\n '100%': { marginLeft: '-50px' },\n});\n\nconst getStartingPoints = isMobile => {\n let arr = [];\n const min = 5;\n const max = isMobile ? 30 : 20;\n const inc = isMobile ? 8 : 5;\n for (let i = min; i <= max; i += inc) {\n arr.push(i);\n }\n return arr;\n};\n\nexport function FlyingEmoji() {\n const localPeerId = useHMSStore(selectLocalPeerID);\n const vanillaStore = useHMSVanillaStore();\n const [emojis, setEmojis] = useState([]);\n const isMobile = useMedia(cssConfig.media.md);\n\n const startingPoints = useMemo(() => getStartingPoints(isMobile), [isMobile]);\n\n const showFlyingEmoji = useCallback(\n (emojiId, senderId) => {\n if (!emojiId || !senderId || document.hidden) {\n return;\n }\n const senderPeerName = vanillaStore.getState(selectPeerNameByID(senderId));\n const nameToShow = localPeerId === senderId ? 'You' : senderPeerName;\n const startingPoint = startingPoints[emojiCount % startingPoints.length];\n const id = emojiCount++;\n\n setEmojis(emojis => {\n return [\n ...emojis,\n {\n id: id,\n emojiId: emojiId,\n senderName: nameToShow,\n startingPoint: `${startingPoint}%`,\n wiggleType: Math.random() < 0.5 ? 0 : 1,\n },\n ];\n });\n },\n [localPeerId, vanillaStore, startingPoints],\n );\n\n useEffect(() => {\n window.showFlyingEmoji = showFlyingEmoji;\n }, [showFlyingEmoji]);\n\n return (\n <Box\n css={{\n position: 'absolute',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n overflow: 'hidden',\n pointerEvents: 'none',\n userSelect: 'none',\n zIndex: 999,\n }}\n >\n {emojis.map(emoji => {\n return (\n <Flex\n key={emoji.id}\n css={{\n left: emoji.startingPoint,\n flexDirection: 'column',\n alignItems: 'center',\n position: 'absolute',\n bottom: 0,\n animation: `${flyAndFade()} 5s forwards, ${\n emoji.wiggleType === 0 ? wiggleLeftRight() : wiggleRightLeft()\n } 1s ease-in-out infinite alternate`,\n }}\n onAnimationEnd={() => {\n setEmojis(emojis.filter(item => item.id !== emoji.id));\n }}\n >\n <Box>\n <em-emoji id={emoji.emojiId} size=\"48px\" set=\"apple\"></em-emoji>\n </Box>\n <Box\n css={{\n width: 'fit-content',\n padding: '$2 $4',\n background: '$surface_bright',\n borderRadius: '$1',\n }}\n >\n <Text\n css={{\n fontSize: '$space$6',\n lineHeight: '$xs',\n color: '$on_surface_high',\n }}\n >\n {emoji.senderName}\n </Text>\n </Box>\n </Flex>\n );\n })}\n </Box>\n );\n}\n", "import React, { useCallback } from 'react';\nimport { useCustomEvent, useHMSActions } from '@100mslive/react-sdk';\nimport { REMOTE_STOP_SCREENSHARE_TYPE } from '../common/constants';\n\nexport function RemoteStopScreenshare() {\n const actions = useHMSActions();\n\n const onRemoteStopScreenshare = useCallback(async () => {\n await actions.setScreenShareEnabled(false);\n }, [actions]);\n\n useCustomEvent({\n type: REMOTE_STOP_SCREENSHARE_TYPE,\n onEvent: onRemoteStopScreenshare,\n });\n\n return <></>;\n}\n", "import { Indicator, Root } from '@radix-ui/react-progress';\nimport { styled } from '../Theme';\n\nconst StyledIndicator = styled(Indicator, { h: '$4', backgroundColor: '$primary_default' });\n\nconst StyledRoot = styled(Root, {\n w: '100%',\n h: '$4',\n borderRadius: '$round',\n backgroundColor: '$secondary_dim',\n overflow: 'hidden',\n});\n\nexport const Progress = {\n Root: StyledRoot,\n Content: StyledIndicator,\n};\n"],
4
+ "sourcesContent": ["export * from './Button';\nexport * from './Text';\nexport * from './IconButton';\nexport * from './Layout';\nexport * from './Avatar';\nexport * from './Divider';\nexport * from './Switch';\nexport * from './Tooltip';\nexport * from './Select';\nexport * from './Slider';\nexport * from './Modal';\nexport * from './Loading';\nexport * from './Input';\nexport * from './VideoTile';\nexport * from './VideoList';\nexport * from './Pagination';\nexport * from './Dropdown';\nexport { textEllipsis, flexCenter, slideLeftAndFade } from './utils';\nexport * from './Video';\nexport * from './TileMenu';\nexport * from './AudioLevel';\nexport * from './Popover';\nexport * from './Stats';\nexport * from './Theme';\nexport * from './Checkbox';\nexport * from './Label';\nexport * from './RadioGroup';\nexport * from './Toast';\nexport * from './Accordion';\nexport * from './Fieldset';\nexport * from './Footer';\nexport * as HMSSelect from './ReactSelect';\nexport * from './Tabs';\nexport * from './QRCode';\nexport * from './Link';\nexport * from './Collapsible';\nexport * from './Prebuilt';\nexport * from './Progress';\n", "export { Button } from './Button';\n", "import React, { ComponentPropsWithRef, PropsWithChildren } from 'react';\nimport { Flex } from '../Layout';\nimport { Loading } from '../Loading';\nimport { styled } from '../Theme';\nimport { flexCenter } from '../utils/styles';\n\n/**\n * @param base bg color\n * @param hover hover state bg color\n * @param active active state bg color\n * @returns CSS object based on the state\n */\n\nconst getOutlinedVariants = (\n base: string,\n hover: string,\n active: string,\n disabled: string,\n text: string,\n textDisabled: string,\n) => {\n return {\n bg: '$transparent',\n border: `solid $space$px $colors${base}`,\n c: text,\n '&[disabled]': {\n c: textDisabled,\n bg: '$transparent',\n border: `solid $space$px $colors${disabled}`,\n cursor: 'not-allowed',\n },\n '&:not([disabled]):hover': {\n border: `solid $space$px $colors${hover}`,\n bg: '$transparent',\n },\n '&:not([disabled]):active': {\n border: `solid $space$px $colors${active}`,\n bg: '$transparent',\n },\n '&:not([disabled]):focus-visible': {\n boxShadow: `0 0 0 3px $colors${base}`,\n },\n };\n};\n\nconst getButtonVariants = (\n base: string,\n hover: string,\n active: string,\n disabled: string,\n text: string,\n textDisabled: string,\n) => {\n return {\n bg: base,\n border: `1px solid ${base}`,\n c: text,\n '&[disabled]': {\n c: textDisabled,\n cursor: 'not-allowed',\n bg: disabled,\n border: `1px solid ${disabled}`,\n },\n '&:not([disabled]):hover': {\n bg: hover,\n border: `1px solid ${hover}`,\n },\n '&:not([disabled]):active': {\n bg: active,\n border: `1px solid ${active}`,\n },\n '&:not([disabled]):focus-visible': {\n boxShadow: `0 0 0 3px ${base}`,\n },\n };\n};\n\nconst StyledButton = styled('button', {\n ...flexCenter,\n cursor: 'pointer',\n fontFamily: '$sans',\n lineHeight: 'inherit',\n textTransform: 'none',\n position: 'relative',\n outline: 'none',\n border: 'none',\n fs: '$md',\n r: '$1',\n backgroundColor: '$primary_default',\n fontWeight: '500',\n whiteSpace: 'nowrap',\n p: '$4 $8',\n '-webkit-appearance': 'button',\n '&:focus': {\n outline: 'none',\n },\n '&:not([disabled]):focus-visible': {\n boxShadow: '0 0 0 3px $colors$primary_default',\n },\n transition: 'all 0.2s ease',\n compoundVariants: [\n {\n variant: 'standard',\n outlined: true,\n css: getOutlinedVariants(\n '$secondary_default',\n '$secondary_bright',\n '$secondary_dim',\n '$secondary_disabled',\n '$on_secondary_high',\n '$on_secondary_low',\n ),\n },\n {\n variant: 'danger',\n outlined: true,\n css: getOutlinedVariants(\n '$alert_error_default',\n '$alert_error_bright',\n '$alert_error_dim',\n '$alert_error_brighter',\n '$on_surface_high',\n '$on_surface_low',\n ),\n },\n {\n variant: 'primary',\n outlined: true,\n css: getOutlinedVariants(\n '$primary_default',\n '$primary_bright',\n '$primary_dim',\n '$primary_disabled',\n '$on_primary_high',\n '$on_primary_low',\n ),\n },\n ],\n variants: {\n variant: {\n standard: getButtonVariants(\n '$secondary_default',\n '$secondary_bright',\n '$secondary_dim',\n '$secondary_disabled',\n '$on_secondary_high',\n '$on_secondary_low',\n ),\n danger: getButtonVariants(\n '$alert_error_default',\n '$alert_error_bright',\n '$alert_error_dim',\n '$alert_error_dim',\n '$on_surface_high',\n '$on_surface_low',\n ),\n primary: getButtonVariants(\n '$primary_default',\n '$primary_bright',\n '$primary_dim',\n '$primary_disabled',\n '$on_primary_high',\n '$on_primary_low',\n ),\n },\n outlined: {\n true: {},\n },\n icon: {\n true: {},\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n});\n\nexport const Button = React.forwardRef<\n HTMLButtonElement,\n PropsWithChildren<{ loading?: boolean } & ComponentPropsWithRef<typeof StyledButton>>\n>(({ children, loading = false, icon, ...buttonProps }, ref) => {\n return (\n <StyledButton {...buttonProps} ref={ref}>\n <>\n {loading && (\n <Flex align=\"center\" justify=\"center\" css={{ w: '100%', position: 'absolute', left: '0' }}>\n <Loading />\n </Flex>\n )}\n <Flex\n align=\"center\"\n justify=\"center\"\n css={{ visibility: loading ? 'hidden' : 'visible', gap: icon ? '$4' : '0' }}\n >\n {children}\n </Flex>\n </>\n </StyledButton>\n );\n});\n", "import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { Theme } from './stitches.config';\nimport { createTheme, theme } from './stitches.config';\nimport useSSR from './useSSR';\n\nconst defaultAspectRatio = {\n width: 1,\n height: 1,\n};\n\nexport enum ThemeTypes {\n // eslint-disable-next-line no-unused-vars\n default = 'default',\n}\n\nexport type ThemeContextValue = {\n themeType: ThemeTypes;\n theme: Theme;\n aspectRatio: { width: number; height: number };\n /**\n * @param {ThemeTypes} themeToUpdateTo - optional\n * Use this to toggle or update the currentTheme.\n * if a param is passed, it will set the theme to passed value, otherwise will toggle between light and dark\n * depending on current applied theme\n */\n toggleTheme: (themeToUpdateTo?: ThemeTypes) => void;\n};\n\nexport type ThemeProviderProps = {\n themeType?: ThemeTypes;\n theme?: Theme;\n aspectRatio?: { width: number; height: number };\n};\n\nconst defaultContext = {\n themeType: ThemeTypes.default,\n theme,\n aspectRatio: { width: 1, height: 1 },\n toggleTheme: (_themeToUpdateTo?: ThemeTypes) => {\n return;\n },\n};\nexport const ThemeContext = React.createContext(defaultContext);\n\n/**\n * Wrap this around your root component to get access to theme\n * eg:\n * <ThemeProvider type=\"dark\" appBuilder={{ aspectRatio: { width:1, height: 1} }}>\n * <App />\n * </ThemeProvider>\n */\nexport const HMSThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>> = ({\n themeType,\n theme: userTheme,\n aspectRatio = defaultAspectRatio,\n children,\n}) => {\n const systemTheme = ThemeTypes.default;\n const [currentTheme, setCurrentTheme] = useState(themeType || systemTheme);\n const previousClassName = useRef('');\n const { isBrowser } = useSSR();\n const updatedTheme = useMemo(() => {\n const updatedTheme = createTheme({ themeType: currentTheme, theme: userTheme || {} });\n if (!isBrowser) {\n return updatedTheme;\n }\n if (previousClassName.current) {\n document.documentElement.classList.remove(previousClassName.current);\n }\n previousClassName.current = updatedTheme.className;\n document.documentElement.classList.add(updatedTheme);\n return updatedTheme;\n }, [userTheme, currentTheme, isBrowser]);\n\n const toggleTheme = useCallback(\n (themeToUpdateTo?: ThemeTypes) => {\n if (themeToUpdateTo) {\n setCurrentTheme(themeToUpdateTo);\n return;\n }\n setCurrentTheme(ThemeTypes.default);\n },\n [currentTheme],\n );\n\n useEffect(() => {\n if (themeType) {\n setCurrentTheme(themeType);\n }\n }, [themeType]);\n\n return (\n <ThemeContext.Provider\n value={{ themeType: currentTheme, theme: updatedTheme as unknown as Theme, aspectRatio, toggleTheme }}\n >\n {children}\n </ThemeContext.Provider>\n );\n};\n\nexport const useTheme = () => React.useContext(ThemeContext);\n", "import { useEffect, useState } from 'react';\n\nconst isBrowser = (): boolean => {\n return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);\n};\n\nexport type SSRState = {\n isBrowser: boolean;\n isServer: boolean;\n};\n\nconst useSSR = (): SSRState => {\n const [browser, setBrowser] = useState<boolean>(false);\n useEffect(() => {\n setBrowser(isBrowser());\n }, []);\n\n return {\n isBrowser: browser,\n isServer: !browser,\n };\n};\n\nexport default useSSR;\n", "export { Avatar, StyledAvatar } from './Avatar';\n", "import React from 'react';\nimport { VariantProps } from '@stitches/react';\nimport { PersonIcon } from '@100mslive/react-icons';\nimport { styled } from '../Theme';\nimport { getAvatarBg } from './getAvatarBg';\nimport { flexCenter } from '../utils/styles';\n\nconst getAvatarShape = (radii: string) => ({\n borderRadius: radii,\n});\n\nexport const StyledAvatar = styled('div', {\n ...flexCenter,\n color: '$colors$on_primary_high',\n fontFamily: '$sans',\n aspectRatio: 1,\n fontWeight: 600,\n fontSize: '$space$9',\n variants: {\n shape: {\n circle: getAvatarShape('$round'),\n square: getAvatarShape('$1'),\n },\n size: {\n small: {\n height: '$16 !important',\n fontSize: '$space$6',\n },\n medium: {\n height: '$18 !important',\n fontSize: '$space$10',\n },\n large: {\n height: '$20 !important',\n fontSize: '$space$12',\n },\n },\n },\n defaultVariants: {\n shape: 'circle',\n },\n});\n\ntype Props = VariantProps<typeof StyledAvatar> &\n React.ComponentProps<typeof StyledAvatar> & {\n name: string;\n };\n\nexport const Avatar: React.FC<Props> = ({ name, css, ...props }) => {\n const { initials } = getAvatarBg(name);\n let { color } = getAvatarBg(name);\n if (!name) {\n color = '#7E47EB';\n }\n return (\n <StyledAvatar css={{ bg: color, ...css }} {...props}>\n {initials || <PersonIcon height={40} width={40} />}\n </StyledAvatar>\n );\n};\n", "const getInitials = (name: string | undefined) => {\n if (!name) {\n return undefined;\n } else {\n return name\n .trim()\n .match(/(^\\S\\S?|\\b\\S)?/g)\n ?.join('')\n ?.match(/(^\\S|\\S$)?/g)\n ?.join('')\n .toUpperCase();\n }\n};\n\n/**\n calculates the initials of the name and choose a background color based on the first later of the initials\n */\nexport const getAvatarBg = (name: string): { initials: string; color: string } => {\n const initials = getInitials(name);\n const indexFactor = 20;\n const colorIndex = ((initials?.codePointAt(0) || 0) % indexFactor) + 1;\n return { initials: initials || '', color: colorsList[colorIndex - 1] };\n};\n\nconst colorsList = [\n '#616161',\n '#F44336',\n '#3F51B5',\n '#4CAF50',\n '#FFA000',\n '#795548',\n '#E91E63',\n '#2F80FF',\n '#8BC34A',\n '#F57C00',\n '#4E342E',\n '#9C27B0',\n '#00BCD4',\n '#C0CA33',\n '#F4511E',\n '#673AB7',\n '#009688',\n '#FBC02D',\n '#BF360C',\n '#455A64',\n];\n", "export { HorizontalDivider, VerticalDivider } from './Divider';\n", "import { styled } from '../Theme';\n\nconst getVerticalSpace = (space: string) => ({\n marginLeft: space,\n marginRight: space,\n});\nconst getHorizontalSpace = (space: string) => ({\n marginTop: space,\n marginBottom: space,\n});\n\nexport const VerticalDivider = styled('span', {\n height: '25px',\n width: '1px',\n backgroundColor: '$border_bright',\n variants: {\n space: {\n 1: getVerticalSpace('$1'),\n 2: getVerticalSpace('$2'),\n 3: getVerticalSpace('$3'),\n 4: getVerticalSpace('$4'),\n },\n },\n defaultVariants: {\n space: 1,\n },\n});\n\nexport const HorizontalDivider = styled('span', {\n height: '1px',\n width: '100%',\n display: 'block',\n backgroundColor: '$border_bright',\n variants: {\n space: {\n 1: getHorizontalSpace('$1'),\n 2: getHorizontalSpace('$2'),\n 3: getHorizontalSpace('$3'),\n 4: getHorizontalSpace('$4'),\n },\n },\n defaultVariants: {\n space: 1,\n },\n});\n", "export { Switch } from './Switch';\n", "import React from 'react';\nimport * as BaseSwitch from '@radix-ui/react-switch';\nimport { styled } from '../Theme';\n\nconst SwitchRoot = styled(BaseSwitch.Root, {\n all: 'unset',\n width: '30px',\n height: '14px',\n border: 'solid $space$px $secondary_default',\n borderRadius: '$3',\n p: '$2',\n position: 'relative',\n cursor: 'pointer',\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary_default',\n border: 'solid $space$px $primary_default',\n },\n '&:focus': {\n outline: 'none',\n },\n '&[disabled]': {\n opacity: 0.5,\n cursor: 'not-allowed',\n },\n});\n\nconst SwitchThumb = styled(BaseSwitch.Thumb, {\n display: 'block',\n top: '3px',\n position: 'absolute',\n width: '$md',\n height: '$md',\n backgroundColor: '$secondary_default',\n borderRadius: '$round',\n transition: 'right 500ms ease-in',\n left: '$2',\n '&[data-state=\"checked\"]': {\n left: 'unset',\n right: '$2',\n backgroundColor: '$on_primary_high',\n },\n});\n\ntype SwitchProps = React.ComponentProps<typeof SwitchRoot>;\n\nexport const Switch: React.FC<SwitchProps> = props => (\n <SwitchRoot {...props}>\n <SwitchThumb />\n </SwitchRoot>\n);\n\nSwitch.displayName = 'Switch';\n", "export { Select } from './Select';\n", "import React from 'react';\nimport { ChevronDownIcon } from '@100mslive/react-icons';\nimport { styled } from '../Theme';\n\nconst Root = styled('div', {\n color: '$on_primary_high',\n display: 'inline-flex',\n position: 'relative',\n outline: 'none',\n overflow: 'hidden',\n borderRadius: '$1',\n backgroundColor: '$surface_default',\n maxWidth: '100%',\n});\n\n// TODO: replace these with tokens\nconst SelectRoot = styled('select', {\n h: '$16',\n fontSize: '$md',\n fontWeight: '500',\n lineHeight: 'inherit',\n textTransform: 'none',\n appearance: 'none',\n color: '$on_secondary_high',\n padding: '5px',\n paddingLeft: '12px',\n paddingRight: '30px',\n border: 'none',\n borderRadius: '8px',\n backgroundColor: '$secondary_default',\n '&:not([disabled]):focus-visible': {\n boxShadow: '0 0 0 3px $colors$primary_default',\n },\n '&[disabled]': {\n opacity: 0.5,\n cursor: 'not-allowed',\n },\n});\n\nconst Arrow = styled('span', {\n color: '$on_secondary_high',\n width: '30px',\n height: '100%',\n position: 'absolute',\n right: 0,\n pointerEvents: 'none',\n display: 'flex',\n alignItems: 'center',\n transition: 'border .2s ease 0s',\n});\n\nconst DefaultDownIcon = ({ ...props }) => (\n <Arrow {...props}>\n <ChevronDownIcon />\n </Arrow>\n);\n\nexport const Select = {\n Root,\n DownIcon: Arrow,\n DefaultDownIcon,\n Select: SelectRoot,\n};\n", "export { Slider } from './Slider';\n", "import React from 'react';\nimport * as BaseSlider from '@radix-ui/react-slider';\nimport { CSS } from '@stitches/react';\nimport { styled } from '../Theme';\nimport { Tooltip } from '../Tooltip';\n\nconst Root = styled(BaseSlider.Root, {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n userSelect: 'none',\n touchAction: 'none',\n width: '100%',\n '&[data-orientation=\"horizontal\"]': {\n height: 20,\n },\n});\n\nconst Track = styled(BaseSlider.Track, {\n backgroundColor: '$surface_bright',\n position: 'relative',\n flexGrow: 1,\n borderRadius: '$round',\n cursor: 'pointer',\n '&[data-orientation=\"horizontal\"]': { height: 3 },\n});\n\nconst Range = styled(BaseSlider.Range, {\n position: 'absolute',\n backgroundColor: '$primary_default',\n borderRadius: '$round',\n height: '100%',\n});\n\nconst Thumb = styled(BaseSlider.Thumb, {\n all: 'unset',\n display: 'block',\n width: '$8',\n height: '$8',\n backgroundColor: '$primary_default',\n cursor: 'pointer',\n boxShadow: `0 2px 10px $colors$surface_default`,\n borderRadius: 10,\n '&:hover': { backgroundColor: '$primary_default' },\n '&:focus': { boxShadow: 'none' },\n});\n\ntype SliderProps = React.ComponentProps<typeof Root> & {\n thumbStyles?: CSS;\n showTooltip?: boolean;\n};\n\nexport const Slider: React.FC<SliderProps & { showTooltip?: boolean }> = ({\n showTooltip = true,\n thumbStyles,\n ...props\n}) => (\n <Root {...props}>\n <Track>\n <Range />\n </Track>\n {showTooltip ? (\n <Tooltip title={String(props.value?.[0])}>\n <Thumb css={thumbStyles} />\n </Tooltip>\n ) : (\n <Thumb css={thumbStyles} />\n )}\n </Root>\n);\n", "export { Dialog } from './Dialog';\n", "import { Root } from '@radix-ui/react-dialog';\nimport { styled } from '@stitches/react';\nimport {\n DialogClose,\n DialogDefaultCloseIcon,\n DialogDescription,\n DialogTitle,\n StyledDialogContent,\n StyledDialogOverlay,\n StyledDialogPortal,\n StyledDialogTrigger,\n} from './DialogContent';\n\nconst StyledDialog = styled(Root, {});\n\nexport const Dialog = {\n Root: StyledDialog,\n Trigger: StyledDialogTrigger,\n Overlay: StyledDialogOverlay,\n Content: StyledDialogContent,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n DefaultClose: DialogDefaultCloseIcon,\n Portal: StyledDialogPortal,\n};\n", "import React, { ComponentProps } from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { CrossIcon } from '@100mslive/react-icons';\nimport { IconButton } from '../IconButton';\nimport { styled } from '../Theme';\nimport { dialogClose, dialogOpen } from '../utils/animations';\n\nexport const DialogClose = styled(DialogPrimitive.Close, {\n backgroundColor: 'transparent',\n padding: '0',\n margin: '0',\n border: 'none',\n backgroundImage: 'none',\n});\n\nexport const StyledDialogTrigger = styled(DialogPrimitive.Trigger, {\n appearance: 'none !important', // Needed for safari it shows white overlay\n});\n\nexport const StyledDialogOverlay = styled(DialogPrimitive.Overlay, {\n backgroundColor: 'rgba(0, 0, 0, 0.5);',\n position: 'fixed',\n inset: 0,\n});\n\nexport const StyledDialogPortal = styled(DialogPrimitive.Portal, {});\n\nexport const StyledDialogContent = styled(DialogPrimitive.Content, {\n color: '$on_surface_medium',\n backgroundColor: '$surface_default',\n borderRadius: '8px',\n position: 'fixed',\n top: '50%',\n left: '50%',\n border: '$space$px solid $border_bright',\n boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',\n transform: 'translate(-50%, -50%)',\n zIndex: 999,\n padding: '$12',\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${dialogOpen} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,\n },\n '&[data-state=\"closed\"]': {\n animation: `${dialogClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,\n },\n },\n '&:focus': { outline: 'none' },\n});\n\nexport const DialogTitle = styled(DialogPrimitive.Title, {\n margin: 0,\n});\n\nexport const DialogDescription = styled(DialogPrimitive.Description, {});\n\nexport const DialogDefaultCloseIcon = (props: ComponentProps<typeof IconButton>) => (\n <DialogClose asChild>\n <IconButton {...props}>\n <CrossIcon />\n </IconButton>\n </DialogClose>\n);\n", "import React, { ComponentProps, PropsWithChildren, PropsWithRef } from 'react';\nimport { CSS } from '@stitches/react';\nimport { CopyIcon, EyeCloseIcon, EyeOpenIcon } from '@100mslive/react-icons';\nimport { Flex } from '../Layout';\nimport { styled } from '../Theme';\n\nexport const Input = styled('input', {\n fontFamily: '$sans',\n lineHeight: 'inherit',\n backgroundColor: '$surface_default',\n borderRadius: '8px',\n outline: 'none',\n border: '1px solid $border_default',\n padding: '0.5rem 0.75rem',\n minHeight: '30px',\n color: '$on_surface_high',\n fontSize: '$md',\n '&:focus': {\n boxShadow: '0 0 0 1px $colors$primary_default',\n border: '1px solid transparent',\n },\n '&::placeholder': {\n color: '$on_surface_low',\n },\n variants: {\n alert_error_default: {\n true: {\n '&:focus': {\n boxShadow: '0 0 0 3px $colors$alert_error_default',\n },\n },\n },\n },\n});\n\nconst PasswordRoot = styled('div', {\n w: '100%',\n position: 'relative',\n display: 'flex',\n});\n\nconst PasswordShowIcon: React.FC<ComponentProps<typeof Flex> & { showPassword?: boolean; css?: CSS }> = ({\n showPassword,\n css,\n ...props\n}) => {\n return (\n <Flex css={{ ...css }} {...props}>\n {showPassword ? <EyeOpenIcon /> : <EyeCloseIcon />}\n </Flex>\n );\n};\n\nconst PasswordCopyIcon: React.FC<ComponentProps<typeof Flex & { css?: CSS }>> = ({ css, ...props }) => {\n return (\n <Flex css={{ ...css }} {...props}>\n <CopyIcon />\n </Flex>\n );\n};\n\nconst PasswordIcons = React.forwardRef<HTMLDivElement, PropsWithChildren<ComponentProps<typeof Flex & { css?: CSS }>>>(\n ({ css, ...props }, ref) => {\n return (\n <Flex\n css={{\n position: 'absolute',\n top: 0,\n height: '100%',\n zIndex: 10,\n right: '$4',\n bg: '$surface_bright',\n alignItems: 'center',\n ...css,\n }}\n ref={ref}\n {...props}\n >\n {props.children}\n </Flex>\n );\n },\n);\n\nconst ReactInput: React.FC<PropsWithRef<ComponentProps<typeof Input> & { showPassword?: boolean; css?: CSS }>> =\n React.forwardRef<\n HTMLInputElement,\n PropsWithRef<ComponentProps<typeof Input> & { showPassword?: boolean; css?: CSS }>\n >(({ showPassword = false, css, ...props }, ref) => {\n return (\n <Input\n css={{ flexGrow: 1, width: '100%', ...css }}\n type={showPassword ? 'text' : 'password'}\n {...props}\n ref={ref}\n />\n );\n });\n\nexport const PasswordInput = {\n Root: PasswordRoot,\n Icons: PasswordIcons,\n Input: ReactInput,\n ShowIcon: PasswordShowIcon,\n CopyIcon: PasswordCopyIcon,\n};\n", "export { StyledVideoTile } from './StyledVideoTile';\n", "import { Box } from '../Layout';\nimport { styled } from '../Theme';\nimport { flexCenter } from '../utils';\n\nexport const Root = styled('div', {\n padding: '0.75rem',\n // show videotile context menu on hover\n // [`&:hover .tile-menu`]: {\n // display: 'inline-block',\n // },\n});\n\nconst Container = styled('div', {\n width: '100%',\n height: '100%',\n position: 'relative',\n borderRadius: '$2',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: '$surface_default',\n variants: {\n transparentBg: {\n true: {\n background: 'transparent',\n },\n },\n noRadius: {\n true: {\n borderRadius: 0,\n },\n },\n },\n});\n\nconst Overlay = styled('div', {\n position: 'absolute',\n width: '100%',\n height: '100%',\n});\n\nconst Info = styled('div', {\n color: '$on_primary_high',\n position: 'absolute',\n bottom: '5px',\n left: '50%',\n fontSize: '$sm',\n transform: 'translateX(-50%)',\n textAlign: 'center',\n width: '80%',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n fontFamily: '$sans',\n});\n\nconst AttributeBox = styled('div', {\n position: 'absolute',\n color: '$on_primary_high',\n});\n\nconst AudioIndicator = styled('div', {\n position: 'absolute',\n top: '$4',\n right: '$4',\n color: '$on_primary_high',\n bg: '$secondary_dim',\n borderRadius: '$round',\n width: '$14',\n height: '$14',\n mb: '5px',\n ...flexCenter,\n variants: {\n size: {\n small: {\n width: '$10',\n height: '$10',\n '& > svg': {\n width: '$8',\n height: '$8',\n },\n },\n medium: {\n width: '$13',\n height: '$13',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\nconst FullScreenButton = styled('button', {\n width: '2.25rem',\n height: '2.25rem',\n color: '$on_surface_high',\n borderRadius: '$round',\n backgroundColor: '$surface_default',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'absolute',\n top: '$2',\n right: '$2',\n zIndex: 5,\n '&:not([disabled]):focus': {\n outline: 'none',\n boxShadow: '0 0 0 3px $colors$primary_bright',\n },\n});\n\nconst AvatarContainer = styled(Box, {\n ...flexCenter,\n flexDirection: 'column',\n position: 'absolute',\n left: '50%',\n top: '50%',\n transform: 'translateX(-50%) translateY(-50%)',\n width: '40%',\n height: '40%',\n '& > div': {\n maxHeight: '$20',\n height: '100%',\n },\n});\n\ninterface VideoTileType {\n Root: typeof Root;\n Container: typeof Container;\n Overlay: typeof Overlay;\n Info: typeof Info;\n AudioIndicator: typeof AudioIndicator;\n AvatarContainer: typeof AvatarContainer;\n AttributeBox: typeof AttributeBox;\n FullScreenButton: typeof FullScreenButton;\n}\n\nexport const StyledVideoTile: VideoTileType = {\n Root,\n Container,\n Overlay,\n Info,\n AudioIndicator,\n AvatarContainer,\n AttributeBox,\n FullScreenButton,\n};\n", "export { getLeft } from './videoListUtils';\nexport { StyledVideoList } from './StyledVideoList';\n", "export const getLeft = (index: number, currentPageIndex: number) => {\n //active slide\n if (index === currentPageIndex) {\n return 0;\n }\n //prev slide\n if (index + 1 === currentPageIndex) {\n return '-100%';\n }\n //next slide\n if (index - 1 === currentPageIndex) {\n return '100%';\n }\n //all slides before prev\n if (index < currentPageIndex) {\n return '-200%';\n }\n //all slides after next\n return '200%';\n};\n", "import { styled } from '../Theme';\n\nconst Root = styled('div', {\n height: '100%',\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n});\n\nconst Container = styled('div', {\n height: '100%',\n width: '100%',\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n overflow: 'hidden',\n});\n\nconst View = styled('div', {\n height: '100%',\n width: '100%',\n position: 'absolute',\n display: 'flex',\n placeContent: 'center',\n flexWrap: 'wrap',\n alignItems: 'center',\n});\n\ninterface VideoListType {\n Root: typeof Root;\n Container: typeof Container;\n View: typeof View;\n}\n\nexport const StyledVideoList: VideoListType = {\n Root,\n Container,\n View,\n};\n", "export { StyledPagination } from './StyledPagination';\n", "import { styled } from '../Theme';\n\nconst Root = styled('div', {\n height: '2rem',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: '100%',\n '& > * + *': {\n marginRight: '0',\n marginLeft: '0.5rem',\n },\n});\n\nconst Chevron = styled('button', {\n color: '$on_surface_high',\n '&:focus': {\n outline: 'none',\n },\n '&[disabled]': {\n color: '$on_surface_low',\n cursor: 'not-allowed',\n },\n display: 'flex',\n});\n\nconst Dots = styled('div', {\n display: 'flex',\n alignItems: 'center',\n '& > * + *': {\n marginRight: '0',\n marginLeft: '0.5rem',\n },\n});\n\nconst Dot = styled('button', {\n '&:focus': {\n outline: 'none',\n },\n borderRadius: '9999px',\n width: '0.5rem',\n height: '0.5rem',\n backgroundColor: '$on_surface_low',\n padding: '0px',\n border: 'none',\n cursor: 'pointer',\n variants: {\n active: {\n true: {\n backgroundColor: '$on_surface_high',\n },\n },\n },\n});\n\ninterface PaginationType {\n Root: typeof Root;\n Chevron: typeof Chevron;\n Dots: typeof Dots;\n Dot: typeof Dot;\n}\n\nexport const StyledPagination: PaginationType = {\n Root,\n Chevron,\n Dots,\n Dot,\n};\n", "import {\n CheckboxItem,\n Content,\n Group,\n Item,\n ItemIndicator,\n Label,\n Portal,\n Root,\n Separator,\n Sub,\n SubContent,\n SubTrigger,\n Trigger,\n} from '@radix-ui/react-dropdown-menu';\nimport { styled } from '../Theme';\n\nconst DropdownRoot = styled(Root, {});\n\nconst DropdownTrigger = styled(Trigger, {\n cursor: 'pointer',\n appearance: 'none !important',\n '&[data-state=\"open\"]': {\n backgroundColor: '$surface_bright',\n },\n '&:focus': {\n outline: 'none',\n },\n '&:focus-visible': {\n boxShadow: '0 0 0 3px $colors$primary_default',\n },\n});\n\nconst DropdownTriggerItem = styled(SubTrigger, {\n w: '100%',\n color: '$on_surface_high',\n p: '$8',\n display: 'flex',\n alignItems: 'center',\n '&:hover': {\n cursor: 'pointer',\n bg: '$surface_brighter',\n },\n '&:focus-visible': {\n bg: '$surface_brighter',\n outline: 'none',\n },\n});\n\nconst DropdownItem = styled(Item, {\n color: '$on_surface_high',\n p: '$8',\n display: 'flex',\n alignItems: 'center',\n outline: 'none',\n backgroundColor: '$surface_default',\n '&:hover': {\n cursor: 'pointer',\n bg: '$surface_bright',\n },\n '&:focus-visible': {\n bg: '$surface_bright',\n },\n});\n\nconst DropdownItemSeparator = styled(Separator, {\n h: 1,\n backgroundColor: '$border_bright',\n m: '$4 $8',\n});\n\nconst DropdownContent = styled(Content, {\n w: '$80',\n maxHeight: '$64',\n r: '$1',\n py: '$4',\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 zIndex: 20,\n fontFamily: '$sans',\n});\n\nconst DropdownLabel = styled(Label, {\n display: 'flex',\n alignItems: 'center',\n h: '$12',\n w: '100%',\n p: '$8 $4',\n});\n\nconst DropdownGroup = styled(Group, {});\n\nconst DropdownSubMenu = styled(Sub, {});\n\nconst DropdownSubMenuContent = styled(SubContent, {\n w: '$80',\n maxHeight: '$64',\n r: '$1',\n py: '$4',\n backgroundColor: '$surface_bright',\n overflowY: 'auto',\n boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',\n zIndex: 20,\n});\n\nconst DropdownCheckboxItem = styled(CheckboxItem, {\n color: '$on_surface_high',\n p: '$8',\n display: 'flex',\n alignItems: 'center',\n outline: 'none',\n '&:hover': {\n cursor: 'pointer',\n bg: '$surface_brighter',\n },\n '&:focus-visible': {\n bg: '$surface_brighter',\n },\n gap: '$2',\n});\n\nconst DropdownItemIndicator = styled(ItemIndicator, {\n w: '$10',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n});\n\nexport const Dropdown = {\n Root: DropdownRoot,\n Trigger: DropdownTrigger,\n TriggerItem: DropdownTriggerItem,\n Content: DropdownContent,\n Portal: Portal,\n SubMenu: DropdownSubMenu,\n SubMenuContent: DropdownSubMenuContent,\n Item: DropdownItem,\n Label: DropdownLabel,\n Group: DropdownGroup,\n ItemSeparator: DropdownItemSeparator,\n CheckboxItem: DropdownCheckboxItem,\n ItemIndicator: DropdownItemIndicator,\n};\n", "export { StyledVideo, Video } from './Video';\n", "import React from 'react';\nimport type { VariantProps } from '@stitches/react';\nimport { HMSPeer, useVideo } from '@100mslive/react-sdk';\nimport { styled } from '../Theme';\n\nexport const StyledVideo = styled('video', {\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '$2',\n objectFit: 'cover',\n background: '$background_default',\n variants: {\n mirror: {\n true: {\n transform: 'scaleX(-1)',\n },\n },\n screenShare: {\n true: {\n objectFit: 'contain',\n },\n },\n degraded: {\n // send the video behind when it's degraded so avatar can show on top of it. Video will be stuck frame in this case.\n // not hiding by using display none, because it will lead it to be detached as it will no longer be in view.\n true: {\n zIndex: -100,\n },\n },\n noRadius: {\n true: {\n borderRadius: 0,\n },\n },\n },\n defaultVariants: {\n mirror: false,\n },\n});\n\ntype StyledProps = VariantProps<typeof StyledVideo> & React.ComponentProps<typeof StyledVideo>;\n\ninterface Props {\n /**\n * trackID for peer (videoTrack)\n */\n trackId: HMSPeer['videoTrack'];\n /**\n * Boolean stating whether to override the internal behaviour.\n * when attach is false, even if tile is inView or enabled, it won't be rendered\n */\n attach?: boolean;\n}\n\nexport const Video: React.FC<Props & StyledProps> = ({ trackId, attach, ...props }) => {\n const { videoRef } = useVideo({ trackId, attach });\n return <StyledVideo autoPlay muted playsInline controls={false} ref={videoRef} {...props} />;\n};\n", "export { StyledMenuTile } from './StyledMenuTile';\n", "import * as Popover from '@radix-ui/react-popover';\nimport { styled } from '../Theme';\nimport { popoverAnimation } from '../utils/animations';\nimport { flexCenter } from '../utils/styles';\n\nconst Root = Popover.Root;\n\nconst StyledTrigger = styled(Popover.Trigger, {\n position: 'absolute',\n bottom: '$2',\n right: '$2',\n zIndex: 10,\n width: '$13',\n height: '$13',\n color: '$on_surface_high',\n borderRadius: '$round',\n backgroundColor: '$surface_bright',\n cursor: 'pointer',\n border: 'none',\n ...flexCenter,\n '&:not([disabled]):focus': {\n outline: 'none',\n boxShadow: '0 0 0 3px $colors$primary_bright',\n },\n});\n\nconst StyledContent = styled(Popover.Content, {\n fontFamily: '$sans',\n backgroundColor: '$surface_bright',\n padding: '$5 0',\n display: 'flex',\n flexDirection: 'column',\n borderRadius: '$space$6',\n zIndex: 11,\n width: '$60',\n ...popoverAnimation,\n});\n\nconst styledItem = {\n fontSize: '$sm',\n color: '$on_surface_high',\n display: 'flex',\n alignItems: 'center',\n padding: '$4 $6',\n width: '100%',\n backgroundColor: '$menuBg',\n};\n\nconst StyledItemButton = styled('button', {\n ...styledItem,\n height: '$14',\n '&:hover': {\n backgroundColor: '$surface_brighter',\n },\n cursor: 'pointer',\n // TODO: default focus applied cause issues with this style\n '&:focus': {\n outline: 'none',\n // backgroundColor: '$grey3',\n },\n '& > * + *': {\n marginRight: '0',\n marginLeft: '$4',\n },\n});\n\nconst StyledVolumeItem = styled('div', {\n // TODO: maybe keep this as base comp and extend button variant\n ...styledItem,\n alignItems: 'start',\n flexDirection: 'column',\n marginBottom: '0',\n});\n\nexport const Flex = styled('div', {\n display: 'flex',\n '& > * + *': {\n marginRight: '0',\n marginLeft: '$4',\n },\n});\n\nconst RemoveMenuItem = styled(StyledItemButton, {\n color: '$alert_error_default',\n borderTop: '1px solid $border_bright',\n});\n\ninterface MenuTileType {\n Root: typeof Root;\n Trigger: typeof StyledTrigger;\n Content: typeof StyledContent;\n ItemButton: typeof StyledItemButton;\n VolumeItem: typeof StyledVolumeItem;\n RemoveItem: typeof RemoveMenuItem;\n}\n\nexport const StyledMenuTile: MenuTileType = {\n Root,\n Trigger: StyledTrigger,\n Content: StyledContent,\n ItemButton: StyledItemButton,\n VolumeItem: StyledVolumeItem,\n RemoveItem: RemoveMenuItem,\n};\n", "export { useBorderAudioLevel } from './AudioLevel';\n", "import { useCallback, useRef } from 'react';\nimport { HMSTrackID } from '@100mslive/hms-video-store';\nimport { useAudioLevelStyles } from '@100mslive/react-sdk';\nimport { useTheme } from '../Theme';\n\n/**\n * pass in a track id and get a ref. That ref can be attached to an element which will have border\n * as per audio level post that.\n */\nexport function useBorderAudioLevel(audioTrackId?: HMSTrackID) {\n const { theme } = useTheme();\n const color = theme.colors.primary_default.value;\n const getStyle = useCallback(\n (level: number) => {\n const style: Record<string, string> = {\n transition: 'outline 0.4s ease-in-out',\n };\n style['outline'] = level ? `${sigmoid(level) * 4}px solid ${color}` : '0px solid transparent';\n return style;\n },\n [color],\n );\n const ref = useRef(null);\n useAudioLevelStyles({\n trackId: audioTrackId,\n getStyle,\n ref,\n });\n return ref;\n}\n\nexport const sigmoid = (z: number) => {\n return 1 / (1 + Math.exp(-z));\n};\n", "import { Arrow, Content, Popover as Root, Portal, Trigger } from '@radix-ui/react-popover';\nimport { styled } from '../Theme';\nimport { popoverAnimation } from '../utils/animations';\n\nconst StyledContent = styled(Content, {\n padding: '$6',\n borderRadius: '$2',\n backgroundColor: '$background_default',\n boxShadow: '$sm',\n zIndex: 12,\n ...popoverAnimation,\n});\n\nconst StyledArrow = styled(Arrow, {\n ...popoverAnimation,\n});\n\nconst StyledTrigger = styled(Trigger, {});\n\nexport const Popover = {\n Root,\n Content: StyledContent,\n Trigger: StyledTrigger,\n Portal: Portal,\n Arrow: StyledArrow,\n};\n", "export { VideoTileStats } from './Stats';\n", "import React, { Fragment } from 'react';\nimport {\n HMSPeerID,\n HMSTrackID,\n HMSTrackStats,\n RID,\n selectConnectionQualityByPeerID,\n selectHMSStats,\n simulcastMapping,\n useHMSStatsStore,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { Tooltip } from '../Tooltip';\nimport { formatBytes } from './formatBytes';\nimport { Stats } from './StyledStats';\n\nexport interface VideoTileStatsProps {\n videoTrackID?: HMSTrackID;\n audioTrackID?: HMSTrackID;\n peerID?: HMSPeerID;\n isLocal: boolean;\n}\n\n/**\n * This component can be used to overlay webrtc stats over the Video Tile. For the local tracks it also includes\n * remote inbound stats as sent by the SFU in receiver report.\n */\nexport function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = false }: VideoTileStatsProps) {\n const audioSelector = isLocal ? selectHMSStats.localAudioTrackStatsByID : selectHMSStats.trackStatsByID;\n const audioTrackStats = useHMSStatsStore(audioSelector(audioTrackID));\n const localVideoTrackStats = useHMSStatsStore(selectHMSStats.localVideoTrackStatsByID(videoTrackID));\n const remoteVideoTrackStats = useHMSStatsStore(selectHMSStats.trackStatsByID(videoTrackID));\n const videoTrackStats = isLocal ? localVideoTrackStats?.[0] : remoteVideoTrackStats;\n const downlinkScore = useHMSStore(selectConnectionQualityByPeerID(peerID))?.downlinkQuality;\n const availableOutgoingBitrate = useHMSStatsStore(selectHMSStats.availablePublishBitrate);\n\n // Viewer role - no stats to show\n if (!(audioTrackStats || videoTrackStats)) {\n return null;\n }\n return (\n <Stats.Root>\n <table>\n <tbody>\n {isLocal ? (\n <Fragment>\n <StatsRow\n show={isNotNullishAndNot0(availableOutgoingBitrate)}\n label=\"AOBR\"\n tooltip=\"Available Outgoing Bitrate\"\n value={formatBytes(availableOutgoingBitrate, 'b/s')}\n />\n {localVideoTrackStats?.map(stat => {\n if (!stat) {\n return null;\n }\n const layer = stat.rid ? simulcastMapping[stat.rid as RID] : '';\n return (\n <Fragment>\n {layer && <StatsRow label={layer.toUpperCase()} value=\"\" />}\n <StatsRow\n show={isNotNullishAndNot0(stat.frameWidth)}\n label=\"Width\"\n value={stat.frameWidth?.toString()}\n />\n <StatsRow\n show={isNotNullishAndNot0(stat.frameHeight)}\n label=\"Height\"\n value={stat.frameHeight?.toString()}\n />\n <StatsRow\n show={isNotNullishAndNot0(stat.framesPerSecond)}\n label=\"FPS\"\n value={`${stat.framesPerSecond} ${\n isNotNullishAndNot0(stat.framesDropped) ? `(${stat.framesDropped} dropped)` : ''\n }`}\n />\n <StatsRow\n show={isNotNullish(stat.bitrate)}\n label=\"Bitrate(V)\"\n value={formatBytes(stat.bitrate, 'b/s')}\n />\n <Stats.Gap />\n </Fragment>\n );\n })}\n </Fragment>\n ) : (\n <Fragment>\n <StatsRow\n show={isNotNullishAndNot0(videoTrackStats?.frameWidth)}\n label=\"Width\"\n value={videoTrackStats?.frameWidth?.toString()}\n />\n <StatsRow\n show={isNotNullishAndNot0(videoTrackStats?.frameHeight)}\n label=\"Height\"\n value={videoTrackStats?.frameHeight?.toString()}\n />\n <StatsRow\n show={isNotNullishAndNot0(videoTrackStats?.framesPerSecond)}\n label=\"FPS\"\n value={`${videoTrackStats?.framesPerSecond} ${\n isNotNullishAndNot0(videoTrackStats?.framesDropped)\n ? `(${videoTrackStats?.framesDropped} dropped)`\n : ''\n }`}\n />\n <StatsRow\n show={isNotNullish(videoTrackStats?.bitrate)}\n label=\"Bitrate(V)\"\n value={formatBytes(videoTrackStats?.bitrate, 'b/s')}\n />\n </Fragment>\n )}\n\n <StatsRow\n show={isNotNullish(audioTrackStats?.bitrate)}\n label=\"Bitrate(A)\"\n value={formatBytes(audioTrackStats?.bitrate, 'b/s')}\n />\n\n <StatsRow show={isNotNullish(downlinkScore)} label=\"Downlink\" value={downlinkScore} />\n\n <StatsRow show={isNotNullish(videoTrackStats?.codec)} label=\"Codec(V)\" value={videoTrackStats?.codec} />\n\n <StatsRow show={isNotNullish(audioTrackStats?.codec)} label=\"Codec(A)\" value={audioTrackStats?.codec} />\n\n <PacketLostAndJitter audioTrackStats={audioTrackStats} videoTrackStats={videoTrackStats} />\n </tbody>\n </table>\n </Stats.Root>\n );\n}\n\nconst PacketLostAndJitter = ({\n audioTrackStats,\n videoTrackStats,\n}: {\n audioTrackStats?: HMSTrackStats;\n videoTrackStats?: HMSTrackStats;\n}) => {\n // for local peer, we'll use the remote inbound stats to get packet loss and jitter, to know whether the track is\n // local we check if the stats type has outbound in it as it's being published from local. Both audio and video\n // tracks are checked in case the user has permission to publish only one of them.\n const isLocalPeer = audioTrackStats?.type.includes('outbound') || videoTrackStats?.type.includes('outbound');\n const audioStats = isLocalPeer ? audioTrackStats?.remote : audioTrackStats;\n const videoStats = isLocalPeer ? videoTrackStats?.remote : videoTrackStats;\n return (\n <>\n <TrackPacketsLostRow label=\"Packet Loss(V)\" stats={videoStats} />\n <TrackPacketsLostRow label=\"Packet Loss(A)\" stats={audioStats} />\n <StatsRow show={isNotNullish(videoStats?.jitter)} label=\"Jitter(V)\" value={videoStats?.jitter?.toFixed(4)} />\n <StatsRow show={isNotNullish(audioStats?.jitter)} label=\"Jitter(A)\" value={audioStats?.jitter?.toFixed(4)} />\n </>\n );\n};\n\nconst TrackPacketsLostRow = ({\n stats,\n label,\n}: {\n stats?: Pick<HMSTrackStats, 'packetsLost' | 'packetsLostRate'>;\n label: string;\n}) => {\n const packetsLostRate = `${stats?.packetsLostRate ? stats.packetsLostRate.toFixed(2) : 0}/s`;\n\n return (\n <StatsRow\n show={isNotNullishAndNot0(stats?.packetsLost)}\n label={label}\n value={`${stats?.packetsLost}(${packetsLostRate})`}\n />\n );\n};\n\nconst RawStatsRow = ({\n label = '',\n value = '',\n tooltip = '',\n show = true,\n}: {\n label: string;\n value?: string | number;\n show?: boolean;\n tooltip?: string;\n}) => {\n const statsLabel = <Stats.Label css={{ fontWeight: !value ? '$semiBold' : '$regular' }}>{label}</Stats.Label>;\n\n return (\n <>\n {show ? (\n <Stats.Row>\n {tooltip ? (\n <Tooltip side=\"top\" title={tooltip}>\n {statsLabel}\n </Tooltip>\n ) : (\n statsLabel\n )}\n {value === '' ? <Stats.Value /> : <Stats.Value>{value}</Stats.Value>}\n </Stats.Row>\n ) : null}\n </>\n );\n};\n\n// memoize so only the rows which change rerender\nconst StatsRow = React.memo(RawStatsRow);\n\nexport function isNotNullishAndNot0(value: number | undefined | null) {\n return isNotNullish(value) && value !== 0;\n}\n\n/**\n * Check only for presence(not truthy) of a value.\n * Use in places where 0, false need to be considered valid.\n */\nexport function isNotNullish(value: number | string | undefined | null) {\n return value !== undefined && value !== null;\n}\n", "export const formatBytes = (bytes?: number, unit = 'B', decimals = 2) => {\n if (bytes === 0) {\n return `0 ${unit}`;\n }\n if (!bytes) {\n return '-';\n }\n\n const k = 1024;\n const dm = decimals < 0 ? 0 : decimals;\n const sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'].map(size => size + unit);\n\n let i = Math.floor(Math.log(bytes) / Math.log(k));\n\n // B to KB\n i === 0 && i++;\n\n return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;\n};\n", "import { styled } from '../Theme';\n\nexport const Root = styled('div', {\n backgroundColor: 'rgba(0,0,0,0.75)',\n position: 'absolute',\n top: '$3',\n left: '$3',\n zIndex: 7,\n borderRadius: '$2',\n padding: '$2',\n fontSize: '$xs',\n overflowY: 'auto',\n maxHeight: '75%',\n maxWidth: '85%',\n});\n\nexport const Table = styled('table', {});\n\nexport const Row = styled('tr', {\n width: '100%',\n '& > * + *': {\n px: '$4',\n },\n whiteSpace: 'nowrap',\n textAlign: 'left',\n});\n\nexport const Label = styled('td', {\n color: '$on_primary_high',\n fontWeight: '$regular',\n});\n\nexport const Value = styled('td', {\n color: '$on_primary_high',\n});\n\nexport const Gap = styled('tr', {\n height: '$4',\n});\n\ninterface StatsType {\n Root: typeof Root;\n Row: typeof Row;\n Label: typeof Label;\n Value: typeof Value;\n Table: typeof Table;\n Gap: typeof Gap;\n}\n\nexport const Stats: StatsType = {\n Root,\n Row,\n Label,\n Value,\n Table,\n Gap,\n};\n", "import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { styled } from '../Theme';\n\nconst CheckboxRoot = styled(CheckboxPrimitive.Root, {\n all: 'unset',\n border: '1px solid $primary_default',\n backgroundColor: '$on_primary_high',\n width: '$8',\n height: '$8',\n borderRadius: '$0',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n boxShadow: 'none',\n outline: 'none',\n cursor: 'pointer',\n '&:focus': {\n boxShadow: 'none',\n outline: 'none',\n },\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary_default',\n },\n});\n\nconst CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {\n color: '$on_primary_high',\n});\n\nexport const Checkbox = {\n Root: CheckboxRoot,\n Indicator: CheckboxIndicator,\n};\n", "import * as LabelPrimitive from '@radix-ui/react-label';\nimport { styled } from '../Theme';\n\nexport const Label = styled(LabelPrimitive.Root, {\n fontFamily: '$sans',\n fontSize: '$md',\n color: '$on_primary_high',\n});\n", "import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { styled } from '../Theme';\n\nconst RadioGroupRoot = styled(RadioGroupPrimitive.Root, {\n display: 'flex',\n alignItems: 'center',\n});\n\nconst RadioGroupItem = styled(RadioGroupPrimitive.Item, {\n bg: '$on_primary_high',\n width: '$8',\n height: '$8',\n border: '1px solid $primary_default',\n cursor: 'pointer',\n borderRadius: '$round',\n '&:focus': {\n boxShadow: 'none',\n outline: 'none',\n },\n '&[data-state=\"checked\"]': {\n borderWidth: '$space$2',\n p: '$1',\n },\n});\nconst RadioGroupIndicator = styled(RadioGroupPrimitive.Indicator, {\n bg: '$primary_default',\n});\n\nexport const RadioGroup = {\n Root: RadioGroupRoot,\n Item: RadioGroupItem,\n Indicator: RadioGroupIndicator,\n};\n", "import React, { ComponentProps } from 'react';\nimport type { ToastProps } from '@radix-ui/react-toast';\nimport * as ToastPrimitives from '@radix-ui/react-toast';\nimport { CrossIcon } from '@100mslive/react-icons';\nimport { IconButton } from '../IconButton';\nimport { Box, Flex } from '../Layout';\nimport { Text } from '../Text';\nimport { styled } from '../Theme';\nimport { toastAnimation } from '../utils';\n\nconst getToastVariant = (base: string) => {\n return {\n borderLeftColor: base,\n borderLeft: 0,\n '&:before': {\n position: 'absolute',\n top: '-1px',\n left: '-$4',\n width: '$8',\n borderLeft: `solid $space$px ${base}`,\n borderTop: `solid $space$px ${base}`,\n borderBottom: `solid $space$px ${base}`,\n borderTopLeftRadius: '$3',\n borderBottomLeftRadius: '$3',\n bg: base,\n content: ' ',\n height: '100%',\n zIndex: 10,\n },\n '@sm': {\n '&:before': {\n content: 'none',\n },\n border: `solid $space$px ${base}`,\n },\n };\n};\n\nconst ToastRoot = styled(ToastPrimitives.Root, {\n r: '$3',\n bg: '$surface_default',\n p: '$10',\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n fontFamily: '$sans',\n border: 'solid $space$px $border_bright',\n overflow: 'hidden',\n ...toastAnimation,\n '@sm': {\n p: '$8 $11',\n },\n variants: {\n variant: {\n standard: getToastVariant('$secondary_default'),\n warning: getToastVariant('$alert_warning'),\n error: getToastVariant('$alert_error_default'),\n success: getToastVariant('$alert_success'),\n },\n },\n defaultVariants: {\n variant: 'standard',\n },\n});\n\nconst ToastTitle = styled(ToastPrimitives.Title, {\n fontSize: '$md',\n color: '$on_surface_high',\n fontWeight: '$semiBold',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n});\nconst ToastDescription = styled(ToastPrimitives.Description, {\n color: '$on_surface_medium',\n});\nconst ToastClose = styled(ToastPrimitives.Close, {});\nconst ToastAction = styled(ToastPrimitives.Action, {\n cursor: 'pointer',\n background: 'none',\n});\nconst ToastViewport = styled(ToastPrimitives.Viewport, {\n position: 'fixed',\n bottom: 0,\n left: 0,\n display: 'flex',\n flexDirection: 'column',\n padding: '$8',\n gap: 10,\n width: 390,\n '@sm': {\n width: '100%',\n padding: '$6',\n },\n maxWidth: '100vw',\n margin: 0,\n listStyle: 'none',\n zIndex: 1000,\n});\n\nconst DefaultClose = ({ css }: Pick<ComponentProps<typeof ToastClose>, 'css'>) => {\n return (\n <ToastClose css={css} asChild>\n <IconButton>\n <CrossIcon />\n </IconButton>\n </ToastClose>\n );\n};\n\ninterface HMSToastProps extends ToastProps {\n title: string;\n description?: string;\n isClosable?: boolean;\n icon?: React.ReactNode;\n action?: React.ReactNode;\n inlineAction?: boolean;\n}\n\nconst HMSToast: React.FC<HMSToastProps> = ({\n title,\n description,\n isClosable = true,\n icon,\n action,\n inlineAction = false,\n ...props\n}) => {\n return (\n <>\n <ToastRoot {...props}>\n <ToastTitle>\n <Flex align=\"center\" css={{ gap: '$4', flex: '1 1 0', minWidth: 0 }}>\n {icon ? <Box css={{ w: '$10', h: '$10', alignSelf: 'start', mt: '$2' }}>{icon}</Box> : null}\n <Text variant=\"sub1\" css={{ c: 'inherit', wordBreak: 'break-word' }}>\n {title}\n </Text>\n </Flex>\n {isClosable ? <DefaultClose /> : null}\n {!isClosable && inlineAction && action ? (\n <ToastAction altText={`${title}Action`}>{action}</ToastAction>\n ) : null}\n </ToastTitle>\n {description ? (\n <ToastDescription>\n <Text variant=\"body1\" css={{ fontWeight: '$regular', c: '$on_surface_medium' }}>\n {description}\n </Text>\n </ToastDescription>\n ) : null}\n {!inlineAction && action ? (\n <ToastAction altText={`${title}Action`} css={{ mt: '$10' }}>\n {action}\n </ToastAction>\n ) : null}\n </ToastRoot>\n </>\n );\n};\nexport const Toast = {\n Provider: ToastPrimitives.Provider,\n Root: ToastRoot,\n Title: ToastTitle,\n Description: ToastDescription,\n Close: DefaultClose,\n Action: ToastAction,\n Viewport: ToastViewport,\n HMSToast: HMSToast,\n};\n", "import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot } from './Accordion';\n\nexport const Accordion = {\n Root: AccordionRoot,\n Item: AccordionItem,\n Content: AccordionContent,\n Header: AccordionHeader,\n};\n", "import React, { PropsWithChildren } from 'react';\nimport * as BaseAccordion from '@radix-ui/react-accordion';\nimport { CSS } from '@stitches/react';\nimport { ChevronUpIcon } from '@100mslive/react-icons';\nimport { Box } from '../Layout';\nimport { styled } from '../Theme';\nimport { slideDown, slideUp } from '../utils';\n\nconst StyledAccordion = styled(BaseAccordion.Root, {});\n\nconst StyledItem = styled(BaseAccordion.Item, {\n marginTop: '$px',\n display: 'block',\n '&:first-child': {\n marginTop: 0,\n borderTopLeftRadius: '$0',\n borderTopRightRadius: '$0',\n },\n '&:last-child': {\n borderBottomLeftRadius: '$4',\n borderBottomRightRadius: '$4',\n },\n});\n\nconst StyledHeader = styled(BaseAccordion.Header, {\n all: 'unset',\n display: 'flex',\n fontFamily: '$sans',\n});\n\nconst StyledTrigger = styled(BaseAccordion.Trigger, {\n all: 'unset',\n fontFamily: '$sans',\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n fontSize: '$md',\n lineHeight: '$md',\n color: '$on_surface_high',\n});\n\nconst StyledContent = styled(BaseAccordion.Content, {\n display: 'contents',\n fontSize: '$md',\n fontFamily: '$sans',\n color: '$on_surface_medium',\n '&[data-state=\"open\"]': {\n animation: `${slideDown('--radix-accordion-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,\n },\n '&[data-state=\"closed\"]': {\n animation: `${slideUp('--radix-accordion-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,\n },\n});\n\nconst StyledChevron = styled(ChevronUpIcon, {\n color: '$on_primary_high',\n transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',\n '[data-state=closed] &': { transform: 'rotate(180deg)' },\n});\n\n// Exports\nexport const AccordionRoot = StyledAccordion;\nexport const AccordionItem = StyledItem;\n\nexport const AccordionHeader: React.FC<\n PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>\n> = React.forwardRef<\n HTMLButtonElement,\n PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>\n>(({ children, iconStyles, css, ...props }, forwardedRef) => (\n <StyledHeader css={css}>\n <StyledTrigger {...props} ref={forwardedRef}>\n {children}\n <StyledChevron aria-hidden css={iconStyles} />\n </StyledTrigger>\n </StyledHeader>\n));\n\nexport const AccordionContent: React.FC<\n PropsWithChildren<BaseAccordion.AccordionContentProps & { contentStyles?: CSS }>\n> = React.forwardRef<HTMLDivElement, PropsWithChildren<BaseAccordion.AccordionContentProps & { contentStyles?: CSS }>>(\n ({ children, contentStyles, ...props }, forwardedRef) => (\n <StyledContent {...props} ref={forwardedRef}>\n <Box css={contentStyles}>{children}</Box>\n </StyledContent>\n ),\n);\n", "import { styled } from '../Theme';\n\nconst StyledFieldset = styled('fieldset', {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n border: 'none',\n backgroundColor: '$transparent',\n});\n\nexport const Fieldset = StyledFieldset;\n", "export { Footer } from './Footer';\n", "import { Flex } from '../Layout';\nimport { styled } from '../Theme';\n\nconst Root = styled(Flex, {\n justifyContent: 'space-between',\n alignItems: 'center',\n py: '$4',\n position: 'relative',\n height: '100%',\n '@md': { flexWrap: 'wrap', gap: '$4' },\n});\n\nconst Left = styled(Flex, {\n alignItems: 'center',\n position: 'absolute',\n left: '$10',\n gap: '$8',\n '@md': {\n position: 'unset',\n justifyContent: 'center',\n w: '100%',\n },\n});\n\nconst Center = styled(Flex, {\n w: '100%',\n justifyContent: 'center',\n alignItems: 'center',\n gap: '$8',\n});\n\nconst Right = styled(Flex, {\n alignItems: 'center',\n position: 'absolute',\n right: '$10',\n gap: '$8',\n '@md': {\n display: 'none',\n },\n});\n\nexport const Footer = {\n Root,\n Left,\n Center,\n Right,\n};\n", "export { Select } from './ReactSelect';\n", "import * as SelectPrimitive from '@radix-ui/react-select';\nimport { styled } from '../Theme';\n\nconst StyledRoot = styled(SelectPrimitive.Root, {});\n\nconst StyledTrigger = styled(SelectPrimitive.SelectTrigger, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '$2',\n padding: '$8',\n lineHeight: '$px',\n gap: '$8',\n backgroundColor: '$secondary_default',\n color: '$on_primary_high',\n fontSize: '$8',\n cursor: 'pointer',\n r: '$1',\n});\n\nconst StyledContent = styled(SelectPrimitive.Content, {\n overflow: 'hidden',\n backgroundColor: '$surface_bright',\n r: '$1',\n h: '$80',\n});\n\nconst StyledViewport = styled(SelectPrimitive.Viewport, {\n padding: '$3',\n});\n\nconst StyledItem = styled(SelectPrimitive.Item, {\n all: 'unset',\n fontSize: '$7',\n r: '$1',\n display: 'flex',\n p: '$4 $8',\n w: '$52',\n position: 'relative',\n userSelect: 'none',\n cursor: 'pointer',\n});\n\nconst StyledLabel = styled(SelectPrimitive.Label, {\n p: '$4 $8',\n lineHeight: '$10',\n color: '$on_primary_high',\n});\n\nconst StyledSeparator = styled(SelectPrimitive.Separator, {\n height: '$px',\n backgroundColor: '$on_primary_high',\n margin: '$4',\n opacity: 0.4,\n});\n\nconst StyledItemIndicator = styled(SelectPrimitive.ItemIndicator, {\n position: 'absolute',\n right: '$8',\n width: '$8',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: '$on_primary_high',\n});\n\nconst scrollButtonStyles = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n p: '$4',\n backgroundColor: '$surface_bright',\n color: '$on_primary_high',\n cursor: 'default',\n};\n\nconst StyledScrollUpButton = styled(SelectPrimitive.ScrollUpButton, scrollButtonStyles);\n\nconst StyledScrollDownButton = styled(SelectPrimitive.ScrollDownButton, scrollButtonStyles);\n\nexport const Select = {\n Root: StyledRoot,\n Trigger: StyledTrigger,\n Content: StyledContent,\n Viewport: StyledViewport,\n Item: StyledItem,\n Label: StyledLabel,\n Separator: StyledSeparator,\n ItemIndicator: StyledItemIndicator,\n ScrollUpButton: StyledScrollUpButton,\n ScrollDownButton: StyledScrollDownButton,\n Value: SelectPrimitive.Value,\n Icon: SelectPrimitive.Icon,\n ItemText: SelectPrimitive.ItemText,\n Group: SelectPrimitive.Group,\n};\n", "import * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { styled } from '../Theme';\n\nconst StyledTabsRoot = styled(TabsPrimitive.Root, {\n display: 'flex',\n});\n\nconst StyledList = styled(TabsPrimitive.List, {\n flexShrink: 0,\n display: 'flex',\n});\n\nconst StyledTrigger = styled(TabsPrimitive.Trigger, {\n all: 'unset',\n fontFamily: '$sans',\n p: '$8',\n display: 'flex',\n alignItems: 'center',\n fontSize: '$sm',\n lineHeight: '$sm',\n color: '$on_surface_high',\n userSelect: 'none',\n cursor: 'pointer',\n '&[data-state=\"active\"]': {\n bg: '$surface_brighter',\n r: '$1',\n },\n});\n\nconst StyledContent = styled(TabsPrimitive.Content, {\n flex: '1 1 0',\n padding: '$10',\n outline: 'none',\n});\n\nexport const Tabs = {\n Root: StyledTabsRoot,\n List: StyledList,\n Content: StyledContent,\n Trigger: StyledTrigger,\n};\n", "import React, { ComponentProps } from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nexport const QRCode = (props: ComponentProps<typeof QRCodeSVG>) => {\n return <QRCodeSVG style={{ width: '100%', height: '100%' }} {...props} />;\n};\n", "export { Link } from './Link';\nexport type { LinkProps } from './Link';\n", "import React from 'react';\nimport * as icons from '@100mslive/react-icons';\nimport { Flex } from '../Layout';\nimport { Text } from '../Text';\nimport { styled } from '../Theme';\n\nconst LinkComponent = styled('a', {\n textDecoration: 'none',\n display: 'flex',\n alignItems: 'center',\n gap: '$5',\n variants: {\n color: {\n highEmp: {\n color: '$on_surface_high',\n '&:hover': {\n color: '$on_surface_medium',\n },\n },\n primary: {\n color: '$primary_default',\n '&:hover': {\n color: '$primary_bright',\n },\n },\n },\n },\n});\n\nexport interface LinkProps extends React.ComponentProps<typeof LinkComponent> {\n as?: React.ElementType;\n iconSide?: 'left' | 'right' | 'none';\n icon?: keyof typeof icons;\n color?: 'highEmp' | 'primary';\n}\n\nexport const Link = ({ iconSide = 'left', icon, color = 'primary', children, ...rest }: LinkProps) => {\n const Icon = icon ? icons[icon] : React.Fragment;\n const renderedIcon = icon ? (\n <Flex as=\"span\">\n <Icon height={13.33} width={13.33} />{' '}\n </Flex>\n ) : null;\n\n return (\n <LinkComponent {...rest} color={color}>\n {iconSide === 'left' && renderedIcon}\n <Text as=\"span\" variant=\"body2\" css={{ color: 'inherit' }}>\n {children}\n </Text>\n {iconSide === 'right' && renderedIcon}\n </LinkComponent>\n );\n};\n", "import { Content, Root, Trigger } from '@radix-ui/react-collapsible';\nimport { styled } from '../Theme';\nimport { slideDown, slideUp } from '../utils';\n\nconst CollapsibleRoot = styled(Root, {});\n\nconst CollapsibleTrigger = styled(Trigger, {\n cursor: 'pointer',\n appearance: 'none !important',\n '&:focus': {\n outline: 'none',\n },\n '&:focus-visible': {\n boxShadow: '0 0 0 3px $colors$primary_default',\n },\n});\n\nconst CollapsibleContent = styled(Content, {\n w: '$80',\n r: '$1',\n overflowY: 'auto',\n '&[data-state=\"open\"]': {\n animation: `${slideDown('--radix-collapsible-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,\n },\n '&[data-state=\"closed\"]': {\n animation: `${slideUp('--radix-collapsible-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,\n },\n});\n\nexport const Collapsible = {\n Root: CollapsibleRoot,\n Trigger: CollapsibleTrigger,\n Content: CollapsibleContent,\n};\n", "import { HMSPrebuilt } from './App.jsx';\nexport { HMSPrebuilt };\n", "import React, { Suspense, useEffect, useRef } from 'react';\nimport { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams } from 'react-router-dom';\nimport {\n HMSReactiveStore,\n HMSRoomProvider,\n selectIsConnectedToRoom,\n useHMSActions,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { AppData } from './components/AppData/AppData';\nimport { BeamSpeakerLabelsLogging } from './components/AudioLevel/BeamSpeakerLabelsLogging';\nimport AuthToken from './components/AuthToken';\nimport { ErrorBoundary } from './components/ErrorBoundary';\nimport FullPageProgress from './components/FullPageProgress';\nimport { Init } from './components/init/Init';\nimport { KeyboardHandler } from './components/Input/KeyboardInputManager';\nimport { Notifications } from './components/Notifications';\nimport PostLeave from './components/PostLeave';\nimport PreviewContainer from './components/Preview/PreviewContainer';\nimport { ToastContainer } from './components/Toast/ToastContainer';\nimport { RoomLayoutContext, RoomLayoutProvider } from './provider/roomLayoutProvider/index.tsx';\nimport { Box } from '../Layout';\nimport { globalStyles, HMSThemeProvider } from '../Theme';\nimport { HMSPrebuiltContext, useHMSPrebuiltContext } from './AppContext';\nimport { FlyingEmoji } from './plugins/FlyingEmoji';\nimport { RemoteStopScreenshare } from './plugins/RemoteStopScreenshare';\nimport { getRoutePrefix } from './common/utils';\nimport { FeatureFlags } from './services/FeatureFlags';\n\nconst Conference = React.lazy(() => import('./components/conference'));\n\n// TODO: remove now that there are options to change to portrait\nconst getAspectRatio = ({ width, height }) => {\n const host = process.env.REACT_APP_HOST_NAME;\n const portraitDomains = (process.env.REACT_APP_PORTRAIT_MODE_DOMAINS || '').split(',');\n if (portraitDomains.includes(host) && width > height) {\n return { width: height, height: width };\n }\n return { width, height };\n};\n\nexport const HMSPrebuilt = React.forwardRef(\n (\n {\n roomCode = '',\n logo,\n typography,\n themes,\n options: {\n userName = '',\n userId = '',\n endpoints: {\n init: initEndpoint = '',\n tokenByRoomCode: tokenByRoomCodeEndpoint = '',\n tokenByRoomIdRole: tokenByRoomIdRoleEndpoint = '',\n roomLayout: roomLayoutEndpoint = '',\n } = {},\n } = {},\n screens,\n onLeave,\n },\n ref,\n ) => {\n const aspectRatio = '1-1';\n const metadata = '';\n const { 0: width, 1: height } = aspectRatio.split('-').map(el => parseInt(el));\n const reactiveStore = useRef();\n\n const [hydrated, setHydrated] = React.useState(false);\n useEffect(() => {\n setHydrated(true);\n const hms = new HMSReactiveStore();\n const hmsStore = hms.getStore();\n const hmsActions = hms.getActions();\n const hmsNotifications = hms.getNotifications();\n const hmsStats = hms.getStats();\n\n reactiveStore.current = {\n hmsActions,\n hmsStats,\n hmsStore,\n hmsNotifications,\n };\n }, []);\n\n useEffect(() => {\n if (!ref || !reactiveStore.current) {\n return;\n }\n\n ref.current = { ...reactiveStore.current };\n }, [ref]);\n\n // leave room when component unmounts\n useEffect(\n () => () => {\n return reactiveStore.current.hmsActions.leave();\n },\n [],\n );\n\n const endpoints = {\n tokenByRoomCode: tokenByRoomCodeEndpoint,\n init: initEndpoint,\n tokenByRoomIdRole: tokenByRoomIdRoleEndpoint,\n roomLayout: roomLayoutEndpoint,\n };\n\n const overrideLayout = {\n logo,\n themes,\n typography,\n screens,\n };\n\n if (!hydrated) {\n return null;\n }\n\n globalStyles();\n\n return (\n <ErrorBoundary>\n <HMSPrebuiltContext.Provider\n value={{\n roomCode,\n showPreview: true,\n showLeave: true,\n onLeave,\n userName,\n userId,\n endpoints,\n }}\n >\n <HMSRoomProvider\n isHMSStatsOn={FeatureFlags.enableStatsForNerds}\n actions={reactiveStore.current.hmsActions}\n store={reactiveStore.current.hmsStore}\n notifications={reactiveStore.current.hmsNotifications}\n stats={reactiveStore.current.hmsStats}\n >\n <RoomLayoutProvider roomLayoutEndpoint={roomLayoutEndpoint} overrideLayout={overrideLayout}>\n <RoomLayoutContext.Consumer>\n {layout => {\n const theme = layout.themes?.[0] || {};\n const { typography } = layout;\n let fontFamily = ['sans-serif'];\n if (typography?.font_family) {\n fontFamily = [`${typography?.font_family}`, ...fontFamily];\n }\n\n return (\n <HMSThemeProvider\n themeType={theme.name}\n aspectRatio={getAspectRatio({ width, height })}\n theme={{\n colors: theme.palette,\n fonts: {\n sans: fontFamily,\n },\n }}\n >\n <AppData appDetails={metadata} tokenEndpoint={tokenByRoomIdRoleEndpoint} />\n <Init />\n <Box\n css={{\n bg: '$background_dim',\n size: '100%',\n lineHeight: '1.5',\n '-webkit-text-size-adjust': '100%',\n }}\n >\n <AppRoutes authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint} />\n </Box>\n </HMSThemeProvider>\n );\n }}\n </RoomLayoutContext.Consumer>\n </RoomLayoutProvider>\n </HMSRoomProvider>\n </HMSPrebuiltContext.Provider>\n </ErrorBoundary>\n );\n },\n);\n\nHMSPrebuilt.displayName = 'HMSPrebuilt';\n\nconst Redirector = ({ showPreview }) => {\n const { roomId, role } = useParams();\n\n if (!roomId && !role) {\n return <Navigate to=\"/\" />;\n }\n if (!roomId) {\n return <Navigate to=\"/\" />;\n }\n if (['streaming', 'preview', 'meeting', 'leave'].includes(roomId) && !role) {\n return <Navigate to=\"/\" />;\n }\n\n return <Navigate to={`${getRoutePrefix()}/${showPreview ? 'preview' : 'meeting'}/${roomId}/${role || ''}`} />;\n};\n\nconst RouteList = () => {\n const { showPreview, showLeave } = useHMSPrebuiltContext();\n\n return (\n <Routes>\n {showPreview && (\n <Route path=\"preview\">\n <Route\n path=\":roomId/:role\"\n element={\n <Suspense fallback={<FullPageProgress loadingText=\"Loading preview...\" />}>\n <PreviewContainer />\n </Suspense>\n }\n />\n <Route\n path=\":roomId\"\n element={\n <Suspense fallback={<FullPageProgress loadingText=\"Loading preview...\" />}>\n <PreviewContainer />\n </Suspense>\n }\n />\n </Route>\n )}\n <Route path=\"meeting\">\n <Route\n path=\":roomId/:role\"\n element={\n <Suspense fallback={<FullPageProgress loadingText=\"Joining...\" />}>\n <Conference />\n </Suspense>\n }\n />\n <Route\n path=\":roomId\"\n element={\n <Suspense fallback={<FullPageProgress loadingText=\"Joining...\" />}>\n <Conference />\n </Suspense>\n }\n />\n </Route>\n {showLeave && (\n <Route path=\"leave\">\n <Route path=\":roomId/:role\" element={<PostLeave />} />\n <Route path=\":roomId\" element={<PostLeave />} />\n </Route>\n )}\n\n <Route path=\"/:roomId/:role\" element={<Redirector showPreview={showPreview} />} />\n <Route path=\"/:roomId/\" element={<Redirector showPreview={showPreview} />} />\n </Routes>\n );\n};\n\nconst BackSwipe = () => {\n const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);\n const hmsActions = useHMSActions();\n useEffect(() => {\n const onRouteLeave = async () => {\n if (isConnectedToRoom) {\n await hmsActions.leave();\n }\n };\n window.addEventListener('popstate', onRouteLeave);\n return () => {\n window.removeEventListener('popstate', onRouteLeave);\n };\n }, [hmsActions, isConnectedToRoom]);\n return null;\n};\n\nconst Router = ({ children }) => {\n const { roomId, role, roomCode } = useHMSPrebuiltContext();\n return [roomId, role, roomCode].every(value => !value) ? (\n <BrowserRouter>{children}</BrowserRouter>\n ) : (\n <MemoryRouter initialEntries={[`/${roomCode ? roomCode : `${roomId}/${role || ''}`}`]} initialIndex={0}>\n {children}\n </MemoryRouter>\n );\n};\n\nfunction AppRoutes({ authTokenByRoomCodeEndpoint }) {\n return (\n <Router>\n <ToastContainer />\n <Notifications />\n <BackSwipe />\n <FlyingEmoji />\n <RemoteStopScreenshare />\n <KeyboardHandler />\n <BeamSpeakerLabelsLogging />\n <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} />\n <Routes>\n <Route path=\"/*\" element={<RouteList />} />\n <Route path=\"/streaming/*\" element={<RouteList />} />\n </Routes>\n </Router>\n );\n}\n", "import React, { useEffect } from 'react';\nimport { useSearchParam } from 'react-use';\nimport {\n HMSRoomState,\n selectAvailableRoleNames,\n selectHLSState,\n selectIsConnectedToRoom,\n selectLocalPeerRoleName,\n selectRolesMap,\n selectRoomState,\n selectRTMPState,\n useHMSActions,\n useHMSStore,\n useRecordingStreaming,\n} from '@100mslive/react-sdk';\nimport { normalizeAppPolicyConfig } from '../init/initUtils';\nimport { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';\nimport { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneState, useSidepaneToggle } from './useSidepane';\nimport { useSetAppDataByKey } from './useUISettings';\nimport { getMetadata } from '../../common/utils';\nimport {\n APP_DATA,\n CHAT_SELECTOR,\n DEFAULT_HLS_ROLE_KEY,\n DEFAULT_HLS_VIEWER_ROLE,\n DEFAULT_WAITING_VIEWER_ROLE,\n QUERY_PARAM_VIEW_MODE,\n SIDE_PANE_OPTIONS,\n UI_MODE_ACTIVE_SPEAKER,\n UI_MODE_GRID,\n UI_SETTINGS,\n} from '../../common/constants';\n\nexport const getAppDetails = appDetails => {\n try {\n return !appDetails ? {} : JSON.parse(appDetails);\n } catch (error) {\n return {};\n }\n};\n\nconst initialAppData = {\n [APP_DATA.uiSettings]: {\n [UI_SETTINGS.isAudioOnly]: false,\n [UI_SETTINGS.isHeadless]: false,\n [UI_SETTINGS.maxTileCount]: 9,\n [UI_SETTINGS.showStatsOnTiles]: false,\n [UI_SETTINGS.enableAmbientMusic]: false,\n [UI_SETTINGS.uiViewMode]: UI_MODE_GRID,\n [UI_SETTINGS.mirrorLocalVideo]: true,\n [UI_SETTINGS.activeSpeakerSorting]: process.env.REACT_APP_ENV === 'qa',\n [UI_SETTINGS.hideLocalVideo]: false,\n },\n [APP_DATA.subscribedNotifications]: {\n PEER_JOINED: false,\n PEER_LEFT: false,\n NEW_MESSAGE: true,\n ERROR: true,\n METADATA_UPDATED: true,\n },\n [APP_DATA.chatOpen]: false,\n [APP_DATA.chatSelector]: {\n [CHAT_SELECTOR.ROLE]: '',\n [CHAT_SELECTOR.PEER_ID]: '',\n },\n [APP_DATA.chatDraft]: '',\n [APP_DATA.sidePane]: '',\n [APP_DATA.hlsStarted]: false,\n [APP_DATA.rtmpStarted]: false,\n [APP_DATA.recordingStarted]: false,\n [APP_DATA.hlsViewerRole]: DEFAULT_HLS_VIEWER_ROLE,\n [APP_DATA.waitingViewerRole]: DEFAULT_WAITING_VIEWER_ROLE,\n [APP_DATA.dropdownList]: [],\n [APP_DATA.authToken]: '',\n};\n\nexport const AppData = React.memo(({ appDetails, tokenEndpoint }) => {\n const hmsActions = useHMSActions();\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const sidePane = useSidepaneState();\n const resetSidePane = useSidepaneReset();\n const [preferences = {}] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);\n const roleNames = useHMSStore(selectAvailableRoleNames);\n const rolesMap = useHMSStore(selectRolesMap);\n const localPeerRole = useHMSStore(selectLocalPeerRoleName);\n const isDefaultModeActiveSpeaker = useSearchParam(QUERY_PARAM_VIEW_MODE) === UI_MODE_ACTIVE_SPEAKER;\n\n useEffect(() => {\n if (!isConnected && sidePane && sidePane !== SIDE_PANE_OPTIONS.PARTICIPANTS) {\n resetSidePane();\n }\n }, [isConnected, sidePane, resetSidePane]);\n\n useEffect(() => {\n hmsActions.initAppData(initialAppData);\n hmsActions.setFrameworkInfo({\n type: 'react-web',\n isPrebuilt: true,\n version: React.version,\n });\n }, [hmsActions]);\n\n useEffect(() => {\n const uiSettings = preferences || {};\n const updatedSettings = {\n ...uiSettings,\n [UI_SETTINGS.uiViewMode]: isDefaultModeActiveSpeaker\n ? UI_MODE_ACTIVE_SPEAKER\n : uiSettings.uiViewMode || UI_MODE_GRID,\n };\n hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);\n }, [preferences, isDefaultModeActiveSpeaker, hmsActions]);\n\n useEffect(() => {\n const appData = {\n [APP_DATA.tokenEndpoint]: tokenEndpoint,\n [APP_DATA.hlsViewerRole]: getMetadata(appDetails)[DEFAULT_HLS_ROLE_KEY] || DEFAULT_HLS_VIEWER_ROLE,\n [APP_DATA.appConfig]: getAppDetails(appDetails),\n };\n for (const key in appData) {\n hmsActions.setAppData([key], appData[key]);\n }\n }, [appDetails, tokenEndpoint, hmsActions]);\n\n useEffect(() => {\n if (!preferences.subscribedNotifications) {\n return;\n }\n hmsActions.setAppData(APP_DATA.subscribedNotifications, preferences.subscribedNotifications, true);\n }, [preferences.subscribedNotifications, hmsActions]);\n\n useEffect(() => {\n if (localPeerRole) {\n const config = normalizeAppPolicyConfig(roleNames, rolesMap);\n hmsActions.setAppData(APP_DATA.appLayout, config[localPeerRole]);\n }\n }, [roleNames, rolesMap, localPeerRole, hmsActions]);\n\n return <ResetStreamingStart />;\n});\n\n/**\n * reset hlsStarted, rtmpStarted values when streaming starts\n */\nconst ResetStreamingStart = () => {\n const { isHLSRunning, isRTMPRunning, isBrowserRecordingOn } = useRecordingStreaming();\n const hlsError = useHMSStore(selectHLSState).error;\n const rtmpError = useHMSStore(selectRTMPState).error;\n const roomState = useHMSStore(selectRoomState);\n const [hlsStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);\n const [recordingStarted, setRecordingStarted] = useSetAppDataByKey(APP_DATA.recordingStarted);\n const [rtmpStarted, setRTMPStarted] = useSetAppDataByKey(APP_DATA.rtmpStarted);\n const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);\n const isStreamingOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.STREAMING);\n\n useEffect(() => {\n if (isBrowserRecordingOn && recordingStarted) {\n setRecordingStarted(false);\n }\n }, [isBrowserRecordingOn, recordingStarted, setRecordingStarted]);\n /**\n * Reset on leave\n */\n useEffect(() => {\n if (roomState === HMSRoomState.Disconnected) {\n setHLSStarted(false);\n setRecordingStarted(false);\n setRTMPStarted(false);\n }\n }, [roomState, setHLSStarted, setRTMPStarted, setRecordingStarted]);\n useEffect(() => {\n if (isHLSRunning || hlsError) {\n if (hlsStarted) {\n setHLSStarted(false);\n if (isStreamingOpen) {\n toggleStreaming();\n }\n }\n }\n }, [isHLSRunning, hlsStarted, setHLSStarted, hlsError, isStreamingOpen, toggleStreaming]);\n useEffect(() => {\n if (isRTMPRunning || rtmpError || isBrowserRecordingOn) {\n if (rtmpStarted) {\n setRTMPStarted(false);\n if (isStreamingOpen) {\n toggleStreaming();\n }\n }\n }\n }, [isRTMPRunning, setRTMPStarted, rtmpStarted, rtmpError, isBrowserRecordingOn, isStreamingOpen, toggleStreaming]);\n return null;\n};\n", "import { identify } from 'zipyai';\n\nconst zipyKey = process.env.REACT_APP_ZIPY_KEY;\nexport const setUpZipy = ({ localPeer, roomId, sessionId }) => {\n if (!zipyKey) {\n return;\n }\n\n let domain;\n if (typeof window !== 'undefined') {\n domain = window.location.hostname;\n }\n\n identify(localPeer.id, {\n firstName: localPeer.name,\n customerName: domain,\n email: domain,\n role: localPeer.roleName,\n sessionId,\n roomId,\n });\n};\n\n// interface RoleConfig {\n// center?: HMSRoleName[];\n// sidepane?: HMSRoleName[];\n// selfRoleChangeTo?: HMSRoleName[];\n// remoteRoleChangeFor?: HMSRoleName[];\n// }\n\n// interface PolicyConfig {\n// [role: string]: RoleConfig;\n// }\n\n/**\n * check if a role is allowed to publish either of audio or video\n */\nfunction canPublishAV(role) {\n const params = role?.publishParams;\n if (params?.allowed) {\n return params.allowed.includes('video') || params.allowed.includes('audio');\n }\n return false;\n}\n\n/**\n * Figure out the layout for each role. There is some extra work being done\n * here currently to figure out the layout for roles other than local peer too\n * which can be avoided.\n */\nexport const normalizeAppPolicyConfig = (roleNames, rolesMap, appPolicyConfig = {}) => {\n const newConfig = Object.assign({}, appPolicyConfig);\n // eslint-disable-next-line complexity\n roleNames.forEach(roleName => {\n if (!newConfig[roleName]) {\n newConfig[roleName] = {};\n }\n const subscribedRoles = rolesMap[roleName].subscribeParams?.subscribeToRoles || [];\n\n const isNotSubscribingOrSubscribingToSelf =\n subscribedRoles.length === 0 || (subscribedRoles.length === 1 && subscribedRoles[0] === roleName);\n if (!newConfig[roleName].center) {\n const publishingRoleNames = roleNames.filter(\n roleName => canPublishAV(rolesMap[roleName]) && subscribedRoles.includes(roleName),\n );\n if (isNotSubscribingOrSubscribingToSelf) {\n newConfig[roleName].center = [roleName];\n } else {\n // all other publishing roles apart from local role in center by default\n newConfig[roleName].center = publishingRoleNames.filter(rName => rName !== roleName);\n }\n }\n // everyone from my role is in sidepane by default if they can publish\n if (!newConfig[roleName].sidepane) {\n if (isNotSubscribingOrSubscribingToSelf) {\n newConfig[roleName].sidepane = [];\n } else {\n newConfig[roleName].sidepane = canPublishAV(rolesMap[roleName]) ? [roleName] : [];\n }\n }\n if (!newConfig[roleName].selfRoleChangeTo) {\n newConfig[roleName].selfRoleChangeTo = roleNames;\n }\n if (!newConfig[roleName].remoteRoleChangeFor) {\n newConfig[roleName].remoteRoleChangeFor = roleNames;\n }\n });\n\n return newConfig;\n};\n", "import { useState } from 'react';\nimport { useLocalStorage } from 'react-use';\n\nexport const UserPreferencesKeys = {\n PREVIEW: 'preview',\n NOTIFICATIONS: 'notifications',\n UI_SETTINGS: 'uiSettings',\n RTMP_URLS: 'rtmpUrls',\n};\n\nexport const defaultPreviewPreference = {\n name: '',\n isAudioMuted: false,\n isVideoMuted: false,\n};\n\nexport const useUserPreferences = (key, defaultPreference) => {\n const [localStorageValue, setStorageValue] = useLocalStorage(key, defaultPreference);\n const [preference, setPreference] = useState(localStorageValue || defaultPreference);\n const changePreference = value => {\n setPreference(value);\n setStorageValue(value);\n };\n return [preference, changePreference];\n};\n", "import { useCallback } from 'react';\nimport { selectAppData, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';\nimport { APP_DATA } from '../../common/constants';\n\n/**\n * Gives a boolean value if the sidepaneType matches current sidepane value in store\n * @param {string} sidepaneType\n * @returns {boolean} - if the sidepaneType is passed returns boolean else the current value\n */\nexport const useIsSidepaneTypeOpen = sidepaneType => {\n if (!sidepaneType) {\n throw Error('Pass one of the side pane options');\n }\n return useHMSStore(selectAppData(APP_DATA.sidePane)) === sidepaneType;\n};\n\n/**\n * Gives the current value of sidepane in store\n * @returns {string} - if the sidepaneType is passed returns boolean else the current value\n */\nexport const useSidepaneState = () => {\n const sidePane = useHMSStore(selectAppData(APP_DATA.sidePane));\n return sidePane;\n};\n\n/**\n * Toggle the sidepane value between passed sidePaneType and '';\n * @param {string} sidepaneType\n */\nexport const useSidepaneToggle = sidepaneType => {\n const hmsActions = useHMSActions();\n const vanillaStore = useHMSVanillaStore();\n const toggleSidepane = useCallback(() => {\n const isOpen = vanillaStore.getState(selectAppData(APP_DATA.sidePane)) === sidepaneType;\n hmsActions.setAppData(APP_DATA.sidePane, !isOpen ? sidepaneType : '');\n }, [vanillaStore, hmsActions, sidepaneType]);\n return toggleSidepane;\n};\n\n/**\n * reset's the sidepane value\n */\nexport const useSidepaneReset = () => {\n const hmsActions = useHMSActions();\n const resetSidepane = useCallback(() => {\n hmsActions.setAppData(APP_DATA.sidePane, '');\n }, [hmsActions]);\n return resetSidepane;\n};\n", "import { useCallback } from 'react';\nimport {\n selectAppData,\n selectAppDataByPath,\n selectSessionStore,\n selectTrackByID,\n useHMSActions,\n useHMSStore,\n useHMSVanillaStore,\n} from '@100mslive/react-sdk';\nimport { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';\nimport { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../../common/constants';\n\n/**\n * fields saved related to UI settings in store's app data can be\n * accessed using this hook. key is optional if not passed\n * the whole UI settings object is returned. Usage -\n * 1. val = useUiSettings(\"isAudioOnly\");\n * console.log(val); // false\n * 2. val = useUISettings();\n * console.log(val); // {isAudioOnly: false}\n * @param {string | undefined} uiSettingKey\n */\nexport const useUISettings = uiSettingKey => {\n const uiSettings = useHMSStore(selectAppDataByPath(APP_DATA.uiSettings, uiSettingKey));\n return uiSettings;\n};\n\n/**\n * fields saved related to UI settings in store's app data can be\n * accessed using this hook. key is optional if not passed\n * the whole UI settings object is returned. Usage -\n * [val, setVal] = useUiSettings(\"isAudioOnly\");\n * console.log(val); // false\n * setVal(true);\n * @param {string} uiSettingKey\n */\nexport const useSetUiSettings = uiSettingKey => {\n const value = useUISettings(uiSettingKey);\n const setValue = useSetAppData({\n key1: APP_DATA.uiSettings,\n key2: uiSettingKey,\n });\n return [value, setValue];\n};\n\nexport const useIsHeadless = () => {\n const isHeadless = useUISettings(UI_SETTINGS.isHeadless);\n return isHeadless;\n};\n\nexport const useActiveSpeakerSorting = () => {\n const activeSpeakerSorting = useUISettings(UI_SETTINGS.activeSpeakerSorting);\n return activeSpeakerSorting;\n};\n\nexport const useHLSViewerRole = () => {\n return useHMSStore(selectAppData(APP_DATA.hlsViewerRole));\n};\n\nexport const useWaitingViewerRole = () => {\n return useHMSStore(selectAppData(APP_DATA.waitingViewerRole));\n};\nexport const useIsHLSStartedFromUI = () => {\n return useHMSStore(selectAppData(APP_DATA.hlsStarted));\n};\n\nexport const useIsRTMPStartedFromUI = () => {\n return useHMSStore(selectAppData(APP_DATA.rtmpStarted));\n};\n\nexport const useTokenEndpoint = () => {\n return useHMSStore(selectAppData(APP_DATA.tokenEndpoint));\n};\n\nexport const useAuthToken = () => {\n return useHMSStore(selectAppData(APP_DATA.authToken));\n};\n\nexport const useUrlToEmbed = () => {\n return useHMSStore(selectAppData(APP_DATA.embedConfig))?.url;\n};\n\nexport const usePDFAnnotator = () => {\n return useHMSStore(selectAppData(APP_DATA.pdfConfig))?.state;\n};\nexport const usePinnedTrack = () => {\n const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));\n const spotlightTrackId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));\n return useHMSStore(selectTrackByID(pinnedTrackId || spotlightTrackId));\n};\n\nexport const useSubscribedNotifications = notificationKey => {\n const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.subscribedNotifications, notificationKey));\n return notificationPreference;\n};\n\nexport const useSetSubscribedNotifications = notificationKey => {\n const value = useSubscribedNotifications(notificationKey);\n const setValue = useSetAppData({\n key1: APP_DATA.subscribedNotifications,\n key2: notificationKey,\n });\n return [value, setValue];\n};\n\nexport const useSubscribeChatSelector = chatSelectorKey => {\n const chatSelectorPreference = useHMSStore(selectAppDataByPath(APP_DATA.chatSelector, chatSelectorKey));\n return chatSelectorPreference;\n};\n\nexport const useSetSubscribedChatSelector = chatSelectorKey => {\n const value = useSubscribeChatSelector(chatSelectorKey);\n const setValue = useSetAppData({\n key1: APP_DATA.chatSelector,\n key2: chatSelectorKey,\n });\n return [value, setValue];\n};\n\nexport const useSetAppDataByKey = appDataKey => {\n const value = useHMSStore(selectAppData(appDataKey));\n const actions = useHMSActions();\n const setValue = useCallback(\n value => {\n actions.setAppData(appDataKey, value);\n },\n [actions, appDataKey],\n );\n return [value, setValue];\n};\n\nconst useSetAppData = ({ key1, key2 }) => {\n const actions = useHMSActions();\n const store = useHMSVanillaStore();\n const [, setPreferences] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);\n const setValue = useCallback(\n value => {\n if (!key1) {\n return;\n }\n actions.setAppData(\n key1,\n key2\n ? {\n [key2]: value,\n }\n : value,\n true,\n );\n const appData = store.getState(selectAppData());\n setPreferences({\n ...appData.uiSettings,\n subscribedNotifications: appData.subscribedNotifications,\n });\n },\n [actions, key1, key2, store, setPreferences],\n );\n return setValue;\n};\n", "// eslint-disable-next-line complexity\nexport function shadeColor(color, percent) {\n let R = parseInt(color.substring(1, 3), 16);\n let G = parseInt(color.substring(3, 5), 16);\n let B = parseInt(color.substring(5, 7), 16);\n\n R = Math.floor((R * (100 + percent)) / 100);\n G = Math.floor((G * (100 + percent)) / 100);\n B = Math.floor((B * (100 + percent)) / 100);\n\n R = R < 255 ? R : 255;\n G = G < 255 ? G : 255;\n B = B < 255 ? B : 255;\n\n const RR = R.toString(16).length === 1 ? `0${R.toString(16)}` : R.toString(16);\n const GG = G.toString(16).length === 1 ? `0${G.toString(16)}` : G.toString(16);\n const BB = B.toString(16).length === 1 ? `0${B.toString(16)}` : B.toString(16);\n\n return `#${RR}${GG}${BB}`;\n}\n\n/**\n * TODO: this is currently an O(N**2) function, don't use with peer lists, it's currently\n * being used to find intersection between list of role names where the complexity shouldn't matter much.\n */\nexport const arrayIntersection = (a, b) => {\n if (a === undefined || b === undefined) {\n return [];\n }\n // ensure \"a\" is the bigger array\n if (b.length > a.length) {\n let t = b;\n b = a;\n a = t;\n }\n return a.filter(function (e) {\n return b.indexOf(e) > -1;\n });\n};\n\nexport const getMetadata = metadataString => {\n try {\n return metadataString === '' ? {} : JSON.parse(metadataString);\n } catch (error) {\n return {};\n }\n};\n\nexport const metadataProps = function (peer) {\n return {\n isHandRaised: getMetadata(peer.metadata)?.isHandRaised,\n };\n};\n\nexport const isScreenshareSupported = () => {\n return typeof navigator.mediaDevices.getDisplayMedia !== 'undefined';\n};\n\nexport const getRoutePrefix = () => {\n return window.location.pathname.startsWith('/streaming') ? '/streaming' : '';\n};\n\nexport const isStreamingKit = () => {\n return window.location.pathname.startsWith('/streaming');\n};\n\nexport const isInternalRole = role => role && role.startsWith('__internal');\n\nexport const metadataPayloadParser = payload => {\n try {\n const data = window.atob(payload);\n const parsedData = JSON.parse(data);\n return parsedData;\n } catch (e) {\n return { payload };\n }\n};\n\n// For bottom action sheet, returns updated height based on drag\nexport const getUpdatedHeight = (e, MINIMUM_HEIGHT) => {\n const heightToPercentage = 100 - ((e?.touches?.[0] || e).pageY / window.innerHeight) * 100;\n // Snap to top if height > 80%, should be at least 40vh\n const sheetHeightInVH = Math.max(MINIMUM_HEIGHT, heightToPercentage > 80 ? 100 : heightToPercentage);\n return `${sheetHeightInVH}vh`;\n};\n", "import { useEffect } from 'react';\nimport { useHMSActions } from '@100mslive/react-sdk';\nimport { useIsHeadless } from '../AppData/useUISettings';\nimport { FeatureFlags } from '../../services/FeatureFlags';\n\nexport function BeamSpeakerLabelsLogging() {\n const hmsActions = useHMSActions();\n const isHeadless = useIsHeadless();\n\n useEffect(() => {\n if (FeatureFlags.enableBeamSpeakersLogging && isHeadless) {\n hmsActions.enableBeamSpeakerLabelsLogging();\n }\n }, [hmsActions, isHeadless]);\n return null;\n}\n", "import { useEffect } from 'react';\nimport { selectRoomID, useHMSStore } from '@100mslive/react-sdk';\n\nexport class FeatureFlags {\n static enableTranscription = process.env.REACT_APP_ENABLE_TRANSCRIPTION === 'true';\n static enableStatsForNerds = process.env.REACT_APP_ENABLE_STATS_FOR_NERDS === 'true';\n static enableWhiteboard =\n process.env.REACT_APP_ENABLE_WHITEBOARD &&\n process.env.REACT_APP_PUSHER_APP_KEY &&\n process.env.REACT_APP_PUSHER_AUTHENDPOINT;\n static enableBeamSpeakersLogging = process.env.REACT_APP_ENABLE_BEAM_SPEAKERS_LOGGING === 'true';\n\n static init(roomId) {\n if (!window.HMS) {\n window.HMS = {};\n }\n // some extra config to hls js to bring down latency\n window.HMS.OPTIMISE_HLS_LATENCY = false;\n // ask permissions in preview even if role doesn't have it\n window.HMS.ALWAYS_REQUEST_PERMISSIONS = false;\n window.HMS.SHOW_NS = process.env.REACT_APP_ENV !== 'prod';\n\n this.enableTranscription = process.env.REACT_APP_TRANSCRIPTION_ROOM_ID === roomId;\n }\n\n static showNS() {\n return window.HMS.SHOW_NS;\n }\n\n static optimiseHLSLatency() {\n return window.HMS.OPTIMISE_HLS_LATENCY;\n }\n\n static alwaysRequestPermissions() {\n return window.HMS.ALWAYS_REQUEST_PERMISSIONS;\n }\n}\n\nexport function FeatureFlagsInit() {\n const roomId = useHMSStore(selectRoomID);\n useEffect(() => {\n if (roomId) {\n FeatureFlags.init(roomId);\n }\n }, [roomId]);\n return null;\n}\n", "import React, { useEffect, useMemo, useState } from 'react';\nimport { matchPath, useLocation } from 'react-router-dom';\nimport { useSearchParam } from 'react-use';\nimport { v4 as uuid } from 'uuid';\nimport { useHMSActions } from '@100mslive/react-sdk';\nimport { styled } from '../../Theme';\nimport { useHMSPrebuiltContext } from '../AppContext';\nimport { ErrorDialog } from '../primitives/DialogContent';\nimport { useSetAppDataByKey, useTokenEndpoint } from './AppData/useUISettings';\nimport getToken from '../services/tokenService';\nimport { APP_DATA, QUERY_PARAM_AUTH_TOKEN } from '../common/constants';\n\n/**\n * query params exposed -\n * skip_preview=true => used by recording and streaming service, skips preview and directly joins\n * header and footer don't show up in this case\n * skip_preview_headful=true => used by automation testing to skip preview without impacting the UI\n * name=abc => gives the initial name for the peer joining\n * auth_token=123 => uses the passed in token to join instead of fetching from token endpoint\n * ui_mode=activespeaker => lands in active speaker mode after joining the room\n */\nconst AuthToken = React.memo(({ authTokenByRoomCodeEndpoint }) => {\n const hmsActions = useHMSActions();\n const tokenEndpoint = useTokenEndpoint();\n const { showPreview, roomCode } = useHMSPrebuiltContext();\n const location = useLocation();\n const matches = useMemo(\n () =>\n matchPath(`${showPreview ? 'preview' : 'meeting'}/:roomId/:role`, location.pathname) ||\n matchPath(`${showPreview ? 'preview' : 'meeting'}/:roomCode/`, location.pathname),\n [location, showPreview],\n );\n const { roomCode: urlRoomCode, roomId: urlRoomId, role: userRole } = matches?.params || {};\n const [error, setError] = useState({ title: '', body: '' });\n let authToken = useSearchParam(QUERY_PARAM_AUTH_TOKEN);\n const [, setAuthTokenInAppData] = useSetAppDataByKey(APP_DATA.authToken);\n\n useEffect(() => {\n if (authToken) {\n setAuthTokenInAppData(authToken);\n return;\n }\n if (!tokenEndpoint && !urlRoomId && !roomCode && !urlRoomCode) {\n return;\n }\n const code = !userRole && (roomCode || urlRoomCode);\n\n const getTokenFn = code\n ? () => hmsActions.getAuthTokenByRoomCode({ roomCode: code }, { endpoint: authTokenByRoomCodeEndpoint })\n : () => getToken(tokenEndpoint, uuid(), userRole, urlRoomId);\n\n getTokenFn()\n .then(token => {\n setAuthTokenInAppData(token);\n })\n .catch(error => {\n setError(convertError(error));\n });\n }, [\n hmsActions,\n tokenEndpoint,\n urlRoomId,\n urlRoomCode,\n userRole,\n authToken,\n authTokenByRoomCodeEndpoint,\n setAuthTokenInAppData,\n roomCode,\n ]);\n\n if (error.title) {\n return <ErrorDialog title={error.title}>{error.body}</ErrorDialog>;\n }\n return null;\n});\n\nconst convertError = error => {\n console.error('[error]', { error });\n if (error.action === 'GET_TOKEN' && error.code === 403) {\n return {\n title: 'Room code is disabled',\n body: ErrorWithSupportLink('Room code corresponding to this link is no more active.'),\n };\n } else if (error.action === 'GET_TOKEN' && error.code === 404) {\n return {\n title: 'Room code does not exist',\n body: ErrorWithSupportLink('We could not find a room code corresponding to this link.'),\n };\n } else if (error.action === 'GET_TOKEN' && error.code === 2003) {\n return {\n title: 'Endpoint is not reachable',\n body: ErrorWithSupportLink(`Endpoint is not reachable. ${error.description}.`),\n };\n } else if (error.response && error.response.status === 404) {\n return {\n title: 'Room does not exist',\n body: ErrorWithSupportLink('We could not find a room corresponding to this link.'),\n };\n } else if (error.response && error.response.status === 403) {\n return {\n title: 'Accessing room using this link format is disabled',\n body: ErrorWithSupportLink('You can re-enable this from the developer section in Dashboard.'),\n };\n } else {\n console.error('Token API Error', error);\n return {\n title: 'Error fetching token',\n body: ErrorWithSupportLink(\n 'An error occurred while fetching the app token. Please look into logs for more details.',\n ),\n };\n }\n};\n\nconst Link = styled('a', {\n color: '#2f80e1',\n});\n\nexport const ErrorWithSupportLink = errorMessage => (\n <div>\n {errorMessage} If you think this is a mistake on our side, please create{' '}\n <Link target=\"_blank\" href=\"https://github.com/100mslive/100ms-web/issues\" rel=\"noreferrer\">\n an issue\n </Link>{' '}\n or reach out over{' '}\n <Link target=\"_blank\" href=\"https://discord.com/invite/kGdmszyzq2\" rel=\"noreferrer\">\n Discord\n </Link>\n .\n </div>\n);\n\nexport default AuthToken;\n", "import React, { useContext } from 'react';\n\nexport const HMSPrebuiltContext = React.createContext({\n showPreview: true,\n showLeave: true,\n roomCode: '',\n userName: '',\n userId: '',\n endpoints: {},\n onLeave: undefined,\n});\n\nHMSPrebuiltContext.displayName = 'HMSPrebuiltContext';\n\nexport const useHMSPrebuiltContext = () => {\n const context = useContext(HMSPrebuiltContext);\n if (!context) {\n throw Error('Make sure HMSPrebuiltContext.Provider is present at the top level of your application');\n }\n return context;\n};\n", "import React, { useRef } from 'react';\nimport { CheckIcon, CloudUploadIcon, CrossIcon } from '@100mslive/react-icons';\nimport { Button } from '../../Button';\nimport { Checkbox } from '../../Checkbox';\nimport { HorizontalDivider } from '../../Divider';\nimport { IconButton } from '../../IconButton';\nimport { Input } from '../../Input';\nimport { Label } from '../../Label';\nimport { Box, Flex } from '../../Layout';\nimport { Dialog } from '../../Modal';\nimport { Select } from '../../Select';\nimport { Switch } from '../../Switch';\nimport { Text } from '../../Text';\n\nexport const DialogContent = ({ Icon, title, closeable = true, children, css, iconCSS = {}, ...props }) => {\n return (\n <Dialog.Portal>\n <Dialog.Overlay />\n <Dialog.Content css={{ width: 'min(600px, 100%)', ...css }} {...props}>\n <Dialog.Title>\n <Flex justify=\"between\">\n <Flex align=\"center\" css={{ mb: '$1' }}>\n {Icon ? (\n <Box css={{ mr: '$2', color: '$on_primary_high', ...iconCSS }}>\n <Icon />\n </Box>\n ) : null}\n <Text variant=\"h6\" inline>\n {title}\n </Text>\n </Flex>\n {closeable && <Dialog.DefaultClose data-testid=\"dialoge_cross_icon\" />}\n </Flex>\n </Dialog.Title>\n <HorizontalDivider css={{ mt: '0.8rem' }} />\n <Box>{children}</Box>\n </Dialog.Content>\n </Dialog.Portal>\n );\n};\n\nexport const ErrorDialog = ({ open = true, onOpenChange, title, children, ...props }) => {\n return (\n <Dialog.Root open={open} onOpenChange={onOpenChange}>\n <DialogContent\n Icon={CrossIcon}\n title={title}\n onInteractOutside={e => e.preventDefault()}\n onEscapeKeyDown={e => e.preventDefault()}\n onPointerDownOutside={e => e.preventDefault()}\n closeable={false}\n iconCSS={{ color: '$alert_error_default' }}\n {...props}\n >\n <Box css={{ mt: '$lg' }}>{children}</Box>\n </DialogContent>\n </Dialog.Root>\n );\n};\n\nexport const RequestDialog = ({ open = true, onOpenChange, title, body, actionText = 'Accept', onAction, Icon }) => (\n <Dialog.Root open={open} onOpenChange={onOpenChange}>\n <Dialog.Portal>\n <Dialog.Overlay />\n <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>\n <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md' }}>\n {Icon ? Icon : null}\n <Text variant=\"h6\">{title}</Text>\n </Dialog.Title>\n <Text\n variant=\"md\"\n css={{\n fontWeight: 400,\n mt: '$4',\n mb: '$10',\n c: '$on_surface_medium',\n }}\n >\n {body}\n </Text>\n <Flex justify=\"center\" align=\"center\" css={{ width: '100%', gap: '$md' }}>\n <Box css={{ width: '50%' }}>\n <Dialog.Close css={{ width: '100%' }}>\n <Button variant=\"standard\" outlined css={{ width: '100%' }}>\n Cancel\n </Button>\n </Dialog.Close>\n </Box>\n <Box css={{ width: '50%' }}>\n <Button variant=\"primary\" css={{ width: '100%' }} onClick={onAction}>\n {actionText}\n </Button>\n </Box>\n </Flex>\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n);\n\n/**\n * a row of items which breaks into column on small screen. For e.g. title on left and options to select\n * from on right for select component.\n */\nexport const DialogRow = ({ children, breakSm = false, css, justify = 'between' }) => {\n let finalCSS = {\n margin: '$10 0',\n w: '100%',\n };\n if (breakSm) {\n finalCSS['@sm'] = {\n flexDirection: 'column',\n alignItems: 'flex-start',\n };\n }\n if (css) {\n finalCSS = Object.assign(finalCSS, css);\n }\n return (\n <Flex align=\"center\" justify={justify} css={finalCSS}>\n {children}\n </Flex>\n );\n};\n\nexport const DialogCol = ({ children, breakSm = false, css, align = 'center', justify = 'between', ...props }) => {\n let finalCSS = {\n margin: '$10 0',\n w: '100%',\n };\n if (breakSm) {\n finalCSS['@sm'] = {\n alignItems: 'flex-start',\n };\n }\n if (css) {\n finalCSS = Object.assign(finalCSS, css);\n }\n return (\n <Flex direction=\"column\" align={align} justify={justify} css={finalCSS} {...props}>\n {children}\n </Flex>\n );\n};\n\n/**\n * key field and label field are optional, option is directly used if not passed\n */\nexport const DialogSelect = ({ title, options, keyField, labelField, selected, onChange, ...props }) => {\n return (\n <DialogRow breakSm>\n <Label>{title}</Label>\n <Select.Root data-testid={`dialog_select_${title}`} css={{ width: '70%', '@sm': { width: '100%' } }} {...props}>\n <Select.DefaultDownIcon />\n <Select.Select onChange={e => onChange(e.target.value)} value={selected} css={{ width: '100%' }}>\n {options.map(option => {\n const id = keyField ? option[keyField] : option;\n const label = labelField ? option[labelField] : option;\n return (\n <option value={id} key={id}>\n {label}\n </option>\n );\n })}\n </Select.Select>\n </Select.Root>\n </DialogRow>\n );\n};\n\nexport const DialogInput = ({ title, value, onChange, placeholder, disabled, type, ...props }) => {\n return (\n <DialogRow breakSm>\n <Label>{title}</Label>\n <Input\n css={{ width: '70%', '@sm': { width: '100%' } }}\n value={value}\n onChange={e => onChange(e.target.value)}\n placeholder={placeholder}\n disabled={disabled}\n type={type}\n {...props}\n />\n </DialogRow>\n );\n};\n\nexport const DialogInputFile = ({ value, onChange, placeholder, disabled, type, ...props }) => {\n const inputRef = useRef();\n return (\n <DialogCol\n breakSm\n onClick={() => inputRef.current?.click()}\n css={{\n justifyContent: 'center',\n position: 'relative',\n cursor: 'pointer',\n py: '$12',\n border: '1px dashed $border_bright',\n r: '$1',\n height: 'max(140px, 30%)',\n alignItems: 'center',\n m: '$6 0',\n }}\n gap=\"8\"\n >\n <IconButton\n variant=\"standard\"\n css={{\n border: 'none',\n background: 'none',\n '&:hover': {\n border: 'none',\n background: 'none',\n bg: '$transparent !important',\n },\n }}\n >\n <CloudUploadIcon\n style={{\n width: '3rem',\n height: '3rem',\n }}\n />\n </IconButton>\n <Flex direction=\"row\">\n <Input\n ref={inputRef}\n css={{ width: '70%', '@sm': { width: '100%' } }}\n value={value}\n onChange={e => onChange(e.target)}\n placeholder={placeholder}\n disabled={disabled}\n type={type}\n hidden={true}\n {...props}\n />\n <IconButton\n variant=\"standard\"\n css={{\n background: 'none',\n border: 'none',\n textDecoration: 'underline',\n '&:hover': {\n background: 'none !important',\n border: 'none !important',\n },\n }}\n >\n <Text variant=\"md\">{placeholder}</Text>\n </IconButton>\n </Flex>\n </DialogCol>\n );\n};\n\nexport const DialogSwitch = ({ title, value, onChange, disabled }) => {\n return (\n <DialogRow>\n <Text>{title}</Text>\n <Flex justify=\"end\" css={{ width: '70%' }}>\n <Switch checked={value} disabled={disabled} onCheckedChange={onChange} />\n </Flex>\n </DialogRow>\n );\n};\n\nexport const DialogCheckbox = ({ title, value, onChange, disabled, css, id }) => {\n return (\n <DialogRow css={css}>\n <Label htmlFor={id} css={{ cursor: 'pointer' }}>\n {title}\n </Label>\n <Checkbox.Root checked={value} onCheckedChange={value => onChange(value)} disabled={disabled} id={id}>\n <Checkbox.Indicator>\n <CheckIcon width={16} height={16} />\n </Checkbox.Indicator>\n </Checkbox.Root>\n </DialogRow>\n );\n};\n", "/**\n * @param {RequestInfo} url\n * @param {RequestInit} options\n * @returns {Promise<Response>}\n */\nconst fetchWithRetry = async (url, options) => {\n const MAX_RETRIES = 4;\n let error = Error('something went wrong');\n for (let i = 0; i < MAX_RETRIES; i++) {\n try {\n return await fetch(url, options);\n } catch (err) {\n error = err;\n }\n }\n console.error('Fetch failed after max retries', { url, options });\n throw error;\n};\n\nexport default async function getToken(tokenEndpoint, userId, role, roomId) {\n try {\n const response = await fetchWithRetry(`${tokenEndpoint}api/token`, {\n method: 'POST',\n body: JSON.stringify({\n role,\n room_id: roomId,\n user_id: userId,\n }),\n });\n\n if (!response.ok) {\n let error = new Error('Request failed!');\n error.response = response;\n throw error;\n }\n\n const data = await response.json();\n const { token } = data;\n // response will be sucess and token is null when url is valid but response\n // domain is not present in 100ms\n if (token === null) {\n throw Error(data.msg);\n }\n return token;\n } catch (err) {\n console.error(err);\n throw err;\n }\n}\n", "import React, { Component } from 'react';\nimport { logMessage } from 'zipyai';\nimport { CopyIcon } from '@100mslive/react-icons';\nimport { Button } from '../../Button';\nimport { Box, Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport { Tooltip } from '../../Tooltip';\nimport { ErrorWithSupportLink } from './AuthToken';\n\nexport class ErrorBoundary extends Component {\n constructor(props) {\n super(props);\n this.state = { error: null, errorInfo: null, isErrorCopied: false };\n }\n\n componentDidCatch(error, errorInfo) {\n console.error(`react error boundary - ${error.message}`, error, errorInfo);\n // Catch errors in any components below and re-render with error message\n this.setState(\n {\n error: error?.message,\n errorInfo: errorInfo,\n },\n () => {\n logMessage(`uiError - ${this.state.error} - ${JSON.stringify(this.state.errorInfo)}`);\n },\n );\n }\n\n render() {\n if (this.state.errorInfo) {\n return (\n <Flex\n align=\"center\"\n justify=\"center\"\n css={{\n size: '100%',\n height: '100vh',\n width: '100%',\n color: '$on_primary_high',\n backgroundColor: '$background_default',\n }}\n >\n <Box css={{ position: 'relative', overflow: 'hidden', r: '$3', height: '100%', width: '100%' }}>\n <Flex\n direction=\"column\"\n css={{\n position: 'absolute',\n size: '100%',\n top: '33.33%',\n left: 0,\n }}\n >\n <div style={{ margin: '1.5rem', width: '100%' }}>\n <Text>Something went wrong</Text>\n <Text>Message: ${this.state.error}</Text>\n <br />\n {ErrorWithSupportLink(`Please reload to see if it works.`)}\n </div>\n <Flex>\n <Tooltip title=\"Reload page\">\n <Button\n onClick={() => {\n window.location.reload();\n }}\n css={{ mx: '$8' }}\n data-testid=\"join_again_btn\"\n >\n Reload\n </Button>\n </Tooltip>\n <Tooltip title=\"Copy error details to clipboard\">\n <Button\n onClick={() => {\n const { error, errorInfo } = this.state;\n navigator.clipboard.writeText(\n JSON.stringify({\n error,\n errorInfo,\n }),\n );\n this.setState({ isErrorCopied: true });\n }}\n css={{ mx: '$8' }}\n data-testid=\"join_again_btn\"\n >\n <CopyIcon /> {this.state.isErrorCopied ? 'Copied' : 'Copy Details'}\n </Button>\n </Tooltip>\n </Flex>\n\n <details style={{ whiteSpace: 'pre-wrap', margin: '1.5rem' }}>\n <Text>{this.state.error && this.state.error.toString()}</Text>\n <br />\n <Text>{JSON.stringify(this.state.errorInfo)}</Text>\n </details>\n </Flex>\n </Box>\n </Flex>\n );\n }\n\n return this.props.children;\n }\n}\n", "import React from 'react';\nimport { Flex } from '../../Layout';\nimport { Loading } from '../../Loading';\nimport { Text } from '../../Text';\n\nconst FullPageProgress = ({ loaderColor = '$primary_default', loadingText = '' }) => (\n <Flex direction=\"column\" justify=\"center\" align=\"center\" css={{ size: '100%', color: loaderColor }}>\n <Loading color=\"currentColor\" size={100} />\n {loadingText ? <Text css={{ mt: '$10', color: '$on_surface_high' }}>{loadingText}</Text> : null}\n </Flex>\n);\n\nexport default FullPageProgress;\n", "import React, { useEffect } from 'react';\nimport {\n selectLocalPeerID,\n selectLocalPeerName,\n selectLocalPeerRoleName,\n selectSessionId,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { useTheme } from '../../../';\nimport { setUpZipy } from './initUtils';\nimport { FeatureFlagsInit } from '../../services/FeatureFlags';\n\nconst Init = () => {\n const localPeerID = useHMSStore(selectLocalPeerID);\n const localPeerRole = useHMSStore(selectLocalPeerRoleName);\n const localPeerName = useHMSStore(selectLocalPeerName);\n const sessionId = useHMSStore(selectSessionId);\n const { toggleTheme } = useTheme();\n\n useEffect(() => {\n window.toggleUiTheme = toggleTheme;\n }, [toggleTheme]);\n\n useEffect(() => {\n function resetHeight() {\n // reset the body height to that of the inner browser\n // The window.innerHeight property returns integer values. When the actual height is in decimal, window.innerHeight returns a larger value than the actual value. This can cause a scrollbar to appear on some screens.\n // Hence using window.visualViewport.height which returns a decimal value.\n document.body.style.height = `${window.visualViewport?.height || window.innerHeight}px`;\n }\n // reset the height whenever the window's resized\n window.addEventListener('resize', resetHeight);\n // called to initially set the height.\n resetHeight();\n return () => {\n window.removeEventListener('resize', resetHeight);\n };\n }, []);\n\n useEffect(() => {\n if (localPeerID && localPeerRole && localPeerName) {\n const peerData = {\n localPeer: {\n id: localPeerID,\n name: localPeerName,\n roleName: localPeerRole,\n },\n sessionId,\n };\n setUpZipy(peerData);\n }\n // eslint-disable-next-line\n }, [localPeerID, localPeerName, localPeerRole, sessionId]);\n\n return <FeatureFlagsInit />;\n};\n\nexport { Init };\n", "import { useEffect } from 'react';\nimport {\n selectAppData,\n selectIsLocalAudioEnabled,\n selectIsLocalVideoEnabled,\n useHMSActions,\n useHMSVanillaStore,\n} from '@100mslive/react-sdk';\nimport { APP_DATA, isMacOS } from '../../common/constants';\n\nlet isEvenListenersAttached = false;\nexport class KeyboardInputManager {\n #actions;\n #store;\n constructor(store, actions) {\n this.#actions = actions;\n this.#store = store;\n }\n #toggleAudio = async () => {\n const enabled = this.#store.getState(selectIsLocalAudioEnabled);\n await this.#actions.setLocalAudioEnabled(!enabled);\n };\n\n #toggleVideo = async () => {\n const enabled = this.#store.getState(selectIsLocalVideoEnabled);\n await this.#actions.setLocalVideoEnabled(!enabled);\n };\n\n #hideSidepane = () => {\n if (this.#store.getState(selectAppData(APP_DATA.sidePane))) {\n this.#actions.setAppData(APP_DATA.sidePane, '');\n }\n };\n\n #toggleStatsForNerds = () => {\n const uiSettings = this.#store.getState(selectAppData(APP_DATA.uiSettings));\n const statsEnabled = uiSettings.showStatsOnTiles;\n this.#actions.setAppData(APP_DATA.uiSettings, {\n ...uiSettings,\n showStatsOnTiles: !statsEnabled,\n });\n };\n\n #toggleHlsStats = () => {\n this.#actions.setAppData(APP_DATA.hlsStats, !this.#store.getState(selectAppData(APP_DATA.hlsStats)));\n };\n\n // eslint-disable-next-line complexity\n #keyDownHandler = async e => {\n const CONTROL_KEY = isMacOS ? e.metaKey : e.ctrlKey;\n const D_KEY = e.key === 'd' || e.key === 'D';\n const E_KEY = e.key === 'e' || e.key === 'E';\n const SNF_KEY = e.key === ']' || e.key === '}';\n\n const SHORTCUT_TOGGLE_AUDIO = CONTROL_KEY && D_KEY;\n const SHORTCUT_TOGGLE_VIDEO = CONTROL_KEY && E_KEY;\n const SHORTCUT_SIDEPANE_CLOSE = e.key === 'Escape';\n const SHORTCUT_STATS_FOR_NERDS = CONTROL_KEY && SNF_KEY;\n\n if (SHORTCUT_TOGGLE_AUDIO) {\n e.preventDefault();\n await this.#toggleAudio();\n } else if (SHORTCUT_TOGGLE_VIDEO) {\n e.preventDefault();\n await this.#toggleVideo();\n } else if (SHORTCUT_SIDEPANE_CLOSE) {\n this.#hideSidepane();\n } else if (SHORTCUT_STATS_FOR_NERDS) {\n this.#toggleHlsStats();\n this.#toggleStatsForNerds();\n }\n };\n\n #bind = () => {\n document.addEventListener('keydown', this.#keyDownHandler, false);\n };\n\n #unbind = () => {\n document.removeEventListener('keydown', this.#keyDownHandler, false);\n };\n\n bindAllShortcuts = () => {\n if (!isEvenListenersAttached) {\n this.#bind();\n isEvenListenersAttached = true;\n }\n };\n\n unbindAllShortcuts = () => {\n if (isEvenListenersAttached) {\n this.#unbind();\n isEvenListenersAttached = false;\n }\n };\n}\n\nexport const KeyboardHandler = () => {\n const store = useHMSVanillaStore();\n const actions = useHMSActions();\n\n useEffect(() => {\n const keyboardManager = new KeyboardInputManager(store, actions);\n keyboardManager.bindAllShortcuts();\n return keyboardManager.unbindAllShortcuts;\n }, [actions, store]);\n return null;\n};\n", "export { Notifications } from './Notifications';\n", "/* eslint-disable no-case-declarations */\nimport React, { useEffect } from 'react';\nimport { logMessage } from 'zipyai';\nimport { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';\nimport { Button } from '../../../';\nimport { ToastBatcher } from '../Toast/ToastBatcher';\nimport { ToastManager } from '../Toast/ToastManager';\nimport { AutoplayBlockedModal } from './AutoplayBlockedModal';\nimport { InitErrorModal } from './InitErrorModal';\nimport { MessageNotifications } from './MessageNotifications';\nimport { PeerNotifications } from './PeerNotifications';\nimport { PermissionErrorModal } from './PermissionErrorModal';\nimport { ReconnectNotifications } from './ReconnectNotifications';\nimport { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';\nimport { TrackNotifications } from './TrackNotifications';\nimport { TrackUnmuteModal } from './TrackUnmuteModal';\nimport { useHLSViewerRole, useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';\nimport { useNavigation } from '../hooks/useNavigation';\nimport { getMetadata } from '../../common/utils';\n\nexport function Notifications() {\n const notification = useHMSNotifications();\n const navigate = useNavigation();\n const HLS_VIEWER_ROLE = useHLSViewerRole();\n const subscribedNotifications = useSubscribedNotifications() || {};\n const isHeadless = useIsHeadless();\n\n useEffect(() => {\n if (!notification) {\n return;\n }\n switch (notification.type) {\n case HMSNotificationTypes.METADATA_UPDATED:\n // Don't toast message when metadata is updated and raiseHand is false.\n // Don't toast message in case of local peer.\n const metadata = getMetadata(notification.data?.metadata);\n if (!metadata?.isHandRaised || notification.data.isLocal || isHeadless) return;\n\n console.debug('Metadata updated', notification.data);\n if (!subscribedNotifications.METADATA_UPDATED) return;\n ToastBatcher.showToast({ notification });\n break;\n case HMSNotificationTypes.NAME_UPDATED:\n console.log(notification.data.id + ' changed their name to ' + notification.data.name);\n break;\n case HMSNotificationTypes.ERROR:\n if (notification.data?.isTerminal && notification.data?.action !== 'INIT') {\n if ([500, 6008].includes(notification.data?.code)) {\n ToastManager.addToast({\n title: `Error: ${notification.data?.message}`,\n });\n } else {\n logMessage('Disconnected');\n // show button action when the error is terminal\n const toastId = ToastManager.addToast({\n title:\n notification.data?.message ||\n 'We couldn\u2019t reconnect you. When you\u2019re back online, try joining the room.',\n inlineAction: true,\n action: (\n <Button\n onClick={() => {\n ToastManager.removeToast(toastId);\n window.location.reload();\n }}\n >\n Rejoin\n </Button>\n ),\n close: false,\n });\n }\n // goto leave for terminal if any action is not performed within 2secs\n // if network is still unavailable going to preview will throw an error\n setTimeout(() => {\n const previewLocation = window.location.pathname.replace('meeting', 'leave');\n ToastManager.clearAllToast();\n navigate(previewLocation);\n }, 2000);\n return;\n }\n // Autoplay error or user denied screen share (cancelled browser pop-up)\n if (notification.data?.code === 3008 || notification.data?.code === 3001 || notification.data?.code === 3011) {\n return;\n }\n if (notification.data?.action === 'INIT') {\n return;\n }\n if (!subscribedNotifications.ERROR) return;\n ToastManager.addToast({\n title: `Error: ${notification.data?.message} - ${notification.data?.description}`,\n });\n break;\n case HMSNotificationTypes.ROLE_UPDATED:\n if (notification.data.roleName === HLS_VIEWER_ROLE) {\n return;\n }\n if (notification.data?.isLocal) {\n ToastManager.addToast({\n title: `You are now a ${notification.data.roleName}`,\n });\n }\n break;\n case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:\n const track = notification.data?.track;\n if (!notification.data.enabled) {\n ToastManager.addToast({\n title: `Your ${track.source} ${track.type} was muted by\n ${notification.data.requestedBy?.name}.`,\n });\n }\n break;\n case HMSNotificationTypes.REMOVED_FROM_ROOM:\n case HMSNotificationTypes.ROOM_ENDED:\n ToastManager.addToast({\n title: `${notification.message}. \n ${notification.data.reason && `Reason: ${notification.data.reason}`}`,\n });\n setTimeout(() => {\n const leaveLocation = window.location.pathname.replace('meeting', 'leave');\n navigate(leaveLocation);\n ToastManager.clearAllToast();\n }, 2000);\n break;\n case HMSNotificationTypes.DEVICE_CHANGE_UPDATE:\n ToastManager.addToast({\n title: notification.message,\n });\n break;\n default:\n break;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED, HLS_VIEWER_ROLE]);\n\n return (\n <>\n {!isHeadless && <TrackUnmuteModal />}\n {!isHeadless && <TrackBulkUnmuteModal />}\n <TrackNotifications />\n <PeerNotifications />\n <ReconnectNotifications />\n <AutoplayBlockedModal />\n <PermissionErrorModal />\n <MessageNotifications />\n <InitErrorModal notification={notification} />\n </>\n );\n}\n", "import { ToastConfig } from './ToastConfig';\nimport { ToastManager } from './ToastManager';\n\nexport const ToastBatcher = {\n toastsType: new Map(),\n showToastInternal({ notification, duration, type }) {\n let notificationType = type;\n if (!type) {\n notificationType = notification.type;\n }\n const toastType = this.toastsType.has(notificationType);\n if (toastType) {\n let { notifications } = this.toastsType.get(notificationType);\n const { id } = this.toastsType.get(notificationType);\n notifications.push(notification);\n const toastObject = ToastConfig[notificationType].multiple(notifications);\n const toastId = ToastManager.replaceToast(id, {\n ...toastObject,\n duration: duration,\n });\n this.toastsType.set(notificationType, {\n id: toastId,\n notifications: notifications,\n duration: duration,\n });\n } else {\n const toastObject = ToastConfig[notificationType].single(notification);\n const toastId = ToastManager.addToast({\n ...toastObject,\n duration: duration,\n });\n let notifications = [];\n notifications.push(notification);\n this.toastsType.set(notificationType, {\n id: toastId,\n notifications: [...notifications],\n duration: duration,\n });\n }\n },\n showToast({ notification, duration = 3000, type }) {\n try {\n this.showToastInternal({ notification, duration, type });\n } catch (err) {\n console.debug('Notifications', err);\n }\n },\n syncUItoast(toastsDisplaying) {\n for (const [toastType, toastInfo] of this.toastsType.entries()) {\n if (!toastsDisplaying.find(toast => toast.id === toastInfo.id)) {\n this.toastsType.delete(toastType);\n }\n }\n },\n};\n\nToastManager.addListener(ToastBatcher.syncUItoast.bind(ToastBatcher));\n", "import React from 'react';\nimport { ChatIcon, ConnectivityIcon, HandIcon, PersonIcon, PoorConnectivityIcon } from '@100mslive/react-icons';\nimport { Button } from '../../../Button';\nimport { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';\nimport { SIDE_PANE_OPTIONS } from '../../common/constants';\n\nconst ChatAction = React.forwardRef((_, ref) => {\n const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);\n const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);\n\n if (isChatOpen) {\n return null;\n }\n\n return (\n <Button outlined as=\"div\" variant=\"standard\" css={{ w: 'max-content' }} onClick={toggleChat} ref={ref}>\n Open Chat\n </Button>\n );\n});\nexport const ToastConfig = {\n PEER_LIST: {\n single: function (notification) {\n if (notification.data.length === 1) {\n return {\n title: `${notification.data[0]?.name} joined`,\n icon: <PersonIcon />,\n };\n }\n return {\n title: `${notification.data[notification.data.length - 1]?.name} and ${\n notification.data.length - 1\n } others joined`,\n icon: <PersonIcon />,\n };\n },\n multiple: notifications => {\n return {\n title: `${notifications[0].data.name} and ${notifications.length - 1} others joined`,\n icon: <PersonIcon />,\n };\n },\n },\n PEER_JOINED: {\n single: function (notification) {\n return {\n title: `${notification.data?.name} joined`,\n icon: <PersonIcon />,\n };\n },\n multiple: function (notifications) {\n return {\n title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others joined`,\n icon: <PersonIcon />,\n };\n },\n },\n PEER_LEFT: {\n single: function (notification) {\n return {\n title: `${notification.data?.name} left`,\n icon: <PersonIcon />,\n };\n },\n multiple: function (notifications) {\n return {\n title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others left`,\n icon: <PersonIcon />,\n };\n },\n },\n METADATA_UPDATED: {\n single: notification => {\n return {\n title: `${notification.data?.name} raised hand`,\n icon: <HandIcon />,\n };\n },\n multiple: notifications => {\n return {\n title: `${notifications[notifications.length - 1].data?.name} and ${\n notifications.length - 1\n } others raised hand`,\n icon: <HandIcon />,\n };\n },\n },\n NEW_MESSAGE: {\n single: notification => {\n return {\n title: `New message from ${notification.data?.senderName}`,\n icon: <ChatIcon />,\n action: <ChatAction />,\n };\n },\n multiple: notifications => {\n return {\n title: `${notifications.length} new messages`,\n icon: <ChatIcon />,\n action: <ChatAction />,\n };\n },\n },\n RECONNECTED: {\n single: () => {\n return {\n title: `You are now connected`,\n icon: <ConnectivityIcon />,\n variant: 'success',\n duration: 3000,\n };\n },\n },\n RECONNECTING: {\n single: message => {\n return {\n title: `You are offline for now. while we try to reconnect, please check\n your internet connection. ${message}.\n `,\n icon: <PoorConnectivityIcon />,\n variant: 'warning',\n duration: 30000,\n };\n },\n },\n};\n", "import { v4 } from 'uuid';\n\nexport const ToastManager = {\n toasts: new Map(),\n listeners: new Map(),\n addToast(toast) {\n const id = toast.id ? toast.id : v4();\n this.toasts.set(id, { ...toast, id });\n this.onChange();\n return id;\n },\n\n clearAllToast() {\n this.toasts.clear();\n this.onChange();\n },\n\n removeToast(id) {\n this.toasts.delete(id);\n this.onChange();\n },\n replaceToast(id, toast) {\n if (this.isActive(id)) {\n this.toasts.set(id, { ...this.toasts.get(id), ...toast });\n this.onChange();\n return id;\n } else {\n return this.addToast(toast);\n }\n },\n addListener(cb) {\n this.listeners.set(cb, cb);\n },\n removeListener(cb) {\n this.listeners.delete(cb);\n },\n isActive(id) {\n return this.toasts.has(id);\n },\n onChange() {\n const toasts = Array.from(this.toasts.values());\n this.listeners.forEach(listener => listener(toasts));\n },\n};\n", "import React from 'react';\nimport { useAutoplayError } from '@100mslive/react-sdk';\nimport { Button, Dialog, Text } from '../../../';\nimport { DialogContent, DialogRow } from '../../primitives/DialogContent';\n\nexport function AutoplayBlockedModal() {\n const { error, resetError, unblockAudio } = useAutoplayError();\n return (\n <Dialog.Root\n open={!!error}\n onOpenChange={value => {\n if (!value) {\n unblockAudio();\n }\n resetError();\n }}\n >\n <DialogContent title=\"Permission Error\" closeable={false}>\n <DialogRow>\n <Text variant=\"md\">\n The browser wants us to get a confirmation for playing the Audio. Please allow audio to proceed.\n </Text>\n </DialogRow>\n <DialogRow justify=\"end\">\n <Button\n variant=\"primary\"\n onClick={() => {\n unblockAudio();\n resetError();\n }}\n >\n Allow Audio\n </Button>\n </DialogRow>\n </DialogContent>\n </Dialog.Root>\n );\n}\n", "import React, { useEffect, useState } from 'react';\nimport { Text } from '../../../';\nimport { ErrorDialog } from '../../primitives/DialogContent';\n\nexport const InitErrorModal = ({ notification }) => {\n const [showModal, setShowModal] = useState(false);\n const [info, setInfo] = useState({ title: 'Init Error', description: '' });\n\n useEffect(() => {\n const data = notification?.data;\n if (!data || data.action !== 'INIT') {\n return;\n }\n let description;\n let title;\n if (data.description.includes('role is invalid')) {\n description = 'This role does not exist for the given room. Try again with a valid role.';\n title = 'Invalid Role';\n } else if (data.description.includes('room is not active')) {\n title = 'Room is disabled';\n description =\n 'This room is disabled and cannot be joined. To enable the room, use the 100ms dashboard or the API.';\n } else {\n description = data.description;\n title = 'Init Error';\n }\n setInfo({ title, description });\n setShowModal(true);\n }, [notification]);\n\n return (\n <ErrorDialog open={showModal} onOpenChange={setShowModal} title={info.title}>\n <Text variant=\"sm\" css={{ wordBreak: 'break-word' }}>\n {info.description} <br />\n Current URL - {window.location.href}\n </Text>\n </ErrorDialog>\n );\n};\n", "import { useEffect } from 'react';\nimport { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';\nimport { ToastBatcher } from '../Toast/ToastBatcher';\nimport { useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';\nimport { useIsFeatureEnabled } from '../hooks/useFeatures';\nimport { FEATURE_LIST, SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';\n\nexport const MessageNotifications = () => {\n const notification = useHMSNotifications(HMSNotificationTypes.NEW_MESSAGE);\n const isChatEnabled = useIsFeatureEnabled(FEATURE_LIST.CHAT);\n const isNewMessageSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.NEW_MESSAGE);\n const isHeadless = useIsHeadless();\n useEffect(() => {\n if (!notification) {\n return;\n }\n console.debug(`[${notification.type}]`, notification);\n if (!isNewMessageSubscribed || notification.data?.ignored || !isChatEnabled) {\n return;\n }\n ToastBatcher.showToast({ notification });\n }, [notification, isNewMessageSubscribed, isHeadless, isChatEnabled]);\n\n return null;\n};\n", "import { useEffect } from 'react';\nimport { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';\nimport { ToastBatcher } from '../Toast/ToastBatcher';\nimport { useSubscribedNotifications } from '../AppData/useUISettings';\nimport { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';\n\nconst notificationTypes = [\n HMSNotificationTypes.PEER_LIST,\n HMSNotificationTypes.PEER_JOINED,\n HMSNotificationTypes.PEER_LEFT,\n];\n\nexport const PeerNotifications = () => {\n const notification = useHMSNotifications(notificationTypes);\n const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);\n const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);\n useEffect(() => {\n if (!notification) {\n return;\n }\n console.debug(`[${notification.type}]`, notification);\n switch (notification.type) {\n case HMSNotificationTypes.PEER_LIST:\n if (!isPeerJoinSubscribed || notification.data?.length === 0) {\n return;\n }\n break;\n case HMSNotificationTypes.PEER_JOINED:\n if (!isPeerJoinSubscribed) {\n return;\n }\n break;\n case HMSNotificationTypes.PEER_LEFT:\n if (!isPeerLeftSubscribed) {\n return;\n }\n break;\n default:\n return;\n }\n ToastBatcher.showToast({ notification });\n }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);\n\n return null;\n};\n", "import React, { useEffect, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';\nimport { Button, config as cssConfig, Dialog, Flex, Text } from '../../../';\nimport androidPermissions from '../../../assets/android-perm-0.png';\nimport androidPermissionAlert from '../../../assets/android-perm-1.png';\nimport iosPermissions from '../../../assets/ios-perm-0.png';\nimport { isAndroid, isIOS } from '../../common/constants';\n\nexport function PermissionErrorModal() {\n const notification = useHMSNotifications(HMSNotificationTypes.ERROR);\n const [deviceType, setDeviceType] = useState('');\n const [isSystemError, setIsSystemError] = useState(false);\n const [showAndroidPrompt, setShowAndroidPrompt] = useState(true);\n const isMobile = useMedia(cssConfig.media.md);\n\n useEffect(() => {\n if (showAndroidPrompt && isAndroid && isMobile) {\n setDeviceType('camera and microphone');\n }\n }, []);\n\n useEffect(() => {\n if (\n !notification ||\n (notification.data?.code !== 3001 && notification.data?.code !== 3011) ||\n (notification.data?.code === 3001 && notification.data?.message.includes('screen'))\n ) {\n return;\n }\n console.error(`[${notification.type}]`, notification);\n const errorMessage = notification.data?.message;\n const hasAudio = errorMessage.includes('audio');\n const hasVideo = errorMessage.includes('video');\n const hasScreen = errorMessage.includes('screen');\n if (hasAudio && hasVideo) {\n setDeviceType('camera and microphone');\n } else if (hasAudio) {\n setDeviceType('microphone');\n } else if (hasVideo) {\n setDeviceType('camera');\n } else if (hasScreen) {\n setDeviceType('screen');\n }\n setIsSystemError(notification.data.code === 3011);\n }, [notification]);\n\n return deviceType ? (\n <Dialog.Root open={!!deviceType}>\n <Dialog.Portal>\n <Dialog.Overlay />\n <Dialog.Content css={{ w: 'min(380px, 90%)', p: '$8' }}>\n <Dialog.Title\n css={{\n borderBottom: '1px solid $border_default',\n }}\n >\n {isMobile && isIOS ? <img style={{ maxWidth: '100%', maxHeight: '100%' }} src={iosPermissions} /> : null}\n\n {/* Images for android */}\n {isMobile && isAndroid ? (\n showAndroidPrompt ? (\n <img src={androidPermissions} style={{ maxWidth: '100%', maxHeight: '100%' }} />\n ) : (\n <img src={androidPermissionAlert} style={{ maxWidth: '100%', maxHeight: '100%' }} />\n )\n ) : null}\n\n <Text variant=\"h6\">\n {showAndroidPrompt ? `Allow access to your ${deviceType}` : `We can't access your ${deviceType}`}\n </Text>\n </Dialog.Title>\n\n <Text variant=\"sm\" css={{ pt: '$4', pb: '$10', color: '$on_surface_medium' }}>\n {/* IOS prompt text */}\n {isMobile && isIOS\n ? 'Enable permissions by reloading this page and clicking \u201CAllow\u201D on the pop-up, or change settings from the address bar.'\n : null}\n\n {/* Initial prompt for android devices */}\n {isMobile && showAndroidPrompt && isAndroid\n ? 'In order for others to see and hear you, your browser will request camera and microphone access.'\n : null}\n\n {/* Successive prompts for android devices */}\n {isMobile && !showAndroidPrompt && isAndroid\n ? 'To allow other users to see and hear you, click the blocked camera icon in your browser\u2019s address bar.'\n : null}\n\n {/* Prompt for desktops */}\n {!isMobile ? `Access to ${deviceType} is required. ` : null}\n\n {isSystemError && !isMobile\n ? `Enable permissions for ${deviceType}${deviceType === 'screen' ? 'share' : ''} from sytem settings`\n : null}\n {!isSystemError && !isMobile\n ? `Enable permissions for ${deviceType}${\n deviceType === 'screen' ? 'share' : ''\n } from address bar or browser settings.`\n : null}\n </Text>\n\n {/* CTA section */}\n {isMobile && isIOS ? (\n <>\n <Button onClick={() => window.location.reload()} css={{ w: '100%', mb: '$6' }}>\n Reload\n </Button>\n <Button outlined variant=\"standard\" onClick={() => setDeviceType('')} css={{ w: '100%' }}>\n Continue anyway\n </Button>\n </>\n ) : null}\n\n {isMobile && isAndroid ? (\n showAndroidPrompt ? (\n <Button\n css={{ w: '100%' }}\n onClick={() => {\n setDeviceType('');\n setShowAndroidPrompt(false);\n }}\n >\n Continue\n </Button>\n ) : (\n <>\n <Button onClick={() => setDeviceType('')} css={{ w: '100%', mb: '$6' }}>\n I've allowed access\n </Button>\n <Button outlined variant=\"standard\" onClick={() => setDeviceType('')} css={{ w: '100%' }}>\n Continue anyway\n </Button>\n </>\n )\n ) : null}\n\n {!isMobile ? (\n <Flex justify=\"end\" css={{ w: '100%' }}>\n <Button outlined variant=\"standard\" onClick={() => setDeviceType('')}>\n Dismiss\n </Button>\n </Flex>\n ) : null}\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n ) : null;\n}\n", "import React, { useEffect, useState } from 'react';\nimport { logMessage } from 'zipyai';\nimport { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';\nimport { Dialog, Flex, Loading, Text } from '../../../';\nimport { ToastConfig } from '../Toast/ToastConfig';\nimport { ToastManager } from '../Toast/ToastManager';\n\nconst notificationTypes = [\n HMSNotificationTypes.RECONNECTED,\n HMSNotificationTypes.RECONNECTING,\n HMSNotificationTypes.ERROR,\n];\nlet notificationId = null;\n\nconst isQA = process.env.REACT_APP_ENV === 'qa';\nexport const ReconnectNotifications = () => {\n const notification = useHMSNotifications(notificationTypes);\n const [open, setOpen] = useState(false);\n useEffect(() => {\n if (notification?.type === HMSNotificationTypes.ERROR && notification?.data?.isTerminal) {\n logMessage('Error ', notification.data?.description);\n setOpen(false);\n } else if (notification?.type === HMSNotificationTypes.RECONNECTED) {\n logMessage('Reconnected');\n notificationId = ToastManager.replaceToast(notificationId, ToastConfig.RECONNECTED.single());\n setOpen(false);\n } else if (notification?.type === HMSNotificationTypes.RECONNECTING) {\n logMessage('Reconnecting');\n if (isQA) {\n ToastManager.removeToast(notificationId);\n setOpen(true);\n } else {\n notificationId = ToastManager.replaceToast(\n notificationId,\n ToastConfig.RECONNECTING.single(notification.data.message),\n );\n }\n }\n }, [notification]);\n if (!open || !isQA) return null;\n return (\n <Dialog.Root open={open} modal={true}>\n <Dialog.Portal container={document.getElementById('conferencing')}>\n <Dialog.Overlay />\n <Dialog.Content\n css={{\n width: 'fit-content',\n maxWidth: '80%',\n p: '$4 $8',\n position: 'relative',\n top: 'unset',\n bottom: '$9',\n transform: 'translate(-50%, -100%)',\n animation: 'none !important',\n }}\n >\n <Flex align=\"center\">\n <div style={{ display: 'inline', margin: '0.25rem' }}>\n <Loading size={16} />\n </div>\n <Text css={{ fontSize: '$space$8', color: '$on_surface_high' }}>\n You lost your network connection. Trying to reconnect.\n </Text>\n </Flex>\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n );\n};\n", "import React, { useEffect, useState } from 'react';\nimport { HMSNotificationTypes, useHMSActions, useHMSNotifications } from '@100mslive/react-sdk';\nimport { MicOnIcon } from '@100mslive/react-icons';\nimport { RequestDialog } from '../../primitives/DialogContent';\n\nexport const TrackBulkUnmuteModal = () => {\n const hmsActions = useHMSActions();\n const [muteNotification, setMuteNotification] = useState(null);\n const notification = useHMSNotifications([\n HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST,\n HMSNotificationTypes.ROOM_ENDED,\n HMSNotificationTypes.REMOVED_FROM_ROOM,\n ]);\n\n useEffect(() => {\n switch (notification?.type) {\n case HMSNotificationTypes.REMOVED_FROM_ROOM:\n case HMSNotificationTypes.ROOM_ENDED:\n setMuteNotification(null);\n break;\n case HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST:\n if (notification?.data.enabled) {\n setMuteNotification(notification.data);\n }\n break;\n default:\n return;\n }\n }, [notification]);\n\n if (!muteNotification) {\n return null;\n }\n\n const { requestedBy: peer, tracks, enabled } = muteNotification;\n\n return (\n <RequestDialog\n title=\"Track Unmute Request\"\n body={`${peer?.name} has requested you to unmute your tracks.`}\n onOpenChange={value => !value && setMuteNotification(null)}\n onAction={() => {\n tracks.forEach(track => {\n hmsActions.setEnabledTrack(track.id, enabled);\n });\n setMuteNotification(null);\n }}\n Icon={MicOnIcon}\n />\n );\n};\n", "import { useEffect } from 'react';\nimport { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';\n\nconst notificationTypes = [\n HMSNotificationTypes.TRACK_ADDED,\n HMSNotificationTypes.TRACK_REMOVED,\n HMSNotificationTypes.TRACK_MUTED,\n HMSNotificationTypes.TRACK_UNMUTED,\n];\nexport const TrackNotifications = () => {\n const notification = useHMSNotifications(notificationTypes);\n useEffect(() => {\n if (notification) {\n console.debug(`[${notification.type}]`, notification);\n }\n }, [notification]);\n\n return null;\n};\n", "import React, { useEffect, useState } from 'react';\nimport { HMSNotificationTypes, useHMSActions, useHMSNotifications } from '@100mslive/react-sdk';\nimport { MicOnIcon } from '@100mslive/react-icons';\nimport { RequestDialog } from '../../primitives/DialogContent';\n\nexport const TrackUnmuteModal = () => {\n const hmsActions = useHMSActions();\n const notification = useHMSNotifications([\n HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,\n HMSNotificationTypes.ROOM_ENDED,\n HMSNotificationTypes.REMOVED_FROM_ROOM,\n ]);\n const [muteNotification, setMuteNotification] = useState(null);\n\n useEffect(() => {\n switch (notification?.type) {\n case HMSNotificationTypes.REMOVED_FROM_ROOM:\n case HMSNotificationTypes.ROOM_ENDED:\n setMuteNotification(null);\n break;\n case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:\n if (notification?.data.enabled) {\n setMuteNotification(notification.data);\n }\n break;\n default:\n return;\n }\n }, [notification]);\n\n if (!muteNotification) {\n return null;\n }\n\n const { requestedBy: peer, track, enabled } = muteNotification;\n\n return (\n <RequestDialog\n title=\"Track Unmute Request\"\n onOpenChange={value => !value && setMuteNotification(null)}\n body={`${peer?.name} has requested you to unmute your ${track?.source} ${track?.type}.`}\n onAction={() => {\n hmsActions.setEnabledTrack(track.id, enabled);\n setMuteNotification(null);\n }}\n Icon={MicOnIcon}\n />\n );\n};\n", "import { useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { getRoutePrefix } from '../../common/utils';\n\nexport const useNavigation = () => {\n const navigate = useNavigate();\n const navigation = useCallback(\n path => {\n const prefix = getRoutePrefix();\n let route = path;\n if (prefix && !path.startsWith(prefix)) {\n route = `${prefix}${path}`;\n }\n navigate(route);\n },\n [navigate],\n );\n return navigation;\n};\n", "import React from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ExitIcon } from '@100mslive/react-icons';\nimport { ToastManager } from './Toast/ToastManager';\nimport { Button } from '../../Button';\nimport { Box, Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport { useHMSPrebuiltContext } from '../AppContext';\nimport { Header } from './Header';\nimport { useNavigation } from './hooks/useNavigation';\nimport { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from './hooks/useUserPreferences';\nimport { getRoutePrefix } from '../common/utils';\nimport { textEllipsis } from '../../utils';\n\nconst PostLeave = () => {\n const navigate = useNavigation();\n const { showPreview, roomCode } = useHMSPrebuiltContext();\n const { roomId, role } = useParams();\n const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);\n return (\n <Flex direction=\"column\" css={{ size: '100%' }}>\n <Box css={{ h: '$18', '@md': { h: '$17' } }} data-testid=\"header\">\n <Header />\n </Box>\n <Flex\n justify=\"center\"\n direction=\"column\"\n align=\"center\"\n css={{ bg: '$background_dim', flex: '1 1 0', position: 'relative' }}\n >\n <Text variant=\"h2\" css={{ fontWeight: '$semiBold' }}>\n \uD83D\uDC4B\n </Text>\n <Text variant=\"h4\" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mt: '$12' }}>\n You left the {getRoutePrefix() ? 'stream' : 'room'}\n </Text>\n <Text\n variant=\"body1\"\n css={{\n color: '$on_surface_medium',\n mt: '$8',\n fontWeight: '$regular',\n textAlign: 'center',\n }}\n >\n Have a nice day\n {previewPreference.name && (\n <Box as=\"span\" css={{ ...textEllipsis(100) }}>\n , {previewPreference.name}\n </Box>\n )}\n !\n </Text>\n <Flex css={{ mt: '$14', gap: '$10', alignItems: 'center' }}>\n <Text variant=\"body1\" css={{ color: '$on_surface_medium', fontWeight: '$regular' }}>\n Left by mistake?\n </Text>\n <Button\n onClick={() => {\n let redirectUrl = `${showPreview ? '/preview/' : '/meeting/'}${roomCode || roomId}`;\n if (role && roomId) redirectUrl += '/' + role;\n navigate(redirectUrl);\n ToastManager.clearAllToast();\n }}\n data-testid=\"join_again_btn\"\n >\n <ExitIcon />\n <Text css={{ ml: '$3', fontWeight: '$semiBold', color: 'inherit' }}>Rejoin</Text>\n </Button>\n </Flex>\n </Flex>\n </Flex>\n );\n};\n\nexport default PostLeave;\n", "export { Header } from './Header';\n", "import React from 'react';\nimport { ConferencingHeader } from './ConferencingHeader';\nimport { StreamingHeader } from './StreamingHeader';\nimport { isStreamingKit } from '../../common/utils';\n\nexport const Header = () => {\n return isStreamingKit() ? <StreamingHeader /> : <ConferencingHeader />;\n};\n", "import React from 'react';\nimport { Flex } from '../../../';\nimport { SpeakerTag } from './HeaderComponents';\nimport { ParticipantCount } from './ParticipantList';\nimport { StreamActions } from './StreamActions';\n\nexport const ConferencingHeader = () => {\n return (\n <Flex justify=\"between\" align=\"center\" css={{ position: 'relative', height: '100%' }}>\n <Flex align=\"center\" css={{ position: 'absolute', left: '$10' }}>\n <SpeakerTag />\n </Flex>\n\n <Flex\n align=\"center\"\n css={{\n position: 'absolute',\n right: '$10',\n gap: '$4',\n }}\n >\n <StreamActions />\n <ParticipantCount />\n </Flex>\n </Flex>\n );\n};\n", "import React from 'react';\nimport { useMedia } from 'react-use';\nimport { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';\nimport { VolumeOneIcon } from '@100mslive/react-icons';\nimport { config as cssConfig, Flex, styled, Text, textEllipsis } from '../../../';\nimport { useRoomLayout } from '../../provider/roomLayoutProvider';\nimport { isStreamingKit } from '../../common/utils';\n\nexport const SpeakerTag = () => {\n const dominantSpeaker = useHMSStore(selectDominantSpeaker);\n return dominantSpeaker && dominantSpeaker.name ? (\n <Flex\n align=\"center\"\n justify=\"center\"\n css={{ flex: '1 1 0', color: '$on_primary_high', '@md': { display: 'none' } }}\n >\n <VolumeOneIcon />\n <Text variant=\"md\" css={{ ...textEllipsis(200), ml: '$2' }} title={dominantSpeaker.name}>\n {dominantSpeaker.name}\n </Text>\n </Flex>\n ) : (\n <></>\n );\n};\n\nconst LogoImg = styled('img', {\n maxHeight: '$14',\n w: 'auto',\n objectFit: 'contain',\n '@md': {\n maxHeight: '$12',\n },\n});\n\nexport const Logo = () => {\n const roomLayout = useRoomLayout();\n const logo = roomLayout?.logo?.url;\n const isMobile = useMedia(cssConfig.media.md);\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n // Hide logo for now as there is not enough space\n if (isConnected && isMobile && isStreamingKit()) {\n return null;\n }\n return logo ? <LogoImg src={logo} alt=\"Brand Logo\" /> : null;\n};\n", "import React from 'react';\nimport type { Layout } from '@100mslive/types-prebuilt';\nimport merge from 'lodash.merge';\n// @ts-ignore: fix types\nimport { useAuthToken } from '../../components/AppData/useUISettings';\nimport { useFetchRoomLayout } from './hooks/useFetchRoomLayout';\n\nexport type RoomLayoutProviderProps = {\n roomLayoutEndpoint?: string;\n overrideLayout?: Layout;\n};\n\nexport const RoomLayoutContext = React.createContext<Layout | undefined>(undefined);\n\nexport const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProviderProps>> = ({\n children,\n roomLayoutEndpoint,\n overrideLayout,\n}) => {\n const authToken: string = useAuthToken();\n let { layout } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });\n layout = merge(layout, overrideLayout);\n return <RoomLayoutContext.Provider value={layout}>{children}</RoomLayoutContext.Provider>;\n};\n\nexport const useRoomLayout = (): Layout | undefined => React.useContext(RoomLayoutContext);\n", "import { useEffect, useRef, useState } from 'react';\nimport type { GetResponse, Layout } from '@100mslive/types-prebuilt';\nimport { defaultLayout } from '../constants';\n\n// TODO: remove this usage\nconst fetchWithRetry = async (url = '', options = {}) => {\n const MAX_RETRIES = 4;\n let error = Error('something went wrong');\n for (let i = 0; i < MAX_RETRIES; i++) {\n try {\n return await fetch(url, options);\n } catch (err) {\n error = err as Error;\n }\n }\n console.error('Fetch failed after max retries', { url, options });\n throw error;\n};\n\n// this should take endpoint and return\nexport type useFetchRoomLayoutProps = {\n endpoint?: string;\n authToken: string;\n};\n\nexport type useFetchRoomLayoutResponse = {\n layout: Layout | undefined;\n};\n\nexport const useFetchRoomLayout = ({\n endpoint = '',\n authToken = '',\n}: useFetchRoomLayoutProps): useFetchRoomLayoutResponse => {\n const [layout, setLayout] = useState<Layout | undefined>(undefined);\n const isFetchInProgress = useRef(false);\n useEffect(() => {\n (async () => {\n if (isFetchInProgress.current || !authToken) {\n return;\n }\n if (!endpoint) {\n setLayout(defaultLayout);\n }\n isFetchInProgress.current = true;\n const resp = await fetchWithRetry(endpoint, {\n headers: {\n Authorization: `Bearer ${authToken}`,\n },\n });\n const layoutResp: GetResponse = await resp.json();\n setLayout(layoutResp.data[0]);\n isFetchInProgress.current = false;\n })();\n }, [authToken, endpoint]);\n\n return { layout };\n};\n", "import type { Layout } from '@100mslive/types-prebuilt';\nimport { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';\n\nexport const defaultLayout: Layout = {\n id: '',\n role_id: '',\n template_id: '',\n app_id: '',\n typography: {\n font_family: 'Inter',\n },\n themes: [],\n options: {},\n screens: {\n preview: {\n default: {\n elements: {\n preview_header: {\n title: 'Get Started',\n sub_title: 'Setup your audio and video before joining',\n },\n join_form: {\n join_btn_type: JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE,\n join_btn_label: 'Join Now',\n go_live_btn_label: 'Go Live',\n },\n },\n },\n },\n conferencing: {},\n leave: {},\n },\n};\n", "import React, { Fragment, useCallback, useEffect, useState } from 'react';\nimport { useDebounce, useMeasure } from 'react-use';\nimport { FixedSizeList } from 'react-window';\nimport {\n selectAudioTrackByPeerID,\n selectLocalPeerID,\n selectPeerCount,\n selectPeerMetadata,\n selectPermissions,\n useHMSActions,\n useHMSStore,\n useParticipants,\n} from '@100mslive/react-sdk';\nimport {\n ChangeRoleIcon,\n CrossIcon,\n HandRaiseIcon,\n PeopleIcon,\n RemoveUserIcon,\n SearchIcon,\n SpeakerIcon,\n VerticalMenuIcon,\n} from '@100mslive/react-icons';\nimport { Avatar, Box, Dropdown, Flex, Input, Slider, Text, textEllipsis } from '../../../';\nimport IconButton from '../../IconButton';\nimport { ConnectionIndicator } from '../Connection/ConnectionIndicator';\nimport { RoleChangeModal } from '../RoleChangeModal';\nimport { ParticipantFilter } from './ParticipantFilter';\nimport { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';\nimport { isInternalRole } from '../../common/utils';\nimport { SIDE_PANE_OPTIONS } from '../../common/constants';\n\nexport const ParticipantList = () => {\n const [filter, setFilter] = useState();\n const { participants, isConnected, peerCount, rolesWithParticipants } = useParticipants(filter);\n const [selectedPeerId, setSelectedPeerId] = useState(null);\n const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);\n const onSearch = useCallback(value => {\n setFilter(filterValue => {\n if (!filterValue) {\n filterValue = {};\n }\n filterValue.search = value;\n return { ...filterValue };\n });\n }, []);\n if (peerCount === 0) {\n return null;\n }\n\n return (\n <Fragment>\n <Flex direction=\"column\" css={{ size: '100%' }}>\n <Flex align=\"center\" css={{ w: '100%', mb: '$10' }}>\n <Text css={{ fontWeight: '$semiBold', mr: '$4' }}>Participants</Text>\n <ParticipantFilter\n selection={filter}\n onSelection={setFilter}\n isConnected={isConnected}\n roles={rolesWithParticipants}\n />\n <IconButton onClick={toggleSidepane} css={{ w: '$11', h: '$11', ml: 'auto' }}>\n <CrossIcon />\n </IconButton>\n </Flex>\n {!filter?.search && participants.length === 0 ? null : <ParticipantSearch onSearch={onSearch} />}\n {participants.length === 0 && (\n <Flex align=\"center\" justify=\"center\" css={{ w: '100%', p: '$8 0' }}>\n <Text variant=\"sm\">{!filter ? 'No participants' : 'No matching participants'}</Text>\n </Flex>\n )}\n <VirtualizedParticipants\n participants={participants}\n isConnected={isConnected}\n setSelectedPeerId={setSelectedPeerId}\n />\n </Flex>\n {selectedPeerId && (\n <RoleChangeModal\n peerId={selectedPeerId}\n onOpenChange={value => {\n !value && setSelectedPeerId(null);\n }}\n />\n )}\n </Fragment>\n );\n};\n\nexport const ParticipantCount = () => {\n const peerCount = useHMSStore(selectPeerCount);\n const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);\n const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);\n useEffect(() => {\n if (isParticipantsOpen && peerCount === 0) {\n toggleSidepane();\n }\n }, [isParticipantsOpen, peerCount, toggleSidepane]);\n\n if (peerCount === 0) {\n return null;\n }\n return (\n <IconButton\n css={{\n w: 'auto',\n p: '$4',\n h: 'auto',\n }}\n onClick={() => {\n if (peerCount > 0) {\n toggleSidepane();\n }\n }}\n active={!isParticipantsOpen}\n data-testid=\"participant_list\"\n >\n <PeopleIcon />\n <Text variant=\"sm\" css={{ mx: '$4', c: 'inherit' }}>\n {peerCount}\n </Text>\n </IconButton>\n );\n};\n\nfunction itemKey(index, data) {\n return data.participants[index].id;\n}\n\nconst VirtualizedParticipants = ({ participants, isConnected, setSelectedPeerId }) => {\n const [ref, { width, height }] = useMeasure();\n return (\n <Box\n ref={ref}\n css={{\n flex: '1 1 0',\n mr: '-$10',\n }}\n >\n <FixedSizeList\n itemSize={68}\n itemData={{ participants, isConnected, setSelectedPeerId }}\n itemKey={itemKey}\n itemCount={participants.length}\n width={width}\n height={height}\n >\n {VirtualisedParticipantListItem}\n </FixedSizeList>\n </Box>\n );\n};\n\nconst VirtualisedParticipantListItem = React.memo(({ style, index, data }) => {\n return (\n <div style={style} key={data.participants[index].id}>\n <Participant\n peer={data.participants[index]}\n isConnected={data.isConnected}\n setSelectedPeerId={data.setSelectedPeerId}\n />\n </div>\n );\n});\n\nconst Participant = ({ peer, isConnected, setSelectedPeerId }) => {\n return (\n <Fragment>\n <Flex\n key={peer.id}\n css={{ w: '100%', py: '$4', pr: '$10' }}\n align=\"center\"\n data-testid={'participant_' + peer.name}\n >\n <Avatar\n name={peer.name}\n css={{\n position: 'unset',\n transform: 'unset',\n mr: '$8',\n fontSize: '$sm',\n size: '$12',\n p: '$4',\n }}\n />\n <Flex direction=\"column\" css={{ flex: '1 1 0' }}>\n <Text variant=\"md\" css={{ ...textEllipsis(150), fontWeight: '$semiBold' }}>\n {peer.name}\n </Text>\n <Text variant=\"sub2\">{peer.roleName}</Text>\n </Flex>\n {isConnected && (\n <ParticipantActions\n peerId={peer.id}\n role={peer.roleName}\n onSettings={() => {\n setSelectedPeerId(peer.id);\n }}\n />\n )}\n </Flex>\n </Fragment>\n );\n};\n\n/**\n * shows settings to change for a participant like changing their role\n */\nconst ParticipantActions = React.memo(({ onSettings, peerId, role }) => {\n const isHandRaised = useHMSStore(selectPeerMetadata(peerId))?.isHandRaised;\n const canChangeRole = useHMSStore(selectPermissions)?.changeRole;\n const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));\n const localPeerId = useHMSStore(selectLocalPeerID);\n const canChangeVolume = peerId !== localPeerId && audioTrack;\n const shouldShowMoreActions = canChangeRole || canChangeVolume;\n\n return (\n <Flex align=\"center\" css={{ flexShrink: 0 }}>\n <ConnectionIndicator peerId={peerId} />\n {isHandRaised && <HandRaiseIcon />}\n {shouldShowMoreActions && !isInternalRole(role) && (\n <ParticipantMoreActions onRoleChange={onSettings} peerId={peerId} role={role} />\n )}\n </Flex>\n );\n});\n\nconst ParticipantMoreActions = ({ onRoleChange, peerId }) => {\n const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore(selectPermissions);\n const localPeerId = useHMSStore(selectLocalPeerID);\n const isLocal = localPeerId === peerId;\n const actions = useHMSActions();\n const [open, setOpen] = useState(false);\n return (\n <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>\n <Dropdown.Trigger asChild data-testid=\"participant_more_actions\" css={{ p: '$2', r: '$0' }} tabIndex={0}>\n <Text>\n <VerticalMenuIcon />\n </Text>\n </Dropdown.Trigger>\n <Dropdown.Portal>\n <Dropdown.Content align=\"end\" sideOffset={8} css={{ w: '$64' }}>\n {canChangeRole && (\n <Dropdown.Item onClick={() => onRoleChange(peerId)}>\n <ChangeRoleIcon />\n <Text css={{ ml: '$4' }}>Change Role</Text>\n </Dropdown.Item>\n )}\n <ParticipantVolume peerId={peerId} />\n {!isLocal && canRemoveOthers && (\n <Dropdown.Item\n onClick={async () => {\n try {\n await actions.removePeer(peerId, '');\n } catch (error) {\n // TODO: Toast here\n }\n }}\n >\n <RemoveUserIcon />\n <Text css={{ ml: '$4', color: '$alert_error_default' }}>Remove Participant</Text>\n </Dropdown.Item>\n )}\n </Dropdown.Content>\n </Dropdown.Portal>\n </Dropdown.Root>\n );\n};\n\nconst ParticipantVolume = ({ peerId }) => {\n const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));\n const localPeerId = useHMSStore(selectLocalPeerID);\n const hmsActions = useHMSActions();\n // No volume control for local peer or non audio publishing role\n if (peerId === localPeerId || !audioTrack) {\n return null;\n }\n\n return (\n <Dropdown.Item css={{ h: 'auto' }}>\n <Flex direction=\"column\" css={{ w: '100%' }}>\n <Flex align=\"center\">\n <SpeakerIcon />\n <Text css={{ ml: '$4' }}>Volume{audioTrack.volume ? `(${audioTrack.volume})` : ''}</Text>\n </Flex>\n <Slider\n css={{ my: '0.5rem' }}\n step={5}\n value={[audioTrack.volume]}\n onValueChange={e => {\n hmsActions.setVolume(e[0], audioTrack?.id);\n }}\n />\n </Flex>\n </Dropdown.Item>\n );\n};\n\nexport const ParticipantSearch = ({ onSearch, placeholder }) => {\n const [value, setValue] = React.useState('');\n useDebounce(\n () => {\n onSearch(value);\n },\n 300,\n [value, onSearch],\n );\n return (\n <Box css={{ p: '$4 0', my: '$8', position: 'relative' }}>\n <Box\n css={{\n position: 'absolute',\n left: '$4',\n top: '$2',\n transform: 'translateY(50%)',\n color: '$on_surface_medium',\n }}\n >\n <SearchIcon />\n </Box>\n <Input\n type=\"text\"\n placeholder={placeholder || 'Find what you are looking for'}\n css={{ w: '100%', pl: '$14' }}\n value={value}\n onKeyDown={event => {\n event.stopPropagation();\n }}\n onChange={event => {\n setValue(event.currentTarget.value);\n }}\n autoComplete=\"off\"\n aria-autocomplete=\"none\"\n />\n </Box>\n );\n};\n", "import React from 'react';\nimport { selectConnectionQualityByPeerID, useHMSStore } from '@100mslive/react-sdk';\nimport { PoorConnectivityIcon } from '@100mslive/react-icons';\nimport { styled, Tooltip, useTheme } from '../../../';\nimport { getColor, getTooltipText } from './connectionQualityUtils';\n\nconst Wrapper = styled('span', {\n width: '28px',\n height: '28px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: '$background_dim',\n borderRadius: '$round',\n variants: {\n isTile: {\n true: {\n width: 'unset',\n height: 'unset',\n },\n },\n },\n});\n\nexport const ConnectionIndicator = ({ peerId, isTile = false }) => {\n const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;\n const { theme } = useTheme();\n const defaultColor = theme.colors.surface_brighter;\n if (downlinkQuality === -1 || downlinkQuality === undefined) {\n return null;\n }\n if (downlinkQuality === 0) {\n return (\n <Tooltip title={getTooltipText(downlinkQuality)}>\n <Wrapper isTile={isTile} css={{ color: '#ED4C5A' }} data-testid=\"tile_network\">\n <PoorConnectivityIcon />\n </Wrapper>\n </Tooltip>\n );\n }\n const size = isTile ? 12 : 16;\n return (\n <Tooltip title={getTooltipText(downlinkQuality)}>\n <Wrapper isTile={isTile} data-testid=\"tile_network\">\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 14 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlSpace=\"preserve\"\n style={{\n fillRule: 'evenodd',\n clipRule: 'evenodd',\n strokeLinejoin: 'round',\n strokeMiterlimit: 2,\n }}\n >\n <path\n d=\"M6.875 0c2.549.035 4.679.902 6.445 2.648.366.362.45.796.216 1.096-.239.306-.714.34-1.142.072a2.28 2.28 0 0 1-.341-.271C9.24.862 4.924.775 1.992 3.346c-.284.249-.594.419-.983.393-.272-.019-.49-.135-.613-.388-.125-.261-.05-.498.114-.713.073-.092.156-.177.245-.254C2.516.804 4.591.039 6.875 0Z\"\n fill={getColor(4, downlinkQuality, defaultColor, theme)}\n transform=\"translate(-.333)\"\n />\n <path\n d=\"M7.056 2.964c1.756.035 3.208.7 4.499 1.763.162.134.277.315.354.512.098.251.114.503-.075.72-.193.222-.452.259-.725.198-.293-.066-.518-.247-.738-.443a4.859 4.859 0 0 0-6.198-.26c-.166.127-.318.271-.475.409-.242.211-.513.343-.843.317-.43-.034-.679-.397-.561-.81.062-.211.181-.4.345-.546 1.265-1.162 2.733-1.836 4.417-1.86Z\"\n fill={getColor(3, downlinkQuality, defaultColor, theme)}\n transform=\"translate(-.333)\"\n />\n <path\n d=\"M7.384,6.052C8.293,6.068 9.157,6.449 9.783,7.108C10.005,7.339 10.157,7.6 10.07,7.942C9.959,8.377 9.435,8.581 9.071,8.243C7.935,7.191 6.356,7.183 5.152,8.183C4.816,8.462 4.6,8.485 4.332,8.27C4.063,8.055 3.998,7.691 4.177,7.358C4.273,7.179 4.414,7.038 4.57,6.911C5.26,6.349 6.149,6.05 7.384,6.052L7.384,6.052Z\"\n fill={getColor(2, downlinkQuality, defaultColor, theme)}\n />\n <path\n d=\"M8.214,9.941C8.214,10.234 8.097,10.515 7.888,10.721C7.68,10.928 7.398,11.042 7.104,11.039C6.471,11.036 5.982,10.541 5.993,9.912C6.004,9.259 6.499,8.766 7.133,8.779C7.744,8.791 8.22,9.301 8.214,9.941Z\"\n fill={getColor(1, downlinkQuality, defaultColor, theme)}\n />\n </svg>\n </Wrapper>\n </Tooltip>\n );\n};\n", "const connectionTooltip = {\n 0: 'Reconnecting',\n 1: 'Very Bad Connection',\n 2: 'Bad Connection',\n 3: 'Moderate Connection',\n 4: 'Good Connection',\n 5: 'Excellent Connection',\n};\nconnectionTooltip[-1] = 'Network Unknown';\n\n/**\n * @param connectionScore -> 1-5 connection score for network quality\n */\nexport const getTooltipText = connectionScore => {\n return connectionTooltip[connectionScore];\n};\n\n/**\n * position is needed here as we don't want all the dots/arcs to be colored,\n * the non colored ones will be passed in the default color. If user is\n * disconnected(score=0), no dot/arc will be colored.\n * @param position -> 1 to 5\n * @param connectionScore -> 0 to 5, 0 means disconnected\n * @param defaultColor -> color for components not taking the connection color\n */\nexport const getColor = (position, connectionScore, defaultColor, theme) => {\n const shouldBeColored = position <= connectionScore;\n if (!shouldBeColored) {\n return defaultColor;\n }\n if (connectionScore >= 4) {\n return theme.colors.alert_success;\n } else if (connectionScore >= 3) {\n return theme.colors.alert_warning;\n } else if (connectionScore >= 1) {\n return theme.colors.alert_default;\n }\n return defaultColor;\n};\n", "import React, { forwardRef, useRef, useState } from 'react';\nimport { selectPeerByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';\nimport { Button } from '../../Button';\nimport { Checkbox } from '../../Checkbox';\nimport { Dropdown } from '../../Dropdown';\nimport { Label } from '../../Label';\nimport { Box, Flex } from '../../Layout';\nimport { Dialog } from '../../Modal';\nimport { Text } from '../../Text';\nimport { Tooltip } from '../../Tooltip';\nimport { useDropdownSelection } from './hooks/useDropdownSelection';\nimport { useFilteredRoles } from '../common/hooks';\nimport { textEllipsis } from '../../utils';\n\nconst PeerName = forwardRef(({ children, maxWidth, ...rest }, ref) => (\n <Text\n {...rest}\n ref={ref}\n as=\"strong\"\n variant=\"body2\"\n css={{\n ...textEllipsis(maxWidth),\n display: 'inline-block',\n fontWeight: '$semiBold',\n c: 'inherit',\n }}\n >\n {children}\n </Text>\n));\n\nexport const RoleChangeModal = ({ peerId, onOpenChange }) => {\n const peer = useHMSStore(selectPeerByID(peerId));\n const roles = useFilteredRoles();\n const [selectedRole, setRole] = useState(peer?.roleName);\n const [requestPermission, setRequestPermission] = useState(true);\n const hmsActions = useHMSActions();\n const [open, setOpen] = useState(false);\n const selectionBg = useDropdownSelection();\n const [peerNameRef, setPeerNameRef] = useState();\n const ref = useRef();\n if (!peer) {\n return null;\n }\n\n const peerNameMaxWidth = 200;\n return (\n <Dialog.Root defaultOpen onOpenChange={onOpenChange}>\n <Dialog.Portal>\n <Dialog.Overlay />\n <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>\n <Dialog.Title css={{ p: 0 }} asChild>\n <Text as=\"h6\" variant=\"h6\">\n Change Role\n </Text>\n </Dialog.Title>\n <Dialog.Description asChild>\n <Text\n variant=\"body2\"\n css={{\n mt: '$4',\n mb: '$8',\n c: '$on_surface_medium',\n display: 'flex',\n flexWrap: 'wrap',\n columnGap: '4px',\n }}\n >\n Change the role of\n {peerNameRef && peerNameRef.clientWidth === peerNameMaxWidth ? (\n <Tooltip title={peer.name} side=\"top\">\n <PeerName ref={setPeerNameRef} maxWidth={peerNameMaxWidth}>\n {peer.name}\n </PeerName>\n </Tooltip>\n ) : (\n <PeerName ref={setPeerNameRef} maxWidth={peerNameMaxWidth}>\n {peer.name}\n </PeerName>\n )}\n to\n </Text>\n </Dialog.Description>\n <Flex\n align=\"center\"\n css={{\n w: '100%',\n mb: '$10',\n }}\n >\n <Box\n css={{\n position: 'relative',\n flex: '1 1 0',\n minWidth: 0,\n }}\n >\n <Dropdown.Root open={open} onOpenChange={setOpen} css={{ width: '100%' }}>\n <Dropdown.Trigger\n data-testid=\"open_role_selection_dropdown\"\n asChild\n css={{\n border: '1px solid $border_bright',\n bg: '$surface_bright',\n r: '$1',\n p: '$6 $9',\n }}\n ref={ref}\n >\n <Flex align=\"center\" justify=\"between\" css={{ width: '100%' }}>\n <Text>{selectedRole}</Text>\n {open ? <ChevronUpIcon /> : <ChevronDownIcon />}\n </Flex>\n </Dropdown.Trigger>\n <Dropdown.Portal>\n <Dropdown.Content\n align=\"start\"\n sideOffset={8}\n css={{ zIndex: 1000, width: ref.current?.clientWidth }}\n >\n {roles.map(role => {\n return (\n <Dropdown.Item\n data-testid={role}\n key={role}\n onSelect={() => setRole(role)}\n css={{\n px: '$9',\n bg: role === selectedRole ? selectionBg : undefined,\n }}\n >\n {role}\n </Dropdown.Item>\n );\n })}\n </Dropdown.Content>\n </Dropdown.Portal>\n </Dropdown.Root>\n </Box>\n </Flex>\n {!peer.isLocal && (\n <Flex justify=\"between\" css={{ w: '100%', mb: '$10' }}>\n <Label htmlFor=\"requestRoleChangePermission\" css={{ cursor: 'pointer' }}>\n Request Permission\n </Label>\n <Checkbox.Root\n checked={requestPermission}\n onCheckedChange={value => setRequestPermission(value)}\n id=\"requestRoleChangePermission\"\n data-testid=\"force_role_change_checkbox\"\n >\n <Checkbox.Indicator>\n <CheckIcon width={16} height={16} />\n </Checkbox.Indicator>\n </Checkbox.Root>\n </Flex>\n )}\n <Flex justify=\"center\" align=\"center\" css={{ width: '100%', gap: '$md' }}>\n <Box css={{ width: '50%' }}>\n <Dialog.Close css={{ width: '100%', p: '$4 $8' }} asChild>\n <Button variant=\"standard\" outlined css={{ width: '100%' }} data-testid=\"cancel_button\">\n Cancel\n </Button>\n </Dialog.Close>\n </Box>\n <Box css={{ width: '50%' }}>\n <Button\n data-testid=\"change_button\"\n variant=\"primary\"\n css={{ width: '100%' }}\n onClick={async () => {\n await hmsActions.changeRole(peerId, selectedRole, peer.isLocal ? true : !requestPermission);\n onOpenChange(false);\n }}\n >\n Change\n </Button>\n </Box>\n </Flex>\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n );\n};\n", "export const useDropdownSelection = () => {\n return '$primary_dim';\n};\n", "// @ts-check\nimport { useEffect, useRef, useState } from 'react';\nimport { selectAvailableRoleNames, selectIsConnectedToRoom, selectPeerCount, useHMSStore } from '@100mslive/react-sdk';\nimport { isInternalRole } from './utils';\n\n/**\n * Hook to execute a callback when alone in room(after a certain 5d of time)\n * @param {number} thresholdMs The threshold(in ms) after which the callback is executed,\n * starting from the instant when alone in room.\n * note: the cb is not called when another peer joins during this period.\n */\nexport const useWhenAloneInRoom = (thresholdMs = 5 * 60 * 1000) => {\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const peerCount = useHMSStore(selectPeerCount);\n const [aloneForLong, setAloneForLong] = useState(false);\n const cbTimeout = useRef(null);\n const alone = isConnected && peerCount === 1;\n\n useEffect(() => {\n if (alone && !cbTimeout.current) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n cbTimeout.current = setTimeout(() => {\n setAloneForLong(true);\n }, thresholdMs);\n } else if (!alone) {\n cbTimeout.current && clearTimeout(cbTimeout.current);\n cbTimeout.current = null;\n setAloneForLong(false);\n }\n }, [alone, thresholdMs]);\n\n useEffect(() => {\n return () => {\n if (cbTimeout.current) {\n clearTimeout(cbTimeout.current);\n }\n };\n }, []);\n\n return { alone, aloneForLong };\n};\n\nexport const useFilteredRoles = () => {\n const roles = useHMSStore(selectAvailableRoleNames).filter(role => !isInternalRole(role));\n return roles;\n};\n", "import React, { useCallback, useState } from 'react';\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon, HandRaiseIcon, PeopleIcon } from '@100mslive/react-icons';\nimport { Box, Dropdown, Flex, Text, textEllipsis } from '../../../';\nimport { isInternalRole } from '../../common/utils';\n\nexport const ParticipantFilter = ({ selection, onSelection, isConnected, roles }) => {\n const [open, setOpen] = useState(false);\n const selectionValue = selection?.role || (selection?.metadata?.isHandRaised ? 'Raised Hand' : '');\n const onItemClick = useCallback(value => {\n onSelection(value);\n setOpen(false);\n }, []); //eslint-disable-line\n if (!isConnected) {\n return null;\n }\n return (\n <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>\n <Dropdown.Trigger\n asChild\n data-testid=\"participant_list_filter\"\n css={{\n border: '1px solid $on_surface_low',\n r: '$0',\n p: '$2 $4',\n }}\n tabIndex={0}\n >\n <Flex align=\"center\">\n <Text variant=\"sm\" css={{ ...textEllipsis(80) }}>\n {selectionValue || 'Everyone'}\n </Text>\n <Box css={{ ml: '$2', color: '$on_surface_low' }}>\n {open ? <ChevronUpIcon width={14} height={14} /> : <ChevronDownIcon width={14} height={14} />}\n </Box>\n </Flex>\n </Dropdown.Trigger>\n <Dropdown.Content\n align=\"start\"\n sideOffset={8}\n css={{\n height: 'auto',\n maxHeight: '$96',\n boxShadow: '$md',\n w: '$48',\n }}\n >\n <Item selected={!selection} title=\"Everyone\" onSelection={onItemClick} icon={<PeopleIcon />} />\n <Item\n selected={selection?.metadata?.isHandRaised}\n title=\"Raised Hand\"\n onSelection={onItemClick}\n icon={<HandRaiseIcon />}\n value={{ metadata: { isHandRaised: true }, role: '' }}\n />\n <Dropdown.ItemSeparator />\n {roles\n .filter(role => !isInternalRole(role))\n .map(role => (\n <Item\n key={role}\n selected={selectionValue === role}\n title={role}\n value={{ metadata: { isHandRaised: false }, role }}\n onSelection={onItemClick}\n />\n ))}\n </Dropdown.Content>\n </Dropdown.Root>\n );\n};\n\nconst Item = ({ selected, title, onSelection, value, icon }) => {\n return (\n <Dropdown.Item\n onClick={e => {\n e.preventDefault();\n onSelection(value);\n }}\n >\n <Flex align=\"center\" css={{ flex: '1 1 0' }}>\n {icon && <Text>{icon}</Text>}\n <Text css={{ ml: '$4' }}>{title}</Text>\n </Flex>\n {selected && (\n <Text>\n <CheckIcon widht={16} height={16} />\n </Text>\n )}\n </Dropdown.Item>\n );\n};\n", "import React, { Fragment, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport {\n HMSRoomState,\n selectIsConnectedToRoom,\n selectPermissions,\n selectRoomState,\n useHMSActions,\n useHMSStore,\n useRecordingStreaming,\n} from '@100mslive/react-sdk';\nimport { RecordIcon, WrenchIcon } from '@100mslive/react-icons';\nimport { Box, Button, config as cssConfig, Flex, Loading, Popover, Text, Tooltip } from '../../../';\nimport GoLiveButton from '../GoLiveButton';\nimport { ResolutionInput } from '../Streaming/ResolutionInput';\nimport { getResolution } from '../Streaming/RTMPStreaming';\nimport { ToastManager } from '../Toast/ToastManager';\nimport { AdditionalRoomState, getRecordingText } from './AdditionalRoomState';\nimport { useSidepaneToggle } from '../AppData/useSidepane';\nimport { useSetAppDataByKey } from '../AppData/useUISettings';\nimport { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION, SIDE_PANE_OPTIONS } from '../../common/constants';\n\nexport const LiveStatus = () => {\n const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();\n if (!isHLSRunning && !isRTMPRunning) {\n return null;\n }\n return (\n <Flex align=\"center\">\n <Box css={{ w: '$4', h: '$4', r: '$round', bg: '$alert_error_default', mr: '$2' }} />\n <Text>\n Live\n <Text as=\"span\" css={{ '@md': { display: 'none' } }}>\n &nbsp;with {isHLSRunning ? 'HLS' : 'RTMP'}\n </Text>\n </Text>\n </Flex>\n );\n};\n\nexport const RecordingStatus = () => {\n const { isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn, isRecordingOn } = useRecordingStreaming();\n const permissions = useHMSStore(selectPermissions);\n\n if (\n !isRecordingOn ||\n // if only browser recording is enabled, stop recording is shown\n // so no need to show this as it duplicates\n [permissions?.browserRecording, !isServerRecordingOn, !isHLSRecordingOn, isBrowserRecordingOn].every(\n value => !!value,\n )\n ) {\n return null;\n }\n return (\n <Tooltip\n title={getRecordingText({\n isBrowserRecordingOn,\n isServerRecordingOn,\n isHLSRecordingOn,\n })}\n >\n <Box\n css={{\n color: '$alert_error_default',\n }}\n >\n <RecordIcon width={24} height={24} />\n </Box>\n </Tooltip>\n );\n};\n\nconst EndStream = () => {\n const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);\n\n return (\n <Button data-testid=\"end_stream\" variant=\"danger\" icon onClick={toggleStreaming}>\n <WrenchIcon />\n Manage Stream\n </Button>\n );\n};\n\nconst StartRecording = () => {\n const permissions = useHMSStore(selectPermissions);\n const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);\n const [open, setOpen] = useState(false);\n const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);\n const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();\n const hmsActions = useHMSActions();\n if (!permissions?.browserRecording || isHLSRunning) {\n return null;\n }\n if (isBrowserRecordingOn) {\n return (\n <Popover.Root open={open} onOpenChange={setOpen}>\n <Popover.Trigger asChild>\n <Button variant=\"danger\" data-testid=\"stop_recording\" icon outlined onClick={() => setOpen(true)}>\n <RecordIcon />\n <Text as=\"span\" css={{ '@md': { display: 'none' }, color: 'currentColor' }}>\n Stop Recording\n </Text>\n </Button>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content align=\"end\" sideOffset={8} css={{ w: '$64' }}>\n <Text variant=\"body\" css={{ color: '$on_surface_medium' }}>\n Are you sure you want to end the recording?\n </Text>\n <Button\n data-testid=\"stop_recording_confirm\"\n variant=\"danger\"\n icon\n css={{ ml: 'auto' }}\n onClick={async () => {\n try {\n await hmsActions.stopRTMPAndRecording();\n } catch (error) {\n ToastManager.addToast({\n title: error.message,\n variant: 'error',\n });\n }\n setOpen(false);\n }}\n >\n Stop\n </Button>\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n );\n }\n return (\n <Popover.Root open={open} onOpenChange={setOpen}>\n <Popover.Trigger asChild>\n <Button\n data-testid=\"start_recording\"\n variant=\"standard\"\n icon\n disabled={recordingStarted || isStreamingOn}\n onClick={() => setOpen(true)}\n >\n {recordingStarted ? <Loading size={24} color=\"currentColor\" /> : <RecordIcon />}\n <Text as=\"span\" css={{ '@md': { display: 'none' }, color: 'currentColor' }}>\n {recordingStarted ? 'Starting' : 'Start'} Recording\n </Text>\n </Button>\n </Popover.Trigger>\n <Popover.Content align=\"end\" sideOffset={8} css={{ w: '$64' }}>\n <ResolutionInput\n testId=\"recording_resolution\"\n css={{ flexDirection: 'column', alignItems: 'start' }}\n onResolutionChange={setResolution}\n />\n <Button\n data-testid=\"start_recording_confirm\"\n variant=\"primary\"\n icon\n css={{ ml: 'auto' }}\n type=\"submit\"\n disabled={recordingStarted || isStreamingOn}\n onClick={async () => {\n try {\n setRecordingState(true);\n await hmsActions.startRTMPOrRecording({\n resolution: getResolution(resolution),\n record: true,\n });\n } catch (error) {\n if (error.message.includes('stream already running')) {\n ToastManager.addToast({\n title: 'Recording already running',\n variant: 'error',\n });\n } else {\n ToastManager.addToast({\n title: error.message,\n variant: 'error',\n });\n }\n setRecordingState(false);\n }\n setOpen(false);\n }}\n >\n Start\n </Button>\n </Popover.Content>\n </Popover.Root>\n );\n};\n\nexport const StreamActions = () => {\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const permissions = useHMSStore(selectPermissions);\n const isMobile = useMedia(cssConfig.media.md);\n const { isStreamingOn } = useRecordingStreaming();\n const roomState = useHMSStore(selectRoomState);\n\n return (\n <Flex align=\"center\" css={{ gap: '$4' }}>\n <AdditionalRoomState />\n <Flex align=\"center\" css={{ gap: '$4', '@md': { display: 'none' } }}>\n {roomState !== HMSRoomState.Preview ? <LiveStatus /> : null}\n <RecordingStatus />\n </Flex>\n {isConnected && !isMobile ? <StartRecording /> : null}\n {isConnected && (permissions.hlsStreaming || permissions.rtmpStreaming) && (\n <Fragment>{isStreamingOn ? <EndStream /> : <GoLiveButton />}</Fragment>\n )}\n </Flex>\n );\n};\n", "import React from 'react';\nimport { useRecordingStreaming } from '@100mslive/react-sdk';\nimport { GoLiveIcon } from '@100mslive/react-icons';\nimport { Button } from '../../Button';\nimport { Tooltip } from '../../Tooltip';\nimport { useIsSidepaneTypeOpen, useSidepaneToggle } from './AppData/useSidepane';\nimport { useIsHLSStartedFromUI, useIsRTMPStartedFromUI } from './AppData/useUISettings';\nimport { SIDE_PANE_OPTIONS } from './../common/constants';\n\nconst GoLiveButton = () => {\n const isStreamingSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.STREAMING);\n const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);\n const { isStreamingOn, isBrowserRecordingOn } = useRecordingStreaming();\n const isHLSStartedFromUI = useIsHLSStartedFromUI();\n const isRTMPStartedFromUI = useIsRTMPStartedFromUI();\n let tooltipText = 'Start streaming';\n if (isHLSStartedFromUI || isRTMPStartedFromUI) {\n if (isHLSStartedFromUI) {\n tooltipText = 'HLS start in progress';\n }\n if (isRTMPStartedFromUI) {\n tooltipText = 'RTMP start in progress';\n }\n }\n return (\n <Tooltip title={tooltipText}>\n <Button\n data-testid=\"go_live\"\n variant={isStreamingSidepaneOpen ? 'standard' : 'primary'}\n onClick={toggleStreaming}\n icon\n loading={isRTMPStartedFromUI || isHLSStartedFromUI}\n disabled={isBrowserRecordingOn && !isStreamingOn}\n >\n <GoLiveIcon />\n Go Live\n </Button>\n </Tooltip>\n );\n};\n\nexport default GoLiveButton;\n", "import React, { useCallback, useState } from 'react';\nimport { InfoIcon } from '@100mslive/react-icons';\nimport { Flex, Input, Label, Text, Tooltip } from '../../../';\nimport { DialogRow } from '../../primitives/DialogContent';\nimport {\n RTMP_RECORD_DEFAULT_RESOLUTION,\n RTMP_RECORD_RESOLUTION_MAX,\n RTMP_RECORD_RESOLUTION_MIN,\n} from '../../common/constants';\n\nexport const ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css, testId }) => {\n const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);\n\n const resolutionChangeHandler = useCallback(\n event => {\n const { name, value } = event.target;\n let width = name === 'resWidth' ? Number(value) : resolution.width;\n let height = name === 'resHeight' ? Number(value) : resolution.height;\n\n if (width === 0) {\n width = null;\n }\n if (height === 0) {\n height = null;\n }\n const newResolution = {\n width: !isNaN(width) ? width : RTMP_RECORD_DEFAULT_RESOLUTION.width,\n height: !isNaN(height) ? height : RTMP_RECORD_DEFAULT_RESOLUTION.height,\n };\n setResolution(newResolution);\n },\n [resolution],\n );\n\n return (\n <DialogRow breakSm css={css}>\n <Flex gap={1}>\n <Label css={{ mb: '$8' }}>Resolution</Label>\n {tooltipText && (\n <Tooltip title={tooltipText}>\n <div>\n <InfoIcon color=\"#B0C3DB\" />\n </div>\n </Tooltip>\n )}\n </Flex>\n <Flex\n justify=\"between\"\n css={{ width: !tooltipText ? '100%' : '70%', '@sm': { width: '100%' } }}\n gap={2}\n direction=\"column\"\n >\n <Flex justify=\"between\" gap={2}>\n <Flex direction=\"column\" css={{ width: '50%' }}>\n <Text variant=\"xs\">Width</Text>\n <Input\n data-testid={`${testId}_width`}\n css={{ width: '100%', mt: '$4' }}\n name=\"resWidth\"\n value={resolution.width}\n onChange={resolutionChangeHandler}\n readOnly={disabled}\n min={RTMP_RECORD_RESOLUTION_MIN}\n max={RTMP_RECORD_RESOLUTION_MAX}\n onBlur={() => onResolutionChange(resolution)}\n type=\"number\"\n />\n </Flex>\n <Flex direction=\"column\" css={{ width: '50%' }}>\n <Text variant=\"xs\">Height</Text>\n <Input\n data-testid={`${testId}_height`}\n css={{ width: '100%', mt: '$4' }}\n name=\"resHeight\"\n value={resolution.height}\n onChange={resolutionChangeHandler}\n onBlur={() => onResolutionChange(resolution)}\n readOnly={disabled}\n min={RTMP_RECORD_RESOLUTION_MIN}\n max={RTMP_RECORD_RESOLUTION_MAX}\n type=\"number\"\n />\n </Flex>\n </Flex>\n </Flex>\n </DialogRow>\n );\n};\n", "import React, { useEffect, useRef, useState } from 'react';\nimport { useHMSActions, useRecordingStreaming } from '@100mslive/react-sdk';\nimport { AddCircleIcon, EndStreamIcon, GoLiveIcon, PencilIcon, SettingsIcon, TrashIcon } from '@100mslive/react-icons';\nimport { Accordion, Box, Button, Flex, Input, Label, Loading, Text } from '../../../';\nimport { Container, ContentBody, ContentHeader, ErrorText, RecordStream } from './Common';\nimport { ResolutionInput } from './ResolutionInput';\nimport { useSetAppDataByKey } from '../AppData/useUISettings';\nimport { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';\nimport { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants';\n\nexport const RTMPStreaming = ({ onBack }) => {\n const { isRTMPRunning } = useRecordingStreaming();\n\n return (\n <Container>\n <ContentHeader title=\"Start Streaming\" content=\"Choose a destination\" onBack={onBack} />\n <ContentBody Icon={SettingsIcon} title=\"RTMP\">\n Live Stream your call to Twitch, YouTube, Facebook and any app which supports RTMP, all at the same time\n </ContentBody>\n {!isRTMPRunning ? <StartRTMP /> : <EndRTMP />}\n </Container>\n );\n};\n\nconst StartRTMP = () => {\n const [rtmpPreference = [], setRTMPPreference] = useUserPreferences(UserPreferencesKeys.RTMP_URLS);\n const [rtmpStreams, setRTMPStreams] = useState(\n rtmpPreference.length > 0\n ? rtmpPreference\n : [\n {\n name: 'Stream',\n id: Date.now(),\n rtmpURL: '',\n streamKey: '',\n },\n ],\n );\n const hmsActions = useHMSActions();\n const [error, setError] = useState(false);\n const [record, setRecord] = useState(false);\n const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);\n const [isRTMPStarted, setRTMPStarted] = useSetAppDataByKey(APP_DATA.rtmpStarted);\n const hasRTMPURL = rtmpStreams.some(value => value.rtmpURL && value.streamKey);\n\n return (\n <Box\n css={{ overflowY: 'auto' }}\n as=\"form\"\n onSubmit={e => {\n e.preventDefault();\n }}\n >\n {rtmpStreams.length > 0 && (\n <Box css={{ px: '$10' }}>\n <Accordion.Root type=\"single\" collapsible defaultValue={rtmpStreams[0].id}>\n {rtmpStreams.map((rtmp, index) => {\n return (\n <Accordion.Item\n value={rtmp.id}\n key={rtmp.id}\n css={{\n border: '2px solid $surface_bright !important',\n r: '$1',\n my: '$4',\n }}\n >\n <AccordionHeader rtmp={rtmp} setRTMPStreams={setRTMPStreams} />\n <Accordion.Content css={{ px: '$8', py: 0 }}>\n <RTMPForm {...rtmp} setRTMPStreams={setRTMPStreams} testId={`${index}_rtmp`} />\n </Accordion.Content>\n </Accordion.Item>\n );\n })}\n </Accordion.Root>\n </Box>\n )}\n <ResolutionInput\n testId=\"rtmp_resolution\"\n onResolutionChange={setResolution}\n css={{\n flexDirection: 'column',\n alignItems: 'start',\n px: '$10',\n my: '$8',\n }}\n />\n <RecordStream record={record} setRecord={setRecord} testId=\"rtmp_recording\" />\n <Box css={{ p: '$8 $10', '@lg': { display: 'flex', gap: '$4' } }}>\n {rtmpStreams.length < 3 && (\n <Button\n data-testid=\"add_stream\"\n variant=\"standard\"\n outlined\n icon\n css={{ my: '$4', w: '100%' }}\n onClick={() => {\n setRTMPStreams(streams => [\n ...streams,\n {\n name: 'Stream',\n id: Date.now(),\n rtmpURL: '',\n streamKey: '',\n },\n ]);\n }}\n >\n <AddCircleIcon /> Add Stream\n </Button>\n )}\n\n <Button\n data-testid=\"start_rtmp\"\n variant=\"primary\"\n icon\n type=\"submit\"\n css={{ w: '100%', my: '$4' }}\n disabled={isRTMPStarted || (rtmpStreams.length === 0 && !record)}\n onClick={async () => {\n try {\n const hasInvalidData = rtmpStreams.find(\n value => (value.rtmpURL && !value.streamKey) || (value.streamKey && !value.rtmpURL),\n );\n if (hasInvalidData || (rtmpStreams.length > 0 && !hasRTMPURL)) {\n return;\n }\n setError('');\n setRTMPStarted(true);\n const urls = hasRTMPURL ? rtmpStreams.map(value => `${value.rtmpURL}/${value.streamKey}`) : [];\n await hmsActions.startRTMPOrRecording({\n rtmpURLs: urls,\n resolution: getResolution(resolution),\n record: record,\n });\n setRTMPPreference(rtmpStreams);\n } catch (error) {\n console.error(error);\n setError(error.message);\n setRTMPStarted(false);\n }\n }}\n >\n {isRTMPStarted ? <Loading size={24} color=\"currentColor\" /> : <GoLiveIcon />}\n {isRTMPStarted ? 'Starting stream...' : 'Go Live'}\n </Button>\n <ErrorText error={error} />\n </Box>\n </Box>\n );\n};\n\nconst EndRTMP = () => {\n const hmsActions = useHMSActions();\n const [inProgress, setInProgress] = useState(false);\n const [error, setError] = useState('');\n const { isRTMPRunning } = useRecordingStreaming();\n\n useEffect(() => {\n if (inProgress && !isRTMPRunning) {\n setInProgress(false);\n }\n }, [inProgress, isRTMPRunning]);\n\n return (\n <Box css={{ p: '$4 $10' }}>\n <ErrorText error={error} />\n <Button\n data-testid=\"stop_rtmp\"\n variant=\"danger\"\n css={{ w: '100%', r: '$0', my: '$8' }}\n icon\n loading={inProgress}\n disabled={inProgress}\n onClick={async () => {\n try {\n setInProgress(true);\n await hmsActions.stopRTMPAndRecording();\n } catch (error) {\n setError(error.message);\n setInProgress(false);\n }\n }}\n >\n <EndStreamIcon />\n End Stream\n </Button>\n </Box>\n );\n};\n\nconst ActionIcon = ({ icon: Icon, onClick }) => {\n return (\n <Text as=\"span\" css={{ mx: '$2', cursor: 'pointer' }} onClick={onClick}>\n <Icon width={16} height={16} />\n </Text>\n );\n};\n\nconst FormLabel = ({ id, children }) => {\n return (\n <Label htmlFor={id} css={{ color: '$on_surface_high', my: '$4', fontSize: '$sm' }}>\n {children}\n </Label>\n );\n};\n\nconst RTMPForm = ({ rtmpURL, id, streamKey, setRTMPStreams, testId }) => {\n const formRef = useRef(null);\n return (\n <Flex id={id} direction=\"column\" css={{ mb: '$8', px: '$8' }} ref={formRef}>\n <FormLabel id=\"rtmpURL\">\n RTMP URL\n <Asterik />\n </FormLabel>\n <Input\n data-testid={`${testId}_url`}\n placeholder=\"Enter RTMP URL\"\n id=\"rtmpURL\"\n name=\"rtmpURL\"\n value={rtmpURL}\n onChange={e => {\n setRTMPStreams(streams =>\n updateStream({\n streams,\n id,\n value: e.target.value,\n key: e.target.name,\n }),\n );\n }}\n required\n />\n <FormLabel id=\"streamKey\">\n Stream Key\n <Asterik />\n </FormLabel>\n <Input\n placeholder=\"Enter Stream Key\"\n id=\"streamKey\"\n name=\"streamKey\"\n value={streamKey}\n data-testid={`${testId}_key`}\n onChange={e => {\n setRTMPStreams(streams =>\n updateStream({\n streams,\n id,\n value: e.target.value,\n key: e.target.name,\n }),\n );\n }}\n required\n />\n </Flex>\n );\n};\n\nconst Asterik = () => {\n return (\n <Text variant=\"sm\" as=\"span\" css={{ color: '$alert_error_default', mx: '$2' }}>\n *\n </Text>\n );\n};\nconst AccordionHeader = ({ rtmp, setRTMPStreams }) => {\n const [edit, setEdit] = useState(false);\n return (\n <Accordion.Header css={{ px: '$8' }}>\n {edit ? (\n <Input\n defaultValue={rtmp.name}\n autoFocus\n onBlur={e => {\n const value = e.currentTarget.value.trim();\n if (value) {\n setRTMPStreams(streams =>\n streams.map(stream => {\n if (stream.id === rtmp.id) {\n stream.name = value;\n }\n return stream;\n }),\n );\n setEdit(false);\n }\n }}\n />\n ) : (\n <Text css={{ flex: '1 1 0' }}>{rtmp.name}</Text>\n )}\n <Flex css={{ mx: '$4', gap: '$2' }}>\n <ActionIcon\n onClick={e => {\n e.stopPropagation();\n setEdit(true);\n }}\n icon={PencilIcon}\n />\n <ActionIcon\n onClick={() => {\n setRTMPStreams(streams => streams.filter(stream => stream.id !== rtmp.id));\n }}\n icon={TrashIcon}\n />\n </Flex>\n </Accordion.Header>\n );\n};\n\nconst updateStream = ({ streams, id, key, value }) =>\n streams.map(stream => {\n if (stream.id === id) {\n return {\n ...stream,\n [key]: value,\n };\n }\n return stream;\n });\n\nexport function getResolution(recordingResolution) {\n const resolution = {};\n if (recordingResolution.width) {\n resolution.width = recordingResolution.width;\n }\n if (recordingResolution.height) {\n resolution.height = recordingResolution.height;\n }\n if (Object.keys(resolution).length > 0) {\n return resolution;\n }\n}\n", "import React from 'react';\nimport { selectPermissions, useHMSStore } from '@100mslive/react-sdk';\nimport { ChevronLeftIcon, ChevronRightIcon, CrossIcon, RecordIcon } from '@100mslive/react-icons';\nimport { Box, Flex, IconButton, slideLeftAndFade, Switch, Text } from '../../../';\n\nexport const StreamCard = ({ title, subtitle, Icon, imgSrc = '', css = {}, onClick, testId }) => {\n return (\n <Flex\n css={{\n w: '100%',\n p: '$10',\n r: '$1',\n cursor: 'pointer',\n bg: '$surface_bright',\n mb: '$10',\n mt: '$8',\n ...css,\n }}\n data-testid={testId}\n onClick={onClick}\n >\n <Text css={{ alignSelf: 'center', p: '$4' }}>\n {imgSrc ? <img src={imgSrc} height={40} width={40} /> : <Icon width={40} height={40} />}\n </Text>\n <Box css={{ flex: '1 1 0', mx: '$8' }}>\n <Text variant=\"h6\" css={{ mb: '$4' }}>\n {title}\n </Text>\n <Text variant=\"sm\" css={{ color: '$on_surface_medium' }}>\n {subtitle}\n </Text>\n </Box>\n <Text css={{ alignSelf: 'center' }}>\n <ChevronRightIcon />\n </Text>\n </Flex>\n );\n};\n\nexport const ContentHeader = ({ onBack, title, content }) => {\n return (\n <Flex css={{ w: '100%', py: '$8', px: '$10', cursor: 'pointer' }}>\n <Text\n css={{ p: '$2', bg: '$surface_bright', r: '$round', alignSelf: 'center' }}\n onClick={onBack}\n data-testid=\"go_back\"\n >\n <ChevronLeftIcon width={16} height={16} />\n </Text>\n <Box css={{ flex: '1 1 0', mx: '$8' }}>\n <Text\n variant=\"tiny\"\n css={{\n textTransform: 'uppercase',\n fontWeight: '$semiBold',\n color: '$on_surface_medium',\n }}\n >\n {title}\n </Text>\n <Text variant=\"h6\">{content}</Text>\n </Box>\n <IconButton onClick={onBack} css={{ alignSelf: 'flex-start' }} data-testid=\"close_stream_section\">\n <CrossIcon width={16} height={16} />\n </IconButton>\n </Flex>\n );\n};\n\nexport const Container = ({ children, rounded = false }) => {\n return (\n <Box\n css={{\n size: '100%',\n zIndex: 2,\n position: 'absolute',\n top: 0,\n left: 0,\n bg: '$surface_default',\n transform: 'translateX(10%)',\n animation: `${slideLeftAndFade('10%')} 100ms ease-out forwards`,\n display: 'flex',\n flexDirection: 'column',\n borderRadius: rounded ? '$2' : '0',\n }}\n >\n {children}\n </Box>\n );\n};\n\nexport const ContentBody = ({ Icon, title, removeVerticalPadding = false, children }) => {\n return (\n <Box css={{ p: removeVerticalPadding ? '$0 $10' : '$10' }}>\n <Text css={{ display: 'flex', alignItems: 'center', mb: '$4' }}>\n <Icon />\n <Text as=\"span\" css={{ fontWeight: '$semiBold', ml: '$4' }}>\n {title}\n </Text>\n </Text>\n <Text variant=\"sm\" css={{ color: '$on_surface_medium' }}>\n {children}\n </Text>\n </Box>\n );\n};\n\nexport const RecordStream = ({ record, setRecord, testId }) => {\n const permissions = useHMSStore(selectPermissions);\n return permissions?.browserRecording ? (\n <Flex align=\"center\" css={{ bg: '$surface_bright', m: '$8 $10', p: '$8', r: '$0' }}>\n <Text css={{ color: '$alert_error_default' }}>\n <RecordIcon />\n </Text>\n <Text variant=\"sm\" css={{ flex: '1 1 0', mx: '$8' }}>\n Record the stream\n </Text>\n <Switch checked={record} onCheckedChange={setRecord} data-testid={testId} />\n </Flex>\n ) : null;\n};\n\nexport const ErrorText = ({ error }) => {\n if (!error) {\n return null;\n }\n return (\n <Text variant=\"sm\" css={{ mb: '$8', color: '$alert_error_default' }}>\n {error}\n </Text>\n );\n};\n", "import React, { useState } from 'react';\nimport { selectLocalPeerID, selectPeerSharingVideoPlaylist, useHMSStore, useScreenShare } from '@100mslive/react-sdk';\nimport {\n AudioPlayerIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n MusicIcon,\n PencilDrawIcon,\n ShareScreenIcon,\n VideoPlayerIcon,\n} from '@100mslive/react-icons';\nimport { Box, Dropdown, Flex, Text, Tooltip } from '../../../';\nimport { useWhiteboardMetadata } from '../../plugins/whiteboard/useWhiteboardMetadata';\nimport { useUISettings } from '../AppData/useUISettings';\nimport { usePlaylistMusic } from '../hooks/usePlaylistMusic';\nimport { useScreenshareAudio } from '../hooks/useScreenshareAudio';\nimport { UI_SETTINGS } from '../../common/constants';\n\nexport const getRecordingText = ({ isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn }, delimiter = ', ') => {\n if (!isBrowserRecordingOn && !isServerRecordingOn && !isHLSRecordingOn) {\n return '';\n }\n const title = [];\n if (isBrowserRecordingOn) {\n title.push('Browser');\n }\n if (isServerRecordingOn) {\n title.push('Server');\n }\n if (isHLSRecordingOn) {\n title.push('HLS');\n }\n return title.join(delimiter);\n};\n\n/**\n * Display state of recording, streaming, playlist, whiteboard\n */\nexport const AdditionalRoomState = () => {\n const playlist = usePlaylistMusic();\n const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);\n const screenshareAudio = useScreenshareAudio();\n const [open, setOpen] = useState(false);\n const isPlaylistInactive = [\n !playlist.peer || !playlist.track,\n !playlist.peer?.isLocal && !playlist.track?.enabled,\n playlist.peer?.isLocal && !playlist.selection,\n ].some(Boolean);\n const isAudioshareInactive = [\n !screenshareAudio.peer || !screenshareAudio.track,\n !screenshareAudio.peer?.isLocal && !screenshareAudio.track?.enabled,\n ].some(Boolean);\n\n const peerSharingPlaylist = useHMSStore(selectPeerSharingVideoPlaylist);\n const localPeerID = useHMSStore(selectLocalPeerID);\n const isVideoPlayListPlaying = !!peerSharingPlaylist?.id;\n const { screenSharingPeerName, screenSharingPeerId, screenShareVideoTrackId } = useScreenShare();\n\n const isVideoScreenSharingOn = !!screenShareVideoTrackId;\n const { whiteboardOwner, amIWhiteboardOwner, toggleWhiteboard } = useWhiteboardMetadata();\n const shouldShowScreenShareState = isAudioOnly && isVideoScreenSharingOn;\n const shouldShowVideoState = isAudioOnly && isVideoPlayListPlaying;\n if (\n isPlaylistInactive &&\n isAudioshareInactive &&\n !shouldShowScreenShareState &&\n !shouldShowVideoState &&\n !whiteboardOwner\n ) {\n return null;\n }\n\n return (\n <Dropdown.Root open={open} onOpenChange={setOpen}>\n <Dropdown.Trigger asChild>\n <Flex\n align=\"center\"\n css={{\n color: '$on_primary_high',\n borderRadius: '$1',\n border: '1px solid $on_surface_low',\n padding: '$4',\n '@sm': { display: 'none' },\n }}\n data-testid=\"record_status_dropdown\"\n >\n {!isAudioshareInactive && (\n <Tooltip title=\"Screenshare Audio\">\n <Flex align=\"center\" css={{ color: '$on_primary_high', mx: '$2' }}>\n <MusicIcon width={24} height={24} />\n </Flex>\n </Tooltip>\n )}\n {shouldShowScreenShareState && (\n <Tooltip title=\"Screenshare\">\n <Flex align=\"center\" css={{ color: '$on_primary_high', mx: '$2' }}>\n <ShareScreenIcon width={24} height={24} />\n </Flex>\n </Tooltip>\n )}\n {shouldShowVideoState && (\n <Tooltip title=\"video playlist\">\n <Flex align=\"center\" css={{ color: '$on_primary_high', mx: '$2' }}>\n <VideoPlayerIcon width={24} height={24} />\n </Flex>\n </Tooltip>\n )}\n {!isPlaylistInactive && (\n <Tooltip title=\"Playlist Music\">\n <Flex align=\"center\" css={{ color: '$on_primary_high', mx: '$2' }}>\n <AudioPlayerIcon width={24} height={24} />\n </Flex>\n </Tooltip>\n )}\n {whiteboardOwner && (\n <Tooltip title=\"Whiteboard\">\n <Flex align=\"center\" css={{ color: '$on_primary_high', mx: '$2' }}>\n <PencilDrawIcon width={24} height={24} />\n </Flex>\n </Tooltip>\n )}\n <Box css={{ '@lg': { display: 'none' }, color: '$on_surface_low' }}>\n {open ? <ChevronUpIcon /> : <ChevronDownIcon />}\n </Box>\n </Flex>\n </Dropdown.Trigger>\n <Dropdown.Content sideOffset={5} align=\"end\" css={{ w: '$60' }}>\n {!isPlaylistInactive && (\n <Dropdown.Item css={{ color: '$on_primary_high' }}>\n <AudioPlayerIcon width={24} height={24} />\n <Text variant=\"sm\" css={{ ml: '$2', flex: '1 1 0' }}>\n Playlist is playing\n </Text>\n {playlist.peer.isLocal ? (\n <Text\n variant=\"sm\"\n css={{ color: '$alert_error_default', cursor: 'pointer', ml: '$2' }}\n onClick={e => {\n e.preventDefault();\n playlist.selection.playing ? playlist.pause() : playlist.play(playlist.selection.id);\n }}\n >\n {playlist.selection.playing ? 'Pause' : 'Play'}\n </Text>\n ) : (\n <Text\n variant=\"sm\"\n css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}\n onClick={e => {\n e.preventDefault();\n playlist.setVolume(!playlist.track.volume ? 100 : 0);\n }}\n >\n {playlist.track.volume === 0 ? 'Unmute' : 'Mute'}\n </Text>\n )}\n </Dropdown.Item>\n )}\n {!isAudioshareInactive && (\n <Dropdown.Item css={{ color: '$on_primary_high' }}>\n <MusicIcon width={24} height={24} />\n <Text variant=\"sm\" css={{ ml: '$2', flex: '1 1 0' }}>\n Music is playing\n </Text>\n <Text\n variant=\"sm\"\n css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}\n onClick={e => {\n e.preventDefault();\n screenshareAudio.onToggle();\n }}\n >\n {screenshareAudio.muted ? 'Unmute' : 'Mute'}\n </Text>\n </Dropdown.Item>\n )}\n {shouldShowScreenShareState && (\n <Dropdown.Item css={{ color: '$on_primary_high' }}>\n <ShareScreenIcon width={24} height={24} />\n <Text variant=\"sm\" css={{ ml: '$2', flex: '1 1 0' }}>\n {`Shared by: ${screenSharingPeerId === localPeerID ? 'You' : screenSharingPeerName}`}\n </Text>\n </Dropdown.Item>\n )}\n {shouldShowVideoState && (\n <Dropdown.Item css={{ color: '$on_primary_high' }}>\n <VideoPlayerIcon width={24} height={24} />\n <Text variant=\"sm\" css={{ ml: '$2', flex: '1 1 0' }}>\n {`Shared by: ${peerSharingPlaylist.id === localPeerID ? 'You' : peerSharingPlaylist.name}`}\n </Text>\n </Dropdown.Item>\n )}\n {whiteboardOwner && (\n <Dropdown.Item css={{ color: '$on_primary_high' }}>\n <PencilDrawIcon width={24} height={24} />\n <Text variant=\"sm\" css={{ ml: '$2', flex: '1 1 0' }}>\n Whiteboard Owner - {whiteboardOwner.name}\n {amIWhiteboardOwner && '(You)'}\n </Text>\n {amIWhiteboardOwner && (\n <Text\n variant=\"sm\"\n css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}\n onClick={e => {\n e.preventDefault();\n toggleWhiteboard();\n }}\n >\n Stop\n </Text>\n )}\n </Dropdown.Item>\n )}\n </Dropdown.Content>\n </Dropdown.Root>\n );\n};\n", "import { useCallback, useEffect, useMemo } from 'react';\nimport { selectLocalPeerID, selectPeerByCondition, useHMSStore } from '@100mslive/react-sdk';\nimport { useMyMetadata } from '../../components/hooks/useMetadata';\nimport { getMetadata } from '../../common/utils';\nimport { FeatureFlags } from '../../services/FeatureFlags';\n\nconst isWhiteboardOwner = peer => {\n return !!getMetadata(peer?.metadata).whiteboardOwner;\n};\n\nexport const useWhiteboardMetadata = () => {\n const localPeerID = useHMSStore(selectLocalPeerID);\n const { updateMetaData } = useMyMetadata();\n const whiteboardOwner = useHMSStore(selectPeerByCondition(isWhiteboardOwner));\n const amIWhiteboardOwner = useMemo(() => localPeerID === whiteboardOwner?.id, [localPeerID, whiteboardOwner]);\n\n /**\n * @param enabled {boolean}\n */\n const toggleWhiteboard = useCallback(async () => {\n if (!process.env.REACT_APP_PUSHER_APP_KEY) {\n console.error('Cannot start whiteboard - Pusher Key unavailable');\n }\n try {\n if (!whiteboardOwner || amIWhiteboardOwner) {\n await updateMetaData({ whiteboardOwner: !whiteboardOwner });\n } else {\n console.warn('Cannot toggle whiteboard as it was shared by another peer');\n }\n } catch (error) {\n console.error('failed to toggle whiteboard to ', !whiteboardOwner, error);\n }\n }, [whiteboardOwner, updateMetaData, amIWhiteboardOwner]);\n\n useEffect(() => {\n window.toggleWhiteboard = toggleWhiteboard;\n }, [toggleWhiteboard]);\n\n return {\n /** is whiteboard enabled for the room */\n whiteboardEnabled: FeatureFlags.enableWhiteboard,\n /** owner of the active whiteboard, can also be used to check if whiteboard is active */\n whiteboardOwner,\n amIWhiteboardOwner,\n toggleWhiteboard,\n };\n};\n", "import { useCallback, useState } from 'react';\nimport { selectLocalPeerID, selectPeerMetadata, useHMSActions, useHMSStore } from '@100mslive/react-sdk';\n\nexport const useMyMetadata = () => {\n const hmsActions = useHMSActions();\n const localPeerId = useHMSStore(selectLocalPeerID);\n const metaData = useHMSStore(selectPeerMetadata(localPeerId));\n const [isHandRaised, setHandRaised] = useState(metaData?.isHandRaised || false);\n const [isBRBOn, setBRBOn] = useState(metaData?.isBRBOn || false); // BRB = be right back\n\n const update = async updatedFields => {\n try {\n await hmsActions.changeMetadata(Object.assign(metaData, updatedFields));\n return true;\n } catch (error) {\n console.error('failed to update metadata ', metaData, updatedFields);\n }\n };\n\n const toggleHandRaise = useCallback(async () => {\n const brbUpdate = !isHandRaised ? false : isBRBOn;\n const success = await update({\n isHandRaised: !isHandRaised,\n isBRBOn: brbUpdate,\n });\n if (success) {\n setBRBOn(brbUpdate);\n setHandRaised(!isHandRaised);\n }\n }, [isHandRaised, isBRBOn]); //eslint-disable-line\n\n const toggleBRB = useCallback(async () => {\n const handRaiseUpdate = !isBRBOn ? false : isHandRaised;\n const success = await update({\n isHandRaised: handRaiseUpdate,\n isBRBOn: !isBRBOn,\n });\n if (success) {\n setBRBOn(!isBRBOn);\n setHandRaised(handRaiseUpdate);\n }\n }, [isHandRaised, isBRBOn]); //eslint-disable-line\n\n return {\n isHandRaised,\n isBRBOn,\n metaData,\n updateMetaData: update,\n toggleHandRaise,\n toggleBRB,\n };\n};\n", "import { useCallback } from 'react';\nimport {\n selectAudioPlaylist,\n selectAudioPlaylistTrackByPeerID,\n selectPeerSharingAudioPlaylist,\n useHMSActions,\n useHMSStore,\n} from '@100mslive/react-sdk';\n\nexport const usePlaylistMusic = () => {\n const peer = useHMSStore(selectPeerSharingAudioPlaylist);\n const track = useHMSStore(selectAudioPlaylistTrackByPeerID(peer?.id));\n const selection = useHMSStore(selectAudioPlaylist.selectedItem);\n const hmsActions = useHMSActions();\n\n const play = useCallback(\n async selectedId => {\n await hmsActions.audioPlaylist.play(selectedId);\n },\n [hmsActions],\n );\n\n const pause = useCallback(() => {\n hmsActions.audioPlaylist.pause();\n }, [hmsActions]);\n\n const setVolume = useCallback(\n value => {\n hmsActions.setVolume(value, track?.id);\n },\n [hmsActions, track],\n );\n\n return { selection, peer, track, play, pause, setVolume };\n};\n", "import { useCallback } from 'react';\nimport {\n selectPeerSharingAudio,\n selectScreenShareAudioByPeerID,\n useHMSActions,\n useHMSStore,\n} from '@100mslive/react-sdk';\n\nexport const useScreenshareAudio = () => {\n const hmsActions = useHMSActions();\n const peer = useHMSStore(selectPeerSharingAudio);\n const track = useHMSStore(selectScreenShareAudioByPeerID(peer?.id));\n\n const handleMute = useCallback(() => {\n if (!peer.isLocal) {\n hmsActions.setVolume(!track.volume ? 100 : 0, track.id);\n } else {\n hmsActions.setEnabledTrack(track.id, !track.enabled).catch(console.error);\n }\n }, [peer, hmsActions, track]);\n\n let muted = undefined;\n if (peer && track) {\n muted = peer.isLocal ? !track.enabled : track.volume === 0;\n }\n\n return { peer, track, muted, onToggle: handleMute };\n};\n", "import React from 'react';\nimport { useMedia } from 'react-use';\nimport { config as cssConfig, Flex } from '../../../';\nimport { EmojiReaction } from '../EmojiReaction';\nimport { LeaveRoom } from '../LeaveRoom';\nimport MetaActions from '../MetaActions';\nimport { SpeakerTag } from './HeaderComponents';\nimport { ParticipantCount } from './ParticipantList';\nimport { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';\n\nexport const StreamingHeader = () => {\n const isMobile = useMedia(cssConfig.media.md);\n return (\n <Flex justify=\"between\" align=\"center\" css={{ position: 'relative', height: '100%' }}>\n <Flex\n align=\"center\"\n css={{\n position: 'absolute',\n left: '$10',\n }}\n >\n {isMobile ? (\n <Flex align=\"center\" gap={2}>\n <LeaveRoom />\n <LiveStatus />\n <RecordingStatus />\n </Flex>\n ) : null}\n <SpeakerTag />\n </Flex>\n\n <Flex\n align=\"center\"\n css={{\n position: 'absolute',\n right: '$10',\n gap: '$4',\n }}\n >\n {isMobile ? (\n <>\n <EmojiReaction />\n <MetaActions compact />\n </>\n ) : (\n <Flex css={{ gap: '$4' }}>\n <StreamActions />\n </Flex>\n )}\n <ParticipantCount />\n </Flex>\n </Flex>\n );\n};\n", "import React, { Fragment, useCallback, useMemo, useState } from 'react';\nimport data from '@emoji-mart/data/sets/14/apple.json';\nimport { init } from 'emoji-mart';\nimport {\n selectAvailableRoleNames,\n selectIsConnectedToRoom,\n selectLocalPeerID,\n selectLocalPeerRoleName,\n useCustomEvent,\n useHMSActions,\n useHMSStore,\n useRecordingStreaming,\n} from '@100mslive/react-sdk';\nimport { EmojiIcon } from '@100mslive/react-icons';\nimport { Dropdown } from '../../Dropdown';\nimport { Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport { styled } from '../../Theme';\nimport { Tooltip } from '../../Tooltip';\nimport IconButton from '../IconButton';\nimport { useHLSViewerRole } from './AppData/useUISettings';\nimport { useDropdownList } from './hooks/useDropdownList';\nimport { useIsFeatureEnabled } from './hooks/useFeatures';\nimport { EMOJI_REACTION_TYPE, FEATURE_LIST, HLS_TIMED_METADATA_DOC_URL } from '../common/constants';\n\ninit({ data });\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 EmojiReaction = () => {\n const [open, setOpen] = useState(false);\n const hmsActions = useHMSActions();\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const roles = useHMSStore(selectAvailableRoleNames);\n const localPeerRole = useHMSStore(selectLocalPeerRoleName);\n const localPeerId = useHMSStore(selectLocalPeerID);\n const hlsViewerRole = useHLSViewerRole();\n const { isStreamingOn } = useRecordingStreaming();\n const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.EMOJI_REACTION);\n const filteredRoles = useMemo(() => roles.filter(role => role !== hlsViewerRole), [roles, hlsViewerRole]);\n useDropdownList({ open: open, name: 'EmojiReaction' });\n\n const onEmojiEvent = useCallback(data => {\n window.showFlyingEmoji(data?.emojiId, data?.senderId);\n }, []);\n\n const { sendEvent } = useCustomEvent({\n type: EMOJI_REACTION_TYPE,\n onEvent: onEmojiEvent,\n });\n\n const sendReaction = async emojiId => {\n const data = {\n type: EMOJI_REACTION_TYPE,\n emojiId: emojiId,\n senderId: localPeerId,\n };\n sendEvent(data, { roleNames: filteredRoles });\n if (isStreamingOn) {\n await hmsActions.sendHLSTimedMetadata([\n {\n payload: JSON.stringify(data),\n duration: 2,\n },\n ]);\n }\n };\n\n if (!isConnected || localPeerRole === hlsViewerRole || !isFeatureEnabled) {\n return null;\n }\n return (\n <Fragment>\n <Dropdown.Root open={open} onOpenChange={setOpen}>\n <Dropdown.Trigger asChild data-testid=\"emoji_reaction_btn\">\n <IconButton>\n <Tooltip title=\"Emoji reaction\">\n <EmojiIcon />\n </Tooltip>\n </IconButton>\n </Dropdown.Trigger>\n <Dropdown.Content sideOffset={5} align=\"center\" css={{ p: '$8', bg: '$surface_default' }}>\n {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 <div style={{ textAlign: 'center' }}>\n <Text\n variant=\"sm\"\n inline={true}\n css={{\n color: '$on_primary_medium',\n }}\n >\n Reactions will be timed for Live Streaming viewers.{' '}\n </Text>\n <Text\n variant=\"sm\"\n inline={true}\n css={{\n color: '$primary_bright',\n fontWeight: '$semiBold',\n }}\n >\n <a\n href={HLS_TIMED_METADATA_DOC_URL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n style={{ color: 'inherit', textDecoration: 'none' }}\n >\n Learn more.\n </a>\n </Text>\n </div>\n </Dropdown.Content>\n </Dropdown.Root>\n </Fragment>\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", "import { useEffect } from 'react';\nimport { useSetAppDataByKey } from '../AppData/useUISettings';\nimport { APP_DATA } from '../../common/constants';\n\nexport const useDropdownList = ({ name, open }) => {\n const [dropdownList = [], setDropdownList] = useSetAppDataByKey(APP_DATA.dropdownList);\n\n useEffect(() => {\n if (open) {\n if (!dropdownList.includes(name)) {\n setDropdownList([...dropdownList, name]);\n }\n } else {\n const index = dropdownList.indexOf(name);\n if (index >= 0) {\n const newDropdownList = [...dropdownList];\n newDropdownList.splice(index, 1);\n setDropdownList(newDropdownList);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, name]);\n};\n", "import React, { Fragment, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { selectIsConnectedToRoom, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';\nimport { AlertTriangleIcon, ExitIcon, HangUpIcon, VerticalMenuIcon } from '@100mslive/react-icons';\nimport { ToastManager } from './Toast/ToastManager';\nimport { Button } from '../../Button';\nimport { Dropdown } from '../../Dropdown';\nimport { IconButton } from '../../IconButton';\nimport { Box, Flex } from '../../Layout';\nimport { Dialog } from '../../Modal';\nimport { Text } from '../../Text';\nimport { styled } from '../../Theme';\nimport { Tooltip } from '../../Tooltip';\nimport { useHMSPrebuiltContext } from '../AppContext';\nimport { DialogCheckbox, DialogContent, DialogRow } from '../primitives/DialogContent';\nimport { useDropdownList } from './hooks/useDropdownList';\nimport { useNavigation } from './hooks/useNavigation';\nimport { isStreamingKit } from '../common/utils';\n\nexport const LeaveRoom = () => {\n const navigate = useNavigation();\n const params = useParams();\n const [open, setOpen] = useState(false);\n const [showEndRoomModal, setShowEndRoomModal] = useState(false);\n const [lockRoom, setLockRoom] = useState(false);\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const permissions = useHMSStore(selectPermissions);\n const hmsActions = useHMSActions();\n const { showLeave, onLeave } = useHMSPrebuiltContext();\n useDropdownList({ open, name: 'LeaveRoom' });\n\n const redirectToLeavePage = () => {\n if (showLeave) {\n if (params.role) {\n navigate('/leave/' + params.roomId + '/' + params.role);\n } else {\n navigate('/leave/' + params.roomId);\n }\n }\n ToastManager.clearAllToast();\n onLeave?.();\n };\n\n const leaveRoom = () => {\n hmsActions.leave();\n redirectToLeavePage();\n };\n\n const endRoom = () => {\n hmsActions.endRoom(lockRoom, 'End Room');\n redirectToLeavePage();\n };\n\n const isStreamKit = isStreamingKit();\n if (!permissions || !isConnected) {\n return null;\n }\n\n return (\n <Fragment>\n {permissions.endRoom ? (\n <Flex>\n <LeaveIconButton\n variant=\"danger\"\n key=\"LeaveRoom\"\n data-testid=\"leave_room_btn\"\n css={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}\n onClick={leaveRoom}\n >\n <Tooltip title=\"Leave Room\">\n {!isStreamKit ? (\n <Box>\n <HangUpIcon key=\"hangUp\" />\n </Box>\n ) : (\n <Flex gap={2}>\n <Box css={{ '@md': { transform: 'rotate(180deg)' } }}>\n <ExitIcon key=\"hangUp\" />\n </Box>\n <Text css={{ '@md': { display: 'none' }, color: 'inherit' }} variant=\"button\">\n Leave Studio\n </Text>\n </Flex>\n )}\n </Tooltip>\n </LeaveIconButton>\n <Dropdown.Root open={open} onOpenChange={setOpen}>\n <Dropdown.Trigger\n asChild\n css={{\n '&[data-state=\"open\"]': {\n bg: '$alert_error_dim',\n },\n }}\n >\n <MenuTriggerButton variant=\"danger\" data-testid=\"leave_end_dropdown_trigger\">\n <VerticalMenuIcon />\n </MenuTriggerButton>\n </Dropdown.Trigger>\n <Dropdown.Content css={{ p: 0 }} alignOffset={-50} sideOffset={10}>\n <Dropdown.Item\n css={{ w: '100%', bg: 'rgba(178, 71, 81, 0.1)' }}\n onClick={() => {\n setShowEndRoomModal(true);\n }}\n data-testid=\"end_room_btn\"\n >\n <Flex gap={4}>\n <Box css={{ color: '$alert_error_default' }}>\n <AlertTriangleIcon />\n </Box>\n <Flex direction=\"column\" align=\"start\">\n <Text variant=\"lg\" css={{ c: '$alert_error_default' }}>\n End Room for All\n </Text>\n <Text variant=\"sm\" css={{ c: '$on_surface_medium', mt: '$2' }}>\n Warning: You can\u2019t undo this action\n </Text>\n </Flex>\n </Flex>\n </Dropdown.Item>\n <Dropdown.Item css={{ bg: '$surface_default' }} onClick={leaveRoom} data-testid=\"just_leave_btn\">\n <Flex gap={4}>\n <Box>\n <ExitIcon />\n </Box>\n <Flex direction=\"column\" align=\"start\">\n <Text variant=\"lg\">Leave {isStreamKit ? 'Studio' : 'Room'}</Text>\n <Text variant=\"sm\" css={{ c: '$on_surface_medium', mt: '$2' }}>\n You can always rejoin later\n </Text>\n </Flex>\n </Flex>\n </Dropdown.Item>\n </Dropdown.Content>\n </Dropdown.Root>\n </Flex>\n ) : (\n <LeaveIconButton onClick={leaveRoom} variant=\"danger\" key=\"LeaveRoom\" data-testid=\"leave_room_btn\">\n <Tooltip title=\"Leave Room\">\n <Box>\n {isStreamKit ? (\n <Box css={{ '@md': { transform: 'rotate(180deg)' } }}>\n <ExitIcon />\n </Box>\n ) : (\n <HangUpIcon key=\"hangUp\" />\n )}\n </Box>\n </Tooltip>\n </LeaveIconButton>\n )}\n\n <Dialog.Root\n open={showEndRoomModal}\n onOpenChange={value => {\n if (!value) {\n setLockRoom(false);\n }\n setShowEndRoomModal(value);\n }}\n >\n <DialogContent title=\"End Room\" Icon={HangUpIcon}>\n <DialogCheckbox id=\"lockRoom\" title=\"Disable future joins\" value={lockRoom} onChange={setLockRoom} />\n <DialogRow justify=\"end\">\n <Button variant=\"danger\" onClick={endRoom} data-testid=\"lock_end_room\">\n End Room\n </Button>\n </DialogRow>\n </DialogContent>\n </Dialog.Root>\n </Fragment>\n );\n};\n\nconst LeaveIconButton = styled(IconButton, {\n color: '$on_primary_high',\n h: '$14',\n px: '$8',\n r: '$1',\n bg: '$alert_error_default',\n '&:not([disabled]):hover': {\n bg: '$alert_error_default',\n },\n '&:not([disabled]):active': {\n bg: '$alert_error_default',\n },\n '@md': {\n px: '$4',\n mx: 0,\n },\n});\n\nconst MenuTriggerButton = styled(LeaveIconButton, {\n borderLeft: '1px solid $alert_error_dim',\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n px: '$3',\n '@md': {\n px: '$2',\n },\n});\n", "import React from 'react';\nimport { selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';\nimport { BrbIcon, HandIcon } from '@100mslive/react-icons';\nimport { Flex } from '../../Layout';\nimport { Tooltip } from '../../Tooltip';\nimport IconButton from '../IconButton';\nimport { useIsFeatureEnabled } from './hooks/useFeatures';\nimport { useMyMetadata } from './hooks/useMetadata';\nimport { FEATURE_LIST } from '../common/constants';\n\nconst MetaActions = ({ isMobile = false, compact = false }) => {\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata();\n const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE);\n const isBRBEnabled = useIsFeatureEnabled(FEATURE_LIST.BRB);\n\n if (!isConnected || (!isHandRaiseEnabled && !isBRBEnabled)) {\n return null;\n }\n\n return (\n <Flex align=\"center\" css={{ gap: compact ? '$4' : '$8' }}>\n {isHandRaiseEnabled && (\n <Tooltip title={`${!isHandRaised ? 'Raise' : 'Unraise'} hand`}>\n <IconButton\n onClick={toggleHandRaise}\n active={!isHandRaised}\n data-testid={isMobile ? 'raise_hand_btn_mobile' : 'raise_hand_btn'}\n >\n <HandIcon />\n </IconButton>\n </Tooltip>\n )}\n {isBRBEnabled && (\n <Tooltip title={isBRBOn ? `I'm back` : `I'll be right back`}>\n <IconButton onClick={toggleBRB} active={!isBRBOn} data-testid=\"brb_btn\">\n <BrbIcon />\n </IconButton>\n </Tooltip>\n )}\n </Flex>\n );\n};\n\nexport default MetaActions;\n", "import React from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useSearchParam } from 'react-use';\nimport { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';\nimport { Box, Flex } from '../../../';\nimport SidePane from '../../layouts/SidePane';\nimport FullPageProgress from '../FullPageProgress';\nimport { Header } from '../Header';\nimport PreviewJoin from './PreviewJoin';\nimport { useAuthToken } from '../AppData/useUISettings';\nimport { useNavigation } from '../hooks/useNavigation';\nimport { useSkipPreview } from '../hooks/useSkipPreview';\nimport { QUERY_PARAM_NAME, QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';\n\nconst PreviewContainer = () => {\n const navigate = useNavigation();\n const skipPreview = useSkipPreview();\n const previewAsRole = useSearchParam(QUERY_PARAM_PREVIEW_AS_ROLE);\n const initialName = useSearchParam(QUERY_PARAM_NAME) || (skipPreview ? 'Beam' : '');\n const { roomId: urlRoomId, role: userRole } = useParams(); // from the url\n const authToken = useAuthToken();\n\n const roomState = useHMSStore(selectRoomState);\n const isPreview = roomState === HMSRoomState.Preview;\n\n const onJoin = () => {\n let meetingURL = `/meeting/${urlRoomId}`;\n if (userRole) {\n meetingURL += `/${userRole}`;\n }\n navigate(meetingURL);\n };\n return (\n <Flex direction=\"column\" css={{ size: '100%' }}>\n {isPreview ? null : (\n <Box css={{ h: '$18', '@md': { h: '$17', flexShrink: 0 } }} data-testid=\"header\">\n <Header />\n </Box>\n )}\n <Flex\n css={{ flex: '1 1 0', position: 'relative', overflowY: 'auto', color: '$primary_default' }}\n justify=\"center\"\n align=\"center\"\n >\n {authToken ? (\n <PreviewJoin initialName={initialName} skipPreview={skipPreview} asRole={previewAsRole} onJoin={onJoin} />\n ) : (\n <FullPageProgress />\n )}\n <SidePane\n css={{\n position: 'unset',\n mr: '$10',\n '@lg': { position: 'fixed', mr: '$0' },\n }}\n />\n </Flex>\n </Flex>\n );\n};\n\nexport default PreviewContainer;\n", "import React from 'react';\nimport { selectAppData, useHMSStore } from '@100mslive/react-sdk';\nimport { Chat } from '../components/Chat/Chat';\nimport { ParticipantList } from '../components/Header/ParticipantList';\nimport { StreamingLanding } from '../components/Streaming/StreamingLanding';\nimport { Box } from '../../Layout';\nimport { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';\n\nconst SidePane = ({ css = {} }) => {\n const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));\n let ViewComponent;\n if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS) {\n ViewComponent = ParticipantList;\n } else if (sidepane === SIDE_PANE_OPTIONS.CHAT) {\n ViewComponent = Chat;\n } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {\n ViewComponent = StreamingLanding;\n }\n if (!ViewComponent) {\n return null;\n }\n return (\n <Box\n css={{\n position: 'absolute',\n w: '$100',\n h: '100%',\n p: '$10',\n bg: '$surface_default',\n r: '$1',\n top: 0,\n right: '$10',\n zIndex: 10,\n boxShadow: '$md',\n ...css,\n '@lg': {\n w: '100%',\n right: 0,\n position: 'fixed',\n bottom: 0,\n height: 'unset',\n ...(css['@lg'] || {}),\n },\n }}\n >\n <ViewComponent />\n </Box>\n );\n};\n\nexport default SidePane;\n", "import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n HMSNotificationTypes,\n selectHMSMessagesCount,\n selectPeerNameByID,\n selectPermissions,\n selectSessionStore,\n useHMSActions,\n useHMSNotifications,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { ChevronDownIcon, CrossIcon, PinIcon } from '@100mslive/react-icons';\nimport { Button } from '../../../Button';\nimport { Box, Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport IconButton from '../../IconButton';\nimport { AnnotisedMessage, ChatBody } from './ChatBody';\nimport { ChatFooter } from './ChatFooter';\nimport { ChatHeader } from './ChatHeader';\nimport { useSetSubscribedChatSelector } from '../AppData/useUISettings';\nimport { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';\nimport { useUnreadCount } from './useUnreadCount';\nimport { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';\n\nconst PinnedMessage = ({ clearPinnedMessage }) => {\n const permissions = useHMSStore(selectPermissions);\n const pinnedMessage = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGE));\n\n return pinnedMessage ? (\n <Flex\n css={{ p: '$8', color: '$on_surface_medium', bg: '$surface_bright', r: '$1' }}\n align=\"center\"\n justify=\"between\"\n >\n <Box>\n <PinIcon />\n </Box>\n <Box\n css={{\n ml: '$8',\n color: '$on_surface_medium',\n w: '100%',\n maxHeight: '$18',\n overflowY: 'auto',\n }}\n >\n <Text variant=\"sm\">\n <AnnotisedMessage message={pinnedMessage} />\n </Text>\n </Box>\n {permissions.removeOthers && (\n <IconButton onClick={() => clearPinnedMessage()}>\n <CrossIcon />\n </IconButton>\n )}\n </Flex>\n ) : null;\n};\n\nexport const Chat = () => {\n const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);\n const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);\n const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);\n const peerName = useHMSStore(selectPeerNameByID(peerSelector));\n const [chatOptions, setChatOptions] = useState({\n role: roleSelector || '',\n peerId: peerSelector && peerName ? peerSelector : '',\n selection: roleSelector ? roleSelector : peerSelector && peerName ? peerName : 'Everyone',\n });\n const [isSelectorOpen, setSelectorOpen] = useState(false);\n const listRef = useRef(null);\n const hmsActions = useHMSActions();\n const { setPinnedMessage } = useSetPinnedMessage();\n useEffect(() => {\n if (notification && notification.data && peerSelector === notification.data.id) {\n setPeerSelector('');\n setChatOptions({\n role: '',\n peerId: '',\n selection: 'Everyone',\n });\n }\n }, [notification, peerSelector, setPeerSelector]);\n\n const storeMessageSelector = selectHMSMessagesCount;\n\n const messagesCount = useHMSStore(storeMessageSelector) || 0;\n const scrollToBottom = useCallback(\n (unreadCount = 0) => {\n if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {\n listRef.current?.scrollToItem(messagesCount, 'end');\n requestAnimationFrame(() => {\n listRef.current?.scrollToItem(messagesCount, 'end');\n });\n hmsActions.setMessageRead(true);\n }\n },\n [hmsActions, messagesCount],\n );\n\n return (\n <Flex direction=\"column\" css={{ size: '100%' }}>\n <ChatHeader\n selectorOpen={isSelectorOpen}\n selection={chatOptions.selection}\n onSelect={({ role, peerId, selection }) => {\n setChatOptions({\n role,\n peerId,\n selection,\n });\n setPeerSelector(peerId);\n setRoleSelector(role);\n }}\n role={chatOptions.role}\n peerId={chatOptions.peerId}\n onToggle={() => {\n setSelectorOpen(value => !value);\n }}\n />\n <PinnedMessage clearPinnedMessage={setPinnedMessage} />\n\n <ChatBody role={chatOptions.role} peerId={chatOptions.peerId} ref={listRef} scrollToBottom={scrollToBottom} />\n <ChatFooter role={chatOptions.role} peerId={chatOptions.peerId} onSend={() => scrollToBottom(1)}>\n {!isSelectorOpen && (\n <NewMessageIndicator role={chatOptions.role} peerId={chatOptions.peerId} scrollToBottom={scrollToBottom} />\n )}\n </ChatFooter>\n </Flex>\n );\n};\n\nconst NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {\n const unreadCount = useUnreadCount({ role, peerId });\n if (!unreadCount) {\n return null;\n }\n return (\n <Flex\n justify=\"center\"\n css={{\n width: '100%',\n left: 0,\n bottom: '100%',\n position: 'absolute',\n }}\n >\n <Button\n onClick={() => {\n scrollToBottom(unreadCount);\n }}\n css={{ p: '$2 $4', '& > svg': { ml: '$4' } }}\n >\n New Messages\n <ChevronDownIcon width={16} height={16} />\n </Button>\n </Flex>\n );\n};\n", "import React, { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { useInView } from 'react-intersection-observer';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { VariableSizeList } from 'react-window';\nimport {\n selectHMSMessages,\n selectLocalPeerID,\n selectLocalPeerRoleName,\n selectMessagesByPeerID,\n selectMessagesByRole,\n selectPeerNameByID,\n selectPermissions,\n useHMSActions,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { HorizontalMenuIcon, PinIcon } from '@100mslive/react-icons';\nimport { Dropdown } from '../../../Dropdown';\nimport { IconButton } from '../../../IconButton';\nimport { Box, Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport { styled } from '../../../Theme';\nimport { Tooltip } from '../../../Tooltip';\nimport { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';\n\nconst formatTime = date => {\n if (!(date instanceof Date)) {\n return '';\n }\n let hours = date.getHours();\n let mins = date.getMinutes();\n const suffix = hours > 11 ? 'PM' : 'AM';\n if (hours < 10) {\n hours = '0' + hours;\n }\n if (mins < 10) {\n mins = '0' + mins;\n }\n return `${hours}:${mins} ${suffix}`;\n};\n\nconst MessageTypeContainer = ({ left, right }) => {\n return (\n <Flex\n align=\"center\"\n css={{\n ml: 'auto',\n mr: '$4',\n p: '$2 $4',\n border: '1px solid $on_surface_low',\n r: '$0',\n }}\n >\n {left && (\n <SenderName variant=\"tiny\" as=\"span\" css={{ color: '$on_surface_medium' }}>\n {left}\n </SenderName>\n )}\n {left && right && <Box css={{ borderLeft: '1px solid $on_surface_low', mx: '$4', h: '$8' }} />}\n {right && (\n <SenderName as=\"span\" variant=\"tiny\">\n {right}\n </SenderName>\n )}\n </Flex>\n );\n};\n\nconst MessageType = ({ roles, hasCurrentUserSent, receiver }) => {\n const peerName = useHMSStore(selectPeerNameByID(receiver));\n const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);\n if (receiver) {\n return (\n <MessageTypeContainer\n left={hasCurrentUserSent ? `${peerName ? `TO ${peerName}` : ''}` : 'TO YOU'}\n right=\"PRIVATE\"\n />\n );\n }\n\n if (roles && roles.length) {\n return <MessageTypeContainer left=\"TO\" right={hasCurrentUserSent ? roles.join(',') : localPeerRoleName} />;\n }\n return null;\n};\n\nconst URL_REGEX =\n /^https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;\n\nconst Link = styled('a', {\n color: '$primary_default',\n wordBreak: 'break-word',\n '&:hover': {\n textDecoration: 'underline',\n },\n});\n\nexport const AnnotisedMessage = ({ message }) => {\n if (!message) {\n return <Fragment />;\n }\n\n return (\n <Fragment>\n {message\n .trim()\n .split(/(\\s)/)\n .map(part =>\n URL_REGEX.test(part) ? (\n <Link href={part} key={part} target=\"_blank\" rel=\"noopener noreferrer\">\n {part}\n </Link>\n ) : (\n part\n ),\n )}\n </Fragment>\n );\n};\n\nconst getMessageType = ({ roles, receiver }) => {\n if (roles && roles.length > 0) {\n return 'role';\n }\n return receiver ? 'private' : '';\n};\n\nconst ChatActions = ({ onPin }) => {\n const [open, setOpen] = useState(false);\n\n return (\n <Dropdown.Root open={open} onOpenChange={setOpen}>\n <Dropdown.Trigger asChild>\n <IconButton>\n <Tooltip title=\"More options\">\n <HorizontalMenuIcon />\n </Tooltip>\n </IconButton>\n </Dropdown.Trigger>\n <Dropdown.Portal>\n <Dropdown.Content\n sideOffset={5}\n align=\"end\"\n css={{ width: '$48', backgroundColor: '$surface_bright', py: '$0' }}\n >\n <Dropdown.Item data-testid=\"pin_message_btn\" onClick={onPin}>\n <PinIcon />\n <Text variant=\"sm\" css={{ ml: '$4' }}>\n Pin Message\n </Text>\n </Dropdown.Item>\n </Dropdown.Content>\n </Dropdown.Portal>\n </Dropdown.Root>\n );\n};\n\nconst SenderName = styled(Text, {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n maxWidth: '24ch',\n minWidth: 0,\n});\n\nconst ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPin }) => {\n const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });\n const rowRef = useRef(null);\n useEffect(() => {\n if (rowRef.current) {\n setRowHeight(index, rowRef.current.clientHeight);\n }\n }, [index, setRowHeight]);\n\n const hmsActions = useHMSActions();\n const localPeerId = useHMSStore(selectLocalPeerID);\n const permissions = useHMSStore(selectPermissions);\n const messageType = getMessageType({\n roles: message.recipientRoles,\n receiver: message.recipientPeer,\n });\n // show pin action only if peer has remove others permission and the message is of broadcast type\n const showPinAction = permissions.removeOthers && !messageType;\n\n useEffect(() => {\n if (message.id && !message.read && inView) {\n hmsActions.setMessageRead(true, message.id);\n }\n }, [message.read, hmsActions, inView, message.id]);\n\n return (\n <Box ref={ref} as=\"div\" css={{ mb: '$10', pr: '$10' }} style={style}>\n <Flex\n ref={rowRef}\n align=\"center\"\n css={{\n flexWrap: 'wrap',\n bg: messageType ? '$surface_bright' : undefined,\n r: messageType ? '$1' : undefined,\n px: messageType ? '$4' : '$2',\n py: messageType ? '$4' : 0,\n userSelect: 'none',\n }}\n key={message.time}\n data-testid=\"chat_msg\"\n >\n <Text\n css={{\n color: '$on_surface_high',\n fontWeight: '$semiBold',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n width: '100%',\n }}\n as=\"div\"\n >\n <Flex align=\"center\">\n {message.senderName === 'You' || !message.senderName ? (\n <SenderName as=\"span\">{message.senderName || 'Anonymous'}</SenderName>\n ) : (\n <Tooltip title={message.senderName} side=\"top\" align=\"start\">\n <SenderName as=\"span\">{message.senderName}</SenderName>\n </Tooltip>\n )}\n <Text\n as=\"span\"\n variant=\"sm\"\n css={{\n ml: '$4',\n color: '$on_primary_medium',\n flexShrink: 0,\n }}\n >\n {formatTime(message.time)}\n </Text>\n </Flex>\n <MessageType\n hasCurrentUserSent={message.sender === localPeerId}\n receiver={message.recipientPeer}\n roles={message.recipientRoles}\n />\n {showPinAction && <ChatActions onPin={onPin} />}\n </Text>\n <Text\n variant=\"body2\"\n css={{\n w: '100%',\n mt: '$2',\n wordBreak: 'break-word',\n whiteSpace: 'pre-wrap',\n userSelect: 'all',\n }}\n onClick={e => e.stopPropagation()}\n >\n <AnnotisedMessage message={message.message} />\n </Text>\n </Flex>\n </Box>\n );\n});\nconst ChatList = React.forwardRef(\n ({ width, height, setRowHeight, getRowHeight, messages, scrollToBottom }, listRef) => {\n const { setPinnedMessage } = useSetPinnedMessage();\n useLayoutEffect(() => {\n if (listRef.current && listRef.current.scrollToItem) {\n scrollToBottom(1);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [listRef]);\n\n return (\n <VariableSizeList\n ref={listRef}\n itemCount={messages.length}\n itemSize={getRowHeight}\n width={width}\n height={height - 1}\n style={{\n overflowX: 'hidden',\n }}\n >\n {({ index, style }) => (\n <ChatMessage\n style={style}\n index={index}\n key={messages[index].id}\n message={messages[index]}\n setRowHeight={setRowHeight}\n onPin={() => setPinnedMessage(messages[index])}\n />\n )}\n </VariableSizeList>\n );\n },\n);\nconst VirtualizedChatMessages = React.forwardRef(({ messages, scrollToBottom }, listRef) => {\n const rowHeights = useRef({});\n\n function getRowHeight(index) {\n // 72 will be default row height for any message length\n // 16 will add margin value as clientHeight don't include margin\n return rowHeights.current[index] + 16 || 72;\n }\n\n const setRowHeight = useCallback(\n (index, size) => {\n listRef.current.resetAfterIndex(0);\n rowHeights.current = { ...rowHeights.current, [index]: size };\n },\n [listRef],\n );\n\n return (\n <Box\n css={{\n mr: '-$10',\n h: '100%',\n }}\n as=\"div\"\n >\n <AutoSizer\n style={{\n width: '90%',\n }}\n >\n {({ height, width }) => (\n <ChatList\n width={width}\n height={height}\n messages={messages}\n setRowHeight={setRowHeight}\n getRowHeight={getRowHeight}\n scrollToBottom={scrollToBottom}\n ref={listRef}\n />\n )}\n </AutoSizer>\n </Box>\n );\n});\n\nexport const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {\n const storeMessageSelector = role\n ? selectMessagesByRole(role)\n : peerId\n ? selectMessagesByPeerID(peerId)\n : selectHMSMessages;\n const messages = useHMSStore(storeMessageSelector) || [];\n\n if (messages.length === 0) {\n return (\n <Flex\n css={{\n width: '100%',\n height: '100%',\n textAlign: 'center',\n px: '$4',\n }}\n align=\"center\"\n justify=\"center\"\n >\n <Text>There are no messages here</Text>\n </Flex>\n );\n }\n\n return (\n <Fragment>\n <VirtualizedChatMessages messages={messages} scrollToBottom={scrollToBottom} ref={listRef} />\n </Fragment>\n );\n});\n", "// @ts-check\nimport { useCallback } from 'react';\nimport {\n selectPeerNameByID,\n selectSessionMetadata,\n useHMSActions,\n useHMSStore,\n useHMSVanillaStore,\n} from '@100mslive/react-sdk';\nimport { ToastManager } from '../Toast/ToastManager';\nimport { SESSION_STORE_KEY } from '../../common/constants';\n\n/**\n * set pinned chat message by updating the session store\n */\nexport const useSetPinnedMessage = () => {\n const hmsActions = useHMSActions();\n const vanillaStore = useHMSVanillaStore();\n const pinnedMessage = useHMSStore(selectSessionMetadata);\n\n const setPinnedMessage = useCallback(\n /**\n * @param {import(\"@100mslive/react-sdk\").HMSMessage | undefined} message\n */\n async message => {\n const peerName = vanillaStore.getState(selectPeerNameByID(message?.sender)) || message?.senderName;\n const newPinnedMessage = message ? (peerName ? `${peerName}: ${message.message}` : message.message) : null;\n if (newPinnedMessage !== pinnedMessage) {\n await hmsActions.sessionStore\n .set(SESSION_STORE_KEY.PINNED_MESSAGE, newPinnedMessage)\n .catch(err => ToastManager.addToast({ title: err.description }));\n }\n },\n [hmsActions, vanillaStore, pinnedMessage],\n );\n\n return { setPinnedMessage };\n};\n", "import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { useHMSActions } from '@100mslive/react-sdk';\nimport { EmojiIcon, SendIcon } from '@100mslive/react-icons';\nimport { Box, Flex, IconButton, Popover, styled } from '../../../';\nimport { ToastManager } from '../Toast/ToastManager';\nimport { useChatDraftMessage } from '../AppData/useChatState';\nimport { useEmojiPickerStyles } from './useEmojiPickerStyles';\n\nconst TextArea = styled('textarea', {\n width: '100%',\n bg: 'transparent',\n color: '$on_primary_high',\n resize: 'none',\n lineHeight: '1rem',\n position: 'relative',\n fontFamily: '$sans',\n fontSize: '100%',\n margin: 0,\n padding: 0,\n top: '$3',\n '&:focus': {\n boxShadow: 'none',\n outline: 'none',\n },\n});\n\nfunction EmojiPicker({ onSelect }) {\n const [showEmoji, setShowEmoji] = useState(false);\n const ref = useEmojiPickerStyles(showEmoji);\n return (\n <Popover.Root open={showEmoji} onOpenChange={setShowEmoji}>\n <Popover.Trigger asChild css={{ appearance: 'none' }}>\n <IconButton as=\"div\">\n <EmojiIcon />\n </IconButton>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n alignOffset={-40}\n sideOffset={16}\n align=\"end\"\n css={{\n p: 0,\n }}\n >\n <Box\n css={{\n minWidth: 352,\n minHeight: 435,\n }}\n ref={ref}\n >\n <Picker onEmojiSelect={onSelect} data={data} previewPosition=\"none\" skinPosition=\"search\" />\n </Box>\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n );\n}\n\nexport const ChatFooter = ({ role, peerId, onSend, children }) => {\n const hmsActions = useHMSActions();\n const inputRef = useRef(null);\n const [draftMessage, setDraftMessage] = useChatDraftMessage();\n\n const sendMessage = useCallback(async () => {\n const message = inputRef.current.value;\n if (!message || !message.trim().length) {\n return;\n }\n try {\n if (role) {\n await hmsActions.sendGroupMessage(message, [role]);\n } else if (peerId) {\n await hmsActions.sendDirectMessage(message, peerId);\n } else {\n await hmsActions.sendBroadcastMessage(message);\n }\n inputRef.current.value = '';\n setTimeout(() => {\n onSend();\n }, 0);\n } catch (error) {\n ToastManager.addToast({ title: error.message });\n }\n }, [role, peerId, hmsActions, onSend]);\n\n useEffect(() => {\n const messageElement = inputRef.current;\n if (messageElement) {\n messageElement.value = draftMessage;\n }\n }, [draftMessage]);\n\n useEffect(() => {\n const messageElement = inputRef.current;\n return () => {\n setDraftMessage(messageElement?.value || '');\n };\n }, [setDraftMessage]);\n\n return (\n <Flex\n align=\"center\"\n css={{\n bg: '$surface_bright',\n minHeight: '$16',\n maxHeight: '$24',\n position: 'relative',\n py: '$6',\n pl: '$8',\n r: '$1',\n }}\n >\n {children}\n <TextArea\n placeholder=\"Write something here\"\n ref={inputRef}\n autoFocus\n onKeyPress={async event => {\n if (event.key === 'Enter') {\n if (!event.shiftKey) {\n event.preventDefault();\n await sendMessage();\n }\n }\n }}\n autoComplete=\"off\"\n aria-autocomplete=\"none\"\n onPaste={e => e.stopPropagation()}\n onCut={e => e.stopPropagation()}\n onCopy={e => e.stopPropagation()}\n />\n <EmojiPicker\n onSelect={emoji => {\n inputRef.current.value += ` ${emoji.native} `;\n }}\n />\n <IconButton\n onClick={sendMessage}\n css={{ ml: 'auto', height: 'max-content', mr: '$4' }}\n data-testid=\"send_msg_btn\"\n >\n <SendIcon />\n </IconButton>\n </Flex>\n );\n};\n", "import { useCallback } from 'react';\nimport { selectAppData, useHMSActions, useHMSStore } from '@100mslive/react-sdk';\nimport { APP_DATA } from '../../common/constants';\n\nexport const useChatDraftMessage = () => {\n const hmsActions = useHMSActions();\n let chatDraftMessage = useHMSStore(selectAppData(APP_DATA.chatDraft));\n if (chatDraftMessage === undefined || chatDraftMessage === null) {\n chatDraftMessage = '';\n }\n const setDraftMessage = useCallback(\n message => {\n hmsActions.setAppData(APP_DATA.chatDraft, message, true);\n },\n [hmsActions],\n );\n return [chatDraftMessage, setDraftMessage];\n};\n", "import { useEffect, useRef } from 'react';\n\nexport const useEmojiPickerStyles = showing => {\n const ref = useRef(null);\n useEffect(() => {\n if (showing) {\n setTimeout(() => {\n const root = ref.current?.querySelector('em-emoji-picker')?.shadowRoot;\n const style = document.createElement('style');\n style.textContent = `\n #root {\n --em-rgb-color: var(--hms-ui-colors-on_primary_high);\n --em-rgb-input: var(--hms-ui-colors-on_primary_high);\n --em-color-border: var(--hms-ui-colors-surface_default);\n --color-b: var(--hms-ui-colors-on_primary_high);\n --rgb-background: transparent;\n color: var(--hms-ui-colors-on_primary_high);\n font-family: var(--hms-ui-fonts-sans);\n }\n .sticky {\n background-color: var(--hms-ui-colors-surface_bright);\n }\n `;\n root?.appendChild(style);\n }, 0);\n }\n }, [showing]);\n\n return ref;\n};\n", "import React, { useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@100mslive/react-icons';\nimport { Box, Dropdown, Flex, IconButton, Text, textEllipsis } from '../../../';\nimport { ChatSelector } from './ChatSelector';\nimport { useSidepaneToggle } from '../AppData/useSidepane';\nimport { SIDE_PANE_OPTIONS } from '../../common/constants';\n\nexport const ChatHeader = React.memo(({ selection, selectorOpen, onToggle, onSelect, role, peerId }) => {\n const [open, setOpen] = useState(false);\n const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);\n return (\n <Flex\n onClick={onToggle}\n align=\"center\"\n css={{\n color: '$on_primary_high',\n h: '$16',\n mb: '$2',\n }}\n >\n <Text variant=\"h6\">Chat </Text>\n <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>\n <Dropdown.Trigger\n asChild\n data-testid=\"participant_list_filter\"\n css={{\n border: '1px solid $on_surface_low',\n r: '$0',\n p: '$2 $4',\n ml: '$8',\n }}\n tabIndex={0}\n >\n <Flex align=\"center\">\n <Text variant=\"sm\" css={{ ...textEllipsis(80) }}>\n {selection}\n </Text>\n <Box css={{ ml: '$2', color: '$on_surface_low' }}>\n {open ? <ChevronUpIcon width={14} height={14} /> : <ChevronDownIcon width={14} height={14} />}\n </Box>\n </Flex>\n </Dropdown.Trigger>\n <Dropdown.Content\n css={{\n w: '$64',\n overflow: 'hidden',\n maxHeight: 'unset',\n }}\n align=\"start\"\n sideOffset={8}\n >\n <ChatSelector onSelect={onSelect} role={role} peerId={peerId} />\n </Dropdown.Content>\n </Dropdown.Root>\n <IconButton\n css={{ ml: 'auto' }}\n onClick={e => {\n e.stopPropagation();\n selectorOpen ? onToggle() : toggleChat();\n }}\n data-testid=\"close_chat\"\n >\n <CrossIcon />\n </IconButton>\n </Flex>\n );\n});\n", "import React, { Fragment, useMemo, useState } from 'react';\nimport { useMeasure } from 'react-use';\nimport { FixedSizeList } from 'react-window';\nimport {\n selectMessagesUnreadCountByPeerID,\n selectMessagesUnreadCountByRole,\n selectRemotePeers,\n selectUnreadHMSMessagesCount,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { CheckIcon } from '@100mslive/react-icons';\nimport { Box, Dropdown, Flex, HorizontalDivider, Text, Tooltip } from '../../../';\nimport { ParticipantSearch } from '../Header/ParticipantList';\nimport { useFilteredRoles } from '../../common/hooks';\n\nconst ChatDotIcon = () => {\n return <Box css={{ size: '$6', bg: '$primary_default', mx: '$2', r: '$round' }} />;\n};\n\nconst SelectorItem = ({ value, active, onClick, unreadCount }) => {\n return (\n <Dropdown.Item data-testid=\"chat_members\" css={{ align: 'center', px: '$10' }} onClick={onClick}>\n <Text variant=\"sm\">{value}</Text>\n <Flex align=\"center\" css={{ ml: 'auto', color: '$on_primary_high' }}>\n {unreadCount > 0 && (\n <Tooltip title={`${unreadCount} unread`}>\n <Box css={{ mr: active ? '$3' : 0 }}>\n <ChatDotIcon />\n </Box>\n </Tooltip>\n )}\n {active && <CheckIcon width={16} height={16} />}\n </Flex>\n </Dropdown.Item>\n );\n};\n\nconst SelectorHeader = React.memo(({ children }) => {\n return (\n <Box css={{ flexShrink: 0 }}>\n <HorizontalDivider space={4} />\n <Text variant=\"md\" css={{ p: '$4 $10', fontWeight: '$semiBold' }}>\n {children}\n </Text>\n </Box>\n );\n});\n\nconst Everyone = React.memo(({ onSelect, active }) => {\n const unreadCount = useHMSStore(selectUnreadHMSMessagesCount);\n return (\n <SelectorItem\n value=\"Everyone\"\n active={active}\n unreadCount={unreadCount}\n onClick={() => {\n onSelect({ role: '', peerId: '', selection: 'Everyone' });\n }}\n />\n );\n});\n\nconst RoleItem = React.memo(({ onSelect, role, active }) => {\n const unreadCount = useHMSStore(selectMessagesUnreadCountByRole(role));\n return (\n <SelectorItem\n value={role}\n active={active}\n unreadCount={unreadCount}\n onClick={() => {\n onSelect({ role: role, selection: role });\n }}\n />\n );\n});\n\nconst PeerItem = ({ onSelect, peerId, name, active }) => {\n const unreadCount = useHMSStore(selectMessagesUnreadCountByPeerID(peerId));\n return (\n <SelectorItem\n value={name}\n active={active}\n unreadCount={unreadCount}\n onClick={() => {\n onSelect({ role: '', peerId, selection: name });\n }}\n />\n );\n};\n\nconst VirtualizedSelectItemList = ({ peers, selectedRole, selectedPeerId, searchValue, onSelect }) => {\n const [ref, { width, height }] = useMeasure();\n const roles = useFilteredRoles();\n const filteredPeers = useMemo(\n () =>\n peers.filter(\n // search should be empty or search phrase should be included in name\n peer => !searchValue || peer.name.toLowerCase().includes(searchValue.toLowerCase()),\n ),\n [peers, searchValue],\n );\n\n const listItems = useMemo(() => {\n const selectItems = [<Everyone onSelect={onSelect} active={!selectedRole && !selectedPeerId} />];\n\n roles.length > 0 && selectItems.push(<SelectorHeader>Roles</SelectorHeader>);\n roles.forEach(userRole =>\n selectItems.push(\n <RoleItem key={userRole} active={selectedRole === userRole} role={userRole} onSelect={onSelect} />,\n ),\n );\n\n filteredPeers.length > 0 && selectItems.push(<SelectorHeader>Participants</SelectorHeader>);\n filteredPeers.forEach(peer =>\n selectItems.push(\n <PeerItem\n key={peer.id}\n name={peer.name}\n peerId={peer.id}\n active={peer.id === selectedPeerId}\n onSelect={onSelect}\n />,\n ),\n );\n\n return selectItems;\n }, [onSelect, selectedRole, selectedPeerId, roles, filteredPeers]);\n\n return (\n <Dropdown.Group ref={ref} css={{ height: '$64', overflowY: 'auto' }}>\n <FixedSizeList itemSize={52} itemCount={listItems.length} width={width} height={height}>\n {({ index, style }) => (\n <div style={style} key={index}>\n {listItems[index]}\n </div>\n )}\n </FixedSizeList>\n </Dropdown.Group>\n );\n};\n\nexport const ChatSelector = ({ role, peerId, onSelect }) => {\n const peers = useHMSStore(selectRemotePeers);\n const [search, setSearch] = useState('');\n\n return (\n <Fragment>\n {peers.length > 0 && (\n <Box css={{ px: '$8' }}>\n <ParticipantSearch onSearch={setSearch} placeholder=\"Search participants\" />\n </Box>\n )}\n <VirtualizedSelectItemList\n selectedRole={role}\n selectedPeerId={peerId}\n onSelect={onSelect}\n peers={peers}\n searchValue={search}\n />\n </Fragment>\n );\n};\n", "import {\n selectMessagesUnreadCountByPeerID,\n selectMessagesUnreadCountByRole,\n selectUnreadHMSMessagesCount,\n useHMSStore,\n} from '@100mslive/react-sdk';\n\nexport const useUnreadCount = ({ role, peerId }) => {\n const unreadCountSelector = role\n ? selectMessagesUnreadCountByRole(role)\n : peerId\n ? selectMessagesUnreadCountByPeerID(peerId)\n : selectUnreadHMSMessagesCount;\n\n const unreadCount = useHMSStore(unreadCountSelector);\n return unreadCount;\n};\n", "import React, { Fragment, useState } from 'react';\nimport { selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';\nimport { ColoredHandIcon, CrossIcon, GoLiveIcon } from '@100mslive/react-icons';\nimport { Box, Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport IconButton from '../../IconButton';\nimport RTMPIcon from '../../images/rtmp.png';\nimport { StreamCard } from './Common';\nimport { HLSStreaming } from './HLSStreaming';\nimport { RTMPStreaming } from './RTMPStreaming';\nimport { useSidepaneToggle } from '../AppData/useSidepane';\nimport { SIDE_PANE_OPTIONS } from '../../common/constants';\n\nexport const StreamingLanding = () => {\n const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);\n const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();\n const permissions = useHMSStore(selectPermissions);\n const [showHLS, setShowHLS] = useState(isHLSRunning);\n const [showRTMP, setShowRTMP] = useState(isRTMPRunning);\n\n if (!permissions?.hlsStreaming && !permissions?.rtmpStreaming) {\n toggleStreaming();\n return null;\n }\n\n return (\n <Fragment>\n <Flex css={{ w: '100%', py: '$8' }}>\n <Box\n css={{\n alignSelf: 'center',\n p: '$4',\n bg: '$surface_bright',\n r: '$round',\n }}\n >\n <ColoredHandIcon width={40} height={40} />\n </Box>\n <Box css={{ flex: '1 1 0', mx: '$8' }}>\n <Text variant=\"sm\">Welcome !</Text>\n <Text variant=\"h6\">Let\u2019s get you started</Text>\n </Box>\n <IconButton onClick={toggleStreaming} css={{ alignSelf: 'flex-start' }} data-testid=\"close_streaming\">\n <CrossIcon />\n </IconButton>\n </Flex>\n <Text variant=\"tiny\" color=\"$on_surface_medium\">\n Start Streaming\n </Text>\n {permissions?.hlsStreaming && (\n <StreamCard\n testId=\"hls_stream\"\n title=\"Live Stream with HLS\"\n subtitle=\"Stream to millions, edit and control what the viewer sees and more!\"\n css={{ my: '$8' }}\n onClick={() => setShowHLS(true)}\n Icon={GoLiveIcon}\n />\n )}\n {permissions?.rtmpStreaming && (\n <StreamCard\n testId=\"rtmp_stream\"\n title=\"Stream live to Facebook, Twitch, and others\"\n subtitle=\"Stream to a specific destination directly from your app.\"\n css={{ my: '$8' }}\n onClick={() => {\n setShowRTMP(true);\n }}\n imgSrc={RTMPIcon}\n />\n )}\n {showHLS && <HLSStreaming onBack={() => setShowHLS(false)} />}\n {showRTMP && <RTMPStreaming onBack={() => setShowRTMP(false)} />}\n </Fragment>\n );\n};\n", "import React, { Fragment, useCallback, useEffect, useState } from 'react';\nimport { selectRoomID, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';\nimport {\n EndStreamIcon,\n EyeOpenIcon,\n GoLiveIcon,\n InfoIcon,\n LinkIcon,\n PeopleIcon,\n SupportIcon,\n WrenchIcon,\n} from '@100mslive/react-icons';\nimport { Box, Button, Flex, Loading, Text } from '../../../';\nimport { Container, ContentBody, ContentHeader, ErrorText, RecordStream } from './Common';\nimport { useSetAppDataByKey } from '../AppData/useUISettings';\nimport { useFilteredRoles } from '../../common/hooks';\nimport { APP_DATA } from '../../common/constants';\n\nconst getCardData = (roleName, roomId) => {\n let data = {};\n const formattedRoleName = roleName[0].toUpperCase() + roleName.slice(1);\n\n switch (roleName) {\n case 'broadcaster': {\n data = {\n title: formattedRoleName,\n content: 'Broadcasters can livestream audio or video, manage stream appearance and control the room via HLS.',\n icon: <SupportIcon />,\n };\n break;\n }\n case 'hls-viewer': {\n data = {\n title: 'HLS Viewer',\n content:\n 'Viewers can view and send chat messages, but need to be made broadcasters to participate with audio or video.',\n icon: <EyeOpenIcon />,\n };\n break;\n }\n default:\n data = {\n title: formattedRoleName,\n content: `${formattedRoleName} is customised with specific permissions, which will determine how it interacts with this room.`,\n icon: <WrenchIcon />,\n order: 1,\n };\n }\n data['link'] = `/${roomId}/${roleName}`;\n return data;\n};\n\nconst Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {\n const [copied, setCopied] = useState(false);\n return isHLSRunning ? (\n <Box\n key={title}\n css={{\n backgroundColor: '$surface_bright',\n padding: '$10',\n order,\n borderRadius: '$2',\n }}\n >\n <Flex align=\"center\" gap=\"2\" css={{ color: '$primary_bright' }}>\n {icon}\n <Text variant=\"h6\" css={{ fontWeight: '$semiBold' }}>\n {title}\n </Text>\n </Flex>\n <Text variant=\"sm\" css={{ color: '$on_surface_medium', mt: '$6' }}>\n {content}\n </Text>\n <Button\n variant=\"standard\"\n onClick={() => {\n navigator.clipboard.writeText(`${window.location.origin}${link}`);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }}\n css={{ w: '100%', r: '$1', mt: '$10', fontWeight: '$semiBold' }}\n icon\n >\n {copied ? (\n <>Link copied!</>\n ) : (\n <>\n <LinkIcon style={{ color: 'inherit' }} />\n Copy Invite Link\n </>\n )}\n </Button>\n </Box>\n ) : null;\n};\n\nexport const HLSStreaming = ({ onBack }) => {\n const roleNames = useFilteredRoles();\n const roomId = useHMSStore(selectRoomID);\n const cards = roleNames.map(roleName => getCardData(roleName, roomId));\n\n const { isHLSRunning } = useRecordingStreaming();\n const [showLinks, setShowLinks] = useState(false);\n return !showLinks ? (\n <Container rounded>\n <ContentHeader title=\"Start Streaming\" content=\"HLS\" onBack={onBack} />\n <ContentBody title=\"HLS Streaming\" Icon={GoLiveIcon} removeVerticalPadding>\n Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this\n platform.\n </ContentBody>\n {isHLSRunning ? <EndHLS setShowLinks={setShowLinks} /> : <StartHLS />}\n </Container>\n ) : (\n <Container rounded>\n <ContentHeader title=\"Invite People\" content=\"Start the conversation\" onBack={() => setShowLinks(false)} />\n\n <Flex direction=\"column\" css={{ gap: '$10', p: '$0 $10', overflowY: 'auto', mb: '$10' }}>\n {cards.map(card => (\n <Card key={card.title} {...card} isHLSRunning={isHLSRunning} />\n ))}\n </Flex>\n </Container>\n );\n};\n\nconst StartHLS = () => {\n const [record, setRecord] = useState(false);\n const [error, setError] = useState(false);\n const hmsActions = useHMSActions();\n const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);\n const startHLS = useCallback(\n async variants => {\n try {\n if (isHLSStarted) {\n return;\n }\n setHLSStarted(true);\n setError('');\n await hmsActions.startHLSStreaming({\n variants,\n recording: { hlsVod: record, singleFilePerLayer: record },\n });\n } catch (error) {\n setHLSStarted(false);\n setError(error.message);\n }\n },\n [hmsActions, record, isHLSStarted, setHLSStarted],\n );\n\n return (\n <Fragment>\n <RecordStream record={record} setRecord={setRecord} testId=\"hls-recording\" />\n <Box css={{ p: '$4 $10' }}>\n <ErrorText error={error} />\n <Button\n data-testid=\"start_hls\"\n css={{ w: '100%', r: '$0' }}\n icon\n onClick={() => startHLS()}\n disabled={isHLSStarted}\n >\n {isHLSStarted ? <Loading size={24} color=\"currentColor\" /> : <GoLiveIcon />}\n {isHLSStarted ? 'Starting stream...' : 'Go Live'}\n </Button>\n </Box>\n <Flex align=\"center\" css={{ p: '$4 $10' }}>\n <Text>\n <InfoIcon width={16} height={16} />\n </Text>\n <Text variant=\"tiny\" color=\"$on_surface_medium\" css={{ mx: '$8' }}>\n You cannot start recording once the stream starts, you will have to stop the stream to enable recording.\n </Text>\n </Flex>\n </Fragment>\n );\n};\n\nconst EndHLS = ({ setShowLinks }) => {\n const hmsActions = useHMSActions();\n\n const [inProgress, setInProgress] = useState(false);\n const [error, setError] = useState('');\n const { isHLSRunning } = useRecordingStreaming();\n\n useEffect(() => {\n if (inProgress && !isHLSRunning) {\n setInProgress(false);\n }\n }, [inProgress, isHLSRunning]);\n\n return (\n <Box css={{ p: '$4 $10' }}>\n <ErrorText error={error} />\n <Button\n data-testid=\"stop_hls\"\n variant=\"danger\"\n css={{ w: '100%', r: '$0', mt: '$8' }}\n icon\n loading={inProgress}\n disabled={inProgress}\n onClick={async () => {\n try {\n setInProgress(true);\n await hmsActions.stopHLSStreaming();\n } catch (error) {\n setError(error.message);\n setInProgress(false);\n }\n }}\n >\n <EndStreamIcon />\n End Stream\n </Button>\n <Button icon css={{ w: '100%', r: '$0', mt: '$8' }} onClick={() => setShowLinks(true)}>\n <PeopleIcon /> Invite People\n </Button>\n </Box>\n );\n};\n", "import React, { Fragment, Suspense, useCallback, useEffect, useState } from 'react';\nimport {\n HMSRoomState,\n selectIsLocalVideoEnabled,\n selectLocalPeer,\n selectRoomState,\n selectVideoTrackByID,\n useAVToggle,\n useHMSStore,\n useParticipants,\n usePreviewJoin,\n useRecordingStreaming,\n} from '@100mslive/react-sdk';\nimport { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';\nimport {\n Avatar,\n Box,\n Flex,\n flexCenter,\n styled,\n StyledVideoTile,\n Text,\n useBorderAudioLevel,\n useTheme,\n Video,\n} from '../../../';\nimport { useHMSPrebuiltContext } from '../../AppContext';\nimport IconButton from '../../IconButton';\nimport { useRoomLayout } from '../../provider/roomLayoutProvider';\nimport { AudioVideoToggle } from '../AudioVideoToggle';\nimport Chip from '../Chip';\nimport TileConnection from '../Connection/TileConnection';\nimport FullPageProgress from '../FullPageProgress';\nimport { Logo } from '../Header/HeaderComponents';\nimport SettingsModal from '../Settings/SettingsModal';\nimport PreviewForm from './PreviewForm';\nimport { useAuthToken, useUISettings } from '../AppData/useUISettings';\nimport { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';\nimport { UI_SETTINGS } from '../../common/constants';\n\nconst VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));\n\nconst getParticipantChipContent = (peerCount = 0) => {\n if (peerCount === 0) {\n return 'You are the first to join';\n }\n const formatter = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 });\n const formattedNum = formatter.format(peerCount);\n return `${formattedNum} other${parseInt(formattedNum) === 1 ? '' : 's'} in the session`;\n};\n\nconst PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {\n const [previewPreference, setPreviewPreference] = useUserPreferences(\n UserPreferencesKeys.PREVIEW,\n defaultPreviewPreference,\n );\n const { isStreamingOn } = useRecordingStreaming();\n const authToken = useAuthToken();\n const [name, setName] = useState(initialName || previewPreference.name);\n const { isLocalAudioEnabled, isLocalVideoEnabled, toggleAudio, toggleVideo } = useAVToggle();\n const [previewError, setPreviewError] = useState(false);\n const { endpoints } = useHMSPrebuiltContext();\n const { peerCount } = useParticipants();\n const { enableJoin, preview, join } = usePreviewJoin({\n name,\n token: authToken,\n initEndpoint: endpoints?.init,\n initialSettings: {\n isAudioMuted: skipPreview || previewPreference.isAudioMuted,\n isVideoMuted: skipPreview || previewPreference.isVideoMuted,\n speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],\n },\n captureNetworkQualityInPreview: true,\n handleError: (_, method) => {\n if (method === 'preview') {\n setPreviewError(true);\n }\n },\n asRole,\n });\n const roomState = useHMSStore(selectRoomState);\n\n const savePreferenceAndJoin = useCallback(() => {\n setPreviewPreference({\n name,\n isAudioMuted: !isLocalAudioEnabled,\n isVideoMuted: !isLocalVideoEnabled,\n });\n join();\n onJoin && onJoin();\n }, [join, isLocalAudioEnabled, isLocalVideoEnabled, name, setPreviewPreference, onJoin]);\n const roomLayout = useRoomLayout();\n\n const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};\n\n useEffect(() => {\n if (authToken) {\n if (skipPreview) {\n savePreferenceAndJoin();\n } else {\n preview();\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [authToken, skipPreview]);\n\n return roomState === HMSRoomState.Preview ? (\n <Container css={{ h: '100%', pt: '$10', '@md': { justifyContent: 'space-between' } }}>\n {toggleVideo ? null : <Box />}\n <Flex direction=\"column\" justify=\"center\" css={{ w: '100%', maxWidth: '360px' }}>\n <Logo />\n <Text variant=\"h4\" css={{ wordBreak: 'break-word', textAlign: 'center', mt: '$14', '@md': { mt: '$8' } }}>\n {previewHeader.title}\n </Text>\n <Text css={{ c: '$on_surface_medium', my: '0', textAlign: 'center' }} variant=\"body1\">\n {previewHeader.sub_title}\n </Text>\n <Flex justify=\"center\" css={{ my: '$8', gap: '$4' }}>\n {isStreamingOn ? (\n <Chip\n content=\"LIVE\"\n backgroundColor=\"$alert_error_default\"\n textColor=\"#FFF\"\n icon={<Box css={{ h: '$sm', w: '$sm', backgroundColor: '$on_primary_high', borderRadius: '$round' }} />}\n />\n ) : null}\n <Chip content={getParticipantChipContent(peerCount)} hideIfNoContent />\n </Flex>\n </Flex>\n\n {toggleVideo ? (\n <Flex\n align=\"center\"\n justify=\"center\"\n css={{\n '@sm': { width: '100%' },\n flexDirection: 'column',\n }}\n >\n <PreviewTile name={name} error={previewError} />\n </Flex>\n ) : null}\n\n <Box css={{ w: '100%', maxWidth: '360px' }}>\n <PreviewControls\n enableJoin={enableJoin}\n savePreferenceAndJoin={savePreferenceAndJoin}\n hideSettings={!toggleVideo && !toggleAudio}\n />\n <PreviewForm\n name={name}\n onChange={setName}\n enableJoin={enableJoin}\n onJoin={savePreferenceAndJoin}\n cannotPublishVideo={!toggleVideo}\n cannotPublishAudio={!toggleAudio}\n />\n </Box>\n </Container>\n ) : (\n <FullPageProgress />\n );\n};\n\nconst Container = styled('div', {\n width: '100%',\n ...flexCenter,\n flexDirection: 'column',\n px: '$10',\n});\n\nconst PreviewTile = ({ name, error }) => {\n const localPeer = useHMSStore(selectLocalPeer);\n const borderAudioRef = useBorderAudioLevel(localPeer?.audioTrack);\n const { isLocalAudioEnabled, toggleAudio } = useAVToggle();\n const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);\n const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);\n const trackSelector = selectVideoTrackByID(localPeer?.videoTrack);\n const track = useHMSStore(trackSelector);\n const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;\n\n const {\n aspectRatio: { width, height },\n } = useTheme();\n return (\n <StyledVideoTile.Container\n css={{\n bg: '$surface_default',\n aspectRatio: width / height,\n width: 'unset',\n height: 'min(360px, 60vh)',\n '@sm': {\n height: 'unset',\n width: 'min(360px, 100%)',\n maxWidth: '100%',\n },\n }}\n ref={borderAudioRef}\n >\n {localPeer ? (\n <>\n <TileConnection name={name} peerId={localPeer.id} hideLabel={true} />\n <Video\n mirror={track?.facingMode !== 'environment' && mirrorLocalVideo}\n trackId={localPeer.videoTrack}\n data-testid=\"preview_tile\"\n />\n {!isVideoOn ? (\n <StyledVideoTile.AvatarContainer>\n <Avatar name={name} data-testid=\"preview_avatar_tile\" />\n </StyledVideoTile.AvatarContainer>\n ) : null}\n </>\n ) : !error ? (\n <FullPageProgress />\n ) : null}\n {showMuteIcon ? (\n <StyledVideoTile.AudioIndicator size=\"medium\">\n <MicOffIcon />\n </StyledVideoTile.AudioIndicator>\n ) : null}\n </StyledVideoTile.Container>\n );\n};\n\nconst PreviewControls = ({ hideSettings }) => {\n const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);\n return (\n <Flex\n justify=\"between\"\n css={{\n width: '100%',\n mt: '$8',\n }}\n >\n <Flex css={{ gap: '$4' }}>\n <AudioVideoToggle compact />\n <Suspense fallback=\"\">{isVideoOn ? <VirtualBackground /> : null}</Suspense>\n </Flex>\n {!hideSettings ? <PreviewSettings /> : null}\n </Flex>\n );\n};\n\n// Bottom action sheet goes here, if isMobile\nexport const PreviewSettings = React.memo(() => {\n const [open, setOpen] = useState(false);\n\n return (\n <Fragment>\n <IconButton data-testid=\"preview_setting_btn\" css={{ flexShrink: 0 }} onClick={() => setOpen(value => !value)}>\n <SettingsIcon />\n </IconButton>\n {open && <SettingsModal open={open} onOpenChange={setOpen} />}\n </Fragment>\n );\n});\n\nexport default PreviewJoin;\n", "import React, { Fragment } from 'react';\nimport {\n DeviceType,\n selectLocalVideoTrackID,\n selectVideoTrackByID,\n useAVToggle,\n useDevices,\n useHMSActions,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { CameraFlipIcon, MicOffIcon, MicOnIcon, VideoOffIcon, VideoOnIcon } from '@100mslive/react-icons';\nimport { IconButtonWithOptions } from './IconButtonWithOptions/IconButtonWithOptions';\nimport { ToastManager } from './Toast/ToastManager';\nimport { Text } from '../../Text';\nimport { Tooltip } from '../../Tooltip';\nimport IconButton from '../IconButton';\nimport { isMacOS } from '../common/constants';\n\nconst optionsCSS = { fontWeight: '$semiBold', color: '$on_surface_high', w: '100%', p: '$8' };\n\nexport const AudioVideoToggle = () => {\n const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();\n const { videoInput, audioInput } = allDevices;\n\n const formattedVideoInputList = videoInput?.map(videoInput => ({\n active: selectedDeviceIDs.videoInput === videoInput.deviceId,\n content: (\n <Text\n variant=\"sm\"\n onClick={() =>\n updateDevice({\n deviceType: DeviceType.videoInput,\n deviceId: videoInput.deviceId,\n })\n }\n css={optionsCSS}\n >\n {videoInput.label}\n </Text>\n ),\n title: videoInput.label,\n }));\n\n const formattedAudioInputList = audioInput?.map(audioInput => ({\n active: selectedDeviceIDs.audioInput === audioInput.deviceId,\n content: (\n <Text\n variant=\"sm\"\n onClick={() =>\n updateDevice({\n deviceType: DeviceType.audioInput,\n deviceId: audioInput.deviceId,\n })\n }\n css={optionsCSS}\n >\n {audioInput.label}\n </Text>\n ),\n title: audioInput.label,\n }));\n\n const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();\n const actions = useHMSActions();\n const videoTrackId = useHMSStore(selectLocalVideoTrackID);\n const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));\n\n return (\n <Fragment>\n {toggleAudio ? (\n <IconButtonWithOptions\n options={formattedAudioInputList}\n tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '\u2318' : 'ctrl'} + d)`}\n icon={\n !isLocalAudioEnabled ? <MicOffIcon data-testid=\"audio_off_btn\" /> : <MicOnIcon data-testid=\"audio_on_btn\" />\n }\n active={isLocalAudioEnabled}\n onClick={toggleAudio}\n key=\"toggleAudio\"\n />\n ) : null}\n\n {toggleVideo ? (\n <IconButtonWithOptions\n options={formattedVideoInputList}\n tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '\u2318' : 'ctrl'} + e)`}\n icon={\n !isLocalVideoEnabled ? (\n <VideoOffIcon data-testid=\"video_off_btn\" />\n ) : (\n <VideoOnIcon data-testid=\"video_on_btn\" />\n )\n }\n key=\"toggleVideo\"\n active={isLocalVideoEnabled}\n onClick={toggleVideo}\n />\n ) : null}\n\n {localVideoTrack?.facingMode ? (\n <Tooltip title=\"Switch Camera\" key=\"switchCamera\">\n <IconButton\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 </Tooltip>\n ) : null}\n </Fragment>\n );\n};\n", "import { VerticalMenuIcon } from '@100mslive/react-icons';\nimport { Dropdown } from '../../../Dropdown';\nimport { Box, Flex } from '../../../Layout';\nimport { styled } from '../../../Theme';\nimport { Tooltip } from '../../../Tooltip';\nimport IconButton from '../../IconButton';\n\nconst IconSection = styled(IconButton, {\n w: 'unset',\n h: '$14',\n p: '$4',\n r: '$1',\n borderTopRightRadius: 0,\n borderColor: '$border_default',\n borderBottomRightRadius: 0,\n '@md': {\n mx: 0,\n borderTopRightRadius: '$1',\n borderBottomRightRadius: '$1',\n },\n});\n\nconst OptionsSection = styled(IconButton, {\n w: 'unset',\n h: '$14',\n p: '$4',\n r: '$1',\n borderTopLeftRadius: 0,\n borderColor: '$border_default',\n borderBottomLeftRadius: 0,\n borderLeftWidth: 0,\n '&:not([disabled]):focus-visible': {\n boxShadow: 'none',\n },\n '@md': {\n display: 'none',\n },\n});\n\nexport const IconButtonWithOptions = ({\n tooltipMessage = '',\n icon,\n options = [],\n active,\n onClick = () => {\n return;\n },\n key = '',\n}) => {\n const bgCss = { backgroundColor: active ? '$transparent' : '$secondary_dim' };\n const iconCss = { color: active ? '$on_surface_high' : '$on_primary_high' };\n return (\n <Flex>\n <IconSection css={bgCss} onClick={onClick} key={key}>\n <Tooltip disabled={!tooltipMessage} title={tooltipMessage}>\n <Flex align=\"center\" justify=\"center\" css={iconCss}>\n {icon}\n </Flex>\n </Tooltip>\n </IconSection>\n <Dropdown.Root>\n <Dropdown.Trigger asChild>\n <OptionsSection css={bgCss}>\n <Tooltip title=\"View Options\">\n <Box css={iconCss}>\n <VerticalMenuIcon />\n </Box>\n </Tooltip>\n </OptionsSection>\n </Dropdown.Trigger>\n <Dropdown.Content\n sideOffset={5}\n align=\"center\"\n css={{\n w: '$64',\n maxHeight: '$96',\n p: 0,\n border: 'none',\n }}\n >\n {options.map((option, index) => (\n <Dropdown.Item\n key={option.title}\n css={{\n flexDirection: 'column',\n alignItems: 'flex-start',\n backgroundColor: option.active ? '$surface_bright' : '$surface_dim',\n borderTop: index === 0 ? 'none' : '1px solid $border_default',\n '&:hover': {\n cursor: 'pointer',\n },\n p: '0',\n }}\n >\n {option.content}\n </Dropdown.Item>\n ))}\n </Dropdown.Content>\n </Dropdown.Root>\n </Flex>\n );\n};\n", "import { Flex } from '../../Layout';\nimport { Text } from '../../Text';\n\nconst Chip = ({\n icon = <></>,\n content = '',\n backgroundColor = '$surface_default',\n textColor = '$on_surface_high',\n hideIfNoContent = false,\n}) => {\n if (hideIfNoContent && !content) {\n return;\n }\n return (\n <Flex align=\"center\" css={{ backgroundColor, p: '$4 $6', borderRadius: '$4' }}>\n {icon}\n <Text variant=\"sm\" css={{ fontWeight: '$semiBold', color: textColor, ml: '$2' }}>\n {content}\n </Text>\n </Flex>\n );\n};\n\nexport default Chip;\n", "import React from 'react';\nimport { styled, Text, textEllipsis } from '../../../';\nimport { ConnectionIndicator } from './ConnectionIndicator';\n\nconst TileConnection = ({ name, peerId, hideLabel, width }) => {\n return (\n <Wrapper>\n {!hideLabel ? (\n <Text\n css={{\n c: '$on_surface_high',\n ...textEllipsis(width - 60),\n }}\n variant=\"xs\"\n >\n {name}\n </Text>\n ) : null}\n <ConnectionIndicator isTile peerId={peerId} />\n </Wrapper>\n );\n};\n\nconst Wrapper = styled('div', {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n position: 'absolute',\n bottom: '$2',\n left: '$2',\n backgroundColor: '$background_dim',\n borderRadius: '$1',\n maxWidth: '85%',\n zIndex: 1,\n '& p,span': {\n p: '$2 $3',\n },\n});\n\nexport default TileConnection;\n", "import React, { useCallback, useEffect, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk';\nimport { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';\nimport { Box, config as cssConfig, Dialog, Flex, IconButton, Tabs, Text } from '../../../';\nimport { useHLSViewerRole } from '../AppData/useUISettings';\nimport { settingContent, settingsList } from './common.js';\n\nconst SettingsModal = ({ open, onOpenChange, children }) => {\n const mediaQueryLg = cssConfig.media.md;\n const isMobile = useMedia(mediaQueryLg);\n\n const hlsViewerRole = useHLSViewerRole();\n const localPeerRole = useHMSStore(selectLocalPeerRoleName);\n const isHlsViewer = hlsViewerRole === localPeerRole;\n\n const [showSetting, setShowSetting] = useState(() =>\n settingsList.reduce((obj, { tabName }) => ({ ...obj, [tabName]: true }), {}),\n );\n\n const hideSettingByTabName = useCallback(\n key => hide => setShowSetting(prev => ({ ...prev, [key]: !hide })),\n [setShowSetting],\n );\n\n useEffect(() => {\n if (isHlsViewer) {\n hideSettingByTabName('layout')(true);\n }\n }, [isHlsViewer, hideSettingByTabName]);\n\n const [selection, setSelection] = useState(() => Object.keys(showSetting).find(key => showSetting[key]) ?? '');\n const resetSelection = useCallback(() => {\n setSelection('');\n }, []);\n\n useEffect(() => {\n if (isMobile) {\n setSelection('');\n } else {\n const firstNotHiddenTabName = Object.keys(showSetting).find(key => showSetting[key]) ?? '';\n setSelection(firstNotHiddenTabName);\n }\n }, [isMobile, showSetting]);\n\n return (\n <Dialog.Root open={open} onOpenChange={onOpenChange}>\n <Dialog.Trigger asChild>{children}</Dialog.Trigger>\n <Dialog.Portal>\n <Dialog.Overlay />\n <Dialog.Content\n css={{\n w: 'min(800px, 90%)',\n height: 'min(656px, 90%)',\n p: 0,\n r: '$4',\n }}\n >\n <Tabs.Root\n value={selection}\n activationMode={isMobile ? 'manual' : 'automatic'}\n onValueChange={setSelection}\n css={{ size: '100%', position: 'relative' }}\n >\n <Tabs.List\n css={{\n w: isMobile ? '100%' : '18.625rem',\n flexDirection: 'column',\n bg: '$background_default',\n p: '$14 $10',\n borderTopLeftRadius: '$4',\n borderBottomLeftRadius: '$4',\n }}\n >\n <Text variant=\"h5\">Settings </Text>\n <Flex direction=\"column\" css={{ mx: isMobile ? '-$8' : 0, overflowY: 'auto', pt: '$10' }}>\n {settingsList\n .filter(({ tabName }) => showSetting[tabName])\n .map(({ icon: Icon, tabName, title }) => {\n return (\n <Tabs.Trigger key={tabName} value={tabName} css={{ gap: '$8' }}>\n <Icon />\n {title}\n </Tabs.Trigger>\n );\n })}\n </Flex>\n </Tabs.List>\n {selection && (\n <Flex\n direction=\"column\"\n css={{\n flex: '1 1 0',\n minWidth: 0,\n mr: '$4',\n ...(isMobile\n ? {\n position: 'absolute',\n left: 0,\n right: 0,\n bg: '$surface_default',\n width: '100%',\n height: '100%',\n }\n : {}),\n }}\n >\n {settingsList\n .filter(({ tabName }) => showSetting[tabName])\n .map(({ content: Content, title, tabName }) => {\n return (\n <Tabs.Content key={tabName} value={tabName} className={settingContent()}>\n <SettingsContentHeader onBack={resetSelection} isMobile={isMobile}>\n {title}\n </SettingsContentHeader>\n <Content setHide={hideSettingByTabName(tabName)} />\n </Tabs.Content>\n );\n })}\n </Flex>\n )}\n </Tabs.Root>\n <Dialog.Close css={{ position: 'absolute', right: '$10', top: '$10' }}>\n <IconButton as=\"div\" data-testid=\"dialog_cross_icon\">\n <CrossIcon />\n </IconButton>\n </Dialog.Close>\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n );\n};\n\nconst SettingsContentHeader = ({ children, isMobile, onBack }) => {\n return (\n <Text variant=\"h6\" css={{ mb: '$12', display: 'flex', alignItems: 'center' }}>\n {isMobile && (\n <Box as=\"span\" css={{ bg: '$surface_bright', mr: '$4', r: '$round', p: '$2' }} onClick={onBack}>\n <ChevronLeftIcon />\n </Box>\n )}\n {children}\n </Text>\n );\n};\n\nexport default SettingsModal;\n", "import { GridFourIcon, NotificationsIcon, SettingsIcon } from '@100mslive/react-icons';\nimport { css } from '../../..';\nimport DeviceSettings from '../Settings/DeviceSettings';\nimport { LayoutSettings } from '../Settings/LayoutSettings';\nimport { NotificationSettings } from '../Settings/NotificationSettings';\n\nexport const settingOverflow = css({\n flex: '1 1 0',\n pr: '$12',\n mr: '-$12',\n overflowY: 'auto',\n});\n\nexport const settingContent = css({\n display: 'flex',\n flexDirection: 'column',\n '&[hidden]': {\n display: 'none',\n },\n});\n\nexport const settingsList = [\n {\n tabName: 'devices',\n title: 'Device Settings',\n icon: SettingsIcon,\n content: DeviceSettings,\n },\n {\n tabName: 'notifications',\n title: 'Notifications',\n icon: NotificationsIcon,\n content: NotificationSettings,\n },\n {\n tabName: 'layout',\n title: 'Layout',\n icon: GridFourIcon,\n content: LayoutSettings,\n },\n];\n", "import React, { Fragment, useEffect, useRef, useState } from 'react';\nimport {\n DeviceType,\n selectIsLocalVideoEnabled,\n selectLocalVideoTrackID,\n selectVideoTrackByID,\n useDevices,\n useHMSStore,\n} from '@100mslive/react-sdk';\nimport { MicOnIcon, SpeakerIcon, VideoOnIcon } from '@100mslive/react-icons';\nimport { Box, Button, Dropdown, Flex, StyledVideoTile, Text, Video } from '../../../';\nimport { DialogDropdownTrigger } from '../../primitives/DropdownTrigger';\nimport { useUISettings } from '../AppData/useUISettings';\nimport { useDropdownSelection } from '../hooks/useDropdownSelection';\nimport { settingOverflow } from './common.js';\nimport { UI_SETTINGS } from '../../common/constants';\n\n/**\n * wrap the button on click of whom settings should open, this component will take care of the rest,\n * it'll give the user options to change input/output device as well as check speaker.\n * There is also another controlled way of using this by passing in open and onOpenChange.\n */\nconst Settings = ({ setHide }) => {\n const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();\n const { videoInput, audioInput, audioOutput } = allDevices;\n const videoTrackId = useHMSStore(selectLocalVideoTrackID);\n const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);\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 e.g.) this changes both mic and speaker keeping them in sync.\n const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype;\n const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);\n const trackSelector = selectVideoTrackByID(videoTrackId);\n const track = useHMSStore(trackSelector);\n\n /**\n * Chromium browsers return an audioOutput with empty label when no permissions are given\n */\n const audioOutputFiltered = audioOutput?.filter(item => !!item.label) ?? [];\n\n if (!videoInput?.length && !audioInput?.length && !audioOutputFiltered?.length) {\n setHide(true);\n }\n\n return (\n <Box className={settingOverflow()}>\n {videoInput?.length ? (\n <Fragment>\n {isVideoOn && (\n <StyledVideoTile.Container\n css={{\n w: '90%',\n px: '$10',\n height: '$48',\n bg: 'transparent',\n m: '$10 auto',\n }}\n >\n <Video trackId={videoTrackId} mirror={track?.facingMode !== 'environment' && mirrorLocalVideo} />\n </StyledVideoTile.Container>\n )}\n <DeviceSelector\n title=\"Video\"\n devices={videoInput}\n icon={<VideoOnIcon />}\n selection={selectedDeviceIDs.videoInput}\n onChange={deviceId =>\n updateDevice({\n deviceId,\n deviceType: DeviceType.videoInput,\n })\n }\n />\n </Fragment>\n ) : null}\n\n {audioInput?.length ? (\n <DeviceSelector\n title={shouldShowAudioOutput ? 'Microphone' : 'Audio'}\n icon={<MicOnIcon />}\n devices={audioInput}\n selection={selectedDeviceIDs.audioInput}\n onChange={deviceId =>\n updateDevice({\n deviceId,\n deviceType: DeviceType.audioInput,\n })\n }\n />\n ) : null}\n\n {audioOutputFiltered?.length && shouldShowAudioOutput ? (\n <DeviceSelector\n title=\"Speaker\"\n icon={<SpeakerIcon />}\n devices={audioOutput}\n selection={selectedDeviceIDs.audioOutput}\n onChange={deviceId =>\n updateDevice({\n deviceId,\n deviceType: DeviceType.audioOutput,\n })\n }\n >\n <TestAudio id={selectedDeviceIDs.audioOutput} />\n </DeviceSelector>\n ) : null}\n </Box>\n );\n};\n\nconst DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {\n const [open, setOpen] = useState(false);\n const selectionBg = useDropdownSelection();\n const ref = useRef(null);\n\n return (\n <Box css={{ mb: '$10' }}>\n <Text css={{ mb: '$4' }}>{title}</Text>\n <Flex\n align=\"center\"\n css={{\n gap: '$4',\n '@md': {\n flexDirection: children ? 'column' : 'row',\n alignItems: children ? 'start' : 'center',\n },\n }}\n >\n <Box\n css={{\n position: 'relative',\n flex: '1 1 0',\n minWidth: 0,\n maxWidth: '100%',\n '@md': {\n mb: children ? '$8' : 0,\n },\n }}\n >\n <Dropdown.Root open={open} onOpenChange={setOpen}>\n <DialogDropdownTrigger\n ref={ref}\n icon={icon}\n title={devices.find(({ deviceId }) => deviceId === selection)?.label || 'Select device from list'}\n open={open}\n />\n <Dropdown.Portal>\n <Dropdown.Content align=\"start\" sideOffset={8} css={{ w: ref.current?.clientWidth, zIndex: 1000 }}>\n {devices.map(device => {\n return (\n <Dropdown.Item\n key={device.label}\n onSelect={() => onChange(device.deviceId)}\n css={{\n px: '$9',\n bg: device.deviceId === selection ? selectionBg : undefined,\n }}\n >\n {device.label}\n </Dropdown.Item>\n );\n })}\n </Dropdown.Content>\n </Dropdown.Portal>\n </Dropdown.Root>\n </Box>\n {children}\n </Flex>\n </Box>\n );\n};\n\nconst TEST_AUDIO_URL = 'https://100ms.live/test-audio.wav';\n\nconst TestAudio = ({ id }) => {\n const audioRef = useRef(null);\n const [playing, setPlaying] = useState(false);\n useEffect(() => {\n if (audioRef.current && id) {\n try {\n if (typeof audioRef.current.setSinkId !== 'undefined') {\n audioRef.current.setSinkId(id);\n }\n } catch (error) {\n console.log(error);\n }\n }\n }, [id]);\n return (\n <>\n <Button\n variant=\"standard\"\n css={{\n flexShrink: 0,\n p: '$6 $9',\n '@md': {\n w: '100%',\n },\n }}\n onClick={() => audioRef.current?.play()}\n disabled={playing}\n >\n <SpeakerIcon />\n &nbsp;Test{' '}\n <Text as=\"span\" css={{ display: 'none', '@md': { display: 'inline' } }}>\n &nbsp; speaker\n </Text>\n </Button>\n <audio ref={audioRef} src={TEST_AUDIO_URL} onEnded={() => setPlaying(false)} onPlay={() => setPlaying(true)} />\n </>\n );\n};\n\nexport default Settings;\n", "import React from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';\nimport { Dropdown, Flex, Text, textEllipsis } from '../../index';\n\nconst DialogDropdownTrigger = React.forwardRef(({ title, css, open, icon, titleCSS = {} }, ref) => {\n return (\n <Dropdown.Trigger\n asChild\n data-testid={`${title}_selector`}\n css={{\n border: '1px solid $border_bright',\n bg: '$surface_bright',\n r: '$1',\n p: '$6 $9',\n zIndex: 10,\n ...css,\n }}\n ref={ref}\n >\n <Flex\n css={{\n display: 'flex',\n justifyContent: 'space-between',\n color: '$on_surface_high',\n w: '100%',\n }}\n >\n {icon}\n <Text\n css={{\n color: 'inherit',\n ...textEllipsis('90%'),\n flex: '1 1 0',\n mx: icon ? '$6' : '0',\n ...titleCSS,\n }}\n >\n {title}\n </Text>\n {open ? <ChevronUpIcon /> : <ChevronDownIcon />}\n </Flex>\n </Dropdown.Trigger>\n );\n});\n\nexport { DialogDropdownTrigger };\n", "import React, { useCallback } from 'react';\nimport { selectIsLocalScreenShared, selectIsLocalVideoEnabled, useHMSActions, useHMSStore } from '@100mslive/react-sdk';\nimport { Box, Flex, Slider, Text } from '../../../';\nimport SwitchWithLabel from './SwitchWithLabel';\nimport { useSetUiSettings } from '../AppData/useUISettings';\nimport { settingOverflow } from './common.js';\nimport { UI_MODE_ACTIVE_SPEAKER, UI_MODE_GRID, UI_SETTINGS } from '../../common/constants';\n\nexport const LayoutSettings = () => {\n const hmsActions = useHMSActions();\n const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);\n const isLocalScreenShared = useHMSStore(selectIsLocalScreenShared);\n const [\n { isAudioOnly, uiViewMode, maxTileCount, mirrorLocalVideo, activeSpeakerSorting, hideLocalVideo },\n setUISettings,\n ] = useSetUiSettings();\n const toggleIsAudioOnly = useCallback(\n async isAudioOnlyModeOn => {\n if (isAudioOnlyModeOn) {\n // turn off video and screen share if user switches to audio only mode\n isLocalVideoEnabled && (await hmsActions.setLocalVideoEnabled(false));\n isLocalScreenShared && (await hmsActions.setScreenShareEnabled(false));\n }\n setUISettings({ [UI_SETTINGS.isAudioOnly]: isAudioOnlyModeOn });\n },\n [hmsActions, isLocalVideoEnabled, isLocalScreenShared, setUISettings],\n );\n\n return (\n <Box className={settingOverflow()}>\n <SwitchWithLabel\n checked={uiViewMode === UI_MODE_ACTIVE_SPEAKER}\n onChange={value => {\n setUISettings({\n [UI_SETTINGS.uiViewMode]: value ? UI_MODE_ACTIVE_SPEAKER : UI_MODE_GRID,\n });\n }}\n id=\"activeSpeakerMode\"\n label=\"Active Speaker Mode\"\n />\n <SwitchWithLabel\n label=\"Active Speaker Sorting\"\n id=\"activeSpeakerSortingMode\"\n checked={activeSpeakerSorting}\n onChange={value => {\n setUISettings({\n [UI_SETTINGS.activeSpeakerSorting]: value,\n });\n }}\n />\n <SwitchWithLabel label=\"Audio Only Mode\" id=\"audioOnlyMode\" checked={isAudioOnly} onChange={toggleIsAudioOnly} />\n <SwitchWithLabel\n label=\"Mirror Local Video\"\n id=\"mirrorMode\"\n checked={mirrorLocalVideo}\n onChange={value => {\n setUISettings({\n [UI_SETTINGS.mirrorLocalVideo]: value,\n });\n }}\n />\n <SwitchWithLabel\n label=\"Hide Local Video\"\n id=\"hideLocalVideo\"\n checked={hideLocalVideo}\n onChange={value => {\n setUISettings({\n [UI_SETTINGS.hideLocalVideo]: value,\n });\n }}\n />\n <Flex align=\"center\" css={{ w: '100%', my: '$2', py: '$8', '@md': { display: 'none' } }}>\n <Text variant=\"md\" css={{ fontWeight: '$semiBold' }}>\n Tiles In View({maxTileCount})\n </Text>\n <Flex justify=\"end\" css={{ flex: '1 1 0' }}>\n <Slider\n step={1}\n value={[maxTileCount]}\n min={1}\n max={49}\n onValueChange={e => {\n setUISettings({ [UI_SETTINGS.maxTileCount]: e[0] });\n }}\n css={{ w: '70%' }}\n />\n </Flex>\n </Flex>\n </Box>\n );\n};\n", "import React from 'react';\nimport { Label } from '../../../Label';\nimport { Flex } from '../../../Layout';\nimport { Switch } from '../../../Switch';\n\nconst SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) => {\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 display: hide ? 'none' : 'flex',\n }}\n >\n <Label\n htmlFor={id}\n css={{\n fontSize: '$md',\n fontWeight: '$semiBold',\n color: checked ? '$on_surface_high' : '$on_surface_low',\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 <Switch id={id} checked={checked} onCheckedChange={onChange} />\n </Flex>\n );\n};\n\nexport default SwitchWithLabel;\n", "import React from 'react';\nimport { AlertOctagonIcon, ChatIcon, ExitIcon, HandIcon, PersonIcon } from '@100mslive/react-icons';\nimport { Box } from '../../../';\nimport SwitchWithLabel from './SwitchWithLabel';\nimport { useSetSubscribedNotifications, useSubscribedNotifications } from '../AppData/useUISettings';\nimport { settingOverflow } from './common.js';\nimport { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';\n\nconst NotificationItem = ({ type, label, icon, checked }) => {\n const [, setSubscribedNotifications] = useSetSubscribedNotifications(type);\n return (\n <SwitchWithLabel\n label={label}\n id={type}\n icon={icon}\n checked={checked}\n onChange={value => {\n setSubscribedNotifications(value);\n }}\n />\n );\n};\n\nexport const NotificationSettings = () => {\n const subscribedNotifications = useSubscribedNotifications();\n\n return (\n <Box className={settingOverflow()}>\n <NotificationItem\n label=\"Peer Joined\"\n type={SUBSCRIBED_NOTIFICATIONS.PEER_JOINED}\n icon={<PersonIcon />}\n checked={subscribedNotifications.PEER_JOINED}\n />\n <NotificationItem\n label=\"Peer Leave\"\n type={SUBSCRIBED_NOTIFICATIONS.PEER_LEFT}\n icon={<ExitIcon />}\n checked={subscribedNotifications.PEER_LEFT}\n />\n <NotificationItem\n label=\"New Message\"\n type={SUBSCRIBED_NOTIFICATIONS.NEW_MESSAGE}\n icon={<ChatIcon />}\n checked={subscribedNotifications.NEW_MESSAGE}\n />\n <NotificationItem\n label=\"Hand Raised\"\n type={SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED}\n icon={<HandIcon />}\n checked={subscribedNotifications.METADATA_UPDATED}\n />\n <NotificationItem\n label=\"Error\"\n type={SUBSCRIBED_NOTIFICATIONS.ERROR}\n icon={<AlertOctagonIcon />}\n checked={subscribedNotifications.ERROR}\n />\n </Box>\n );\n};\n", "import React from 'react';\nimport { useMedia } from 'react-use';\nimport { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';\nimport { selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';\nimport { RadioIcon } from '@100mslive/react-icons';\nimport { Button, config as cssConfig, Flex, Input, styled } from '../../..';\nimport { useRoomLayout } from '../../provider/roomLayoutProvider';\nimport { PreviewSettings } from './PreviewJoin';\n\nconst PreviewForm = ({\n name,\n onChange,\n onJoin,\n enableJoin,\n cannotPublishVideo = false,\n cannotPublishAudio = false,\n}) => {\n const formSubmit = e => {\n e.preventDefault();\n };\n const mediaQueryLg = cssConfig.media.md;\n const isMobile = useMedia(mediaQueryLg);\n const { isHLSRunning } = useRecordingStreaming();\n const permissions = useHMSStore(selectPermissions);\n const layout = useRoomLayout();\n const { join_form: joinForm = {} } = layout?.screens?.preview?.default?.elements || {};\n const showGoLive =\n joinForm.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE &&\n !isHLSRunning &&\n permissions?.hlsStreaming;\n\n return (\n <Form\n css={{ flexDirection: cannotPublishVideo ? 'column' : 'row', '@md': { flexDirection: 'row' } }}\n onSubmit={formSubmit}\n >\n <Flex align=\"center\" css={{ gap: '$8', w: '100%' }}>\n <Input\n required\n id=\"name\"\n css={{ w: '100%', boxSizing: 'border-box' }}\n value={name}\n onChange={e => onChange(e.target.value.trimStart())}\n placeholder=\"Enter name\"\n autoFocus\n autoComplete=\"name\"\n />\n {cannotPublishAudio && cannotPublishVideo && !isMobile ? <PreviewSettings /> : null}\n </Flex>\n\n {Object.keys(joinForm).length > 0 ? (\n <Button type=\"submit\" icon disabled={!name || !enableJoin} onClick={onJoin}>\n {/* Conditions to show go live: The first broadcaster joins a streaming kit that is not live */}\n {showGoLive ? <RadioIcon height={18} width={18} /> : null}\n {showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label}\n </Button>\n ) : null}\n </Form>\n );\n};\n\nconst Form = styled('form', {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n gap: '$8',\n mt: '$10',\n mb: '$10',\n '@md': {\n gap: '$4',\n },\n});\n\nexport default PreviewForm;\n", "import { useEffect } from 'react';\nimport { useSearchParam } from 'react-use';\nimport { useSetUiSettings } from '../AppData/useUISettings';\nimport { QUERY_PARAM_SKIP_PREVIEW, QUERY_PARAM_SKIP_PREVIEW_HEADFUL, UI_SETTINGS } from '../../common/constants';\n\nexport const useSkipPreview = () => {\n // way to skip preview for automated tests, beam recording and streaming\n const beamInToken = useSearchParam('token') === 'beam_recording'; // old format to remove\n // use this field to join directly for quick testing while in local\n const directJoinHeadfulFromEnv = process.env.REACT_APP_HEADLESS_JOIN === 'true';\n const directJoinHeadful = useSearchParam(QUERY_PARAM_SKIP_PREVIEW_HEADFUL) === 'true' || directJoinHeadfulFromEnv;\n let skipPreview = useSearchParam(QUERY_PARAM_SKIP_PREVIEW) === 'true';\n skipPreview = skipPreview || beamInToken || directJoinHeadful;\n const [, setIsHeadless] = useSetUiSettings(UI_SETTINGS.isHeadless);\n useEffect(() => {\n !directJoinHeadful && setIsHeadless(skipPreview);\n }, [directJoinHeadful, skipPreview]); //eslint-disable-line\n\n return skipPreview;\n};\n", "import React, { useEffect, useState } from 'react';\nimport { selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';\nimport { Toast as ToastPrimitive } from '../../../Toast';\nimport { Toast } from './Toast';\nimport { ToastManager } from './ToastManager';\nimport { MAX_TOASTS } from '../../common/constants';\n\nexport const ToastContainer = () => {\n const isConnected = useHMSStore(selectIsConnectedToRoom);\n const [toasts, setToast] = useState([]);\n useEffect(() => {\n ToastManager.addListener(setToast);\n return () => {\n ToastManager.removeListener(setToast);\n };\n }, []);\n return (\n <ToastPrimitive.Provider swipeDirection=\"left\" duration={3000}>\n {toasts.slice(0, MAX_TOASTS).map(toast => {\n return <Toast key={toast.id} {...toast} onOpenChange={value => !value && ToastManager.removeToast(toast.id)} />;\n })}\n <ToastPrimitive.Viewport\n css={{\n position: 'absolute',\n ...(!isConnected ? {} : { bottom: '$24' }),\n }}\n />\n </ToastPrimitive.Provider>\n );\n};\n", "import React from 'react';\nimport { Toast as ToastPrimitive } from '../../../Toast';\n\nexport const Toast = ({ title, description, close = true, open, duration, onOpenChange, icon, ...props }) => {\n return (\n <ToastPrimitive.HMSToast\n title={title}\n description={description}\n open={open}\n isClosable={close}\n onOpenChange={onOpenChange}\n duration={!close ? 600000 : duration}\n icon={icon}\n {...props}\n />\n );\n};\n", "import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { selectLocalPeerID, selectPeerNameByID, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';\nimport { Box, Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport { config as cssConfig, keyframes } from '../../Theme';\n\nlet emojiCount = 1;\n\nconst flyAndFade = keyframes({\n '20%': { opacity: 1 },\n '100%': { bottom: '60%', opacity: 0 },\n});\n\nconst wiggleLeftRight = keyframes({\n '0%': { marginLeft: '-50px' },\n '100%': { marginLeft: '50px' },\n});\n\nconst wiggleRightLeft = keyframes({\n '0%': { marginLeft: '50px' },\n '100%': { marginLeft: '-50px' },\n});\n\nconst getStartingPoints = isMobile => {\n let arr = [];\n const min = 5;\n const max = isMobile ? 30 : 20;\n const inc = isMobile ? 8 : 5;\n for (let i = min; i <= max; i += inc) {\n arr.push(i);\n }\n return arr;\n};\n\nexport function FlyingEmoji() {\n const localPeerId = useHMSStore(selectLocalPeerID);\n const vanillaStore = useHMSVanillaStore();\n const [emojis, setEmojis] = useState([]);\n const isMobile = useMedia(cssConfig.media.md);\n\n const startingPoints = useMemo(() => getStartingPoints(isMobile), [isMobile]);\n\n const showFlyingEmoji = useCallback(\n (emojiId, senderId) => {\n if (!emojiId || !senderId || document.hidden) {\n return;\n }\n const senderPeerName = vanillaStore.getState(selectPeerNameByID(senderId));\n const nameToShow = localPeerId === senderId ? 'You' : senderPeerName;\n const startingPoint = startingPoints[emojiCount % startingPoints.length];\n const id = emojiCount++;\n\n setEmojis(emojis => {\n return [\n ...emojis,\n {\n id: id,\n emojiId: emojiId,\n senderName: nameToShow,\n startingPoint: `${startingPoint}%`,\n wiggleType: Math.random() < 0.5 ? 0 : 1,\n },\n ];\n });\n },\n [localPeerId, vanillaStore, startingPoints],\n );\n\n useEffect(() => {\n window.showFlyingEmoji = showFlyingEmoji;\n }, [showFlyingEmoji]);\n\n return (\n <Box\n css={{\n position: 'absolute',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n overflow: 'hidden',\n pointerEvents: 'none',\n userSelect: 'none',\n zIndex: 999,\n }}\n >\n {emojis.map(emoji => {\n return (\n <Flex\n key={emoji.id}\n css={{\n left: emoji.startingPoint,\n flexDirection: 'column',\n alignItems: 'center',\n position: 'absolute',\n bottom: 0,\n animation: `${flyAndFade()} 5s forwards, ${\n emoji.wiggleType === 0 ? wiggleLeftRight() : wiggleRightLeft()\n } 1s ease-in-out infinite alternate`,\n }}\n onAnimationEnd={() => {\n setEmojis(emojis.filter(item => item.id !== emoji.id));\n }}\n >\n <Box>\n <em-emoji id={emoji.emojiId} size=\"48px\" set=\"apple\"></em-emoji>\n </Box>\n <Box\n css={{\n width: 'fit-content',\n padding: '$2 $4',\n background: '$surface_bright',\n borderRadius: '$1',\n }}\n >\n <Text\n css={{\n fontSize: '$space$6',\n lineHeight: '$xs',\n color: '$on_surface_high',\n }}\n >\n {emoji.senderName}\n </Text>\n </Box>\n </Flex>\n );\n })}\n </Box>\n );\n}\n", "import React, { useCallback } from 'react';\nimport { useCustomEvent, useHMSActions } from '@100mslive/react-sdk';\nimport { REMOTE_STOP_SCREENSHARE_TYPE } from '../common/constants';\n\nexport function RemoteStopScreenshare() {\n const actions = useHMSActions();\n\n const onRemoteStopScreenshare = useCallback(async () => {\n await actions.setScreenShareEnabled(false);\n }, [actions]);\n\n useCustomEvent({\n type: REMOTE_STOP_SCREENSHARE_TYPE,\n onEvent: onRemoteStopScreenshare,\n });\n\n return <></>;\n}\n", "import { Indicator, Root } from '@radix-ui/react-progress';\nimport { styled } from '../Theme';\n\nconst StyledIndicator = styled(Indicator, { h: '$4', backgroundColor: '$primary_default' });\n\nconst StyledRoot = styled(Root, {\n w: '100%',\n h: '$4',\n borderRadius: '$round',\n backgroundColor: '$secondary_dim',\n overflow: 'hidden',\n});\n\nexport const Progress = {\n Root: StyledRoot,\n Content: StyledIndicator,\n};\n"],
5
5
  "mappings": "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",
6
6
  "names": ["React", "React", "useEffect", "useState", "ThemeTypes", "React", "useState", "isBrowser", "updatedTheme", "useEffect", "React", "React", "css", "React", "React", "React", "React", "Root", "React", "React", "Root", "Track", "Range", "Thumb", "_a", "React", "Root", "styled", "React", "React", "styled", "Root", "React", "css", "React", "Root", "Overlay", "Root", "Container", "Root", "Content", "Portal", "Root", "Trigger", "Root", "Trigger", "Content", "Portal", "React", "React", "Root", "Flex", "useCallback", "useRef", "theme", "useCallback", "useRef", "Arrow", "Content", "Root", "Portal", "Trigger", "StyledContent", "Content", "Arrow", "StyledTrigger", "Trigger", "Popover", "Root", "Portal", "React", "Root", "Label", "React", "_a", "_b", "Label", "React", "CrossIcon", "css", "React", "CrossIcon", "React", "StyledTrigger", "StyledContent", "React", "css", "Root", "Select", "StyledTrigger", "StyledContent", "StyledItem", "Select", "StyledTrigger", "StyledContent", "React", "React", "React", "Icon", "React", "Content", "Root", "Trigger", "Root", "Trigger", "Content", "React", "Suspense", "useEffect", "useRef", "useParams", "selectIsConnectedToRoom", "useHMSActions", "useHMSStore", "React", "useEffect", "useHMSActions", "useHMSStore", "roleName", "useState", "useCallback", "useHMSStore", "useHMSStore", "useCallback", "useCallback", "selectAppData", "useHMSActions", "useHMSStore", "useHMSVanillaStore", "useHMSStore", "selectAppData", "useHMSActions", "useCallback", "value", "useHMSVanillaStore", "React", "useHMSActions", "useHMSStore", "useEffect", "config", "useEffect", "useHMSActions", "useEffect", "useHMSStore", "useHMSStore", "useEffect", "useHMSActions", "useEffect", "React", "useEffect", "useMemo", "useState", "useSearchParam", "useHMSActions", "React", "React", "useRef", "CrossIcon", "Icon", "css", "React", "CrossIcon", "Label", "useRef", "_a", "css", "React", "Label", "value", "data", "React", "useHMSActions", "useMemo", "useState", "useSearchParam", "useEffect", "error", "Link", "React", "CopyIcon", "React", "CopyIcon", "React", "React", "React", "useEffect", "selectLocalPeerRoleName", "useHMSStore", "useHMSStore", "selectLocalPeerRoleName", "useEffect", "React", "useEffect", "selectAppData", "useHMSActions", "useHMSVanillaStore", "selectAppData", "useHMSVanillaStore", "useHMSActions", "useEffect", "React", "useEffect", "logMessage", "HMSNotificationTypes", "useHMSNotifications", "React", "PersonIcon", "React", "PersonIcon", "React", "React", "React", "useEffect", "useState", "useState", "useEffect", "data", "React", "useEffect", "useEffect", "useEffect", "HMSNotificationTypes", "useHMSNotifications", "HMSNotificationTypes", "useHMSNotifications", "useEffect", "React", "useEffect", "useState", "HMSNotificationTypes", "useHMSNotifications", "useHMSNotifications", "HMSNotificationTypes", "useState", "useEffect", "React", "React", "useEffect", "useState", "logMessage", "HMSNotificationTypes", "useHMSNotifications", "notificationTypes", "HMSNotificationTypes", "useHMSNotifications", "useState", "useEffect", "logMessage", "React", "React", "useEffect", "useState", "HMSNotificationTypes", "useHMSActions", "useHMSNotifications", "useHMSActions", "useState", "useHMSNotifications", "HMSNotificationTypes", "useEffect", "React", "useEffect", "HMSNotificationTypes", "useHMSNotifications", "notificationTypes", "React", "useEffect", "useState", "HMSNotificationTypes", "useHMSActions", "useHMSNotifications", "MicOnIcon", "useHMSActions", "useHMSNotifications", "HMSNotificationTypes", "useState", "useEffect", "React", "MicOnIcon", "useCallback", "useCallback", "useHMSNotifications", "useEffect", "HMSNotificationTypes", "logMessage", "React", "React", "useParams", "ExitIcon", "React", "React", "React", "useMedia", "selectIsConnectedToRoom", "useHMSStore", "React", "useEffect", "useRef", "useState", "fetchWithRetry", "useState", "useRef", "useEffect", "React", "useHMSStore", "React", "useMedia", "selectIsConnectedToRoom", "React", "Fragment", "useCallback", "useEffect", "useState", "selectLocalPeerID", "selectPeerCount", "useHMSActions", "useHMSStore", "CrossIcon", "HandRaiseIcon", "PeopleIcon", "React", "selectConnectionQualityByPeerID", "useHMSStore", "PoorConnectivityIcon", "theme", "useHMSStore", "selectConnectionQualityByPeerID", "theme", "React", "PoorConnectivityIcon", "React", "useRef", "useState", "useHMSActions", "useHMSStore", "CheckIcon", "ChevronDownIcon", "ChevronUpIcon", "useEffect", "useRef", "useState", "selectAvailableRoleNames", "selectIsConnectedToRoom", "useHMSStore", "useHMSStore", "selectAvailableRoleNames", "React", "useHMSStore", "useState", "useHMSActions", "useRef", "ChevronUpIcon", "ChevronDownIcon", "Label", "CheckIcon", "React", "useCallback", "useState", "CheckIcon", "ChevronDownIcon", "ChevronUpIcon", "useState", "useCallback", "React", "ChevronUpIcon", "ChevronDownIcon", "Item", "CheckIcon", "useState", "useCallback", "React", "Fragment", "CrossIcon", "useHMSStore", "selectPeerCount", "useEffect", "PeopleIcon", "data", "selectLocalPeerID", "HandRaiseIcon", "useHMSActions", "React", "Fragment", "useState", "useMedia", "HMSRoomState", "selectIsConnectedToRoom", "selectPermissions", "selectRoomState", "useHMSActions", "useHMSStore", "useRecordingStreaming", "RecordIcon", "React", "useRecordingStreaming", "useRecordingStreaming", "React", "React", "useCallback", "useState", "css", "useState", "useCallback", "React", "Label", "React", "useEffect", "useRef", "useState", "useHMSActions", "useRecordingStreaming", "GoLiveIcon", "React", "selectPermissions", "useHMSStore", "CrossIcon", "Icon", "css", "React", "CrossIcon", "Container", "useHMSStore", "selectPermissions", "useRecordingStreaming", "React", "Container", "useState", "useHMSActions", "AccordionHeader", "error", "GoLiveIcon", "useEffect", "Icon", "Label", "useRef", "React", "useState", "selectLocalPeerID", "useHMSStore", "ChevronDownIcon", "ChevronUpIcon", "useCallback", "useEffect", "useMemo", "selectLocalPeerID", "useHMSStore", "useCallback", "useState", "selectLocalPeerID", "selectPeerMetadata", "useHMSActions", "useHMSStore", "useHMSActions", "useHMSStore", "selectLocalPeerID", "selectPeerMetadata", "useState", "useCallback", "useHMSStore", "selectLocalPeerID", "useMemo", "useCallback", "useEffect", "useCallback", "useHMSActions", "useHMSStore", "useHMSStore", "useHMSActions", "useCallback", "useCallback", "useHMSActions", "useHMSStore", "useState", "useHMSStore", "selectLocalPeerID", "React", "ChevronUpIcon", "ChevronDownIcon", "useRecordingStreaming", "React", "useHMSStore", "selectPermissions", "RecordIcon", "useState", "useHMSActions", "Popover", "selectIsConnectedToRoom", "useMedia", "selectRoomState", "HMSRoomState", "Fragment", "React", "React", "useMedia", "React", "Fragment", "useCallback", "useMemo", "useState", "selectAvailableRoleNames", "selectIsConnectedToRoom", "selectLocalPeerID", "selectLocalPeerRoleName", "useHMSActions", "useHMSStore", "useRecordingStreaming", "useEffect", "useEffect", "useState", "useHMSActions", "useHMSStore", "selectIsConnectedToRoom", "selectAvailableRoleNames", "selectLocalPeerRoleName", "selectLocalPeerID", "useRecordingStreaming", "useMemo", "useCallback", "data", "React", "Fragment", "React", "Fragment", "useState", "selectIsConnectedToRoom", "selectPermissions", "useHMSActions", "useHMSStore", "VerticalMenuIcon", "useState", "useHMSStore", "selectIsConnectedToRoom", "selectPermissions", "useHMSActions", "React", "Fragment", "VerticalMenuIcon", "React", "selectIsConnectedToRoom", "useHMSStore", "HandIcon", "useHMSStore", "selectIsConnectedToRoom", "React", "HandIcon", "useMedia", "React", "Header", "React", "useParams", "React", "Header", "ExitIcon", "React", "useParams", "useSearchParam", "HMSRoomState", "selectRoomState", "useHMSStore", "React", "selectAppData", "useHMSStore", "React", "useCallback", "useEffect", "useRef", "useState", "HMSNotificationTypes", "selectPeerNameByID", "selectPermissions", "selectSessionStore", "useHMSActions", "useHMSNotifications", "useHMSStore", "ChevronDownIcon", "CrossIcon", "PinIcon", "React", "Fragment", "useCallback", "useEffect", "useRef", "useState", "selectLocalPeerID", "selectLocalPeerRoleName", "selectPeerNameByID", "selectPermissions", "useHMSActions", "useHMSStore", "useCallback", "useHMSActions", "useHMSStore", "useHMSVanillaStore", "useHMSActions", "useHMSVanillaStore", "useHMSStore", "useCallback", "React", "useHMSStore", "selectPeerNameByID", "selectLocalPeerRoleName", "Link", "Fragment", "useState", "useRef", "useEffect", "useHMSActions", "selectLocalPeerID", "selectPermissions", "useCallback", "React", "useCallback", "useEffect", "useRef", "useState", "data", "useHMSActions", "EmojiIcon", "useCallback", "selectAppData", "useHMSActions", "useHMSStore", "useHMSActions", "useHMSStore", "selectAppData", "useCallback", "useEffect", "useRef", "useState", "React", "Popover", "EmojiIcon", "data", "useHMSActions", "useRef", "useCallback", "useEffect", "React", "useState", "ChevronDownIcon", "ChevronUpIcon", "CrossIcon", "React", "Fragment", "useMemo", "useState", "useMeasure", "FixedSizeList", "useHMSStore", "CheckIcon", "React", "CheckIcon", "useHMSStore", "useMeasure", "useMemo", "FixedSizeList", "useState", "Fragment", "React", "useState", "ChevronUpIcon", "ChevronDownIcon", "CrossIcon", "selectMessagesUnreadCountByPeerID", "selectMessagesUnreadCountByRole", "selectUnreadHMSMessagesCount", "useHMSStore", "useHMSStore", "selectPermissions", "selectSessionStore", "React", "PinIcon", "CrossIcon", "useHMSNotifications", "HMSNotificationTypes", "selectPeerNameByID", "useState", "useRef", "useHMSActions", "useEffect", "useCallback", "_a", "ChevronDownIcon", "React", "Fragment", "useState", "selectPermissions", "useHMSStore", "useRecordingStreaming", "CrossIcon", "GoLiveIcon", "React", "Fragment", "useCallback", "useEffect", "useState", "selectRoomID", "useHMSActions", "useHMSStore", "useRecordingStreaming", "EndStreamIcon", "EyeOpenIcon", "GoLiveIcon", "InfoIcon", "PeopleIcon", "WrenchIcon", "data", "React", "EyeOpenIcon", "WrenchIcon", "useState", "useHMSStore", "selectRoomID", "useRecordingStreaming", "Container", "GoLiveIcon", "useHMSActions", "useCallback", "error", "Fragment", "InfoIcon", "useEffect", "EndStreamIcon", "PeopleIcon", "useRecordingStreaming", "useHMSStore", "selectPermissions", "useState", "React", "Fragment", "CrossIcon", "GoLiveIcon", "css", "useHMSStore", "selectAppData", "React", "React", "Fragment", "useCallback", "useEffect", "useState", "HMSRoomState", "selectIsLocalVideoEnabled", "selectRoomState", "selectVideoTrackByID", "useAVToggle", "useHMSStore", "useParticipants", "useRecordingStreaming", "MicOffIcon", "SettingsIcon", "React", "Fragment", "useHMSActions", "useHMSStore", "MicOnIcon", "VerticalMenuIcon", "VerticalMenuIcon", "videoInput", "React", "audioInput", "useHMSActions", "useHMSStore", "Fragment", "MicOnIcon", "React", "React", "Wrapper", "React", "useCallback", "useEffect", "useState", "useMedia", "selectLocalPeerRoleName", "useHMSStore", "ChevronLeftIcon", "CrossIcon", "SettingsIcon", "React", "Fragment", "useEffect", "useRef", "useState", "DeviceType", "selectIsLocalVideoEnabled", "selectLocalVideoTrackID", "selectVideoTrackByID", "useDevices", "useHMSStore", "MicOnIcon", "SpeakerIcon", "VideoOnIcon", "React", "ChevronDownIcon", "ChevronUpIcon", "React", "css", "ChevronUpIcon", "ChevronDownIcon", "useDevices", "useHMSStore", "selectLocalVideoTrackID", "selectIsLocalVideoEnabled", "selectVideoTrackByID", "React", "Fragment", "VideoOnIcon", "DeviceType", "MicOnIcon", "SpeakerIcon", "useState", "useRef", "useEffect", "React", "useCallback", "selectIsLocalVideoEnabled", "useHMSActions", "useHMSStore", "React", "React", "Label", "useHMSActions", "useHMSStore", "selectIsLocalVideoEnabled", "useCallback", "React", "React", "ChatIcon", "ExitIcon", "HandIcon", "PersonIcon", "React", "PersonIcon", "ExitIcon", "ChatIcon", "HandIcon", "SettingsIcon", "useMedia", "useHMSStore", "selectLocalPeerRoleName", "useState", "useCallback", "useEffect", "React", "Icon", "Content", "CrossIcon", "ChevronLeftIcon", "React", "useMedia", "JoinForm_JoinBtnType", "selectPermissions", "useHMSStore", "useRecordingStreaming", "useMedia", "useRecordingStreaming", "useHMSStore", "selectPermissions", "JoinForm_JoinBtnType", "React", "React", "useRecordingStreaming", "useState", "useAVToggle", "useParticipants", "useHMSStore", "selectRoomState", "useCallback", "useEffect", "HMSRoomState", "Container", "selectIsLocalVideoEnabled", "selectVideoTrackByID", "MicOffIcon", "Fragment", "SettingsIcon", "useEffect", "useSearchParam", "useSearchParam", "useEffect", "useSearchParam", "useParams", "useHMSStore", "selectRoomState", "HMSRoomState", "React", "Header", "React", "useEffect", "useState", "selectIsConnectedToRoom", "useHMSStore", "React", "Toast", "React", "useHMSStore", "selectIsConnectedToRoom", "useState", "useEffect", "React", "Toast", "React", "useCallback", "useEffect", "useMemo", "useState", "useMedia", "selectLocalPeerID", "selectPeerNameByID", "useHMSStore", "useHMSVanillaStore", "useHMSStore", "selectLocalPeerID", "useHMSVanillaStore", "useState", "useMedia", "useMemo", "useCallback", "selectPeerNameByID", "emojis", "useEffect", "React", "React", "useCallback", "useCustomEvent", "useHMSActions", "useHMSActions", "useCallback", "useCustomEvent", "React", "React", "useRef", "useEffect", "theme", "typography", "useParams", "Suspense", "useHMSStore", "selectIsConnectedToRoom", "useHMSActions", "Indicator", "Root", "Indicator", "StyledRoot", "Root"]
7
7
  }