From 43ac1df86fd80602eef6b00b84229838895668ff Mon Sep 17 00:00:00 2001
From: maxcouture02 <113473929+maxcouture02@users.noreply.github.com>
Date: Fri, 21 Nov 2025 10:10:21 -0500
Subject: [PATCH 1/6] camera size test

---
 src/routes/rovers/[id]/[pathId]/+page.svelte | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/routes/rovers/[id]/[pathId]/+page.svelte b/src/routes/rovers/[id]/[pathId]/+page.svelte
index 3403dc1..e5bb7ed 100644
--- a/src/routes/rovers/[id]/[pathId]/+page.svelte
+++ b/src/routes/rovers/[id]/[pathId]/+page.svelte
@@ -604,9 +604,9 @@
 					<h2 class="mb-4 text-xl font-bold text-blue-900">Live Camera</h2>
 
 					<!-- Camera Feed Display -->
-					<div class="mx-auto mb-4 w-full max-w-2xl" style="aspect-ratio: 820/616;">
+					<div class="mx-auto mb-4 w-full max-w-2xl">
 						<div
-							class="relative h-full w-full overflow-hidden rounded-lg border border-blue-200 bg-black"
+							class="relative w-full min-h-[350px] overflow-hidden rounded-lg border border-blue-200 bg-black"
 						>
 						<!-- Video elements for all three cameras -->
 						<video
@@ -614,9 +614,7 @@
 							autoplay
 							playsinline
 							muted
-							width="1280"
-							height="720"
-							class="absolute inset-0 h-full w-full object-contain {currentCamera === 1
+							class="w-full h-auto {currentCamera === 1
 								? 'block'
 								: 'hidden'}"
 						>
@@ -627,9 +625,7 @@
 							autoplay
 							playsinline
 							muted
-							width="1280"
-							height="720"
-							class="absolute inset-0 h-full w-full object-contain {currentCamera === 2
+							class="w-full h-auto {currentCamera === 2
 								? 'block'
 								: 'hidden'}"
 						>
@@ -640,9 +636,7 @@
 							autoplay
 							playsinline
 							muted
-							width="1280"
-							height="720"
-							class="absolute inset-0 h-full w-full object-contain {currentCamera === 3
+							class="w-full h-auto {currentCamera === 3
 								? 'block'
 								: 'hidden'}"
 						>

From cfa29be6faaf6dc8eb33f2da9c0ebcff2b14f090 Mon Sep 17 00:00:00 2001
From: maxcouture02 <113473929+maxcouture02@users.noreply.github.com>
Date: Fri, 21 Nov 2025 10:19:33 -0500
Subject: [PATCH 2/6] try 2

---
 src/routes/rovers/[id]/[pathId]/+page.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/routes/rovers/[id]/[pathId]/+page.svelte b/src/routes/rovers/[id]/[pathId]/+page.svelte
index e5bb7ed..e025bb0 100644
--- a/src/routes/rovers/[id]/[pathId]/+page.svelte
+++ b/src/routes/rovers/[id]/[pathId]/+page.svelte
@@ -609,11 +609,13 @@
 							class="relative w-full min-h-[350px] overflow-hidden rounded-lg border border-blue-200 bg-black"
 						>
 						<!-- Video elements for all three cameras -->
+						<!-- CSI Camera 1 - Adjust aspect-ratio here to fix stretching (e.g. 4/3, 16/9, 1/1) -->
 						<video
 							id="roverVideo1"
 							autoplay
 							playsinline
 							muted
+							style="aspect-ratio: 4/3; object-fit: fill;"
 							class="w-full h-auto {currentCamera === 1
 								? 'block'
 								: 'hidden'}"
@@ -631,11 +633,13 @@
 						>
 							Your browser does not support the video tag.
 						</video>
+						<!-- CSI Camera 2 - Adjust aspect-ratio here to fix stretching -->
 						<video
 							id="roverVideo3"
 							autoplay
 							playsinline
 							muted
+							style="aspect-ratio: 4/3; object-fit: fill;"
 							class="w-full h-auto {currentCamera === 3
 								? 'block'
 								: 'hidden'}"

From d73bab83922c6e0f091109d0dec402913223c8d2 Mon Sep 17 00:00:00 2001
From: maxcouture02 <113473929+maxcouture02@users.noreply.github.com>
Date: Fri, 21 Nov 2025 10:27:08 -0500
Subject: [PATCH 3/6] try 3

---
 src/routes/rovers/[id]/[pathId]/+page.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/rovers/[id]/[pathId]/+page.svelte b/src/routes/rovers/[id]/[pathId]/+page.svelte
index e025bb0..7d415e6 100644
--- a/src/routes/rovers/[id]/[pathId]/+page.svelte
+++ b/src/routes/rovers/[id]/[pathId]/+page.svelte
@@ -609,13 +609,13 @@
 							class="relative w-full min-h-[350px] overflow-hidden rounded-lg border border-blue-200 bg-black"
 						>
 						<!-- Video elements for all three cameras -->
-						<!-- CSI Camera 1 - Adjust aspect-ratio here to fix stretching (e.g. 4/3, 16/9, 1/1) -->
+						<!-- CSI Camera 1 - Adjust aspect-ratio here to fix stretching (e.g. 1/1, 4/3, 3/4) -->
 						<video
 							id="roverVideo1"
 							autoplay
 							playsinline
 							muted
-							style="aspect-ratio: 4/3; object-fit: fill;"
+							style="aspect-ratio: 1/1; object-fit: fill;"
 							class="w-full h-auto {currentCamera === 1
 								? 'block'
 								: 'hidden'}"
@@ -639,7 +639,7 @@
 							autoplay
 							playsinline
 							muted
-							style="aspect-ratio: 4/3; object-fit: fill;"
+							style="aspect-ratio: 1/1; object-fit: fill;"
 							class="w-full h-auto {currentCamera === 3
 								? 'block'
 								: 'hidden'}"

From 6e3e0455c3c7ebb3c9c13c280cebca10fdad317c Mon Sep 17 00:00:00 2001
From: maxcouture02 <113473929+maxcouture02@users.noreply.github.com>
Date: Fri, 21 Nov 2025 10:33:59 -0500
Subject: [PATCH 4/6] try 4

---
 src/routes/rovers/[id]/[pathId]/+page.svelte | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/routes/rovers/[id]/[pathId]/+page.svelte b/src/routes/rovers/[id]/[pathId]/+page.svelte
index 7d415e6..5ab1d8a 100644
--- a/src/routes/rovers/[id]/[pathId]/+page.svelte
+++ b/src/routes/rovers/[id]/[pathId]/+page.svelte
@@ -604,19 +604,19 @@
 					<h2 class="mb-4 text-xl font-bold text-blue-900">Live Camera</h2>
 
 					<!-- Camera Feed Display -->
-					<div class="mx-auto mb-4 w-full max-w-2xl">
+					<div class="mx-auto mb-4 w-full max-w-2xl" style="aspect-ratio: 820/616;">
 						<div
-							class="relative w-full min-h-[350px] overflow-hidden rounded-lg border border-blue-200 bg-black"
+							class="relative h-full w-full overflow-hidden rounded-lg border border-blue-200 bg-black flex items-center justify-center"
 						>
 						<!-- Video elements for all three cameras -->
-						<!-- CSI Camera 1 - Adjust aspect-ratio here to fix stretching (e.g. 1/1, 4/3, 3/4) -->
+						<!-- CSI Camera 1 -->
 						<video
 							id="roverVideo1"
 							autoplay
 							playsinline
 							muted
 							style="aspect-ratio: 1/1; object-fit: fill;"
-							class="w-full h-auto {currentCamera === 1
+							class="h-full w-auto {currentCamera === 1
 								? 'block'
 								: 'hidden'}"
 						>
@@ -627,20 +627,20 @@
 							autoplay
 							playsinline
 							muted
-							class="w-full h-auto {currentCamera === 2
+							class="w-full h-full object-contain {currentCamera === 2
 								? 'block'
 								: 'hidden'}"
 						>
 							Your browser does not support the video tag.
 						</video>
-						<!-- CSI Camera 2 - Adjust aspect-ratio here to fix stretching -->
+						<!-- CSI Camera 2 -->
 						<video
 							id="roverVideo3"
 							autoplay
 							playsinline
 							muted
 							style="aspect-ratio: 1/1; object-fit: fill;"
-							class="w-full h-auto {currentCamera === 3
+							class="h-full w-auto {currentCamera === 3
 								? 'block'
 								: 'hidden'}"
 						>

From 41b8b313cad16fe3a86e158a4db55b51e9bc2b3c Mon Sep 17 00:00:00 2001
From: maxcouture02 <113473929+maxcouture02@users.noreply.github.com>
Date: Fri, 21 Nov 2025 10:39:51 -0500
Subject: [PATCH 5/6] make black bars white behind video

---
 src/routes/rovers/[id]/[pathId]/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/rovers/[id]/[pathId]/+page.svelte b/src/routes/rovers/[id]/[pathId]/+page.svelte
index 5ab1d8a..a7e2e92 100644
--- a/src/routes/rovers/[id]/[pathId]/+page.svelte
+++ b/src/routes/rovers/[id]/[pathId]/+page.svelte
@@ -606,7 +606,7 @@
 					<!-- Camera Feed Display -->
 					<div class="mx-auto mb-4 w-full max-w-2xl" style="aspect-ratio: 820/616;">
 						<div
-							class="relative h-full w-full overflow-hidden rounded-lg border border-blue-200 bg-black flex items-center justify-center"
+							class="relative h-full w-full overflow-hidden rounded-lg border border-blue-200 bg-white flex items-center justify-center"
 						>
 						<!-- Video elements for all three cameras -->
 						<!-- CSI Camera 1 -->

From 87b1e9efedff1215dc208b8afb5cdf6bd845d718 Mon Sep 17 00:00:00 2001
From: maxcouture02 <113473929+maxcouture02@users.noreply.github.com>
Date: Fri, 21 Nov 2025 10:45:52 -0500
Subject: [PATCH 6/6] manual ctrl cams

---
 src/routes/manual-ctrl/[id]/+page.svelte | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/routes/manual-ctrl/[id]/+page.svelte b/src/routes/manual-ctrl/[id]/+page.svelte
index c01a297..d505e0a 100644
--- a/src/routes/manual-ctrl/[id]/+page.svelte
+++ b/src/routes/manual-ctrl/[id]/+page.svelte
@@ -322,15 +322,14 @@
 							<h3 class="text-xl font-semibold text-blue-900">CSI Camera 1</h3>
 							<!-- <p class="text-xs text-blue-600">{csiStatusMessage}</p> -->
 						</div>
-						<div class="relative flex items-center justify-center bg-black" style="height: 300px;">
+						<div class="relative flex items-center justify-center bg-white" style="height: 300px;">
 							<video
 								id="roverVideoCSI"
 								autoplay
 								playsinline
 								muted
-								width="820"
-								height="616"
-								class="h-full w-full object-contain"
+								style="aspect-ratio: 1/1; object-fit: fill;"
+								class="h-full w-auto"
 							>
 								Your browser does not support the video tag.
 							</video>
@@ -360,14 +359,12 @@
 							<h3 class="text-xl font-semibold text-blue-900">USB Camera (Front)</h3>
 							<!-- <p class="text-xs text-blue-600">{usbStatusMessage}</p> -->
 						</div>
-						<div class="relative flex items-center justify-center bg-black" style="height: 300px;">
+						<div class="relative flex items-center justify-center bg-white" style="height: 300px;">
 							<video
 								id="roverVideoUSB"
 								autoplay
 								playsinline
 								muted
-								width="1280"
-								height="720"
 								class="h-full w-full object-contain"
 							>
 								Your browser does not support the video tag.
@@ -398,15 +395,14 @@
 							<h3 class="text-xl font-semibold text-blue-900">CSI Camera 2</h3>
 							<!-- <p class="text-xs text-blue-600">{csi2StatusMessage}</p> -->
 						</div>
-						<div class="relative flex items-center justify-center bg-black" style="height: 300px;">
+						<div class="relative flex items-center justify-center bg-white" style="height: 300px;">
 							<video
 								id="roverVideoCSI2"
 								autoplay
 								playsinline
 								muted
-								width="820"
-								height="616"
-								class="h-full w-full object-contain"
+								style="aspect-ratio: 1/1; object-fit: fill;"
+								class="h-full w-auto"
 							>
 								Your browser does not support the video tag.
 							</video>