use video_fit contain by default (#89)

Co-authored-by: Ben Cherry <[email protected]>

Author: theomonnom

.env.example

@@ -10,7 +10,7 @@ NEXT_PUBLIC_APP_CONFIG="
 title: 'LiveKit Agents Playground'
 description: 'A virtual workbench for your multimodal AI agents.'
 github_link: 'https://github.com/livekit/agents-playground'
-video_fit: 'cover' # 'contain' or 'cover'
+video_fit: 'contain' # 'contain' or 'cover'
 settings:
   editable: true # Should the user be able to edit settings in-app
   theme_color: 'cyan'

src/components/playground/Playground.tsx

@@ -117,7 +117,7 @@ export default function Playground({
   useDataChannel(onDataReceived);
 
   const videoTileContent = useMemo(() => {
-    const videoFitClassName = `object-${config.video_fit || "cover"}`;
+    const videoFitClassName = `object-${config.video_fit || "contain"}`;
 
     const disconnectedContent = (
       <div className="flex items-center justify-center text-gray-700 text-center w-full h-full">

src/hooks/useConfig.tsx

@@ -47,7 +47,7 @@ export type UserSettings = {
 const defaultConfig: AppConfig = {
   title: "LiveKit Agents Playground",
   description: "A virtual workbench for testing multimodal AI agents.",
-  video_fit: "cover",
+  video_fit: "contain",
   settings: {
     editable: true,
     theme_color: "cyan",