From 5eddfa935cf46e6b330cf0760c9344368fd50fc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Monnom?= <theo.monnom@outlook.com>
Date: Thu, 29 May 2025 01:05:39 +0200
Subject: [PATCH] use video_fit contain by default (#89)

Co-authored-by: Ben Cherry <ben@livekit.io>
---
 .env.example                             | 2 +-
 src/components/playground/Playground.tsx | 2 +-
 src/hooks/useConfig.tsx                  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.env.example b/.env.example
index 2d5974f..0b9ea4b 100644
--- a/.env.example
+++ b/.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'
diff --git a/src/components/playground/Playground.tsx b/src/components/playground/Playground.tsx
index fec3894..55b0561 100644
--- a/src/components/playground/Playground.tsx
+++ b/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">
diff --git a/src/hooks/useConfig.tsx b/src/hooks/useConfig.tsx
index eb47ce2..287acd4 100644
--- a/src/hooks/useConfig.tsx
+++ b/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",