Update to components v2 (#200)
* Update to components v2 * Update debug component to v2
This commit is contained in:
parent
8afe3de6e3
commit
55f5525742
3 changed files with 50 additions and 37 deletions
|
@ -23,6 +23,11 @@ export const DebugMode = ({ logLevel }: { logLevel?: LogLevel }) => {
|
||||||
const room = useRoomContext();
|
const room = useRoomContext();
|
||||||
const [isOpen, setIsOpen] = React.useState(false);
|
const [isOpen, setIsOpen] = React.useState(false);
|
||||||
const [, setRender] = React.useState({});
|
const [, setRender] = React.useState({});
|
||||||
|
const [roomSid, setRoomSid] = React.useState('');
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
room.getSid().then(setRoomSid);
|
||||||
|
}, [room]);
|
||||||
|
|
||||||
useDebugMode({ logLevel });
|
useDebugMode({ logLevel });
|
||||||
|
|
||||||
|
@ -78,7 +83,7 @@ export const DebugMode = ({ logLevel }: { logLevel?: LogLevel }) => {
|
||||||
<div className={styles.overlay}>
|
<div className={styles.overlay}>
|
||||||
<section id="room-info">
|
<section id="room-info">
|
||||||
<h3>
|
<h3>
|
||||||
Room Info {room.name}: {room.sid}
|
Room Info {room.name}: {roomSid}
|
||||||
</h3>
|
</h3>
|
||||||
</section>
|
</section>
|
||||||
<details open>
|
<details open>
|
||||||
|
@ -90,7 +95,7 @@ export const DebugMode = ({ logLevel }: { logLevel?: LogLevel }) => {
|
||||||
<b>Published tracks</b>
|
<b>Published tracks</b>
|
||||||
</summary>
|
</summary>
|
||||||
<div>
|
<div>
|
||||||
{Array.from(lp.tracks.values()).map((t) => (
|
{Array.from(lp.trackPublications.values()).map((t) => (
|
||||||
<>
|
<>
|
||||||
<div>
|
<div>
|
||||||
<i>
|
<i>
|
||||||
|
@ -151,7 +156,7 @@ export const DebugMode = ({ logLevel }: { logLevel?: LogLevel }) => {
|
||||||
<summary>
|
<summary>
|
||||||
<b>Remote Participants</b>
|
<b>Remote Participants</b>
|
||||||
</summary>
|
</summary>
|
||||||
{Array.from(room.participants.values()).map((p) => (
|
{Array.from(room.remoteParticipants.values()).map((p) => (
|
||||||
<details key={p.sid} className={styles.detailsSection}>
|
<details key={p.sid} className={styles.detailsSection}>
|
||||||
<summary>
|
<summary>
|
||||||
<b>
|
<b>
|
||||||
|
@ -160,7 +165,7 @@ export const DebugMode = ({ logLevel }: { logLevel?: LogLevel }) => {
|
||||||
</b>
|
</b>
|
||||||
</summary>
|
</summary>
|
||||||
<div>
|
<div>
|
||||||
{Array.from(p.tracks.values()).map((t) => (
|
{Array.from(p.trackPublications.values()).map((t) => (
|
||||||
<>
|
<>
|
||||||
<div>
|
<div>
|
||||||
<i>
|
<i>
|
||||||
|
|
|
@ -9,9 +9,9 @@
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@livekit/components-react": "1.5.3",
|
"@livekit/components-react": "2.0.0",
|
||||||
"@livekit/components-styles": "1.0.9",
|
"@livekit/components-styles": "1.0.9",
|
||||||
"livekit-client": "1.15.12",
|
"livekit-client": "2.0.2",
|
||||||
"livekit-server-sdk": "2.0.3",
|
"livekit-server-sdk": "2.0.3",
|
||||||
"next": "14.1.0",
|
"next": "14.1.0",
|
||||||
"next-seo": "^6.0.0",
|
"next-seo": "^6.0.0",
|
||||||
|
|
|
@ -6,14 +6,14 @@ settings:
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
'@livekit/components-react':
|
'@livekit/components-react':
|
||||||
specifier: 1.5.3
|
specifier: 2.0.0
|
||||||
version: 1.5.3(livekit-client@1.15.12)(react-dom@18.2.0)(react@18.2.0)(tslib@2.6.2)
|
version: 2.0.0(livekit-client@2.0.2)(react-dom@18.2.0)(react@18.2.0)(tslib@2.6.2)
|
||||||
'@livekit/components-styles':
|
'@livekit/components-styles':
|
||||||
specifier: 1.0.9
|
specifier: 1.0.9
|
||||||
version: 1.0.9
|
version: 1.0.9
|
||||||
livekit-client:
|
livekit-client:
|
||||||
specifier: 1.15.12
|
specifier: 2.0.2
|
||||||
version: 1.15.12
|
version: 2.0.2
|
||||||
livekit-server-sdk:
|
livekit-server-sdk:
|
||||||
specifier: 2.0.3
|
specifier: 2.0.3
|
||||||
version: 2.0.3
|
version: 2.0.3
|
||||||
|
@ -111,16 +111,16 @@ packages:
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@floating-ui/core@1.5.3:
|
/@floating-ui/core@1.6.0:
|
||||||
resolution: {integrity: sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==}
|
resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@floating-ui/utils': 0.2.1
|
'@floating-ui/utils': 0.2.1
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@floating-ui/dom@1.5.4:
|
/@floating-ui/dom@1.6.1:
|
||||||
resolution: {integrity: sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==}
|
resolution: {integrity: sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@floating-ui/core': 1.5.3
|
'@floating-ui/core': 1.6.0
|
||||||
'@floating-ui/utils': 0.2.1
|
'@floating-ui/utils': 0.2.1
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
@ -197,38 +197,38 @@ packages:
|
||||||
'@jridgewell/sourcemap-codec': 1.4.15
|
'@jridgewell/sourcemap-codec': 1.4.15
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@livekit/components-core@0.8.3(livekit-client@1.15.12)(tslib@2.6.2):
|
/@livekit/components-core@0.9.0(livekit-client@2.0.2)(tslib@2.6.2):
|
||||||
resolution: {integrity: sha512-xwHjE7B4oQmhL3Nme7HKR5X71D5SaG0PbM750VpFOkdMkD6fhiouiblDc4/Ys0yK1iLFUAM8lXq/jBzU+xf2ZA==}
|
resolution: {integrity: sha512-CNDBkJLWiNciFJtrmYrjJfU9ToVzs9ubR24VPa9ekb/jYeJxxq4zKbudIaTeppUzcfGenkS6O6RgcyWjFVbpCw==}
|
||||||
engines: {node: '>=14'}
|
engines: {node: '>=18'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
livekit-client: ^1.15.1
|
livekit-client: ^2.0.2
|
||||||
tslib: ^2.6.2
|
tslib: ^2.6.2
|
||||||
dependencies:
|
dependencies:
|
||||||
'@floating-ui/dom': 1.5.4
|
'@floating-ui/dom': 1.6.1
|
||||||
email-regex: 5.0.0
|
email-regex: 5.0.0
|
||||||
livekit-client: 1.15.12
|
livekit-client: 2.0.2
|
||||||
loglevel: 1.8.1
|
loglevel: 1.9.1
|
||||||
rxjs: 7.8.1
|
rxjs: 7.8.1
|
||||||
tslib: 2.6.2
|
tslib: 2.6.2
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@livekit/components-react@1.5.3(livekit-client@1.15.12)(react-dom@18.2.0)(react@18.2.0)(tslib@2.6.2):
|
/@livekit/components-react@2.0.0(livekit-client@2.0.2)(react-dom@18.2.0)(react@18.2.0)(tslib@2.6.2):
|
||||||
resolution: {integrity: sha512-OL2BhyltXz4GTEmTPZPMehBMoWWNILTqHClPpFLJyM3KLnk2lLvaH9QWwlbqIJVr6vkm39pvq39ckv6GKa7jJw==}
|
resolution: {integrity: sha512-trgOAmnIXok/VqWTHG3pbjCKy/wiZA1ZTFFbHOnRz4gpMf7s7lRWqyreF1BjcIQPKXwgF6lMWQTRjgCAqRuU+A==}
|
||||||
engines: {node: '>=14'}
|
engines: {node: '>=18'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
livekit-client: ^1.15.1
|
livekit-client: ^2.0.2
|
||||||
react: '>=18'
|
react: '>=18'
|
||||||
react-dom: '>=18'
|
react-dom: '>=18'
|
||||||
tslib: ^2.6.2
|
tslib: ^2.6.2
|
||||||
dependencies:
|
dependencies:
|
||||||
'@livekit/components-core': 0.8.3(livekit-client@1.15.12)(tslib@2.6.2)
|
'@livekit/components-core': 0.9.0(livekit-client@2.0.2)(tslib@2.6.2)
|
||||||
'@react-hook/latest': 1.0.3(react@18.2.0)
|
'@react-hook/latest': 1.0.3(react@18.2.0)
|
||||||
clsx: 2.1.0
|
clsx: 2.1.0
|
||||||
livekit-client: 1.15.12
|
livekit-client: 2.0.2
|
||||||
react: 18.2.0
|
react: 18.2.0
|
||||||
react-dom: 18.2.0(react@18.2.0)
|
react-dom: 18.2.0(react@18.2.0)
|
||||||
tslib: 2.6.2
|
tslib: 2.6.2
|
||||||
usehooks-ts: 2.9.1(react-dom@18.2.0)(react@18.2.0)
|
usehooks-ts: 2.14.0(react@18.2.0)
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@livekit/components-styles@1.0.9:
|
/@livekit/components-styles@1.0.9:
|
||||||
|
@ -1965,8 +1965,8 @@ packages:
|
||||||
type-check: 0.4.0
|
type-check: 0.4.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/livekit-client@1.15.12:
|
/livekit-client@2.0.2:
|
||||||
resolution: {integrity: sha512-1mjVFNOkF7f0HHAY1Z9zZw38eCxA2xCULah5z8whPkb61kG4LJU0aNCo9LWjAynO4ODLjfq2+fZvZoCHIya+6A==}
|
resolution: {integrity: sha512-NGMLTQth0y0fFy+MJyxC9WSAhcbuJZ5slOe3zbDhVtw/zUDwvCMDFeFHSL27yIshISiQviLRbh2rNLjou+beZQ==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@bufbuild/protobuf': 1.4.2
|
'@bufbuild/protobuf': 1.4.2
|
||||||
events: 3.3.0
|
events: 3.3.0
|
||||||
|
@ -1999,6 +1999,10 @@ packages:
|
||||||
p-locate: 5.0.0
|
p-locate: 5.0.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/lodash.debounce@4.0.8:
|
||||||
|
resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/lodash.merge@4.6.2:
|
/lodash.merge@4.6.2:
|
||||||
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
||||||
dev: true
|
dev: true
|
||||||
|
@ -2008,6 +2012,11 @@ packages:
|
||||||
engines: {node: '>= 0.6.0'}
|
engines: {node: '>= 0.6.0'}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/loglevel@1.9.1:
|
||||||
|
resolution: {integrity: sha512-hP3I3kCrDIMuRwAwHltphhDM1r8i55H33GgqjXbrisuJhF4kRhW1dNuxsRklp4bXl8DSdLaNLuiL4A/LWRfxvg==}
|
||||||
|
engines: {node: '>= 0.6.0'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/loose-envify@1.4.0:
|
/loose-envify@1.4.0:
|
||||||
resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
|
resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
|
@ -2890,15 +2899,14 @@ packages:
|
||||||
punycode: 2.3.1
|
punycode: 2.3.1
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/usehooks-ts@2.9.1(react-dom@18.2.0)(react@18.2.0):
|
/usehooks-ts@2.14.0(react@18.2.0):
|
||||||
resolution: {integrity: sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==}
|
resolution: {integrity: sha512-jnhrjTRJoJS7cFxz63tRYc5mzTKf/h+Ii8P0PDHymT9qDe4ZA2/gzDRmDR4WGausg5X8wMIdghwi3BBCN9JKow==}
|
||||||
engines: {node: '>=16.15.0', npm: '>=8'}
|
engines: {node: '>=16.15.0'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
react: ^16.8.0 || ^17 || ^18
|
||||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
|
||||||
dependencies:
|
dependencies:
|
||||||
|
lodash.debounce: 4.0.8
|
||||||
react: 18.2.0
|
react: 18.2.0
|
||||||
react-dom: 18.2.0(react@18.2.0)
|
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/watchpack@2.4.0:
|
/watchpack@2.4.0:
|
||||||
|
|
Loading…
Reference in a new issue