refactoring

src/routes/(token-based)/view/[vorgang]/[tatort]/+page.svelte

@@ -24,31 +24,34 @@
 	let yRotation = 0;
 	let zRotation = 0;
 
-	let modelViewer;
+	import type { ModelViewerElement } from '@google/model-viewer';
+
+	let modelViewer: ModelViewerElement | null = null;
 
 	$: style = `width: ${progress}%`;
 
-	const onProgress = ({ detail }) => {
+	const onProgress = ({ detail }: { detail: { totalProgress: number } }) => {
 		progress = Math.ceil(detail.totalProgress * 100.0);
 		if (progress == 100) {
 			setTimeout(() => {
 				hideProgressScreen = true;
 			}, 250);
 		} else hideProgressScreen = false;
-	}
+	};
 
 	function onResetView() {
-		cameraAzimuth = 0;
-		cameraPolar = 0;
-		cameraZoom = 100;
-
-		modelViewer.cameraOrbit = cameraOrbit;
-		modelViewer.cameraTarget = cameraTarget;
-		modelViewer.fieldOfView = fieldOfView;
-		cameraAzimuth = 0;
-		cameraPolar = 0;
-		cameraZoom = 100;
-		fieldOfView = '10deg';
+		if (modelViewer) {
+			cameraAzimuth = 0;
+			cameraPolar = 0;
+			cameraZoom = 100;
+			modelViewer.cameraOrbit = cameraOrbit;
+			modelViewer.cameraTarget = cameraTarget;
+			modelViewer.fieldOfView = fieldOfView;
+			cameraAzimuth = 0;
+			cameraPolar = 0;
+			cameraZoom = 100;
+			fieldOfView = '10deg';
+		}
 	}
 
 	function updateCameraOrbit(azimuth: number, polar: number, zoom: number) {
@@ -58,9 +61,10 @@
 	}
 </script>
 
-<div class="h-full model w-full bg-neutral-200 p-4 transition-all delay-250">
+<div class="h-full w-full bg-neutral-200 p-4 transition-all delay-250">
 	<!-- xr-environment -->
 	<model-viewer
+		class="h-full w-full"
 		ar
 		shadow-intensity="1"
 		src={data.url}
@@ -81,18 +85,25 @@
 			class:opacity-0={!hideProgressScreen}
 			class:hidden={!hideProgressScreen}
 		>
-			<button slot="ar-button" id="ar-button"> 👋 Activate AR </button>
+			<!--AR Tracking erstmal ausgeblendet (hidden/flex)-->
+			<div class="hidden p-4 z-10 bg-red-500">
+				<button slot="ar-button" id="ar-button"> 👋 Activate AR </button>
 
-			<div id="ar-prompt">AR-Prompt</div>
+				<div id="ar-prompt">AR-Prompt</div>
+
+				<button id="ar-failure"> AR is not tracking! </button>
 
-			<button id="ar-failure"> AR is not tracking! </button>
-			<div class="flex flex-col bg-white/50">
 				<button
+					class="flex"
 					on:click={() => {
-						console.log(modelViewer.ar, modelViewer.getAttribute('ar-status'));
-					}}>Test</button
+						if (modelViewer) {
+							console.log(modelViewer.ar, modelViewer.getAttribute('ar-status'));
+						}
+					}}>AR Testen</button
 				>
+			</div>
 
+			<div class="flex flex-col bg-white/50">
 				<!--3 Buttons-->
 				<div class="p-2">
 					<Button
@@ -184,22 +195,4 @@
 </div>
 
 <style>
-	model-viewer {
-		height: 100%;
-		width: 100%;
-	}
-
-	/* .vertical-slider {
-		writing-mode: bt-lr; /* Schreibt von unten nach oben (Vertikale Darstellung)
-		transform: rotate(270deg); /* Slider um 270° drehen
-		height: 200px;
-	} */
-
-	.model {
-		height: calc(100%-84px);
-	}
-
-	/* .active-border {
-		border: 2px blue solid;
-	} */
 </style>