From da4ca420f6130b451f895a7a3913b8b27467f051 Mon Sep 17 00:00:00 2001
From: Michael Verdi <hello@michaelverdi.com>
Date: Thu, 31 Jul 2025 19:24:56 -0500
Subject: [PATCH] Fix 2D control panel positioning relative to canvas

- Fix panel positioning calculation to account for panel height
- Position panel bottom edge 10% from canvas bottom (not container)
- Ensure panel stays within canvas bounds when WebGL canvas is active
- Update positioning on window resize for responsive behavior
- Resolves issue where panel appeared partially below canvas
---
 index.html       |  2 +-
 vr180-player.css | 47 ++++++-----------------------------------------
 vr180-player.js  | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/index.html b/index.html
index de00596..66a501e 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
 				<source src="sbs-video.mp4" type="video/mp4">
 			</video>
 			<button id="playBtn" aria-label="Play video">
-				<img src="play.svg" alt="Play">
+				<img src="play.png" alt="Play">
 			</button>
 			<div id="panel">
 				<div id="status">
diff --git a/vr180-player.css b/vr180-player.css
index 39dffe4..c9186a8 100644
--- a/vr180-player.css
+++ b/vr180-player.css
@@ -58,7 +58,7 @@
 	bottom: 10%;
 	left: 50%;
 	transform: translateX(-50%);
-	max-width: 1000px;
+	width: 80%;
 	padding: 20px;
 	border-radius: 30px;
 	background: rgba(0, 0, 0, 0.70);
@@ -67,7 +67,7 @@
 	z-index: 100;
 	opacity: 0;
 	visibility: hidden;
-	transition: opacity 0.3s ease, visibility 0.3s ease;
+	transition: opacity 0.15s ease, visibility 0.15s ease;
 	pointer-events: none;
 }
 
@@ -77,11 +77,6 @@
 	pointer-events: auto;
 }
 
-#panel img {
-	width: 100%;
-	height: auto;
-}
-
 #status {
 	margin: 0 12px 12px 12px;
 }
@@ -132,14 +127,9 @@
 }
 
 #panel button {
-	all: unset;
 	cursor: pointer;
-	border-radius: 4px;
-	transition: opacity 0.15s ease-in-out;
-}
-
-#panel button:hover {
-	opacity: 0.8;
+	border: none;
+	background-color: transparent;
 }
 
 #fullscreen {
@@ -217,11 +207,11 @@
 }
 
 #play2.playing {
-	background-image: url(pause2.png);
+	background-image: url(pause.png);
 }
 
 #play2.playing:hover {
-	background-image: url(pause2-hover.png);
+	background-image: url(pause-hover.png);
 }
 
 #forward {
@@ -237,28 +227,3 @@
 #forward:hover {
 	background-image: url(forward-hover.png);
 }
-
-/* Responsive adjustments for 2D controls */
-@media (max-width: 600px) {
-	#panel {
-		max-width: 90%;
-		padding: 16px;
-	}
-	
-	#controls {
-		grid-template-columns: 36px 1fr 132px 1fr 36px;
-		height: 36px;
-	}
-	
-	#fullscreen, #mute, #back, #play2, #forward {
-		width: 36px;
-		height: 36px;
-		background-size: 36px 36px;
-	}
-	
-	#nav {
-		grid-template-columns: 36px 36px 36px;
-		grid-gap: 8px;
-		height: 36px;
-	}
-}
diff --git a/vr180-player.js b/vr180-player.js
index 7628bb9..fd0e772 100644
--- a/vr180-player.js
+++ b/vr180-player.js
@@ -737,6 +737,9 @@ function onWindowResize() {
 			renderer.setSize(videoWidth, videoHeight);
 			camera2D.aspect = videoWidth / videoHeight;
 			camera2D.updateProjectionMatrix();
+			
+			// Reposition control panel after resize
+			position2DControlPanel();
 		}
 	} else {
 		// Normal VR/window mode
@@ -1031,6 +1034,32 @@ function toggle2DFullscreen() {
 	}
 }
 
+function position2DControlPanel() {
+	if (!is2DMode || !controlPanel || !renderer) return;
+	
+	// Get the canvas dimensions and position
+	const canvas = renderer.domElement;
+	const canvasRect = canvas.getBoundingClientRect();
+	const containerRect = document.getElementById('vr-container').getBoundingClientRect();
+	
+	// Calculate 10% from the bottom of the canvas
+	const bottomOffset = canvasRect.height * 0.1;
+	
+	// Get the panel's height
+	const panelHeight = controlPanel.offsetHeight;
+	
+	// Calculate the top position: canvas bottom minus offset minus panel height, relative to container
+	const topPosition = (canvasRect.bottom - containerRect.top) - bottomOffset - panelHeight;
+	
+	// Position the panel so its bottom edge is 10% from canvas bottom
+	controlPanel.style.position = 'absolute';
+	controlPanel.style.top = `${topPosition}px`;
+	controlPanel.style.bottom = 'auto'; // Clear any previous bottom positioning
+	controlPanel.style.left = '50%';
+	controlPanel.style.transform = 'translateX(-50%)';
+	controlPanel.style.zIndex = '1000'; // Ensure it's above the canvas
+}
+
 function formatTime(seconds) {
 	if (!isFinite(seconds)) return '00:00:00';
 	
@@ -1256,6 +1285,9 @@ function start2DMode() {
 	// Show 2D control panel
 	show2DControlPanel();
 	
+	// Position control panel relative to canvas
+	position2DControlPanel();
+	
 	// Start 2D render loop
 	render2D();
 }