fix: Improved camera capture functionality and UI responsiveness

- camera-capture.mjs
  - Added a private full-screen symbol to manage full-screen states and errors more effectively.
  - Streamlined the camera initialization process by ensuring the stream is stopped before fetching devices. This prevents excess resource usage.
  - Updated the camera selection dropdown to only show if there are available devices and made styling adjustments for better presentation.

- camera-capture.pcss
  - Adjusted the positioning of the full-screen element to sit more comfortably in the UI by changing top spacing from 2rem to 1rem for better alignment.

- camera-capture.mjs (stylesheet)
  - Reformatted import statements and simplified rule insertions for clarity and maintainability, promoting cleaner code practices.

These changes enhance user experience by preventing unnecessary resource use, improving UI layout, and ensuring that errors are handled gracefully.

source/components/content/camera-capture.mjs

@@ -43,6 +43,12 @@ const controlElementSymbol = Symbol("copyElement");
  */
 const videoElementSymbol = Symbol("videoElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const fullScreenElementSymbol = Symbol("fullScreenElement");
+
 /**
  * @private
  * @type {symbol}
@@ -206,11 +212,18 @@ function initCameraControl() {
 		!navigator.mediaDevices ||
 		!navigator.mediaDevices.getUserMedia
 	) {
+		self[fullScreenElementSymbol].style.display = "none";
 		addErrorAttribute(self, "Browser not supported");
 		return;
 	}
 
-	navigator.mediaDevices.enumerateDevices().then((devices) => {
+	navigator.mediaDevices
+		.getUserMedia({ video: true })
+		.then((stream) => {
+			stream.getTracks().forEach((track) => track.stop());
+			return navigator.mediaDevices.enumerateDevices();
+		})
+		.then((devices) => {
 			const cameras = devices.filter((device) => device.kind === "videoinput");
 
 			if (cameras.length === 0) {
@@ -218,16 +231,20 @@ function initCameraControl() {
 				return;
 			}
 
-		// Nur Dropdown anzeigen, wenn mehr als 1 Kamera vorhanden
-		if (cameras.length > 1) {
+			if (cameras.length > 0) {
 				const select = document.createElement("select");
 				select.setAttribute("data-monster-role", "cameraSelector");
 				select.style.marginBottom = "0.5rem";
+				select.style.width = "100%";
+				select.style.maxWidth = "100%";
+				select.style.height = "1.4rem";
+				select.style.marginTop = "0";
+				select.style.marginBottom = "0";
 
 				cameras.forEach((camera, index) => {
 					const option = document.createElement("option");
 					option.value = camera.deviceId;
-				option.text = camera.label || `Kamera ${index + 1}`;
+					option.text = camera.label || `Camera ${index + 1}`;
 					select.appendChild(option);
 				});
 
@@ -235,15 +252,19 @@ function initCameraControl() {
 					startCameraWithDeviceId.call(self, select.value);
 				});
 
-			// Vor dem Video-Element einfügen
+				self[fullScreenElementSymbol].style.top = "2rem";
 				self[controlElementSymbol].insertBefore(select, self[videoElementSymbol]);
 			}
 
-		// Mit der ersten Kamera starten
 			startCameraWithDeviceId.call(self, cameras[0].deviceId);
+		})
+		.catch((err) => {
+			self[fullScreenElementSymbol].style.display = "none";
+			addErrorAttribute(self, err);
 		});
 }
 
+
 function startCameraWithDeviceId(deviceId) {
 	const self = this;
 	navigator.mediaDevices
@@ -254,8 +275,11 @@ function startCameraWithDeviceId(deviceId) {
 			self[emptyHistoryStateElementSymbol].style.display = "none";
 
 			self[videoElementSymbol].srcObject = stream;
+
+			self[fullScreenElementSymbol].style.display = "block";
 		})
 		.catch(function (e) {
+			self[fullScreenElementSymbol].style.display = "none";
 			addErrorAttribute(self, e);
 		});
 }
@@ -444,10 +468,13 @@ function initControlReferences() {
 
 	this[canvasElementSymbol] = this.shadowRoot.querySelector(`canvas`);
 
-	// data-monster-role="emptyHistoryState"
 	this[emptyHistoryStateElementSymbol] = this.shadowRoot.querySelector(
 		`[data-monster-role="emptyHistoryState"]`,
 	);
+
+	this[fullScreenElementSymbol] = this.shadowRoot.querySelector(
+		`[data-monster-role="full-screen"]`,
+	);
 }
 
 /**
@@ -458,7 +485,7 @@ function getTemplate() {
 	// language=HTML
 	return `
         <div data-monster-role="control" part="control">
-            <monster-full-screen part="full-screen" data-monster-role="full-screen" data-monster-option-selector="[data-monster-role=control]"></monster-full-screen>
+            <monster-full-screen part="full-screen" style="display: none" data-monster-role="full-screen" data-monster-option-selector="[data-monster-role=control]"></monster-full-screen>
             <monster-state data-monster-role="emptyHistoryState">
                 <svg slot="visual" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="350"

source/components/content/style/camera-capture.pcss

@@ -25,7 +25,7 @@
 
 [data-monster-role="full-screen"] {
     position:absolute;
-    top:2rem;
+    top:1rem;
     right:1rem;
     z-index: var(--monster-z-index-dropdown);
 }