[ { "path": ".eslintrc.json", "content": "{\n \"extends\": [\"next/core-web-vitals\", \"prettier\"]\n}\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\n\n# VScode\n.vscode\n" }, { "path": ".husky/pre-commit", "content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx lint-staged\n" }, { "path": ".prettierignore", "content": "# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# typescript\n*.tsbuildinfo\n" }, { "path": ".prettierrc.json", "content": "{}\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2023 Mux\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# Mux Meet\n\n> [!WARNING]\n> Mux Real-Time Video has been sunset and is unavailable for new usage. Existing access will end on December 31, 2023. [We recommend migrating your application to our partner, LiveKit](https://livekit.io/mux-livekit). Please contact [Mux Support](https://mux.com/support) if you need more help or details. Mux Meet is no-longer maintained and the repository will soon be archived.\n\nMux Meet is a video conferencing app powered by [Mux Real-Time Video](https://mux.com/real-time-video), written in React, using the [Next.js](https://nextjs.org/) framework.\n\n![Four users in a Mux Meet call](https://user-images.githubusercontent.com/1211390/216212346-b319d137-0d2e-405a-bbab-703cc32763b3.jpg)\n\n# Getting Started\n\nIn order for Meet to connect to Mux's APIs, an access token and signing key must be provided. These are generated in the Mux Dashboard and should be set as environment variables.\n\nThe easiest way to use Mux Meet is to deploy it to Vercel.\n\n[![Deploy with Vercel](https://vercel.com/button)]()\n\nAfter creating your project, you will be prompted to configure it.\n\n![Configure Vercel Environment Variables](https://user-images.githubusercontent.com/1211390/216212169-251d87ef-83ae-4b9b-82e8-ae42cb430b02.jpg)\n\nIn a separate window, open https://dashboard.mux.com and sign in. You will need to create an account, if you don't already have one.\n\nFrom the [Mux Dashboard](https://dashboard.mux.com), open Settings from the bottom left and click Access Tokens. Then click \"Generate new token\" and select Mux Video from the list of permissions. Optionally, give the access token a name like Mux Meet.\n\n![Create new Mux Access Token](https://user-images.githubusercontent.com/1211390/216212226-d98b377b-7105-4db7-89f7-8b3f6aadd805.jpg)\n\nOnce your token is generated, copy and paste the ID and Secret as the values for `MUX_TOKEN_ID` and `MUX_TOKEN_SECRET` in Vercel.\n\nNow go back to https://dashboard.mux.com to generate the Signing Key.\n\nFrom the [Mux Dashboard](https://dashboard.mux.com), open Settings from the bottom left and click Signing Keys. Then click \"Generate new key\" and make sure you use the same environment as you did for the Access Token. The Product selection should default to Video.\n\n![Create new Mux Signing Key](https://user-images.githubusercontent.com/1211390/216212263-f8fe2d0a-e8f4-4ba6-8197-bbbe745c9cb1.jpg)\n\nOnce your key is generated, copy and paste the ID and Secret as the values for `MUX_SIGNING_KEY` and `MUX_PRIVATE_KEY` in Vercel.\n\n_Both the Access Token and Signing Key are sensitive. DO NOT MAKE THEM PUBLIC. It is safe to store them in Vercel as Environment Variables or locally during development._\n\nOnce all 4 environment variables are filled in. Click Deploy for Vercel to build and start your app.\n\n## Cleanup Spaces after Meeting\n\nJoining a new Space creates a Space in Mux, but in order to clean up Spaces after a meeting is over, set up a simple [webhook from Mux](https://docs.mux.com/guides/video/listen-for-webhooks).\n\nFrom the [Mux Dashboard](https://dashboard.mux.com), open Settings from the bottom left and click Webhooks. Then click \"Generate new webhook\" and make sure you use the same environment as you did for the Access Token. The URL to notify will be your app's URL + `/api/webhooks`.\n\n![Create new Mux webhook](https://user-images.githubusercontent.com/1211390/216212296-93dad4a3-1b91-4402-8eed-c0325dea0d69.jpg)\n\nNow generate the Webhook and copy the Signing Secret by clicking Show Signing Secret.\n\nConfigure your deployed app with a new environment variable named `WEBHOOK_SECRET` with the value of the Webhook Signing Secret.\n\n_Make sure you redeploy for your new environment variable to take affect._\n\n## Limit Access\n\nTo limit the number of active Spaces, set an integer value for an environment variable `ACTIVE_SPACE_LIMIT`.\n\nTo limit the amount of time participants are allowed to spend in a temporary Space, set an integer value in seconds for an environment variable `SPACE_DURATION_SECONDS`.\n\n# Develop locally\n\nCreate an .env.local file at the root of the repo with the following secrets:\n\n```bash\nMUX_TOKEN_ID=\nMUX_TOKEN_SECRET=\nMUX_SIGNING_KEY=\nMUX_PRIVATE_KEY=\n```\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.\n\n# Learn More\n\n## Mux\n\n- [Mux Real-Time Video](https://mux.com/real-time-video)\n- [Real-Time Video in React](https://docs.mux.com/guides/video/send-and-receive-real-time-video-from-a-react-application)\n- [Real-Time Video on Android](https://docs.mux.com/guides/video/send-and-receive-real-time-video-from-an-android-application)\n- [Real-Time Video on iOS](https://docs.mux.com/guides/video/send-and-receive-real-time-video-from-an-ios-application)\n\n## Next.js\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n" }, { "path": "client/token.ts", "content": "import axios from \"axios\";\n\ninterface TokenParams {\n spaceId: string;\n participantId: string;\n}\n\ninterface TokenResponse {\n spaceJWT: string;\n}\n\nexport const tokenPOST = async (\n params: TokenParams\n): Promise => {\n return axios.post(`/api/token`, params).then(({ data }) => data);\n};\n" }, { "path": "components/Controls.tsx", "content": "import React, { useCallback } from \"react\";\nimport { useRouter } from \"next/router\";\nimport { Flex, useDisclosure } from \"@chakra-ui/react\";\n\nimport { useSpace } from \"hooks/useSpace\";\n\nimport ControlsRight from \"./controls/ControlsRight\";\nimport ControlsLeft from \"./controls/ControlsLeft\";\nimport ControlsCenter from \"./controls/ControlsCenter\";\nimport ACRScoreDialog from \"./modals/ACRScoreDialog\";\n\nexport default function Controls(): JSX.Element {\n const router = useRouter();\n const { leaveSpace } = useSpace();\n const { isOpen: isACRScoreDialogOpen, onOpen: onACRScoreDialogOpen } =\n useDisclosure();\n\n const leaveSpacePage = useCallback(() => {\n router.push(\"/\");\n }, [router]);\n\n const promptForACR = useCallback(() => {\n try {\n leaveSpace();\n onACRScoreDialogOpen();\n } catch (error) {\n console.error(`Unable to properly leave space: ${error}`);\n leaveSpacePage();\n }\n }, [leaveSpace, leaveSpacePage, onACRScoreDialogOpen]);\n\n return (\n <>\n \n \n \n {!isACRScoreDialogOpen && (\n <>\n \n \n \n )}\n \n \n );\n}\n" }, { "path": "components/Gallery.tsx", "content": "import React, { useCallback, useMemo, useState } from \"react\";\nimport { IconButton, Center, Flex } from \"@chakra-ui/react\";\n\nimport UserContext from \"context/User\";\n\nimport { useSpace } from \"hooks/useSpace\";\n\nimport Participant from \"./Participant\";\nimport GalleryLayout from \"./GalleryLayout\";\nimport ParticipantAudio from \"./ParticipantAudio\";\nimport ChevronLeftIcon from \"components/icons/ChevronLeftIcon\";\nimport ChevronRightIcon from \"components/icons/ChevronRightIcon\";\n\nfunction pushToFront(array: T[], element: T) {\n const index = array.findIndex((el) => el === element);\n if (index) {\n array.splice(index, 1);\n array.unshift(element);\n }\n}\n\ninterface Props {\n gap: number;\n width: number;\n height: number;\n participantsPerPage: number;\n}\n\nexport default function Gallery({\n gap,\n width,\n height,\n participantsPerPage,\n}: Props): JSX.Element {\n const [currentPage, setCurrentPage] = useState(1);\n const {\n connectionIds,\n participantCount,\n localParticipantConnectionId,\n screenShareParticipantConnectionId,\n } = useSpace();\n const { pinnedConnectionId } = React.useContext(UserContext);\n\n const orderedConnectionIds = useMemo(() => {\n const ids = [...connectionIds];\n [\n screenShareParticipantConnectionId,\n pinnedConnectionId,\n localParticipantConnectionId,\n ].forEach((id) => {\n if (id) {\n pushToFront(ids, id);\n }\n });\n\n return ids;\n }, [\n connectionIds,\n localParticipantConnectionId,\n pinnedConnectionId,\n screenShareParticipantConnectionId,\n ]);\n\n const numberPages = useMemo(() => {\n if (participantCount >= participantsPerPage) {\n return Math.ceil(participantCount / participantsPerPage);\n } else {\n return 1;\n }\n }, [participantCount, participantsPerPage]);\n\n const goToPreviousPage = useCallback(() => {\n if (currentPage > 1) {\n setCurrentPage((page) => page - 1);\n }\n }, [currentPage]);\n\n const paginatedConnectionIds = useMemo(() => {\n const startIndex = currentPage * participantsPerPage - participantsPerPage;\n const endIndex = startIndex + participantsPerPage;\n const pageParticipants = orderedConnectionIds.slice(startIndex, endIndex);\n // if there are no participants, then only the local view will show up on the page\n // we need to go back to the previous page.\n if (pageParticipants.length === 0) {\n goToPreviousPage();\n }\n return pageParticipants;\n }, [\n orderedConnectionIds,\n currentPage,\n participantsPerPage,\n goToPreviousPage,\n ]);\n\n const hidePaginateCtrlRight = currentPage === numberPages;\n\n const hidePaginateCtrlLeft = currentPage === 1;\n\n const goToNextPage = () => {\n if (currentPage < numberPages) {\n setCurrentPage((page) => page + 1);\n }\n };\n\n const widthBetweenPagination = numberPages === 1 ? width : width - 80;\n\n return (\n \n
\n }\n isRound={true}\n onClick={goToPreviousPage}\n opacity={numberPages === 1 ? 0 : 1}\n hidden={hidePaginateCtrlLeft}\n variant=\"outline\"\n border=\"1px\"\n borderColor=\"#666666\"\n backgroundColor=\"#383838\"\n _hover={{\n border: \"1px solid #CCCCCC\",\n backgroundColor: \"#383838\",\n }}\n _active={{\n border: \"1px solid #CCCCCC\",\n backgroundColor: \"#444444\",\n }}\n />\n
\n
\n {connectionIds.map((connectionId) => (\n \n ))}\n \n {paginatedConnectionIds.map((connectionId) => {\n return (\n \n );\n })}\n \n
\n
\n }\n isRound={true}\n opacity={numberPages === 1 ? 0 : 1}\n hidden={hidePaginateCtrlRight}\n variant=\"outline\"\n border=\"1px\"\n borderColor=\"#666666\"\n onClick={goToNextPage}\n backgroundColor=\"#383838\"\n _hover={{\n border: \"1px solid #CCCCCC\",\n backgroundColor: \"#383838\",\n }}\n _active={{\n border: \"1px solid #CCCCCC\",\n backgroundColor: \"#444444\",\n }}\n zIndex={2}\n />\n
\n \n );\n}\n" }, { "path": "components/GalleryLayout.tsx", "content": "import React, {\n Children,\n cloneElement,\n isValidElement,\n ReactNode,\n useMemo,\n} from \"react\";\nimport { Flex } from \"@chakra-ui/react\";\n\nimport { calcOptimalBoxes } from \"lib/gallery\";\n\ninterface Props {\n gap?: number;\n width: number;\n height: number;\n children: ReactNode;\n}\n\nconst GalleryLayout = ({ children, width, height, gap = 10 }: Props) => {\n const bestFit = useMemo(() => {\n if (children) {\n return calcOptimalBoxes(\n width,\n height,\n Children.count(children),\n 16 / 9,\n gap\n );\n }\n }, [children, width, height, gap]);\n\n return (\n \n {Children.map(children, (child) => {\n if (\n isValidElement(child) &&\n bestFit &&\n bestFit.width &&\n bestFit.height\n ) {\n return cloneElement(child as React.ReactElement, {\n width: bestFit.width,\n height: bestFit.height,\n });\n } else {\n return child;\n }\n })}\n \n );\n};\n\nexport default GalleryLayout;\n" }, { "path": "components/Header.tsx", "content": "import React from \"react\";\nimport Image from \"next/image\";\nimport { AiFillGithub } from \"react-icons/ai\";\nimport { Flex, Spacer } from \"@chakra-ui/react\";\n\nimport muxLogo from \"../public/mux-logo.svg\";\n\nexport default function Header(): JSX.Element {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "components/Meeting.tsx", "content": "import React, { useContext } from \"react\";\nimport { Center, Flex } from \"@chakra-ui/react\";\n\nimport { useSpace } from \"hooks/useSpace\";\nimport useWindowDimensions from \"hooks/useWindowDimension\";\n\nimport Gallery from \"./Gallery\";\nimport Timer from \"./Timer\";\nimport ScreenShareRenderer from \"./renderers/ScreenShareRenderer\";\nimport ChatRenderer from \"./renderers/ChatRenderer\";\nimport ChatContext from \"context/Chat\";\n\nconst headerHeight = 80;\nconst chatWidth = 300;\n\nexport default function Meeting(): JSX.Element {\n let gap = 10;\n const {\n participantCount,\n attachScreenShare,\n isScreenShareActive,\n spaceEndsAt,\n } = useSpace();\n const { isChatOpen } = useContext(ChatContext);\n const { width = 0, height = 0 } = useWindowDimensions();\n\n const availableWidth = width - (isChatOpen && width > 800 ? chatWidth : 0);\n\n const paddingY = height < 600 ? 10 : 40;\n const paddingX = availableWidth < 800 ? 40 : 60;\n\n let galleryWidth = availableWidth - paddingX * 2;\n if (isScreenShareActive) {\n if (participantCount < 6) {\n galleryWidth = availableWidth * 0.25 - paddingX;\n } else {\n galleryWidth = availableWidth * 0.33 - paddingX / 2;\n }\n galleryWidth = Math.max(galleryWidth, 160);\n }\n let galleryHeight = height - headerHeight - paddingY * 2;\n\n let screenShareWidth = isScreenShareActive\n ? availableWidth - galleryWidth\n : 0;\n\n let direction: \"row\" | \"column\" = \"row\";\n if (width < height) {\n gap = 8;\n galleryWidth = availableWidth - paddingX * 2;\n if (isScreenShareActive) {\n direction = \"column\";\n screenShareWidth = availableWidth;\n galleryHeight = height - headerHeight - (availableWidth / 4) * 3;\n }\n }\n\n let scaleFactor = 2.25;\n const rows = Math.max(Math.ceil(galleryHeight / (90 * scaleFactor)), 1);\n const columns = Math.max(Math.ceil(galleryWidth / (160 * scaleFactor)), 1);\n\n const participantsPerPage = Math.round(rows * columns);\n\n return (\n \n {spaceEndsAt && }\n \n
\n \n
\n \n \n 800 && isChatOpen} />\n \n );\n}\n" }, { "path": "components/MuteIndicator.tsx", "content": "import React from \"react\";\nimport { Box, Flex, Icon } from \"@chakra-ui/react\";\nimport { IoMicOffOutline } from \"react-icons/io5\";\n\ninterface Props {\n isMuted: boolean;\n parentHeight: number;\n}\n\nexport default function MuteIndicator({\n isMuted,\n parentHeight,\n}: Props): JSX.Element {\n let left = \"2px\";\n let bottom = \"15%\";\n let marginLeft = \"3\";\n let iconWidth = \"5\";\n let iconHeight = \"5\";\n let borderRadius = \"10px\";\n let paddingX = \"2\";\n let paddingY = \"1\";\n if (parentHeight <= 250) {\n left = \"0\";\n bottom = \"5%\";\n marginLeft = \"1\";\n }\n if (parentHeight <= 200) {\n paddingX = \"1\";\n borderRadius = \"0 10px 0 0\";\n bottom = \"0\";\n marginLeft = \"0\";\n iconWidth = \"12px\";\n iconHeight = \"12px\";\n }\n if (parentHeight <= 90) {\n paddingX = \"0\";\n paddingY = \"1.5px\";\n borderRadius = \"0\";\n }\n\n return (\n \n {isMuted && (\n \n \n \n )}\n \n );\n}\n" }, { "path": "components/Notifications.tsx", "content": "import { useState, useEffect } from \"react\";\nimport { useDisclosure } from \"@chakra-ui/react\";\n\nimport { useSpace } from \"hooks/useSpace\";\nimport { useUserMedia } from \"hooks/useUserMedia\";\n\nimport Sounds from \"./Sounds\";\nimport Toasts from \"./Toasts\";\nimport ErrorModal from \"./modals/ErrorModal\";\n\nexport default function Notifications(): JSX.Element {\n const { joinError, screenShareError } = useSpace();\n const { userMediaError } = useUserMedia();\n const [errorModalTitle, setErrorModalTitle] = useState(\"\");\n const [errorModalMessage, setErrorModalMessage] = useState(\"\");\n const {\n isOpen: isErrorModalOpen,\n onOpen: onErrorModalOpen,\n onClose: onErrorModalClose,\n } = useDisclosure();\n\n useEffect(() => {\n if (joinError) {\n setErrorModalTitle(\"Error joining space\");\n setErrorModalMessage(joinError);\n onErrorModalOpen();\n }\n }, [joinError, onErrorModalOpen]);\n\n useEffect(() => {\n if (screenShareError === \"Permission denied by system\") {\n setErrorModalTitle(\"Can't share your screen\");\n setErrorModalMessage(\n \"Please check your browser has screen capture permissions and try restarting your browser if you continue to have issues.\"\n );\n onErrorModalOpen();\n }\n }, [screenShareError, onErrorModalOpen]);\n\n useEffect(() => {\n if (userMediaError === \"NotAllowedError\") {\n setErrorModalTitle(\"Can't show your media\");\n setErrorModalMessage(\n \"Please check your browser has media capture (webcam and microphone) permissions and try restarting your browser if you continue to have issues.\"\n );\n onErrorModalOpen();\n }\n if (userMediaError === \"OverconstrainedError\") {\n }\n\n return () => {\n onErrorModalClose();\n };\n }, [userMediaError, onErrorModalOpen, onErrorModalClose]);\n return (\n <>\n \n \n \n \n );\n}\n" }, { "path": "components/Participant.tsx", "content": "import React, { useMemo } from \"react\";\nimport { Box, Center, Flex } from \"@chakra-ui/react\";\n\nimport UserContext from \"context/User\";\nimport { useParticipant } from \"hooks/useParticipant\";\n\nimport Pin from \"./Pin\";\nimport VideoRenderer from \"./renderers/VideoRenderer\";\nimport ParticipantInfoBar from \"./ParticipantInfoBar\";\nimport ParticipantName from \"./ParticipantName\";\n\ninterface Props {\n width?: number;\n height?: number;\n connectionId: string;\n}\n\nexport default function Participant({\n width,\n height,\n connectionId,\n}: Props): JSX.Element {\n const {\n id,\n isLocal,\n isSpeaking,\n hasMicTrack,\n isMicTrackMuted,\n isCameraOff,\n cameraWidth,\n cameraHeight,\n displayName,\n attachVideoElement,\n } = useParticipant(connectionId);\n\n const outlineWidth = 3;\n\n return (\n \n \n\n \n\n {isCameraOff && (\n \n {displayName || id}\n \n )}\n\n {!isLocal && }\n \n );\n}\n" }, { "path": "components/ParticipantAudio.tsx", "content": "import React from \"react\";\n\nimport { useParticipant } from \"hooks/useParticipant\";\n\nimport AudioRenderer from \"./renderers/AudioRenderer\";\n\ninterface Props {\n connectionId: string;\n}\n\nconst ParticipantAudio = ({ connectionId }: Props) => {\n const { isLocal, attachAudioElement } = useParticipant(connectionId);\n\n return !isLocal ? : null;\n};\n\nexport default ParticipantAudio;\n" }, { "path": "components/ParticipantInfoBar.tsx", "content": "import React from \"react\";\nimport { Flex, Text } from \"@chakra-ui/react\";\n\nimport MuteIndicator from \"./MuteIndicator\";\n\ninterface Props {\n name: string;\n isMuted: boolean;\n parentHeight: number;\n}\n\nexport default function ParticipantInfoBar({\n name,\n isMuted,\n parentHeight,\n}: Props): JSX.Element {\n let height = \"40px\";\n let fontSize = \"14px\";\n if (parentHeight <= 250) {\n height = \"30px\";\n }\n if (parentHeight <= 200) {\n height = \"20px\";\n fontSize = \"10px\";\n }\n if (parentHeight <= 90) {\n height = \"15px\";\n fontSize = \"10px\";\n }\n\n return (\n \n \n \n {name}\n \n \n );\n}\n" }, { "path": "components/ParticipantName.tsx", "content": "import { memo } from \"react\";\nimport { Box, Center, Flex } from \"@chakra-ui/react\";\n\ninterface Props {\n isSmall: boolean;\n children: string;\n}\n\nfunction ParticipantName({ isSmall, children }: Props): JSX.Element {\n return (\n \n \n {children}\n \n \n );\n}\n\nconst MemoizedName = memo(ParticipantName);\nexport default MemoizedName;\n" }, { "path": "components/Pin.tsx", "content": "import React from \"react\";\nimport { IconButton } from \"@chakra-ui/react\";\nimport { MdPushPin, MdOutlinePushPin } from \"react-icons/md\";\n\nimport UserContext from \"context/User\";\n\ninterface Props {\n connectionId: string;\n}\n\nexport default function Pin({ connectionId }: Props): JSX.Element {\n const { pinnedConnectionId, setPinnedConnectionId } =\n React.useContext(UserContext);\n\n return (\n {\n if (setPinnedConnectionId) {\n if (pinnedConnectionId === connectionId) {\n setPinnedConnectionId(\"\");\n } else {\n setPinnedConnectionId(connectionId);\n }\n }\n }}\n variant=\"ghost\"\n position=\"absolute\"\n right={0}\n top={0}\n icon={\n pinnedConnectionId === connectionId ? (\n \n ) : (\n \n )\n }\n />\n );\n}\n" }, { "path": "components/Sounds.tsx", "content": "import useSound from \"use-sound\";\nimport { SpaceEvent } from \"@mux/spaces-web\";\n\nimport { useSpaceEvent } from \"hooks/useSpaceEvent\";\nimport { useCallback } from \"react\";\nimport { useSpace } from \"hooks/useSpace\";\n\nconst participantSoundCutoff = 5;\n\nexport default function Sounds(): JSX.Element {\n const { isJoined } = useSpace();\n\n return <>{isJoined && };\n}\n\nfunction JoinedSounds(): JSX.Element {\n const { participantCount } = useSpace();\n const [playJoinSound] = useSound(\"/sounds/meet-join.mp3\");\n const [playLeaveSound] = useSound(\"/sounds/meet-leave.mp3\");\n\n useSpaceEvent(\n SpaceEvent.ParticipantJoined,\n useCallback(() => {\n if (document[\"hidden\"] && participantCount < participantSoundCutoff) {\n playJoinSound();\n }\n }, [playJoinSound, participantCount])\n );\n\n useSpaceEvent(\n SpaceEvent.ParticipantLeft,\n useCallback(() => {\n if (document[\"hidden\"] && participantCount < participantSoundCutoff) {\n playLeaveSound();\n }\n }, [playLeaveSound, participantCount])\n );\n\n return <>;\n}\n" }, { "path": "components/Stage.tsx", "content": "import React from \"react\";\nimport { Center, Heading, Spinner } from \"@chakra-ui/react\";\n\nimport { useSpace } from \"hooks/useSpace\";\n\nimport Controls from \"./Controls\";\nimport Meeting from \"./Meeting\";\nimport Notifications from \"./Notifications\";\nimport { ChatProvider } from \"context/Chat\";\n\nconst LoadingSpinner = () => {\n return (\n <>\n \n \n Joining Space...\n \n \n );\n};\n\nexport default function Stage(): JSX.Element {\n const { isJoined } = useSpace();\n\n return (\n <>\n \n \n
\n {!isJoined ? : }\n
\n \n \n \n );\n}\n" }, { "path": "components/Timer.tsx", "content": "import { useEffect, useState } from \"react\";\nimport { useRouter } from \"next/router\";\nimport { Tooltip } from \"@chakra-ui/react\";\nimport styled from \"@emotion/styled\";\nimport moment from \"moment\";\n\nimport { useSpace } from \"hooks/useSpace\";\nimport { transientOptions } from \"lib/utils\";\n\nconst Display = styled(\"div\", transientOptions)<{ $isUrgent: boolean }>`\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: start;\n background-color: #383838;\n padding: 0.5em;\n top: 12px;\n left: 12px;\n font-size: 1.5em;\n font-variant-numeric: tabular-nums;\n color: white;\n user-select: none;\n border-radius: 3px;\n z-index: 200;\n\n ${(props) =>\n props.$isUrgent &&\n `\n #countdown {\n color: red;\n }\n `}\n`;\n\nconst getClock = (diff: number) => {\n const minutes = Math.floor((diff / 1000 / 60) % 60);\n const seconds = Math.floor((diff / 1000) % 60);\n\n const minuteDisplay = 10 > minutes ? \"0\" + minutes : minutes;\n const secondDisplay = 10 > seconds ? \"0\" + seconds : seconds;\n\n return `${minuteDisplay}:${secondDisplay}`;\n};\n\nconst Timer = (): JSX.Element => {\n const { spaceEndsAt, leaveSpace } = useSpace();\n const diff = moment(spaceEndsAt).diff(moment());\n const [timeDisplay, setTimeDisplay] = useState(\n spaceEndsAt ? getClock(diff) : \"00:00\"\n );\n const router = useRouter();\n const [isTwoMinutesLeft, setIsTwoMinutesLeft] = useState(\n 120 >= Math.floor(diff / 1000)\n );\n\n useEffect(() => {\n const timer = setInterval(() => {\n const diff = moment(spaceEndsAt).diff(moment());\n\n if (diff > 0) {\n const clock = getClock(diff);\n setTimeDisplay(getClock(diff));\n setIsTwoMinutesLeft(120 >= Math.floor(diff / 1000));\n } else {\n leaveSpace();\n router.push(\"/\");\n }\n }, 1000);\n\n return () => clearInterval(timer);\n }, [router, leaveSpace, spaceEndsAt, isTwoMinutesLeft]);\n\n return (\n \n \n Time Left\n {timeDisplay}\n \n \n );\n};\n\nexport default Timer;\n" }, { "path": "components/Toasts.tsx", "content": "import styled from \"@emotion/styled\";\nimport { useRouter } from \"next/router\";\nimport { useCallback, useEffect, useRef } from \"react\";\nimport { Box, ToastId, useToast } from \"@chakra-ui/react\";\n\nimport { useSpace } from \"hooks/useSpace\";\n\nimport {\n broadcastingToastConfig,\n participantEventToastConfig,\n sharingScreenToastConfig,\n ToastIds,\n viewingSharedScreenToastConfig,\n} from \"shared/toastConfigs\";\n\nconst ToastBox = styled(Box)`\n color: #0a0a0b;\n background: #cff1fc;\n font-size: 14px;\n padding: 15px 50px;\n text-align: center;\n`;\n\nexport default function Toasts(): JSX.Element {\n const toast = useToast();\n const router = useRouter();\n const { isReady: isRouterReady } = router;\n const {\n isBroadcasting,\n isScreenShareActive,\n stopScreenShare,\n isLocalScreenShare,\n screenShareParticipantName,\n } = useSpace();\n const screenshareToastRef = useRef();\n const broadcastingToastRef = useRef();\n const participantEventToastIdRefs = useRef>([]);\n\n const showLocalScreenshareToast = useCallback(() => {\n if (!toast.isActive(ToastIds.SHARING_SCREEN_TOAST_ID)) {\n screenshareToastRef.current = toast({\n ...sharingScreenToastConfig,\n render: ({ onClose }) => {\n return (\n \n You are sharing your screen.\n {\n stopScreenShare();\n onClose();\n }}\n >\n Stop sharing\n \n \n );\n },\n });\n }\n }, [toast, stopScreenShare]);\n\n const showRemoteScreenshareToast = useCallback(() => {\n if (\n !toast.isActive(ToastIds.VIEWING_SHARED_SCREEN_TOAST_ID) &&\n screenShareParticipantName\n ) {\n screenshareToastRef.current = toast({\n ...viewingSharedScreenToastConfig,\n render: () => (\n \n {screenShareParticipantName} is sharing their screen.\n \n ),\n });\n }\n }, [toast, screenShareParticipantName]);\n\n const hideScreenshareToast = useCallback(() => {\n if (screenshareToastRef.current) {\n toast.close(screenshareToastRef.current);\n }\n }, [toast]);\n\n const showBroadcastToast = useCallback(() => {\n if (!toast.isActive(ToastIds.BROADCASTING_SCREEN_TOAST_ID)) {\n broadcastingToastRef.current = toast({\n ...broadcastingToastConfig,\n render: () => (\n {\"⦿ Space is currently being broadcast\"}\n ),\n });\n }\n }, [toast]);\n\n const hideBroadcastToast = useCallback(() => {\n if (broadcastingToastRef.current) {\n toast.close(broadcastingToastRef.current);\n }\n }, [toast]);\n\n const pruneParticipantEventRefs = useCallback(() => {\n // Don't show more than 10 participant event toasts on screen at a time, close the oldest if necessary\n while (participantEventToastIdRefs.current.length > 9) {\n let oldest = participantEventToastIdRefs.current.shift();\n if (oldest) {\n toast.close(oldest);\n }\n }\n\n // Prune ids of toasts that have already closed on their own\n participantEventToastIdRefs.current =\n participantEventToastIdRefs.current.filter((ref) => toast.isActive(ref));\n }, [participantEventToastIdRefs, toast]);\n\n const showParticipantEventToast = useCallback(\n (eventDescription: string) => {\n pruneParticipantEventRefs();\n participantEventToastIdRefs.current.push(\n toast({\n ...participantEventToastConfig,\n render: () => {eventDescription},\n })\n );\n },\n [toast, pruneParticipantEventRefs]\n );\n\n useEffect(() => {\n if (isScreenShareActive) {\n if (isLocalScreenShare) {\n showLocalScreenshareToast();\n } else {\n showRemoteScreenshareToast();\n }\n } else {\n hideScreenshareToast();\n }\n }, [\n isScreenShareActive,\n isLocalScreenShare,\n showLocalScreenshareToast,\n showRemoteScreenshareToast,\n hideScreenshareToast,\n ]);\n\n useEffect(() => {\n if (isBroadcasting) {\n showBroadcastToast();\n } else {\n hideBroadcastToast();\n }\n }, [isBroadcasting, showBroadcastToast, hideBroadcastToast]);\n\n useEffect(() => {\n if (!isRouterReady) return;\n\n function closeAllToasts() {\n hideBroadcastToast();\n hideScreenshareToast();\n for (let toastRef in participantEventToastIdRefs.current) {\n toast.close(toastRef);\n }\n pruneParticipantEventRefs();\n }\n\n router.events.on(\"routeChangeStart\", closeAllToasts);\n return () => {\n router.events.off(\"routeChangeStart\", closeAllToasts);\n };\n }, [\n isRouterReady,\n router,\n toast,\n hideBroadcastToast,\n hideScreenshareToast,\n pruneParticipantEventRefs,\n ]);\n\n return <>;\n}\n" }, { "path": "components/UserInteractionPrompt.tsx", "content": "import React, {\n useState,\n useEffect,\n useMemo,\n useRef,\n useContext,\n MutableRefObject,\n} from \"react\";\nimport Image from \"next/image\";\nimport {\n Button,\n Flex,\n FormControl,\n FormHelperText,\n FormLabel,\n HStack,\n Input,\n Stack,\n} from \"@chakra-ui/react\";\nimport { HiOutlineArrowNarrowRight } from \"react-icons/hi\";\n\nimport UserContext from \"context/User\";\nimport { useUserMedia } from \"hooks/useUserMedia\";\n\nimport MicrophoneButton from \"components/controls/buttons/MicrophoneButton\";\nimport CameraButton from \"components/controls/buttons/CameraButton\";\n\nimport muxLogo from \"../public/mux-logo.svg\";\n\ninterface Props {\n onInteraction: () => void;\n participantNameRef: MutableRefObject;\n}\n\nexport default function UserInteractionPrompt({\n onInteraction,\n participantNameRef,\n}: Props): JSX.Element {\n const nameInputRef = useRef(null);\n const didPopulateDevicesRef = useRef(false);\n const user = useContext(UserContext);\n const [participantName, setParticipantName] = useState(\"\");\n const [hasBlurredNameInput, setHasBlurredNameInput] = useState(false);\n\n const { requestPermissionAndPopulateDevices } = useUserMedia();\n\n useEffect(() => {\n if (nameInputRef.current) {\n nameInputRef.current.focus();\n }\n }, []);\n\n useEffect(() => {\n setParticipantName(user.participantName);\n }, [user.participantName]);\n\n const isNameInputInvalid = useMemo(\n () => !participantName && hasBlurredNameInput,\n [participantName, hasBlurredNameInput]\n );\n\n const handleParticipantNameChange = (event: {\n target: { value: string };\n }) => {\n setParticipantName(event.target.value);\n };\n\n useEffect(() => {\n if (didPopulateDevicesRef.current === false) {\n didPopulateDevicesRef.current = true;\n requestPermissionAndPopulateDevices();\n }\n }, [requestPermissionAndPopulateDevices]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n event?.preventDefault();\n participantNameRef.current = participantName;\n user.setParticipantName(participantName);\n user.setInteractionRequired(false);\n onInteraction();\n };\n\n return (\n \n \n
\n \n setHasBlurredNameInput(true)}\n >\n \n Enter your name\n \n \n \n This cannot be empty.\n \n \n\n }\n variant=\"flushed\"\n color=\"white\"\n >\n Join Space\n \n \n
\n \n \n \n \n \n );\n}\n" }, { "path": "components/controls/ControlsCenter.tsx", "content": "import React from \"react\";\nimport { HStack } from \"@chakra-ui/react\";\n\nimport MicrophoneButton from \"./buttons/MicrophoneButton\";\nimport CameraButton from \"./buttons/CameraButton\";\nimport ScreenShareButton from \"./buttons/ScreenShareButton\";\nimport SettingsButton from \"./buttons/SettingsButton\";\nimport ChatButton from \"./buttons/ChatButton\";\nimport useWindowDimensions from \"hooks/useWindowDimension\";\nimport { useSpace } from \"hooks/useSpace\";\n\ninterface Props {\n onLeave: () => void;\n}\n\nexport default function ControlsCenter({ onLeave }: Props): JSX.Element {\n const { width = 0 } = useWindowDimensions();\n const { isLocalScreenShareSupported } = useSpace();\n\n return (\n \n \n \n {isLocalScreenShareSupported && }\n {width > 800 && }\n \n \n );\n}\n" }, { "path": "components/controls/ControlsLeft.tsx", "content": "import React from \"react\";\nimport Image from \"next/image\";\nimport { Flex } from \"@chakra-ui/react\";\n\nimport muxLogo from \"../../public/mux-logo.svg\";\n\nexport default function ControlsLeft(): JSX.Element {\n return (\n \n \n \n \n \n );\n}\n" }, { "path": "components/controls/ControlsRight.tsx", "content": "import React from \"react\";\nimport { Button, Flex, Text } from \"@chakra-ui/react\";\nimport LeaveIcon from \"components/icons/LeaveIcon\";\nimport SpaceContext from \"context/Space\";\nimport styled from \"@emotion/styled\";\nimport useWindowDimensions from \"hooks/useWindowDimension\";\n\ninterface Props {\n onLeave: () => void;\n}\n\nconst ParticipantsLabel = styled.span`\n color: #cccccc;\n font-size: 12px;\n line-height: 12px;\n text-transform: uppercase;\n letter-spacing: 0.8px;\n`;\n\nconst ParticipantCount = styled.span`\n font-size: 21px;\n line-height: 21px;\n letter-spacing: -0.5px;\n margin-top: 5px;\n`;\n\nexport default function ControlsRight({ onLeave }: Props): JSX.Element {\n const { participantCount } = React.useContext(SpaceContext);\n\n const { width } = useWindowDimensions();\n const hideParticipantCount = (width && width < 1000) || false;\n\n return (\n \n \n \n Leave\n \n \n {!hideParticipantCount && (\n <>\n Participants\n {participantCount}\n \n )}\n \n \n );\n}\n" }, { "path": "components/controls/buttons/CameraButton.tsx", "content": "import React, { useCallback } from \"react\";\nimport {\n Box,\n ButtonGroup,\n Flex,\n IconButton,\n Menu,\n MenuButton,\n MenuItem,\n MenuList,\n Tooltip,\n Text,\n} from \"@chakra-ui/react\";\nimport { useHotkeys } from \"react-hotkeys-hook\";\nimport { AiOutlineCheck } from \"react-icons/ai\";\n\nimport UserContext from \"context/User\";\nimport { useSpace } from \"hooks/useSpace\";\nimport { useUserMedia } from \"hooks/useUserMedia\";\n\nimport ChevronIcon from \"components/icons/ChevronIcon\";\nimport MuteCameraIcon from \"components/icons/MuteCameraIcon\";\nimport UnmuteCameraIcon from \"components/icons/UnmuteCameraIcon\";\n\nexport default function CameraButton(): JSX.Element {\n const { cameraOff, setCameraOff, cameraDeviceId, setCameraDeviceId } =\n React.useContext(UserContext);\n const { isJoined, publishCamera, unPublishDevice } = useSpace();\n const { cameraDevices, stopActiveCamera } = useUserMedia();\n\n const selectCameraDevice = useCallback(\n async (deviceId: string) => {\n setCameraDeviceId(deviceId);\n\n if (isJoined && !cameraOff) {\n publishCamera(deviceId);\n }\n },\n [isJoined, setCameraDeviceId, cameraOff, publishCamera]\n );\n\n const toggleCamera = useCallback(async () => {\n if (cameraOff) {\n setCameraOff(false);\n if (isJoined) {\n publishCamera(cameraDeviceId);\n }\n } else {\n setCameraOff(true);\n stopActiveCamera();\n if (isJoined) {\n unPublishDevice(cameraDeviceId);\n }\n }\n }, [\n isJoined,\n cameraOff,\n setCameraOff,\n cameraDeviceId,\n stopActiveCamera,\n publishCamera,\n unPublishDevice,\n ]);\n\n const hotkeyText = \"⌘ + e\"; // adding this here to make it easy to change later. appears in tooltip on button.\n useHotkeys(\n \"meta+e\",\n () => {\n toggleCamera();\n },\n { preventDefault: true },\n [toggleCamera]\n );\n\n const ariaLabel = cameraOff ? \"Unhide\" : \"Hide\";\n\n return (\n \n \n : }\n onClick={toggleCamera}\n />\n \n \n {({ isOpen }) => (\n <>\n }\n zIndex={100}\n minWidth=\"20px\"\n {...(isOpen && { transform: \"rotate(180deg)\" })}\n />\n \n \n CAMERA\n \n {cameraDevices.map((device) => {\n return (\n selectCameraDevice(device.deviceId)}\n >\n \n {device.label}\n {cameraDeviceId === device.deviceId && (\n \n \n \n )}\n \n \n );\n })}\n \n \n )}\n \n \n );\n}\n" }, { "path": "components/controls/buttons/ChatButton.tsx", "content": "import React, { useContext } from \"react\";\nimport { IconButton, Tooltip } from \"@chakra-ui/react\";\n\nimport ChatIcon from \"../../icons/ChatIcon\";\nimport ChatContext from \"context/Chat\";\nimport styled from \"@emotion/styled\";\n\ninterface Props {\n isActive: boolean;\n hasNotifications: boolean;\n}\n\nconst UnreadCircle = styled.div`\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #fa50b5;\n top: calc(50% - 17.5px);\n right: calc(50% - 17.5px);\n`;\n\nexport default function ChatButton(): JSX.Element {\n const { numUnreadMessages, isChatOpen, openChat, closeChat } =\n useContext(ChatContext);\n\n return (\n \n \n \n {numUnreadMessages > 0 && }\n \n }\n {...(isChatOpen && {\n background: \"#3E4247\",\n border: \"1px solid #FFFFFF\",\n })}\n onClick={isChatOpen ? closeChat : openChat}\n />\n \n );\n}\n" }, { "path": "components/controls/buttons/MicrophoneButton.tsx", "content": "import React, { useCallback, useEffect, useState } from \"react\";\nimport {\n Box,\n Flex,\n IconButton,\n Menu,\n MenuButton,\n MenuItem,\n MenuList,\n Tooltip,\n Text,\n ButtonGroup,\n} from \"@chakra-ui/react\";\nimport { useHotkeys } from \"react-hotkeys-hook\";\nimport { AiOutlineCheck } from \"react-icons/ai\";\n\nimport UserContext from \"context/User\";\nimport { useSpace } from \"hooks/useSpace\";\nimport { useUserMedia } from \"hooks/useUserMedia\";\n\nimport ChevronIcon from \"components/icons/ChevronIcon\";\nimport MuteMicrophoneIcon from \"components/icons/MuteMicrophoneIcon\";\nimport UnmuteMicrophoneIcon from \"components/icons/UnmuteMicrophoneIcon\";\n\nexport default function MicrophoneButton(): JSX.Element {\n const {\n userWantsMicMuted,\n setUserWantsMicMuted,\n microphoneDeviceId,\n setMicrophoneDeviceId,\n } = React.useContext(UserContext);\n const {\n microphoneDevices,\n muteActiveMicrophone,\n unMuteActiveMicrophone,\n getActiveMicrophoneLevel,\n } = useUserMedia();\n const { isJoined, publishMicrophone } = useSpace();\n const [temporaryUnmute, setTemporaryUnmute] = useState(false);\n const [mouseOver, setMouseOver] = useState(false);\n const [micLevelPercent, setMicLevelPercent] = useState(0);\n const [micDistorted, setMicDistorted] = useState(false);\n\n const requestRef = React.useRef();\n\n const selectAudioDevice = useCallback(\n async (deviceId: string) => {\n setMicrophoneDeviceId(deviceId);\n if (isJoined) {\n publishMicrophone(deviceId);\n }\n },\n [isJoined, setMicrophoneDeviceId, publishMicrophone]\n );\n\n const toggleMicrophone = useCallback(() => {\n if (userWantsMicMuted) {\n setUserWantsMicMuted(false);\n unMuteActiveMicrophone();\n } else {\n setUserWantsMicMuted(true);\n muteActiveMicrophone();\n }\n }, [\n userWantsMicMuted,\n setUserWantsMicMuted,\n muteActiveMicrophone,\n unMuteActiveMicrophone,\n ]);\n\n const animateMeter = useCallback(() => {\n if (requestRef.current != undefined && getActiveMicrophoneLevel) {\n let levels = getActiveMicrophoneLevel();\n\n if (levels) {\n // Convert to 0-100 scale\n let scaled = (Math.max(-60, levels.avgDb) + 60) * 1.66;\n setMicLevelPercent(scaled);\n\n if (levels.peakDb > -0.5) {\n setMicDistorted(true);\n } else {\n setMicDistorted(false);\n }\n } else {\n setMicLevelPercent(0);\n setMicDistorted(false);\n }\n }\n requestRef.current = requestAnimationFrame(animateMeter);\n }, [getActiveMicrophoneLevel]);\n\n useEffect(() => {\n requestRef.current = requestAnimationFrame(animateMeter);\n return () => {\n if (requestRef.current) {\n cancelAnimationFrame(requestRef.current);\n }\n };\n }, [animateMeter]);\n\n const hotkeyText = \"⌘ + d\"; // adding this here to make it easy to change later. appears in tooltip on button.\n useHotkeys(\n \"meta+d\",\n () => {\n toggleMicrophone();\n },\n { preventDefault: true },\n [toggleMicrophone]\n );\n\n useHotkeys(\n \"space\",\n () => {\n if (userWantsMicMuted && !temporaryUnmute) {\n unMuteActiveMicrophone();\n setTemporaryUnmute(true);\n }\n },\n { keydown: true, preventDefault: true },\n [unMuteActiveMicrophone, userWantsMicMuted, temporaryUnmute]\n );\n useHotkeys(\n \"space\",\n () => {\n if (temporaryUnmute) {\n setTemporaryUnmute(false);\n if (userWantsMicMuted) {\n muteActiveMicrophone();\n }\n }\n },\n { keyup: true, preventDefault: true },\n [muteActiveMicrophone, userWantsMicMuted, temporaryUnmute]\n );\n\n const ariaLabel = userWantsMicMuted ? \"Unmute\" : \"Mute\";\n\n return (\n \n \n setMouseOver(true)}\n onMouseLeave={() => setMouseOver(false)}\n icon={\n userWantsMicMuted && !temporaryUnmute ? (\n \n ) : (\n \n )\n }\n onClick={toggleMicrophone}\n {...(isJoined &&\n (micDistorted\n ? {\n background: `radial-gradient(50% 50% at 50% 50%, rgba(255, 92, 56, 0.75) 0%, rgba(255, 92, 56, 0) ${micLevelPercent}%)`,\n }\n : {\n background: `radial-gradient(50% 50% at 50% 50%, rgba(27, 227, 73, 0.75) 0%, rgba(27, 227, 73, 0) ${micLevelPercent}%)`,\n }))}\n />\n \n \n {({ isOpen }) => (\n <>\n }\n variant=\"controlMenu\"\n minWidth=\"20px\"\n {...(isOpen && { transform: \"rotate(180deg)\" })}\n />\n \n \n MICROPHONE\n \n {microphoneDevices.map((device: MediaDeviceInfo) => {\n return (\n selectAudioDevice(device.deviceId)}\n >\n \n {device.label}\n {microphoneDeviceId == device.deviceId && (\n \n \n \n )}\n \n \n );\n })}\n \n \n )}\n \n ;\n \n );\n}\n" }, { "path": "components/controls/buttons/ScreenShareButton.tsx", "content": "import React from \"react\";\nimport { IconButton, Tooltip } from \"@chakra-ui/react\";\n\nimport { useSpace } from \"hooks/useSpace\";\n\nimport ScreenShareIcon from \"../../icons/ScreenShareIcon\";\n\nexport default function ScreenShareButton(): JSX.Element {\n const {\n isLocalScreenShare,\n isScreenShareActive,\n startScreenShare,\n stopScreenShare,\n } = useSpace();\n\n return (\n \n }\n {...(isLocalScreenShare && {\n background: \"#3E4247\",\n border: \"1px solid #FFFFFF\",\n })}\n onClick={isLocalScreenShare ? stopScreenShare : startScreenShare}\n />\n \n );\n}\n" }, { "path": "components/controls/buttons/SendButton.tsx", "content": "import React, { useContext } from \"react\";\nimport { IconButton, Tooltip } from \"@chakra-ui/react\";\n\nimport styled from \"@emotion/styled\";\nimport SendIcon from \"components/icons/SendIcon\";\nimport { transientOptions } from \"lib/utils\";\n\ninterface Props {\n isButtonEnabled: boolean;\n handleOnClick: () => void;\n}\n\nconst StatefulSendButton = styled(IconButton, transientOptions)<{\n $isButtonEnabled: boolean;\n}>`\n opacity: ${(props) => (props.$isButtonEnabled ? \"1\" : \"0.25\")};\n user-select: none;\n`;\n\nexport default function SendButton({\n isButtonEnabled,\n handleOnClick,\n}: Props): JSX.Element {\n return (\n }\n onClick={handleOnClick}\n disabled={!isButtonEnabled}\n />\n );\n}\n" }, { "path": "components/controls/buttons/SettingsButton.tsx", "content": "import React from \"react\";\nimport {\n Box,\n IconButton,\n Menu,\n MenuButton,\n MenuItem,\n MenuList,\n useDisclosure,\n useToast,\n} from \"@chakra-ui/react\";\nimport { useRouter } from \"next/router\";\n\nimport { copyLinkToastConfig, ToastIds } from \"shared/toastConfigs\";\nimport { useSpace } from \"hooks/useSpace\";\nimport useWindowDimensions from \"hooks/useWindowDimension\";\n\nimport SettingsIcon from \"components/icons/SettingsIcon\";\nimport RenameParticipantModal from \"components/modals/RenameParticipantModal\";\n\ninterface Props {\n onLeave: () => void;\n}\n\nexport default function SettingsButton({ onLeave }: Props): JSX.Element {\n const toast = useToast();\n const router = useRouter();\n const { width } = useWindowDimensions();\n const { isLocalScreenShare } = useSpace();\n\n const {\n isOpen: isRenameModalOpen,\n onOpen: onRenameModalOpen,\n onClose: onRenameModalClose,\n } = useDisclosure();\n\n const smallWindowWidth = (width && width < 480) || false;\n\n const shareLink = () => {\n navigator.clipboard.writeText(\n `${window.location.protocol}//${window.location.host}/space/${router.query[\"id\"]}`\n );\n if (!toast.isActive(ToastIds.COPY_LINK_TOAST_ID)) {\n toast(copyLinkToastConfig);\n }\n };\n\n return (\n <>\n \n \n \n }\n />\n \n \n Change Name\n \n Copy Invite Link\n {smallWindowWidth && Leave}\n \n \n \n \n );\n}\n" }, { "path": "components/icons/ChatIcon.tsx", "content": "import React from \"react\";\nimport Image from \"next/image\";\n\nimport chat from \"../../public/chat.svg\";\n\nexport default function ChatIcon(): JSX.Element {\n return (\n \n );\n}\n" }, { "path": "components/icons/ChevronIcon.tsx", "content": "import React from \"react\";\nimport Image from \"next/image\";\n\nimport chevronUp from \"../../public/chevronUp.svg\";\n\nexport default function ChevronIcon(): JSX.Element {\n return (\n \"open\n );\n}\n" }, { "path": "components/icons/ChevronLeftIcon.tsx", "content": "import React from \"react\";\nimport Image from \"next/image\";\n\nimport chevronLeft from \"../../public/chevronLeft.svg\";\n\nexport default function ChevronLeftIcon(): JSX.Element {\n return \"paginate;\n}\n" }, { "path": "components/icons/ChevronRightIcon.tsx", "content": "import React from \"react\";\nimport Image from \"next/image\";\n\nimport chevronRight from \"../../public/chevronRight.svg\";\n\nexport default function ChevronRightIcon(): JSX.Element {\n return (\n \"paginate\n );\n}\n" }, { "path": "components/icons/LeaveIcon.tsx", "content": "import React from \"react\";\n\nexport default function LeaveIcon(): JSX.Element {\n return (\n \n \n \n );\n}\n" }, { "path": "components/icons/MuteCameraIcon.tsx", "content": "import React from \"react\";\nimport Image from \"next/image\";\n\nimport cameraOnIcon from \"../../public/cameraOn.svg\";\n\nexport default function MuteCameraIcon(): JSX.Element {\n return (\n \n );\n}\n" }, { "path": "components/icons/MuteMicrophoneIcon.tsx", "content": "import React from \"react\";\nimport Image from \"next/image\";\n\nimport microphoneOffIcon from \"../../public/microphoneOff.svg\";\n\nexport default function MuteMicrophoneIcon(): JSX.Element {\n return (\n \n );\n}\n" }, { "path": "components/icons/ScreenShareIcon.tsx", "content": "import React from \"react\";\nimport Image from \"next/image\";\n\nimport screenShare from \"../../public/screen-share.svg\";\n\nexport default function ScreenShareIcon(): JSX.Element {\n return (\n \n );\n}\n" }, { "path": "components/icons/SendIcon.tsx", "content": "import React from \"react\";\nimport Image from \"next/image\";\n\nimport send from \"../../public/send.svg\";\n\nexport default function SendIcon(): JSX.Element {\n return (\n \n );\n}\n" }, { "path": "components/icons/SettingsIcon.tsx", "content": "import Image from \"next/image\";\n\nimport elipsisIcon from \"../../public/elipsis.svg\";\n\nexport default function SettingsIcon() {\n return (\n \n );\n}\n" }, { "path": "components/icons/UnmuteCameraIcon.tsx", "content": "import React from \"react\";\nimport Image from \"next/image\";\n\nimport cameraOffIcon from \"../../public/cameraOff.svg\";\n\nexport default function UnmuteCameraIcon(): JSX.Element {\n return (\n \n );\n}\n" }, { "path": "components/icons/UnmuteMicrophoneIcon.tsx", "content": "import React from \"react\";\nimport Image from \"next/image\";\n\nimport microphoneOnIcon from \"../../public/microphoneOn.svg\";\n\nexport default function UnmuteMicrophoneIcon(): JSX.Element {\n return (\n \n );\n}\n" }, { "path": "components/modals/ACRScoreDialog.tsx", "content": "import React, { useCallback, useRef, useState } from \"react\";\nimport {\n useDisclosure,\n Button,\n AlertDialog,\n AlertDialogOverlay,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogCloseButton,\n Box,\n useRadio,\n useRadioGroup,\n VStack,\n RadioProps,\n Divider,\n} from \"@chakra-ui/react\";\nimport { AcrScore } from \"@mux/spaces-web\";\n\nimport { useSpace } from \"hooks/useSpace\";\n\nfunction RadioCard(props: RadioProps) {\n const { getInputProps, getCheckboxProps } = useRadio(props);\n\n const input = getInputProps();\n const checkbox = getCheckboxProps();\n\n return (\n \n \n \n {props.children}\n \n \n );\n}\n\ntype Props = Pick, \"isOpen\" | \"onClose\">;\n\nconst options = [\"Excellent\", \"Good\", \"Fair\", \"Poor\", \"Bad\"];\n\nexport default function ACRScoreDialog({ isOpen, onClose }: Props) {\n const cancelRef = useRef(null);\n const { submitAcrScore } = useSpace();\n const [acrScore, setAcrScore] = useState();\n const [submitting, setSubmitting] = useState(false);\n const [closing, setClosing] = useState(false);\n\n const { getRootProps, getRadioProps } = useRadioGroup({\n name: \"acr\",\n onChange: (nextValue) => setAcrScore(nextValue),\n });\n\n const handleSubmittingAcrScore = useCallback(async () => {\n if (acrScore) {\n setSubmitting(true);\n const numericScore = AcrScore[acrScore as keyof typeof AcrScore];\n try {\n await submitAcrScore(numericScore);\n } catch (e) {\n console.error(e);\n }\n onClose();\n }\n }, [acrScore, submitAcrScore, onClose]);\n\n const handleClose = useCallback(() => {\n setClosing(true);\n onClose();\n }, [onClose]);\n\n const group = getRootProps();\n const disableSubmission = closing || !acrScore;\n\n return (\n <>\n \n \n\n \n \n How was the call quality?\n \n \n \n \n \n {options.map((value) => {\n const radio = getRadioProps({ value });\n return (\n \n {value}\n \n );\n })}\n \n \n \n \n \n Submit\n \n \n \n \n \n );\n}\n" }, { "path": "components/modals/ErrorModal.tsx", "content": "import {\n Button,\n Modal,\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n} from \"@chakra-ui/react\";\n\ninterface Props {\n title: string;\n message: string;\n isOpen: boolean;\n onClose: () => void;\n}\n\nexport default function ErrorModal({ title, message, isOpen, onClose }: Props) {\n return (\n \n \n \n {title}\n \n {message}\n\n \n \n \n \n \n );\n}\n" }, { "path": "components/modals/RenameParticipantModal.tsx", "content": "import React, {\n useCallback,\n useMemo,\n useRef,\n useState,\n useContext,\n} from \"react\";\nimport {\n Modal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n Button,\n useDisclosure,\n FormControl,\n FormHelperText,\n Input,\n Divider,\n} from \"@chakra-ui/react\";\n\nimport UserContext from \"context/User\";\nimport SpaceContext from \"context/Space\";\n\ntype Props = Pick, \"isOpen\" | \"onClose\"> & {};\n\nexport default function RenameParticipantModal({\n isOpen,\n onClose,\n}: Props): JSX.Element {\n const user = React.useContext(UserContext);\n const nameInputRef = useRef(null);\n const [participantName, setParticipantName] = useState(user.participantName);\n const { setDisplayName } = useContext(SpaceContext);\n\n const invalidParticipantName = useMemo(\n () => !participantName,\n [participantName]\n );\n\n const handleDisplayNameChanged = (event: { target: { value: string } }) => {\n setParticipantName(event.target.value);\n };\n\n const handleClose = useCallback(() => {\n setParticipantName(user.participantName);\n onClose();\n }, [onClose, setParticipantName, user]);\n\n const submit = useCallback(async () => {\n if (invalidParticipantName) return;\n if (user.participantName !== participantName) {\n user.setParticipantName(participantName);\n await setDisplayName(participantName);\n }\n onClose();\n }, [invalidParticipantName, onClose, participantName, setDisplayName, user]);\n\n return (\n \n \n\n \n \n {\"What's your name?\"}\n \n \n \n \n \n {\n if (e.key === \"Enter\") {\n submit();\n }\n }}\n />\n \n \n \n \n \n \n Enter\n \n \n \n \n );\n}\n" }, { "path": "components/renderers/AudioRenderer.tsx", "content": "import { useEffect, useRef } from \"react\";\n\ninterface AudioTrackProps {\n attachFunc: (element: HTMLAudioElement) => void;\n}\n\nconst AudioRenderer = ({ attachFunc }: AudioTrackProps) => {\n const audioEl = useRef(null);\n\n useEffect(() => {\n const el = audioEl.current;\n if (!el) return;\n\n attachFunc(el);\n }, [attachFunc]);\n\n return