In the examples, add a helper function to generate a random user identity (#691)

Author: Ocupe

Diff for: .changeset/tame-nails-deny.md

@@ -0,0 +1,5 @@
+---
+"@livekit/component-example-next": patch
+---
+
+Add helper function to generate random user identity

Diff for: 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 for: 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 for: 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 for: 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 for: 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) ? <VideoTrack {...track} /> : <p>Camera placeholder</p>}
                   <div className={myStyles['participant-indicators']}>
                     <div style={{ display: 'flex' }}>
-                      <TrackMutedIndicator source={Track.Source.Microphone}></TrackMutedIndicator>
-                      <TrackMutedIndicator source={track.source}></TrackMutedIndicator>
+                      <TrackMutedIndicator source={Track.Source.Microphone} />
+                      <TrackMutedIndicator source={track.source} />
                     </div>
                     {/* 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 for: 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 for: 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 for: 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 for: 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 for: 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"