wx44wx/livekit-znjj-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improves placeholder content for audio/video tiles when not connected (#57)

Browse Source
This commit is contained in:
mattherzog 2024-05-14 18:20:22 -06:00 committed by GitHub
parent f037e51716
commit 2d7d3f3d6d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 70 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/playground/Playground.tsx
View File

@ -54,7 +54,7 @@ export default function Playground({
themeColors,
onConnect,
}: PlaygroundProps) {
const {config, setUserSettings} = useConfig();
const { config, setUserSettings } = useConfig();
const { name } = useRoomInfo();
const [agentState, setAgentState] = useState<AgentState>("offline");
const [messages, setMessages] = useState<ChatMessageType[]>([]);
@ -182,27 +182,59 @@ export default function Playground({
const videoTileContent = useMemo(() => {
const videoFitClassName = `object-${config.video_fit || "cover"}`;
return (
<div className="flex flex-col w-full grow text-gray-950 bg-black rounded-sm border border-gray-800 relative">
{agentVideoTrack ? (
<VideoTrack
trackRef={agentVideoTrack}
className={`absolute top-1/2 -translate-y-1/2 ${videoFitClassName} object-position-center w-full h-full`}
/>
) : (
const disconnectedContent = (
<div className="flex items-center justify-center text-gray-700 text-center w-full h-full">
No video track. Connect to get started.
</div>
);
const loadingContent = (
<div className="flex flex-col items-center justify-center gap-2 text-gray-700 text-center h-full w-full">
<LoadingSVG />
Waiting for video track
</div>
)}
);
const videoContent = (
<VideoTrack
trackRef={agentVideoTrack}
className={`absolute top-1/2 -translate-y-1/2 ${videoFitClassName} object-position-center w-full h-full`}
/>
);
let content = null;
if (roomState === ConnectionState.Disconnected) {
content = disconnectedContent;
} else if (agentVideoTrack) {
content = videoContent;
} else {
content = loadingContent;
}
return (
<div className="flex flex-col w-full grow text-gray-950 bg-black rounded-sm border border-gray-800 relative">
{content}
</div>
);
}, [agentVideoTrack, config]);
}, [agentVideoTrack, config, roomState]);
const audioTileContent = useMemo(() => {
return (
const disconnectedContent = (
<div className="flex flex-col items-center justify-center gap-2 text-gray-700 text-center w-full">
No audio track. Connect to get started.
</div>
);
const waitingContent = (
<div className="flex flex-col items-center gap-2 text-gray-700 text-center w-full">
<LoadingSVG />
Waiting for audio track
</div>
);
const visualizerContent = (
<div className="flex items-center justify-center w-full">
{agentAudioTrack ? (
<AgentMultibandAudioVisualizer
state={agentState}
barWidth={30}
@ -214,19 +246,24 @@ export default function Playground({
borderRadius={12}
gap={16}
/>
) : (
<div className="flex flex-col items-center gap-2 text-gray-700 text-center w-full">
<LoadingSVG />
Waiting for audio track
</div>
)}
</div>
);
if (roomState === ConnectionState.Disconnected) {
return disconnectedContent;
}
if (!agentAudioTrack) {
return waitingContent;
}
return visualizerContent;
}, [
agentAudioTrack,
agentState,
config.settings.theme_color,
subscribedVolumes,
roomState,
]);
const chatTileContent = useMemo(() => {