"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figure: "figure", h1: "h1", img: "img", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "This blog will guide you to build a walkie talkie web app with Next js, Chakra UI and Livekit." }), "\n", _jsx(_components.p, { children: "I am using Livekit because it is easy and open source, which means you can use your own server to deploy the Livekit service. But, in this case I am using the Livekit cloud because I could not run the server successfully and I thought to deploy it to Vercel, so it is better to use the cloud. However, if you are going to use this on local network you can try without the Livekit cloud." }), "\n", _jsx(_components.h1, { children: "Set up" }), "\n", _jsx(_components.p, { children: "To begin with, let's create next app first using this code in your terminal." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, tabIndex: "0", "data-language": "bash", "data-theme": "andromeeda one-light", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "andromeeda one-light", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "npx" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " create-next-app@latest" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " walkie-talkie" })] }) }) }) }), "\n", _jsx(_components.p, { children: "You can follow this setting:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, tabIndex: "0", "data-language": "bash", "data-theme": "andromeeda one-light", children: _jsxs(_components.code, { "data-language": "bash", "data-theme": "andromeeda one-light", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "Need" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " to" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " install" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " the" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " following" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " packages:" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "create-next-app@14.2.6" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "Ok" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " to" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " proceed?" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (y) y" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "√" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " Would" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " you" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " like" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " to" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " use" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " TypeScript?" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " ..." }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " No" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " /" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " Yes" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "*" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "√" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " Would" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " you" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " like" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " to" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " use" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " ESLint?" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " ..." }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " No" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "*" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "/" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " Yes" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "√" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " Would" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " you" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " like" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " to" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " use" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " Tailwind" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " CSS?" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " ..." }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " No" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "*" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "/" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " Yes" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "√" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " Would" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " you" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " like" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " to" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " use" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " `" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "src/" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "`" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " directory?" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " ..." }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " No" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "*" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "/" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " Yes" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "√" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " Would" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " you" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " like" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " to" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " use" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " App" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " Router?" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (recommended) ... No / Yes(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "*" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "√" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " Would" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " you" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " like" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " to" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " customize" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " the" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " default" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " import" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " alias" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (@/*)" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "?" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " ... No(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "*" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") / Yes" })] })] }) }) }), "\n", _jsx(_components.p, { children: "After that, you will wait for the Next js app to finish installing, then you can move to the walkie-talkie directory and install Chakra UI and Livekit." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, tabIndex: "0", "data-language": "bash", "data-theme": "andromeeda one-light", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "andromeeda one-light", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "npm" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " i" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " @chakra-ui/react" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " @emotion/react" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " @emotion/styled" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " framer-motion" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " react/icons" })] }) }) }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, tabIndex: "0", "data-language": "bash", "data-theme": "andromeeda one-light", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "andromeeda one-light", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "npm" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " i" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " @livekit/components-react" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " @livekit/components-styles" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " livekit-client" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " livekit-server-sdk" })] }) }) }) }), "\n", _jsx(_components.p, { children: "With all packages are installed, we can start setting up Chakra UI in Next js app. Open your code editor and put this code in your root layout.tsx." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, tabIndex: "0", "data-language": "jsx", "data-theme": "andromeeda one-light", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "andromeeda one-light", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#A0A1A7CC", "--shiki-dark-font-style": "inherit", "--shiki-light": "#A0A1A7", "--shiki-light-font-style": "italic" }, children: "// app/layout.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#E45649" }, children: " default" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " function" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " RootLayout" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: " children" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#C18401" }, children: " Readonly" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "<{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: " children" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#50A14F" }, children: " React" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#C18401" }, children: "ReactNode" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}>) {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " return" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#F92672", "--shiki-light": "#E45649" }, children: "html" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " lang" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"en\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#F92672", "--shiki-light": "#E45649" }, children: "body" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Providers" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "children" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, tabIndex: "0", "data-language": "jsx", "data-theme": "andromeeda one-light", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "andromeeda one-light", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#A0A1A7CC", "--shiki-dark-font-style": "inherit", "--shiki-light": "#A0A1A7", "--shiki-light-font-style": "italic" }, children: "// libs/chakraprovider.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "'use client'" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "ChakraProvider" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " } " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " '@chakra-ui/react'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " function" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " Providers" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({ " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "children" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "children" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#50A14F" }, children: " React" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#C18401" }, children: "ReactNode" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " return" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "ChakraProvider" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#CA1243" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "children" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#CA1243" }, children: "}" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["Do not forget to sign up on ", _jsx(_components.a, { href: "https://cloud.livekit.io/", children: "Livekit" }), " to get API key and API secret, then you need to save it to .env file and put it on the root folder."] }), "\n", _jsx(_components.h1, { children: "UI and Methods" }), "\n", _jsx(_components.p, { children: "After it is done, we can continue to implement UI, you can delete all app/page.tsx and change into this code." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, tabIndex: "0", "data-language": "jsx", "data-theme": "andromeeda one-light", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "andromeeda one-light", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#A0A1A7CC", "--shiki-dark-font-style": "inherit", "--shiki-light": "#A0A1A7", "--shiki-light-font-style": "italic" }, children: "// app/page.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "<>" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#F92672", "--shiki-light": "#E45649" }, children: "audio" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " style" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{{ " }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: "display" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"none\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "ref" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}/>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Center" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " height" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"100vh\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Stack" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " alignItems" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"center\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Box" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "IconButton" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " aria-label" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"mic\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " icon" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "mic" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: " ?" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "FaMicrophone" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "/> " }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "FaMicrophoneSlash" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "/>} " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " borderRadius" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"full\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " boxSize" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{[" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"250px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"300px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "]} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "fontSize" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{[" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"80px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"100px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "]} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "_hover" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{{ " }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: "boxShadow" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"none\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " onClick" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "enableMic" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "isDisabled" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "status" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: " ||" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " status" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}/>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Stack" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " pt" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: "4" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "direction" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"row\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " alignItems" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"center\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " gap" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: "4" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " status" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: " ?" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Spinner" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " size" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"lg\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "/> " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: " :" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "status" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "?" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Icon" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " aria-label" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"connected\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " as" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "MdOutlineSignalWifiStatusbar4Bar" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "fontSize" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{[" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"30px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"40px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "]}/> " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: " :" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Icon" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " aria-label" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"not connected\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " as" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "MdOutlineSignalWifiStatusbarNull" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "fontSize" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{[" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"30px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"40px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "]}/>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Text" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " fontWeight" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"bold\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " fontSize" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{[" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: "25" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: "35" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "]}>{" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "status" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "" }) })] }) }) }), "\n", _jsx(_components.p, { children: "Okay, the UI has been implemented, next we will fill the missing part for the functions and the states, I will breakdown one by one." }), "\n", _jsx(_components.p, { children: "We will have a big icon button in the middle of the screen to control mic, it will mute and umute the mic. Below the icon button, we have text as information, it will be connected, connecting to room or error, all of that will contain in status state. The other states will be room, from Livekit room and we need to remember the mic state it will be boolean and audioRef for refrence from audio tag in component." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, tabIndex: "0", "data-language": "jsx", "data-theme": "andromeeda one-light", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "andromeeda one-light", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#A0A1A7CC", "--shiki-dark-font-style": "inherit", "--shiki-light": "#A0A1A7", "--shiki-light-font-style": "italic" }, children: "// app/page.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "const" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " [" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "status" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "] " }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " useState" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"connecting...\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "const" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " [" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "setRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "] " }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " useState" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#C18401" }, children: "Room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "const" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " [" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "mic" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "setMic" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "] " }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " useState" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#383A42" }, children: "boolean" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: "false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "const" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: " audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " useRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#C18401" }, children: "HTMLAudioElement" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: "null" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] })] }) }) }), "\n", _jsx(_components.p, { children: "Move on into methods, we have enableMic, its role to switch mic on and off, the other one is error which it will set the status state to error condition and will change the UI as information for the user." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, tabIndex: "0", "data-language": "jsx", "data-theme": "andromeeda one-light", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "andromeeda one-light", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#A0A1A7CC", "--shiki-dark-font-style": "inherit", "--shiki-light": "#A0A1A7", "--shiki-light-font-style": "italic" }, children: "// app/page.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "const" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " error" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "message" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#0184BC" }, children: " string" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: " message" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "const" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " enableMic" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " async" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " () " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " if" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "!" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "return" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: " currentMicState" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " !" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "mic" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#E45649" }, children: "localParticipant" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "setMicrophoneEnabled" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "!" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "mic" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setMic" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "currentMicState" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["The last thing in page.tsx we have useEffects for subscribing to RoomEvent and also connect to room when user visit the page. For the first useEffect, it will connect user to the Livekit cloud and create room which in this occasion we will have just one room but it is possible for you to create multiple rooms if you want. If you see other services, they usually mute the mic at first, but I found issue with ", _jsx(_components.span, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.code, { "data-language": "plaintext", "data-theme": "andromeeda one-light", style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, children: _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "localParticipant.setMicrophoneEnabled(false)" }) }) }) }), ", it will not let you subscribe to other participants audio and makes you cannot hear any sound before you turn on your mic, so the solution is set it true first and then set it false."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, tabIndex: "0", "data-language": "jsx", "data-theme": "andromeeda one-light", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "andromeeda one-light", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#A0A1A7CC", "--shiki-dark-font-style": "inherit", "--shiki-light": "#A0A1A7", "--shiki-light-font-style": "italic" }, children: "// app/page.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "useEffect" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(() " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " getRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " async" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " () " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " try" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: " res" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " fetch" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"/api/room\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " method" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"POST\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "token" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " } " }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " res" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "json" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: " currentRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#A626A4" }, children: " new" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " Room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " audioCaptureDefaults" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " autoGainControl" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " deviceId" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " echoCancellation" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " noiseSuppression" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " publishDefaults" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " audioPreset" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " maxBitrate" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: " 20_000" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "currentRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " currentRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "connect" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "process" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#E45649" }, children: "env" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "LIVEKIT_URL" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#383A42" }, children: " as" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#0184BC" }, children: " string" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "token" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " currentRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#E45649" }, children: "localParticipant" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "setMicrophoneEnabled" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: "true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " currentRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#E45649" }, children: "localParticipant" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "setMicrophoneEnabled" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: "false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " } " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "catch" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " error" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"room error\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " getRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", []}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " }) })] }) }) }), "\n", _jsx(_components.p, { children: "And for RoomEvent, it only set message to user and connect to audio through audioRef." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, tabIndex: "0", "data-language": "jsx", "data-theme": "andromeeda one-light", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "andromeeda one-light", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#A0A1A7CC", "--shiki-dark-font-style": "inherit", "--shiki-light": "#A0A1A7", "--shiki-light-font-style": "italic" }, children: "// app/page.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "useEffect" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(() " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " if" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "!" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "room" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " ||" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " !" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "current" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "return" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "on" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "RoomEvent" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Connected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", () " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({ " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"walkie talkie room\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setTimeout" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(() " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "((" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "prev" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " ({ " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " ..." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "prev" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"connected\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }))" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }, " }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: "1000" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "on" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "RoomEvent" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Disconnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "async" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "reason" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({ " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"disconnected\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "on" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "RoomEvent" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Reconnecting" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", () " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"reconnecting\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "on" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "RoomEvent" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Reconnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", () " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({ " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"reconnected to room\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setTimeout" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(() " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "((" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "prev" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " ({ " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " ..." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "prev" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"connected\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }))" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }, " }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: "1000" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "on" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "RoomEvent" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "TrackSubscribed" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", (" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "track" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "publication" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "participant" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " if" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "!" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "current" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "return" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " track" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "attach" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "current" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "on" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "RoomEvent" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "TrackUnsubscribed" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", (" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "track" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "publication" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "participant" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " if" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "!" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "current" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "return" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " track" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "detach" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "current" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}, [" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "])" })] })] }) }) }), "\n", _jsx(_components.p, { children: "It all finish, you can see the complete code below." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, tabIndex: "0", "data-language": "jsx", "data-theme": "andromeeda one-light", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "andromeeda one-light", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#A0A1A7CC", "--shiki-dark-font-style": "inherit", "--shiki-light": "#A0A1A7", "--shiki-light-font-style": "italic" }, children: "// app/page.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "'use client'" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Box" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Center" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Icon" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "IconButton" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Spinner" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Stack" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Text" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " } " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"@chakra-ui/react\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "RoomEvent" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " } " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"livekit-client\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "useEffect" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "useRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "useState" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " } " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"react\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "FaMicrophone" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "FaMicrophoneSlash" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " } " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"react-icons/fa\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "MdOutlineSignalWifiStatusbar4Bar" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "MdOutlineSignalWifiStatusbarNull" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " } " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"react-icons/md\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#E45649" }, children: " default" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " function" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " Page" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " [" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "status" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "] " }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " useState" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"connecting...\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " [" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "setRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "] " }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " useState" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#C18401" }, children: "Room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " [" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "mic" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "setMic" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "] " }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " useState" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#383A42" }, children: "boolean" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: "false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: " audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " useRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#C18401" }, children: "HTMLAudioElement" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: "null" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " error" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "message" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#0184BC" }, children: " string" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: " message" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " enableMic" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " async" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " () " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " if" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "!" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "return" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: " currentMicState" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " !" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "mic" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#E45649" }, children: "localParticipant" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "setMicrophoneEnabled" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "!" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "mic" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setMic" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "currentMicState" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " getRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " async" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " () " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " try" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: " res" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " fetch" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"/api/room\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " method" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"POST\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "token" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " } " }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " res" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "json" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: " currentRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#A626A4" }, children: " new" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " Room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " audioCaptureDefaults" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " autoGainControl" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " deviceId" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " echoCancellation" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " noiseSuppression" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " publishDefaults" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " audioPreset" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " maxBitrate" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: " 20_000" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "currentRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " currentRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "connect" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "process" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#E45649" }, children: "env" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "LIVEKIT_URL" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#383A42" }, children: " as" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#0184BC" }, children: " string" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "token" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " currentRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#E45649" }, children: "localParticipant" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "setMicrophoneEnabled" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: "true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " currentRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#E45649" }, children: "localParticipant" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "setMicrophoneEnabled" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: "false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " } " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "catch" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " error" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"room error\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " useEffect" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(() " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " if" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "!" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "room" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " ||" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " !" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "current" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "return" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "on" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "RoomEvent" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Connected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", () " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({ " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"walkie talkie room\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setTimeout" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(() " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "((" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "prev" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " ({ " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " ..." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "prev" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"connected\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }))" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }, " }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: "1000" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "on" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "RoomEvent" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Disconnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "async" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "reason" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({ " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"disconnected\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "on" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "RoomEvent" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Reconnecting" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", () " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"reconnecting\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "on" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "RoomEvent" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "Reconnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", () " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({ " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " false" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"reconnected to room\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setTimeout" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(() " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " setStatus" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "((" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "prev" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " ({ " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " ..." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "prev" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"connected\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }))" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }, " }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: "1000" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "on" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "RoomEvent" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "TrackSubscribed" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", (" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "track" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "publication" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "participant" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " if" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "!" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "current" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "return" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " track" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "attach" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "current" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "on" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "RoomEvent" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "TrackUnsubscribed" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", (" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "track" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "publication" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "participant" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " if" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: "!" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "current" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "return" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " track" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "detach" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "current" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }, [" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "])" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " useEffect" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(() " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " getRoom" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }, [])" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " return" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <>" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#F92672", "--shiki-light": "#E45649" }, children: "audio" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " style" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{{ " }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: "display" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"none\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "ref" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "audioRef" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}/>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Center" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " height" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"100vh\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Stack" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " alignItems" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"center\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Box" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "IconButton" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " aria-label" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"mic\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " icon" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "mic" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: " ?" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "FaMicrophone" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "/> " }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "FaMicrophoneSlash" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "/>} " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " borderRadius" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"full\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " boxSize" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{[" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"250px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"300px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "]} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "fontSize" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{[" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"80px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"100px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "]} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "_hover" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{{ " }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: "boxShadow" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"none\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " onClick" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "enableMic" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "isDisabled" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "status" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "isError" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: " ||" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " status" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}/>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Stack" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " pt" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: "4" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "direction" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"row\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " alignItems" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"center\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " gap" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: "4" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: " status" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "isLoading" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: " ?" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Spinner" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " size" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"lg\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "/> " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: " :" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " (" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "status" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "isConnected" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "?" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Icon" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " aria-label" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"connected\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " as" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "MdOutlineSignalWifiStatusbar4Bar" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "fontSize" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{[" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"30px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"40px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "]}/> " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: " :" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Icon" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " aria-label" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"not connected\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " as" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "MdOutlineSignalWifiStatusbarNull" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "} " }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: "fontSize" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{[" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"30px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"40px\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "]}/>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#C18401" }, children: "Text" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " fontWeight" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"bold\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#986801" }, children: " fontSize" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#383A42" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "{[" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: "25" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: "35" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "]}>{" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#383A42" }, children: "status" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "message" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.h1, { children: "API" }), "\n", _jsxs(_components.p, { children: ["From the client side, we can do the next step to server side where we need to create API to get token for connecting to a room. All you need to do is creating folder ", _jsx(_components.span, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.code, { "data-language": "plaintext", "data-theme": "andromeeda one-light", style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, children: _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "/app/api" }) }) }) }), " and ", _jsx(_components.span, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.code, { "data-language": "plaintext", "data-theme": "andromeeda one-light", style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, children: _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "/app/api/room" }) }) }) }), ", also a file called route.ts in ", _jsx(_components.span, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.code, { "data-language": "plaintext", "data-theme": "andromeeda one-light", style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, children: _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "/app/api/room" }) }) }) }), "."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42", "--shiki-dark-bg": "#23262E", "--shiki-light-bg": "#FAFAFA" }, tabIndex: "0", "data-language": "ts", "data-theme": "andromeeda one-light", children: _jsxs(_components.code, { "data-language": "ts", "data-theme": "andromeeda one-light", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#A0A1A7CC", "--shiki-dark-font-style": "inherit", "--shiki-light": "#A0A1A7", "--shiki-light-font-style": "italic" }, children: "// app/api/room/route.ts" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "AccessToken" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " } " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"livekit-server-sdk\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " { " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "NextResponse" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " } " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"next/server\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: " crypto" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " from" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"crypto\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " async" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " function" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " POST" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " try" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: " username" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: " crypto" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "randomBytes" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#F39C12", "--shiki-light": "#986801" }, children: "8" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "toString" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: "\"hex\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: " roomName" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#96E072", "--shiki-light": "#50A14F" }, children: " \"walkie-talkie\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: " at" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#A626A4" }, children: " new" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: " AccessToken" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: " process" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "env" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "LIVEKIT_API_KEY" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: " process" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#E45649" }, children: "env" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: "LIVEKIT_API_SECRET" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: " identity" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: " username" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " )" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: " at" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "addGrant" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({ " }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: "roomJoin" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#986801" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: "room" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: " roomName" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#986801" }, children: " token" }), _jsx(_components.span, { style: { "--shiki-dark": "#EE5D43", "--shiki-light": "#0184BC" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: " at" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "toJwt" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " return" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: " NextResponse" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "json" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({ " }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "token" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " } " }), _jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: "catch" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: "e" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C74DED", "--shiki-light": "#A626A4" }, children: " return" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: " NextResponse" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFE66D", "--shiki-light": "#4078F2" }, children: "json" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "({ " }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#E45649" }, children: "error" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#0184BC" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#00E8C6", "--shiki-light": "#383A42" }, children: " e" }), _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " })" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#D5CED9", "--shiki-light": "#383A42" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "I am using crypto library to create a random username, but if you want to use an account for each user you can do that by inserting the user uuid or the other username to the username. Also, if you have more than one room you can pass the room name to the api." }), "\n", _jsx(_components.h1, { children: "Result" }), "\n", _jsx(_components.p, { children: "It all set, you can start deploy the app to Vercel or other services and then start using the app." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://cdn.khouwdevin.com/blog/images/e3c99b50-38bb-4958-9901-d92e3bff8248", alt: "Walkie Talkie Page" }) }), "\n", _jsxs(_components.p, { children: ["The code will be available here on my Github ", _jsx(_components.a, { href: "https://github.com/khouwdevin/walkie-talkie", children: "Walkie-Talkie" }), ". I have two folders, the second one is for backend, it is basically the same as the api route, but I add more features like websocket to send messages, but it is not done yet, if you want me to finish the backend you can comment bellow and I will make a new blog about it."] }), "\n", _jsx(_components.p, { children: "Happy coding!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };