Skip to content

Commit f8375f0

Browse files
pblazejpblazej
committed
Consistency
1 parent 6de8642 commit f8375f0

File tree

8 files changed

+54
-45
lines changed

8 files changed

+54
-45
lines changed

‎examples/nextjs/pages/audio-only.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,12 @@ import { useMemo, useState, useEffect } from 'react';
77
import { TokenSource, MediaDeviceFailure } from 'livekit-client';
88

99
const AudioExample: NextPage = () => {
10-
const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null;
10+
const params = useMemo(
11+
() => (typeof window !== 'undefined' ? new URLSearchParams(location.search) : null),
12+
[],
13+
);
1114
const roomName = params?.get('room') ?? 'test-room';
12-
const [userIdentity] = useState(params?.get('user') ?? generateRandomUserId());
15+
const [userIdentity] = useState(() => params?.get('user') ?? generateRandomUserId());
1316

1417
const tokenSource = useMemo(() => {
1518
return TokenSource.endpoint(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT!);

‎examples/nextjs/pages/clubhouse.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,15 @@ import styles from '../styles/Clubhouse.module.scss';
1818
import { Track, TokenSource, MediaDeviceFailure } from 'livekit-client';
1919
import { useMemo, useState, useEffect } from 'react';
2020
import { generateRandomUserId } from '../lib/helper';
21-
import Image from 'next/image';
21+
import type { NextPage } from 'next';
2222

23-
const Clubhouse = () => {
24-
const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null;
23+
const Clubhouse: NextPage = () => {
24+
const params = useMemo(
25+
() => (typeof window !== 'undefined' ? new URLSearchParams(location.search) : null),
26+
[],
27+
);
2528
const roomName = params?.get('room') ?? 'test-room';
26-
const userIdentity = params?.get('user') ?? generateRandomUserId();
29+
const [userIdentity] = useState(() => params?.get('user') ?? generateRandomUserId());
2730

2831
const tokenSource = useMemo(() => {
2932
return TokenSource.endpoint(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT!);
@@ -108,7 +111,7 @@ const Clubhouse = () => {
108111
const Stage = () => {
109112
const tracksReferences = useTracks([Track.Source.Microphone]);
110113
return (
111-
<div className="">
114+
<div>
112115
<div className={styles.stageGrid}>
113116
<TrackLoop tracks={tracksReferences}>
114117
<CustomParticipantTile></CustomParticipantTile>
@@ -128,21 +131,16 @@ const CustomParticipantTile = () => {
128131
return (
129132
<section className={styles['participant-tile']} title={trackRef.participant.name}>
130133
<div
131-
// className={`rounded-full border-2 p-0.5 transition-colors duration-1000 ${
132134
className={styles['avatar-container']}
133135
style={{ borderColor: isSpeaking ? 'greenyellow' : 'transparent' }}
134136
>
135-
<div
136-
className={styles.avatar}
137-
// className="z-10 grid aspect-square items-center overflow-hidden rounded-full bg-beige transition-all will-change-transform"
138-
>
139-
<Image
137+
<div className={styles.avatar}>
138+
<img
140139
src={`https://avatars.dicebear.com/api/avataaars/${id}.svg?mouth=default,smile,tongue&eyes=default,happy,hearts&eyebrows=default,defaultNatural,flatNatural`}
141140
className="fade-in"
142141
width={150}
143142
height={150}
144143
alt={`Avatar of user: ${trackRef.participant.identity}`}
145-
unoptimized
146144
/>
147145
</div>
148146
</div>

‎examples/nextjs/pages/customize.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,12 @@ import { HTMLAttributes, useState, useMemo, useEffect } from 'react';
2323
import { generateRandomUserId } from '../lib/helper';
2424

2525
const CustomizeExample: NextPage = () => {
26-
const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null;
26+
const params = useMemo(
27+
() => (typeof window !== 'undefined' ? new URLSearchParams(location.search) : null),
28+
[],
29+
);
2730
const roomName = params?.get('room') ?? 'test-room';
28-
const userIdentity = params?.get('user') ?? generateRandomUserId();
31+
const [userIdentity] = useState(() => params?.get('user') ?? generateRandomUserId());
2932

3033
const [room] = useState(new Room());
3134

‎examples/nextjs/pages/e2ee.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@
22

33
import { SessionProvider, useSession, VideoConference, setLogLevel, SessionEvent } from '@livekit/components-react';
44
import type { NextPage } from 'next';
5-
import * as React from 'react';
5+
import { useMemo, useEffect, useState } from 'react';
66
import { Room, ExternalE2EEKeyProvider, TokenSource, MediaDeviceFailure } from 'livekit-client';
77
import { generateRandomUserId } from '../lib/helper';
88

99
const E2EEExample: NextPage = () => {
10-
const params = React.useMemo(
10+
const params = useMemo(
1111
() => (typeof window !== 'undefined' ? new URLSearchParams(location.search) : null),
1212
[],
1313
);
1414
const roomName = params?.get('room') ?? 'test-room';
15-
const userIdentity = React.useMemo(() => params?.get('user') ?? generateRandomUserId(), [params]);
15+
const [userIdentity] = useState(() => params?.get('user') ?? generateRandomUserId());
1616
setLogLevel('warn', { liveKitClientLogLevel: 'debug' });
1717

18-
const keyProvider = React.useMemo(() => new ExternalE2EEKeyProvider(), []);
18+
const keyProvider = useMemo(() => new ExternalE2EEKeyProvider(), []);
1919

2020
keyProvider.setKey('password');
2121

22-
const room = React.useMemo(
22+
const room = useMemo(
2323
() =>
2424
new Room({
2525
e2ee:
@@ -33,7 +33,7 @@ const E2EEExample: NextPage = () => {
3333
[keyProvider],
3434
);
3535

36-
const tokenSource = React.useMemo(() => {
36+
const tokenSource = useMemo(() => {
3737
return TokenSource.endpoint(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT!);
3838
}, []);
3939

@@ -44,13 +44,13 @@ const E2EEExample: NextPage = () => {
4444
room,
4545
});
4646

47-
React.useEffect(() => {
47+
useEffect(() => {
4848
if (typeof window !== 'undefined') {
4949
room.setE2EEEnabled(true);
5050
}
5151
}, [room]);
5252

53-
React.useEffect(() => {
53+
useEffect(() => {
5454
session.start({
5555
tracks: {
5656
camera: { enabled: true },
@@ -67,7 +67,7 @@ const E2EEExample: NextPage = () => {
6767
// eslint-disable-next-line react-hooks/exhaustive-deps
6868
}, [session.start, session.end]);
6969

70-
React.useEffect(() => {
70+
useEffect(() => {
7171
const handleMediaDevicesError = (error: Error) => {
7272
const failure = MediaDeviceFailure.getFailure(error);
7373
console.error(failure);

‎examples/nextjs/pages/minimal.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { SessionProvider, useSession, VideoConference, setLogLevel, SessionEvent } from '@livekit/components-react';
44
import type { NextPage } from 'next';
55
import { generateRandomUserId } from '../lib/helper';
6-
import { useMemo, useEffect } from 'react';
6+
import { useMemo, useEffect, useState } from 'react';
77
import { TokenSource, MediaDeviceFailure } from 'livekit-client';
88

99
const MinimalExample: NextPage = () => {
@@ -14,10 +14,7 @@ const MinimalExample: NextPage = () => {
1414
const roomName = params?.get('room') ?? 'test-room';
1515
setLogLevel('debug', { liveKitClientLogLevel: 'info' });
1616

17-
const userIdentity = useMemo(
18-
() => params?.get('user') ?? generateRandomUserId(),
19-
[params],
20-
);
17+
const [userIdentity] = useState(() => params?.get('user') ?? generateRandomUserId());
2118

2219
const tokenSource = useMemo(() => {
2320
return TokenSource.endpoint(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT!);

‎examples/nextjs/pages/processors.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import * as React from 'react';
3+
import { useState, useEffect, useMemo } from 'react';
44
import { setLogLevel } from '@livekit/components-core';
55
import {
66
GridLayout,
@@ -13,24 +13,24 @@ import {
1313
SessionEvent,
1414
} from '@livekit/components-react';
1515
import type { NextPage } from 'next';
16-
import { ControlBarControls } from '@livekit/components-react';
1716
import { LocalVideoTrack, Track, TrackProcessor, TokenSource, MediaDeviceFailure } from 'livekit-client';
1817
import { BackgroundBlur } from '@livekit/track-processors';
18+
import { generateRandomUserId } from '../lib/helper';
1919

2020
function Stage() {
2121
const cameraTracks = useTracks([Track.Source.Camera]);
2222
const screenShareTrackRef = useTracks([Track.Source.ScreenShare])[0];
2323

24-
const [blurEnabled, setBlurEnabled] = React.useState(false);
25-
const [processorPending, setProcessorPending] = React.useState(false);
24+
const [blurEnabled, setBlurEnabled] = useState(false);
25+
const [processorPending, setProcessorPending] = useState(false);
2626
const { cameraTrack } = useLocalParticipant();
27-
const [blur, setBlur] = React.useState<TrackProcessor<Track.Kind.Video> | undefined>();
27+
const [blur, setBlur] = useState<TrackProcessor<Track.Kind.Video> | undefined>();
2828

29-
React.useEffect(() => {
29+
useEffect(() => {
3030
setBlur(BackgroundBlur());
3131
}, []);
3232

33-
React.useEffect(() => {
33+
useEffect(() => {
3434
const localCamTrack = cameraTrack?.track as LocalVideoTrack | undefined;
3535
if (localCamTrack) {
3636
setProcessorPending(true);
@@ -66,11 +66,14 @@ function Stage() {
6666
}
6767

6868
const ProcessorsExample: NextPage = () => {
69-
const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null;
69+
const params = useMemo(
70+
() => (typeof window !== 'undefined' ? new URLSearchParams(location.search) : null),
71+
[],
72+
);
7073
const roomName = params?.get('room') ?? 'test-room';
71-
const userIdentity = params?.get('user') ?? 'test-identity';
74+
const [userIdentity] = useState(() => params?.get('user') ?? generateRandomUserId());
7275

73-
const tokenSource = React.useMemo(() => {
76+
const tokenSource = useMemo(() => {
7477
return TokenSource.endpoint(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT!);
7578
}, []);
7679

@@ -80,7 +83,7 @@ const ProcessorsExample: NextPage = () => {
8083
participantName: userIdentity,
8184
});
8285

83-
React.useEffect(() => {
86+
useEffect(() => {
8487
session.start({
8588
tracks: {
8689
camera: { enabled: true },
@@ -97,7 +100,7 @@ const ProcessorsExample: NextPage = () => {
97100
// eslint-disable-next-line react-hooks/exhaustive-deps
98101
}, [session.start, session.end]);
99102

100-
React.useEffect(() => {
103+
useEffect(() => {
101104
const handleMediaDevicesError = (error: Error) => {
102105
const failure = MediaDeviceFailure.getFailure(error);
103106
console.error(failure);

‎examples/nextjs/pages/simple.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,12 @@ import styles from '../styles/Simple.module.css';
2020
import { generateRandomUserId } from '../lib/helper';
2121

2222
const SimpleExample: NextPage = () => {
23-
const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null;
23+
const params = useMemo(
24+
() => (typeof window !== 'undefined' ? new URLSearchParams(location.search) : null),
25+
[],
26+
);
2427
const roomName = params?.get('room') ?? 'test-room';
25-
const userIdentity = params?.get('user') ?? generateRandomUserId();
28+
const [userIdentity] = useState(() => params?.get('user') ?? generateRandomUserId());
2629
const [connect, setConnect] = useState(false);
2730

2831
const tokenSource = useMemo(() => {
@@ -40,6 +43,7 @@ const SimpleExample: NextPage = () => {
4043
session.start({
4144
tracks: {
4245
microphone: { enabled: true },
46+
camera: { enabled: true },
4347
},
4448
}).catch((err) => {
4549
console.error('Failed to start session:', err);

‎examples/nextjs/pages/voice-assistant.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const VoiceAssistantExample: NextPage = () => {
3636
() => params?.get('room') ?? 'test-room-' + Math.random().toFixed(5),
3737
[params],
3838
);
39+
const [userIdentity] = useState(() => params?.get('user') ?? generateRandomUserId());
3940
const [shouldConnect, setShouldConnect] = useState(false);
4041

4142
const tokenSource = useMemo(() => {
@@ -44,7 +45,7 @@ const VoiceAssistantExample: NextPage = () => {
4445

4546
const session = useSession(tokenSource, {
4647
roomName,
47-
participantIdentity: params?.get('user') ?? generateRandomUserId(),
48+
participantIdentity: userIdentity,
4849
});
4950

5051
useEffect(() => {

0 commit comments

Comments
 (0)