Skip to content

Commit 5040797

Browse files
thomasyuill-livekitthomasyuill-livekit
committed
cleanup component ui
1 parent f895250 commit 5040797

File tree

1 file changed

+91
-107
lines changed

1 file changed

+91
-107
lines changed

‎app/ui/_components.tsx‎

Lines changed: 91 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -244,24 +244,6 @@ export const COMPONENTS = {
244244
return (
245245
<Container componentName="AudioVisualizer">
246246
<div className="flex items-center gap-2">
247-
<div className="flex-1">
248-
<label className="font-mono text-xs uppercase" htmlFor="state">
249-
State
250-
</label>
251-
<Select value={state} onValueChange={(value) => setState(value as AgentState)}>
252-
<SelectTrigger id="state" className="w-full">
253-
<SelectValue placeholder="Select a state" />
254-
</SelectTrigger>
255-
<SelectContent>
256-
{states.map((state) => (
257-
<SelectItem key={state} value={state}>
258-
{state}
259-
</SelectItem>
260-
))}
261-
</SelectContent>
262-
</Select>
263-
</div>
264-
265247
<div className="flex-1">
266248
<label className="font-mono text-xs uppercase" htmlFor="size">
267249
Size
@@ -312,16 +294,34 @@ export const COMPONENTS = {
312294
className="mx-auto"
313295
/>
314296
</div>
315-
<div className="text-center">Original BarVisualizer</div>
316-
<div className="border-border grid place-items-center rounded-xl border p-4 py-8">
317-
<BarVisualizer
318-
size={size as audioBarVisualizerVariantsSizeType}
319-
state={state}
320-
audioTrack={micTrackRef!}
321-
barCount={parseInt(barCount) || undefined}
322-
className="mx-auto"
323-
/>
324-
</div>
297+
<details>
298+
<summary className="text-muted-foreground font-mono text-xs uppercase">
299+
<span className="inline-block cursor-pointer p-1">Original BarVisualizer</span>
300+
</summary>
301+
<div className="border-border grid place-items-center rounded-xl border p-4 py-8">
302+
<BarVisualizer
303+
size={size as audioBarVisualizerVariantsSizeType}
304+
state={state}
305+
audioTrack={micTrackRef!}
306+
barCount={parseInt(barCount) || undefined}
307+
className="mx-auto"
308+
/>
309+
</div>
310+
</details>
311+
</div>
312+
313+
<div className="flex flex-wrap gap-4">
314+
{states.map((stateType) => (
315+
<Button
316+
key={stateType}
317+
size="sm"
318+
variant={state === stateType ? 'primary' : 'default'}
319+
onClick={() => setState(stateType)}
320+
className={'flex-1'}
321+
>
322+
{stateType}
323+
</Button>
324+
))}
325325
</div>
326326
</Container>
327327
);
@@ -362,24 +362,6 @@ export const COMPONENTS = {
362362
return (
363363
<Container componentName="AudioVisualizer">
364364
<div className="flex items-center gap-2">
365-
<div className="flex-1">
366-
<label className="font-mono text-xs uppercase" htmlFor="state">
367-
State
368-
</label>
369-
<Select value={state} onValueChange={(value) => setState(value as AgentState)}>
370-
<SelectTrigger id="state" className="w-full">
371-
<SelectValue placeholder="Select a state" />
372-
</SelectTrigger>
373-
<SelectContent>
374-
{states.map((state) => (
375-
<SelectItem key={state} value={state}>
376-
{state}
377-
</SelectItem>
378-
))}
379-
</SelectContent>
380-
</Select>
381-
</div>
382-
383365
<div className="flex-1">
384366
<label className="font-mono text-xs uppercase" htmlFor="size">
385367
Size
@@ -431,6 +413,20 @@ export const COMPONENTS = {
431413
/>
432414
</div>
433415
</div>
416+
417+
<div className="flex flex-wrap gap-4">
418+
{states.map((stateType) => (
419+
<Button
420+
key={stateType}
421+
size="sm"
422+
variant={state === stateType ? 'primary' : 'default'}
423+
onClick={() => setState(stateType)}
424+
className={'flex-1'}
425+
>
426+
{stateType}
427+
</Button>
428+
))}
429+
</div>
434430
</Container>
435431
);
436432
},
@@ -475,24 +471,6 @@ export const COMPONENTS = {
475471
return (
476472
<Container componentName="AudioVisualizer">
477473
<div className="flex items-center gap-2">
478-
<div className="flex-1">
479-
<label className="font-mono text-xs uppercase" htmlFor="state">
480-
State
481-
</label>
482-
<Select value={state} onValueChange={(value) => setState(value as AgentState)}>
483-
<SelectTrigger id="state" className="w-full">
484-
<SelectValue placeholder="Select a state" />
485-
</SelectTrigger>
486-
<SelectContent>
487-
{states.map((state) => (
488-
<SelectItem key={state} value={state}>
489-
{state}
490-
</SelectItem>
491-
))}
492-
</SelectContent>
493-
</Select>
494-
</div>
495-
496474
<div className="flex-1">
497475
<label className="font-mono text-xs uppercase" htmlFor="rowCount">
498476
Row count
@@ -559,19 +537,34 @@ export const COMPONENTS = {
559537
options={demoOptions}
560538
/>
561539
</div>
562-
<div className="border-border bg-muted overflow-x-auto rounded-xl border p-8">
563-
<pre className="text-muted-foreground text-sm">
564-
<code>{JSON.stringify(demoOptions, null, 2)}</code>
565-
</pre>
540+
541+
<div className="flex flex-wrap gap-4">
542+
{states.map((stateType) => (
543+
<Button
544+
key={stateType}
545+
size="sm"
546+
variant={state === stateType ? 'primary' : 'default'}
547+
onClick={() => setState(stateType)}
548+
className={'flex-1'}
549+
>
550+
{stateType}
551+
</Button>
552+
))}
553+
</div>
554+
555+
<div>
556+
<StoryTitle>Demo options</StoryTitle>
557+
<div className="border-border bg-muted overflow-x-auto rounded-xl border p-8">
558+
<pre className="text-muted-foreground text-sm">
559+
<code>{JSON.stringify(demoOptions, null, 2)}</code>
560+
</pre>
561+
</div>
566562
</div>
567563
</Container>
568564
);
569565
},
570566

571567
AudioShaderVisualizer: () => {
572-
const { startSession, endSession } = useSession();
573-
const { localParticipant } = useLocalParticipant();
574-
575568
// shape
576569
const [shape, setShape] = useState(1.0);
577570
// color scale
@@ -592,20 +585,18 @@ export const COMPONENTS = {
592585
const [size, setSize] = useState<audioShaderVisualizerVariantsSizeType>('lg');
593586
const [state, setState] = useState<AgentState>(states[0]);
594587

595-
const {
596-
// state,
597-
audioTrack,
598-
} = useVoiceAssistant();
599-
600-
useEffect(() => {
601-
if (state === 'speaking') {
602-
startSession();
603-
localParticipant.setMicrophoneEnabled(true, undefined);
604-
} else {
605-
endSession();
606-
localParticipant.setMicrophoneEnabled(false, undefined);
607-
}
608-
}, [startSession, endSession, state, localParticipant]);
588+
const { microphoneTrack, localParticipant } = useLocalParticipant();
589+
const micTrackRef = useMemo<TrackReferenceOrPlaceholder | undefined>(() => {
590+
return state === 'speaking'
591+
? ({
592+
participant: localParticipant,
593+
source: Track.Source.Microphone,
594+
publication: microphoneTrack,
595+
} as TrackReference)
596+
: undefined;
597+
}, [state, localParticipant, microphoneTrack]);
598+
599+
useMicrophone();
609600

610601
const fields = [
611602
['color position', colorPosition, setColorPosition, 0, 1, 0.01],
@@ -614,28 +605,7 @@ export const COMPONENTS = {
614605

615606
return (
616607
<Container componentName="AudioShaderVisualizer">
617-
<StartAudio label="Start Audio" />
618-
<RoomAudioRenderer />
619-
620608
<div className="flex gap-4">
621-
<div className="flex-1">
622-
<label className="font-mono text-xs uppercase" htmlFor="state">
623-
State
624-
</label>
625-
<Select value={state} onValueChange={(value) => setState(value as AgentState)}>
626-
<SelectTrigger id="state" className="w-full">
627-
<SelectValue placeholder="Select a state" />
628-
</SelectTrigger>
629-
<SelectContent>
630-
{states.map((state) => (
631-
<SelectItem key={state} value={state}>
632-
{state}
633-
</SelectItem>
634-
))}
635-
</SelectContent>
636-
</Select>
637-
</div>
638-
639609
<div className="flex-1">
640610
<label className="font-mono text-xs uppercase" htmlFor="size">
641611
Size
@@ -680,11 +650,25 @@ export const COMPONENTS = {
680650
shape={shape}
681651
colorScale={colorScale}
682652
colorPosition={colorPosition}
683-
audioTrack={audioTrack as TrackReferenceOrPlaceholder}
653+
audioTrack={micTrackRef!}
684654
className="mx-auto bg-black"
685655
/>
686656
</div>
687657

658+
<div className="flex flex-wrap gap-4">
659+
{states.map((stateType) => (
660+
<Button
661+
key={stateType}
662+
size="sm"
663+
variant={state === stateType ? 'primary' : 'default'}
664+
onClick={() => setState(stateType)}
665+
className={'flex-1'}
666+
>
667+
{stateType}
668+
</Button>
669+
))}
670+
</div>
671+
688672
<div className="grid grid-cols-2 gap-4">
689673
{fields.map(([name, value, setValue, min = 0.1, max = 10, step = 0.1]) => {
690674
return (

0 commit comments

Comments
 (0)