diff --git a/.changeset/tame-nails-deny.md b/.changeset/tame-nails-deny.md new file mode 100644 index 000000000..a6c9b27ac --- /dev/null +++ b/.changeset/tame-nails-deny.md @@ -0,0 +1,5 @@ +--- +"@livekit/component-example-next": patch +--- + +Add helper function to generate random user identity diff --git a/examples/nextjs/lib/helper.ts b/examples/nextjs/lib/helper.ts new file mode 100644 index 000000000..129d2a4dd --- /dev/null +++ b/examples/nextjs/lib/helper.ts @@ -0,0 +1,6 @@ +/** + * A simple helper function to generate a random user identity. + */ +export function generateRandomUserId() { + return `test-identity-${String(Math.random() * 100_000).slice(0, 5)}` as const; +} diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index 27d755274..7b7ae8819 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -18,7 +18,6 @@ "react-dom": "^18.2.0" }, "devDependencies": { - "@faker-js/faker": "^7.6.0", "@types/node": "^18.6.5", "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", diff --git a/examples/nextjs/pages/audio-only.tsx b/examples/nextjs/pages/audio-only.tsx index a1b46ff53..6888c4816 100644 --- a/examples/nextjs/pages/audio-only.tsx +++ b/examples/nextjs/pages/audio-only.tsx @@ -1,10 +1,11 @@ import { AudioConference, LiveKitRoom, useToken } from '@livekit/components-react'; import type { NextPage } from 'next'; +import { generateRandomUserId } from '../lib/helper'; const AudioExample: NextPage = () => { const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null; const roomName = params?.get('room') ?? 'test-room'; - const userIdentity = params?.get('user') ?? 'test-identity'; + const userIdentity = params?.get('user') ?? generateRandomUserId(); const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, { userInfo: { diff --git a/examples/nextjs/pages/clubhouse.tsx b/examples/nextjs/pages/clubhouse.tsx index 8b4aa9f23..876d2f0ff 100644 --- a/examples/nextjs/pages/clubhouse.tsx +++ b/examples/nextjs/pages/clubhouse.tsx @@ -14,11 +14,12 @@ import { import styles from '../styles/Clubhouse.module.scss'; import { Track } from 'livekit-client'; import { useMemo, useState } from 'react'; +import { generateRandomUserId } from '../lib/helper'; const Clubhouse = () => { const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null; const roomName = params?.get('room') ?? 'test-room'; - const userIdentity = params?.get('user') ?? 'test-identity'; + const userIdentity = params?.get('user') ?? generateRandomUserId(); const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, { userInfo: { diff --git a/examples/nextjs/pages/customize.tsx b/examples/nextjs/pages/customize.tsx index ef639040d..961cfa596 100644 --- a/examples/nextjs/pages/customize.tsx +++ b/examples/nextjs/pages/customize.tsx @@ -17,11 +17,12 @@ import myStyles from '../styles/Customize.module.css'; import type { NextPage } from 'next'; import { HTMLAttributes, useState } from 'react'; import { isTrackReference } from '@livekit/components-core'; +import { generateRandomUserId } from '../lib/helper'; const CustomizeExample: NextPage = () => { const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null; const roomName = params?.get('room') ?? 'test-room'; - const userIdentity = params?.get('user') ?? 'test-identity'; + const userIdentity = params?.get('user') ?? generateRandomUserId(); const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, { userInfo: { identity: userIdentity, @@ -85,8 +86,8 @@ export function Stage() { {isTrackReference(track) ? :

Camera placeholder

}
- - + +
{/* Overwrite styles: By passing class names, we can easily overwrite/extend the existing styles. */} {/* In addition, we can still specify a style attribute and further customize the styles. */} diff --git a/examples/nextjs/pages/e2ee.tsx b/examples/nextjs/pages/e2ee.tsx index e01bb14fc..acbb3292e 100644 --- a/examples/nextjs/pages/e2ee.tsx +++ b/examples/nextjs/pages/e2ee.tsx @@ -3,11 +3,12 @@ import { LiveKitRoom, useToken, VideoConference } from '@livekit/components-reac import type { NextPage } from 'next'; import * as React from 'react'; import { Room, ExternalE2EEKeyProvider } from 'livekit-client'; +import { generateRandomUserId } from '../lib/helper'; const E2EEExample: NextPage = () => { const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null; const roomName = params?.get('room') ?? 'test-room'; - const userIdentity = params?.get('user') ?? 'test-identity'; + const userIdentity = params?.get('user') ?? generateRandomUserId(); setLogLevel('warn', { liveKitClientLogLevel: 'debug' }); const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, { diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx index a6048f973..c44f3c395 100644 --- a/examples/nextjs/pages/index.tsx +++ b/examples/nextjs/pages/index.tsx @@ -1,26 +1,25 @@ import type { NextPage } from 'next'; import Head from 'next/head'; import styles from '../styles/Home.module.scss'; -import { faker } from '@faker-js/faker'; const EXAMPLE_ROUTES = { - minimal: { title: 'Minimal example', href: () => `/minimal?user=${faker.name.fullName()}` }, - simple: { title: 'Simple example', href: () => `/simple?user=${faker.name.fullName()}` }, + minimal: { title: 'Minimal example', href: () => `/minimal` }, + simple: { title: 'Simple example', href: () => `/simple` }, audioOnly: { title: 'Audio only example', - href: () => `/audio-only?user=${faker.name.fullName()}`, + href: () => `/audio-only`, }, customize: { title: 'Simple example with custom components', - href: () => `/customize?user=${faker.name.fullName()}`, + href: () => `/customize`, }, clubhouse: { title: 'Clubhouse clone build with LiveKit components', - href: () => `/clubhouse?user=${faker.name.fullName()}`, + href: () => `/clubhouse`, }, processors: { title: 'Minimal example with background blur', - href: () => `/processors?user=${faker.name.fullName()}`, + href: () => `/processors`, }, } as const; diff --git a/examples/nextjs/pages/minimal.tsx b/examples/nextjs/pages/minimal.tsx index 19a86bce9..f800e45c1 100644 --- a/examples/nextjs/pages/minimal.tsx +++ b/examples/nextjs/pages/minimal.tsx @@ -2,11 +2,12 @@ import { setLogLevel } from '@livekit/components-core'; import { LiveKitRoom, useToken, VideoConference } from '@livekit/components-react'; import { RoomConnectOptions } from 'livekit-client'; import type { NextPage } from 'next'; +import { generateRandomUserId } from '../lib/helper'; const MinimalExample: NextPage = () => { const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null; const roomName = params?.get('room') ?? 'test-room'; - const userIdentity = params?.get('user') ?? 'test-identity'; + const userIdentity = params?.get('user') ?? generateRandomUserId(); setLogLevel('info', { liveKitClientLogLevel: 'warn' }); const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, { diff --git a/examples/nextjs/pages/simple.tsx b/examples/nextjs/pages/simple.tsx index 9f62375bb..ee0490db5 100644 --- a/examples/nextjs/pages/simple.tsx +++ b/examples/nextjs/pages/simple.tsx @@ -13,18 +13,19 @@ import { Track } from 'livekit-client'; import type { NextPage } from 'next'; import { useState } from 'react'; import styles from '../styles/Simple.module.css'; +import { generateRandomUserId } from '../lib/helper'; const SimpleExample: NextPage = () => { const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null; const roomName = params?.get('room') ?? 'test-room'; - const userIdentity = params?.get('user') ?? 'test-identity'; + const userIdentity = params?.get('user') ?? generateRandomUserId(); const [connect, setConnect] = useState(false); const [isConnected, setIsConnected] = useState(false); const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, { userInfo: { identity: userIdentity, - name: 'my-name', + name: userIdentity, }, }); diff --git a/yarn.lock b/yarn.lock index 7f5dfb107..ce2b93121 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1767,11 +1767,6 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.53.0.tgz#bea56f2ed2b5baea164348ff4d5a879f6f81f20d" integrity sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w== -"@faker-js/faker@^7.6.0": - version "7.6.0" - resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-7.6.0.tgz#9ea331766084288634a9247fcd8b84f16ff4ba07" - integrity sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw== - "@fal-works/esbuild-plugin-global-externals@^2.1.2": version "2.1.2" resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4"