status banner

demo-xr-status.js

@@ -0,0 +1,31 @@
+const statusElement = document.querySelector('[data-demo-xr-status]');
+
+if (statusElement) {
+	updateXrStatus(statusElement);
+}
+
+async function updateXrStatus(element) {
+	if (!window.isSecureContext) {
+		element.textContent = 'Immersive WebXR is blocked on this origin. Use HTTPS, a trusted tunnel, or a deployed CDN URL for headset testing.';
+		element.dataset.state = 'blocked';
+		return;
+	}
+
+	if (!navigator.xr) {
+		element.textContent = 'Immersive WebXR is unavailable in this browser.';
+		element.dataset.state = 'blocked';
+		return;
+	}
+
+	try {
+		const supported = await navigator.xr.isSessionSupported('immersive-vr');
+		element.textContent = supported
+			? 'Immersive WebXR is available. Use the player button to enter VR.'
+			: 'This browser reports that immersive-vr is not supported.';
+		element.dataset.state = supported ? 'ready' : 'blocked';
+	} catch (error) {
+		element.textContent = 'Unable to check immersive-vr support. See the browser console for details.';
+		element.dataset.state = 'blocked';
+		console.error('DEMO_XR_STATUS_ERROR:', error);
+	}
+}