Adds support for rendering video with cover or contain (#28)

.env.example

@@ -11,6 +11,7 @@ title: 'LiveKit Agent Playground'
 description: 'LiveKit Agent Playground allows you to test your LiveKit Agent integration by connecting to your LiveKit Cloud or self-hosted instance.'
 github_link: 'https://github.com/livekit-examples/agent-playground'
 theme_color: 'cyan'
+video_fit: 'cover' # 'contain' or 'cover'
 outputs:
   audio: true # Enable or disable audio output
   video: true # Enable or disable video output

src/components/playground/Playground.tsx

@@ -57,6 +57,7 @@ export interface PlaygroundProps {
   showQR?: boolean;
   onConnect: (connect: boolean, opts?: { token: string; url: string }) => void;
   metadata?: PlaygroundMeta[];
+  videoFit?: "contain" | "cover";
 }
 
 const headerHeight = 56;
@@ -72,6 +73,7 @@ export default function Playground({
   defaultColor,
   onConnect,
   metadata,
+  videoFit,
 }: PlaygroundProps) {
   const [agentState, setAgentState] = useState<AgentState>("offline");
   const [themeColor, setThemeColor] = useState(defaultColor);
@@ -201,12 +203,13 @@ export default function Playground({
   useDataChannel(onDataReceived);
 
   const videoTileContent = useMemo(() => {
+    const videoFitClassName = `object-${videoFit}`;
     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 object-cover object-position-center w-full h-full"
+            className={`absolute top-1/2 -translate-y-1/2 ${videoFitClassName} object-position-center w-full h-full`}
           />
         ) : (
           <div className="flex flex-col items-center justify-center gap-2 text-gray-700 text-center h-full w-full">
@@ -216,7 +219,7 @@ export default function Playground({
         )}
       </div>
     );
-  }, [agentVideoTrack]);
+  }, [agentVideoTrack, videoFit]);
 
   const audioTileContent = useMemo(() => {
     return (

src/hooks/useAppConfig.tsx

@@ -7,6 +7,7 @@ export type AppConfig = {
   description: string;
   github_link?: string;
   theme_color?: string;
+  video_fit?: "cover" | "contain";
   outputs: {
     audio: boolean;
     video: boolean;
@@ -24,6 +25,7 @@ const defaultConfig: AppConfig = {
   title: "Agents Playground",
   description: "A playground for testing LiveKit Agents",
   theme_color: "cyan",
+  video_fit: "cover",
   outputs: {
     audio: true,
     video: true,

src/pages/index.tsx

@@ -159,6 +159,7 @@ export default function Home() {
               defaultColor={appConfig?.theme_color ?? "cyan"}
               onConnect={handleConnect}
               metadata={metadata}
+              videoFit={appConfig?.video_fit ?? "cover"}
             />
             <RoomAudioRenderer />
             <StartAudio label="Click to enable audio playback" />

tailwind.config.js

@@ -37,6 +37,8 @@ const safelist = [
   'bg-black',
   'bg-white',
   'transparent',
+  'object-cover',
+  'object-contain',
   ...shadowNames,
   ...textShadowNames,
   ...shades.flatMap(shade => [